몰랐는데, 그냥 자신의 도메인에서 가져올 땐 잘 가져와지는데, 다른 도메인에서 하려니까 잘 안되서 찾아보니 하는 방법이 있네요.
예로 다음 오픈api같은 경우 callback파라메터에 메소드명을 넣어주면 "메소드명({jsondata})" 형태로 넘어옵니다.
그래서 크로스도메인을 사용하려면 이와 같이 구현해야합니다.

다음OpenAPI를 보면 위와 같이 json이 출력이 됩니다.
url : http://apis.daum.net/contents/movie?apikey=키값&q=awake&output=json&callback=aa
결과 : aa({json~~})

그래서 실제 크로스도메인형태로 구현할 때 callback함수를 받은 값을 앞에다가 그냥 넣어주면 됩니다-_-

php코드는 대충 이런식으로-_-
[code]$json = $_GET["c"] . "(" . json데이터 . ")";
echo $json;[/code]

아.......아마 저런 형태로 안하면 callback함수가 호출 되지 않고 firebug에서 이런 에러를 뿜을 꺼에요.
"invalid label"
이것 때문에 미치는 줄 알았는데, crossdomain인 경우에는 이런식으로 해줘야하더군요.

참고사이트
http://www.ajaxlines.com/ajax/stuff/article/jquery_ajax_cross_domains_using_jsonp_getjson.php
 
Posted by 머드초보

댓글을 달아 주세요

 
주소는 여기입니다.
http://www.calendarview.org/

일하다가 데이트픽커가 좀 필요해서 만들기 귀찮고 해서-_-; 찾아보던중-_-;
매우 심플한 Date Picker를 발견했습니다.

Prototype과 Script aculous기반의 Calendar입니다.
Prototype은 이곳에서 다운.
http://www.prototypejs.org/download
Script Aculous는 이곳에서 다운(필요한 것은 builder.js파일 1개뿐)
http://script.aculo.us/downloads

릴리즈 히스토리를 보게 되면 더이상 업데이트가 되지 않고 있습니다-_-;

암튼 한줄이면 바로 생성할 수 있습니다.

[code]
Calendar.setup({
    dateField      : 'fromdate',
    triggerElement : 'fromDateButton'
});
[/code]
triggerElement에 버튼 id를 넣어주면 버튼을 클릭했을 때 Calendar가 표시됩니다.
dateField는 Calendar에서 날짜를 클릭하면 해당 dateField에 YYYY-MM-DD형식으로 표시해줍니다.
 
Posted by 머드초보

댓글을 달아 주세요

  1. Rocket 2010.04.14 19:07  댓글주소  수정/삭제  댓글쓰기

    오~ 깔끔하고 좋은데요~
    좋은 정보 감사합니다~ㅎㅎ

  2. 땡큐요 2011.09.22 16:37  댓글주소  수정/삭제  댓글쓰기

    굉장히 깔끔하고 심플하네요..프로토타입이 너무 복잡한것 같긴 하지만 나름 응용해서 쓰면 좋을것같아요 ^^ 감사합니다.

 
이거 완전 신기하네요-_-;
HTMLLoader라는 클래스가 AIR전용으로 있는데요.
HTML을 읽어와서 보여주는 역할 뿐아니라 JAVASCRIPT함수를 호출할 수 있으며(ActionScript3에서 자바스크립트 문법을 그대로 사용할 수 있는 듯 합니다-_- 아직많이 해보지는 않았지만-_-), 물론 자바스크립트 프레임워크 메소드도 호출이 가능하겠죠.

한번 해보니 잘 되네요-_-;

AIR로 프로젝트를 만들고, src폴더에 prototype-1.6.0.2.js 파일을 넣구요.
prototypetest.html파일을 아래와 같이 작성했습니다.
[code]
<?xml version="1.0" encoding="EUC-KR" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AIR와 JAVASCRIPT(prototype)연동</title>
<script src="prototype-1.6.0.2.js" type="text/javascript"></script>
</head>
<body>
<div id="myDiv">
안녕하세요!<br />
후....추석날 뭔짓이냐..-_-;
</div>
</body>
</html>
[/code]
저기 DIV내용을 FLEX로 가져오겠습니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private var _htmlLoader:HTMLLoader;
           
            private function clickHandler():void
            {
                _htmlLoader = new HTMLLoader();
                _htmlLoader.addEventListener(Event.COMPLETE, completeHandler);
                _htmlLoader.load(new URLRequest("prototypetest.html"));
            }
           
            private function completeHandler(event:Event):void
            {
                Alert.show(_htmlLoader.window.$("myDiv").innerHTML);
            }
        ]]>
    </mx:Script>
   
    <mx:Button label="DIV내용을 프로토타입함수 사용해서 가져오기" click="clickHandler()"/>
   
