Aptana로 javascript로 삽질중에-_-; 좀 쉴겸해서-_-;

AIR는 기존에 우리가 알던 html, ajax, javascript등을 이용해서 데스크탑 애플리케이션을 개발할 수 있습니다. 전에 다음openapi를 이용하고, prototype기반인 다음블로그검색을 만들었었습니다.

http://mudchobo.tomeii.com/tt/269

이 코드를 거의 그냥 이용해서 AIR애플리케이션으로 바꿀 수 있습니다.
우선 Aptana를 설치해야합니다.

http://mudchobo.tomeii.com/tt/241
여기에 Aptana설치 후기가 있습니다-_-;
기본으로 AIR프로젝트 만드는 건 안깔려있으니 따로 설치해야합니다. 글을 잘 읽어보시면 설치하기 쉽습니다^^

이제 프로젝트를 만들어봅시다.
File -> New - Project선택하면 Aptana Projects폴더에 -> Adobe AIR Project선택.
Project이름은 DaumBlogSearchAir라고 합시다-_-;
다음을 하면 뭔 옵션이 이래 많아-_-; XML파일을 사전에 설정할 수 있게 해놨는데 걍 디폴트로 해서 해봅시다.
마지막 다음으로 가면 javascript framework를 선택할 수 있습니다.
Prototype을 가볍게 체크해고 Finish를 누릅시다.

처음부터 뭔 쌤플로 자동으로 작성한게 많은지-_-;
DaumBlogSearchAir.html파일을 열어보면 코드가 많습니다. 가볍게 다 지워버리고-_-;
DaumBlogSearchAir.html
[code]<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Daum Blog Search</title>
        <link href="sample.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript" src="lib/prototype/prototype.js"></script>
        <script type="text/javascript" src="js/DaumSearch.js"></script>
    </head>
    <body>
        <h1>Daum Blog Search!</h1>
        <form onsubmit="searchDaum(this.query.value); return false;">
            <fieldset>
                <label>Search for</label>
                <input type="text" name="query" /><input type="submit" value="검색" />
            </fieldset>
        </form>
        <div id="results"></div>
    </body>
</html>
[/code]
요렇게 작성합니다.
그럼 이제 우리가 작성할 것은 js폴더에 있는 DaumSearch.js파일 입니다.
작성해봅시다.
DaumSearch.js
[code]
function searchDaum(query){
    var searchPacket = {
        method: 'get',
        parameters: {
            q: query,
            result: '10',
            start: '1',
            output: 'json',
            apikey: '발급받은 apikey',
        },
        onSuccess: parseResponse
    }
    new Ajax.Request('http://apis.daum.net/search/blog', searchPacket);
}


function parseResponse(data){
    var children;
    var results = $("results");
   
    while (results.hasChildNodes()) {
        results.removeChild(results.lastChild);
    }
   
    var json = data.responseText.evalJSON();
   
    // 개수를 air에서 제공하는 trace로 찍어보자-_-;
    air.trace(json.channel.result);
   
    for (var i = 0; i < json.channel.result; i++) {
        var title = json.channel.item[i].title;
        var summary = json.channel.item[i].description;
        var url = json.channel.item[i].link;
       
        var link = new Element("a", {
            "href": url,
            "target": "_blank"
        }).update(title);
        var header = new Element("h2").insert(link);
        var para = new Element("p").update(summary);
       
        results.insert(header);
        results.insert(para);
    }
}
[/code]
간단합니다. 그냥 다음에 url요청해서 데이터를 받아서 parseResponse메소드가 파싱하죠.
그리고, airaliases.js파일을 선언하면 air객체를 사용할 수 있는데, 기존 Flex에서 제공하는 몇몇 기능을 사용할 수 있습니다. Socket도 있고, File관련된 것도 있군요. 이건 나중에 공부해야겠군요.
air.trace하면 로그를 남길 수 있습니다.
아직 Aptana에서 디버깅이 안되기 때문에-_-;(완전 최악-_-) trace를 열심히 찍어줘야할 겁니다-_-;

실행을 해봅시다.
Ctrl + F11누르면 실행됩니다.

사용자 삽입 이미지

음....근데 <b>가 나오네. 왜그러지-_-;

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.06.27 18:03  댓글주소  수정/삭제  댓글쓰기

    디버깅이 안되는군요.. 안습;

    • 머드초보 2008.06.30 22:11  댓글주소  수정/삭제

      검쉰님 반가워요~
      아네 ^^ 디버깅이 안돼요 ^^ 디버깅만 되도 뭔가 해보려고 하겠는데 에러도 잡기힘든 자바스크립트라 ^^

 

