프로그래밍/Flex/AIR2008. 7. 8. 10:58

Flex와 BalzeDS를 이용한 야후맵 협업 프로그램

Yahoo! Maps collaboration using Flex and BlazeDS

Christophe Coenraets

Christophe Coenraets


Comments (1)
28 April 2008
User Level:

Two years ago, I wrote a simple Google Maps collaboration example. The Flex application listened to Google Maps events to synchronize maps between different users. It also added nice collaboration features such as videoconferencing and a collaborative whiteboard overlaid on top of the map. In addition to demonstrating the real-time messaging capabilities of Flex, this application also illustrated Flex/Ajax integration using External Interface.

Two recent events prompted me to revisit this sample:

  1. Yahoo! recently released an ActionScript 3 API for Yahoo! Maps.
  2. Adobe recently released the Remoting and Messaging features of LiveCycle Data Services as an Open Source project named BlazeDS.

So, I updated the sample to work with the Yahoo! Maps ActionScript API and BlazeDS (or LiveCycle Data Services). No need to communicate between Ajax and Flex in this version since the rendering of the map is entirely done within the Flex application.

Yahoo Maps collaboration

Figure 1. Yahoo! Maps collaboration

Testing the hosted version

Disclaimer: I'm currently hosting the application on the server I use to host this blog (basic PHP and Tomcat hosting plan). I don't know much about the characteristics of my server, but I'm probably sharing it with a few dozens of other domains and the resources allocated to me are obviously limited in that shared environment. This is clearly not the ideal environment to host a potentially large scale real time application and I'm investigating other hosting solutions. In the meantime, if you experience difficulties running the app, you can install it locally using the instructions provided below (in "Local installation instructions"). The hosted version tries to connect using RTMP by default (available only as part of LiveCycle Data Services) and falls back to "long AMF polling" or regular AMF polling if the RTMP connection fails.

  1. Access http://coenraets.org/maprooms/maprooms.html on two different machines or in two browser windows on the same machine.
  2. Make sure you log on with two different user names and the same room name.
  3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
  4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
  5. The zoom level and the map type are also synchronized between users.
  6. Click the Map Sharing button in one browser, pick a color to draw on the map (upper left corner), and start drawing.

Note: you can right-click the application and select View Source or click here to see the source code of the application.

Local installation instructions:

  1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled).
  2. Open {blazeds-install-dir}/tomcat/webapps/samples/WEB-INF/flex/services-config.xml and add an AMF long polling channel defined as follows:

    <channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
  3. Open WEB-INF/messaging-config.xml and add the following destination:

    <destination id="flexmaps">
    <channel ref="my-longpolling-amf"/>
    <channel ref="my-polling-amf"/>
  4. (Re)start the BlazeDS turnkey server.
  5. Download the source code of the Yahoo! Maps Application.
  6. Create a Flex Builder project for the Flex application (maprooms).

    Make sure you configure your Flex Builder project to work with BlazeDS. To read instructions on how to set up a Flex Builder project that works with BlazeDS. Make sure your BlazeDS turnkey server is started, and click http://localhost:8400/samples/fb-project-setup.htm

  7. Download the Yahoo! Maps ActionScript 3 API, and add YahooMap.swc in the libs folder of your project.
  8. Get a Yahoo! API key and assign it to the appid variable in MapArea.mxml.
  9. Compile the application.
  10. Open the Flex application in two browser windows (to simulate two users in different locations) and test the application as described above (in "Testing the hosted version").

Posted by 시난

댓글을 달아 주세요

프로그래밍/Flex/AIR2008. 6. 27. 17:30

0. http://livedocs.adobe.com/livecycle/es/sdkHelp/programmer/lcds/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=messaging_framework_6.html
1. http://www.flexpasta.com/index.php/2008/05/16/exception-handling-with-blazeds-and-flex/
2. http://sujitreddyg.wordpress.com/2008/02/12/handling-java-exceptions-in-flex-application/
Posted by 시난

댓글을 달아 주세요

