Dr Flex & Dr LiveCycle » Adobe Flex

LiveCycle ES2 Guides – Adding custom validation classes to your model

Waldo Smeets — Fri, 12 Mar 2010 22:27:51 +0000

The Modeler in LiveCycle ES2 ships with several built-in validation classes, which you can apply to the models properties using the Styles definition. Obviously these standard classes don’t cover all use cases, especially not validation behavior that is specific to a non-US region for example. One of the cool things about Fiber models is that you can extend them using custom ActionScript code, so that you can use your custom validation classes in your projects (I plan to write another article on working with custom methods in your model by overwriting the generated value objects).

So, you can add and apply your own validation classes to the model. You just need to refer to your custom class in the Style validation annotation of the property. First, copy the validation class itself into the correct folder of your Workbench project. That’s also the trickiest part within the LiveCycle Modeler (compared to doing this for the Flash Builder modeler). The FB modeler generates the code into your Flex project folder and you can easily find it, but Workbench doesn’t generate the code in the directory where all your other projects are located (on Vista/Win7 that is C:\Users\username\Workbench ES2\). I am not exactly sure why, but I think because the model generated classes are mostly temp files that don’t have to be checked into the server (downside is that you need to backup modifications of custom classes yourself).

That ‘temp’ folder that stores all model generated classes is much deeper on your disk drive. On my system it’s C:\Users\username\AppData\Roaming\Adobe\LiveCycle\ES2\Guides\generated\. Here you find subfolders structured per LiveCycle application. For your project, find the folder where the generated myModel.as and myModel.swf files are located. Consider this folder the ‘root’ that is used by the compiler, so this is where yoy copy your custom validator classes to.

The last step is to define the style validation annotations within the property. Basically you’d define your property like this:

The ValidatorClass item defines the class path, and in this case the ‘allowedFormatChars’ is one of the parameters that is used by that class. Now make sure that Workbench recompiles your class (just move an entity a few pixels, save and the recompile will hapen). Now your custom validator class is compiled into the model itself and you are ready to use the related properties within your guide!

ps: Workbench will inform you on compilation errors if you made errors in your class.

Building a controlled Twitter solution using Adobe LiveCycle ES

Marcel Van Espen — Thu, 21 Jan 2010 15:47:28 +0000

Look at these videos that demonstrate how you can use LiveCycle ES to build a process and an AIR application to publish tweets to a corporate Twitter account where you have control on what’s published or not. Part 1 focuses on building the client with Flash Builder 4 with the LC Service Discovery plugin. In part 2 you will see how to archive all tweets in a PDF/A format within LiveCycle Content Services.

Part1: http://www.vimeo.com/8886180

Part2: http://www.vimeo.com/8886413

First FlexCamp for the Netherlands coming up !

Christoph Rooms — Wed, 22 Oct 2008 06:59:26 +0000

Flexcamp is a free community event where you can share knowledge with other Flex developers. There will be lots of sessions : the early sessions will be for starters, and later on it will become more and more advanced. The idea is that you can jump in whenever you feel like … There will be also a room for “unconference” style sessions, these sessions allow you to discuss together with a number of community members on a specific topic of your choice. Get more info on http://www.flexcamp.nl. Also James Ward and Christophe Coenraets will also be around. Flexcamp is organized by the Dutch Flex User Group. Get registered today … seats are limited !

LiveCycle Data Services 2.6 Capacity Planning Guide Now Available

Waldo Smeets — Wed, 22 Oct 2008 07:18:38 +0000

Finally the Capacity Planning Guide for LiveCycle Data Services 2.6 has been published on the Adobe site. A document like this was asked for a few times during a DrLiveCycle consult, so it seems very welcomed by Flex developers leveraging Adobe LCDS.

As Damon Cooper, Director of Engineering, wrote on his website:

With LiveCycle Data Services 2.6, you can create Adobe Flex applications that can deliver thousands of messages per second to thousands of end users simultaneously:

This document presents the results of software benchmark tests performed by Adobe engineers on my LiveCycle Data Services team and show how LiveCycle Data Services 2.6 can scale linearly and perform under load using various messaging scenarios that represent real-world situations. It provides a starting point for those who need to plan a hardware and software infrastructure that scales in a linear fashion to meet peak period demand.

You can download the Capacity Planning Guide for LiveCycle Data Services 2.6 from www.adobe.com/go/lcds26_cap_planning_guide.

