** Offer good for Adobe MAX 2008 attendees only. Offer cannot be combined with any other offer, package or registration code. The offer with the 10% discount off is valid on all products on all Adobe Store in EMEA available via an offer code embedded on the following URL . Offer valid for qualifying purchases made between November 16, 2008 and December 6, 2008, applicable for web or phone orders. Terms and conditions for Adobe MAX registrations will also apply. Offer is not transferrable and valid only for individual product registrant in possession of a valid purchase confirmation. OEM, NFR, and volume licensing customers are not eligible. Void where prohibited.

ShareThis

ShareThis

Unlike a classic web application (by classic I mean pre AJAX) where the pages are generated on the server the Flex application is loaded at startup and makes calls in order to load or to save data. Of course a Flex application can also make requests in order to load other Flex modules in the same way a Java application can dynamically load JAR libraries but that is a subject for a different article.

Some of the presented solutions are server agnostic – you can use anything on the backend – others assume that you have installed a Java application server where you can deploy various solutions including BlazeDS, Livecycle Data Services, GraniteDS, WebORB etc.

a)Opening a socket connection between the Flex application and the backend.

A socket connection It is the most low-level solution and at the same time the one most flexible. You will have to define your own protocol and how to serialize data (or use the AMF/Hessian protocols). In most cases, you should use this solution only if you have a very specific business need and the existing solutions do not meet your requirements).

You can use Apache MINA if you intend to do that. For example Red5 Flash server was written using the MINA framework.

Bellow is a simple code snippet that shows how to create a socket and how to read or write data:

public function initConnection():void{

    CursorManager.setBusyCursor();

    Security.loadPolicyFile(“xmlsocket://localhost:24″);

     socket = new Socket();

     socket.addEventListener( Event.CONNECT, onConnect );

    socket.addEventListener(ProgressEvent.SOCKET_DATA, socketRead);

    socket.addEventListener(ErrorEvent.ERROR, errorHandler);

    socket.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);

    socket.addEventListener(SecurityErrorEvent.SECURITY_ERROR, errorHandler);

    socket.connect(“localhost”, 23);

}

public function socketWrite(event:Event){

    socket.writeUTF(inputName.text);

    socket.flush();

}

public function socketRead(event:ProgressEvent){

  while ( socket.bytesAvailable ) {

        var data:String = socket.readUTF();

        Alert.show(data);

  }

}

You probably noticed the line Security.loadPolicyFile(”xmlsocket://localhost:24″); By default a Flex application can open connections only to the same domain from where it was loaded and on the same port. In order to be able to initiate connections to another domain a file named crossdomain.xml must exists on that server. This file specifies the what resources are available and for what domains. In our case the policy file will allow that the all the SWF loaded from any domain are allowed to connect to the port 23

<cross-domain-policy>

    <allow-access-from domain=“*” to-ports=“23″ />

</cross-domain-policy>

For more details regarding the policy files and Flash security, see this documentation.

b)Using REST and SOAP services (via HTTPService and WebServices components)

REST and SOAP services works with any type of server-side technology – also these technologies are standard and most of the biggest service providers(Yahoo, Amazon, Google, Flickr, eBay) expose their API through both of them . There is an endless debate on when to use REST and when to use SOAP but that is beyond the scope of this article. Instead I will present some samples on how to use them.

As with the sockets example, because the Flex application can initiate requests only to the same domain from where it was loaded you’ll need a crossdomain.xml file on the server where the services are located. Obvious you cannot put a policy files on every server so use the following approach: connect to the back-end server from where the Flex application was loaded and use that server to make the request – after that send the result back to the Flex application. For that you can use an existing product – BlazeDS or another solution.

Below is a sample code showing the two mxml tags used to call REST and SOAP services:

<mx:HTTPService id=“resultHttpService”

     url=“http://www.sampledomain.com/query.jsp?quote=ADBE” />

<mx:WebService id=“resultWebService”

     wsdl=“http://www.sampledomain.com/quotes?wsdl” />

In this case I am connecting directly to sampledomain so the first time the Flash Player will check for crossdomain.xml to see if the server allows the request.

In order to use the proxy approach (use the server to do the request) I will modify the code:

<mx:HTTPService id=“resultHttpService” destination=“HTTPDestination” useProxy=“true” />

<mx:WebService id=“resultWebServive” destination=“WebServiceDestination” useProxy=“true” />

and in proxy-config.xml I will add the destination definition:

