MORE FOCUS. MORE VALUE

Technology Conference Mumbai Jan 2010

Flex for Enterprise Applications

Darshan Vartak, BSC 7

2

This White Paper talks about

Evolution of UI Technologies The User and Developer Expectations What is different with Flex? Where does it stand against other UI technologies? Flex Concepts Drawbacks of flex Cairngorm Architectural Overview Custom Framework Architectural Overview

3

The Evolution

Initially in the desktop processing world a UI languages like VB, MFC and even AWT gave a rich look and feel

With the introduction of applications based on WWW, developers were restricted to limited options supported only by the browser

AJAX could provide partial refreshes and the support for this was encouraging. Even the end user was quite happy with this kind of experience.

However, the programmer still struggled a lot in areas like extendibility, modular and stricter programming model, separation of concerns, debugging and browser independence etc.

4

The Evolution

Flash player was known, to most of us, as a movie player or game player with some jazzy graphics. Adobe has put in lot of effort into building a programming model around this widely accepted player to give a new way of looking at GUI design

This provided the complete framework to design your GUI, having separation of concerns, organization of code, maintainability and extensibility, which were the attributes of OO Design

5

Expectations

Lightweight Secure Extensible Maintainable Should provide rich set of controls (tree, grid, graphs etc) Should provide a modular way of handling navigation, user events,

validations, messages and server side communication The IDE to design your screen using drag and drop and preview your

screen Declarative as well as programmatic UI options State full UI, relieving server of maintaining session Browser independent The skill set should be available or should have smooth and short learning

curve

6

Flex Offers

You can write Flex code once and run it in any Web browser for which a Flash Player plugin exists.

Flex is based on standards. Flex provides a rich set of components, Flash effects (including

animation, video, and audio), and accessibility features that make it easy to add richness and highly fluid experiences to a Web application.

Java and ActionScript 3.0 has striking similarity between each other in terms of in language features, concepts, and syntax.

Flex Builder, an eclipse based IDE for flex is available in two versions, as a Plugin to your existing eclipse installation or a stand-alone Flex Builder IDE.

7

What more does it give

Flex has very simple mechanism for binding the property of one object in a Flex application to the property of another object in Flex.

Flex's has ability to communicate with a Java EE back-end using HTTP or SOAP-based Web services

Blaze DS, a separate, open source product from Adobe, gives you even greater flexibility for communicating between a Flex front-end and a Java EE back-end.

Flex also provides messaging and polling and this feature can be useful in case of applications requiring server push.

Because of the OO design, the screens and controls are also regarded as objects.

8

Where does it stand

Flex is not based on the same old javascript, which lacks the maturity of actionscript

Extendibility of components can be nightmare if you are using GWT or JSF etc.

Like other frameworks (GWT) flex programmer need not know java well

GWT does not support declarative programming JSF is declarative, but customizing the components is

difficult and need to write lot of code to do so GWT and JSF are both browser dependent

9

Flex Concepts

Flex Bindings

10

Flex Concepts

Blaze Architecture

11

Flex Concepts

State full Client With an RIA, state can and should be maintained in the client,

which is now a state full client, as opposed to the stateless thin client that HTML technologies offer.

Flex can offer access to the HTTP session and allow the Flex client to treat the HTTP session as “just another object on the server.”

With an RIA, we are finally relieved from the page-based development.

12

Flex Concepts

Context Objects The context objects or DTOs are no longer required as the

domain or business objects themselves are transferred over the wire without user required to know about the HTTP part.

With Flex remoting, even though the underlying transport is still HTTP, the programmer is completely relieved from the details of data transfer from GUI to the business layer. In fact, even the conversion of java objects to actionscipt objects is quite transparent and a powerful feature of flex design.

13

Flex Concepts

AMF versus SOAP When the flex invokes the method on a remote object, the

parameters passed are of actionscript type, but would become equivalent java types.

However, there is a performance penalty to be paid when objects are serialized and desterilised into an XML structure because XML is a text-based format.

By default, Flex uses the AMF protocol behind the scenes for all Java method invocations and data transfers using the <mx:RemoteObject> tag. It is recommended to change these to SOAP, if and only if the business insists on standards-based communication.