클라이언트에서 ajax로 요청했을 때 자료를 손쉽게 파싱하기 위해서 json으로 클라이언트에 던져줄 때가 편할 때가 있습니다. 그래서 손쉽게 json으로 변환하는 라이브러리가 있습니다.

http://json-lib.sourceforge.net/

여기보면 json-lib라는 놈이 있는데 json으로 손쉽게 변환해주는 라이브러리입니다.

  • jakarta commons-lang 2.3
  • jakarta commons-beanutils 1.7.0
  • jakarta commons-collections 3.2
  • jakarta commons-logging 1.1
  • ezmorph 1.0.4

    이것들이 필요하다더군요. 위에 4개는 apache에 가면 있구요. ezmorph는 구글링해서 찾아서 받으세요.
    그리고 JSON-LIB인 json-lib-2.2.1-jdk15.jar가 필요합니다.

    사용법은 매우 간단합니다.
    [code]
    public class JsonTest {
     
     @Test
     public void Bean2Json()
     {
      MyBean myBean1 = new MyBean();
      myBean1.setId(1);
      myBean1.setName("mudchobo");
      MyBean myBean2 = new MyBean();
      myBean2.setId(2);
      myBean2.setName("shit");
     
      List<MyBean> mybeanList = new ArrayList<MyBean>();
      mybeanList.add(myBean1);
      mybeanList.add(myBean2);
     
      JSONArray jsonArray = JSONArray.fromObject(mybeanList);
      System.out.println("mybeanList - " + jsonArray);
     
      Map<String, Object> map = new HashMap<String, Object>();
      map.put("beanlist", jsonArray);
     
      JSONObject jsonObject = JSONObject.fromObject(map);
      System.out.println("json - " + jsonObject);
     }
    }
    [/code]
    Bean 2개를 List에 add를 한다음에 JSONArray라는 객체가 List를 배열로 만드는놈입니다.

    mybeanList - [{"id":1,"name":"mudchobo"},{"id":2,"name":"shit"}]

    이런식으로 만듭니다.
    저거를 JSONObject클래스를 이용해서 앞에 이름을 붙여줍니다. Map을 이용하면 됩니다
    Map을 이용해서 put에서 첫번째 인자에 이름을 넣고, 두번째 인자에 방금 생성한 Array를 넣으면 됩니다.
    그리고 JSONObject.fromObject메소드를 이용해서 생성하게 되면 이렇게 됩니다.

    json - {"beanlist":[{"id":1,"name":"mudchobo"},{"id":2,"name":"shit"}]}

    이상입니다-_-;

  •  
    Posted by 머드초보

    댓글을 달아 주세요

    1. BlogIcon Keep Burning 2010.03.16 12:00  댓글주소  수정/삭제  댓글쓰기

      안녕하세요.
      http://www.json.org/ 안에 있는 기존 lib만 사용하다가 문제점이 생겨서(List에 있는 bean은 제대로 못 만들더군요...) 고생하고 있었는데, 좋은 방법 가르쳐 주셔서 감사합니다.

    2. Developer 2015.07.19 22:45  댓글주소  수정/삭제  댓글쓰기

      좋은 정보네요. 감사합니다.

     

    둘다 "제레미 키스"라는 사람이 쓴건데요.
    초보자가 읽기 매우 편하고, 번역도 매우 읽기 쉽게 해놓아서 매우 추천할 만한 도서입니다.
    AJAX를 안지는 1년이 다되가지만, 공부를 해본적이 없거든요.
    근데 방탄Ajax를 읽게 되면서 개념이 점점 잡히기 시작했습니다-_-;

    두가지 책에 좀 중복되는 내용이 나오는데요. DOM스크립트는 주로 DOM에 관해서 나오고, 방탄Ajax는 Ajax에 대해서 나오는.....-_-;
    어쨌든 정말 이해하기 쉽게 써놨어요.
    추천하려고 글을 썼는데 말이 필요없군요. 그냥 보면 됩니다!!

    사용자 삽입 이미지

    추천 책입니다.

    사용자 삽입 이미지

    추천 책입니다.


    PS. 혹시 백석대학교 정보통신학부 학생분들... 아직도 인터넷프로그래밍 시간에 "자바스크립트의 기초 및 응용 실습" 책으로 강의 하나요? 음.....다른책으로 바꿔야할 듯하네요. 실무에 도움이 될만한 내용이 별로 없을 뿐더러 웹표준을 무시한 무시무시한 책입니다. IE위주로 작성이 되어있어서 FF에서 안되는거 많을 껍니다. ^^ 저도 4년전에 배웠었는데 ^^ 웹은 변화가 너무 많아서 옛날 책으로 공부를 하면 안되겠더라구요. 그래도 기본은 다 비슷하니 ^^
    사용자 삽입 이미지

    비추천책입니다-_-;

     
    Posted by 머드초보

    댓글을 달아 주세요

    1. BlogIcon 검쉰 2008.05.26 22:55  댓글주소  수정/삭제  댓글쓰기

      학교다닐때 홈피만들기 알바때문에 자바스크립트 조금 손대보곤 한번도 해본 적이 없네요 ^^;
      Head Rush Ajax 사서 보긴 했는데, 아직 잘 모르겠 ^^;
      위에 둘다 에이콘에서 나온 거네요. 에이콘책들이 요즘 맘에 듭니다. ㅎㅎ
      좀 한가해지면 사봐야겠네요 ;)

      • 머드초보 2008.05.28 08:40  댓글주소  수정/삭제

        검쉰님 항상 방문해주셔서 감사해요 ^^
        자바스크립트는 저도 학교다닐 때 과제로 홈페이지 만들 때 빼고는 해본적이 없어요 ^^
        최근에 하는 일이 있어서 공부를 하고 있지요 ^^
        재미있는 언어인 것 같아요^^

     

    최근 자바스크립트를 공부하고 있는데요.
    방탄AJAX라는 책을 보고 있는데, 여기에는 yahoo로 하는 방법이 있어서 저는 daum으로-_-; prototype을 이용해서 더욱 간결하게(별로 간결하지않아-_-) 만들어봤습니다.

    [code]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
     <head id='headId'>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>Untitled Document</title>
      <script src="lib/prototype/prototype.js" type="text/javascript"></script>
      <script type="text/javascript" src="daumSearch.js"></script>
     </head>
     <body>
      <h1>Daum Blog Search!</h1>
      <form onsubmit="searchDaum(this.query.value); return false;">
       <fieldset>
        <label>Search for</label>
        <input type="text" name="query" />
        <input type="submit" value="검색" />
       </fieldset>
      </form>
      <div id="results"></div>
     </body>
    </html>
    [/code]
    HTML은 간단합니다. prototype라이브러리를 선언하구요. 이제 작성할 daumSearch.js파일을 선언했군요.
    그리고, form부분에서는 query라는 name을 가진 input에 쿼리를 날리면, searchDaum이라는 메소드를 호출하게 되어있습니다.
    daumSearch.js를 보도록 합시다.

    [code]
    function getScript(url)
    {
     var scripttag = new Element("script",{
       "type": "text/javascript",
       "src": url});
     var head = $$("head");
     head[0].insert(scripttag);
    }

    function searchDaum(query)
    {    
     var url = "http://apis.daum.net/search/blog?"
     url += "q=" + encodeURIComponent(query);
     url += "&result=10";
     url += "&start=1";
     url += "&output=json";
     url += "&apikey=다음에서 apikey발급받고 넣으세요";
     url += "&callback=parseResponse";
     
     getScript(url);
    }

    function parseResponse(data)
    {
     var children;
     var results = $("results");
     
     while (results.hasChildNodes())
     {
      results.removeChild(results.lastChild);
     }
     
     for (var i=0; i<data.channel.result; i++)
     {
      var title = data.channel.item[i].title;
      var summary = data.channel.item[i].description;
      var url = data.channel.item[i].link;
     
      var link = new Element("a", {"href":url, "target":"_blank"}).update(title);
      var header = new Element("h2").insert(link);
      var para = new Element("p").update(summary);
     
      results.insert(header);
      results.insert(para);
     }
    }
    [/code]
    getScript함수는 해당 url을 head부분에 자바스크립트 선언으로 추가를 하는 역할을 합니다. json은 자바스크립트이기 때문에 페이지에 가져올 수 있습니다. daum검색은 output을 json으로 리턴이 되기 때문에 가능합니다.
    그러면 json객체를 사용할 수 있습니다.
    callback함수는 parseResponse입니다. 이 함수는 그냥 data부분에 json으로 받게 되는데 그것을 그냥 파싱만 해줘서 엘리먼트를 생성해서 results div에다가 엘리먼트를 추가하는 식으로 되어있습니다.

    이상입니다 ^^

    사용자 삽입 이미지

     
    Posted by 머드초보

    댓글을 달아 주세요