Twitter trends

Last updated: 7 October 2011
Build your first mobile Flex application
Tutorial exercises
Narciso Jaramillo

2 | Build your first mobile Flex application
Table of contents
Introduction ...............................................................................................................3
Overview of the application........................................................................................4
Exercise 1: Creating the project and setting up the Action Bar .....................................5
Exercise 2. Lay out the Trends view...........................................................................10
Exercise 3. Connect the trends view to data ..............................................................12
Exercise 4. Debug the application on the desktop......................................................14
Exercise 5. Add a view to display tweets for a trend ..................................................16
Exercise 6. Set up view navigation.............................................................................18
Exercise 7. Configure the list item renderer ...............................................................20
Exercise 8. Debug the application on a device............................................................23
Exercise 9. Add a view to show information for a selected user .................................25
Exercise 10. Set up data persistence between sessions..............................................30
Exercise 11. Export an application package for release ..............................................32
Extra Credit...............................................................................................................33
Appendix 1. Installing the USB driver on Windows ....................................................34

Build Your First Mobile Flex Application | 3
Introduction
Welcome to the new mobile development features in Adobe Flash Builder 4.5 and
Adobe Flex SDK 4.5! This tutorial is based on a lab originally created for the preview
release at the Adobe MAX 2010 developer conference but has been updated for the
final 4.5 release.
This tutorial requires the final release of Flash Builder 4.5, as well as a set of sample
files packed up as TwitterTrendsAssets.zip. You can download them from the Adobe
Developer Connection at:
http://download.macromedia.com/pub/developer/flex/TwitterTrendsAssets.zip
Within a ZIP file is an FXP file, TwitterTrendsFinal.fxp. This is a Flash Builder project
file that contains the final source for the project. If you run into problems in the
tutorial, you can import this file as a project using File > Import Flash Builder
Project. You can then compare your code to the code in that project to see what
might be wrong.
If you run into problems, please post a question to the Flash Builder forum or the
Flex SDK forum.
Items in boxes are optional information that you can read if you want to
understand more of what you’re doing. It’s not necessary to read this text to
follow the steps.

Overview of the application
In this tutorial, you'll build a simple mobile Twitter browser. The application will
show the list of trending topics on Twitter, allow the user to tap a topic to see a list
of tweets for that topic, and then allow the user to tap on a tweet to see more
information on the user who posted the tweet. The user can use the Back button on
the device to navigate back to previous views, and switch between portrait and
landscape orientations. On iOS and BlackBerry Tablet OS, simply add a Back button
in the Action bar to handle the Back button navigation.
By default, mobile Flex applications are structured as a series of views—individual
screens of UI the user navigates between. Above the views sits the Action Bar, which
typically contains the title of the current view and one or more controls for
navigation, search, or other actions.
In the example above, the first view, the Trends view, consists of a single Flex List
component. In mobile applications, the List component scrolls in response to touch
input. The Action Bar for this view shows the title of the view, as well as a Refresh
button. The other views are structured similarly, though in the third view, the User
Info view, the Action Bar has been customized to show the picture of the selected
user.

Exercise 1: Creating the project and setting up the Action Bar
In this exercise, you'll create a mobile project in Flash Builder, and use Design mode
to set up the global Action Bar for the application.
Create a Flex Mobile project and set up project assets
1. Launch Flash Builder.
2. Choose File > New > Flex Mobile Project.
3. Enter TwitterTrends for the project name and click Next.
4. On the Mobile Settings page, ensure that the following are set (as they are by
default):
a. Apple iOS, BlackBerry Tablet OS, and Google Android are checked
b. View-Based Application is selected
c. Automatically reorient is checked and Fullscreen is unchecked
5. Check Automatically scale application for different screen densities at
the bottom, and leave Application DPI at its default value of 160 dpi. We'll
discuss this option in more detail later on in this section.
6. Click Finish. The first time you create a project, this may take awhile.
7. Unzip the TwitterTrendsAssets.zip file provided with this tutorial.
8. Drag the assets folder into the src folder in the Package Explorer on the left
side of Flash Builder.

Flash Builder generates two MXML components: TwitterTrends.mxml, which is
the main application file, and TwitterTrendsHomeView.mxml, which is the first
view of your application and is based on View.
Note that unlike in desktop Flex, you don't typically put much UI content in
the main application—most of your UI goes into the individual views. The
one exception is the Action Bar, as we'll see next.
Add global content to the Action Bar in the main application file
The Action Bar is a special component in mobile Flex applications. It's part of the
overall application, not part of each individual view. You can add items to it either in
the main application or in an individual view. In this application, you'll add a
Refresh button that's available in all views. In Exercise 9, we'll show you how to
customize the Action Bar in a specific view.
1. In the editor, switch to your main application file, TwitterTrends.mxml.
2. Delete the empty <fx:Declarations>...</fx:Declarations> tag.
3. Add the following code between the <s:ViewNavigatorApplication>
and </s:ViewNavigatorApplication> tags:
<s:actionContent>
<s:Button id="refreshBtn"
icon="@Embed('assets/refresh160.png')"
click="Object(navigator.activeView).refresh()">
</s:Button>
</s:actionContent>
Add back navigation to the Action Bar for iOS and BlackBerry Tablet OS
The Action Bar also supports the common iOS and BlackBerry Tablet OS back
navigation. This can be added by through a combination of CSS and MXML. In
this application, you can optionally add a Back button for iOS or BlackBerry
Tablet OS.
Add the following code between the <s:ViewNavigatorApplication> and
</s:ViewNavigatorApplication> tags:
1. Create a <fx:Style> block and use the @media syntax to apply specific
styling to the button while running on iOS:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