</mx:WindowedApplication>
[/code]
간단합니다. HTMLLoader를 이용해서 HTML파일을 읽어와서 다 읽어오게 되면, HTMLLoader객체에 포함되어있는 window라는 property가 있는데 이것을 이용해서 prototype함수를 호출하면 됩니다.
$('') 요게 먹힙니다-_-; 아래는 결과입니다.
사용자 삽입 이미지

우선 이게 되서 제가 기쁜게...Oauth인증이.....AIR에서 안되더라구요-_-;
AIR에서도 되는군요-_-; 다시 시도를...-_-;
근데, 신기하게 JAVASCRIPT에서는 되더라구요. 그래서 왠지 JAVASCRIPT를 이용해서 인증하고 사용하면 될 것 같은 느낌이 들어서 시도해보려고 해요. 망할..Oauth-_-;

 
Posted by 머드초보

댓글을 달아 주세요

  1. 2010.10.05 14:10  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 머드초보 2010.11.05 19:27  댓글주소  수정/삭제

      htmlloader에서 데이터를 가져오려면 js방법말고는 없는 걸로 알고 있습니다만ㅠㅠ
      저도 잘모르겠네요ㅠㅠ

  2. 2012.06.01 10:15  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. BlogIcon 찌질개발자 2012.06.01 10:33  댓글주소  수정/삭제  댓글쓰기

    질문이 있어서요.. 위의 글 내용은 AIR에서 html을 가볍게 불러올수있다고 하셨는데.. 그럼 요즘의 HTML5도 불러올수있나요? 제가 알기엔 html과 좀 달라서 htmlloader로는 안된다고 하고, 제가 해봣는데 안되네요.. 혹시 아시면 알려주실수있으시나요? 아니면 TIP이라도..

 
자바스크립트와 Flex와 통신을 해주는 FABridge라는 놈은.....
우선 처음에 접하게 되면 혈압을 약 50%를 상승시켜주는 효과를 가져다 줍니다.

그 이유는 로컬에서는 테스트를 할 수 없습니다-_-;
즉, file:///D:/workspace/flex/~~~ 요런 경로에서는 실행할 수 없습니다.
처음에 그냥 flex builder에서 실행할 때에는 아무런 경고가 뜨지 않습니다. 하지만, export해서 build release를 한다음에 bin-release에 있는 html파일을 실행하면 요런 에러가 뜹니다-_-; 이걸로 혈압이 10%상승했죠.
SecurityError: Error #2060: 보안 샌드박스 문제가 발생했습니다. ExternalInterface 호출자 file:///D:/workspace/flex/FABridgeTest111/bin-release/FABridgeTest.swf은(는) file:///D:/workspace/flex/FABridgeTest111/bin-release/FABridgeTest.html에 액세스할 수 없습니다.
    at flash.external::ExternalInterface$/_initJS()
    at flash.external::ExternalInterface$/addCallback()
    at bridge::FABridge/initializeCallbacks()
    at bridge::FABridge()
    at FABridgeTest/_FABridgeTest_FABridge1_i()
    at FABridgeTest()
    at _FABridgeTest_mx_managers_SystemManager/create()
    at mx.managers::SystemManager/initializeTopLevelWindow()
    at mx.managers::SystemManager/http://www.adobe.com/2006/flex/mx/internal::docFrameHandler()
아놔...그렇구나....-_-; 그래서 꼼수로....톰캣과 blazeds를 이용합니다-_-;
프로젝트를 생성할 때 ProjectName에 FABridgeTest로 하고, Web application으로 하고, Application ServerType을 J2EE로합니다. 톰캣을 사용하는 겁니다. 이렇게 생성한 놈은 실행할 때 http://localhost:8080/프로젝트명/프로젝트명.html로 실행해주기 때문에 테스트를 할 수 있습니다.
Next를 하고, Target runtime에 tomcat을 설정해주고, Flex War파일에는 blazeds.war파일을 선택합니다. Finish를 선택하여 프로젝트를 만듭니다.

기존에 있던 index.templete.html은 FABridge사용에 문제가 좀 있어서 다시 생성만들어야합니다.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html
여기에 가면 templete을 만들어 놓은 것이 있는데 다운받고 압축을 풀면, html-template폴더가 있는데, 기존의 html-template폴더 날려버리고, 이걸로 대체합니다.

