September 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Flexing for a Rich Client in Your Web Apps

  • May 26, 2004
  • By Bradley L. Jones
  • Send Email »
  • More Articles »

What Is Flex?

If you ran the Flex Store application, you notice that it is a relatively simple application, but it does illustrate a lot of the features that can be gained with Flex. But what is Macromedia's Flex?

Flex is not a programming language; rather, it is a server. It does, however, contain support for an application framework. As you can see from Figure 3, the Flex framework is similar to other frameworks. There is an XML declarative language, MXML, that can be used as well as a scripting language. The programming language is ActionScript. Both of these can build off of a Flex class library. This library is broken into containers, controls, data models, and behaviors. Containers and controls are used to design the pages.

Figure 3: The Flex Framework is similar to others.

Flex is actually an application server that takes the MXML and ActionScript and converts it to a SWF (Flash) file that is sent to the client machine. Then the Flex server brokers the data exchange betweenthe client and the underlying business logic on the application server. Because nearly all browsers support Flash, there is wide compatibility for these applications.

Flex will run on top of other applications servers, such as J2EE and .NET. The currently released version of Flex runs on a J2EE server. This means that a server needs only to be able to run a current version of Java to support the Flex server. Flex development can be done within a simple text editor. Additionally, IBM has created a plug-in for WebSphere Studio Application Developer. Flex includes an XML schema and more. This means that IDEs such as Visual Studio, JBuilder, and others will be usable for doing Flex development as well.

Deploying and Running a Flex Application

Once you have the Flex server running, you can simply copy your Flex applications (the MXML and ActionScript files) to a directory set up on your Web Server. With that, your applications are ready to run.

As stated before, Flex applications work very similarly to JSP, ASP, and XSLT applications. The first time a browser calls an MXML file, the Flex server will compile it to a Flash (SWF) file.

This SWF file is then downloaded. Future calls to the MXML file will not require a recompile unless something changes. This means that there is a performance hit the first time an application is used, but not on future calls. Of course, it is possible to force this compile the first time. Other communications with the server from the application will occur using standards such as SOAP. If you haven't already exposed your business logic as SOAP web services, the Flex server can broker connections directly into the server-side objects and handle the communications with the client for you.

A Closer Look at Flex and MXML

The heart of a Flex application is MXML. This markup language contains tags for the key HTML markup features. It also contains a number of additional components and tags that can be used. Some of the components are:

  • Standard HTML tags such as
    • <mx:Button>
    • <CheckBox>
    • <ComboBox>
    • <Form>
    • <RadioButton>
  • Additional GUI Components
    • <mx:Accordion>
    • <DataGrid>
    • <Effect>
    • <SocialSecurityValidator>
    • <WipeUp>
    • <Zoom>

You can manipulate the controls and components using ActionScript. Additionally, you can use ActionScript to include other logic within your Flex applications. As mentioned earlier, ActionScript is a standardized scripting language that isn't too different from other languages. For example, the following is a snippet of ActionScript from the Flex store application shown earlier:

Listing 1: Flex store slider control code snippet.

function slide(event) {    var e = new mx.effects.Resize(productDetail);    if (event.size=="medium") {        e.heightTo=330;        productDetail.ctrl.visible=true;        cartView.ctrl.visible=true;        statusTop.selected="medium";        statusBottom.selected="medium";    } else if (event.size=="small") {        if (event.target==statusTop) {            e.heightTo=32;            productDetail.ctrl.visible=false;            cartView.ctrl.visible=true;            statusTop.selected="small";            statusBottom.selected="large";        } else {            e.heightTo=510;            productDetail.ctrl.visible=true;            cartView.ctrl.visible=false;            statusTop.selected="large";            statusBottom.selected="small";        }    } else {        if (event.target==statusTop) {            e.heightTo=510;            productDetail.ctrl.visible=true;            cartView.ctrl.visible=false;            statusTop.selected="large";            statusBottom.selected="small";        } else {            e.heightTo=32;            productDetail.ctrl.visible=false;            cartView.ctrl.visible=true;            statusTop.selected="small";            statusBottom.selected="large";        }    }    e.duration=1;    e.playEffect();}

Building a Simple Application

When I encounter a new programming paradigm, I create a standard, simple application. This application offers a little more than the average "hello world" application. Simply put, I create a form with a text box, a label, and a button. Clicking the button copies the text from the text box to the label. The MXML markup for this form is presented in Listing 2.

Listing 2: The Hello Flex World! Code.

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">   <mx:Label id="disp" width="200" />   <mx:TextInput id="inputname" width="200" />   <mx:Button label="Do It!" click="disp.text = inputname.text" /></mx:Application>

As you can see by looking at Listing 2, MXML looks like standard XML markup. This listing can be entered into a standard text editor and saved within a directory accessible to your Web server. This is MXML code, so the file should be saved with an MXML extension. A good name for the above program is helloflex.mxml. You can download a copy of that file here.





Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel