Saiselva's Blog

Creating a Simple Data Management Application

saiselva — Fri, 19 Jun 2009 05:53:31 +0000

Step 1: Examine the Assembler Class

Using the Data Management Service, changes made to the data at the client-side are automatically sent to a data service running in the application server. The data service then passes those changes to an object called the

assembler. The role of the assembler is to pass the changes, in the appropriate format, to your existing business objects, or directly to your persistence layer. The assembler class is the only class that you have to write at the server-side (in addition to your existing business and persistence layer), and is typically a very simple class.1. Make sure Eclipse is in the Java perspective

2. Open ContactAssembler.java in the insync.assembler package of the lcds-server project

Code highlights:

• ContactAssembler extends AbstractAssembler and implements a series of callback methods that the data service invokes when it gets changes from the client application.

• You use the assembler to plug in to your existing business objects or directly to your persistence layer.

• In this simple implementation, we invoke the method corresponding to the type of change in our ContactDAO class.

Step 2: Define the Data Management Destination

1. Open data-management-config.xml in the flex folder of the lcds-server project

2. Add the following destination:

“insync.contact”>

“java-dao”/>

insync.assembler.ContactAssembler

application

“id” undefined-value=“0″/>

“my-rtmp”/>

This XML fragment maps the logical name for the destination (insync.contact) to an assembler class (insync.assembler.ContactAssembler).

3. Make sure you save data-management-config.xml, and restart the server

Step 3: Create the Flex Project

1. Select

File>New>Project… in the Eclipse menu. 2. Expand Flex Builder, select

Flex Project and click Next. 3. Specify

simplecontact as the project name. 4. Keep the

use default location checkbox checked. 5. Select

Web Application as the application type. 6. Select

J2EE as the application server type. 7. Check

use remote object access service.8. Uncheck Create combined Java/Flex project using WTP.

9. Click

Next.10. Make sure the root folder for LiveCycle Data Services matches the root folder of your LCDS web application. The settings should look similar to this (you may need to adjust the exact folder based on your own settings):

Root Folder: C:\lcds\tomcat\webapps\lcds Root URL: http://localhost:8400/lcds/ Context Root: /lcds

11. Click

Validate Configuration, then Finish.

Step 4: Define the Contact Value Object

1. Copy Contact.as from the insync project to the src folder of the simplecontact project

2. Open Contact.as

in the simplecontact project 3. Replace the [Bindable] annotation with the [Managed] annotation

The [Managed] annotation indicates that the object should be automatically managed: the object will automatically trigger events when its properties are changed. 21

Step 5: Code the application

1. Open simplecontact.mxml and implement the application as follows:

applicationComplete=”ds.fill(contacts)”>

width=”100%” height=”100%”/>

click=”contacts.removeItemAt(dg.selectedIndex)”/>

Code highlights:

• The DataService points to the “insync.contact” destination defined earlier in data-management-config.xml.

• In the Application tag’s applicationComplete event, the DataService’s fill() method populates the “contacts” ArrayCollection. When you invoke fill() at the client-side, the assembler’s fill() method is invoked at the server-side. This is where you specify how the data should actually be retrieved. See the fill() method in ContactAssembler.java.

• The DataGrid is bound to the contacts array to display the list of contacts.

2. Test the application

a. Run the application

b. Change some data for a few contacts (do NOT change the value of the id column)

c. Reload the application and notice that your changes have been persisted

3. Test the automatic client synchronization feature of the application

a. Open a second browser and access the same URL

b. Modify some data in one browser, and notice that the changes automatically appear in the second browser.

Note: Automatically pushing the changes made by one client to the other clients working on the same data is the default behavior of LCDS. We will see how this default behavior can be changed later in this workshop. 22

Step 6: Control when Changes are Sent to the Server

By default, LCDS sends a change message to the server immediately after you change a property of an object. This behavior is appropriate for some applications (for example, a collaborative form-filling application), but might not be desirable in other applications, because:

• It generates too much network traffic

• There may be dependencies between object attributes, and the server may not be able to persist partially filled objects