이제 필요한 것은 FABridge.js파일인데, 이 파일은 기존의 것을 사용하면 swfobject 2.1에서는 사용할 수 없습니다. 그래서 수정한 버전이 필요합니다. 기존것으로 하려다 혈압이 약 20%상승한 듯 합니다.
http://www.swffix.org/swfobject/swfobject_flex3/
이곳에 가면 예제와 FABridge.js와 history.js파일이 있는데 이걸 html-templete폴더와 ./history폴더에 각각 복사합니다.
예제를 만들어봅시다.
index.templete.html파일을 열어서 bridgeName을 지정해줍니다.
[code]
var flashvars = {
    bridgeName: "mudchobo"
};
[/code]
지정해주지 않으면 flash가 디폴트가 됩니다.
html-templete폴더에 test.js파일을 만들어서 테스트를 만들어봅시다.
test.js
[code]

var flexApp;

FABridge.addInitializationCallback( "mudchobo", function() {
    flexApp = FABridge.mudchobo.root();
    var callback = function() {
        alert('flex로 호출한 javascript메소드');
    }
    flexApp.getMyButton().addEventListener("click", callback);
});

function callFlexFunction() {
    flexApp.flexFunction('javascript로 호출한 flex메소드');
}
[/code]
FABridge.addInitializationCallback함수는 birdge이름이 mudchobo인 flash가 초기화가 다 되면 호출이 되는 듯합니다. 로드가 다 된 상태면 저 뒤에 함수를 호출하게 되는 듯합니다.
window.onload에다가 때려박으면 FABridge.mudchobo가 undefined가 되더라구요. 이걸로 혈압이 약 10%상승했습니다.
javascript에서 flex버튼 이벤트가 발생했을 때 이벤트를 걸 수 있습니다. getMyButton()네이밍 룰은 flex에서 버튼 id가 myButton이면 getMyButton으로 해당 컴포넌트를 가져올 수 있습니다. id가 mudchobo면 getMudchobo()가 되겠죠. addEventListener에 click시 callback함수를 호출하도록 이벤트를 추가합니다.

그리고, callFlexFunction이라는 메소드를 추가해서 이것은 flex메소드를 호출하는 겁니다.
flexApp객체를 통해 그냥 함수명을 호출하면 호출이 됩니다.

index.templete.html에다가는 head부분에다가
[code]
<script type="text/javascript" src="FABridge.js"></script>
<script type="text/javascript" src="test.js"></script>
[/code]
body부분에다가 button을 추가
[code]
<div>
    <input type="button" id="javascriptButton" value="callFlex" onclick="callFlexFunction();"/>
</div>
[/code]
이제 flex코드로 가봅시다. 우선 FABridge.as파일이 필요합니다. 이 파일은 C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.0.0\frameworks\javascript\fabridge\src에 있습니다. 아주 꼭꼭 숨겨두셨어요-_-;
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:bridge="bridge.*" width="300" height="150">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function flexFunction(data:String):void
            {
                Alert.show(data);
            }
        ]]>
    </mx:Script>
   
    <mx:Button id="myButton" label="callJavaScript" />
   
    <bridge:FABridge />
</mx:Application>
[/code]
중요한 점은 xmlns:bridge="bridge.*"랑 <bridge:FABridge /> 입니다.
이제 실행을 해봅시다.
아...여기서 이제 html-templete내용의 js파일을 고쳤는데 파폭에서 열고 소스보기하면 안바뀌어 있을 때가 있습니다. 그때는 Flex메뉴에서 Project -> clean을 해주면 되더라구요. 이걸로 혈압 10%상승!

실행하면 localhost로 뜨기 때문에 잘 될 겁니다. 소스파일입니다.

