Collaborative Applications with Flex and BlazeDS/LCDS

Collaborative Applications with Flex and

BlazeDS/LCDS
Hands-On Instructions

Exercise 1: Samples overview

Follow along with your instructor to run and test the collaboration samples included in the default
BlazeDS/LCDS installation

Objectives
After completing this lab, you should be able to:
• Start and stop the default server instance.
• Access the default samples suite.
• Run the default collaboration scenarios.

Steps
Starting the default samples server and database
1. Open a new command window.
2. Navigate to “c:\lcds\sampledb”.
3. Enter “startdb.bat”.
4. Open a new command window.
5. Navigate to “c:\lcds\tomcat\bin”.
6. Enter "catalina start”.

Running the default samples

7. Open a new browser window.
8. Go to the following URL: http://localhost:8400/lcds-samples/.
9. Click through the different samples available and run them.

Testing the Google Maps Collaboration application

10. Open two new browser windows.
Go to the following URL on each window: http://localhost:8400/lcds-
samples/gmaprooms_final/gmaprooms_final.html
11. On each window, enter different user names but the same room name
12. Click the Join Room button.
13. Start collaborating.

Page 1
Collaborative Applications with Flex and BlazeDS/LCDS

Exercise 2: Configuring channels and destinations

Follow along with your instructor to configure the right messaging channels and destinations.

Objectives
After completing this lab, you should be able to:
• Add/modify messaging channels.
• Add/modify messaging destinations.

Steps
1. Open new explorer window.
2. Navigate to “c:\lcds\tomcat\webapps\lcds-samples\WEB-INF\flex”.
3. Open “services-config.xml” with a text editor (Notepad for instance).

Adding a new channel definition

4. Locate the <channels> tag.
5. Insert the following:

<channel-definition id="my-longpolling-amf"
class="mx.messaging.channels.AMFChannel”>
<endpoint
url=http://{server.name}:{server.port}/{context.root}/messagebroker/amflo
ngpolling class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<polling-enabled>true</polling-enabled>
<polling-interval-seconds>5</polling-interval-seconds>
<wait-interval-millis>60000</wait-interval-millis>
<client-wait-interval-millis>1</client-wait-interval-millis>
<max-waiting-poll-requests>200</max-waiting-poll-requests>
</properties>
</channel-definition>

6. Save and close “services-config.xml”.

Adding a new messaging destination

7. Open new explorer window.
8. Navigate to “c:\lcds\tomcat\webapps\lcds-samples\WEB-INF\flex”.
9. Open “messaging-config.xml” with a text editor (Notepad for instance).
10. Locate the </default-channels> tag.

Page 2
Collaborative Applications with Flex and BlazeDS/LCDS

11. Insert the following:

<destination id="gmaprooms">
<properties>
<server>
<allow-subtopics>true</allow-subtopics>
<subtopic-separator>.</subtopic-separator>
</server>
</properties>
<channels>
<channel ref="my-longpolling-amf"/>
<channel ref="my-polling-amf"/>
</channels>
</destination>

12. Save and close “messaging-config.xml”.

13. Stop and restart you server.

Page 3
Collaborative Applications with Flex and BlazeDS/LCDS

Exercise 3: Building a collaborative real-time application

Follow along with your instructor to leverage the BlazeDS/LCDS Message Service so as to add
chat and collaborative mapping functionality to an existing Flex application.

Objectives
After completing this lab, you should be able to:
• Create a Flex Builder project that is configured for use with BlazeDS/LCDS
• Use the Producer and Consumer classes within a Flex application
• Define event handlers to handle and display data received from the Message Service
• Construct a message and send it using the Message Service

Steps
1. Open Adobe Flex Builder 3

Creating a Flex Builder Project that uses BlazeDS/LCDS

2. Create a new Flex project in Flex Builder
a. Enter “gmaprooms” as the project name
b. Select “J2EE” as the Application Server type
c. Configure settings for your Blaze DS/LCDS server

Root folder: c:\lcds\tomcat\webapps\lcds-samples\

Root URL: http://localhost:8400/lcds-samples/
Context root: /lcds-samples

Setting up the Flex Builder project

3. Copy contents of “src” folder from c:\labfiles\ex3\ into your Flex Builder project “src” folder
4. Copy the map_flex_1_6.swc file from c:\labfiles\ex3\sdk\lib\ into your Flex Builder project
“libs” folder

Adding chat functionality to the application

