BlazeDS and LCDS Feature difference

January 31, 2008

Following are the differences between LCDS and BlazeDS in terms of features. For more details on the features, please visit http://www.adobe.com/products/livecycle/dataservices/features.html

πŸ™‚ – Indicates the feature is available

Features BlazeDS LCDS
Data management Services    
Client-Server synchronization   πŸ™‚
Conflict resolution   πŸ™‚
Data paging   πŸ™‚
SQL adapter  
πŸ™‚
Hibernate adapter  
πŸ™‚
Document Services    
LiveCycle remoting   πŸ™‚
RIA-to-PDF conversion   πŸ™‚
Enterprise-Class Flex application services    
Data access/remoting
πŸ™‚
πŸ™‚
Proxy service
πŸ™‚
πŸ™‚
Automated testing support  
πŸ™‚
Software clustering πŸ™‚
πŸ™‚
Web tier compiler  
πŸ™‚
Enterprise Integration    
WSRP generation  
πŸ™‚
Ajax data services πŸ™‚
πŸ™‚
Flex-Ajax bridge πŸ™‚
πŸ™‚
Runtime configuration
πŸ™‚
πŸ™‚
Open adapter architecture πŸ™‚
πŸ™‚
JMS adapter
πŸ™‚
πŸ™‚
Server-side component framework integration πŸ™‚
πŸ™‚
ColdFusion integration  
πŸ™‚
Offline Application Support    
Offline data cache  
πŸ™‚
Local message queuing  
πŸ™‚
Real – Time Data    
Publish and Subscribe messaging
πŸ™‚
πŸ™‚
Real -time data quality of service  
πŸ™‚
RTMP tunneling  
πŸ™‚
Advertisements

What do you need for developing Adobe Flex applications

January 31, 2008

This is for the developers who want to start developing a Flex application and want to know what they need for developing a Flex application. For more details about Adobe Flex, check out these blogs What is Adobe Flex and Why Adobe Flex.

All you need to develop an Adobe Flex application are

1. Flex Software Development Kit (SDK) (Required)

2. Knowledge of Action Script 3 and MXML (Required)

3. Flex builder IDE (Optional)

4. LiveCycle Data Services or Blaze Data Services (Optional)

5. Flash player (Required)

How to develop

You develop Adobe Flex applications using MXML and Action Script 3. Once the application is developed, you compile the application using compiler in the SDK into either SWF or SWC. The SWF is the compiled form of the Adobe Flex application and will run on the Flash player. SWC is an archive for flex components and other assets.

Flex SDK

Flex SDK contains core component library, development languages, and compiler for Flex applications.

ActionScript 3 (AS3)

ActionScript 3 is a powerful, object-oriented programming language. ActionScript 3.0 is used for rapidly building rich Internet applications. With ActionScript 3.0, developers can achieve excellent productivity and performance with content and applications that target Flash Player. In a Flex application you use AS3 to write programmatic logic for responding to both user-initiated and system-initiated events at runtime.

MXML

MXML is a XML based markup language. You use MXML to lay out user interface components in the Adobe Flex application. You can also use MXML to declaratively define non-visual aspects of an application, such as access to data sources on the server and data bindings between user-interface components and data sources on the server.

Flex Builder IDE

This is an Eclipse based IDE used for developing Rich Internet Applications using Adobe Flex. Flex Builder is not free. Using Flex Builder makes the development a lot easier.

http://www.adobe.com/products/flex/flexbuilder/

Blaze DS

BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe Flex and Adobe AIR applications for more responsive rich Internet application (RIA) experiences. BlazeDS is available free of cost for download.

http://labs.adobe.com/technologies/blazeds/

LiveCycle DS

LiveCycle DS is similar to BlazeDS but provides a lot more features than BlazeDS.

http://www.adobe.com/products/livecycle/dataservices/

Flash Player

Flex applications will run on the Flash player. You will need Flash player to run a compiled Flex application.

What do you need to buy?

You need not buy anything for developing a Flex application. If you want to make your development easier then you need to buy Flex Builder IDE.

Check out Flex Developers Guide

