MAX 2009 DEVELOP
http://tv.adobe.com/show/max-2009-develop/

• Practical Actionscript 3.0 For Flash CS3 and CS4
• What’s new in Flash Player
• Things every flash developer should know
• Actionscript 3.0 Tastes Good (And is Good for You Too !)
• The Advantages of Flex
• Killer Text in Flash with The Text Layout Framework
• What’s Coming in Adobe AIR 2

MAX 2009 DESIGN
http://tv.adobe.com/show/max-2009-design/

• Secret Session : Flash Professional
• Multi-Touch and the Flash Platform
• Flash Professional, Flash Catalyst, and Flash Builder : Fact, Features and (Work)Flows

and so much more …

Here is a preview of what we are going to achieve.

1. In flex, create a new Air project named AirRSSReader, leave the name of the main MXML as it is and set its layout to vertical.

2. Open the mxml application file. Set its size to 700×450.
Add an HTTPService component that we will use to load the RSS feed. Give it an id of “RSSFeed” and set its url property to the url of the RSS feed that you want to display.
In our case, we choose the Yahoo Technology feed : http://rss.news.yahoo.com/rss/tech. We found the url at http://news.yahoo.com/rss
Set the showBusyCursor property to true to display a busy cursor while the service is executing.
For the result Event we call a resultHandler function that we will create next.

<mx:HTTPService id="RSSFeed" url="http://rss.news.yahoo.com/rss/tech"
		result="resultHandler(event)"/>

3. In the creationComplete event handler for the WindowedApplication container, invoke the service by calling the send() method.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]"
	width="700" height="450
        creationComplete="RSSFeed.send();" >

4. Open a Script tag to write actionscript code.
In the resultHandler function, we want to retrieve the items from the RSS feed.
To do so, first declare a Bindable ArrayCollection variable that will be used to store the datas.

<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;

			[Bindable]
			private var datas:ArrayCollection;

			private function resultHandler(event:ResultEvent):void{

			}

		]]>
</mx:Script>

You need to have in mind the structure of an rss file to retrieve the items. The stucture of the RSS looks like this :

<?xml version="1.0" encoding="iso-8859-1" ?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:ynews="http://news.yahoo.com/rss/">
<channel>
	<title>Yahoo! News: Technology News</title>
	<copyright>Copyright (c) 2009 Yahoo! Inc. All rights reserved.</copyright>
	<link>http://news.yahoo.com/i/738</link>
	<category>technology</category>
	<description>Technology News</description>
	<language>en-us</language>
	<lastBuildDate>Thu, 16 Jul 2009 14:02:39 GMT</lastBuildDate>

	<ttl>5</ttl>
	<image>
		<title>Yahoo! News</title>
		<width>142</width>
		<height>18</height>
		<link>http://news.yahoo.com/i/738</link>
		<url>http://l.yimg.com/a/i/us/nws/th/main_142b.gif</url>
	</image>

	<item>
		<title>Twitter hacked by old technique &#151; again
		    (AP)
		</title>
 		<link>http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/2009
0716/ap_on_hi_te/us_tec_twitter_hacked</link>
 		<guid isPermaLink="false">ap/20090716/us_tec_twitter_hacked</guid>
		<source>AP</source>
		<category>technology</category>
		<pubDate>Thu, 16 Jul 2009 00:30:01 GMT</pubDate>
		<description>AP - Breaking into someone's e-mail can be child's play for a determined hacker, as Twitter Inc. employees have learned the hard way again.</description>
	</item>
	<item>
		<title>Nokia posts 66 pct fall in Q2 profits, shares drop
		    (AP)
		</title>
		 <link>http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/2009
0716/ap_on_hi_te/eu_finland_earns_nokia</link>
		 <guid isPermaLink="false">ap/20090716/eu_finland_earns_nokia</guid>
		<source>AP</source>
		<category>technology</category>
		<pubDate>Thu, 16 Jul 2009 13:44:38 GMT</pubDate>
		<description>AP - The world's top cell phone maker, Nokia Corp., on Thursday said second-quarter earnings fell 66 percent as the global recession sapped demand. The company scrapped its target to gain market share this year and its stock sagged.</description>
	</item>

  ...

</channel>
</rss>

What interest us are the item element.
Knowing the structure, we can now write the resultHandler function :