프로그래밍/Flex/AIR2008. 6. 25. 17:05
지금까지의 환경은
WAS: tomcat
framework: spring + ibatis
데이터: json 형식

으로 구축해서 사용하고 있었습니다.
새로운 프로젝트도 시작하고 하니
blazeDS에 대해서 한 번 해봐야 겠다 하던 참에
바로 들어갔습니다.

일단 설명이 잘 되어있는 것들을 이것저것 링크를 모았습니다.

지돌스타님 소개글:

어도비 소개글:

모카빵님의 이클립스 blazeDS 프로젝트 구축하기:

머드 초보님의 spring+ibatis+blazeDS 구축:

그리고 작업에 들어갔습니다.

1. blazeDS 다운로드
turnkey를 다운로드 받습니다.
tomcat이 포함된 blazeDS이고, sample, database 등도 포함되어 있어서 간단히 실행할 수 있습니다.

2. tomcat 실행
다운로드 후 압축을 풀고 나면
blazeds_turnkey_3-0-0-544\tomcat\bin 밑의
startup.bat 이나 startup.sh 을 실행하여 tomcat을 구동시킵니다.

3. url 접속
http://localhost:8400/ 접속하면 3개 링크가 보일텐데
http://localhost:8400/samples 을 클릭합니다.

그 다음
30 Minute Test Drive 를 수행하여 기본을 익히도록 합니다. [필수추천]
RemoteObject만 사용할테니 그것만 보셔도 좋습니다.

4. spring + ibatis + springfactory 구축 및 적용
모카빵님의 이클립스에서 blazeDS 프로젝트 생성하기: http://blog.naver.com/zoom7810/50032372125
이것을 토대로 이클립스에서 쉽게 구축할 수 있습니다.

머드초보님의 구축 설명: http://mudchobo.tomeii.com/tt/tag/blazeds?page=2#entry_236
머드초보님의 좋은 글이 있으니 스프링 초보라도 그렇게 어렵지 않게 할 수 있을 겁니다.

두 글을 참고로 구축을 완료하면
작업이 끝납니다.

[발생할 수 있는 문제들]
1. AIR에서 사용하기
flex로 개발하면 채널 문제는 없겠지만
AIR 등으로 개발하면
mxml 이나 as 등에서 채널을 지정해서 RemoteObject를 사용해야 합니다.

역시 머드초보님께서 잘 정리하셨으므로 참고합니다 ^^;

스프링, ibatis 환경에 익숙하신 분들이라면
2~3시간 정도면 blazeDS를 재밌게 사용하고 계시는 자신을 발견하셨을 겁니다.

모두모두 blazeDS의 세계로 발을 살짝 담그어 보시길 바랍니다. ^^

Posted by 시난

댓글을 달아 주세요

프로그래밍/Flex/AIR2008. 6. 18. 17:31
지돌스타님이 BlazeDS에 관련된 글을 하나 포스팅하셨다.


아래는 윗글 중 쓸만한 링크들이다.

읽을만한 자료

BlazeDS의 대한 기본개념 : http://sewony.tistory.com/category/FDS
BlazeDS 설치 : http://blog.naver.com/zoom7810/50026707200
BlazeDS의 Eclipse&Flex Builder 개발환경 구축 : http://blog.naver.com/zoom7810/50032372125
BlazeDS 개발 가이드(영문) : http://livedocs.adobe.com/blazeds/1/blazeds_devguide/
머드초보님의 BlazeDS에 관련글 : http://mudchobo.tomeii.com/tt/search/BlazeDS

시간되는대로 BlazeDS를 준비해보자. ^^;

'프로그래밍 > Flex/AIR' 카테고리의 다른 글

[팁] Tweener 치트 시트 (easing effect)  (1) 2008.06.23
Papervision3D 학습 일지 (1일차)  (3) 2008.06.22
Flex와 BlazeDS의 만남  (0) 2008.06.18
Simple CronExpression Wizard  (1) 2008.06.18
최근 개발하고 싶은 것들  (0) 2008.06.16
AIR 자동 업데이트 설정하기  (0) 2008.04.06
Posted by 시난

댓글을 달아 주세요