'Mashup'에 해당되는 글 2건

  1. 2008.07.08 [adobe/devnet] yahoomaps_collaboration
  2. 2008.06.21 [flash/papervision3d] Tag Galaxy를 소개합니다. (2)
프로그래밍/Flex/AIR2008.07.08 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 시난
리뷰/웹사이트2008.06.21 14:19
휴일을 맞이하여, 게임도 충분히 했고 -_-;
유익한 블로그를 만들기 위해 메뉴들도 정비했고
Papervision3D에 대한 공부를 시작하고 있습니다.

그러던 중 괜찮은 매쉬업을 발견했네요.


1. tag를 입력
사용자 삽입 이미지

2. tag 로 이루어진 행성들이 은하계 처럼 보여집니다.
사용자 삽입 이미지

3. 관심있는 tag 행성을 클릭하면
4. 그 행성 표면을 플리커에서 가져온 이미지들로 멋지게 장식해주죠.
 (예전에 papervision3d 예제 중에 영어 단어가 기억이 안 나는데.. 색종이? 어쩌고.. 그런 예제가 있었는데
그걸 보고 저도 해보고 싶었죠.. 바로 이런 것을!! )
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지

비록 PicLens(http://www.piclens.com/) 처럼 빠르진 못하지만, (플래시의 태생 문제죠. 10부터는 슬슬 업그레이드 되고 있지만..)
플래시/Papervision3D로 멋진 3D 인터페이스를 보여줍니다. ^^

'리뷰 > 웹사이트' 카테고리의 다른 글

XING - 전세계 비즈니스맨 SNS  (0) 2008.08.08
WISIA - The Wisdom of crowds  (1) 2008.08.08
iTunes  (2) 2008.07.22
Lively by Google - test  (0) 2008.07.14
[flex] Brainwave를 소개합니다.  (0) 2008.06.21
[flash/papervision3d] Tag Galaxy를 소개합니다.  (2) 2008.06.21
Posted by 시난