<destination id=“resultHttpService”>

    <properties>

        <url>http://www.domain.com/query.jsp?quote=ADBE</url>

    </properties>

</destination>

<destination id=“ws-catalog”>

    <properties>

        <wsdl>http://www.domain.com/quotes.wsdl</wsdl>

        <soap>*</soap>

    </properties>

    <adapter ref=“soap-proxy”/>

</destination>

In the REST example it is very important to notice that due to Flash Player limitations you are allowed to use only GET and POST methods, and any return code other than 200 will generate a fault. To overcome these limitations you can write your own proxy server, or better still, use one already written (BlazeDS for example).

c)Using remoting

Remoting technology allows developers to directly invoke methods on the backend server. Initially this was possible only with Java and Coldfusion but after that different implementations have appeared for PHP, Python, Ruby and .Net. Also there are several other implementations that use Hessian protocol. Below I will present some examples for Java language, using BlazeDS.

The mxml tag from the Flex application looks the same as the ones used for calling webservices – the main attributes are the id and the destination

<mx:RemoteObject id=“productService” destination=“ProductService”/>

The destination is configured into the file remoting-config.xml:

<destination id=“productService”>

    <properties>

        <source>

            com.test.services.ProductService

        </source>

    </properties>

    <adapter ref=“java-object” />

</destination>

The remote object allows you to call methods on the Java object associated with the corresponding destination. Everything else is transparent from the user’s point of view (including the conversion between ActionScript and the Java objects and the serialization mechanism that can handle complex objects graph). You will only need to declare the mapping between the ActionScript and the Java objects using the [RemoteClass] metadata:

package com.test.model{

    [RemoteClass(alias="com.test.model.Product")]

    public class Product{

        public var id:int;

        public var name:String;

    }

}

Before you start to use remoting it’s a good idea to read this link describing data types conversion between Java and ActionScript.

It is important to notice that on every I/O operation also the remote method is invoked asynchronously so you will need to register handlers for the result and fault events.

d)Using messaging

There are currently several messaging solution on the market for the Flex applications: BlazeDS (and the commercial version Livecycle Data Services) , Granite Data Services and WebORB. All of them also have integration with JMS servers.

With messaging, a Flex application can connect to a message destination on the server (specified in messaging-config.xml) and can exchange messages with the server or with another clients (using the server as a proxy). You can use messaging to have the server push messages to the clients (for example, in an application that displays the latest stock prices) and you can use it for collaboration between clients (for example a chat application).

One of the most important things when working with messaging is choosing the proper communication channel in order to obtain real time messaging. BlazeDS server supports HTTP streaming and polling (short and long) over AMF and HTTP channels. HTTP streaming is the best way to obtain data in real time but because of the limitations from the servlet model it keeps one thread open per connection. The commercial version (Livecycle Data Services ES) overcomes this limitation with the help of NIO channels (RTMP and NIO HTTP).

Below is a code sample that shows the main tags used for messaging:

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

<mx:Consumer id=“consumer” destination=“chat”/>

The destination chat is defined below:

<default-channels>

    <channel ref=“my-rtmp”/>

    <channel ref=“my-streaming-amf”/>

</default-channels>

<destination id=“chat”>

    <properties>

        <network>

            <!--The session timeout for inactive HTTP sessions–>

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

        </network>

    </properties>

</destination>

Detailed information regarding messaging can be found in the Messaging Service chapter of the BlazeDS developer guide.

e)Using Data Management Service

Data Management Service is a feature provided (as of the writing of this article) both in Livecycle Data Services ES and WebORB. Both products offers a framework called Data Management however the architectures differ – in this article I will discuss only the Data Management framework provided by Livecycle Data Services. It operates at a much higher level than the messaging and RPC services. While it can be used for different types of applications it provides the most value for data intensive applications (especially where collaboration is very important). It is designed to solve several important challenges:

• synchronizing data on clients with the server without having to write CRUD methods
• automatic or manual data synchronization between clients
• conflict handling, paging data sets, working with offline applications and synchronizing the data when the application is online again

One can make a comparison between Data Management and Hibernate – both frameworks allow the developers to concentrate on defining the domain model and working with it without spending too much time on problems like how to persist, load, version and synchronize data. Hibernate deals with data persistence into database, Data Management with data persistence and synchronization between client applications and the server. There is also integration between these two frameworks and I’ve attached a fully working example showing that.