Let’s develop Rich Internet Applications πŸ™‚


Shared Objects in Flex

January 24, 2008

It will be value add to your web applications if they can recognize the users who are revisiting your applications and displays customized messages to the user. Adobe Flex provides a good solution for this. Adobe Flex allows developers to store objects on the client’s machine without compromising security on the client’s machine.

What are Shared Objects

Shared objects behave like cookies. You use SharedObject class to store data on the client’s hard disk and retrieve those objects in the same session or in another session. Applications can access their own shared object data only. You can make your shared data object available to other application from the same domain and you cannot share with applications from other domains.

Shared objects allow you to write simple objects like Arrays, String and Date. You can create multiple shared objects for one application. Each shared object is associated with a name. To add data to shared objects, you use the data property of the shared object. Below is a function, which display a welcome message if the user is revisiting.

By default, Flash can save locally persistent SharedObject objects of up to 100 KB per domain. When the application tries to save data to a shared object that would make it bigger than 100 KB, Flash Player displays the Local Storage dialog box, which lets the user allow or deny local storage for the domain that is requesting access.

1 private function storeVisitDate():void

2 {

3 var visitDate:SharedObject = SharedObject.getLocal(“userVisitedDate”);

4 if(visitDate.data.lastVisitedDate != null)

5 {

6 Alert.show(“Welcome back, you visited last on ” + visitDate.data.lastVisitedDate);

7 }

8 visitDate.data.lastVisitedDate = new Date();

9 visitDate.flush();

10 }

Explanation:

Line #3: getLocal() method of the shared object retrieves shared object with the name specified. If the object does not exist it is created.

Line #4: checking if lastVisitedDate property is available. If it is available then we retrieve it.

Line#8 and #9: here we reset the lastVisitedDate property and use flush() method to save the shared object. Invoking flush() method is not necessary, shared objects are automatically saved when the application is closed.

Please refer to SharedObject in Flex language reference for more details.


Localizing Flex Applications

January 22, 2008

Localizing a Flex application is very simple. All we need to do is to create resource bundles for different languages and then use the ResourceManager class provided by the Flex API to get the resources. Just changing the locale of the resource manager will reflect changes in the entire application with the values from the new locale’s resource bundle.

Creating assets can be done in two ways. One is to create resource bundles, which will be compiled into the application SWF or create resource modules, which are resource bundles compiled as swfs which will not be compiled into the application SWF. If the resource bundles are created as resource modules, you can load them on runtime using the loadResourceModule()method of the resourceManager.

resourceManager is the instance of the ResourceManager class, included in the UIComponent class. If your class is not extending UIComponent then you can get the instance of the ResourceManager using ResourceManager.getInstance().

Sample application

Sample application is a registration form which supports two locales. I created resource bundles and accessed them using resourceManager property of the UIComponent class.

Creating Resource Bundles

All the resource bundles have to be created in one parent folder. Under this parent folder there should be one separate folder containing resource bundles for each locale. For example if I want to support two locales (en_US and en_ES) in my application and I my parent folder is named as “Locales”, then I might have following folders.

Locales/en_US

Locales/en_ES

These two folders have to be added to the application source path. Create two properties files named WelcomePage.properties and place them in the two folders. The properties files have to be in UTF-8 format. Modify the WelcomePage.properties files as shown below.

en_US/WelcomePage.properties

welcome_title_text=Welcome, select your locale and register

form_first_name_text=First Name

form_second_name_text=Last Name

form_gender_text=Gender

form_gender_list_male_text=Male

form_gender_list_female_text=Female

form_company_text=Company

form_designation_text=Designation

form_description_text=About yourself

form_register_text=Register

form_response_text=Registration Successful

select_locale_text=Change Locale

en_ES/WelcomePage.properties

welcome_title_text=Bienvenido, seleccione la opciΓ³n y registro

form_first_name_text=Nombre

form_second_name_text=Apellido

form_gender_text=GΓ©nero

form_gender_list_male_text=Hombre

form_gender_list_female_text=Mujeres

form_company_text=CompaΓ±Γ­a

form_designation_text=DesignaciΓ³n

form_description_text=Acerca de ti

form_register_text=Registro

form_response_text=El Γ©xito de Registro

select_locale_text=Cambiar Locale

Adding Locales

Add the locale to the compiler options.

-locale=en_US,en_ES

When adding other locales, you must also include the framework resources for that locale. The en_US locale is already provided. For all other locales, you must create the framework resources. To create a locale’s framework resources, use the copylocale utility in the /sdk/bin directory. For Flex Builder, the copylocale utility is located in flex_builder_install/sdks/3.0.0/bin. You can only execute this utility from the command line.

For example, to create the framework locale files for the es_ES locale, use the following command:

copylocale en_US en_ES

Using the Resource Manager to retrieve the resources

Below is the MXML file in which we use the ResourceManager to retrieve the locale specific resources. This application provides a combo box, using which you can change your locale preference. When the locale preference is changed, the application reflects the changes.

MXML file

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical”>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.resources.ResourceBundle;

[Bindable]

private var locales:Array = [{data:”en_US”, label:”English”}, {data:”en_ES”, label:”Spanish”}];

private function changeLocale():void

{

resourceManager.localeChain =[currentLocale.selectedItem.data];

genderList.dataProvider = listValues;

}

private function register():void

{

Alert.show(resourceManager.getString(‘WelcomePage’, ‘form_response_text’));

}

]]>

</mx:Script>

<mx:Metadata>

[ResourceBundle(“WelcomePage”)]

</mx:Metadata>

<mx:Array id=”listValues”>

<mx:String>{resourceManager.getString(‘WelcomePage’, ‘form_gender_list_male_text’)}</mx:String>

<mx:String>{resourceManager.getString(‘WelcomePage’, ‘form_gender_list_female_text’)}</mx:String>

</mx:Array>

<mx:HBox horizontalAlign=”center” width=”100%”>

<mx:Label text=”{resourceManager.getString(‘WelcomePage’, ‘select_locale_text’)}” fontSize=”11″ fontWeight=”normal”/>

<mx:ComboBox id=”currentLocale” dataProvider=”{locales}” change=”changeLocale()”/>

</mx:HBox>

<mx:Label id=”welcomeLbl” text=”{resourceManager.getString(‘WelcomePage’, ‘welcome_title_text’)}” fontWeight=”bold” fontSize=”13″/>

<mx:Form id=”registrationForm”>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_first_name_text’)}”>

<mx:TextInput id=”firstNameTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_second_name_text’)}”>

<mx:TextInput id=”lastNameTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_gender_text’)}”>

<mx:ComboBox id=”genderList” dataProvider=”{listValues}”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_company_text’)}”>

<mx:TextInput id=”companyTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_designation_text’)}”>

<mx:TextInput id=”designationTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_description_text’)}”>

<mx:TextInput id=”descriptionTxt”/>

</mx:FormItem>

</mx:Form>

<mx:Button label=”{resourceManager.getString(‘WelcomePage’, ‘form_register_text’)}” click=”register();”/>

</mx:Application>

Try using the application. http://sujitreddy.g.googlepages.com/Localizing.swf πŸ™‚


Messaging using Flex and Blaze DS

January 17, 2008

The BlazeDS messaging capability is based on established messaging standards and terminology. BlazeDS messaging provides a client-side API and a corresponding server-side Message Service (BlazeDS Message Service) for creating BlazeDS messaging applications. BlazeDS messaging also enables participation in Java Message Service (JMS) messaging.

There are two components available in the Flex frame work for messaging, mx:Producer and mx:Consumer. Producer is the component which is used for producing messages to a destination and Consumer is used for subscribing to a destination and receiving messages published to that destination. Consumer also gives option to filter the messages based on user defined constraints.

I have created a chat application using Flex and Blaze DS. Flex application will use the publish-subscribe messaging mechanism. Flex application checks for new messages using polling mechanism.

This chat application will send messages to selected users only. I have not included any error handling stuff to keep the code as simple as possible. πŸ™‚