For these reasons, you often want to programmatically control when the changes are sent to the server.

1. To programmatically control when the changes are sent to the server:

a. In simplecontact.mxml, add

autoCommit=”false” to the DataService declarationb. Add an “Apply Changes” button defined as follows:

enabled=”{ds.commitRequired}”/>

2. Now that we have control over when the changes are sent to the server, we can also handle the creation of new contacts. Add a “New” Button defined as follows:

new Contact())”/>

Note: This logic for creating new contacts would have failed with autoCommit set to true (default) because the server-side component would have tried to insert an empty row and some columns of the contact table are defined as not supporting null values.

3. Test the application

a. Run the application

b. Change some data for a few contacts

c. Reload the application and notice that your changes have not been persisted

d. Change some data again and click the Apply Changes button

e. Reload the application and notice that your changes have now been persisted

4. Test the automatic client synchronization feature of the application

a. Open a second browser and access the same URL

b. Modify some data in one session, and notice that, with autoCommit set to false, the changes are not pushed to the second browser session until you click the “Apply Changes” button.

Adding Contacts

saiselva — Fri, 19 Jun 2009 05:29:26 +0000

1. Add a Button to the ApplicationControlBar in insync.mxml defined as follows:

new Contact())”/>

2. In ContactForm.mxml, change the label of the Canvas as follows:

label=”{contact.id>0?contact.firstName+

‘ ‘+contact.lastName:‘New Contact’}”

3. Replace the implementation of the save_resultHandler function with the following implementation:

contact.id = event.result.id;

4. Test the application

Opening Multiple Contacts

saiselva — Fri, 19 Jun 2009 05:26:36 +0000

1. In insync.mxml, replace the ContactForm component with a TabNavigator defined as follows:

id=”tn” width=”70%” height=”100%“

2. Add an openContact function defined as follows:

public

function

function

openContact(contact:Contact):

void

{

var

form:ContactForm = new

ContactForm();

tn.addChild(form);

form.contact = contact;

tn.selectedChild = form;

}

3. Enable double-clicking in the DataGrid by adding the following attributes to the DataGrid definition:

doubleClickEnabled=”

true

“

doubleClick=”openContact(dg.selectedItem

as

Contact)”

4. In ContactForm.mxml, specify the label property of the Canvas as follows:

xmlns:mx=”http://www.adobe.com/2006/mxml

“

width=”

100%” height=”100%

“

label=”

{contact.firstName + ‘ ‘ + contact.lastName}“

>

5. In ContactForm.mxml, replace the implementation of the deleteItem_resultHandler function with the following implementation:

parent.removeChild(

this

);

6. In the HBox at the bottom of ContactForm.mxml, add a Close button defined as follows:

label=”Close” click=”parent.removeChild(this)”

/>

7. Test the application

a. Run the application.

b. Double-click a contact in the DataGrid to open a form and edit this contact in the TabNavigator

c. Double-click another contact to open a second contact in the TabNavigator.

17

Extra Credit

Add some logic to the openContact function to prevent the same contact from being opened multiple times in the TabNavigator. If the user tries to open a contact that is already open, simply activate the corresponding tab vi

1. In insync.mxml, replace the ContactForm component with a TabNavigator defined as follows:

id=”tn” width=”70%” height=”100%“

/>

2. Add an openContact function defined as follows:

public

function

function

openContact(contact:Contact):

void

{

var

form:ContactForm = new

ContactForm();

tn.addChild(form);

form.contact = contact;

tn.selectedChild = form;

}

3. Enable double-clicking in the DataGrid by adding the following attributes to the DataGrid definition:

doubleClickEnabled=”

true

“

doubleClick=”openContact(dg.selectedItem

as

Contact)”

4. In ContactForm.mxml, specify the label property of the Canvas as follows:

xmlns:mx=”http://www.adobe.com/2006/mxml

“

width=”

100%” height=”100%

“

label=”

{contact.firstName + ‘ ‘ + contact.lastName}“

>

5. In ContactForm.mxml, replace the implementation of the deleteItem_resultHandler function with the following implementation:

