Flex Builder 4 beta2를 다운받고 설치하셨다면 만들기 준비는 다 끝났습니다. 새 프로젝트를 한번 만들어볼까요?
프로젝트 이름을 적당하게 작성하고, Application Type 을 Desktop 으로 선택한 뒤 Finish 버튼을 누릅니다.
처음 프로젝트를 생성하면 아래와 같은 코드가 보입니다.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="
http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:WindowedApplication>
이게 기본 프로젝트 인데요, 여기 패널을 추가하고, 네비게이션을 추가할 예정입니다.
Source 뷰에서 Design 뷰로 전환하여 width 와 height 값을 각각 450, 230 으로조정하여 줍니다.
그리고 컴포넌트 윈도우에서 Panel 과 TabNavigator 컴포넌트를 찾아서 추가해줍니다.
둘 다 width 값과 height 은 100%, x, y 값은 비워둡니다.
탭 네비게이션을 추가했으면 Label을 변경해야 합니다. 위와 같이 레이블 이름을 변경하고 새 탭을 하나 더 추가해줍니다.
그리고 탭네비게이션에 VGroup 를 하나 추가하고, width, height 를 100%로 설정합니다.
VGroup 안에 링크버튼 다섯개를 적당히 배치해줍니다.
두개의 탭에 모두 설정해줍니다.
이제 레이아웃은 얼추 잡힌듯 한데요, 이제 XML을 읽어와 링크버튼에 바인딩 하는 코드를 넣어야 합니다.
웹컨텐츠의 XML 파싱은 각자 편한대로 하시면 되는데요, 미리 샘플을 하나 제공해드리겠습니다.
** 현재 서버 이상으로 샘플을 원활하게 제공할 수 없습니다. 트래픽이 급 몰렸나보네요. 죄송합니다.ㅠ
<fx:Declarations> 이라고 선언된 부분에 코드를 한줄 추가합니다.
<fx:Declarations>
<s:HTTPService id="XMLRequest" showBusyCursor="true" url="http://onionmen.iruis.net/dnf/widget/dnf_xml.php"/>
</fx:Declarations>
XML을 받아오기 위한 HTTPService를 하나 생성합니다. 그리고 아까 넣었던 linkButton 의 Label을 다음과 같이 수정해줍니다.
label={XMLRequest.lastResult.contents.content.getItemAt(0).title}"
label={XMLRequest.lastResult.contents.content.getItemAt(1).title}"
label={XMLRequest.lastResult.contents.content.getItemAt(2).title}"
label={XMLRequest.lastResult.contents.content.getItemAt(3).title}"
label={XMLRequest.lastResult.contents.content.getItemAt(4).title}"
그리고 마지막으로 AIR윈도우가 생성된 뒤 XML을 받아오기 위해 아래 코드를 추가해 줍니다.
<s:WindowedApplication xmlns:fx="
http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" width="450" height="230"
creationComplete="XMLRequest.send();">
이제 불러오기는 모두 끝났습니다. F11 키를 눌러서 테스트 해볼까요?
오늘의 던파에 나온 텍스트가 그대로 나와있네요. ^^ 내일되면 또 텍스트가 변경되겠죠?
그런데 이 상태로는 클릭해도 아무것도 되지 않습니다. 클릭했을 때 웹사이트로 이동하는 코드를 넣고 끝내볼까요.
<mx:LinkButton label="{XMLRequest.lastResult.contents.content.getItemAt(0).title}" />
현재 링크버튼에는 위와 같은 코드가 있을텐데요, 여기에 클릭 이벤트를 줍니다.
<mx:LinkButton label="{XMLRequest.lastResult.contents.content.getItemAt(0).title}" click="goToUrl(0)"/>
<mx:LinkButton label="{XMLRequest.lastResult.contents.content.getItemAt(1).title}" click="goToUrl(1)"/>
<mx:LinkButton label="{XMLRequest.lastResult.contents.content.getItemAt(2).title}" click="goToUrl(2)"/>
<mx:LinkButton label="{XMLRequest.lastResult.contents.content.getItemAt(3).title}" click="goToUrl(3)"/>
<mx:LinkButton label="{XMLRequest.lastResult.contents.content.getItemAt(4).title}" click="goToUrl(4)"/>
그리고 함수를 만들어줍니다.
</fx:Declarations> 밑에 추가해주세요.
<fx:Script>
<![CDATA[
private function goToUrl(num:int):void
{
var httpService:HTTPService;
var
url:String;
var myReq:URLRequest = new URLRequest();
myReq.url = XMLRequest.lastResult.contents.content.getItemAt(num).link;
navigateToURL(myReq);
}
]]>
</fx:Script>
그리고 다시 F11을 누르고 링크를 클릭하면 기본 웹브라우저가 열리면서 오던 페이지로 이동할거에요.
추가로 AIR의 HTMLLoader 컴포넌트를 이용하여 Air의 새창으로 띄운다면 좀 더 사용성이 좋아질텐데, 기회가 된다면 기능을 추가해보도록 하죠.
DnfWidget.air
댓글을 달아 주세요
내가 1빠네 ㅋㅋㅋ
새치기]
뭐지 이건.........
오던 ㅊㅋ
그냥 닥치고던파홈피들어와서 보는게 낫겠다..
이건 시험용이구요, 잘만 활용하면 정보를 획득할 수 있는 여러가지 쉬운 경로가 생기는 거죠.
이거 완성된 위젯 다운받아서 실행해봤는데 이벤트는 글도 뜨고 클릭하면 되는데..
오던은 뜨지도 않고 클릭도안되네요..
오던은 샘플 xml이 너무 많은 사용자로 인하여 실행할 수 없는 상황이에요. 서버를 옮겨서 새로 등록해놓을게요.
Adobe Flash Builder 4를 다운받아버린 1인....도대체 뭘한건지....
ㅋㅋㅋ
좋은 강좌 감사합니다. xml부분 응용해서 스마트폰에 넣어서 바야겠네요
조..좋은 정보다 ㄳㄳ
같은 티스토리 하고 있기는한데.. 어떻게 위젯으로 하는거죠. 그냥 실행 시키면 땡인가요?
이건 데스크탑 위젯이라서 블로그에는 못붙여요.
블로그에 붙이는 위젯은 디자인 조금 변경해서 만들 수 있을듯 하네요.
어디서 하는거에요?Flex Builder 4 beta2이게 어딧음?
웜바이러스떳습니다.
V.WOM.conficker 바이러스 7개떳네요
던파로그인이안되요...
치료중에잇습니다. 검사하셔서 올려주세요
안녕하세요. 어떤 파일에 웜이 있다는 말씀이신지요.
현재 air 파일에서 카스퍼스키로 검사했을시 정상적인 파일이었습니다. 그 외에는 어도비사에서 직접 관리하는 파일이기 때문에 바이러스가 걸렸을거라 생각이 되지 않습니다.