Load test Flex and LiveCycle Data Services enabled applications

Waldo Smeets — Mon, 29 Sep 2008 07:00:01 +0000

Disease:
You have built an amazing cool and data intense Rich Internet Application with Adobe Flex and expect many users to work with your application. Suddenly you get concerned; how will the server behave when hundreds or even thousands of users visit your site?

Prescription:
Some more background on this problem first; You probably know that a server in production will behave differently when interacting with a RIA than compared to serving traditional HTML apps that you have been building before. This is mainly because UIs are not generated on the server any more. Though on the other side, there is probably increased data exchange between the client and server and most of all…. ideally you use the ActionScript Message Format (AMF) and Data Management cause it is easier to develop or faster on the client. But how does it impact the server, can it handle the load and do traditional load testing tools still work?

Adobe currently hosts the LiveCycle Data Services Stress Testing Framework on Adobe Labs which addresses lots of these questions. The framework helps developers that use LiveCycle Data Services ES 2.6 to load test the server-side implementation of their LCDS applications. The page is stuffed with information on how to use the Framework so definitely spend some time going through all the details. The Data Services Stress Testing Framework is currently in beta form, but available for testing and evaluation. You can download and test the framework and we obviously hope you will provide us your feedback through the Adobe Labs page.

Tips to stay healthy:
The stress / load testing problem itself has been around for long, and many software vendors have created solutions to help web developers test their servers for large rollouts. However, most of these solutions are still based on the traditional HTML web metaphor and do not work well with AMF. Also, the Data Services Stress Testing Framework currently does not support BlazeDS or other AMF server implementations. Adobe is currently working with a number of testing tool vendors to implement all of the data transport protocols available in Flash. It seems that Borland’s SilkPerformer is one of the first to have AMF3 support. I have not worked with it myself and would love your feedback. Obviously if you know of other tools that are useful for load testing your Flex applications, feel free to leave a comment!

ps: I heard internally that we are working on a new Capacity Planning Guide for LiveCycle Data Services ES 2.6 whitepaper, but it has not yet been finalized. I assume it will be posted in the coming weeks on the LiveCycle Development Center so stay tuned.

UPDATE: You can download the Capacity Planning Guide for LiveCycle Data Services 2.6 from www.adobe.com/go/lcds26_cap_planning_guide.

RIAlisation of Document Management

Marcel Van Espen — Tue, 19 Aug 2008 10:54:21 +0000

Disease:

You are implementing a Document Management system or you have just deployed this within your organization. A common challenge is very often to find a balance between a technically clean, flexible, scalable and future-proof solution on one hand, and to get your solution adopted by the end-users on the other.

Unfortunately the term end-users is often interpreted as “the last step in the deployment”, and very often the solution that is deployed is not adopted very well because it is too difficult or not intuitive to use. Have a look at some of the document management systems out there, and ask any “end-user” if they like the interface that is offered from that product!

Often the business where most “end-users” work, pay for these projects, and therefore should expect a solution that fits within their way of working, their processes and their knowledge-level. So why offer an interface that offers over 100 document management features where the user only wants to store a document in the archive. Result is most likely that the things they really need are hidden somewhere, and require extensive training. For a casual contributor (the 80/20 rule applies here as well…. most people in an organization only every now and then interact with the Document Management System) it is too much to do a 1 or 2 day training on how to use an application, especially when he/she needs to do this over and over again.

Prescription:

I guess the point above is clear, and there should be more focus on creating engaging experiences as well for business users that use Document Management in their daily activities. You will find a lot of examples on how web 2.0 changes everything that you see on the web. Rich Internet Applications (RIA) are more and more common for many websites. A more recent development is that RIA’s can also be deployed on your desktop for instance by using Adobe AIR.

So what does deploying a RIA web application to your desktop mean? Think about using standard web technology such as HTML, AJAX and Flash for building desktop applications that support business users in their activities. Think about intuitive, easy-to-use, and graphically oriented applications that everybody enjoys to work with. Now this can be the front-end for your Document Management System!

Adobe offers a Document Management System via LiveCycle Content Services ES. Yes, it has all the features you need…. and more. It offers a web interface, integration with MS-Office and many other ways to interact with the system as a business user. I will not go into te details for each way of interacting with the system. However, there is one specific area that I would like to highlight here.