As with messaging,it is very important how to choose the correct communication channels (especially for automatic synchronization feature). The same choices described in the messaging example apply here.

Here is a simple example that shows how easy it is to create an application for editing a table:

The Flex code:

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

<mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute” initialize=“init();” >

    <mx:Script>

        <![CDATA[

            import test.*;

            import mx.collections.ArrayCollection;

            import mx.data.events.*;

            import mx.events.*;

            import mx.data.*;

            var    companyDataService = new DataService("test.Company");

            [Bindable]

            var companyArray:ArrayCollection = new ArrayCollection();

            function addCompany():void{

                var company:Company = new Company();

                company.name=“<new company>”;

                companyArray.addItem(company);

            }

            function deleteCompany():void{

                var company:Company = companyGrid.selectedItem as Company;

                if (company==null)

                    return;

                companyDataService.deleteItem(companyGrid.selectedItem);

            }

            function save():void{

                companyDataService.commit();

            }

            function revert():void{

                companyDataService.revertChanges();

            }

            function init():void{

                companyDataService.fill(companyArray,“mainFill”,[]);

                companyDataService.autoCommit=false;

            }

        ]]>

    </mx:Script>

    <mx:VBox width=“100%” height=“100%” horizontalAlign=“center” >

        <mx:DataGrid  id=“companyGrid” width=“40%” height=“40%” dataProvider=“{companyArray}” editable=“true” textAlign=“center”>

            <mx:columns>

                <mx:DataGridColumn dataField=“id”  headerText=“Id” editable=“false”/>

                <mx:DataGridColumn dataField=“name”  headerText=“Company”/>

            </mx:columns>

        </mx:DataGrid>

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

            <mx:Button label=“+” click=“addCompany();”/>

            <mx:Button label=“-” click=“deleteCompany();”/>

        </mx:HBox>

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

            <mx:Button label=“Save changes” click=“save();”/>

            <mx:Button label=“Revert modifications” click=“revert();”/>

        </mx:HBox>

    </mx:VBox>

</mx:Application>

The definition of the DataService object is located in the configuration file data-management-config.xml

<destination id=“test.Company” channels=“my-rtmp”>

    <properties>

        <source>flex.data.assemblers.HibernateAnnotationsAssembler</source>

        <scope>application</scope>

        <item-class>test.Company</item-class>

        <metadata>

            <identity property=“id” />

        </metadata>

        <server>

            <hibernate-entity>test.Company</hibernate-entity>

        </server>

    </properties>

</destination>

As you can see there are no remoting calls – after the collection companyArray is filled with data you can manipulate the data by adding new elements, deleting or updating elements. You have the option to call save when you want to persist the modifications or revert if you decides to discard them.

It is possible to work with more complex domain models (associations between objects) and you can find one example of this attached.

Data Management is the most appealing approach for bringing data into a Flex application, but like Hibernate case it has a steep learning curve. Documentation related to it can be found in LCDS developer guide.

The following table summarizes the advantages and disadvantages for each solution:

I have also attached an archive containing one Flex Builder project showing the data transfer using sockets and also a more advanced case of data management use. For the rest of the cases I recommend that you download the most recent version of BlazeDS (look in samples folder) or LCDS (look in the lcds-samples folder). If you want to use non Adobe products you can try WebORB (look in examples/flex folder) or GraniteDS (I was not able to find a folder with samples in this product).

ShareThis

* Offer good for new Adobe MAX 2008 registrations only. Offer good for Adobe MAX Europe full event pass registration only. The offer applies to an Adobe MAX full event pass only (EUR€840). Offer cannot be combined with any other offer, package or registration code. Offer expires 11:59 pm PDT November 14, 2008. Terms and conditions for Adobe MAX registrations will also apply. Void where prohibited.

ShareThis

ShareThis

I was not able to make the component working at all with NativeDragManagerImpl. And, just  when I thought that I was stuck I’ve found this bug on Adobe JIRA, together with a workaround. The workaround works; it is not very elegant but that’s it.

After playing a little bit more with the NativeDragManagerImpl I believe that the only decent solution is to use the described workaround if you plan to use AIR and internal drag and drop (also it seems that you cannot control the alpha level when using it).. and wait for Flex4 in order to have the bug fixed.

ShareThis

I hope that in future this kind of meetings will become a regular thing in Romania and more active user groups will be founded. Romania has one of the largest developers communities in Eastern Europe – and meetings like this help people share information, establish new connections, and improve their applications.

