Flex in Liferay Portlets

Introduction to Adobe Flex

Flex is a rich internet application(RIA). RIAs are self-contained applications. In contrast, the "traditional" web applications are HTML-page-based UI. Flex, Flash, rich AJAX applications and Java applets are all self-contained programs that maintain their own states.

Elements of Flex programming

  • MXML
  • ActionScript
  • Events
  • Flex Data Access
  • Destination
  • Channels

MXML

MXML is an XML language that you use to lay out user interface components for Adobe Flex applications. You also use MXML to declaratively define nonvisual aspects of an application, such as access to server-side data sources and data bindings between user interface components and server-side data sources.

ActionScript

ActionScript can be used to extend the functionality of their Adobe Flex applications. ActionScript provides flow control and object manipulation features that are not available in MXML. It is a object oriented scripting language. Any data coming from backend is converted to Action script object by the flex data service.

Events

Events are listened by any container or controller dispatched by another container or control. When flex application dispatches an Event object, that Event object makes a roundtrip journey from the root of the display list to the target node, checking each node for registered listeners. The target node is the node in the display list where the event occurred. For example, if a user clicks a Button control named Child1, Flash Player dispatches an Event object with Child1 defined as the target node.


The flash.events.Event class is an ActionScript class with properties that contain information about the event that occurred. An Event object is an implicitly created object, similar to the request and response objects in a JavaServer Page (JSP) that are implicitly created by the application server. Event object can be passed inside an event listener to access details about the event that was dispatched, or about the component that dispatched the event.

         Flex Data Access

Flex data access components in MXML or ActionScript are used to work with three types of services: HTTP (REST-style) services, web services, and remote object services. You create data access components in MXML or ActionScript. Eg: BlazeDs, FDS2.
BlazeDS is the server-based Java remoting and web messaging technology that enables developers to easily connect to back-end distributed data and push data in real-time to Adobe Flex and Adobe AIR™ applications for more responsive rich Internet application (RIA) experiences.
Destination
The Destination is a source and sink for messages sent through a service destination and     uses an adapter to process messages.

Channels

A Flex component uses a channel to communicate with a Data Services server. A channel set contains channels; its primary function is to provide connectivity between the Flex client and the Data Services server.

Flex Portlets

Flex, Flash, rich AJAX applications and Java applets are all self-contained programs that maintain their own states. In a browser, they are susceptible to page navigation and refreshes. Unfortunately, this is how JSR-168 portals work. A portal page is comprised of portlets, each occupying a section of the screen. When the user clicks on something in a portlet, most likely the whole page is refreshed with the new states of each portlets. This causes every Flash movie on the page to restart. Theoretically, it is possible for a Flex program to save all its states and recover them during each restart; but for rich UI programs, this is never practical. However there are situations where Flex and the like are desirable. For instance, if your portal site may host Flash games, more and more reporting tools are using Flex charting and grids, you may have sophisticated operations implemented by Flex.

Flex Applications in Portlets 

Flex internet applications are Flash movies(.swf files). Flex internet applications are usually used in wrapper HTML files. It is possible to turn the main wrapper HTML file into the source of a portlet, but resizing could be an issue. The best option is probably to use IFrame portlet to house Flex application. Within such a page or portlet, the content is displayed in an IFrame control. The Flash player can be sized to 100% of the wrapper HTML within the IFrame control, which can be arbitrarily positioned and sized by the portal. 


Developing a Sample Flex Applications in Liferay

Steps for creating a sample program can be seen here. We can also use Flex AJAX Bridge to embed Flex applications in Liferay portlets. The Ajax Bridge (FABridge) is a small, unobtrusive code library that you can insert into an Flex application, a Flex component, or an empty SWF file to expose it to scripting in the web browser. Check a spimple example of hoe FABridge works with Liferay here.

Comments

Post a Comment

Popular posts from this blog

jQgrid reload with new data

To reload a jQGrid with fresh data you need to set the data parameter on the grid and invoke reload on it. jQuery("#promotionsGrid").setGridParam({ 'data': newData}).trigger("reloadGrid"); Here newData is a JavaScript array with which I need to re-load the grid. The important thing here is that I had to place this statement just before the grid initialization code even though the reload was expected on change event of a text box. Without that there was simply no effect on my grid!
Read more

Introduction to jQgrid

Introduction Why waste time in developing lists /customizing Liferay OOB search container to display data in tabular format. On top of that more often then not we end up coding for sorting of columns, pagination and formatting some data depending on their values. Trirand has come up with a jQuery plugin called jQgrid. jQgrid supports all of such ease. It provides a nice-looking grid with built-in features such as sorting, editing, search, drill-down, tree lists, and more. It is based upon jQuery and integrates well with Liferay.  The grid is dual-licensed under both the GPL and MIT licenses  (just like
Read more

Rich Client based UI technologies- A Comparison of Thick Client UI tools

Rich Client v/s Thin Client Software developers face many difficult decisions when building new applications, not the least of which is graphical user interface. There are various graphical user interface technologies used, but broadly they can be classified as Rich Client User interfaces and the thin client or web based user interfaces. To understand them better let us look at the history of rich and thin clients. While the Rich client GUI applications would support high quality end-user experience with features such a drag-and-drop, perspectives, customization, high speed local processing; it has had a traditional disadvantage of high deployment and upgrade costs. It was becoming highly difficult and costly to deploy and upgrade these applications. Then came the thin clients or the Web based applications. Thin clients solved many of the deployment and upgrade problems, but that was not without a cost, the cost was in terms of functionality and capability. Thin clients, based on...
Read more