Understanding Flex

Prayank Swaroop

Adobe Flex is a cross-platform development framework for creating rich Internet applications (RIAs). Flex enables you to create expressive, high-performance applications that run identically on all major browsers and operating systems. Flex SDK is an open-sourced technology, it is an ActionScript class library. That class library contains components (containers and controls), manager classes, data-service classes, and classes for all other features. You develop applications by using the MXML and ActionScript languages with the class library.

MXML is an XML language that you use to lay out user-interface components for Flex applications. You also use MXML to declaratively define non-visual aspects of an application, such as access to server-side data sources and data bindings between user-interface components and data sources.

For example, you use the <mx:Button> tag to create an instance of the Button control using the following MXML statement:

<mx:Button id="myButton" label="I'm a button!"/> 

Flex Builder is the IDE which is used to build Flex applications. But you can still build Flex applications without Flex Builder by writing MXML code and compiling it with the mxmlc command-line compiler.

You can download the latest version of Flex Builder – Flex Builder 3 beta from http://labs.adobe.com/technologies/flex/

You set the id property to give the Button instance a unique name that you can use to refer to it later on. The label property sets the text of the label displayed on the Button instance.

To provide data to your application, Adobe Flex includes components designed specifically for interacting with HTTP servers, web services, or remote object services (Java objects). These components are called remote procedure call (RPC) service components.

In this tutorial, you create a simple blog reader that retrieves recent posts and lets users read the first few lines of the posts. You use an RPC service component called HTTPService to retrieve data from an RSS feed, and then you bind the data to a DataGrid and a TextArea control.

Download Flex from labs.adobe.com and start the Flex Builder, the screen should look like this.

Create a new Flex Project. By right click in Projects pane and select, create new flex project

We will give this project the name “FeedReader” , since we will be able to read RSS feeds with this application.

You should click next and decide where you want to store the project files.

You can now click ‘Finish’ , on the next screen to start coding on our Flex project.

You are seeing the source view. Flex Builder has two views: design view: where you can create a Flex application by dragging and dropping UI contols just like in any other IDE. And a source view where you can see the generated code.

Insert and position the blog reader controls

In this section, you create the layout of your blog-reader application.
We need to have a “vertical layout” for this application, so we change the value of the “layout” attribute in the <mx:Application> tag from “absolute” to “vertical”.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

Click on the Design tab to see the design tab. This figure shows how the design view in FlexBuilder looks like.

Look at the Components tab at the bottom left of the screen. Click on the Layout folder to see the various layout components that are available in Flex.

In MXML editor's Design mode, drag a Panel container into the layout from the Layout category of the Components view, and then set the following Panel properties in the Properties view:

  • Title: Feed Reader
  • Width: 100%
  • Height: 100%
  • In the Design mode, add the Datagrid control to the Panel container by it them from the Components view, and set the following properties:

    • Width: 100%
    • Height: 40%

    In the Design mode, add a TextArea control below the Datagrid control in the Panel container by dragging it from the Components view, and set the following properties:

    • Width: 100%
    • Height: 60%

    You can see the code that has been generated by the IDE by clicking on the Source tab.

    Now change the headerText for the datagrid columns to “Title” and “Date”. We will remove the extra 3rd column, since we don’t need it.

    We can also add components to the application by directly writing xml. Here we have now added a horizontal-layout box container which contains a label, a textinput and a button. We intend to write RSS Urls in the textinput and then the data from the URL will be fetched when the user clicks on the “Fetch Feed” button. The fetched data will then be shown in the datagrid and textarea controls.

    <mx:HBox width="100%">
                <mx:Label text="Blog RSS URL"/>                    
                <mx:TextInput width="100%" id="feedUrl"
                <mx:Button label="Fetch Feed" click="{myFeed.url=feedUrl.text;myFeed.send()}"/>

    This is how our application will look like now.

    Add default text to TextInput, this text will be displayed by default in the TextInput.

    <mx:TextInput width="100%" id="feedUrl"

    Now comes the interesting part of fetching the data for our application. To fetch the RSS of the feed, we need to make a GET request which we can do using a HTTPService component in Flex.

    We want that this information be fetched when the user clicks the “Fetch Feed” button. The “myFeed.send()”, command will perform a GET request for the resource specified by the URL of the HTTPService – which in our case is the RSS which we want to get.

    <mx:Button label="Fetch Feed" click="{myFeed.send()}"/>

    The general structure of the RSS XML is as follows:

    other child nodes of <channel>
    other child nodes of <item>

    Some nodes have child nodes containing data, including the "item" child node of the channel node. The lastResult object of the HTTPService component (feedRequest.lastResult) reflects this structure:

    We can now set the dataprovider for our DataGrid to this collection of <item> child nodes of the RSS XML, by this simple code:

    <mx:DataGrid width="100%" height="40%" dataProvider="{myFeed.lastResult.rss.channel.item}"

    The Flex datagrid is intelligent enough to understand the XML structure of the data passed to it. So we can directly set the datafield of the datagrid columns to the <title> and <pubDate> child nodes of the <item> node, by simply setting dataField attributes of the respective columns, as follows:

    <mx:DataGridColumn headerText="Title" dataField="title"/>
    <mx:DataGridColumn headerText="Date" dataField="pubDate"/>

    We can now run our application to check if our application is working right now, with the functionality that we have added.

    We should see the following output in the browser. When you click the Fetch Feed button, the datagrid will get populated with  the items in the RSS feed which we have specified in the code:

    When the user selects a post in the DataGrid control, you want the application to display the first few lines of the post in the TextArea control. In the item node of the XML feed, this information is contained in a field called description.

    1. In Source mode, specify the id attribute for the datagrid to “entries”. This will allow us to access the datagrid as an object anywhere in the application.

    <mx:DataGrid width="100%" height="40%"  id="entries"

    2. Enter the following htmlText property (in bold) in the <mx:TextArea> tag:

    <mx:TextArea width="100%" height="60%" htmlText="{entries.selectedItem.description}"/>

    For each selected item in the DataGrid component (named entries), the value of the description field is used for the value of the htmlText property. The htmlText property lets you display HTML formatted text.

    We have one last thing left to do, which is right now our feedUrl is not being picked up from the TextInput, so we need to set the url for out HTTPService to the text of the TextInput, when the button is clicked.

    <mx:Button label="Fetch Feed" click="{myFeed.url=feedUrl.text;myFeed.send()}"/>

    Save the file, wait until Flex Builder finishes compiling the application, and click the Run button in the toolbar.
    A browser opens and runs the application. Click items in the DataGrid control. The first few lines of each post should appear in the TextArea control.

    The final application should look like this: