Flex in portal

Flex in Portal

Presentation By:
Sunil Patil

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

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


Traditional J2EE Application architecture

J2EE
Browser
App

Http
Client

Application
Server

Web REST
Service Service


Flex application architecture

J2EE
Browser
App

Flex Web
Application Service

Browser

REST
Service


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


Developing “Hello World” flex application

1

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


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


Hello MXML


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


Hello ActionScript


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


Hello CSS


Flex Development environment

3

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


Adobe Flash builder 4


Flex Player Debug Version


FlashBug


How flex fits in your J2EE web application

4

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


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


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‟);


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();


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


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>


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();
}


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


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>)


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


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.


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


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>


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);
}


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


Blaze DS Architecture


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


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} "/>


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");


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.


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"/>


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


Flex in enterprise

5

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


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


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


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

Flex in portal

Recommended

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to Flex in portal (20)

Flex in portal