@media(os-platform:"IOS")
{
s|ActionBar
{
defaultButtonAppearance:beveled;
}
.backButton
{
skinClass:ClassReference("spark.skins.mobile.BeveledBackButtonSkin");
}
}
</fx:Style>
Add the Back button between the <s:ViewNavigatorApplication>
tags:
<s:navigationContent>
<s:Button id="backBtn" label="Back" styleName="backButton" />
</s:navigationContent>
2. Hide the Back button when in Android. To add this condition, use the Flash
Builder content assist feature to create a script block. After the opening
<s:View> tag, type the word Script and then Control-Spacebar. A content
assist popup appears, where you can choose to create a Spark Script/CDATA
section:
<fx:Script>
<![CDATA[
]]>
</fx:Script>
3. Within the CDATA structure brackets, add a function to identify the device:
protected function shouldDisplayBackButton():Boolean
{
var notAndroid:Boolean = Capabilities.version.indexOf('AND') != 0;
return notAndroid;
}

4. Bind to this function in the includeInLayout property of the Back button
and the click handler to go back to the previous view:
<s:Button id="backBtn" label="Back" styleName="backButton"
includeInLayout="{ navigator.length > 1 ? shouldDisplayBackButton()
:false}" click="navigator.popView()" />
The Action Bar has three content areas: navigationContent on the left,
titleContent in the middle, and actionContent on the right. By
default, the title area of the Action Bar contains a text component that is
bound to the title of each view, so you do not need to specify it.
Content that you add in the main application shows up in all views by default,
but you can also add content to any of the Action Bar content areas in an
individual view, as we'll see later. Setting one of the content areas in an
individual view overrides the content from the application.
Since we're adding the Refresh button into the global content for the Action
Bar, the action it needs to take depends on whichever view is currently
visible. So the click handler gets the currently active view and calls a
refresh() method on it. You'll implement this method in each of the views
you'll be creating in this tutorial.
Set up a multi-DPI Refresh button icon
In the code above, you set up an icon for the button. However, the icon might not
look good on all devices because of differing pixel densities. To see this, you can look
at the application in Design View:
1. In TwitterTrends.mxml, click the Design button to switch to Design mode:
2. Look at the refresh button icon on the right end of the Action Bar. You'll
notice that it looks pixelated. This is because our application automatically
scales to devices of different screen densities, as explained below. The next
few steps will show you how to fix this.
3. Click on the refresh button to select it.
4. In the Properties view, click on the folder to the right of the Icon field and
choose Multi-Resolution Bitmap.

5. In the dialog, the 160 dpi asset is already filled in. Use the Browse buttons
next to the other two fields to navigate into the src/assets folder and choose
refresh240.png and refresh360.png, respectively.
6. Turn on the Embed bitmaps check box.
7. Click OK. Note that a smoother version of the refresh icon now appears in
Design View.
5. Switch back to Source view. You'll see that the icon is now being set using a
MultiDPIBitmapSource tag.
8. Save the file.
In a desktop Flex application, you would normally just specify a single bitmap
as the "icon" property of the Button component. On mobile devices, however,
you have to take into account the fact that different devices have different
pixel densities.
For example, on a Motorola Droid Pro, the screen has 160 pixels or dots per
inch (DPI), whereas on a Droid 2, the screen is 240 DPI. So, for example, a
button that's 40 × 40 pixels is ¼-inch square on a 160 DPI device—just big
enough to target with a finger—whereas on a 240 DPI device it would only
be 1/6-inch square, which is too small.
When you set up the project in the New Flex Mobile Project wizard, you
checked the box to "Automatically scale the application for different screen
densities". That makes it so that the application automatically scales itself to
maintain the same physical size across multiple DPIs, meaning that in general
you don't have to worry about it.
However, bitmaps that are scaled up become pixelated, so a single bitmap
suitable for 160 DPI won't look good when scaled up on a 240 DPI or 320 DPI
screen. In Design View, the default preview device is a Google Nexus One,
which is at 240 DPI, so the icon scales up, leading to pixelation.
The MultiDPIBitmapSource class, created when you embedded
additional bitmaps, allows you to specify bitmaps for different screen DPIs.
These bitmaps will not be scaled along with the application, so they will
appear at their original full resolution, leading to a crisper visual appearance.
Note that because multi-DPI bitmaps are not scaled with the application, you
need to ensure that they're sized appropriately for each DPI. In this case, the
160 DPI bitmap is 32 × 32, so the 240 DPI bitmap needs to be 48 × 48 and the
320 DPI bitmap needs to be 64 × 64. That makes it so that in each case, the
bitmap occupies the same physical screen size.