5. Open “ChatPanel.mxml” from within the current Flex Builder project
6. After </mx:Script> enter the following code:

<mx:Producer id=“producer” destination=“gmaprooms” />

<mx:Consumer id=“consumer” destination=“gmaprooms”
message=“messageHandler(event)” />

7. Specify a sub-topic for the producer/consumer:

public function set roomName(name:String):void {

producer.subtopic = name + “.” + “chat”;
consumer.subtopic = name + “.” + “chat”;
consumer.subscribe();
}

Page 4
Collaborative Applications with Flex and BlazeDS/LCDS

8. Define the handler for the message event in the script block:

private function messageHandler(event:MessageEvent):void {

log.text += event.message.body.userName + “: “ + event.message.body.text
+ “\n”;
log.verticalScrollPosition = log.maxVerticalScrollPosition;
}

9. Define the send() function to publish a message:

public function send():void {

var message:AsyncMessage = new AsyncMessage();
message.body.userName = userName;
message.body.text = msg.text;
producer.send(message);
msg.text = “”;
}

10. Save the “ChatPanel.mxml” file

11. Launch the application in two separate browser windows and test the chat functionality you
have just implemented

http://localhost:8400/lcds-samples/gmaprooms-debug/gmaprooms.html

Implementing the collaborative map functionality

12. Open “MapArea.mxml” from within the current Flex Builder project
13. Review the sendMessage() function
14. Implement the handler for ‘zoom’ and ‘move’ actions in the messageHandler() function:

public function messageHandler(event:MessageEvent):void {

…

case (“zoom”):
map.setZoom(data.zoomLevel);
break;
case (“move”):
map.setCenter(new LatLng(data.latitide,data.longitude);
map.setZoom(data.zoomLevel);
break;
…
}
15. Save the “MapArea.mxml” file
16. Launch the application in two separate browser windows and test the map functionality you
have just implemented

Page 5
Collaborative Applications with Flex and BlazeDS/LCDS

Exercise 4: Building a collaborative data entry

application
Follow along with your instructor to leverage LCDS Data Management Service functionality inside
your Flex application.

Objectives
After completing this lab, you should be able to:
• Add/Modify a Data Management destination.
• Add and configure a DataService instance.
• Perform automatic data synchronization.

Steps
1. Open new explorer window.
2. Navigate to “c:\lcds\tomcat\webapps\lcds-samples\WEB-INF\flex”.
3. Open “data-management-config.xml” with a text editor (Notepad for instance).

Adding a new Data Management destination

4. Locate the </default-channels> tag.
5. Insert the following.

<destination id="insync">
<adapter ref="java-dao" />
<properties>
<source>lcds.samples.contact.ContactAssembler</source>
<scope>application</scope>
<metadata>
<identity property="contactId" undefined-value="0"/>
</metadata>
</properties>
</destination

6. Save and close “messaging-config.xml”.

7. Stop and restart you server.
8. Inside FlexBuilder, locate the “insync_web_lab” project.
9. Open the “insynch_web_lab.mxml” inside the src directory.
10. In code view, find the “private var iconOffline:Class;” declaration

Page 6
Collaborative Applications with Flex and BlazeDS/LCDS

11. Insert the following code.

[Bindable]
private var ds:DataService;

private function init(){

ds = new DataService("insync");

ds.addEventListener(DataConflictEvent.CONFLICT, conflictHandler);

ds.addEventListener(DataServiceFaultEvent.FAULT, faultHandler);

ds.fill( contacts );
}

12. Save your changes.

13. Open the “ContactForm.mxml” inside the src directory.
14. In code view, find the “public var ds:DataService;” declaration
15. Insert the following code.

private function save():void {

contact.firstName = firstName.text;
contact.lastName = lastName.text;
contact.title = contactTitle.text;
contact.email = email.text;
contact.phone = phone.text;

if (!contacts.contains(contact)) {
trace("Adding contact");
contacts.addItem(contact);
}

label = contact.firstName + " " + contact.lastName;

}
16. Save your changes.
17. Compile and run “insync_web_lab.mxml”
18. Open a new browser window and run a new instance of the application.
19. http://localhost:8400/lcds-samples/insync_web_lab-debug/insync_web_lab.html
20. Resize the two browser windows so you can see them simultaneously.
21. Select and double click on one of the contacts.
22. Modify some data.
23. Click the “save” button.
24. Changes made to one client are automatically synchronized to other clients.

Page 7