parent.removeChild(

this

);

6. In the HBox at the bottom of ContactForm.mxml, add a Close button defined as follows:

label=”Close” click=”parent.removeChild(this)”

/>

7. Test the application

a. Run the application.

b. Double-click a contact in the DataGrid to open a form and edit this contact in the TabNavigator

c. Double-click another contact to open a second contact in the TabNavigator.

17

Extra Credit

Add some logic to the openContact function to prevent the same contact from being opened multiple times in the TabNavigator. If the user tries to open a contact that is already open, simply activate the corresponding tab in the TabNavigator.

n the TabNavigator.

Updating Contacts

saiselva — Fri, 19 Jun 2009 05:22:17 +0000

Step 1: Create the Contact Value Object

In the application so far, the list of contacts returned by the getContactsByName() method is deserialized into dynamic objects. It is sometimes desirable to work with strongly typed objects. To work with typed objects in this application, let’s create the ActionScript version of the Contact class defined in the lcds-server project:

1. Right-click the src folder in the insync project and select

New>ActionScript Class. Specify Contact as the class name and click Finish.

2. Implement the Contact class as follows:

package

{

[

Bindable] [RemoteClass(alias=

"insync.model.Contact")]

public class

Contact{

public var

id:int;

public var

firstName:String;

public var

lastName:String;

public var

email:String;

public var

phone:String;

public var

address:String;

public var

city:String;

public var

state:String;

public var

zip:String;}

}

Notice that we use the [RemoteClass(alias="insync.model.Contact")] annotation to map the ActionScript version of the Contact class (Contact.as) to the Java version (Contact.java). As a result, Contact objects returned by the getContactsByName() method of ContactDAO are deserialized into instances of the ActionScript Contact class. Similarly, in the Contact form (see next step), the instance of the ActionScript Contact class passed as an argument to the save method of the RemoteObject is deserialized into an instance of the java version of the Contact class at the server-side. 15

Step 2: Add a Contact Form

1. Copy ContactForm.mxml from flex-dataservices-tutorial\insync\flexsrc to the src directory of the insync project in Eclipse.

2. Examine the ContactForm.mxml source code.

3. Modify the insync.mxml application to allow the user to update contacts in the Contact Form. Wrap the DataGrid in an HDividedBox, add and wire the ContactForm component as follows:

dataProvider=”{contacts}” width=”30%” height=”100%”>

dataField=”firstName” headerText=”First Name”/>

dataField=”lastName” headerText=”Last Name”/>

as Contact}” width=”70%”/>

Step 3: Test the Application

1. Run the application

2. Select a contact in the DataGrid, modify some data in the Contact Form, and click the Save button to save your changes.

3. Select a contact in the DataGrid, and click the Delete button to delete the contact.

Extra Credit

Implement a strategy to enable the Save button only when data has been modified

Using the RemoteObject Events

saiselva — Fri, 19 Jun 2009 05:18:37 +0000

RemoteObject calls are asynchronous. You use the

result and fault events of the RemoteObject component to handle results and errors.1. To make the application more robust and better partitioned, modify the code as follows:

import

mx.rpc.events.FaultEvent;

import

mx.rpc.events.ResultEvent;

import

mx.controls.Alert;

import

mx.collections.ArrayCollection; [

Bindable]

private var

contacts:ArrayCollection;

private function

resultHandler(event:ResultEvent):void {

contacts = event.result

as ArrayCollection;}

private function

faultHandler(event:FaultEvent):void {

Alert.show(event.fault.faultDetail);

}

]]>

fault=”faultHandler(event)”>

result=”resultHandler(event)”/>

click=”ro.getContactsByName(searchStr.text)”/>

width=”100%” height=”100%”/>

2. Run and test the application

14

Creating a Simple Contact Management Application

saiselva — Fri, 19 Jun 2009 05:10:35 +0000

Using the Remoting Service, you can directly invoke methods of Java objects deployed in your application server, and consume the return value. The return value can be a value of a primitive data type, an object, a collection of objects, an object graph, etc. Java objects returned by server-side methods are deserialized into either dynamic or typed ActionScript objects.