In the development community out there you will find many interesting applications that can be used as a front-end for Content Services. There is 2 I would like to highlight in this post.

Firstly there is an initiative called Opsoro. These guys are developing an AIR application that can be used on top of LiveCycle Content Services. The application is build using AJAX techniques, and resides right on a local computer’s desktop. No bookmarks, no limitations of a web-browser… very simple and easy. Here is a screenshot on how this looks:

It has some interesting features such as live-search, preview, etcetera. Below a screenshot on how the preview is displayed.

According to the website of Opsoro there are other things planned to utilize the features that are offered by Adobe AIR even more, such as offline usage, drag&drop interaction with the desktop. Check out the roadmap and other things their website.

Now Opsoro is not the only initiative out there that focuses on the usability of a Document Management System by offering a RIA on the desktop. Another initiative is FlexSpaces by Integrated Semantics. Their AIR client is based on Adobe Flex and offers some very handy features for searching using Tag Clouds, category search, tasks, launching processes, offline usage, drag&drop, and many others. Check out the complete list and their screencams.

You will notice that the applications above are related to Alfresco, an open source ECM solution. Adobe LiveCycle Content Services ES is based on Alfresco, and includes integration with other enterprise features/functions of LiveCycle ES. A good post about this can be found here.

The screenshots above are real screenshots running on my local LiveCycle Content Services demo machine. If you would like to know more, please get in touch.

Tips to stay healthy:

If you are considering an implemenation of a Document Management System, do think about the success factors of that implementation. One can have the most optimal technical solution in place, but if it is hard to embed in the business processes of business users, the system will never bring the desired results. Key here is that the system is easy to use, intuitive, requires little or no training, etcetera. This is what Rich Internet Applications are about. Now it’s time to RIAlise Document Management!

LiveCycle Data Services and Java EE container managed security

Marc Meewis — Tue, 08 Jul 2008 14:14:19 +0000

Disease

You want to authenticate via a Flex application and still leverage Java EE container managed security.

Prescription

With LiveCycle ES Data Services you can authenticate users using the Flex application and you can pass these credentials on to the back-end where they will be verified by the container. The server-side Flex Session give you access to the Principal object. Through the use of roles you can authorize users to invoke LiveCycle ES Data Services endpoints or avoid users invoking specific LiveCycle ES Data Services assembler methods.

Following steps explain how to set this up on Tomcat 5.5.

Download the source of this sample from Adobe share and import the Flex project
Configure container managed security in Tomcat.
Follow the steps in $LCDSHOME/resources/security/tomcat/readme.txt (download LiveCycle ES Data Services)
Create a LiveCycle ES Data Services project in Eclipse (Dr. FLex & Dr. LiveCycle)
In your project, create a context.xml under META-INF/

In your project, edit services-config.xml in WEB-INF/flex, the tag should point to the following login command:

                                   server="Tomcat">
      false

To pass on the credentials captured in your Flex application to your back-end you can use (see main.mxml in the code sample):

personDS.setCredentials(username.text, password.text);

personDS is a LiveCycle ES Data Services Data Management endpoint

The container will only allow you to access the LiveCycle ES Data Services endpoint when these credentials are valid.
To obtain the Principal in the LiveCycle ES Data Services assembler you execute (see PersonAssember in the code sample). For more info on assemblers, go to Dr Flex & Dr. LiveCycle or consult the LiveCycle Data Services Developer Guide.

Principal principal = FlexContext.getUserPrincipal();

Tips to stay healthy :

You can extend this further by leveraging the integration between LiveCycle ES Data Services and Java EE security by protecting resources via roles to allow only specific users to invoke Data Services endpoints.

Embedding the following in your LiveCycle ES Data Services data-management-config.xml file, you can avoid users not having the correct role to invoke this endpoint (see sample code):

            Custom

                help

….

LiveCycle ES Data Services [Data Management] and Java Enums

Marc Meewis — Tue, 08 Jul 2008 12:25:20 +0000

Disease :

You want to use LiveCycle ES Data Services on top of a Java back-end that is using Java enums.

Prescription :

LiveCycle ES Data Services 2.6 supports Java enums. When serializing from Java to ActionScript, Data Services will transform the Java enum value into an ActionScript String. When serializing from ActionScript to Java, Data Services will assign the correct enum value to the corresponding Java attribute.

