In this article we will build a RSS Reader using Xml Data Service in Flash Builder for an iPhone 4 Application (you can change which mobile OS is to be used from the project's properties). To develop this application you should follow the following steps.
Step 1 : First of all create a new Flash mobile application which supports iPhone 4.
Step 2 : Create Tabbed Application add one Tab.
Step 4 : Add RichEditableText and List controls from the toolbox.
Since RichEditableText wont be seen on Toolbox add it by using code in mxml:
<s:RichEditableText editable="false" id="ret" x="0" y="186" width="321" height="175" clipAndEnableScrolling="true" fontFamily="Georgia" fontSize="8">
The application will look like.
Now we need to connect to an Xml file of our blog. Follow the steps:
First click on Data->Connect to Xml.
Select Xml Service Type.
Then choose URL section and give your blog's xml location.
Here as an URL I gave my blog's feedburner link. Because I used Blogengine and it didn't accept my syndication file, I had to burn my blog on Google's FeedBurner which was a life-saver in this situation :)
Later click on "invoke" button to get nodes from your xml file.
Click Finish!
Now click->Window->Data/Services to Bind Data to our List control.
Just Drag getData operation over List and then drop it!
A new Dialog Window will appear asking you to choose on details.
Our service is called iersoycom as you can remember. The Label field contains the texts that will be displayed in the List control. Because we want to view the Titles of the Blog here.Click Ok to finish.
Now automatically some code has been added to our project. Update the "list_creationCompleteHandler" function just like that:
protected function list_creationCompleteHandler(event:FlexEvent):void
{
getDataResult.token = iersoycom.getData("title");
}
Now let's run the project to see if we get RSS titles.
Ok we got them.
The next that we will be doing is adding another operation to view the Content. Add a Service again (as we did above).
Select the Node description and check "is Array?"; rename the service name to "descs" which we will be using here. Again open up the Data/Services window and drag the last created operation on the RichEditableText.Some codes will be again automatically added.Update your service.
getDataResult2.token = descs.getData("description");
Now it's time to add a function to reverse List items. I will tell you later why I did this. Before adding the function add these namespaces.
import mx.events.FlexEvent;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
import flashx.textLayout.conversion.*;
import flashx.textLayout.formats.*
import flashx.textLayout.elements.*
Update list_creationCompleteHandler function.
protected function list_creationCompleteHandler(event:FlexEvent):void
{
getDataResult.token = iersoycom.getData("title");
getDataResult2.token = descs.getData("description");
}
Add a new function that reverses index of list.
private function Changeit(event:IndexChangeEvent):void
{
var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
var selItems:Vector.<Object> = event.currentTarget.selectedItems;
var numItems:Number = selIndices.length;
getDataResult2.token = descs.getData("description");
var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
ret.textFlow=importer.importToFlow(getDataResult2.lastResult[list.selectedIndex]);
}
The first three codeline reverses index numbers. The latest codes are for importing the content from the blog. Normally if you use TextFlow on his own, it will suspect it's a plain content receiving the feed. So we need to add "Html Format converter" to view html markup tags. According to the selectedindex we will bind content information of the feed. Why do we do this? Because when it adds new items in the list the first index is 11 (that's my blog post count). So to apply the the selectedindex method we need to first reverse the list control.
Your mxml file should look like this; check it before running RSSReader.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:iersoycom="services.iersoycom.*"
xmlns:descs="services.descs.*"
title="RSS">
<fx:Declarations>
<s:CallResponder id="getDataResult"/>
<iersoycom:Iersoycom id="iersoycom"/>
<s:CallResponder id="getDataResult2"/>
<descs:Descs id="descs"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
import flashx.textLayout.conversion.*
import flashx.textLayout.formats.
import flashx.textLayout.elements.*
private function Changeit(event:IndexChangeEvent):void
{
var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
var selItems:Vector.<Object> = event.currentTarget.selectedItems;
var numItems:Number = selIndices.length;
getDataResult2.token = descs.getData("description");
var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
ret.textFlow=importer.importToFlow(getDataResult2.lastResult[list.selectedIndex]);
}
protected function list_creationCompleteHandler(event:FlexEvent):void
{
getDataResult.token = iersoycom.getData("title");
getDataResult2.token = descs.getData("description");
}
]]>
</fx:Script>
<s:List change="Changeit(event);" id="list" x="0" y="0" width="320" height="155" borderColor="#FF0000" borderVisible="true"
creationComplete="list_creationCompleteHandler(event)" fontFamily="Georgia" fontSize="8"
labelField="title">
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:List>
<s:RichEditableText id="ret" x="0" y="163" width="321" height="198" clipAndEnableScrolling="true"
editable="false"
fontFamily="Georgia" fontSize="8"/>
</s:View>
As said above if you're interested in creating your own iPhone Applications you will just love it!
In Flash Builder while creating new project type,it gives us option how the application will look like.
It can be whether empty(you can fill it on your own),View-Based & Tabbed Applications.
You can also Add Tabs automatically here to get started immediately(Home-Products-About-Contact)
In general View-Based and Tabbed Applications are the same.Except visual difference,in View-Based Applications you write your own code for transitions as we did in our previous article Transitions in Flash Builder(iPhone) Applications. But in Tabbed Applications every Tab is view-based so you'll only need to Edit these views.
Its so easy edit these Views.Just grab some Controls from ToolBox and drop it on the view:
If you havent configured already,Flash Builder runs its own Configurator on which Mobile OS your application will work at(There can be iOS-iPhone,iPad,Android and BlackBerry)
You can emulate it on a emulator or real device.its your choice! But after development ended use it on a real device for testing purposes on production.
Tabbed-Applications use TabbedViewNavigator control and Flash Builder enables Nested Tabs in our applications.I will write another article explaining this control further.After adding additional Tabs.Flash Builder adds new Views automatically.So it will be quite easy for your developments.See the image below for example:
Hope that Tabbed Applications will be much useful for you.
Sorry i was fulfilling my army service a couple of months,so couldnt write a single post!
Last night i was doing some app at Flash Builder 4.6 .And stuck in a point about transitions in an iOS application.
Instead i could have used Add-Delete View plan, i tried another:
navigator.pushView(YourViewNameWithoutExtension);
We have 2 mxml page in our app.
iMediaHomeView and Facebook for example.
FaceBook.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
actionBarVisible="true" color="#FF0000" overlayControls="false" tabBarVisible="true"
title="Facebook">
<fx:Script>
<![CDATA[
function GetBack()
{
navigator.pushView(iMediaHomeView);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button x="25" y="734" label="All Sites" color="#000000"/>
<s:Button x="515" y="735" label="Exit" color="#030303"/>
<s:Button x="289" y="734" label="Back" color="#000000" click="GetBack();"/>
</s:View>
iMediaHomeView.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
actionBarVisible="true" color="#FF0000" overlayControls="false" tabBarVisible="true"
title="iMedia">
<fx:Script>
<![CDATA[
function Show_Facebook()
{
navigator.pushView(Facebook);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Image x="177" y="24" width="128" height="128" scaleMode="stretch" smooth="true"
smoothingQuality="high" source="assets/facebook.png" click="Show_Facebook_();"/>
<s:Button x="515" y="735" label="Exit" color="#030303"/>
</s:View>
Let me show you the output images:
That way i found a way to wander between views.
Hope its useful for you,too.