In this section, we build a simple contact management application that demonstrates the LCDS Remoting service.

Step 1: Copy and Examine the Java Classes

1. Copy

2. Copy the

3. Open and examine the

The server-side of the insync application uses the simple Value Object and Data Access Object (DAO) patterns:

• Contacts are transferred between the client and the server using

• The

hsqldb.jar from flex-dataservices-tutorial\hsqldb to the lib directory of the lcds-server project insync directory and the insync.properties file from flex-dataservices-tutorial\contact\javasrc to the src directory of your lcds-server project Contact class (in the insync.model package) and the ContactDAO class (in the insync.dao package) Contact value objects. ContactDAO class provides the data access logic to retrieve and update contacts Step 2: Create the Remoting Destination

A Remoting destination exposes a Java class that your Flex application can invoke remotely. The destination id is a logical name that your Flex application uses to refer to the remote class, avoiding a hardcoded reference to the fully qualified Java class name. This logical name is mapped to the Java class name as part of the destination configuration in remoting-config.xml.

To create a remoting destination for the ContactDAO class:

1. Open remoting-config.xml located in the flex folder of the lcds-server project.

2. Add a destination called contact defined as follows:

insync.dao.ContactDAO

12

Step 3: Create the Flex Project

1. Select

2. Expand Flex Builder, select

3. Specify

4. Keep the

5. Select

6. Select

7. Check

8. Uncheck Create combined Java/Flex project using WTP.

9. Click

10. Make sure the root folder for LiveCycle Data Services matches the root folder of your LCDS web application. The settings should look similar to this (you may need to adjust the exact folder based on your own settings):

Root Folder: C:\lcds\tomcat\webapps\lcds Root URL: http://localhost:8400/lcds/ Context Root: /lcds

11. Click

File>New>Project… in the Eclipse menu. Flex Project and click Next. insync as the project name. use default location checkbox checked. Web Application as the application type. J2EE as the application server type. use remote object access service. Next. Validate Configuration, then Finish. Step 4: Code the Application

1. Open insync.mxml located in the src folder of the insync project, and implement the application as follows:

click=”ro.getContactsByName(searchStr.text)”/>

dataProvider=”{ro.getContactsByName.lastResult}”

width=”100%” height=”100%”/>

2. Run and test the application

• Type a few characters in the search TextInput field and click Search

• To retrieve all the contacts, leave the TextInput field empty and click Search

13

Creating a Collaborative Mapping Application

saiselva — Fri, 19 Jun 2009 05:07:14 +0000

Step 1: Create the Flex Project

1. Select

2. Expand Flex Builder, select

3. Specify

4. Keep the

5. Select

6. Select

7. Check

8. Uncheck Create combined Java/Flex project using WTP.

9. Click

10. Make sure the root folder for LiveCycle Data Services matches the root folder of your LCDS web application. The settings should look similar to this (you may need to adjust the exact folder based on your own settings):

Root Folder: C:\lcds\tomcat\webapps\lcds Root URL: http://localhost:8400/lcds/ Context Root: /lcds

11. Click

File>New>Project… in the Eclipse menu. Flex Project and click Next. flexmaps as the project name. use default location checkbox checked. Web Application as the application type. J2EE as the application server type. use remote object access service. Next. Validate Configuration, then Finish.

Add the Yahoo Map Library to the Project

Copy YahooMaps.swc from flex-dataservices-tutorial\YahooMap\YahooMap.swc to the lib directory of your newly created flexmaps project in Eclipse.

Step 3: Experiment with the Basic FlexMaps Application

1. Copy flexmaps.mxml from flex-dataservices-tutorial\flexmaps to the src directory of your newly created flexmaps project in Eclipse.

2. Open flexmaps.mxml in Eclipse and examine the application.

3. Run the application.

4. Drag the map and notice that, when you release the mouse button, a dialog displays the new map coordinates.

5. Type a valid address in the text input field, and click Search. The map moves to that new location, and the “New Coordinates” dialog pops up.