Exercise 2. Lay out the Trends view
In this exercise, you'll use Design mode to lay out the contents of the initial view,
TwitterTrendsHomeView.mxml, which shows the list of trending topics from
Twitter. You'll also test your layout in different orientations and screen sizes.
Lay out the view
1. Switch to the view file, TwitterTrendsHomeView.mxml.
2. Click the Design button to switch to Design mode:
3. If the refresh button in your view appears as a broken image icon, click the
green Refresh icon to the right of the Design button.
4. In the Properties panel on the right, set the Title to Twitter Trends.
5. From the Components panel on the left, drag a List control into the main
view area, underneath the Action Bar.
6. Snap the list so it lines up exactly with the left edge of the View and its top is
immediately underneath the Action Bar.
7. Resize the empty List so it fills the whole View to the right and bottom. You
may need to scroll the view to do this.
8. In the Properties panel, scroll down to the Constraints section. Check the
left, right, top and bottom check boxes to pin the List to the edges of the View.
If the values in the boxes aren't 0, change them to 0, as in the screenshot.

Test the view's resizability
1. Double-click the editor tab for TwitterTrendsHomeView.mxml to hide the
rest of the panels in Flash Builder.
2. In the Design view toolbar, click the Landscape orientation button. Verify
that the Action Bar and the List properly resize to the new orientation.
3. From the Device drop-down, choose a device with a different screen size—
for example, the Motorola Droid 2. The view should get larger horizontally
and everything should resize properly.
4. Click the Portrait orientation button and double-click the editor tab again to
restore the panels.
5. Return to the device originally selected in the Device drop-down (probably
Apple iPad).

Exercise 3. Connect the trends view to data
In the TwitterTrendsHomeView mxml file, you'll set up the initial data connection to
view Twitter Trends. In this exercise, you'll fill the List in the trends view with the
list of trending topics from Twitter:
1. Choose Data > Connect to HTTP…
2. Change the existing name "Operation1" to getTrends.
3. Change the URL of the operation to http://api.twitter.com/1/trends.json. In
the Service name field, enter TwitterService and click Finish.
4. In the Data/Services panel at the bottom, bring up the context menu for
getTrends() and choose Configure Return Type…
5. Make sure Auto-detect is selected and click Next.
6. There are no parameters to configure. Click Next again.
7. Enter Trends for the name of the new data type.
8. To avoid confusion, change the type of the trends property from Trends[]
to Trend[] (you don't need to type the brackets). This makes it so each
trend object is called "Trend" rather than "Trends".
9. Click Finish.
10. From the context menu for getTrends(), choose Generate Service Call.
This switches you to Source view and shows that a new getTrends()
function was generated.
In the code, you'll see that two items were added to the <Declarations> tag: a
TwitterService object and a CallResponder. The service object has methods
to initiate network calls to the service. The CallResponder watches the
service calls, and when they complete, sends out events to other components
notifying them of the data returned by the service call.
Call the service when the user navigates to or refreshes the view
Recall that in the main TwitterTrends.mxml application file, the refresh button in
the Action Bar was set to call a refresh() method on each view. You'll implement
this method in TwitterTrendsHomeView.mxml to call the appropriate service call.
You'll also call this method from the view's viewActivate event, which is called
whenever the user navigates forward or back to the view:
1. Inside the <fx:Script> block, add the following method:
public function refresh(): void {
getTrends();
}

2. Add viewActivate="refresh()" to the <s:View> tag at the top of the
file.
Bind the data returned by the service into the list
Now you'll make it so that whenever the service is called, the List shows the new
data returned by the service:
1. Place your cursor between the angle brackets of the opening <s:List> tag.
2. Select Data > Bind to Data.
3. Existing call result should already be selected and the existing
CallResponder, getTrendsResult, should be selected in the drop-down.
4. For Data Provider, select the array of trends (trends[]).
5. For Label field, select name.
6. Click OK.
An <s:AsyncListView> tag is added inside the List tag that fills the list with data
from the service.

Exercise 4. Debug the application on the desktop
The code for the trends view is now complete, so you're ready to run the
application. While ultimately you will want to test on one or more real devices,
during development it's convenient to quickly test the application on your
computer. You'll learn how to run and debug your application on a physical device
in Exercise 8.
Create a launch configuration and start debugging
To specify how Flash Builder should run your application, you need to create a
launch configuration:
1. Select Run > Debug Configurations…
2. Double-click on Mobile Application in the list on the left. This creates a new
configuration.
3. At the top of the dialog, change the Name field to TwitterTrends Desktop.
4. In the Project field, ensure TwitterTrends is selected.
5. In the Target platform field, select Google Android.
6. For Launch method, select On desktop and choose Google Nexus One as
the device to simulate.
7. Click Debug.
8. If you're prompted to save TwitterTrendsHomeView.mxml, click OK.
Your application runs on the desktop in the AIR Debug Launcher (ADL), and
displays the list of Twitter trends.
Set a breakpoint
1. Switch back to Flash Builder.
2. In TwitterTrendsHomeView.mxml, locate the refresh() method.
3. Double-click in the gray gutter to the left of the call to getTrends() in the
refresh() method.
A blue dot appears in the gutter representing your breakpoint.
Test the application
1. Switch back to your application running in ADL.
2. In the Device menu in ADL, choose Rotate Right. The window should switch
to landscape orientation, and the controls should resize to fit the window.

3. Use your mouse to drag and throw the list, simulating touch scrolling.
4. Click the refresh icon in the Action Bar. Flash Builder shows a dialog asking if
you want to switch to the Flash Debug perspective. Check Remember my
decision and click Yes.
5. In the Flash Debug perspective, new panels appear:
The Debug panel shows the current call stack. The top of the stack is the
refresh() method you stopped in. Clicking on other calls in the call stack
navigates to other methods.
The Variables panel shows the values of variables in the current scope as
well as in the current object (this). Click the triangle next to this to see
member variables and their values.
The Breakpoints panel shows the breakpoints you currently have set.
The Expressions panel lets you create specific expressions whose values you
want to monitor whenever you're stopped.
6. In the Debug panel, click the Step into button several times. Flash
Builder will step into the getTrends() method.
7. Click the Resume button and switch back to the ADL window. Your
application continues running.
8. Quit ADL.
9. In the upper-right-hand corner of Flash Builder, click the Flash button to
switch back to the Flash Development perspective. You may need to resize
the tab containing the perspective buttons in order to see it. You can also
choose Window > Open Perspective > Flash:
10. Double-click the breakpoint in the refresh() method to remove it.

Exercise 5. Add a view to display tweets for a trend
Now that the initial view is displaying the list of trends, you want to allow users to
tap on a trend to see the tweets for that trend. To do this, you'll create a new view
and hook it up to a search query for the trend. The process is similar to the one you
followed for the trends view.
Create the TweetsView
1. Select File > New > MXML Component.
2. Set the Package field to views
3. Set the Name field to TweetsView
4. Leave the Layout as None.
5. Ensure that the Based on field is set to spark.components.View
6. Click Finish.
7. Add a List that takes up the whole view. You can do this in Design mode by
following the same steps as in the first part of Exercise 2, or you can simply
type the following code before the </s:View> end tag:
<s:List left="0" top="0" right="0" bottom="0">
</s:List>
Get the data for the TweetsView
This process is similar to how you hooked up the Trends view data above:
1. Switch back to Source mode if you're not already there.
2. Change the title property of the <s:View> tag at the top to "Tweets
for {data}". In the next exercise, we'll see how the trend the user selects
in the trends view is passed in as the data property of the TweetsView.
3. In the Data/Services panel, bring up the context menu for TwitterService
and choose Properties.
4. Click the Add button above the Operations table.
5. Change the existing name "Operation1" to getTweets
6. Change the URL of the operation to http://search.twitter.com/search.json
7. Click the Add button above the Parameters table twice to add two
parameters.
8. Change the parameter names to q and result_type. Make sure to press
the Return key after each name, and ensure the data type for each is set to
"String".
9. Click Finish.

10. In the Data/Services panel, bring up the context menu for getTweets()
and choose Configure Return Type…
12. In the Enter Value column, set the q parameter to Flex and the
result_type parameter to recent.
13. Click Next.
14. Enter Tweets for the name of the new data type.
15. In the results property, change the type name from Results[] to
Tweet[].
16. Click Finish.
17. From the context menu for getTweets(), choose Generate Service Call. A
new getTweets() function is generated.
As in the trends view, you'll do this by implementing the refresh() method:
getTweets(String(data), "recent");
}
file.
In this refresh method, you're passing the data property of the TweetsView
into the Twitter search service. In the next exercise, we'll see how this data
property is passed into the TweetsView from the initial trends view.
Bind the data returned by the service into the list
3. Existing call result should already be selected, and the call responder
getTweetsResult should be selected in the drop-down.
4. For Data Provider, select the results[] array.
5. For Label field, select text.
6. Click OK.
The TweetsView is now set up to retrieve and display data, but the user doesn't
have any way to get to it yet. You'll set up this navigation in the next exercise.