Let’s see how it looks like. To get started we create a LiveCycle ES Data Services project (What is the preferred LiveCycle Data Services development environment). In the next part we will run through all the steps needed to develop a LiveCycle ES Data Services Data Manangement application.

The Java side

The Java enum looks like this

package myenum.test;

public enum MyEnum {
    VOLVO,
    PORSCHE,
    AUDI,
    BMW;
}

The DTO looks like this:

package myenum.test;

public class MyDTO {

    public int id;
    public MyEnum car;
    public String name;
}

LiveCycle ES Data Services Data Management automatically takes care of all DTO’s that are modified and retrieved by the Flex application (created, deleted and updated objects). When a client side "commit" operation is invoked the modifications are sent to the server. Those changes are mapped to your back-end via an assembler class. Typically this class implements four methods (fill, createItem, updateItem and deleteItem). In this example the assembler class looks like this:

package myenum.test;

import java.util.ArrayList;
import java.util.Collection;
import java.util.List;

import flex.data.assemblers.AbstractAssembler;

public class MyAssembler extends AbstractAssembler {

    @Override
    public Collection fill(List fillParameters) {
        ArrayList list = new ArrayList();
        MyDTO myDTO = new MyDTO();
        myDTO.id = 1;
        myDTO.name = "Marc";
        myDTO.car = MyEnum.AUDI;
        list.add(myDTO);
        // TODO Auto-generated method stub
        return list;
    }

    @Override
    public void createItem(Object item) {
        MyDTO myDTO = (MyDTO) item;
        System.out.format("Name : %s\nCar : %s", myDTO.name, myDTO.car);
    }

@Override
public void deleteItem(Object previousVersion) {

        MyDTO myDTO = (MyDTO) previousVersion;
        System.out.format("Name : %s\nCar : %s", myDTO.name, myDTO.car);
    }

    @Override
    public void updateItem(Object newVersion, Object previousVersion,
            List changes) {

        MyDTO myDTO = (MyDTO) newVersion;
        System.out.format("Name : %s\nCar : %s", myDTO.name, myDTO.car);
    }
}

In the real world these methods will be calling your specific services to retrieve and process the information.

Before we go to the Flex client we need to configure a Data Management endpoint by configuring the data-management-config.xml file in your LiveCycle ES Data Services project (located in WEB-INF/flex)

myds">

true

false

myenum.test.MyAssembler
application

The Flex side

The ActionScript DTO (it maps directly to the Java class):

package vo
{
    [Managed]
    [RemoteClass(alias="myenum.test.MyDTO")]
    public class MyDTO
    {
        public function MyDTO()
        {
        }
        public var id:int;
        public var name:String;
        public var car:String;

}
}

The Flex application:

http://www.adobe.com/2006/mxml" layout="absolute">

import vo.MyDTO;

            private function createMyDTO():void {
                var myDTO:MyDTO = new MyDTO();
                myDTO.id = 0;
                myDTO.name = "Marc";
                myDTO.car = "BMW";
                myCol.addItem(myDTO);
            }

]]>

                             dataProvider="{myCol}" editable="true">




                              enabled="{myDS.commitRequired}" click="myDS.commit()"/>
                              enabled="{myDS.commitRequired}" click="myDS.revertChanges()"/>

On the Java side "car" is a enum while in ActionScript it is a String. Assigning "BMW" to a newly created myVO results serverside in a new myVO with the car enum equal to BMW.

Notice that there are no explicit calls made to the server for creating, deleting or updating the DTO’s. The only interaction with the server happens through the fill and the save operation. LiveCycle ES Data Services Data Management takes care of the hard work.

You can download the sources for this sample as a LiveCycle ES Data Services project archive from Adobe Share, next import this into your Eclipse + Flex plugin environment.

Tip to stay healthy:

Check out Christophe Coenraets‘ website to find more examples about LiveCycle ES Data Services. You can download LiveCycle ES Data Services 2.6 (beta) from Adobe Labs.

How to integrate Flex with an online payment system like Ogone ?

Christoph Rooms — Wed, 25 Jun 2008 15:20:08 +0000

Disease :

What would be the best way to integrate an online payment system like Ogone into my Flex application ?

Prescription :

Depending on the payment system, there are a number of different options.

Option 1 : Use the payment provider web application that handles payment

This is probably the best way to integrate as the payment provider will handle the full payment and has to take care of security. Most of the payment providers will provide you with an html application that you can integrate into your own application, and which is running on a secure environment.You would forward your user to this HTML page. When the payment transaction is done,
the payment service will return your customer to your application and provide
it with information on the transaction. So your Flex application will not even see any credit card details !

So how can you integrate this secure HTML payment application into your Flex application ? The best way is to show the application in an iFrame on top of your Flex application. The Flex application will be able to communicate with the iFrame through FABridge. FABridge is an Adobe javascript library that allows flash player to interact with the HTML container and the other way around. Alistair Rutherford wrote a post on how to use an iFrame on top of your Flex application.

The solution Ogone is providing is Ogone e-commerce. I have build an example integrating Flex with Ogone e-commerce. You can find the source code here.

Here in a few steps what you need to take care of :

1. PaymentEvent.as : Custom event that is used to pass the payment data to the HTML page running in the iFrame.

2. iFrame.as : iFrame component build by Alistair RutherFord

3. Add the FABridge javascript library to ‘html-template/index.template.html’ and add the .js itself.

4. ogone_html.html : html file that will runn in iFrame. Main part is an HTML form that we’ll submit to the Ogone server. Notice how I added an event listener for the Payment event, and i fill in the form and submit it. Also check the form to see what is configurable on the payment side.

5. ogone_bevestiging : html file that will be called by Ogone when transaction is over. Ogone will call this html file with an attribute indicating the status of the transaction. When this page is loaded you can see in the load() function I’m calling the transactionOver() function in my Flex application (Ogone.mxml). TransactionOver function will take as an argument the transaction status and show it in my Flex application.

You can find the source files on here

And have a look at the application here. (Use this test VISA number : 4111 1111 1111 1111)

Option 2 : Use the payment provider API’s.

In this case you’ll build the UI that will handle payment details yourself, which means you’ll be responsable for providing the necesary security measures. After collectint the credit card details you’ll be using the API’s to handle the payment.

So depending on the API technology you’ll have to use a specific solution :

Java API : LiveCycle Data Services/BlazeDS.
Web Services API : Flex client or through LiveCycle Data Services or BlazeDS
PHP API : AMFPHP
Actionscript API : Flex Client

Tips to stay healthy :

Taking care of payments is a delicate thing. Check out legal and security issues. Try to go for solution 1, which will put those responsibilities on the payment provider.

What is the preferred LiveCycle Data Services development environment

Christoph Rooms — Wed, 18 Jun 2008 09:04:39 +0000

Disease :

What would be the best development environment if I want to start developing a Flex applications that uses LiveCycle ES Data Services, so I can interact with a database or any other backend system ?

Prescription :

You will need these components :

Flex Builder (full version or plugin) : You will use the Flex Builder plugin to build and debug your Flex application (MXML/Actionscript).
Apache Tomcat (or any other J2EE server) : LiveCycle Data Services is a J2EE Web component (WAR), so you need a J2EE web container to run LiveCycle ES DataServices. You’ll need to add “Java Open Transaction Manager” to Tomcat, to make sure Data Management can handle your database transactions.
Eclipse WTC plugin : This plugin extends the Eclipse platform with tools for developing Web and Java EE applications.
LiveCycle Data Services (get your trial version at adobe.com)

All these components are available for Windows and Mac. So you can set up this environment on both operating systems.

For setting up these components there are 2 approaches :

Install Eclipse and add Flex Builder as a plugin. In this case you probably want to start off with the Eclipse “Europa” version. The Eclipse Europa build is is a coordinated release of different Eclipse project teams. This release will contain extra components, like WTC, that will make development easier.
Install Flex Builder and add the WTC plugin.

Mihae Corlan has described the second option. In his post you can also find how to create a combined Flex/J2EE project and how to add the Tomcat installation. (which is applicable to both approaches ofcourse )

Mihae also added a post on how debugging works in a Flex/J2EE project.

So now you are ready to build your Flex data rich application that will use LiveCycle Data Services. You will be able to edit the Flex Data Services configuration XML files in Eclipse, write your Assemblers, etc … Every modification will be picked up and automatically deployed.

Tips to stay healthy :

When building data intensive RIA applications with intensive use of CRUD operations, use LiveCycle Data Services data management functionality. It will save you loads of development time and minimize the number of code that has to be written. This will benefit the readability and maintenance of your code and it provides you extra functionality like support for database transactions.