Step 4: Enable Collaboration in the FlexMaps Application

1. Open

messaging-config.xml

located in the flex folder of the lcds-server project, and add a destination called flexmaps defined as follows:

<

destination id=“flexmaps”

>

<

channels

>

<

channel ref=“my-rtmp”

/>

<

channel ref=“my-polling-amf”

/>

channels

>

destination

>

2. In flexmaps.mxml, define Producer and Consumer components as follows:

id=”producer” destination=”flexmaps“

/>

id=”consumer” destination=”flexmaps

“

message=”messageHandler(event)”

/>

3. In the init() function, add a line of code to subscribe to the flexmaps destination:

consumer.subscribe();

4. Replace the implementation of the handleNewCoordinates function with the following code:

var

message:AsyncMessage = new

AsyncMessage();

message.body.latitude = _yahooMap.centerLatLon.lat;

message.body.longitude = _yahooMap.centerLatLon.lon;

producer.send(message);

5. Create a messageHandler function defined as follows:

private

function

function

messageHandler(event:MessageEvent):

void

{

var

body:Object = event.message.body;

_yahooMap.centerLatLon =

new

LatLon(body.latitude, body.longitude);

}

6. Add the appropriate import statements

7. Test the application:

a. Run the application.

b. Access the same URL in another browser window to open a second instance of the flexmaps application.

c. Move the map in one browser and notice that the position of the map is synchronized in the other browser.

d. You can also look for an address in one browser: the map will move to that address in the two browsers.

Powering Flex Applications(Creating a Chat Application)

saiselva — Fri, 19 Jun 2009 05:04:07 +0000

The LCDS Message Service provides a publish/subscribe infrastructure that allows your Flex application to publish messages and subscribe to a set of messaging destinations, enabling the development of real-time data push and collaborative applications.

In this section, you build a simple chat application that demonstrates the LCDS Message Service.

Step 1: Create the Messaging Destination

A messaging destination represents a topic of real time conversation that interested parties can subscribe (listen) to, or contribute to by posting their own messages.

To define the chat destination for this application:

1. In the

2. Add a destination called chat defined as follows:

lcds-server project, open messaging-config.xml located in the flex folder.

“chat”> “my-rtmp”/> “my-polling-amf”/> This channel configuration indicates that the client will first try to connect to the message service using the my-rtmp channel. If a connection to the server cannot be established using that channel, the client will fall back to the my-polling-amf channel. Channels themselves are configured in services-config.xml.

3. Restart the server

Step 2: Create the Flex Project

1. Select

File>New>Project…

in the Eclipse menu.

2. Expand Flex Builder, select

Flex Project

and click Next.

3. Specify

chat

as the project name.

4. Keep the

use default location

checkbox checked.

5. Select

Web Application

as the application type.

6. Select

J2EE

as the application server type.

7. Check

use remote object access service

.

8. Uncheck Create combined Java/Flex project using WTP.

9. Click

Next

.

10. Make sure the root folder for LiveCycle Data Services matches the root folder of your LCDS web application. The settings should look similar to this (you may need to adjust the exact folder based on your own settings):

Root Folder: C:\lcds\tomcat\webapps\lcds Root URL:

http://localhost:8400/lcds/

Context Root: /lcds

11. Click

Validate Configuration, then Finish

Create the Client Application

Open the chat.mxml file located in the src folder of the newly created chat project, and implement the application as follows:

xmlns:mx=”http://www.adobe.com/2006/mxml

“

creationComplete=”consumer.subscribe()”

>

import

mx.messaging.events.MessageEvent;

import

mx.messaging.messages.AsyncMessage;

private

function

function

send():

void

{

var

message:AsyncMessage = new

AsyncMessage();

message.body.chatMessage = msg.text;

producer.send(message);

msg.text =

""

;

}

private

function

function

messageHandler(event:MessageEvent):

void

{

log.text += event.message.body.chatMessage +

"\n"

;

}

]]>

id=”producer” destination=”chat“

/>

id=”consumer” destination=”chat

“

message=”messageHandler(event)”

/>