Exercise 6. Set up view navigation
Now that you've created the TweetsView, you need to make it so that when the user
taps on a trend in the initial view, the application navigates to the TweetsView.
When the user taps on an item in the List component in TwitterTrendsHome, the
List dispatches a change event indicating that the selection has changed. You can
handle this event to tell the ViewNavigator to push your new TweetsView onto the
view stack.
ViewNavigator is a component that manages a set of Views in a stack. When
the application starts up, the only view in the stack is the firstView of the
application. When you want to navigate to a new view, you push it onto the
stack by calling pushView() on the ViewNavigator. When the user clicks
the Back button on the device, the current view is automatically popped off
the stack. You can also manually pop the top view from the stack by calling
popView().
You don't normally need to create a ViewNavigator yourself; one is provided
for you when you create a view-based application.
Although the set of views is maintained as a stack, only one view (the
currently active view) is actually in memory at a time; previous views are
automatically disposed. However, the data property of each disposed view
is retained, so when the user navigates back to a previous view,
ViewNavigator can reinstantiate the view with the appropriate data.
Add a change handler in TwitterTrendsHomeView to navigate to TweetsView
You can use Flash Builder's content assist feature to easily create the change event
handler:
1. Switch back to the editor for TwitterTrendsHomeView.mxml.
2. Locate the <s:List> tag and click immediately before the end angle-
bracket of the start tag.
3. Type a space, then start typing change. A content assist popup appears
showing you property and event names, with change highlighted. Press the
Return key to select it from the popup.
4. Another popup appears showing Generate Event Handler… selected. Press
the Return key again to select it. Flash Builder gives the List the id "list"
and creates a list_changeHandler method.

