Professional Documents
Culture Documents
Build First Mobile Flex App
Build First Mobile Flex App
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
................................................................................................................
34
Appendix
1.
Installing
the
USB
driver
on
Windows
.....................................................
35
Introduction
Welcome
to
the
new
mobile
development
features
in
Flash
Builder
and
Flex
SDK
4.5!
This
tutorial
is
based
on
a
lab
originally
created
for
the
preview
release
at
MAX
2010,
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
youre
doing.
Its
not
necessary
to
read
this
text
to
follow
the
steps.
By default, mobile Flex applications are structured as a series of viewsindividual 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.
5. 6. 7. 8.
6 | Build Your First Mobile Flex Application 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 applicationmost of your UI goes into the individual views. The one exception is the ActionBar, 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
ActionBar
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
BBOS
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
an
iOS
or
BBOS
back
button.
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
4. Finally,
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.
8 | Build Your First Mobile Flex 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.
2.
3. 4. 5. 6. 7. 8. 9.
Build Your First Mobile Flex Application | 9 enough to target with a fingerwhereas 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 allows you to specify bitmaps that should be used at 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 32x32, so the 240 DPI bitmap needs to be 48x48 and the 320 DPI bitmap needs to be 64x64. That makes it so that in each case, the bitmap occupies the same physical screen size.
3. 4. 5. 6. 7. 8.
3. From the Device dropdown, choose a device with a different screen sizefor 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 on the editor tab again to restore the panels.
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(); }
Build Your First Mobile Flex Application | 13 2. Add viewActivate="refresh()" to the <s:View> tag at the top of the file.
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.
Build Your First Mobile Flex Application | 15 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 on 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.
Build Your First Mobile Flex Application | 17 10. In the Data/Services panel, bring up the context menu for getTweets() and choose Configure Return Type 11. Make sure Auto-detect is selected and click Next. 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 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.
Call
the
service
when
the
user
navigates
to
or
refreshes
the
view
As
in
the
trends
view,
you'll
do
this
by
implementing
the
refresh()
method.
1. Inside
the
<fx:Script>
block,
add
the
following
method:
public function refresh(): void { getTweets(String(data), "recent"); }
2. Add
viewActivate="refresh()"
to
the
<s:View>
tag
at
the
top
of
the
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.
Build Your First Mobile Flex Application | 19 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.
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 type Ctrl/Cmd-B) to go back to the trends view. Quit ADL.
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 like 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.
Set
up
your
iOS
device
for
running
See
this
link
(http://help.adobe.com/en_US/flex/mobileapps/WSe4e4b720da9dedb5- 2d82208b12e46a72ded-7ffc.html)
Set
up
your
Backberry
Tablet
OS
device
for
running
-
See
this
link
(http://www.adobe.com/devnet/air/articles/packaging-air-apps- blackberry.html)
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 ActionBar, 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 on 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:
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.
28 | Build Your First Mobile Flex Application 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 9. Make sure Auto-detect is selected and click Next. 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. Generate another service call for the existing getTweets() method. You'll use this service call to search for the tweets from the given user.
Call
the
service
when
the
user
navigates
to
or
refreshes
the
view
As
in
the
trends
view,
you'll
do
this
by
implementing
the
refresh()
method.
1. Inside
the
<fx:Script>
block,
add
the
following
method:
public function refresh(): void { getUserInfo(String(data)); getTweets("from:" + String(data), "recent"); }
2. Add
viewActivate="refresh()"
to
the
<s:View>
tag
at
the
top
of
the
file.
3. Delete
title="UserInfoView"
from
the
View
tag.
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 (website) placeholder label, change the text property to {getUserInfoResult.lastResult.url}
Build Your First Mobile Flex Application | 31 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.
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 checkbox also works in device-based launch configurations.
For
complete
instruction
on
how
to
get
your
provisioning
profile
and
publish
a
realease
build
for
iOS
See
this
link
(http://help.adobe.com/en_US/flex/mobileapps/WSe4e4b720da9dedb5- 2d82208b12e46a72ded-7ffc.html)
For
complete
instruction
on
how
to
get
your
developer
certificate
and
publish
a
realease
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.
Build Your First Mobile Flex Application | 33 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.