We just need to create the client, the server side message handling is provided by Blaze DS. We create an mxml file, which will handle the client logic and configure a destination on the server.

BlazeDS should be setup and running to execute this sample. Please follow the steps in https://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/ to set up the BlazeDS and setting up a Flex application, which is mapped to BlazeDS root directory.

Chat application snapshots

geeva chat client

murali client

Chat Client

Please download the mxml file from this URL: http://sujitreddy.g.googlepages.com/ChatApplication.mxml

Configuring destination on the server

Navigate to tomcat/webapps/blazeds/WEB-INF/flex under BlazeDS Setup folder and open the file messaging-config.xml. Replace the XML file content with the content below. The ID of the destination added below will be used by the components at the client side.

messaging-config.xml

<?xml version=”1.0″ encoding=”UTF-8″?>

<service id=”message-service”

class=”flex.messaging.services.MessageService”>

<adapters>

<adapter-definition id=”actionscript” class=”flex.messaging.services.messaging.adapters.ActionScriptAdapter” default=”true” />

</adapters>

<default-channels>

<channel ref=”my-polling-amf”/>

</default-channels>

<destination id=”chat-application”>

<properties>

<network>

<session-timeout>0</session-timeout>

<throttle-inbound policy=”ERROR” max-frequency=”50″/>

<throttle-outbound policy=”REPLACE” max-frequency=”500″/>

</network>

<server>

<max-cache-size>1000</max-cache-size>

<message-time-to-live>0</message-time-to-live>

<durable>true</durable>

<durable-store-manager>flex.messaging.durability.FileStoreManager</durable-store-manager>

</server>

</properties>

</destination>

</service>

That’s it. Your chat application is ready for use. πŸ™‚ Adobe ROCKS πŸ™‚


Mapping Action Script objects to Java objects

January 16, 2008

Invoking Java classes on a server is a very useful feature provided by the BlazeDS. When a method from a Java class is invoked from a Flex application on the client, Blaze DS converts automatically converts the Java data types to suitable Action Script (AS) data types

For Java objects that BlazeDS does not handle implicitly, values found in public bean properties with get/set methods and public variables are sent to the client as properties on an Object. Private properties, constants, static properties, and read-only properties, and so on, are not serialized. For ActionScript objects, public properties defined with the get/set accessors and public variables are sent to the server.

BlazeDS uses the standard Java class, java.beans.Introspector, to get property descriptors for a Java bean class. It also uses reflection to gather public fields on a class. It uses bean properties in preference to fields. The Java and Action-Script property names should match. Native Flash Player code determines how ActionScript classes are introspected on the client.

We can map an Action Script class to a Java class on the server. Once mapped the objects are casted to respective types on the client and the server. We use [RemoteClass] metadata tag to map Action Script class to the Java class.

For this we will create a Person.java class and an Person.as class and map both. Once mapped we will invoke a method from a Java class which will return a object of the type Person.java on the server using RemoteObject component. Once the object is returned, we will use the returned object as object of the type Person.as

We need BlazeDS setup and running to execute this sample. Please follow the steps in https://sujitreddyg.wordpress.com/2008/01/14/invoking-java-methods-from-adobe-flex/ to set up the BlazeDS and setting up a Flex application, which is mapped to BlazeDS root directory. Use the same link to configure a destination on BlazeDS to map to a Java Class.

Creating Java classes

RemoteServicehandler.java

This class will be invoked from the Flex application. Once the getPerson() method is invoked, we will return the Person object.

package com.adobe.remoteobjects;

import java.util.Date;

import com.adobe.objects.Person;

public class RemoteServiceHandler {

public RemoteServiceHandler()

{

}

public Person getPerson()

{

Person person = new Person();

person.id = 1;

person.dateOfBirth = new Date();

person.name = “Sujit”;

person.company = “Adobe”;

return person;

}

}

Person.java

package com.adobe.objects;

import java.util.Date;

public class Person {

public int id;

public String name;

public Date dateOfBirth;

public String company;

}

Under the folder where the Blaze DS zip file was extracted, navigate to tomcat/webapps/blazeds/WEB-INF/classes and then copy the Java class in appropriate directory structure.