5. Inside the new list_changeHandler method, where the // TODO
comment was created, type the following:
navigator.pushView(TweetsView, list.selectedItem.name);
This tells the ViewNavigator to create an instance of TweetsView and to pass it the name of
the selected trend as its data property. In the previous exercise, you bound the data
property into the title of the TweetsView and used it to query the Twitter search service for
tweets relevant to the trend.
If you run the application now and tap on a trend in the initial view, you'll see that
the tweets are shown in the list. However, you only see one line of each tweet, and
you don't see the image or name of the person who posted the tweet. You'll
configure this in the next exercise.

Exercise 7. Configure the list item renderer
As mentioned at the end of the previous exercise, you need to specify how the list
should display data. In Flex, you do this by creating an item renderer for the list.
In desktop Flex applications, you would normally do this by creating a custom
MXML component based on ItemRenderer. However, in mobile applications, using
MXML to create item renderers can cause performance problems when the list is
scrolled. As a result, we recommend that you use ActionScript-based item renderers
in mobile Flex applications.
In Flex SDK 4.5, we've provided an ActionScript-based IconItemRenderer class.
Using this item renderer, you can show a label field and an optional message field
below the label. You can also optionally show an icon or image to the left of the text
in each item, and a decorator on the right end.
If IconItemRenderer doesn't meet your needs, you can subclass its more general
base class, LabelItemRenderer, and add and lay out your own controls in
ActionScript. Showing how to do this is beyond the scope of this tutorial, but we
plan to make examples available in the future.
Create a mobile item renderer
You can use the new Code Templates feature of Flash Builder 4.5 to quickly add an
IconItemRenderer to the list:
1. Switch to TweetsView.mxml. (Make sure you're not in
TwitterTrendsHomeView.mxml, which has similar List code.)
2. In the source view, delete the labelField="text" property from the List.
You'll remap this text property in the item renderer below.
3. Place the cursor immediately after the end of the <s:AsyncListView/>
tag in the List and press the Return key.
4. Type Icon (with no < before it).
5. Press Ctrl-Space.
Because Flash Builder has a code template for IconItemRenderer (and
it's the only template whose name starts with Icon), it automatically fills out
the basic structure of the code for you.
6. Fill out the item renderer code as shown on the next page:

<s:itemRenderer>
<fx:Component>
<s:IconItemRenderer
iconField="profile_image_url"
iconWidth="48" iconHeight="48"
labelField="" messageField="text"
verticalAlign="top" />
</fx:Component>
</s:itemRenderer>
The field properties specify which members of each data item to use as the
message and icon. By using messageField instead of labelField for the
text, you enable the text to wrap to multiple lines. labelField displays in
bold and does not wrap by default.
7. Click the Run button in the Flash Builder toolbar to run the application
on the desktop.
8. Click on a trend in the initial view. This brings you to the tweets view for that
trend.
9. Select Device > Back in the ADL menu (or press Ctrl/Cmd-B) to go back to
the trends view.
10. Quit ADL.
Add an icon loading placeholder and the username to each tweet
Here, you'll add the username and an icon placeholder. This placeholder
automatically scales the icon to a different DPI:
1. In the IconItemRenderer tag you created above, remove
messageField="text" and replace it with
messageFunction="getTweetText".
2. Add iconPlaceholder="{assets.LoadingIcon}" to the tag. (If you
use Ctrl-Space to finish typing "LoadingIcon", it will automatically add the
import statement inside the tag for you, saving you some typing in the next
step.)
3. Change the IconItemRenderer tag to have a start and an end tag, and add a
Script block inside it defining the getTweetText() function, as in the code
below (see next page):

<s:IconItemRenderer iconField="profile_image_url"
iconWidth="48" iconHeight="48"
labelField="" messageFunction="getTweetText"
verticalAlign="top"
iconPlaceholder="{assets.LoadingIcon}">
<fx:Script>
<![CDATA[
import assets.LoadingIcon;
private function getTweetText(item: Object): String
{
return item.from_user + ": " + item.text;
}
]]>
</fx:Script>
</s:IconItemRenderer>
If you run the application again, you'll see the name of each user before each tweet.
Also, as the icons load, you'll see a placeholder square instead of empty space.
Because the placeholder square is specified as a vector graphics asset,
LoadingIcon.fxg, it will scale appropriately to different DPIs automatically.
However, in order to reference it in the iconPlaceholder attribute, you
need to reference it as an ActionScript class rather than an embedded asset,
which is why it has curly braces around it and the import statement. If you
wanted to use a multi-DPI bitmap as a loading icon, you could do so using a
similar pattern as the refresh button in the TwitterTrends.mxml file, making
iconPlaceholder be a child tag of the IconItemRenderer instead of an
attribute.
If you're wondering why the import statement and the implementation of
getTweetText() are inside the IconItemRenderer tag, rather than in
the main Script block in the TweetsView.mxml file, it's because when you
create an item renderer as a subcomponent using the <fx:Component>
tag: it's a separate component definition. So the scope of functions and
classes it refers to is within the tag itself, not the outer component's tag.

Exercise 8. Debug the application on a device
Before finishing the functionality of the application, let's try running it on a physical
device. You'll need a device running Android 2.2 and a USB cable to connect it to
your computer. If you don't have a device, skip ahead to the next exercise.
Set up your Android device for running
1. On the device, ensure that USB debugging is enabled:
a. Tap the Home button to go to the Home screen.
b. Tap the Menu button and choose Settings.
c. Choose Applications, then Development.
d. Ensure USB debugging is checked.
2. Connect your device to your computer with a USB cable.
3. Pull down the notification area at the top of the screen. On different devices,
you might see "USB Connected" or "USB Connection", or an entry that says
"Select to change USB connection type":
a. Tap on the "USB Connected" or "USB Connection" entry.
b. If a set of options comes up that includes "Charge Mode", select that
mode and tap OK.
c. If you see a button for turning off mass storage mode, click that
button.
4. If your computer is running Windows, you need to install the appropriate
USB driver for your device. See Appendix 1 at the end of this workbook.
5. Pull down the notification area at the top of the screen. "USB Debugging"
should now appear as an entry in this area. If not, double-check the USB
mode as in step 3 and ensure that it is not set to "PC Mode".
6. Ensure that your phone is on either a WiFi or cell network.
To set up your iOS device for running, see this link:
http://www.adobe.com/devnet/air/articles/packaging-air-apps-ios.html
To set up your BlackBerry Tablet OS device for running, see this link:
http://www.adobe.com/devnet/air/articles/packaging-air-apps-
blackberry.html

Run on the device
1. In Flash Builder, click the drop-down arrow to the right of the Run
icon in the Flash Builder toolbar and choose Run Configurations…
2. In the list on the left, select your existing TwitterTrends Desktop
configuration and click the Duplicate button at the top.
3. Change the Name to TwitterTrends Device.
4. Change the Launch method to On device.
5. Click Run.
The first time you launch, Flash Builder will install the AIR runtime on the device,
then install your application. To follow the progress of the launch, you can click the
progress icon in the very bottom right of the Flash Builder workspace, to the right of
the progress bar.
When the application launches on your device, you should be able to scroll the list of
trends and tap on a trend to see its tweets, just as on the desktop, and use the back
button on the device to navigate. You should also be able to turn the device to
landscape orientation and see that everything works properly, and click the Refresh
button on the Tweets view to get the latest tweets.
Hit a breakpoint on the device
1. In Flash Builder, set a breakpoint in the refresh() method of
TwitterTrendsHomeView.mxml (as you did in Exercise 4).
2. Click the drop-down to the right of the Debug button and choose
TwitterTrends Device. The Twitter Trends app running on your phone
should quit and restart in debug mode.
3. When the application starts, you should hit the breakpoint (since it gets
called on activation of the initial view).
You can access all the debugging capabilities of Flash Builder on device, just
as you did on the desktop in Exercise 4.
4. Remove the breakpoint from the refresh() method by double-clicking the
blue dot.
5. Quit the app by clicking the Terminate button in the Debug toolbar.
6. Switch back to the Flash perspective using the button in the upper right
corner of the Flash Builder workspace.

Exercise 9. Add a view to show information for a selected user
Now we'll complete the functionality of the application by adding a view to show the
information about the user who posted a given tweet.
This view has a slightly more complex layout than the previous views: the Action
Bar is customized to show the image and name of the selected user, and the view
content has some labels to show the location and website of the user, along with a
list of the user's recent tweets.
Create the view and customize its Action Bar
In the previous views, you didn't change the Action Bar, so it just showed the
content from the ViewNavigatorApplication (or, in the case of the titleContent, it just
showed the title of the current view). Now you'll put an image in the
navigationContent area, and replace the default titleContent with the name of the
user who posted the tweet:
1. As you did with the TweetsView, use File > New > MXML Component to
create a new View called UserInfoView and set it in the views package.
2. Switch to Design mode.
3. From the Controls folder of the Components panel, drag an Image into the
navigationContent area on the left side of the Action Bar. Make sure you see
the navigationContent tab before you drop the item, as shown below:
4. In the Properties panel, set the image's Width and Height to 43.
5. Drag a Label into the titleContent area in the middle of the Action Bar,
replacing the UserInfoView title. Again, make sure you see the titleContent
tab before you drop it.
6. Click the Bold button in the Text section of the Properties panel.
7. Also in the Text section, click the color picker (the black rectangle to the right
of the font size) and change the text color to white.
Your Action Bar should now look like this in Design view (see next page):

Lay out the view content
1. From the Components panel, drag out four Labels and arrange them as
shown below:
2. Double-click each label to set the text as in the screenshot above. The labels
on the right have placeholder content for now; you'll data-bind them later.
3. Select the labels on the left and click the Bold button in the Properties
panel.
4. Select the "(location)" label on the right and:
a. Resize the right edge of the label to near the right edge of the view,
leaving some padding:
b. In the Constraints section of the Properties panel, pin it to the left
and right edges, as in the screenshot on the next page. (The number
on the left may not be exactly the same.)

c. Switch to the Alphabetical view of the Properties panel and set
maxDisplayedLines to 1.
d. Switch back to the Standard view of the Properties panel.
5. Repeat step 4 for the "(url)" label on the right.
6. Drag in a List below the labels. Move and resize it so that it's flush against the
left, right, and bottom sides of the view, and constrain it to all four sides.
7. With the List selected, in the Alphabetical view of the Properties panel, set
borderVisible to true.
Get the data for the view
In this view, there are two sets of data you need to get from different services. The
first is the user's profile information; this is used to fill the Image in the Action Bar
and the location/website below that. The second data you'll bind to is the user's
recent tweets, which will fill the List at the bottom.
To get the user information, you'll create a new service call, but you'll use the same
getTweets() service call that you created earlier in order to fetch recent tweets:
1. In the Data/Services panel, bring up the context menu for TwitterService
and choose Properties.
2. Click the Add button above the Operations table.
3. Change the existing name "Operation1" to getUserInfo
4. Change the URL of the operation to
http://api.twitter.com/1/users/show.xml
5. Click the Add button above the Parameters table.

6. Change the parameter name to screen_name. Make sure to press the
Return key after typing the parameter name.
7. Click Finish.
8. In the Data/Services panel, bring up the context menu for getUserInfo()
and choose Configure Return Type…
10. In the Enter Value column, set the screen_name parameter to Adobe.
11. Click Next.
12. The type should be prefilled as User by default. Click Finish.
13. From the context menu for the getUserInfo() method, choose Generate
Service Call. This switches you to Source view and shows that a new
getUserInfo() function was generated.
14. Repeat the steps above to pull in the current user's tweets. Select the
getTweets() method, configure a return type, and generate a service call.
You'll use this service call to search for the tweets from the given user.
As in the trends view, you'll do this by implementing the refresh() method:
getUserInfo(String(data));
getTweets("from:" + String(data), "recent");
}
file.
3. Delete title="UserInfoView" from the View tag.
Bind the data returned by the service into the UI
3. For Existing call result, select the getTweetsResult.
4. For Data Provider, select the results[] array.
5. For Label field, select text.
6. Click OK.
7. Following the example in Exercise 7, add an IconItemRenderer that gets the
text as the messageField of the item renderer to text and sets the labelField
to blank. (You don't need to specify an icon or add the user name, since all
the tweets are from the same user.) The resulting item renderer code should
look like this:
<s:itemRenderer>
<fx:Component>

<s:IconItemRenderer labelField="" messageField="text"
verticalAlign="top"/>
</fx:Component>
</s:itemRenderer>
In the next few steps, you'll manually type the code to bind the rest of the UI
elements to data:
1. Locate the Image in the <s:navigationContent> tag and set the source to
{getUserInfoResult.lastResult.profile_image_url}
2. Set the text of the Label in the <titleContent> to {data}. Later we'll
pass the screen name of the selected user into this view as its data.
3. For the (location) placeholder label, change the text property to
{getUserInfoResult.lastResult.location}
4. For the (url) placeholder label, change the text property to
{getUserInfoResult.lastResult.url}
Add a change handler in TweetsView to navigate to UserInfoView
1. Switch back to the editor for TweetsView.mxml.
2. As you did before, use Content Assist to generate a change handler for the
List tag. This should add id="list" to the List tag.
3. Inside the new list_changeHandler method, type the following:
navigator.pushView(UserInfoView, list.selectedItem.from_user);
You should now be able to run the application, tap on a trend, and then from a tweet,
navigate to the info for the user who posted that tweet.

Exercise 10. Set up data persistence between sessions
When running a desktop application, users explicitly choose to quit the application
when they're done with it. On many mobile operating systems, however, users don't
typically explicitly quit applications. On Android, for example, when the user presses
the Home button or presses the Back button on the initial screen of an application,
the application doesn't quit; it's merely sent to the background. Conversely, when
many applications are running, the operating system will terminate background
applications without notifying the user. This means that mobile applications must
take care of saving and restoring their state, so that when the user re-enters the
application, no work is lost.
Flex provides session persistence functionality in ViewNavigatorApplication to help
automate this for developers. When you enable session persistence , the application
automatically saves its view stack state and view data to persistent storage on the
device whenever it exits, and restores it when the application is restarted.
Enable session persistence
1. Switch to TwitterTrends.mxml.
2. In the <s:ViewNavigatorApplication> tag, add the property
persistNavigatorState="true".
That's all you need to do to turn on session caching! In this application, session
caching is simple because the data property of each view is a simple string. In more
complex applications, you may need to register data type classes with the
persistence manager, or implement your own serialization for specific data types.
Test session caching on the desktop
1. Click the drop-down arrow to the right of the Run button.
2. Choose TwitterTrends Desktop.
3. Tap on a trend to navigate to the TweetsView.
4. Tap on a tweet to navigate to the UserInfoView.
5. Quit ADL.
6. Run the application again. The application restarts on the UserInfoView,
showing the user you were looking at when you quit the application.
7. In ADL, choose Device > Back (or press Ctrl-B/Cmd-B). The application
navigates back to the list of tweets for the trend you were viewing in the
previous session.

