Flex2is 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 withDave Gruberof 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
thesebasic 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 istag-based like asp.net with rich set of
controls and functinality butexecuted
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.
August-2006CD gave the following
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.).
have unzipped flex2sdk from the CD to g:flex2.
We find that thefollowing folders are present in g:flex2.
Within the player folder,we have a debug folder
and within debug folder,
we have 3programs.
a) install flashplayer9-AX
b) instal flasplayer9
( 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.exeto c:saflash folder(created by us), for
In the bin folder of flex2, we have the mxmlcprogram. This is the compiler which converts
the *.mxmlfileinto the corresponding swf file ( shockwave).
create another folder as
We are now in g:flex2trials.
Let us create a batch file in this folder
This will enable us tocompile and run any mxml file that we create
for our study. We are now ready to begin.
Let us begin with theexamples that are given in Flex2
<mx:Label text="Hello World!"fontWeight="bold"fontSize="24"/>
We can compile demo1.mxml by:
We get demo1.swf
We can see demo1.swfby:
( see demo1.doc screen shot).
We can also copy demo1.swfto
After starting tomcat5, we can give the URL
in browser as :
We get the expected display.
( see demo1browser.doc screenshot).
Let us see a second example, this time it
is a combo.
<mx:Panel x="10" y="10" width="350"height="200"layout="absolute"
<mx:ComboBox x="20" y="20" id="combo1">
>copy demo2.swf to tomcat
and view at:
( see demo2.doc screenshot)
In the next example, we create a textbox,
textarea and button.
<mx:Button id="button1"label="Copy Text"/>
( see demo3.docscreenshot)
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.
TWO FLASH FILES HERE!
Either to view the swf directly or as
embedded in html, we do not require servlet-compliantwebserver like tomcat. We can use any
webserver. In our case, we are using Apache server, which comes bundled with
We copy twoflashes.htm, demo1.swf and demo2.swf
Start Apache from start menu and view the
We get the two flash files disdplayed.
We can also dynamically create the html
page containing theshockwave files by
using either php or jsp.
print "flex demo";
We can place this file in :
and invoke by:
The page gets displayed.
There is a third possibility(ie) instead of compiling the mxmlfile 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
But, it will be rewarding !
There are 5 sample applications. If
we look into , say, the photoviewer folder, beforecompiling, 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
the five samples provided, three are captivating and educative. They are:
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 isflexstore. 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 openexplorer.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.
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.
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.
& view states.
Let us expand the visual components tree.
get tons of controls there such as
alert,colorpicker,combobox, datagrid ,
horizontal list, HRule
List, Numeric Stepper, Progress bar,
Spacer, TabBar, Tree, VScroll, VSlider.
If we click on colorpicker, we get
colorpicker demo inright-top frame and
the source code in right-bottom frame. ( see
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.
is no toy , dealing with user experience alone. It is a very sophisticated
environment which can connect to EJB andORMat Tomcat server and beyond
in EJB servers.
More on these in the next instalment.