Creating Flex application

RPC.mxml

Please do have a reference to the Person.as in your mxml file, otherwise Person.as will not be linked to the SWF file created and will not be available on run time.

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical”>

<mx:Script>

<![CDATA[

import objects.Person;

import mx.rpc.events.ResultEvent;

import mx.controls.Alert;

private function displayPersonDetails(event:ResultEvent):void

{

var person:Person = Person(event.result);

Alert.show(person.name + “, ” + person.dateOfBirth.toDateString() + “, ” + person.id);

}

]]>

</mx:Script>

<mx:RemoteObject id=”remObj”

destination=”CreatingRpc”

result=”displayPersonDetails(event)”

fault=”Alert.show(event.fault.faultString);”

/>

<mx:Button label=”Get Person” click=”remObj.getPerson();” />

</mx:Application>

Person.as

Please observe the [RemoteObject] metadata tag. Using this tag we map this class to the Java class on the remote location. The Java class should be in the classpath, recognizable by the BlazeDS. The name should be the fully qualified name.

package objects

{

[RemoteClass(alias=”com.adobe.objects.Person”)]

public class Person

{

public var id:int;

public var name:String;

public var dateOfBirth:Date;

}

}

That is all we need to do. πŸ™‚


Extracting content from HTML based server response in Adobe Flex

January 14, 2008

Using HTTPService component of Adobe Flex we can send a request to a page on the server. Most of pages on the server are developed using either server side scripting languages or static HTML pages that return content in form of HTML to the client. Here we show how to extract the content from HTML response returned by the server and also how to send parameters to the server scripts.

After an RPC component calls a service, the data that the service returns is placed in a lastResult object. By default, the resultFormat property value of HTTPService components and WebService component operations is object, and the data that is returned is represented as a simple tree of ActionScript objects. Flex interprets the XML data that a web service or HTTP service returns to appropriately represent base types, such as String, Number, Boolean, and Date. To work with strongly typed objects, you must populate those objects using the object tree that Flex creates. WebService and HTTPService components both return anonymous Objects and Arrays that are complex types. If makeObjectsBindable is true, which it is by default, Objects are wrapped in mx.utils.ObjectProxy instances and Arrays are wrapped in mx.collections.ArrayCollection instances.

I created a JSP and a Flex application, which will invoke the JSP on the server side and extract the content from the response in HTML format. The JSP returns HTML tags as response. We can modify the type of the lastResult object returned by the HTTPService object by modifying the resultFormat property of the HTTPService component.

In this example we will pass a parameter to the JSP and convert the response from the JSP to Object of the type XML by setting the resultFormat property of the HTTPService object to e4x and then extract the content from the <Body> element.

Create a JSP page

This JSP page takes the name as a parameter and responds a message with the input parameter.

First.jsp

<html>

<head><title>First Page</title></head>

<body>

<%

out.println(“Hi ” + request.getParameter(“name”));

%>

This is from the JSP.

</body>

</html>

Create Flex application

This application sends an HTTP service request to the JSP page. Once the JSP page responds, the response is converted into Object of the type XML by setting the resultFormat property of the HTTPService component to e4x. We parse the result object and retrieve the content in the <BODY> tag and display it. You can also observe that we are passing a parameter to the JSP in the send() method of the HTTPService component.

RPS.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; layout=”vertical”>

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.controls.Alert;

private function handleHttpService(event:ResultEvent):void

{

Alert.show(event.result.toString(), “Complete Response”);

Alert.show(event.result.body.toString(), “Content in Body element”);

}

]]>

</mx:Script>

<mx:HTTPService id=”httpObj” url=”http://localhost:8400/sujit/first.jsp&#8221;

resultFormat=”e4x”

showBusyCursor=”true”

result=”handleHttpService(event)”

/>

<mx:Button id=”httpService” label=”Http Service” click=”httpObj.send({name: ‘Sujit’});” />

</mx:Application>

Snapshot of the application displaying the extracted content from server response

HTMLResponseExtracted