The session persistence feature maintains the entire history of the view stack as
well as the appropriate data. From the user's point of view, it looks like the
application was never interrupted.
You can test this on device as well, but you'll need to manually kill the application in
order to test it. On Android, you can do this from the Settings > Applications >
Manage Applications screen.
Clear application data when running it
When testing an application with session caching, you may want to clear the
application's data when you run it in order to test a clean startup:
1. Select Run > Run Configurations…
2. From the list on the left, choose TwitterTrends Desktop.
3. At the bottom, check Clear application data on each launch.
4. Click Run.
This time, the application restarts from the initial trends view. To go back to
preserving session state again, go back to the launch configuration dialog and
uncheck Clear application data on each launch. This check box also works in
device-based launch configurations.

Exercise 11. Export an application package for release
Now that your application is complete, you may want to give it to others, or sell it in
an application store. To do this, you use Flash Builder's Export Release Build
dialog, which has been extended to package mobile projects:
1. Select Project > Export Release Build…
2. Ensure that your TwitterTrends project is selected in the first drop-down.
3. For convenience, ensure that your device is connected if you have one.
4. Click Next. Flash Builder performs an initial build of the project.
5. In the next screen, for the Certificate field, click Create… to create an
unofficial self-signed certificate.
6. Enter your name as the Publisher name.
7. Enter a password in the Password and Confirm password fields.
8. Click the Browse… button and specify a location and filename for the
certificate.
9. Click OK.
10. Click Finish on the Export Release Build dialog. If no device is connected,
you will be notified that the build was not installed on any devices.
For complete instructions on how to get your provisioning profile and publish
a release build for iOS, see this link:
http://www.adobe.com/devnet/air/articles/packaging-air-apps-ios.html
For complete instructions on how to get your developer certificate and
publish a release build for BlackBerry Tablet OS, see this link:
http://www.adobe.com/devnet/air/articles/packaging-air-apps-
blackberry.html
The release build is now saved as TwitterTrends.apk in the root of your project,
and if you device is connected, the release build is now installed on your device.
Note that the debug version of the application (which was installed when you
previously debugged or ran the application on your device) is called
TwitterTrends-debug; the release version is just called TwitterTrends.
Before deploying an application for public distribution (through a website or
through an application store like the Android Market), you will need to get an
official certificate from a certificate provider, and use it to create your release build.

