flex in portal final

Welcome

Flex in Portal

Presentation By:Sunil Patil

Our sponsors:

Name of Presentation

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

http://wpcertification.blogspot.com/2010/08/flex-samples-applications.html


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

BrowserJ2EE

App

REST

Service

Http

Client

Application

ServerWeb

Service


Flex application architecture

BrowserJ2EE

App

REST

Service

Web

Service

Flex

Application

Browser


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

ActionScript

MXML

CSS

HTML

CSS

JavaScript


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

ActionScript

MXML

CSS .swfCompile


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

http://github.com/mikechambers/as3corelib


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

http://opensource.adobe.com/wiki/display/blazeds/BlazeDS/


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

http://www.springsource.org/spring-flex


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

http://en.wikipedia.org/wiki/Open_source

http://en.wikipedia.org/wiki/Adobe_Flex

THANK YOU FOR WATCHING

CONTACT INFO:

ASCENDANT TECHNOLOGY, LLC

8601 Ranch Road 2222

Building I, Suite 205

Austin, TX 78730

Phone (512) 346-9580

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.

April 11, 2023

flex in portal final

Technology