FLEX-2....A PRIMER

Flex2 is the latest RIA technology based on MXML and Flash. Originally from Macromedia, this software is now being provided by Adobe, as Adobe has recently acquired Macromedia. Flex2 is being positioned and promoted as a better technology than Ajax. ( this is the impression that we gain, from their advertisements in JavaLobby web site). 

The aim of this introductory tutorial is to explore the technology at a very basic level. However, what we see by these basic experiments is that it is just like DotNet Framework & ASP.net , atleast so far as naming of controls etc are concerned and partly like an applet( it is executed in client-side).

ASP.net can be thought of as an applet executed in SERVER-SIDE with the gui being created by xml-based tags. Similarly Flex-2 is definitely an advance and wonderful technology in that it is tag-based like asp.net with rich set of controls and functinality but executed in CLIENT-SIDE! 

Hence, it should not be too difficult to learn and must be learnt, because it is a qualitatively new technology, though it requires flash player in the client's browser. But, we can have a stand-alone application too.

The August-2006 CD gave the following software.
a) Flex2-SDK
b) Flex2-Builder
c) Flex2 -charting

Of these three, Flex2-Builder software is a trial version ( 30 days). But the other two are FREE! ( just like DotNet Framework SDK). Hence, it will be better if we learn Flex2 by using hand-coding without the wizards provided by the Flex2Builder. ( The advantage of writing about command-line methods is that it can be easily shared and printed, within just a few pages!..It is very difficult to write about IDE screen shots.).

We have unzipped flex2sdk from the CD to g:\flex2. 
We find that the following folders are present in g:\flex2.

i) bin
ii) frameworks
iii) samples
iv) lib
v) resources
vi) player 

Within the player folder,we have a debug folder and within debug folder, 
we have 3 programs.
a) install flashplayer9-AX
( ACTIVE-x for Windows)
b) install flashplayer9
c) SA-FlashPlayer
( stand-alone flash player)

If we double-click on 'install FlashPlayer9-AX', it gets active so that we can view flash files in the browser.
The SAFlash is meant for viewing Flash files without using the browser. (similar to appletviewer).We copy SAFlash.exe to c:\saflash folder(created by us), for convenience.

--
In the bin folder of flex2, we have the mxmlc program. This is the compiler which converts the *.mxml file into the corresponding swf file ( shockwave).
=====
We create another folder as 
g:\flex2trials .
We are now in g:\flex2trials.

Let us create a batch file in this folder as setpath.bat

// setpath.bat
set path=d:\winnt\system32;
d:\jdk1.6\bin;
g:\flex2\bin;
c:\saflash;

>setpath

This will enable us to compile and run any mxml file that we create for our study. We are now ready to begin.
---
Let us begin with the examples that are given in Flex2 documentation.
=======================================
// demo1.mxml

<?xml version="1.0"?>
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml">

<mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10">

<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
</mx:Panel>
</mx:Application>
===================================

We can compile demo1.mxml by:
>mxmlc demo1.mxml
We get demo1.swf
----------
We can see demo1.swf by:
>saflash demo1.swf
--

We can also copy demo1.swf to 
c:\tomcat5\webapps\root\flex2demos
-
After starting tomcat5, we can give the URL in browser as :
'http://localhost:8080/flex2demos/demo1.swf';
We get the expected display.
-----

// demo2.mxml

<?xml version="1.0"
encoding="utf-8" ?>
<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Panel x="10" y="10" width="350" height="200" layout="absolute"
title="Rate Customer Service">
<mx:ComboBox x="20" y="20" id="combo1">

<mx:dataProvider>
<mx:Array>
<mx:String>Satisfied</mx:String>
<mx:String>Neutral</mx:String>
<mx:String>Dissatisfied</mx:String>
</mx:Array>
</mx:dataProvider>

</mx:ComboBox>

<mx:Button x="200" y="20" label="Send"/>
</mx:Panel>
</mx:Application>
------------------------------------

As before,
>mxmlc demo2.mxml
>saflash demo2.swf
--
>copy demo2.swf to tomcat
and view at:
http://localhost:8080/flex2demos/demo2.swf"

=======================================


In the next example, we create a textbox, textarea and button.

// demo3.mxml

<?xml version="1.0"?>