private function resultHandler(event:ResultEvent):void{
	datas = event.result.rss.channel.item;
}

5. So far, the RSS datas are stored in the datas variable. To display them, add a Datagrid component and set its id to “news”.
Bind its dataProvider to the datas variables.

<mx:DataGrid id="news" dataProvider="{datas}"
        width="650" height="200">
</mx:DataGrid>

At this point, if you try to run the application you should obtain something like this :

All works fine, except that we don’t want to display all of theses datas in the datagrid.

6. Within the datagrid, to display only the title and the publication date of each item, we add 2 DatagridColumn component inside a tag.
For the first DatagridColumn, set its headerText property to “Title”. Set its dataField to title.
For the second DatagridColumn, set its headerText property to ” Publication Date”. Set its dataField to pubDate.
(Important : the values that we’ve set for the dataField of each DatagridColumn must match with the element name in the RSS structure)

<mx:DataGrid id="news"
		dataProvider="{datas}" width="650" height="200">
		<mx:columns>
			<mx:DataGridColumn dataField="title" headerText="Title" width="400"/>
			<mx:DataGridColumn dataField="pubDate" headerText="Publication Date"/>
		</mx:columns>
</mx:DataGrid>

7. Now if you run the application, you should see this :

8. Next we want to show more stuff when the user clicks on an item of the datagrid.
We will display the description of the article selected in the Datagrid and a Button that create a link to the full article.

9. Beneath the Datagrid component, add a TextArea Component. To display the description, we bind its htmlText property with the description of the selectedItem of the datagrid.

<mx:TextArea htmlText="{news.selectedItem.description}"
		height="121" width="420" />

10. Then add a Button component with a label of “Read Full Story”.
For the click event, we call the navigateToURL function with the link of the selectItem as parameter that we enclose in an URLRequest object.
Also it might have a problem if the user clicks the button but has not yet selected an article within the datagrid. Indeed the news.selectedItem.link parameter would be null and this will cause an error. To avoid that, we set the enabled property to {news.selectedItem!=null}. If news.selectedItem!=null, the button is enabled else it is disabled.

<mx:Button label="Read Full Story"
		click="navigateToURL(new URLRequest(news.selectedItem.link));"
		enabled="{news.selectedItem!=null}"/>

11. Finally, we add a Style tag to add some CSS to make the application more pretty.

12. Here’s the final code , run the application to test it.

<<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]"
	creationComplete="RSSFeed.send();" width="700" height="450" viewSourceURL="srcview/index.html">
		<mx:Style>
		DataGrid {
		   alternatingItemColors: #cccccc, #eff1f2;
		   rollOverColor: #999999;
		   textRollOverColor: #ffffff;
		   selectionColor: #666666;
		   color: #000000;
		   textSelectedColor: #ffffff;
		}

		Button {
		   color: #ffffff;
		   themeColor: #333333;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;

			[Bindable]
			private var datas:ArrayCollection;

			private function resultHandler(event:ResultEvent):void{
				datas = event.result.rss.channel.item;
			}

		]]>
	</mx:Script>

	<mx:HTTPService id="RSSFeed" url="http://rss.news.yahoo.com/rss/tech"
		showBusyCursor="true"
		result="resultHandler(event)"/>
	<mx:DataGrid id="news"
		dataProvider="{datas}" width="650" height="200">
		<mx:columns>
			<mx:DataGridColumn dataField="title" headerText="Title" width="400"/>
			<mx:DataGridColumn dataField="pubDate" headerText="Publication Date"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:TextArea htmlText="{news.selectedItem.description}"
		height="150" width="420"/>
	<mx:Button label="Read Full Story"
		click="navigateToURL(new URLRequest(news.selectedItem.link));"
		enabled="{news.selectedItem!=null}"/>
</mx:WindowedApplication>

1. First, create a new Air project named PdfReader that will also create an mxml file named PdfReader.mxml.
Open it so we can begin to edit our code.

2. Like for the WebBrowser we will use the HTML component.

3. The only thing that we have to do is to check if the user has a correct version of Adobe Reader installed because if the user doesn’t have Acrobat Reader 8.1 or later that will not work.

4. To do so, we have to detect the PDF capability with the static property pdfCapability of the HTML class.
The pdfCapability property can be one of the 5 values :

