Flex In Portal Final

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 What is Flex ? Flex development environment Developing “Hello World” Flex application How Flex fits into your application Communicating with JavaScript from Flex HTTPService Web Service Flex RemoteObject + BlazeDS Flex in enterprise application Spring Flex Integration CairnGorm Sample code

What is Flex ? WHAT IS FLEX ? Adobe Flex is user interface framework for developing rich internet application(RIA) 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 Same flex player that we use for watching videos

Traditional J2EE Application architecture Browser J2EE App REST Service Http Client Application Server Web Service

Flex application architecture Browser J2EE App REST Service Web Service Flex Application Browser

Why Flex ? WHY FLEX IS GOOD CHOICE FOR DEVELOPING RIA Advantages Flash player is available on 95 % computers Support for HTML 5 is still few years away Good for building complex RIA Compiled code Object oriented Disadvantages Not available on every platform Ex. Iphone 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 Tags for data grid, tree Tags for non-visual components Ex. HTTPService. RemoteObject You can extend MXML by creating custom components using either MXML or ActionScript

ActionScript WHAT IS ACTIONSCRIPT ? Action Script is object-oriented programming language based on ECMAScript – 4 You can use it for writing Event Handlers Making remote calls Data conversion 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

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

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 .swf Compile

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 JavaScript HTTPService WebService 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 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 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 Communicate with REST Service Internal as well as external such as Youtube or Flickr Communicate with Servlet based application You can use the HTTPService API in two different ways Declaratively using MXML 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 Object : It will assume the response is XML, so parse and convert it into ActionScript objects XML : Parse xml into XMLNode object instead of ActionScript object Text : It will return the response as text string and you can parse it 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, You can add a servlet in your portlet application and communicate with it 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 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 Use ExternalInterface API to read these URLs from ActionScript Use HTTPService to make call and get response, the response can have further action, render URLs 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 Communicating with existing web service that you built 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 ActionScript 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 Remoting Messaging Proxy

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 AMF is proprietary binary format AMF provides more efficient data exchange 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. Producer is the component which is used for producing messages to a destination 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 Making crossdomain calls, other option is to use crossdomain.xml 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 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 Spring Flex Integration Cairngorm 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 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. December 19, 2010

Flex In Portal Final

Recommended

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Flex In Portal Final (20)

Recently uploaded (20)

Flex In Portal Final

Editor's Notes