Getting Started with Flex 2.0

SHARE & COMMENT :

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).

also read:

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 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-2006CD gave the following software.

  1.  Flex2-SDK
  2.  Flex2-Builder
  3. 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 thefollowing folders are present in g:flex2.

  1. bin
  2. frameworks
  3. samples
  4. lib
  5. resources
  6. player

Within the player folder,we have a debug folder and within debug folder, we have 3programs.

  • install flashplayer9-AX( ACTIVE-x for Windows)
  • instal flasplayer9
  • 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.exeto c:saflash folder(created by us), for convenience.

In the bin folder of flex2, we have the mxmlcprogram. This is the compiler which converts the *.mxmlfileinto 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:winntsystem32;

d:jdk1.6bin;

g:flex2bin;

c:saflash;

>setpath

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 documentation.

demo1.mxml

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

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:tomcat5webappsrootflex2demos

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:Applicationxmlns: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'>

Satisfied

Neutral

Dissatisfied

<mx:Button x='200'y='20'label='Send'/>

As before,

>mxmlc demo2.mxml

>saflashdemo2.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

<mx:Application xmlns:mx=

'http://www.adobe.com/2006/mxml'>

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

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

<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.

// twoflashes.htm

TWO FLASH FILES HERE!

<<b>embed</b>src='<b>demo1.swf</b>'>

<embedsrc='<b>demo2.swf</b>'>

</html

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 PHP-triad.

We copy twoflashes.htm, demo1.swf and demo2.swf to : c:apachehtdocs 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 theshockwave files by using either php or jsp.

//showflash.php

<?php

print 'flex demo';

print '<embedsrc='demo1.swf'>'

?>

We can place this file in :

c:apachehtdocsphpdemos

and invoke by:

'http://localhost/phpdemos/

showflash.php'

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 30 minutes!).

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 pretty fast.

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

  1. photoviewer
  2. flexstore
  3. 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 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.

  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.

  1. Visual components
  2. Print Controls
  3. Validators& formatters
  4. 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, HRuleHSlider,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 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 andORMat Tomcat server and beyond
in EJB servers.

More on these in the next installment.

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*

Close
Please support the site
By clicking any of these buttons you help our site to get better