Flex Guru

This is an open source 3D album component for Flex which is similar to the Cooliris’s (formerly PicLens) attractive interface.
The component is inspired from the 3D album tutorial of Bartek Drozdz.


The download package includes examples besides the source code for easier developing.

Website: http://www.marcusschiesser.de/?p=67

TITLE : Professional Adobe Flex 2 (Programmer to Programmer) (Paperback)
AUTHOR : by Rich Tretola (Author), Simon Barber (Author), Renaun Erickson (Author)
PUBLISHER : Wrox publisher
ISBN : 0470102675
EDITION : 1st
PUB DATE : May 29, 2007
LANGUAGE : English
FORMAT : CHM
SIZE : 06 x 2.88 MB

Wrox's Professional Flex 2 is one of the first guides to Adobe's
(Macromedia's) new web application development platform. Flex experts
Simon Barber, Rich Tretola and John Bennett share their experience with
Flex 2, and teach readers how to leverage the platform to build rich
internet applications. Professional Flex 2 relies heavy on practical
examples, making this a hands-on guide that will get readers up and
running with Flex 2 quickly. Topics include:

- Building applications with Flex Builder
- Flex programming model
- Using Actionscript 3.0
- Developing applications in MXML
- Creating UIs with Flex controls and containers
- Data access and interconnectivity
- Creating custom flex components
- Charting
- Testing, debugging and deploying Flex applications
- and more. Source code and online support at Wrox.com.

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:

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>  

Adobe Flex Builder Professional 3.0.194161

Adobe® Flex® Builder™ 3 software is a highly productive Eclipse™ based development tool enabling intelligent coding, interactive step-through debugging, and visual design of the user interface layout, appearance, and behavior of rich Internet applications (RIAs). Flex Builder 3 is now available in Standard and Professional editions.


Key features include:-

*Powerful coding tools
*Rich visual layout (Enhanced in Flex Builder 3)
*Interactive data visualization (Enhanced in Flex Builder 3) (Professional edition only)
*Skinning and styling (Enhanced in Flex Builder 3)
*Integration with Adobe Creative Suite 3 (New in Flex Builder 3)
*Code refactoring (New in Flex Builder 3)
*Native support for Adobe AIR (New in Flex Builder 3)
*Powerful testing tools (New in Flex Builder 3) (Professional edition only)
*Advanced data services (New in Flex Builder 3)
*Flex 2 and 3 SDK support (New in Flex Builder 3)
*Improved project workflows (New in Flex Builder 3)
*Web service introspection (New in Flex Builder 3)

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free Flex SDK, developers can use Adobe® Flex® Builder™ 3 software to dramatically accelerate development.