4. Page 4
Agenda
AGENDA FOR THE SESSION
This presentation is targeted to J2EE/Portal developers who are not familiar with Flex
o What is Flex ?
o Flex development environment
o Developing “Hello World” Flex application
o How Flex fits into your application
• Communicating with JavaScript from Flex
• HTTPService
• Web Service
• Flex RemoteObject + BlazeDS
o Flex in enterprise application
• Spring Flex Integration
• CairnGorm
o Sample code
Name of Presentation
5. Page 5
What is Flex ?
WHAT IS FLEX ?
Adobe Flex is user interface framework for developing rich internet application(RIA)
o You can use it for developing web application type of UI
• Forms
• Spread sheets
• Tree control
Use MXML, CSS and Action Script to develop application and then compile your code
into .swf file
You can use flex player for executing .swf file
o Same flex player that we use for watching videos
Name of Presentation
6. Page 6
Traditional J2EE Application architecture
J2EE
Browser
App
Http
Client
Application
Server
Web REST
Service Service
Name of Presentation
7. Page 7
Flex application architecture
J2EE
Browser
App
Flex Web
Application Service
Browser
REST
Service
Name of Presentation
8. Page 8
Why Flex ?
WHY FLEX IS GOOD CHOICE FOR DEVELOPING RIA
Advantages
o Flash player is available on 95 % computers
o Support for HTML 5 is still few years away
o Good for building complex RIA
• Compiled code
• Object oriented
Disadvantages
o Not available on every platform Ex. Iphone
o J2EE developers are familiar with HTML, JavaScript, CSS but not MXML, ActionScript
Name of Presentation
10. Page 10
Flex Application Components
FLEX APPLICATION
Flex applications are made up of three components MXML,CSS and ActionScript.
These components perform same function as HTML, CSS and JavaScript in
traditional web application
HTML MXML
CSS CSS
JavaScript ActionScript
Name of Presentation
11. Page 11
MXML
WHAT IS MXML
MXML is XML based markup language that is used for defining user interface in Flex
Application. Macromedia does not give any official meaning for MXML, but some
developers say that it stands for “Magic extendible markup language”
MXML tags are similar to HTML tags
MXML has a richer tag set compared to HTML
o Tags for data grid, tree
o Tags for non-visual components Ex. HTTPService. RemoteObject
You can extend MXML by creating custom components using either MXML or
ActionScript
Name of Presentation
13. Page 13
ActionScript
WHAT IS ACTIONSCRIPT ?
Action Script is object-oriented programming language based on ECMAScript – 4
You can use it for writing
o Event Handlers
o Making remote calls
o Data conversion
o Creating custom UI components
You can write the ActionScript either inline your MXML page using <mx:Script> tag or
your can create .as files
You can import a ActionScript library in .swf format and use its classes from
ActionScript
Name of Presentation
15. Page 15
CSS
WHAT IS CSS ?
You modify the appearance of Flex components through style properties. These
properties can define the size of a font used in a Label control, or the background
color used in the Tree control.
You can declare styles based on Cascading Style Sheet standards
You can define styles inside the mxml document using <mx:Style> element or inside
separate .css file
Flex builder provides very good environment for working with styles
Flex does not support controlling all aspects of component layout with CSS.
Properties such as x, y, width, and height are properties, not styles, of the
UIComponent class, and therefore cannot be set in CSS
Name of Presentation
18. Page 18
Compiling Flex Application
HOW TO COMPILE FLEX Application
You need a Flex compiler to compile your application into .swf file. You can use either
standalone Flex SDK or Flash builder
MXML
CSS Compile .swf
ActionScript
Name of Presentation
22. Page 22
How flex fits in your J2EE web application
4
Name of Presentation
23. Page 23
How to integrate flex in your application
HOW TO INTEGRATE FLEX IN YOUR APPLICATION
You can include the flex application (.swf file) on your web page using <object> tag in
the HTML. Once the flex application is started it can directly start communicating to
different components of your application for getting data, performing actions,..
You can use one of the following options for communicating to remote server from
flex application
o JavaScript
o HTTPService
o WebService
o BlazeDS
• RemoteObject
• Consumer/Producer
Name of Presentation
24. Page 24
JavaScript
ACCESSING FLEX FROM JAVASCRIPT
Use ExternalInterface API inside flex to communicating with HTML wrapper. You can
call a JavaScript method from ActionScript and ActionScript method from JavaScript
Communicate with other HTML components on the HTML page
o Use Dojo publish/ subscribe to modify other widgets on the page
Use this method when you want to take advantage of client side logic implemented in
the JavaScript
o WebSphere Portal’s client side API for manipulating preferences, user profile
Name of Presentation
25. Page 25
Calling JavaScript method from ActionScript
HOW TO CALL JAVASCRIPT METHOD FROM ACTIONSCRIPT
You will have to follow these steps for calling JavaScript method from ActionScript
Add JavaScript function to the HTML page
function javaScriptMethod(){
alert(“called from actionscript”);
}
Use ExternalInterface API for calling JavaScript
if(ExternalInterface.available)
ExternalInterface.call(„javaScriptMethod‟);
Name of Presentation
26. Page 26
Calling ActionScript method from JavaScript
HOW TO CALL JAVASCRIPT METHOD FROM ACTIONSCRIPT
You will have to follow these steps if you want to call ActionScript method from
JavaScript
Define a flex function that can be called from outside
function actionScriptMethod(): void{}
Register this function with ExternalInterface to make it available from outside
ExternalInterface.addCallback(“actionScriptMethod”,”actionScriptMethod”)
Add this code to your JavaScript
function getFlexApp(appName){
if (navigator.appName.indexOf ("Microsoft") !=-1){
return window[appName];
} else{ return document[appName]; }
}
getFlexApp(“<flexobjectid>”).actionScriptMethod();
Name of Presentation
27. Page 27
HTTPService
USING FLEX HTTPSERVICE API
You can use HTTPService API to make a http request and get response
asynchronously (Similar to XHR ). You can use HTTPService method for making
GET and POST call and pass parameters. If you want to make PUT, DELETE call
you can use BlazeDS proxy service.
Use this method if you want to
o Communicate with REST Service
• Internal as well as external such as Youtube or Flickr
o Communicate with Servlet based application
You can use the HTTPService API in two different ways
o Declaratively using MXML
o Programmatically using ActionScript
Name of Presentation
28. Page 28
Declarative HTTPService
HOW TO USE HTTPSERVICE API IN MXML
You can use HTTPService declaratively using HTTPService tag in MXML
<mx:HTTPService id="youTubeService" url="http://gdata.youtube.com/feeds/api/videos"
resultFormat="text" result="onResult(event)" fault="onFault(event)">
<mx:request>
<q>{searchTxt.text}</q>
</mx:request>
</mx:HTTPService>
Name of Presentation
29. Page 29
Programmatic HTTPService
HOW TO USE HTTPSERVICE API IN ACTIONSCRIPT
If you want to support advanced use case then you can create object of
HTTPService inside your ActionScript and use it for making call
service = new HTTPService();
service.url = <someurl>;
service.resultFormat = HTTPService.RESULT_FORMAT_TEXT;
service.method = httpMethod.text;
service.addEventListener("result", httpResult);
service.addEventListener("fault", httpFault);
service.send(parameters);
public function httpResult(event:ResultEvent):void {
var result:Object = event.result;
displayText.text = event.result.toString();
}
Name of Presentation
30. Page 30
HTTPService data exchange formats
WHICH DATA FORMAT TO USE FOR EXCHANGING DATA
The HTTPService API has a resultFormat field that you can set to define how the
response of HTTP request be treated
o Object: It will assume the response is XML, so parse and convert it into ActionScript
objects
o XML: Parse xml into XMLNode object instead of ActionScript object
o Text: It will return the response as text string and you can parse it
o Flashvars: Will take string in name=value pair’s separated by &, parse it into
ActionScript object
Name of Presentation
31. Page 31
JSON for data exchange
HOW YOU CAN USE JSON FORMAT FOR DATA EXCHANGE
JSON is very popular format for exchanging data between server and client side
HTTPService API does not have ability to convert JSON to ActionScript and other
way around
as3corelib is flex library that you can use for converting JSON to ActionScript object
and other way around
Convert JSON to ActionScript object
import com.adobe.serialization.json.JSON;
JSON.decode(<jsonstring>)
Convert ActionScript object into JSON
import com.adobe.serialization.json.JSON;
JSON.encode(<actionscriptobject>)
Name of Presentation
32. Page 32
Flex in WebSphere Portal
HOW TO USE HTTPSERVICE FOR COMMUNICATING WITH PORTAL
The doView() method of your portlet should return HTML with flex on it. Once the flex
application is loaded you have two option,
o You can add a servlet in your portlet application and communicate with it
o You can communicate with portlet, these are the various options that you have for
communicating with portlets
• Action request
• Render request with parameters
• Resource request
• Changing portlet mode, window state
Name of Presentation
33. Page 33
Flex in WebSphere Portal - JavaScript
HOW TO YOU CAN USE JAVASCRIPT FOR SOLVING PROBLEMS
You can use the Flex’s ability to communicate with JavaScript to communicate with
portlet. You will have to use following steps for communicating with portlets
o Generate URL’s in HTML where .swf file is embedded
• Use <portlet:resourceURL> tags
• Use single portlet refresh URL’s for generating either action or render url or mode
change url
o Use ExternalInterface API to read these URLs from ActionScript
o Use HTTPService to make call and get response, the response can have further action,
render URLs
o In WebSphere Portal the action URL’s not reusable, so your action response markup
should have action URL, that you can use next time.
Name of Presentation
34. Page 34
WebService
HOW YOU CAN COMMUNICATE WITH WEBSERVICE FROM FLEX
Flex applications can interact with web services that define their interfaces in a Web
Services Description Language 1.1 (WSDL 1.1) document, which is available as a
URL
You might want to use web services communication option in following situation
o Communicating with existing web service that you built
o Communicating with web service built by some one else
Flex provides infrastructure that you can use for communicating with web service, you
have two options
o ActionScript
o MXML
Name of Presentation
35. Page 35
Declarative WebService
HOW TO USE HTTPSERVICE API IN MXML
You can use WebService declaratively using WebService tag in MXML
<mx:WebService id="userRequest" wsdl="http://localhost:10040/flexapp/returnusers.cfc?wsdl">
<mx:operation name="returnRecords" resultFormat="object" fault=“handleFault(event)"
result="remotingCFCHandler(event)"/>
<mx:operation name="insertRecord" result="insertCFCHandler()" fault="handleFault(event)"/>
</mx:WebService>
Name of Presentation
36. Page 36
Programmatic Web Service
HOW TO USE WEBSERVICE API IN ACTIONSCRIPT
If you want to support advanced use case then you can create object of
WebService inside your ActionScript and use it for making call
public function useWebService(intArg:int, strArg:String):void {
ws = new WebService();
ws.destination = “insertRecord";
ws.echoArgs.addEventListener("result", echoResultHandler);
ws.loadWSDL();
ws.echoArgs(intArg, strArg);
}
Name of Presentation
37. Page 37
BlazeDS
WHAT IS BLAZEDS
BlazeDS is a open source project that provides J2EE based server side infrastructure
for developing Flex application. You can add BlazeDS to any J2EE web application
by adding set of .jar files and a servlet to your web.xml. The BlazeDS functionality
can be divided into following types
o Remoting
o Messaging
o Proxy
Name of Presentation
39. Page 39
BlazeDS Remoting
WHAT IS BLAZEDS Remoting
BlazeDS remoting allows flex application to call methods of java objects directly
It takes care of converting Java Object into Action Script object and other way round
transparently
AMF(Action Message Format) is used as data exchange format between server and
flex
o AMF is proprietary binary format
o AMF provides more efficient data exchange
o The data exchange happens over HTTP connection but in proprietary optimized format
Name of Presentation
40. Page 40
BlazeDS Remoting
SAMPLE OF HOW YOU CAN USE BLAZEDS REMOTING
Server side, add these lines to remoting-config.xml
<destination id="product">
<properties>
<source>com.atech.flex.ProductService</source>
</properties>
</destination>
Client side
<mx:RemoteObject id="srv" destination="product"/>
<mx:Button label="Get Data" click="srv.getProducts()"/>
<mx:DataGrid dataProvider="{srv.getProducts.lastResult} "/>
Name of Presentation
41. Page 41
BlazeDS Remoting in ActionScript
HOW TO USE BLAZEDS REMOTING IN ACTIONSCRIPT
You can also create RemoteObject in the ActionScript and call its methods,
handle its result in ActionScript method
var srv:mx.rpc.remoting.RemoteObject;
srv = new mx.rpc.remoting.RemoteObject();
srv.destination = "product";
helloWorldRO.getProducts.addEventListener("result", resultHandler);
helloWorldRO.addEventListener("fault", faultHandler);
helloWorldRO.getProducts("Hello from portal");
Name of Presentation
42. Page 42
BlazeDS Messaging
WHAT IS BLAZEDS MESSAGNING
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.
o Producer is the component which is used for producing messages to a destination
o 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.
Name of Presentation
43. Page 43
BlazeDS Messaging
SAMPLE OF HOW YOU CAN USE BLAZEDS MESSAGING
Server side, add these lines to messaging-config.xml
<destination id="chat"/>
Client side, in flex application
<mx:Consumer id="consumer" destination="chat"
message="messageHandler(event.message)"/>
<mx:Producer id="producer" destination="chat"/>
Name of Presentation
44. Page 44
BlazeDS Proxy
WHAT IS BLAZEDS PROXY SERVICE
You can use the BlazeDS proxy service for
o Making crossdomain calls, other option is to use crossdomain.xml
o For making REST calls, in that case the actual call is made as HTTP GET and
underlying service takes care of necessary conversion
You can configure BlazeDS proxy service by changing proxy-config.xml
Name of Presentation
46. Page 46
Flex in enterprise
WHAT ADDITIONAL TECHNOLOGIES YOU SHOULD LOOK AT
If you trying to build a reasonably big complex Flex application then you should think
about using some infrastructural components
o Spring Flex Integration
o Cairngorm
o Ant/ maven build script for flex
Name of Presentation
47. Page 47
Spring flex integration
WHAT IS SPRING FLEX INTEGRATION
The Spring Flex Integration project is a spring project that makes it easier to build
Flex UI for Spring application
No need for adding BlazeDS MessageBroker Servlet
All the requests will be routed through Spring’s DispatcherServlet and it will talk to
MessageBroker bean to convert Java objects into AMF and other way round
You can use the Spring Integration framework to integrate flex messaging with JMS
provider
You can use it build Spring application that provide both Ajax and Flex UI
Name of Presentation
48. Page 48
Cairngorm
WHAT IS CAIRNGORM
Cairngorm was one of the primary open source frameworks for application
architecture in Adobe Flex
It provides Model view controller architecture for building Flex applications
You can use it for creating multi-page application
Name of Presentation
49. Thank You
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et
accumsan et iusto odio dignissim qui blandit
praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
THANK YOU FOR WATCHING
CONTACT INFO:
ASCENDANT TECHNOLOGY, LLC
8601 Ranch Road 2222
Building I, Suite 205
Austin, TX 78730
Phone (512) 346-9580
December 19, 2010