Extra Credit
Congratulations! You've built your first mobile Flex application. If you're already
familiar with Flex, ran through this tutorial quickly and are ready to try something
more challenging on your own, here are some things to try. (You'll want to use the
live API data for these.)
• Add a splash screen and application icon for the app. (Hint: the splash screen
goes on ViewNavigatorApplication, and the icon goes in the AIR XML
descriptor file.)
• Add a menu to the user info view that pops you straight back to the home
view. (Hint: add an <s:viewMenuItems> tag with ViewMenuItem tags
inside it, and use navigator.popToFirstView().)
• Make the URL on the UserInfoView link to the user's web page. (Hint: there's
no link control, but you can style it to look like a link, handle the click event,
and use Flash's navigateToURL() method.)
• Add a way to search for tweets with a given keyword. (Hint: you can put a
TextInput control in the titleContent of the Action Bar.)
• Add a way to log in to Twitter and get your Twitter stream.
• Add a view that lets you post a tweet once you're logged in.

Appendix 1. Installing the USB driver on Windows
If you are running Windows, you need to install the developer USB driver for your
Android device before attempting to run or debug on the device.
The device driver configurations are listed in android_winusb.inf. Windows Device
Manager accesses this file when installing the device driver. Flash Builder installs
android_winusb.inf at the following location:
<Adobe Flash Builder 4.5 Home>utilitiesdriversandroidandroid_winusb.inf
You can update android_winusb.inf with USB drivers for Android devices not
currently supported; see the next section.
To install the USB device driver for an Android device, follow these steps. (Note that
these steps may be slightly different on different versions of Windows.)
1. Ensure that USB debugging is turned on on your device, and that your device
is in "Charge Only" mode with mass storage turned off, as described in
Exercise 8.
2. Connect your Android device to your computer’s USB port.
3. If a message bubble pops up indicating that the device driver can't be found,
close it.
4. Go to Control Panel and bring up Device Manager.
5. Locate the entry for your device. It should have the name of your device's
manufacturer and a reference to "ADB". It will also likely have a warning icon
on it, indicating that the driver is not properly installed.
6. Right-click on the item and choose "Update Driver Software…".
7. Choose to manually browse to the driver.
8. Browse to this folder in the Flash Builder installation folder:
<Flash Builder>/utilities/drivers/android/
9. Follow the steps in the wizard to finish installation.

Adding Android USB device driver configurations
If you have an Android device not listed in the android_winusb.inf file described
above, update the file to include the device:
1. Plug the device into a USB port of your computer. Windows informs you that
it cannot find the driver.
2. Using the Windows Device Manager, open the Details Tab of the device
properties.
3. Select the Hardware IDs property to view the hardware ID.
4. Open android_winusb.inf in a text editor. android_winusb.inf can be found at
the following location:
<Flash Builder>utilitiesdriversandroidandroid_winusb.inf
5. Note the listings in the [Google.NTx86] section of the file. The listings contain
a descriptive comment and one or more lines that include the hardware ID.
An excerpt appears below:
. . .
[Google.NTx86]
; HTC Dream
%CompositeAdbInterface% = USB_Install, USBVID_0BB4&PID_0C02&MI_01
. . .
6. From the [Google.NTx86] section of the file, copy and paste a comment and
hardware listing. For the device driver you want to add, edit the listing as
follows.
For the comment, specify the name of the device. Replace the hardware ID
with the hardware ID identified in Step 3 above. For example:
. . .
[Google.NTx86]
; NEW ANDROID DEVICE
%CompositeAdbInterface% = USB_Install, NEW HARDWARE ID
. . .
7. Use the Windows Device Manager to install the device, as described in
"Installing the USB Driver on Windows" above.
During the installation, Windows provides a warning that the driver is from an
unknown publisher. However, the driver allows Flash Builder to access your device.

Twitter trends

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Andere mochten auch

Andere mochten auch (15)

Ähnlich wie Twitter trends

Ähnlich wie Twitter trends (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Twitter trends