In our case we want to check the if the value is STATUS_OK

5. So in our code, add an HTML component to the application and create a function detectPDF that if the PDF capability is OK the nit will set the location of the HTML component to the path of the pdf file else it will call the Alert method to display an error message.

6. The whole code is as follow :

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="detectPDF()" width="825" height="625">
    <mx:Script>
        <![CDATA[
        import mx.controls.Alert;

        private function detectPDF():void{
            if(HTML.pdfCapability== HTMLPDFCapability.STATUS_OK)
            {
            	reader.location = "assets/test.pdf";
            }
            else{
            	Alert.show("Can't display PDF content","Problem");
            }
        }
        ]]>
    </mx:Script>

    <mx:HTML id="reader" width="100%" height="100%"/>
</mx:WindowedApplication>

7. Run the application to test it.

The HTML component displays full HTML content within your AIR applications. In this tutorial we are going to build our own web browser with an adress bar and forward and back history controls.

1. To get started, create a new Air project named WebBrowser that will also create an mxml file named WebBrowser.mxml. Open it so we can begin to add our code and set the layout of the WindowedApplication to vertical.

2. Insert the following code between the WindowedApplication tags :

<mx:ApplicationControlBar dock="true" fillAlphas="[1.0, 1.0]"
        fillColors="[#0E0847, #FFFFFF]">
		<mx:Label text="AIR WEB BROWSER" fontWeight="bold"
                        fontSize="12" color="#990000"/>
		<mx:Label text="Enter URL:"/>
		<mx:TextInput id="urlInput"/>
		<mx:Button label="GO"()" />
		<mx:Spacer width="100%"/>
		<mx:Button label="Back" />
		<mx:Button label="Forward"/>
</mx:ApplicationControlBar>
<mx:HTML id="browser" height="100%" width="100%"/>

This is the base of our code. We have just added the controls and the HTML component.

3. Let’s add the functions. To do so, first add a script tag and declare a variable myURL as a String and set it as [Bindable]. Next create a goToURL function that will change the location of the HTML component. The function will check if the ‘http’ is already in the url that the user has typed and if not will add ‘http’ at the beginning.
The code looks like that:

<mx:Script>
	<![CDATA[

          [Bindable]
          private var myURL:String = "http://";

	  private function goToUrl():void{
		myURL = urlInput.text;
		if (myURL.substr(0,4) != "http")
       		{
         		myURL = "http://" + myURL;
        	}
		browser.location = myURL;
	 }

         ]]>
	</mx:Script>

4. Now we have to call the functions. Bind the text property of the TextInput to the variable myURL that we have declared before. The goToURL function will be called if the user press enter on the textinput or click on the Go button. Finally the functions for the history controls are very simple , we use the historyBack and historyForward methods of the HTML component.
So we have added to our code the following

<mx:TextInput id="urlInput" enter="goToUrl()" text="{myURL}"/>
<mx:Button label="GO" click="goToUrl()" />
<mx:Button label="Back" click="browser.historyBack()" />
<mx:Button label="Forward" click="browser.historyForward()"/>

5. The final code looks like beneath. Run the application to test it.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

	<mx:Script>
		<![CDATA[

		[Bindable]
		 private var myUrl:String = "http://";

		 private function goToUrl():void{
			myUrl = urlInput.text;
			if (myUrl.substr(0,4) != "http")
       		{
         		myUrl = "http://" + myUrl;
        	}
			browser.location = myUrl;
		}

		]]>
	</mx:Script>

	<mx:ApplicationControlBar dock="true" fillAlphas="[1.0, 1.0]"
                     fillColors="[#0E0847, #FFFFFF]">
		<mx:Label text="AIR WEB BROWSER" fontWeight="bold"
                       fontSize="12" color="#990000"/>
		<mx:Label text="Enter URL:"/>
		<mx:TextInput id="urlInput" enter="goToUrl()" text="{myUrl}"/>
		<mx:Button label="GO" click="goToUrl()" />
		<mx:Spacer width="100%"/>
		<mx:Button label="Back" click="browser.historyBack()" />
		<mx:Button label="Forward" click="browser.historyForward()"/>
	</mx:ApplicationControlBar>

    <mx:HTML id="browser" height="100%" width="100%"/>

</mx:WindowedApplication>