Integrating Adobe Flex with IBM WebSphere Portal
Integrating Adobe Flex with IBM Websphere Portal
Prepared by
Shade EL-Hadik
Reviewed by
Chung Kim
Rakesh Behara
Portals, Content and e-Commerce
AIS, US
IBM Global Business Services
Table of Contents
1. Introduction 4
1.1. Rich Internet Application RIAs 4
1.2. Benefits of RIAs 4
1.3. FLEX 4
1.4. License 5
2. Advantage of Using FLEX with IBM WebSphere Portals 6
2.1. Use with webservices 7
2.2. Interportlet communication 7
3. Architecture 8
3.1. Flash Player Security 9
4. Configuration 10
5. Download and Installation 10
6. Sample Hello World Application 11
6.1. Writing Code for Your Project 13
6.2. Creating the Hello World Application 13
7. Action Script 3 and MXML 16
7.1. Registering an event handler in MXML 18
7.2. Creating an inline event handler in the MXML definition 19
7.3. Registering an event listener through ActionScript 19
8. Flex Basic Controls 21
9. Flex Data Grid 23
9.1. Using XML and datagrid: 24
10. Flex Charts 26
10.1. Using the Right Series 26
10.2. Specifying the Right Fields 26
11. Embedding SWF Files in IBM WebSphere Portlet 28
12. External APIs 29
13. Data Access 31
13.1. HTTPService components 31
13.2. WebService components 32
13.3. RemoteObject components 33
14. Putting it together 35
14.1. Running SOA webservcie Flex application within IBM WebSphere Portlet. 35
15. JSON (JavaScript Object Notation) ---optional chapter 52
15.1. Running adobe Flex calling JSON objects within IBM Websphere portlet. 53
16. Appendix 67
Usage Guide: 67
File Attachments: 67
Contributors: 67
Review By: 67
Date Created 67
Date Last Updated 68
Reference 68
1. Introduction
1.1. Rich Internet Application RIAs
Rich Internet applications (RIAs) offer a rich, engaging experience that improves user satisfaction and increases productivity. Using the broad reach of the Internet, RIAs can be deployed across browsers and desktops.
A rich Internet application combines the benefits of using the Web as a low-cost deployment model with a rich user experience that’s at least as good as today’s desktop applications. And, since RIAs don’t require that the entire page be refreshed to update their data, the response time is much faster and the network load much lower.
1.2. Benefits of RIAs
RIAs offer organizations a proven, cost-effective way to deliver modern applications with real business benefits:
· Offer users a richer, more engaging experience.
· Keep pace with users' rising expectations.
· Increase customer loyalty and generate higher profits.
· Leverage existing personnel, processes, and infrastructure.
1.3. FLEX
Flex is a free, open source framework for building highly interactive, expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. It provides a modern, standards-based language and programming model that supports common design patterns. MXML, a declarative XML-based language, is used to describe UI layout and behaviors, and ActionScript™ 3, a powerful object-oriented programming language, is used to create client logic. Flex also includes a rich component library with more than 100 proven, extensible UI components for creating rich Internet applications (RIAs), as well as an interactive Flex application debugger.
Using Flex you can create an ActionScript application for the ubiquitous Flash Player, a high-performance multimedia virtual machine that runs bytecode files in the SWF format. Flex applications run cross-platform in a ubiquitous Flash Player that’s a lightweight virtual machine. Flex includes:
· An XML-based language called MXML that supports the declarative programming of
GUI components targeting designers
· The standard object-oriented programming language, ActionScript 3.0, based on the
latest ECMAScript specification
· Server-side integration via Flex Data Services (FDS) giving client applications
transparent access to the world of J2EE
· Charting components, access to multimedia controls, etc.
· An Eclipse-based full-featured IDE with automated deployment, debugging, and
tracing facilities
· Flex is viewable in 85+% of web browsers, Flex 2 SWF files run in Flash Player 9.
· You can use any HTTP Server and any backend technology (.NET, JAVA, PHP, Ruby,
CF, Python) with Flex via XML, SOAP, Sockets, ZLIB, Etc.
· Flex has a mature and growing component set. There are lots of developers creating
open source components for Flex and the source code for all components is available today in the Flex SDK. See: Flexbox, FlexLib, FlexComponents for details.
· Real-time data push with Binary Sockets using any TCP/IP Socket server.
FTP/NNTP/SVN/POP/XMPP Example: http://webmessenger.yahoo.com
· There are many large companies actively developing RIA's with Flex, from
JPMorgan/Chase to Yahoo to Google to many Web 2.0 start-ups.
· Flex has gone fully open source Mozilla Public License. All compilers and framework
will be available for extension and embedding within the Flex 3 SDK.
1.4. License
Flex offers a way to create RIAs without incurring hefty licensing fees. This is what comes at no cost:
· MXML: An XML-based declarative programming language for creating a GUI
· ActionScript 3.0: An object-oriented language similar to Java
· Flash Player 9: A virtual machine with a tiny footprint that lives inside a Web browser and runs your compiled bytecode (.SWF)
· Command-line compilers and debugger
· Flex Framework: Includes a library of well-designed GUI component: buttons, tab folders,data grids, tree controls, animated effects, and more
· Flex Data Services Express: Template Web application deployed in a J2EE server to communicate with an ActionScript client application run by Flash Player. FDS Express is limited to a single CPU and is not supposed to be used in a high-availability (24x7) configuration
· The following Flex tools require a purchased license:
· Flex Builder – the Eclipse-based IDE
· Charting component
· Flex Data Services Departmental, 24x7, 100 concurrent users
· Flex Data Services Enterprise, 24x7, unlimited users
2. Advantage of Using FLEX with IBM WebSphere Portals
As J2EE technology has evolved, much emphasis has been placed on the
challenges of building enterprise applications and bringing those applications to
the Web. At the core of the challenges currently being faced by Web developers
is the integration of disparate user content into a seamless Web application and
well-designed user interface. Portal technology provides a framework to build
such applications for the Web.
Portals facilitate the aggregation of content in an integrated user interface. However, portlets are typically rendered in HTML and therefore inherit the limitations of HTML for building applications. These limitations include a page refreshes, stateless clients, lack of smart client-side data manipulation, limited number of user interface components, and so forth.
You can use Flex to render the user interface of portlets, overcome the limitations of HTML, and greatly improve the user experience within a portal.
The benefits of using Flex in a portal environment include:
· Improved user experience
o Flex can deliver portlets with a desktop-like user experience
o Flex can use rich user interface components: DataGrid, Tree, TabNavigator, Accordion, Charting components, sliders, etc.
o Flex uses rich user interface metaphors: drag-and-drop, expansion in place, etc.
· No page refreshes
o Refreshing a portal page is disorienting from the user point of view, and is also an expensive operation in terms of resources and bandwidth. Unlike traditional HTML-based portlets, Flex-based portlets can communicate with back-end systems without page refreshes.
· Smart client-side data manipulation
o Once downloaded from the server, data can be manipulated at the client side. For example, a list of items retrieved from the client can be sorted or filtered on the client-side. This leads to a more responsive user interface and reduced network traffic.
o Data can also be pushed from the server to the client using the XMLSocket API or the Flash Communication Server.
o If appropriate in the context of a specific application, data can also be saved at the client side.
· Reduced network traffic
o Because of the ability to communicate with back-end systems without page refreshes, and the ability to manipulate data at the client-side, Flex-based portlets can also dramatically reduce the overall network traffic.
The IBM WebSphere portal container manages the infrastructure to show and provide basic support for portlets, and the actual rendering and UI logic is left to the individual portlet applications. This provides a flexible way to implement the contained portlets. Ideally the container can easily host portlets written to fetch data from J2EE, Web services, or any custom back-end implementation. Moreover, it can readily embed the Flex UI written for an application with minimal change. Ideally a rich portal UI can be delivered without going through complicated standards, such as WSRP, with better results.
2.1. Use with webservices
Flex provides a rich framework to connect to a Web service and get data. When talking to a Web service, a Flex application can directly connect to it without the need for any cross-domain policy file. Ideally, if any portlet is designed to connect to a Web service, it can be readily deployed in the Flex portal container.
2.2. Interportlet communication
Since Flex applications run within web pages, they can easily communicate with other page elements via JavaScript, to perform client-side inter-portlet communication. They can also elect to perform server-side communications by making asynchronous requests to a server endpoint with a minimal amount of logic that passes the message to the portal’s inter-portlet communication SPI. The original portlet spec (JSR 168) was primarily about aggregation, but it was unsuccessful to address interportlet communication, which becomes particularly relevant to rich client applications built with Flex or Ajax. Implementing client-side interportlet communication with Dojo and WebSphere Portal. For more info on this subject please refer to http://www.ibm.com/developerworks/websphere/library/techarticles/0703_wallaker/0703_wallaker.html
Note: one of the common question we regarding the reloading the flex movie is “Is it possible to prevent the flex/flash app from reloading between portal navigations?”
Flex Application (*.swf) refreshing is not specific to portal technology. Anytime a user refresh the page of the browser,
the flex application will be refreshed. What you will need it to store the state of your application (every fields/states) in a shared object. For more info refere to the discussion at
http://www.mail-archive.com//msg57735.html
3. Architecture
Flex might be an ideal solution for Web applications written in Java or any other technology. Flex applications are loosely coupled from the server-side processes; they rely on the server just for data. Flex applications have self-contained UI logic, which is ideal for portlets. Unlike JSP/ASP-type rendering where the UI is closely attached to server-side processing, Flex UI logic does not depend on the server side; it only needs the server-side data to bind Flex controls with actual data. Hence, if the policy exists to fetch data from a server, Flex UI can be connected to any server from any browser-based or stand-alone application and render the same rich UI every time. This basic advantage of Flex can be exploited to come up with a robust Web2.0-compliant portal architecture as shown in the figure below.
In the figure, the container runs in the client as a Flex application with basic support for authentication/persistence, etc., being provided by a server-side container process (may be implemented in J2EE /.NET/Web services). Individual portlets are Flex modules deployed in the server, which are instantiated in the portal container whenever needed. These individual portlets can get their data using SOAP/HTTP from any Web server. Portlets are managed by the portal container and can also be attached to an application running in the same container server or any third-party/Web services server to get the data. Portlets are designed as Flex modules to have minimum downloadable size and to enable runtime hot deployment without any need to stop or recompile the Flex portal container.
3.1. Flash Player Security
Flash Player has an extensive list of features that ensure Flash content is secure, including the following:
· Uses the encryption capabilities of SSL in the browser to encrypt all communications between a Flash application and the server
· Includes an extensive sandbox security system that limits transfer of information that might pose a risk to security or privacy
· Does not allow applications to read data from the local drive, except for SharedObjects that were created by that domain
· Does not allow writing any data to the disk except for data that is encapsulated in SharedObjects
·
· Does not allow web content to read any data from a server that is not from the same domain, unless that server explicitly allows access
· Enables the user to disable the storage of information for any domain
· Does not allow data to be sent from a camera or microphone unless the user gives permission
4. Configuration
Most run-time configuration has to do with configuring access to remote data services, such as web services. For example, during application development, you run your application behind a firewall, where the application has access to all necessary resources and data services. However, when you deploy the application, you must ensure that an executing application can still access the necessary resources when the application runs outside of the firewall. One configuration issue for Flex SDK applications is the placement of a crossdomain.xml file. For security, by default Flash Player does not allow an application to access a remote data service from a domain other than the domain from which the application was served. Therefore, a server that hosts a data service must be in the same domain as the server hosting your application, or the remote server must define a crossdomain.xml file. A crossdomain. xml file is an XML file that provides a way for a server to indicate that its data and documents are available to SWF files served from specific domains, or from all domains. By default, place the crossdomain.xml at the root directory of the server that is serving the data. Flex SDK does not include a server-side proxy for handling data service requests. Therefore, you must ensure that you configure data services for direct access by your application, or make data service requests through your own proxy server.
5. Download and Installation
Flex Builder is the best and easiest-to-use development tool for building, debugging, and profiling Flex applications and components. It offers features for developers and designers:
§ Developer-oriented features: Include a very robust ActionScript, MXML, and CSS code editor; a visual debugger; a visual profiler that allows you to profile performance and memory use; code refactoring so that code name changes can percolate throughout your project and workspace; and many other tool capabilities.
§ Designer-oriented features: Include a Design view that allows you to visually assemble and edit Flex applications and components; and a CSS Design view that lets you visually style Flex applications and components.
Flex Builder is an Eclipse-based IDE (Integrated Development Environment). You may already be familiar with Eclipse if you use the Eclipse IDE to write Java-based applications. Because Flex Builder is built atop Eclipse, you can use all the special plug-ins built for Eclipse in your Flex Builder tool. For example, many source-code management plug-ins allow you to check files in and out of your source-code repository directly from your Eclipse environment. You can easily install these plug-ins on top of your Flex Builder installation because Flex Builder is based on Eclipse.