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 http://in.linkedin.com/in/darshanvartak/

1. MORE FOCUS. MORE VALUE
Technology Conference Mumbai
Jan 2010
Flex for Enterprise Applications
Darshan Vartak, BSC 7

2. 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. 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. 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. 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. 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. 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. 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. 9
Flex Concepts
 Flex Bindings

10. 10
Flex Concepts
 Blaze Architecture

11. 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. 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. 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. 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. 15
Cairngorm Architectural Overview

16. 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. 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. 18
Custom framework

19. 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. 20
Custom framework

21. 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. 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. 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. 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. 25
References
 Flex Cairngorm architecture overview - part 1
http://www.flamelab.de/article/flex-cairngorm-architectu
 Flex Integration with J2EE:Chapter 20
By Steven Webster and Alistair McLeod

26. 26