A picture from the conference room:

And the user group logo:

ShareThis

The specification can be found here and I’ve also created a Hello world project which can be downloaded from this location. On my local computer I was able to do about 3000 calls per second – impressive compared with a WebService call.

On the client I wrote four lines of code in order to invoke the method from the server:

AMFConnection amfConnection = new AMFConnection();

amfConnection.connect(http://localhost:8080/blaze/messagebroker/amf);

Message message = (Message)amfConnection.call(“HelloService.sayHello”, new Message(“cornel”));

amfConnection.close();

And the method signature is:

public class HelloService {

    public Message sayHello(Message message){

        return new Message(“hello “+message.getText());

    }

}

On the client you need to use two jar files from Blaze DS distribution (flex-messaging-common.jar and flex-messaging-core.jar).

ShareThis

The ComboBox component from Flex SDK does not perform a fancy search by default – for example if you press ‘A‘ it will go to the first element starting with ‘A‘, if you press ‘B‘ it will go the first element starting with ‘B‘ but if you press quickly ‘A‘ and ‘B‘ it will not display the first element starting with ‘AB‘ – instead if will display the first one starting with A and after that the one starting with ‘B’. I know that the HTML select control can do that and I’ve heard some people complaining because they are not able to do it in Flex so I planned to wrote the implementation.

There are two cases: the first one is when the drop down list is opened and the user is typing, the second one is when the drop down list is not opened but the focus is positioned on the ComboBox and the user is typing.

For the first case I extended the List component and I wrote a new findKey method. The dropdownFactory property of the ComboBox component will be set to the new class. The code is displayed below:

package com.test

{

    import mx.controls.List;

    public class ListSearch extends List    {

        private var previous:Number;

        private var current:Number;

        private var pressed:String=“”;

        protected override function findKey(eventCode:int):Boolean{

            current = new Date().time;

            if ((current-previous)>500){

                previous = current;

                pressed = String.fromCharCode(eventCode);

                return super.findKey(eventCode);

            }else{

                previous = current;

                pressed = pressed + String.fromCharCode(eventCode);

                return findString(pressed);

            }

        }

    }

}

<mx:ComboBox id=“combo” dropdownFactory=“com.test.ListSearch”>

   <mx:dataProvider>

      <mx:Array>

         <mx:String></mx:String>

         <mx:String>AAAAAAAA</mx:String>

         <mx:String>ABBBBBBB</mx:String>

         <mx:String>ACCCCCCC</mx:String>

         <mx:String>BBBBBBBB</mx:String>

         <mx:String>CCCCCCCC</mx:String>

       </mx:Array>

   </mx:dataProvider>

</mx:ComboBox>

The second case proved to be much difficult..I do not know if I will be able to do it without rewriting the entire ComboBox component – too many of methods and members have the private access modifier so extending is not a solution. I’m still wondering how to do it.

I’m curious if anyone experienced this problem when trying to modify the default behavior of the ComboBox component (or another Flex component).

2 Responses to “Flex – improve search behavior in ComboBox components”

1. Dimitrios Gianninas Says:
   August 30th, 2008 at 2:25 am Hi, Yes I have modified the TextInput component to do the exact what you are talking about. Actually I got the idea from this old blog post: http://weblogs.macromedia.com/sho/archives/2006/04/new_version_of.html

   Also the ComboBox has already been modified as such, just look here on the Adobe Exchange: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1047291

2. cornel Says:
   August 30th, 2008 at 10:41 am Hi Dimitrios,

   Thanks for letting me know - it’s very close to what I’m looking for. I will try to see if I can modify a little bit the current behavior (to add a dropdown arrow).

ShareThis

Support for offline synchronization was improved in LiveCycle Data Services 2.6 – the Flex applications deployed on the AIR runtime will use a cache base on SQLite database instead of a Local Shared Objects cache.

There are several resources describing in details this feature in detail and providing some samples – Cristophe Coenraets blog, an article on Inside RIA and the developer guide.

Of course, you can synchronize your application without using LiveCycle Data Services and use whatever suits you best (SQLite or LSO), in fact I know several developers who have been doing this for the Flex applications they deploy on browser for a long time. There are, however, advantages to using the LiveCycle Data Services solution for the offline/online synchronization are:

• you do not have to write additional code to deal with synchronization so you can save a lot of time
• you can use the already implemented conflict resolution model

ShareThis