다음시간엔 실제 ajax를 요청해봐야겠다-_-;
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 꽃녀 2008.08.07 10:13  댓글주소  수정/삭제  댓글쓰기

    좋은정보 감사합니다.
    혈압 60% 상승한 관계로
    조금 있다가 다시봐야겠네용 ;;

    • 머드초보 2008.08.07 13:46  댓글주소  수정/삭제

      아넵 ^^
      혈압이....-_-;
      FABridge랑 swfobject를 연동하려다보니 배로 상승하더군요^^

  2. BlogIcon 검쉰 2008.08.07 14:40  댓글주소  수정/삭제  댓글쓰기

    60^2 % 상승할지도.. ㄷㄷㄷ

    • 머드초보 2008.08.07 14:48  댓글주소  수정/삭제

      핫핫 고혈압으로 쓰러져요 ^^
      바로 댓글을 달아주는 센스-_-;
      남들이 보면 일은 안하고 블로그만 하는줄알겠어요 ㅠㅠ
      이제 일해야지 ㅠ

  3. BlogIcon 전영재 2009.08.04 16:19  댓글주소  수정/삭제  댓글쓰기

    1년이 지나도 혈압은 마찬가지네요.

    • 머드초보 2009.08.07 23:34  댓글주소  수정/삭제

      와 이거 저도 오랜만에 보니까 뭔지 모르겠네요-_-
      내가 뭘쓴거지-_-

  4. 우람궁딩 2009.08.24 18:35  댓글주소  수정/삭제  댓글쓰기

    올려두신 글 잘 보았습니다.
    비슷한 고민을 하던 차에.. 참고가 될만한 반가운 글을 보았습니다.

    ...그런데..
    만약.. 위와 같은 경우에는 플렉스 에플리케이션을 생성해야 하는데..
    플렉스 모듈 컴포넌트를 사용할 경우에는 위 방법이 가능한지 궁금하네요..
    만약 된다면.. 어떤 방법으로 가능한지 조언 부탁드립니다. nn

    proverbs1609@empal.com

    • 머드초보 2009.08.27 10:59  댓글주소  수정/삭제

      음...모듈로 생성한 경우에는 제가 안해봐서 모르겠네요 ㅠ
      FABridge의 활용도는 그렇게 높은 것이 아니라서-_-
      저도 실무에서 사용하는 것을 본적이 없군요-_-

  5. BlogIcon bemga 2010.10.22 15:22  댓글주소  수정/삭제  댓글쓰기

    2년이 지나도 혈압은 마찬가지네요. ㅋㅋ

    • 머드초보 2010.11.05 19:30  댓글주소  수정/삭제

      사실 FABridge가 셋팅만 다하면 쓰기 편할 것 같긴 하지만,
      그냥 js를 호출하고 addCallback만으로도 충분히 구현하는데에는 문제가 없어보이네요~ 안쓰시는게 더 나아요^^

 
우선 구글날씨API는 XML으로만 제공을 합니다.
자바스크립트에서는 외부사이트에 있는 XML파일을 불러올 수 없습니다.
그래서 저 XML을 JSON으로 바꿔줘야합니다.
XML을 JSON으로 바꿔주는 것은 야후파이프로 합니다.

야후파이프란? 외부에 있는 데이터들을 모아서 자기만의 아웃풋을 만들 수 있는 사이트!
예를 들어, A사이트의 RSS와 B사이트의 RSS를 모아서 이쁘게 정렬해서 1개의 RSS로 만들고 싶다! 라면, 야후파이프로 가능합니다. 야후파이프로 이쁘게 그려주기만 하면 되죠. 두개의 RSS사이트를 가져다 놓고, OUTPUT으로 그냥 선만 그어주면 됩니다.
또 다른 기능은 해당 데이터를 JSON으로 출력해주도록 할 수 있습니다. 파이프로 만든 주소에 파라메터값 _render를 json으로만 바꿔주면 json을 리턴하는 주소를 만들 수 있습니다. json으로 리턴하는 주소가 있다는 얘기는 javascript에서 불러와서 사용할 수 있다는 얘기죠.
야후파이프는 나중에 포스팅을....-_-;

야후파이프 주소 : http://pipes.yahoo.com/pipes/

javascript framework은 prototype으로....(이것밖에 할 줄 모름 ㅠ)
[code]
var GoogleWeatherWidget = Class.create();

GoogleWeatherWidget.prototype = {
    initialize: function(contentDiv) {
        $(contentDiv).addClassName('content-div');
        var locationDiv = new Element('div', {id: 'location'});
        var tempcDiv = new Element('div', {id: 'tempc'});
        var conditionDiv = new Element('div', {id: 'condition'});
        var windDiv = new Element('div', {id: 'wind'});
        var iconDiv = new Element('div').insert(new Element('img', {id: 'icon'}));
        $(contentDiv).insert(locationDiv);      $(contentDiv).insert(tempcDiv);
        $(contentDiv).insert(conditionDiv);    $(contentDiv).insert(windDiv);
        $(contentDiv).insert(iconDiv);
       
        this.pollingListener = this.pollingProc.bindAsEventListener(this);
        new PeriodicalExecuter(this.pollingListener, 60);   
        this.pollingProc();
    },
   
    pollingProc: function() {
        var url = 'http://pipes.yahoo.com/pipes/pipe.run?'
        url += '&_id=eBxyJgZh3RGQLC8B6icw5g';
         url += '&_render=json';
         url += '&location=incheon';
         url += '&_callback=parseResponse';
        // 이놈을 추가하면 캐쉬에서 안불러오고 계속해서 불러오는군요 ^^
        url += '&' + Math.round(Math.random()* (new Date().getTime()));
       
        if ($('weatherInfo')) {
            $('weatherInfo').remove();   
        }
        var weatherInfo = new Element('script',{
            id: 'weatherInfo',
            type: 'text/javascript',
               src: url});
        $$('head')[0].insert(weatherInfo);
    }
}