title=”Chat” width=”100%” height=”100%“

>

id=”log” width=”100%” height=”100%“

/>

id=”msg” width=”100%” enter=”send()”

/>

label=”Send” click=”send()”

/>

Code highlights:

•

At the client-side, the LCDS Message Service API provides two classes, Producer and Consumer, that you use to respectively publish and subscribe to a destination.

•

To subscribe to a destination, you use the subscribe() method of the Consumer class.

•

When a message is published to a destination you subscribed to, the message

event is triggered on the Consumer.

7

•

In this example, messages are published by Flex clients. The LCDS message service also provides a Java API that allows a server-side component to publish messages to a LCDS destination. Another option to exchange messages between Flex and Java applications is to map destinations to JMS topics, essentially allowing a Flex client to publish and subscribe to JMS topics.

Step 4: Test the Application

1. Run the application

2. Open the same URL in another browser window to open a second instance of the chat application

3. Type a message in one of the chat clients and click “Send”: the message should appear in the two chat clients

Extra Credit

1. Add a simple TextInput to the user interface to allow the user to provide his/her name.

2. Add the user name in the message published to the chat destination.

3. Display the name of the author of the message along with the messvage itself in the chat TextArea.

.

Using Data Services

saiselva — Thu, 18 Jun 2009 12:59:06 +0000

This lab further introduces

which is used to connect to LiveCycle Data Services, seamlessly synchronizing data on both the client and the server. Create New Project

Create a new project for this lab:

3. Close any existing Flex Builder projects.

4. Create a new Flex Builder project (using the same steps as used previously) specifying the following:

o

Project name = DataService o

Application type = Web application o

Application server type = J2EE o

Use remote object access service = checked o

LiveCycle Data Services = checked o

Use default location for local LiveCycle Data Services folder = unchecked o

Root folder = the path to the lcds-samples o

Root URL = http://localhost:8400/lcds-samples/ o

Context root = /lcds-samples o

Main Application File = Main.mxml Enter Your Code

The newly created

Main.mxml file will contain some default code. Replace it with the following code:

xmlns=”*”

backgroundColor=”#FFFFFF”

creationComplete=”initApp()”>

public function initApp():void

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 24 {

ds.fill(products);

}

]]>

width=”100%” height=”100%”>

headerText=”Name”/>

headerText=”Category”/>

headerText=”Price”/>

headerText=”Image”/>

headerText=”Description”/>

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 25 This application refers to a class (or component) named

6. Click on

7. Open the

Product. That class does not yet exist, so if you try to compile the application now the compiler will generate an error. To create the Product class: src in the DataService project File menu and select New and then ActionScript Class 8. Here is the code for

Product.as 9. In the

New ActionScript Class dialog, specify the following: o

Name = Product 10. Click

Finish Then update the new

Product.as file so that it looks like this: package

{

[Managed]

[RemoteClass(alias="flex.samples.product.Product")]

public class Product

{

public function Product()

{

}

public var productId:int;

public var name:String;

public var description:String;

public var image:String;

public var category:String;

public var price:Number;

public var qtyInStock:int;

}

}

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 26 In this example, a data services destination named

inventory is used by . This destination is defined in data-management-config.xml. Test Your Code

You can now try out your application:

1. Save your changes.

2. Run the application. Upon startup the application will connect to LiveCycle Data Services, and synchronize the local

products array with the data stored in the inventory destination on the server.

This lab further introduces

which is used to connect to LiveCycle Data Services, seamlessly synchronizing data on both the client and the server. Create New Project

Create a new project for this lab:

3. Close any existing Flex Builder projects.

4. Create a new Flex Builder project (using the same steps as used previously) specifying the following:

o

Project name = DataService o

Application type = Web application o

Application server type = J2EE o

Use remote object access service = checked o

LiveCycle Data Services = checked o

Use default location for local LiveCycle Data Services folder = unchecked o

Root folder = the path to the lcds-samples o

Root URL = http://localhost:8400/lcds-samples/ o

Context root = /lcds-samples o

Main Application File = Main.mxml Enter Your Code

