Simple Flex Tutorial

Maret 17, 2008 at 4:13 pm 1 komentar

I’ve been learning Flex for a presentation at my local CFUG, and I’m actually quite impressed with how much you can do with so little code.

However, most of the Flex tutorials I have found are very long and over simplified, so I’ve created a simple blog reader in 23 lines of MXML code to use as a tutorial. Here’s what our Flex Application will look like:

flex blog reader screen shot

How does the example work?

When you click the Load Blog Entries button my RSS feed entries are loaded into the datagrid. When you click on a row in the datagrid the corresponding entry is loaded into the text area.

Step 1 – XML and Application declaration

Start your XML file with a XML declaration, and an mx:Application tag:

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

Step 2 – Define your HTTPService

Our first step is to define the HTTPService that we will use to connect to my RSS feed. We will give an id of httpRSS so we can refer back to it.

<mx:HTTPService id="httpRSS" url="http://www.petefreitag.com/rss/" resultFormat="object" />

Step 3 – Enclose your controls within a panel

A panel is simply a container to put controls (the DataGrid, TextArea, and Button) into. We are going to set some attributes on the panel as well, it should be pretty easy to figure out what they mean:

<mx:Panel id="reader" title="Pete Freitag's Blog Reader" width="500">

Step 4 – Define your DataGrid

We are using the DataGrid component to display the list of blog entries in my RSS feed, along with their date.

This step is probably the most complicated step because we have to bind our RSS xml data to the datagrid, and define an event handler when the rows are clicked.

In the attributes of the DataGrid we are using dynamic variables or expressions denoted by the curly braces {variable}.

<mx:DataGrid id="entries" width="{reader.width-15}" dataProvider="{httpRSS.result.rss.channel.item}" cellPress="{body.htmlText=httpRSS.result.rss.channel.item[entries.selectedIndex].description}">
<mx:columns>
<mx:Array>
<mx:DataGridColumn columnName="title" headerText="Title" />
<mx:DataGridColumn columnName="pubDate" headerText="Date" />
</mx:Array>
</mx:columns>
</mx:DataGrid>

Ok so there is a lot going on there, first so I’ll break it down a bit:

width

We are setting the width dynamically based on the size of its parent panel reader, specifically we set it to be 15 pixels narrower than its panel.

dataProvider

In the dataProvider attribute we are binding the data for this grid to the result of our HTTPService named httpRSS. More specifically we want to bind each item tag in our XML file to a row in the datagrid. Since the item tags are inside the rss and channel tags we refer to it the array of items as httpRSS.result.rss.channel.item.

cellPress

Next we want to create an event handler that will display the contents of the description tag inside the item that is clicked on. Using the variable entries.selectedIndex we know which item was clicked on, and we can refer to the description (the entry body) of that item as: httpRSS.result.rss.channel.item[entries.selectedIndex].description.

Now we just need to set the value of our TextArea which we will define in the next step to the rss item description, so we simply assign that value to the htmlText property of the TextArea (whose name will be body).

columns

Now we need to define which columns we are to display in the datagrid. The columnName must match the tag name that we want it to correspond to.

Step 5 – Define the TextArea

Use the mx:TextArea tag to define the text area where the entry body will go:

<mx:TextArea id="body" editable="false" width="{reader.width-15}" height="300" />

Step 6 – Create a Button

Our last control to define is a Button which will simply tell the HTTPService to make the request.

<mx:Button label="Load Blog Entries" click="{httpRSS.send()}" />

In the click event handler we call the send() method on our HTTPService object.

Step 7 – Close Panel and Application

Simply close some tags, and your done!

</mx:Panel>
</mx:Application>

One Caveat

Flex 1.5 uses a proxy to invoke HTTPService calls, and other remote service calls, and for security reasons the proxy will block the HTTP call. You add the RSS feed url (or simply http://*) to the proxy whitelist in your flex-config.xml. See this KB article for more info.

Complete MXML source code:

<?xml version="1.0" ?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:HTTPService id="httpRSS" url="http://www.petefreitag.com/rss/" resultFormat="object" />
<mx:Panel id="reader" title="Pete Freitag's Blog Reader" width="500">
<mx:DataGrid id="entries" width="{reader.width-15}" dataProvider="{httpRSS.result.rss.channel.item}" cellPress="{body.htmlText=httpRSS.result.rss.channel.item[entries.selectedIndex].description}">
<mx:columns>
<mx:Array>
<mx:DataGridColumn columnName="title" headerText="Title" />
<mx:DataGridColumn columnName="pubDate" headerText="Date" />
</mx:Array>
</mx:columns>
</mx:DataGrid>
<mx:TextArea id="body" editable="false" width="{reader.width-15}" height="300" />
<mx:Button label="Load Blog Entries" click="{httpRSS.send()}" />
</mx:Panel>
</mx:Application>

Entry filed under: Flex. Tags: , , .

Web design Gratis ( new product ) Developing Flex Components

1 Komentar Add your own

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Kunjungan

  • 380,535 kunjungan
Maret 2008
S S R K J S M
« Feb   Mei »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

test


%d blogger menyukai ini: