FLEX-2

FLEX-2....A PRIMER

R.S.RAMASWAMY

(rs.ramaswamy@gmail.com)

------------------------------------

Flex2 is the latest RIA technolgy based on MXML and Flash.Originally from Macromedia, this software is now being provided by Adobe, as Adobe has recently acquired Macromedia. The Flex2 software was given in DeveloperIQ CD in August-2006. That edition carried a very interesting and informative interview with Dave Gruber of Adobe by the editor Mr.Ramdas. Flex2 is being positioned and promoted as a better technology than Ajax. ( this is the impression that we gain, from their advertisements in JavaLobby 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 difiicult 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 adavantage 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) instal flasplayer9

c) SA-FlashPlayer

( stand-alone flash player)

If we double-click on 'instal 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

( see demo1.doc screen shot).

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.

( see demo1browser.doc screenshot).

-----

Let us see a second example, this time it is a combo.

---

// 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"

( see demo2.doc screenshot)

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

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>

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

( see demo3.doc screenshot)

-------------------------------

Rather than viewing the swf file directly, it is better practice to embed the flaash 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>

</body>

</html

-----------------------------------

Either to view the swf directly or as embedded in html, we do not require servlet-compliant webserver like tomcat. We can use any webserver. 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.

(see twoflashes-apache.doc screenshot)

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 laeve 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. ( see colordlg.doc)

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.