The newly created

Main.mxml file will contain some default code. Replace it with the following code:

xmlns=”*”

backgroundColor=”#FFFFFF”

creationComplete=”initApp()”>

public function initApp():void

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 24 {

ds.fill(products);

}

]]>

width=”100%” height=”100%”>

headerText=”Name”/>

headerText=”Category”/>

headerText=”Price”/>

headerText=”Image”/>

headerText=”Description”/>

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 25 This application refers to a class (or component) named

6. Click on

7. Open the

Product. That class does not yet exist, so if you try to compile the application now the compiler will generate an error. To create the Product class: src in the DataService project File menu and select New and then ActionScript Class 8. Here is the code for

Product.as 9. In the

New ActionScript Class dialog, specify the following: o

Name = Product 10. Click

Finish Then update the new

Product.as file so that it looks like this: package

{

[Managed]

[RemoteClass(alias="flex.samples.product.Product")]

public class Product

{

public function Product()

{

}

public var productId:int;

public var name:String;

public var description:String;

public var image:String;

public var category:String;

public var price:Number;

public var qtyInStock:int;

}

}

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 26 In this example, a data services destination named

inventory is used by . This destination is defined in data-management-config.xml. Test Your Code

You can now try out your application:

1. Save your changes.

2. Run the application. Upon startup the application will connect to LiveCycle Data Services, and synchronize the local

products array with the data stored in the inventory destination on the server.

Producing And Consuming Complex Data (Optional)

saiselva — Thu, 18 Jun 2009 12:49:31 +0000

This optional lab adds functionality to the chat application created in Lab 6, displaying a popup window to prompt for a login, and passing multiple items in the message body.

Enter Your Code

This lab updates the project created in the previous lab. It requires the creation of a new MXML component in your project. The new component, named

1. Click on

2. Open the

Login.mxml, is the popup login window, and is based on . To add this component: src in the Chat project File menu and select New and then MXML Component 3. Here is the code for

Login.mxml 4. In the

New MXML Component dialog, specify the following: o

Filename = Login o

Based on = TitleWindow o

Width = 300 o

Height = 150 5. Click

Finish Then update the new

Login.mxml component so that it looks like this:

width=”300″ height=”150″

title=”Login”

creationComplete=”PopUpManager.centerPopUp(this)”>

import mx.managers.PopUpManager;

private function processLogin():void

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 20 {

// Save the handle

parentApplication.nickname=nickname.text;

// Close popup window

PopUpManager.removePopUp(this);

}

]]>

enter=”processLogin();” />

click=”processLogin();” />

To use this code you will also need to update the

block in Main.mxml. Here is the updated code (to make editing the code easier, changed code has been highlighted below):

import mx.messaging.messages.AsyncMessage;

import mx.messaging.messages.IMessage;

import mx.managers.PopUpManager;

import mx.core.IFlexDisplayObject;

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 21 // User handle

[Bindable]

public var nickname:String=”Guest”;

// On startup

private function initApp():void

{

// Subscribe to chat

consumer.subscribe();

// Create login window

var loginWindow:IFlexDisplayObject =

PopUpManager.createPopUp(this, Login, true);

}

// Send chat message

private function send():void

{

var message:IMessage = new AsyncMessage();

message.body.sender = nickname;

message.body.chatMessage = msg.text;

producer.send(message);

msg.text = “”;

}

// Process received chat message

private function messageHandler(message:IMessage):void

{

log.text +=

message.body.sender + “: ” +

message.body.chatMessage + “\n”;

Getting Started With Real Time Flex & AIR Via Live Cycle Data Services Page 22 }

]]>

And finally, in file

Main.mxml, locate the line with the tag. You’ll want to update this so that it shows the name of the logged in user. Update the title attribute so that the tag looks like this:
width=”100%” height=”100%”>

Test Your Code

You should now try out your application:

1. Save your changes.

2. Run the application twice (you need to be running two or more copies to be able to chat). This time each window will prompt you to login. Any text typed in one chat window is echoed in all other chat windows, and the displayed text will correctly identify the user who sent it.