function parseResponse(data) {
    $('location').update(data.value.items[0].location);
    $('tempc').update(data.value.items[0].tempc + '℃');
    $('icon').src = 'http://www.google.co.kr/ig/' + data.value.items[0].icon;
    $('condition').update(data.value.items[0].condition);
    $('wind').update(data.value.items[0].wind);
}
[/code]
소스를 분석해보면, new PeriodicalExecuter(this.pollingListener, 60);부분에서 60초마다 this.pollingProc을 수행하겠다는 얘기입니다. 핵심은 pollingProc입니다.
pollinProc을 보면,
var url = 'http://pipes.yahoo.com/pipes/pipe.run?'
       url += '&_id=eBxyJgZh3RGQLC8B6icw5g';
        url += '&_render=json';
        url += '&location=incheon';
        url += '&_callback=parseResponse';
우선 제가 만든 야후파이프인데요. 구글날씨API를 이용해서 JSON으로 변환한 파이프입니다.
location값으로 지역값을 받도록 했구요. callback함수는 parseResponse로 했습니다. url이 head에 붙으면, parseResponse가 호출이 됩니다.

parseResponse를 보면, 해당 div에 값을 업데이트 시켜주는 방식으로 되어있습니다.
결론은.....xml로 리턴하는 RSS나 다른 API정보들도 웹에서 javascript를 이용하면 불러올 수 있다? 정도?-_-;
아래는 위젯......위젯 그까이꺼......심플해야지....-_-; 초간단 날씨위젯!


절대...그냥 표시한 거 아닙니다-_-; 구글에서 긁어와서 보여주는 겁니다-_-;
 
Posted by 머드초보

댓글을 달아 주세요

  1. 머드초보 2008.08.05 08:32  댓글주소  수정/삭제  댓글쓰기

    캐쉬문제가 있는지 이상하게 리프레쉬가 안되네-_-;

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

      아 캐쉬문제는 여기처럼 하면 되는군요 ^^
      http://utsman.tistory.com/89
      url을 유니크하게 날려주면 해결이 되는군요.
      캐쉬가 참 여러가지로 힘들게 하는군요.

      혼자서 댓글달고....혼자서 댓글에 댓글달고...-_-;

  2. BlogIcon 검쉰 2008.08.05 10:01  댓글주소  수정/삭제  댓글쓰기

    저도 달아드릴께요~ ㅎㅎ
    근데, 날씨가 구라청보다 정확한지 궁금하네요 ㅎ

  3. 박스농사 2009.03.31 17:20  댓글주소  수정/삭제  댓글쓰기

    혹 저방법외에 다른방법은 없을까요?
    다른문제이긴 하지만...
    J2EE서버를 내렷다가 올리면 캐쉬내용이 사라지겟죠?
    근데 왜 안사라지지 ㅠ_ㅠ
    하나씩 다 내렷다가 올리는중인데..계속 살아있군요 망할xml

    • 머드초보 2009.04.03 23:10  댓글주소  수정/삭제

      안녕하세요~
      저는 저 방법밖에 모르겠네요 ㅠ
      xml이 바뀌었는데, 그 전내용을 불러오는 문제인가요?
      url만 다르게 불러오면 되던데...잘 모르겠네요 ㅠ

  4. 아이린 2009.07.07 03:59  댓글주소  수정/삭제  댓글쓰기

    이미지가 안보여서 살펴보니, 경로가
    http://www.google.co.kr/ig//ig/images/weather/mostly_cloudy.gif
    처럼 되어있더군요... /ig/ 부분이 중복되어 있습니다.

    아뭏든, 많은 참고가 되었습니다.

    • 머드초보 2009.07.13 14:59  댓글주소  수정/삭제

      와 감사합니다 ^^
      이거 또 언제 바뀌었지-_-
      올렸을 때엔 잘 됐었는데 ㅠㅠ 감사합니다 ^^