Your SlideShare is downloading. ×
Flex in portal
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Flex in portal


Published on

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Welcome
  • 2. Flex in PortalPresentation By:Sunil Patil
  • 3. Our sponsors:
  • 4. Page 4Agenda 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 5What 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 6Traditional J2EE Application architecture J2EE Browser App Http Client Application Server Web REST Service Service Name of Presentation
  • 7. Page 7Flex application architecture J2EE Browser App Flex Web Application Service Browser REST Service Name of Presentation
  • 8. Page 8Why 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
  • 9. Page 9Developing “Hello World” flex application 1 Name of Presentation
  • 10. Page 10Flex 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 11MXML 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
  • 12. Page 12Hello MXML Name of Presentation
  • 13. Page 13ActionScript 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
  • 14. Page 14Hello ActionScript Name of Presentation
  • 15. Page 15CSS 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
  • 16. Page 16Hello CSS Name of Presentation
  • 17. Page 17Flex Development environment 3 Name of Presentation
  • 18. Page 18Compiling 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
  • 19. Page 19Adobe Flash builder 4 Name of Presentation
  • 20. Page 20Flex Player Debug Version Name of Presentation
  • 21. Page 21FlashBug Name of Presentation
  • 22. Page 22How flex fits in your J2EE web application 4 Name of Presentation
  • 23. Page 23How 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 24JavaScript 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 25Calling 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)„javaScriptMethod‟); Name of Presentation
  • 26. Page 26Calling 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 27HTTPService 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 28Declarative HTTPService HOW TO USE HTTPSERVICE API IN MXML You can use HTTPService declaratively using HTTPService tag in MXML <mx:HTTPService id="youTubeService" url="" resultFormat="text" result="onResult(event)" fault="onFault(event)"> <mx:request> <q>{searchTxt.text}</q> </mx:request> </mx:HTTPService> Name of Presentation
  • 29. Page 29Programmatic 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 30HTTPService 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 31JSON 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 32Flex 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 33Flex 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 34WebService 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 35Declarative 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 36Programmatic 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 37BlazeDS 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
  • 38. Page 38Blaze DS Architecture Name of Presentation
  • 39. Page 39BlazeDS 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 40BlazeDS 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 41BlazeDS 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 42BlazeDS 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 43BlazeDS 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 44BlazeDS 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
  • 45. Page 45Flex in enterprise 5 Name of Presentation
  • 46. Page 46Flex 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 47Spring 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 48Cairngorm 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 YouDuis autem vel eum iriure dolor in hendrerit invulputate velit esse molestie consequat, vel illumdolore eu feugiat nulla facilisis at vero eros etaccumsan et iusto odio dignissim qui blanditpraesent luptatum zzril delenit augue duis dolore tefeugait 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