<mx:Application xmlns:mx=
"http://www.adobe.com/2006/mxml">
<mx:Panel title="My Application">

<mx:TextInput id="text1" width="150" text=""/>

<mx:TextArea id="area1" text="" width="150"/>

<mx:Button id="button1" label="Copy Text"/>
</mx:Panel>
</mx:Application>
================================

Rather than viewing the swf file directly, it is better practice to embed the Flash file within a html page.

Let us now see such an example.

// twoflashes.htm
<html>
<body>
TWO FLASH FILES HERE!
<embed src="demo1.swf">
<br>
<embed src="demo2.swf">
</body>
</html
-----------------------------------

Either to view the swf directly or as embedded in html, we do not require servlet-compliant web server like tomcat. We can use any web server. In our case, we are using Apache server, which comes bundled with PHP-Triad.
We copy twoflashes.htm, demo1.swf and demo2.swf to :

c:\apache\htdocs\ folder.
Start Apache from start menu and view the file at:
'http://localhost/twoflashes.htm'
We get the two flash files disdplayed.
--
We can also dynamically create the html page containing the shockwave files by using either php or jsp.

//showflash.php
<?php

print "flex demo";
print "<embed src='demo1.swf'>"

?>

We can place this file in:
c:\apache\htdocs\phpdemos
and invoke by:
'http://localhost/phpdemos/
showflash.php'

The page gets displayed. 
======================================
There is a third possibility(ie) instead of compiling the mxml file ourselves,we can leave it to the servlet-compliant webserver like Tomcat5 to do the compiling. This is an advanced feature necessary in complex applications. But, it is found that it takes inordinate time. The better thing is to precompile and then place in the webserver.
-----

Before going further, let us see the samples provided by Adobe to appreciate the features. We find the samples folder in g:\flex2.
If we open that samples folder, we will find build-samples.bat file. Just click on that to compile ALL the mxml files in the samples folder. It will take a very long time! ( about 30 minutes!). 
But, it will be rewarding !
There are 5 sample applications. If we look into , say, the photoviewer folder, before compiling, we will not find any swf file there. But , after building, all the samples folders will have the respective swf files ready.Also an opening wrapper html file.And the files will open pretty fast. 

Of the five samples provided, three are captivating and educative. They are:

i) photoviewer
ii) flexstore
iii) explorer.
--
It is assumed that we have already compiled all the mxml files. If now , we open photoviewer.htm in the photoviewer folder, we are in for a rich experience! There are 20 travel photos shown in a frame with scrollbar.
( see photoviewer.doc)

--
The next sample is flexstore. We can open flexstore.htm and choose from the three menu items provided there. Readers can only be requested to try for themselves as giving all these screen shots is not possible in the limited pages at our disposal.
--

And finally comes the MOST IMPORTANT sample, named 'explorer'.
Just open explorer.htm in that folder
and we get a LOT of very useful gui elements and the like, with source code also provided. Just to list all the components provided there may fill a lot of pages.
Anyway, to get an idea of the riches there, we should note the details.
We have the following categories.

--------------------------------
1) containers
2) controls
3) core
4) effects
5) formatters
6) states
7) validators
8) printing
-------------------------

It will be futile to attempt describing all the demos there. These should be SEEN to be believed. As, the mxml code also is given, it is enough to both educate and enslave us! Readers are requested to explore this without faii.

For example, how do we create and use a ColorDlg ? If we open explorer.htm, we get three frames. In the left frame, we get 4 groups.

a) Visual components
b) Print Controls
c) Validators& formatters
d) Effects & view states.
==

Let us expand the visual components tree. 
My! We get tons of controls there such as 
alert, colorpicker, combobox, datagrid , horizontal list, HRule
HSlider,
List, Numeric Stepper, Progress bar,
Spacer, TabBar, Tree, VScroll, VSlider.

If we click on colorpicker, we get colorpicker demo in right-top frame and the source code in right-bottom frame. 

When we click on the dot in the bottom dot in the square given, the color dlg appears and we can choose the coloor and transfer it.

Flex2 is no toy , dealing with user experience alone. It is a very sophisticated environment which can connect to EJB and ORM at Tomcat server and beyond in EJB servers.

More on these in the next installment.

The author can be reached on rs.ramaswamy@gmail.com