14

Flex Drawbacks

Being a new technology flex does have some learning curve involved in terms of action script and MXML syntax.

Asynchronous programming model is one more new concept that should be kept in mind while coding using flex. This involves the request, response handler concept, and needs a very meticulous design to avoid messing up of requests and responses.

Flex builder IDE is currently licensed and that can be one of the hitches, as it can definitely add up to the development cost.

15

Cairngorm Architectural Overview

16

Cairngorm Architectural Overview

View – The mxml document and its corresponding components are the basis of the view.

Model Locator – It acts as a centralized repository for all data needed in the application.

Value Object – A value object is a class that only has properties to store values.

Event – In Cairngorm, everything should be mapped to an event. Whenever the user interacts with the view or an action occurs an event must be dispatched.

17

Cairngorm Architectural Overview

Command – Commands actually do the majority of an applications work. They receive the event and its data, execute the logic and can change the state of the model and view.

Front Controller – It extends the Cairngorm FrontController class and maps the dispatched events to its corresponding commands.

Service Locator – Implemented as a singleton, it contains references to all services an application will use.

Business Delegate – Business Delegates form an abstraction layer between the server-side services and the main frontend application.

Responder - A responder receives the result of a service call and implements frontend-logic like a command.

Service – The Service is formed by an application tier, build with some server-side technology like J2EE or PHP. It accepts the service requests from the RIA and responds back with data.

18

Custom framework

19

Custom framework

ServiceContoller: Service controller is more like our struts controller, which picks up service definitions from the ServiceControllerAppDef.xml. The service controller exposes a single method called processRequest to the flex GUI.

ServiceDefintions: These are the XML entries having action as the key and the service definition containing, Service Name, Method Name and the Parameters.

ObjectSpace: This contains a map of all the parameters to be passed to the service call and the action name. Since the objects are designed in a generic way using the concept of wrapper, the type of objects contained inside the Object Space is limited to 4 to 5 objects.

CustomScreen: This is a GUI component and exposes all the generic functionality related handling of custom event, calling service, handling the results etc. All the screens are required to extent this component and implement only those methods, which require screen specific behavior.

20

Custom framework

21

Custom framework

The custom flex events are captured by the CustomScreen object (Parent to all the screens). CustomScreen acting as a FrontController here would create the ObjectSpace by retrieving information from the event and invoke the service.

Any service call will invoke processRequest method on the ServiceContoller. The service controller retrieves the action name and the parameters from the ObjectSpace and the service definitions from the ServiceControllerAppDef.xml.

22

Custom framework

Advantages This framework exploits the OO programming model of actionscript. Since

every screen extends CustomScreen only the screen specific behaviour like setting the business object has to be added to the specific screen

The CustomScreen component takes care of all the generic behaviour of the screens calling the remote service for saving or validation and handling the result.

This relieves us from adding all the extra infrastructure classes like commandObjects and businessDeletgates to the flex code as there is single remote object to interact with.

The UI is unaware of the services and their APIs. Loose coupling is achieved by exposing only a single object and passing only the action names and ObjectSpace.

23

Custom framework

Constraints The objects passed between the clients and server should be

limited to few objects. The objects should be generic objects and should encapsulate the screen data and validation data within themselves.

Developed with a particular data structures and architecture in mind and so will need slight tweaking to make sure, it can be extensible for any kind of applications.

Not an industry standard framework and so needs lot of learning before somebody starts using it.

24

Conclusion

Flex provides a complete framework to design your GUI, with separation of concerns, organization of code, maintainability and extendibility, which were the attributes of OO Design. This is free from most of the disadvantages that javascript suffered. Although AJAX and toolkits like GWT are quite popular and cover huge chunk of today’s web applications, the innovation, community support, frameworks like cairngorm and support from spring community will definitely serve for flex to get more popular and become an industry strength GUI technology 

25

References

Flex Cairngorm architecture overview - part 1

http://www.flamelab.de/article/flex-cairngorm-architecture-overview-part-1/

Flex Integration with J2EE:Chapter 20 By Steven Webster and Alistair McLeod

26