Flex Up Your Portlets!

As promised I started to do my Flex development, and boy I found it really amazing. Flex based UI is nothing but a SWF file that is run by the Flash VM running as a plugin in your browser, much like the Java Plugin. Personally I prefer Flex over Ajax, having tried both.

If you want to build a rich user interface web application that requires several state changes, spans multiple business processes and requires complex data handling at the back-end and still want to give the users a really rich and consistent experience (no refreshes!) then I think Flex definitely is the better choice.

By the way, Flex provides a platform/browser independent virtual machine in which your web application user interface runs (as long as there is a Flash VM for that browser/platform, and for most OS'es it is there). On the other hand Ajax does depend on the browser, in the sense it relies on the browser to provide the platform to build the applications. And hence it is sensitive to the browsers interpretation of JavaScript code. That makes Ajax based code sensitive to the way the JavaScript code is written and interpreted by the browser.

Another point I noticed in Flex, is that the scripting language used is ActionScript, which happens to be a much more strongly typed language as compared to JavaScript, so I believe this is in favor of Flex as well.

It has the pretty good concept of,

Application = Code + Markup.

Where Markup is provided by the declarative MXML syntax, code is provided by ActionScript. ActionScript is Object Oriented as well, that is, if you are familiar with Java, learning ActionScript is pretty much a breeze.

Flex provides inbuilt support for making calls to the backends using HTTP (GET/POST) as well as native support to make webservices Calls via the <mx:HTTPService> and the <mx:WebService> tags respectively. Using the <mx:WebService> tag to make web services calls was so easy, that it felt like reading WebServices for Dummies!!

I believe it is possible to make calls into EJB's also, but I haven't yet explored that possibility. Still in my learning phase!.

The first application I did was an application that shows the user a drawing board in which the user can draw pictures. To do this it was a breeze in Flex Builder. Opened up the 'Design' view, dropped in a panel, a canvas object and then trapped the mouse clicks in ActionScript, and made sure that lines were drawn between the mousedown's and the mouseup's. Real Simple!

Anyway, being in the portal world, I wanted to make use of the Flex Application Platform in my portal. In other words, I wanted to 'Flex Up my portlet'. This would not only involve building the user interface in Flex, but would also get me to test the webservices support in Flex. Nice!

So now I needed a nice enough usecase. After thinking for a while, I thought that maybe a E-Signature portlet would really be nice. The portlet will present a user with a document (a NDA, EULA etc) that traditionally the end users would have signed/accepted. The portlet would provide a canvas wherein a user can actually sign the document. And then this signature is posted back to the server as a bitmap and saved. Basically, this portlet could leverage my initial work on the simple standalone 'canvas board' flex application. With this idea in mind, was all charged up to flex up my portlet.

 Tools Used


So my E-Signature portlet is done. I put up a small screencast of it for download. If you are interested then you can view it here.

In my next blog, I will post instructions on how to actually integrate Flex applications into your portlets. So keep posted!

 

UPDATE: I didn't get time to post the entry on how to create a portlet out of the Flex application, but I helped my colleague Murali on getting his Flex app as a portlet and he has been prompt enough to post the instructions on his blog here. Thanks Murali.

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

insidemyhead

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today