IntroductionWelcome| 00:03 | Hi! I am James Talbot, and I would like you
to welcome you to Building Android and
| | 00:08 | iOS Applications with Flex.
| | 00:10 | In this course, we will build a mobile
application for two modern smartphone platforms.
| | 00:16 | We will start by looking at how to use
the Flex classes designed specifically
| | 00:20 | for mobile development.
| | 00:21 | We will explore how to connect the data
sources, how to optimize performance, and
| | 00:26 | how to test applications both in Flash
Builder and on the devices themselves.
| | 00:31 | We will see how to access controls and
APIs specific to mobile devices, such as
| | 00:36 | multi-touch, accelerometer
control, and camera access.
| | 00:40 | Finally, we will cover how to submit
a finished application to the Android
| | 00:44 | marketplace, the Apple App
Store, and the Amazon App Store.
| | 00:49 | Now before starting this course,
you should have some knowledge of
| | 00:51 | mobile terminology.
| | 00:53 | You should also be familiar with
ActionScript and the Flex development
| | 00:57 | environment in Flash Builder.
| | 00:58 | You can check out Flash Builder 4 and
Flex 4 Essential Training on lynda.com
| | 01:03 | to get up to speed.
| | 01:05 | Now, let's get started with building
Android and iOS applications with Flex.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library, or if
| | 00:05 | you're watching this tutorial on the
DVD-ROM, you have access to the exercise
| | 00:09 | files used throughout this title.
| | 00:12 | Let's look at how the
exercise files are laid out.
| | 00:15 | So you will see they are grouped by
chapter, and each chapter has FXP projects
| | 00:21 | that can be imported.
| | 00:22 | Now when you import one of these
projects into Flash Builder, it also
| | 00:25 | imports all of the assets that you need for
that project, unless I'll tell you otherwise.
| | 00:31 | So here, I will go into Flash Builder,
and I'll just click File and I'll choose
| | 00:36 | Import and I'll choose my FXP file here.
| | 00:40 | So in this case, I put my exercise
files on the desktop, and that's fine, so in
| | 00:45 | this case I'll choose
Chapter 04 and I will import 4_05.
| | 00:50 | I will click Finish,
| | 00:51 | and notice it imports my entire mobile project.
| | 00:55 | It also imports any images that I need
here in the images folder, and it also
| | 00:59 | imports the different views that
I'll be using in my application.
| | 01:04 | So everything that I need is
actually already imported here.
| | 01:07 | Now these files do go out and access
the Internet, so we are assuming that you
| | 01:12 | do have Internet access for
those of you on the DVD-ROM.
| | 01:16 | Okay, and you'll also see that we
also include a code snippets file, and
| | 01:21 | this code snippets file, if you're a
Monthly or an Annual subscriber, you
| | 01:25 | do have access to this file, and it's
downloadable as a free exercise file
| | 01:30 | from the course page.
| | 01:31 | So here is the code snippets file
and if I open up the code snippets file
| | 01:37 | here, you'll see these are also
grouped by chapters and this, when we do heavy
| | 01:41 | typing in terms of code,
| | 01:43 | this just allows us to cut and paste this code.
| | 01:46 | So you can just highlight it here
and choose Copy and paste it directly
| | 01:50 | into Flash Builder.
| | 01:51 | Again, all of these are highlighted
by chapter, so you can easily find what
| | 01:56 | you're looking for in your code snippets file.
| | 01:59 | If you are a Monthly subscriber or an
Annual subscriber to lynda.com, you don't
| | 02:04 | have access to the exercise files,
but you will have access to the code snippets
| | 02:09 | file, which is downloadable as a free
exercise file from the course page, and
| | 02:13 | you can follow along from
scratch with your own assets.
| | 02:17 | Let's get started.
| | Collapse this transcript |
| Previewing the finished app| 00:00 | Before we get started, I want to show
you one of the final applications that we
| | 00:04 | are going to build in this series.
| | 00:05 | So we are actually going to build a
mobile application for the Explore
| | 00:09 | California Tour Company.
| | 00:11 | So if I go to my Android device here
and I click on the Applications icon,
| | 00:16 | you'll see that I have an
icon for Explore California.
| | 00:18 | I'll go ahead and just open that up, and
I'll see a list of all of the different
| | 00:23 | trips that are available from this tour company.
| | 00:26 | So I can click on one of these trips--
| | 00:28 | for example, here I will click on
Coastal Experience--and I'll see a description
| | 00:32 | of the trip, and I'll see that all in
the text area component. I'll also see the
| | 00:37 | price of the trip, and all of this is
dynamically updated from a database that
| | 00:41 | this application goes out and connects to.
| | 00:44 | And you'll also see that I can make notes
for myself about these particular trips.
| | 00:49 | So I can type in some information here
and notice the virtual keyboard pops up,
| | 00:54 | and I can type in that information.
| | 00:56 | I can also save that
note directly to the device.
| | 00:59 | If I click on Go to Site, it will load
the HTML from the main site right into my
| | 01:05 | Adobe AIR application, and I can
scroll through that site in a window here.
| | 01:10 | Notice my back button also works, if I
click on the back button, and also the
| | 01:15 | native buttons on the Android
device in this case will work as well.
| | 01:19 | So that's just a quick example of our
Explore California application and what we
| | 01:25 | will be building in this course.
| | Collapse this transcript |
|
|
1. Getting Started with Flex and AndroidUnderstanding Flex for mobile development| 00:00 | Adobe Flex 4.5 is built from the
ground up for mobile development.
| | 00:05 | Using the Flex framework, we can develop
Adobe AIR applications that will run on
| | 00:10 | iOS, Android, and even on Blackberry tablets.
| | 00:14 | In this course, we are primarily
focused on mobile phone development, but the
| | 00:18 | beauty of Flex for mobile is we can
use the same code base for all of the
| | 00:23 | operating systems, whether we are
building our application on Windows, on
| | 00:26 | Mac, on Android, on iPhones, on
iPads, on Android tablets, and even on
| | 00:32 | Blackberry tablets.
| | 00:34 | In a later movie, we will discuss how
to set up Flex project libraries to take
| | 00:39 | advantage of each
platform and leverage code reuse.
| | 00:43 | Mobile development in Flex leverages
the core spark components, many of which
| | 00:48 | have been touch enabled for devices.
| | 00:51 | There are APIs in ActionScript 3 to
access the underlying functionality of the
| | 00:56 | device, including the camera, the
accelerometer, the microphone, and many more
| | 01:02 | native hardware elements.
| | 01:04 | Flex handles the complexity of mobile
development for us, including handling all
| | 01:09 | of the layout, handling the different
application states, and many of these
| | 01:13 | you're probably already
familiar with as a Flex developer;
| | 01:17 | for example, the width and height
percentages are a great way of setting up your
| | 01:22 | applications that scale
to different screen sizes.
| | 01:25 | Adobe has also built many custom
mobile components that are really optimized
| | 01:30 | to deal with the slower processor speed
and less memory that mobile devices may have.
| | 01:36 | We can switch out the skins and the
styles at run time depending on which device
| | 01:42 | the user is actually viewing the app on,
and we can even do this inside of a CSS
| | 01:47 | style sheet, which is very, very powerful.
| | 01:51 | Adobe Flex also will handle the
DPI management, or the dots per inch.
| | 01:55 | One of the things of course that you
have probably found out if you have
| | 01:58 | explored mobile development at all is
that the mobile world is very fragmented.
| | 02:03 | There is many, many different devices
out there, and these devices can all have
| | 02:08 | different screen sizes,
different pixel densities.
| | 02:12 | For example, the Droid X has a
pixel density of 240 dots per inch, while
| | 02:17 | the iPhone can vary depending on
whether you are using the iPhone 4, and of
| | 02:21 | course we know there are many, many
hundreds of different Android devices out
| | 02:25 | there, and they all can have
different characteristics.
| | 02:29 | And the beauty of this is instead of
having to develop an app for each one of
| | 02:33 | these different devices, we can develop
with Flex and Adobe AIR and Flex helps
| | 02:38 | us really manage these different dots
per inch so each device user gets the
| | 02:43 | best possible experience.
| | 02:46 | So again, you can see that Android and
iPhone are all fragmented, and of course
| | 02:52 | we also have different UI
and hardware conventions.
| | 02:56 | So again, you can take the majority
of your code and set it up in a project
| | 03:01 | library and then create little
snippets of your code that are designed
| | 03:05 | specifically for iPhones, for Android--
because of course there are differences
| | 03:10 | between the different platforms.
| | 03:12 | So, for example, the Android device has
a Search button, has a Home button, has
| | 03:17 | a Back button, and generally most of the
layout is done on iOS inside of the app,
| | 03:23 | which can mean lots of
different things, besides the obvious,
| | 03:26 | you have to access those buttons in
Android file; iOS, you may have less screen
| | 03:30 | real estate that you have because many
of those are now devoted to navigation
| | 03:33 | controls, when in Android they
don't necessarily need to be.
| | 03:37 | So Flex gives us that possibility,
because of course Flash Builder is built on
| | 03:41 | Eclipse, and we have the power of
setting up the different libraries.
| | 03:45 | We can really leverage our code
reuse and build these very easily for our
| | 03:50 | different applications.
| | 03:51 | Once you develop your application in
Adobe Flex, you can then upload your
| | 03:56 | application just like a native
application to the Android marketplace, to the
| | 04:00 | Amazon Appstore, or to the Apple App Store.
| | Collapse this transcript |
| Enabling an Android device for USB debugging| 00:00 | In order to publish applications to an
Android device, there are few things that
| | 00:04 | we need to do to prepare the device.
| | 00:06 | The first thing is we need to make sure
that non-Android market applications can
| | 00:10 | be installed, and the second thing we
need to do is enable USB debugging.
| | 00:15 | So you'll see my Android device here.
| | 00:17 | I'm just going to click on the
Applications icon and I am going to scroll down
| | 00:21 | to where it says Settings.
| | 00:22 | I am going to click on Settings, and
you are going to see in here there is a
| | 00:26 | category called Applications. Go ahead
and click on Applications, and you'll
| | 00:31 | see at the very top it says, "Unknown sources.
Allow installation of non-Market applications."
| | 00:37 | Check that to allow installation of
non-market applications, and then you'll
| | 00:41 | also see that there is a
category here called Development.
| | 00:44 | Click on the Development category,
and then you'll see that USB debugging is set
| | 00:50 | here, and just make sure that you check
that, and that will just make sure that
| | 00:54 | you can publish your Flash Builder
applications directly to your Android device.
| | Collapse this transcript |
| Installing the Android SDK | 00:00 | In this video, we will explore how
to prepare our system for Adobe Flex
| | 00:05 | mobile development.
| | 00:07 | So in terms of mobile Flex development,
there are some important things that we
| | 00:10 | need to take into consideration.
| | 00:12 | One of the most important things in
mobile development is there is no substitute
| | 00:16 | for testing your
application on an actual device.
| | 00:20 | So, Adobe Flash Builder itself has lots
of tools that are built in that allow us
| | 00:25 | to test it on the desktop, but we do need to
get our devices working and setting that up.
| | 00:29 | Also, both Android and iOS have what
are called emulators, or simulators, and
| | 00:36 | those will unable us to stimulate the
device on the desktop much more so than
| | 00:40 | Adobe Flash Builder will, and we can also get
those working by downloading the appropriate SDKs.
| | 00:46 | So the first step here is to simply
just browse out to Adobe and make sure that
| | 00:52 | you have the latest version
of Flash Builder installed.
| | 00:55 | So I am going to open up Chrome, and I am
going to go to adobe.com/flex, and I am
| | 01:03 | going to download the latest
version of Adobe Flash Builder 4.5.
| | 01:08 | For those of you who don't want to
purchase this quite yet, you can just go
| | 01:12 | ahead and click on Get the trial and download
that and then install Adobe Flash Builder 4.5.
| | 01:19 | Okay. The next thing that you need to do is,
if you're developing for Android, is you
| | 01:24 | probably should download the Android SDK.
| | 01:27 | Now you don't necessarily need to do
that because Flash Builder actually
| | 01:30 | includes pieces of the Android SDK,
but downloading the Android SDK gives us
| | 01:35 | lots of flexibility in terms of
actually debugging our tools, seeing what's
| | 01:40 | happening on our devices that we have
connected, and there's also the Android
| | 01:44 | emulator that we can
install and get ready to use.
| | 01:48 | Now to use the Android SDK, we need to
make sure that we have Java installed and
| | 01:54 | ready to go on our system.
| | 01:56 | So again, for those of you on a
Mac, Java is already installed.
| | 02:00 | You are good to go. You don't need to do anything.
| | 02:02 | For those of you on Windows systems,
browse to java.oracle.com, click on Java
| | 02:07 | SE, and then click on JDK and install
the appropriate executable for your
| | 02:15 | system, depending on whether you're a 32-bit
operating system or a 64-bit operating system.
| | 02:22 | And this will install Java here on
your system, and you should be good to go.
| | 02:27 | Then what you'll need to do--and again,
for those of you on Mac, you'll also
| | 02:31 | need to do this--go out to
developer.android.com, and you'll see that there is an SDK tab here.
| | 02:41 | Click on SDK and install the
appropriate SDK for your operating system.
| | 02:46 | You'll see of course there's a Windows
SDK and then there is also a Mac SDK.
| | 02:52 | So go ahead and download
that, and this utilizes Java,
| | 02:55 | so if you haven't downloaded Java on
Windows platforms, this won't actually work.
| | 03:01 | Okay, so perfect!
| | 03:02 | So make sure that that's installed,
and then you can just start the SDK at any
| | 03:07 | point simply by going to where it
installed, which by default on a Windows
| | 03:13 | machine installs to Program Files (x86).
| | 03:17 | I am on a 64-bit Windows machine, and you
could see it goes to Android and the android-SDK.
| | 03:22 | Of course on a Mac, it installs to the
Application directory, and you can start
| | 03:27 | this up by clicking on the SDK Manager.
| | 03:29 | Now once you start the SDK Manager,
the SDK will prompt you for a lot of
| | 03:34 | different downloads to download the
latest APIs and a bunch of other things, so
| | 03:39 | you probably should go through and just
make sure that everything is downloaded
| | 03:42 | and everything is good to go.
| | 03:44 | Okay, now for those of you on a Mac,
make sure that you have the latest version
| | 03:49 | of iTunes installed on your machine and
click on iTunes and just make sure that
| | 03:54 | you can see your iPhone actually
inside of the iTunes environments.
| | 03:59 | So all you should have to do is plug
it in and it should work, the drivers
| | 04:03 | should install whether you're on Windows
or Mac, and you should be good to go, and
| | 04:06 | you should be able to see it.
| | 04:07 | I am sure many of you have installed
apps utilizing iTunes, and you'll probably
| | 04:12 | access the App store.
| | 04:13 | I am sure you're probably good to go.
| | 04:14 | In a later movie, we are going to
actually learn how to provision our iPhone for
| | 04:20 | development so that we can install
our Flex applications on our iPhone.
| | 04:26 | For now, just make sure that your iPhone is
recognized and is working inside of iTunes.
| | 04:34 | Okay, for those of you on an Android
device, following the last movie and
| | 04:39 | making sure that USB debugging is enabled,
just go ahead and plug that into your machine.
| | 04:45 | Now if you are on a Mac, you should
recognize that this works straight out of the box.
| | 04:49 | You shouldn't need to install any
drivers or anything like that when you install
| | 04:54 | this on a Mac, and it should work fine.
| | 04:56 | For those of you on a Windows
machine--I've just plugged in my device--
| | 05:00 | some of you may see over here that it
says a new device has been plugged in and
| | 05:05 | it goes out and it finds the drivers
for you automatically, and it says your
| | 05:09 | device is installed and ready to use.
| | 05:11 | If that happens, you are in great shape.
| | 05:14 | You are good to go.
| | 05:15 | If it doesn't happen, you are going to
have to take some additional steps to
| | 05:19 | make sure that your Android device is
installed and ready to go on Windows.
| | 05:24 | So the good news is Adobe Flash Builder
ships with some default USB drivers that
| | 05:30 | we can utilize to install our Android phone.
| | 05:34 | So again, if it's not recognized by the
system, just go over here and open up a
| | 05:39 | command line and then type in 'hdwwiz.'
| | 05:46 | This will open up the Add Hardware
Wizard and allow us to install the default
| | 05:51 | USB drivers that ship with Adobe Flash Builder.
| | 05:54 | So go ahead and just click Next,
and then just say Install the hardware that I
| | 05:58 | manually select from a list and click Next.
| | 06:01 | You should see that there is a
setting in here called Android Phone.
| | 06:04 | Again, some of you may not have that
setting that says Android Phone, so you're
| | 06:08 | going to actually have to go out and
install other drivers manually, and I'll
| | 06:13 | walk you through that process in a minute.
| | 06:15 | Now that will depend on your device
manufacturer, but hopefully we have some
| | 06:19 | folks here whose it does say Android
Phone, so go ahead and click Next and
| | 06:26 | then click on Have Disk.
| | 06:28 | Okay, and then copy the manufacturer's
files, and let's just browse to Flash Builder.
| | 06:34 | So you'll see that's under C:
| | 06:37 | in my case Program Files (x86)/Adobe/
Adobe Flash Builder 4.5/utilities/
| | 06:42 | drivers/android and then choose
this file right here, android_winusb.
| | 06:48 | These are the Windows USB drivers.
| | 06:51 | Click Open and then click OK, making
sure your device is of course plugged in,
| | 06:56 | and click Next, click Next, and it
will then install the drivers here.
| | 07:03 | Okay, so go ahead and click Finish,
and that should install the drivers there.
| | 07:08 | And for those of you who weren't
successful doing that, what I would recommend
| | 07:13 | is going out to Google and just simply
doing a search for your manufacturer.
| | 07:18 | So of course there are all kinds of
different Android devices out there, so say
| | 07:22 | I have a Motorola Droid.
| | 07:23 | I might just go out and search for
'Motorola Droid drivers,' and you'll see here is
| | 07:29 | the USB and PC charging drivers.
| | 07:32 | You can install this, and here is an executable.
| | 07:34 | This is a great thing that Motorola has done.
| | 07:36 | This will actually go out and find
the appropriate drivers for your device.
| | 07:41 | So you can just go ahead and install this,
| | 07:43 | run it, and it should all be automated.
| | 07:45 | There are other similar applications
from other manufacturers, like Samsung and
| | 07:50 | HTC, but you need to get your
device actually recognized by the system.
| | 07:55 | Now to make sure that everything set
up and that this is working, again, for
| | 07:59 | those of you on Mac it should just do
that default out of the box, but what we
| | 08:03 | can do is we can actually utilize a
tool in the Android SDK called DDMS.
| | 08:09 | So I am going to go out to my Android
SDK installation and I am going to go to
| | 08:14 | my C drive here, and then I am
going to go to Program Files (x86).
| | 08:18 | I am going to choose Android.
| | 08:20 | I'll choose android-sdk.
| | 08:21 | I am going to choose tools, and then
you should see here there's a little
| | 08:28 | executable, a Windows bat file, called ddms.
| | 08:31 | So click on ddms and this should start
up, and if you have been successful, you
| | 08:37 | should see it says that your
phone is plugged in and online.
| | 08:42 | If I scroll down here, I'll see
immediately all of the log files that's going on
| | 08:47 | with my Android device here, and I
can see all of that. And this can be very
| | 08:50 | useful when I am actually coding inside
of Flash Builder. I can see everything
| | 08:55 | that's happening in terms of my
application, when I run it, and there is some
| | 08:58 | other very useful tools here.
| | 09:00 | I can click on Device, and I can, for
example, access the File Explorer, and I
| | 09:04 | can browse the file system of my
phone and my SD card, and I could see
| | 09:09 | everything that's going on here.
| | 09:10 | So that's very nice as well.
| | 09:12 | And then I can even take a screen capture of
my device simply by clicking on Screen capture.
| | 09:18 | One other quick troubleshooting note
that I ran into when I was trying to test
| | 09:23 | my phone is that I was using a
different USB cable than the one that actually
| | 09:27 | shipped with the phone.
| | 09:29 | Everything seemed to fit properly,
but I could not get the system to
| | 09:32 | recognize my phone.
| | 09:33 | So one thing you want to make sure
of is that you're using the original
| | 09:37 | USB cable that actually shipped with your phone
when you plug it into your desktop computer.
| | 09:42 | So now we've explored actually
how to configure our system for
| | 09:47 | Android development.
| | Collapse this transcript |
| Installing Adobe AIR on an Android device| 00:00 | In order to run an application
built with Adobe Flex, Adobe AIR must be
| | 00:06 | installed on the device.
| | 00:08 | Now, you can install Adobe AIR
directly from the Android marketplace or from
| | 00:12 | the Amazon marketplace.
| | 00:13 | So here if I click on Applications and
I go down to the Android Market, so I am
| | 00:19 | going to click on market right here,
| | 00:23 | and I am going to click on Search,
and I am just going to type in the word 'air,'
| | 00:28 | and I'll press Enter.
| | 00:31 | And we should see Adobe AIR.
| | 00:33 | So I'll click on Adobe AIR, and I can
install it directly from here to be able to
| | 00:39 | run all of the applications
that have been built with Flex.
| | 00:44 | Now, if your user doesn't have AIR
installed, let's explore what happens.
| | 00:49 | So I am going to go back here to my
Applications on my main home screen, and
| | 00:54 | then I am going to click on the Explore
California app that we looked at earlier
| | 00:58 | that's built with Adobe AIR.
| | 00:59 | Up dialog box pops up
immediately that says, "Hey!
| | 01:03 | This application requires Adobe AIR.
| | 01:05 | Install Adobe AIR now."
| | 01:08 | So I'll click Install, and in this case
you'll see it immediately goes out and
| | 01:12 | allows me to install this from the App
store because this particular Explore
| | 01:17 | California I had written to the
App store, and you can see that.
| | 01:21 | So I can download it directly in this
particular case, and we'll talk about
| | 01:25 | that in a later movie.
| | Collapse this transcript |
| Building a "Hello World" app for Android| 00:00 | We can build AIR for Android
applications using either Flash Builder 4.5 or just
| | 00:07 | the Flex SDK by actually
compiling at the command line.
| | 00:11 | In this video, we'll explore how to create
an APK file utilizing Flash Builder 4.5.
| | 00:16 | The first step is to utilize the
appropriate screen size and set up the
| | 00:20 | device controls and more, and then
we actually take our application and
| | 00:25 | publish it as an APK file.
| | 00:27 | Now, what this does is this
includes a SWF file and an application
| | 00:31 | descriptor file and packages it all up into a
file that we can install on an Android device.
| | 00:38 | Now we'll also need to provide a
certificate, and this certificate needs to
| | 00:42 | have a validity period of 25 years if
we want the application to be published
| | 00:47 | to the Android Market.
| | 00:48 | Flash Builder produces a self-signed
certificate, but for serious application
| | 00:52 | developers, you might want to go to a
company that'll actually verify your
| | 00:56 | identity, so users feel more
comfortable installing your application--
| | 01:00 | and a company like that
is something like VeriSign.
| | 01:03 | Okay, so let's go ahead and create a
very simple application, so I'm just going
| | 01:07 | to click on File > New, and I'm
going to say Flex Mobile Project.
| | 01:12 | So I'm going to click here and I'm
going to simply call this project
| | 01:16 | HelloWorld, just like that.
| | 01:18 | And you'll see I'm going to specify my
default location. Make sure of course,
| | 01:22 | you're using the default
SDK, which is Flex 4.5.1.
| | 01:27 | Click Next, and we can set up
some different types of applications.
| | 01:32 | In this case, we're going to utilize a
view-based application which is designed
| | 01:36 | specifically for mobile phones, and
we're going to talk about how to utilize
| | 01:41 | this, but let's use a view-based application.
| | 01:43 | And in this case we're targeting not
BlackBerry tablet OS and not Apple iOS, but
| | 01:48 | we're targeting Google Android.
| | 01:50 | So you'll see that there's a
Permissions settings, and for those of you who ever
| | 01:54 | installed an application directly from
the Android Market, it will tell you what
| | 01:59 | permissions this application has.
| | 02:00 | So we'll say, for example, that this
application has permission to access the Internet.
| | 02:05 | It has permission to write
to the external storage card.
| | 02:08 | It has permission to write to the Phone state.
| | 02:11 | And again, some users may choose not
to install your application if they know
| | 02:15 | that it's going to access their
GPS coordinates; they may not feel
| | 02:18 | comfortable with that.
| | 02:19 | So it's a fine line for you as a
developer to choose what you want to do, and
| | 02:24 | again, Flash Builder will automatically
create the Android manifest file, which
| | 02:29 | is part of the APK file in
terms of Android development.
| | 02:33 | Now you can also set up Automatically
reorient, click there, so that means if the
| | 02:38 | user changes the orientation of the
device--for example, turns it vertically or
| | 02:41 | turns it horizontally--the application
will automatically change as well, and we
| | 02:46 | also want to scale the
application for different screen densities.
| | 02:49 | And I've generally found if you click
this and you set it to 240 dpi, this
| | 02:55 | gives you a lot of flexibility for the most
modern devices and gives you the best experience.
| | 02:59 | Again, the Flex framework handles the
scaling, so we as developers don't need to
| | 03:03 | worry too much about it at this point.
| | 03:06 | You'll also see that
there's a Full screen setting.
| | 03:08 | I generally recommend you don't click
on this because this will make your
| | 03:12 | application take the full screen,
which it seems to do by default anyway, but
| | 03:17 | this may cover some of the navigation
areas, and I generally have not had good
| | 03:21 | experience by clicking on Full screen.
| | 03:23 | So you probably want to make
sure that you don't check that.
| | 03:26 | Okay, so make sure
you've set for Google Android.
| | 03:29 | You've set Permissions.
| | 03:30 | There are no platform settings for
Google Android so we don't need to worry
| | 03:33 | about that. Click Next.
| | 03:35 | And in our case, we're not
accessing an application server type.
| | 03:38 | If you are interested in connecting
your mobile application to an application
| | 03:42 | server, it will utilize the data
connection of the mobile device.
| | 03:46 | And in our Flex series, we have all
different kinds of ways of being able to
| | 03:50 | connect to web services,
remote objects, all that.
| | 03:53 | And you can learn about that.
| | 03:54 | It's the same as in regular
desktop Flex development. Okay.
| | 03:58 | So here you're going to just put your
merged into code for your SDK defaults.
| | 04:03 | You can add any additional SWC files, and
we'll talk later on about how to set up
| | 04:07 | our Flex projects as libraries.
| | 04:09 | You'll see it creates our main
application file, HelloWorld.mxml, and I'll just
| | 04:14 | type in 'com.lynda.HelloWorld' for our
application ID just to follow that sort of
| | 04:21 | reverse-domain-name best
practice, and then I'll click Finish.
| | 04:26 | And since I'm using the View Navigator
class--the View Navigator classes are
| | 04:29 | beautiful and we're going to learn
all about them in a later chapter--
| | 04:34 | but what the View Navigator classes do
is they really optimize performance on
| | 04:39 | mobile phones, and they're really
designed for the screen size of mobile phones.
| | 04:43 | So you'll see here we have our main
ViewNavigatorApplication right here.
| | 04:48 | We specify the XML namespaces, and here
we can do things like access data or set
| | 04:55 | up an action bar right here in
our ViewNavigatorApplication.
| | 04:59 | And we'll talk about how to do that
in a later movie, but you'll see the
| | 05:02 | firstView is specified to
views.HelloWorldHomeView, and that's of course this
| | 05:08 | view here, and this is where we
display the UI of our application.
| | 05:12 | So here what I'm going to do is I'm just
going to add in a very, very simple UI,
| | 05:17 | and I'm just going to
simply use the spark components.
| | 05:19 | When we're developing from mobile
applications, you should always utilize
| | 05:22 | the spark components.
| | 05:24 | Don't utilize any of the MX or the
older components because they are
| | 05:28 | not optimized for mobile in any sense,
so make sure you only utilize spark components.
| | 05:33 | I'm going to say s:Label, I'm going to specify a
text property here, and I'm just going
| | 05:39 | to simply say 'Hello World,'
and I'm going to do that.
| | 05:43 | And then I'm going to click here, and
it's going to say simply Hello World, as you
| | 05:48 | see there, and I'm going to hit Save.
| | 05:52 | Okay, you'll see it's built me my
HelloWorld-app.xml, and then it's built me
| | 05:57 | the HelloWorldHomeView.
| | 05:58 | It's built the HelloWorld.xml, and I can
test this on the actual Android device.
| | 06:06 | So it's very straightforward.
| | 06:08 | All you have to do is just set up a
run configuration and just say Mobile
| | 06:12 | Application and just click New and then
choose your Target platform, which in our
| | 06:16 | case of course is Google Android,
and I can just simply run this.
| | 06:21 | If you followed the steps to configure
your device here, you should be able to
| | 06:24 | run this on the device.
| | 06:26 | I'm going to just go ahead and click
Apply, and this is going to actually
| | 06:30 | generate the APK file and open
it up and run it on the device.
| | 06:36 | So you'll see it'll be
running here on my Android device.
| | 06:38 | What I'm going to do is just
browse out to the Computer here.
| | 06:43 | I'm going to go to my Program Files/
Android/android-sdk/tools/ddms.
| | 06:52 | You'll see this will start up my Android tool.
| | 06:54 | You'll see my phone is currently online,
and Flash Builder just automatically
| | 06:58 | installed everything.
| | 07:00 | So you'll see if I highlight my device
and I click on Device and choose Screen
| | 07:03 | Capture, you should see this is
running on my Nexus S here and it says Home
| | 07:08 | View, which is the name of my first
view in my View navigator application, and
| | 07:12 | it simply just says Hello World.
| | 07:15 | Now one other thing I want to point out
here, just so you can see sort of how an
| | 07:19 | Android application is structured,
| | 07:21 | if you look here in your
bin-debug folder, notice what it did.
| | 07:25 | It generated us a HelloWorld.apk file,
and by default it generated a debug
| | 07:32 | version of this APK file
so we could test it on the device.
| | 07:36 | Flash Builder 4.5 makes it very easy to
publish and test AIR applications on a mobile device.
| | 07:43 | In later movies, we will learn how to
actually take these applications and
| | 07:47 | export them to the Android
marketplace and to the Amazon Appstore.
| | Collapse this transcript |
| Building a "Hello World" app for iOS| 00:00 | In this video, we're going to explore
how to create a Hello World application
| | 00:05 | for the iOS platform.
| | 00:07 | Now, we're going to need a little help
from Apple to actually be able to generate
| | 00:11 | the IPA file, which is what
we can install on the device.
| | 00:15 | But in this video, we're going to
explore how to configure Flash Builder and
| | 00:19 | how to do some testing inside of Flash
Builder before we actually go out to the
| | 00:23 | Apple Developer Center and learn how to test it,
and how to actually install it on our iOS device.
| | 00:29 | So the first step is just simply to
click on File, choose New, and choose
| | 00:34 | Flex Mobile Project.
| | 00:37 | Let's go ahead and just call this
project HelloWorld, as you see here, and make
| | 00:41 | sure that you're using the default
Flex SDK, which is currently Flex 4.5.1,
| | 00:47 | and then click Next.
| | 00:49 | And you'll see we have some settings in here.
| | 00:51 | I can either choose a Blank
Application, a View-Based Application, or a
| | 00:55 | Tabbed Application.
| | 00:56 | We're going to use a view navigator
application, and this type of application is
| | 01:01 | optimized for mobile devices.
| | 01:03 | So basically, the Flex framework
handles the instantiation and the creation of
| | 01:08 | each of the different views of our
application and really optimizes memory and
| | 01:12 | processor use for the application, so our
application will perform very well on phones.
| | 01:18 | So make sure you've selected that
and we also want our application to
| | 01:22 | automatically reorient, which simply
means if the user changes the device to a
| | 01:26 | horizontal position our
application will follow suit.
| | 01:30 | Also, click on Automatically scale
applications for different screen densities,
| | 01:35 | and let's change this to 240 dots per inch.
| | 01:39 | Again, iPhones, depending on whether
you're deploying to the iPhone 3GS or to
| | 01:43 | the iPhone 4, they can have different
dots per inch, so Flex will handle the
| | 01:48 | scaling of our application for each
one of those different devices as well.
| | 01:53 | Generally, on iOS especially, you
don't want to click Full screen because
| | 01:58 | this could impact some of
your navigation controls.
| | 02:01 | So just go ahead and leave that blank.
And you'll see that there's no permissions
| | 02:05 | here because that only applies to
Android, and then you'll see under Platform
| | 02:10 | Settings, you may want to change this
and just set it to the iPhone and the iPod
| | 02:15 | Touch since that's the
device we'll be targeting here.
| | 02:18 | Okay, you can uncheck the BlackBerry
Tablet OS, as well as Google Android here,
| | 02:23 | and then just click Next, and you'll see of
course we can integrate with server technology.
| | 02:29 | In this case just choose None, and
this works just like a desktop Flex
| | 02:32 | application, which you can learn
about in our Desktop Flex Series.
| | 02:36 | So here I'll just click Next, and you'll
see of course I can add any SWCs or any
| | 02:40 | libraries that I'm going to use.
| | 02:42 | And here I'm just going to follow the
best practices for my application, and I'm
| | 02:46 | just going to say com.lynda.HelloWorld,
as you see there for my Application ID.
| | 02:54 | Okay, so I'm going to click Finish,
and that's going to build me my iOS project.
| | 03:01 | So you'll see here it's created this
into ViewNavigator classes, and you'll see
| | 03:05 | it's created our default application
HelloWorld.mxml, and you could see it's
| | 03:10 | utilizing the
ViewNavigatorApplication classes to set all this up.
| | 03:14 | And you'll also see the firstView just
says views.HelloWorldHomeView, and you'll
| | 03:20 | see that this is the first view that
the user will see actually on their screen
| | 03:25 | is this MXML component that you see here.
| | 03:27 | You can also see of course this
specified the applicationDPI and inside of this
| | 03:31 | ViewNavigator class, you can do things
like add an action bar that'll persist
| | 03:36 | across all of the different
views, so that's very nice.
| | 03:39 | So let's go here to our
HelloWorldHomeView, and let's just add in a very
| | 03:44 | simple label control.
| | 03:46 | So I'm just going to say s:Label like so,
and I'll specify the text property here
| | 03:53 | and I'll simply say Hello World.
| | 03:56 | And of course, you can adjust the
font size and that sort of thing.
| | 03:59 | Go ahead and click Save.
| | 04:01 | And if you switch to Design mode here,
you should see inside of Design mode that
| | 04:06 | you'll see exactly how this'll look on,
in this case we've chosen an iPad, but
| | 04:11 | let's choose an iPhone 3GS.
| | 04:13 | I can see how it'll look.
| | 04:15 | And then I can also choose an iPhone 4
and again, you could see of course it's
| | 04:18 | indicating that this has a different
DPI, so you can see how the application
| | 04:22 | will look on an iPhone 4, and
I can click each one of these.
| | 04:26 | I can also rotate it here in Design
mode and change it into a Landscape mode
| | 04:29 | or a Portrait mode.
| | 04:31 | And I can also refresh if any
changes have occurred here by clicking on
| | 04:35 | the Refresh button.
| | 04:36 | So I have all that ability here in
Design mode, and of course I can drag and
| | 04:40 | drop components in Design mode just
like you can on a desktop Flex application.
| | 04:44 | And generally, you should always use
spark components for your application
| | 04:49 | because spark components are
optimized for the mobile framework.
| | 04:54 | And you can also set up a run
configuration here, and if you just choose Run
| | 04:58 | Configuration, you could say Mobile
Application here and then click on New
| | 05:02 | launch configuration, and we can choose
to actually launch this on the desktop.
| | 05:08 | So, for example here I can say I want
to launch this on an iPhone 3GS and I can
| | 05:13 | click Apply and I can click Run,
| | 05:16 | and it will open up Flex and I can see
what this may look like on an iPhone 3GS.
| | 05:25 | So in this way you can set up your projects
so that you're targeting the iOS platform.
| | 05:31 | In order to actually publish this on
an iOS device, we're going to explore in
| | 05:35 | the rest of the chapter how to work
with Apple, how to provision our device
| | 05:39 | so we can install applications on it,
and how to install the necessary certificates.
| | Collapse this transcript |
| Creating an Apple Developer Certificate on Mac| 00:00 | In this movie, we are creating a Developer
Certificate to install our apps on an iPhone.
| | 00:05 | We are using the Mac to do this.
| | 00:07 | If you're doing this on a Mac, you
should not need to watch the next movie, which
| | 00:12 | describes the process of creating a
Developer Certificate on a Windows machine.
| | 00:17 | In order to set up an iPhone for
Flex development, you must be a
| | 00:21 | registered Apple developer.
| | 00:23 | So if you just browse out to
developer.apple.com and click on the iOS Dev Center
| | 00:29 | and choose Register, you can actually
register as a certified Apple developer.
| | 00:34 | Now what you need to do is you
will need to pay $99 to do this.
| | 00:38 | Then once you've done that, what we're
going to do is we'll create a Certificate
| | 00:42 | Request Signing file.
| | 00:44 | This will actually obtain us
an iPhone Developer Certificate.
| | 00:48 | Now this has the extension .cer and
in order to use a certificate with Flex
| | 00:53 | development, we must actually
convert it into a P12 file and use it with
| | 00:59 | our application there.
| | 01:00 | So let's get started and explore how to do this.
| | 01:03 | The first step here is I'm going to
simply create a certificate request.
| | 01:08 | You can do that directly from your
keychain, so what I want you to do is go
| | 01:12 | ahead and just open up the Finder
and then go to your Applications and go out
| | 01:18 | to the Utilities directory here,
and you'll see there is an application
| | 01:22 | in here called Keychain Access.
| | 01:25 | Click on Keychain Access, and you'll see
all of the current certificates that are
| | 01:29 | currently installed.
| | 01:30 | What we want to do is we want to make a
request, so I can click on Keychain Access,
| | 01:36 | I could choose Certificate Assistant,
and I can say Request a Certificate From a
| | 01:41 | Certificate Authority.
| | 01:43 | So I'll do that, and then you
have to type in your email address.
| | 01:46 | Now I need you to use exactly the same
email address that you used with Apple to
| | 01:52 | register as an Apple developer.
| | 01:54 | So in this case, I'm using my email
address, and then for your Common Name, you
| | 01:59 | can type in your name here.
| | 02:01 | And now what you want to do is you want
to save the CSR file directly to your disk.
| | 02:06 | So click Continue and you can just go
ahead and save that on the Desktop to make
| | 02:11 | it easier so you know right
where it is, so I'll click that.
| | 02:14 | And you'll see it will then create the
certificate request on the disk here, and
| | 02:20 | you should also see what it's done
here is if you look at the login, it's
| | 02:24 | actually created both a private key
and a public key in your login keychain.
| | 02:30 | And those are now of course associated
with your certificate request file. Okay.
| | 02:35 | So now go back to the Developer Center
in Apple, so get to your iOS Dev Center,
| | 02:41 | and you'll see everything available
here in terms of developing for iOS 4.
| | 02:45 | You'll see all of the different
libraries and how to actually develop those
| | 02:49 | apps, but then you could just log in,
and I'll log in with my email address.
| | 02:56 | I'll type in my password.
| | 02:57 | And you should see that there's
a setting in here called the iOS
| | 03:01 | Provisioning Portal.
| | 03:03 | So here's the iOS Provisioning Portal,
and then you should see there's a setting
| | 03:08 | in here called Certificates,
so go ahead and click on Certificates.
| | 03:12 | And the next step is to simply
just click on Request Certificate.
| | 03:16 | It should say you currently
don't have any certificates.
| | 03:19 | So click here and then just simply
Choose File down here because we've already
| | 03:23 | done all those steps so
that they're documenting there
| | 03:26 | and then browse out to your Desktop
and you should see your CSR file, your
| | 03:30 | certificate request.
| | 03:32 | Go ahead and click Choose and then
click Submit, and this will submit this
| | 03:38 | request directly to Apple.
| | 03:40 | So you should be able to
click on Certificates again--
| | 03:43 | I just refreshed here--and you'll see now
that Apple has issued a new CER file for me.
| | 03:49 | So here I'll just click Download and
I'll download that CER file, so let me just
| | 03:55 | go ahead and look at it in the Finder here.
| | 03:58 | And again, just to make life easier,
what I will do is I will copy this to my
| | 04:05 | Desktop, okay, just so I know right where it is.
| | 04:08 | So there's my developer_identity.cer.
| | 04:11 | Okay, so now I will switch back to
Keychain Access and import this certificate.
| | 04:16 | I'll go to File > Import Items. Then I'll
select the certificate that I saved on
| | 04:21 | the Desktop earlier, and I'll
click Open. Now it's here.
| | 04:26 | To make it a little easier to see, I'll
make sure I'm in the login keychain and
| | 04:30 | I'll select the Certificates category. Okay.
| | 04:34 | So now you'll see once you have the
private key underneath your Developer
| | 04:38 | Certificate here, what we need to do
in order to be able to create an AIR
| | 04:43 | application utilizing the
certificate is we need to actually export this
| | 04:47 | certificate, this private key, as a P12 file.
| | 04:52 | So highlight the private key here and
just simply click on Export, and I'm going
| | 04:58 | to just export this directly to the
Desktop, and I will just call this James
| | 05:05 | Talbot_cert, and I'll export it as a P12
file that you see here. Okay, and you'll
| | 05:12 | see again it should be
associated with your Developer Cert.
| | 05:16 | Go ahead and click Save.
| | 05:18 | It should prompt you to create a
password, so I'll choose a password. Okay.
| | 05:25 | In our case, we're just doing testing, so it
doesn't have to be too strong here. I'll click OK.
| | 05:30 | Then you'll need to put in the password
to your login keychain, which should be
| | 05:36 | the same as the password to your computer.
| | 05:39 | Then you'll type in your
password for your login.
| | 05:42 | I'll go ahead and click OK.
| | 05:45 | And you should see this creates a
P12 file that's associated with your
| | 05:49 | Developer Certificate.
| | 05:51 | So now you can use this to sign
applications or to transfer the key and
| | 05:56 | certificate in this key store
to another key store. Okay.
| | 06:00 | So now that we have this P12 file, in
the rest of this chapter, we're going to
| | 06:05 | talk about how to actually build a
Flash Builder application, and we're going to
| | 06:10 | talk about how to use this P12
file to publish it to an iPhone.
| | Collapse this transcript |
| Creating an Apple Developer Certificate on Windows| 00:00 | In this movie, we are creating a Developer
Certificate to install our apps on an iPhone.
| | 00:05 | We are using the Windows
operating system to do this.
| | 00:08 | If you are doing this on a Windows
machine, you should not need to watch the
| | 00:12 | previous video, which describes
the process of creating a Developer
| | 00:16 | Certificate on a Mac machine.
| | 00:19 | In order to set up an iPhone for
development with Flex, we must be a registered
| | 00:25 | iOS Apple developer.
| | 00:28 | So you can just browse to
developer.apple.com and click on the iOS Dev Center
| | 00:34 | and register as an iOS developer.
| | 00:37 | In this case, you'll see I am already
logged in because I am already an iOS
| | 00:40 | developer, and then what we need to
do is we actually need to create a
| | 00:45 | certificate request signing file,
which will then obtain an iPhone Developer
| | 00:51 | Certificate with a .cer extension.
| | 00:54 | Then we need to take this certificate
and actually export it as a P12 file and
| | 01:00 | be able to then install our Flex
applications on an iPhone utilizing this.
| | 01:06 | Now, on Windows we actually have to
use a separate tool called OpenSSL to
| | 01:12 | be able to do that. So, you
can just browse out here to
| | 01:16 | openssl.org/related/binaries.html and
you'll see you get to this OpenSSL for Windows.
| | 01:26 | So go ahead and click on OpenSSL for
Windows and download the appropriate
| | 01:30 | version of the OpenSSL.
| | 01:34 | So, for example, if we are on a Win32 bit
operating system, you might install this one.
| | 01:40 | If you're on a Win64,
you might install that one.
| | 01:43 | Now, you can go ahead and try to do the
installation and if you get errors when
| | 01:47 | you're doing the installation, it
means that you don't have the Visual C++
| | 01:51 | Redistributables installed.
| | 01:54 | So you'll have to go out here and find
the appropriate version of the Visual C++
| | 01:58 | libraries to go ahead and install that.
| | 02:01 | That should get rid of any error
messages when you actually try to run OpenSSL.
| | 02:06 | So again, if you know you don't
have the Visual C++ libraries,
| | 02:10 | I would go ahead and just install
these first and then install OpenSSL.
| | 02:15 | So that will enable you to actually be
able to create these certificate files
| | 02:20 | on a Windows machine. Okay.
| | 02:22 | So, now once you have everything installed,
let's go ahead and open up a command line.
| | 02:28 | So I'll just go to the command prompt
here, and I'm on Windows 7 here so I can
| | 02:32 | just type in 'cmd' to open up our command
prompt, and I will cd out here to my root directory.
| | 02:38 | I am going to just type in 'dir' here, and
I'll see all the directories at my root
| | 02:43 | directory, and you should
see your OpenSSL directory.
| | 02:46 | Now, I installed the 64-bit version, so I am
just going to cd to OpenSSL-Win64, and
| | 02:56 | you'll see the OpenSSL directory.
And then I will cd to the bin directory here,
| | 03:02 | and now what I can do is I can
actually create a private key simply by
| | 03:07 | utilizing this command.
| | 03:08 | So I am going to just type in 'openssl,'
and I'll type in 'genrsa' like so, and I will
| | 03:18 | say '-out,' and then I will say
'mykey.key,' and I will say '2048.'
| | 03:28 | And you'll see that will go
ahead and generate me a private key.
| | 03:32 | To utilize this with Apple, it has to
be 2048 bit, which is why I am putting
| | 03:37 | that in there, so you'll see that. We'll save that.
| | 03:39 | And again, if you're using OpenSS,L
remember, if you are getting any error
| | 03:43 | messages--thankfully I didn't in
this case--but don't ignore those error
| | 03:47 | messages, okay, because the files may not
be usable, even if it still outputs the
| | 03:51 | files. So, you may want to just check the syntax
of what you typed in and run the command again.
| | 03:57 | Okay so now what we are going to do is
we are going to create the request file
| | 04:00 | that Apple needs to
actually generate the certificate.
| | 04:03 | So I'm just going to type in 'openssl.'
I am going to type in 'req,' and I am going
| | 04:12 | to say '-new -key' and I will say
'mykey.key,' and then I will say '-out,' and then I
| | 04:27 | will simply say
'CertificateSigningRequest,' and then I will say
| | 04:37 | '.certSigningRequest -subj,' and then you
will have to put in your email address.
| | 04:51 | You would say '-subj,' and then I'll type
in a quote and I'll type in '/emailAddress'
| | 04:58 | with a forward slash just like that,
is equal to, and then this is the email
| | 05:04 | address that you registered with Apple.
| | 05:06 | Apple charges developers $99 to
register for the developer program, and this
| | 05:11 | needs to be the same email address that
you registered with Apple. So in my case,
| | 05:15 | I'll type in the appropriate email address.
| | 05:19 | I'll say comma, okay, and then CN should
be your full name, so in this case mine is
| | 05:26 | James Talbot, and I'm doing this in the US.
| | 05:30 | So also specify C = US and then end your quotes.
| | 05:37 | Obviously, if you are in a
different country, you would put in a
| | 05:39 | different setting there.
| | 05:41 | Okay, so make sure you have replaced
those with your own values that you've
| | 05:45 | registered with Apple. So, press Enter.
| | 05:48 | You see it says done, and it
generates us a certificate request file.
| | 05:53 | So now, let's upload that to Apple.
| | 05:57 | So what I am going to do is I am going
to open up my browser and I'm going to go
| | 06:01 | back to developer.apple.com.
| | 06:07 | I am going to go to my iOS Dev
Center here, and I'm going to go to my
| | 06:12 | Provisioning Portal here.
| | 06:14 | Okay, now go ahead and choose
Certificates here, make sure you log in, and choose
| | 06:20 | Request Certificate. And this gives you
step-by-step directions on how to do this
| | 06:25 | on a Mac, but we did it on Windows
here, so I should be able to just click
| | 06:29 | Choose File, and I should be able to
browse directly to my C drive here and
| | 06:35 | locate my OpenSSL directory.
| | 06:38 | So here's my C drive.
| | 06:41 | There is OpenSSL-Win64, and I placed
all of these files in the bin directory.
| | 06:48 | Okay, and what we should locate is there
should be a CSR file in here that we just created.
| | 06:54 | It should have the extension .csr.
| | 06:58 | Now if I can just find it, and of
course right the name of our file was
| | 07:04 | CertificateSigningRequest.
| | 07:08 | So you'll see right here we have our
CertificateSigningRequest file, and I should
| | 07:13 | be able to select that.
| | 07:14 | That's what I just created.
Click Open and then click Submit,
| | 07:19 | and this should submit to Apple.
| | 07:22 | It should say, "Pending issuance."
| | 07:25 | And if you just refresh your browser
by clicking Certificates, you should see
| | 07:30 | that that certificate file has
now been issued. Okay, great!
| | 07:36 | So, let's go ahead and download this
certificate file, so you will see that
| | 07:41 | it's created that there, and again, after you
create that you've seen that it's added it in here.
| | 07:46 | So let's just click here, and what we
are going to do is we are going to have to
| | 07:50 | convert this into a P12 file in order
to utilize this with our development.
| | 07:54 | So here I am just going to click on
Download, and let's just make this easy and
| | 07:58 | put it in the bin directory of our
OpenSSL since we are going to need to convert
| | 08:03 | this into a P12 file in order to
actually produce a Flash application that we
| | 08:09 | can run on the iPhone.
| | 08:11 | So there is our developer identity.
| | 08:13 | What I will do is just click under this
Google Chrome toolbox here and click on
| | 08:18 | Downloads, and I will click on here's
my certificate. I will just say Show in
| | 08:23 | folder, and let me just take this
certificate, and what I'll do is just click Copy,
| | 08:29 | and I will just simply copy this over to
my bin directory in OpenSSL-Win64. And I
| | 08:39 | am going to paste that in there, okay.
And I will just say Copy and Replace if
| | 08:45 | that's already there; you'll
just probably just copy it in there.
| | 08:48 | So now in order to convert this into a
P12 file, we have to follow a few steps.
| | 08:55 | We first have to convert it into a PEM
file, and then we have to take that PEM
| | 09:00 | file and we have to convert it into a P12 file.
| | 09:03 | So we're going to use OpenSSL again.
| | 09:06 | So just type in 'cmd' to get to the command
line and browse back to your OpenSSL directory.
| | 09:12 | So I will go to the root, and I'll just
type in 'cd OpenSS-Win64,' and I will say 'cd
| | 09:22 | bin,' and I will switch to my bin directory.
| | 09:25 | And then to actually do the conversion
here, I will just type in 'openssl x509,'
| | 09:35 | and then I'll say '-in' and we are going to
reference this certificate that Apple gave us.
| | 09:41 | Remember, we copied in that directory,
that's in 'developer_identity.cer.' Then I
| | 09:49 | will say '-inform DER,' and then we
are going to produce the PEM file here.
| | 09:56 | So I will say '-out developer_identity.pem,'
and then I will say '-outform PEM' and
| | 10:13 | that will produce a PEM file. Okay.
| | 10:18 | Now what we need to do is we need to
take this PEM file and we actually need to
| | 10:25 | again convert it into a P12 file.
So, let's type in 'Openssl pkcs12 -export -inkey
| | 10:44 | mykey.key -in developer_identity.pem
-out,' and I'll say 'iphone_dev.p12.'
| | 11:07 | Now it's going to ask me for the
password that I want to create for this new P12
| | 11:13 | file, so type in a password.
| | 11:19 | It should verify that, okay. Enter it
again, just to make sure that you typed that
| | 11:24 | in correctly, and it should now
create that p12 file with that password.
| | 11:33 | Okay, so now if you just go out to your
computer, you go to your C Drive, you go
| | 11:39 | to OpenSSL, and we go to bin,
| | 11:42 | you should see that you now
have a P12 file called iPhone_dev.
| | 11:47 | We can see it was created at this time,
and you can see right here, this is what
| | 11:51 | we can use to develop our iPhone
applications with Flash Builder.
| | 11:56 | So now, in the rest of the chapter, we
are going to learn how to take this P12,
| | 12:00 | file set up a provisioning profile, and
be able to actually publish applications
| | 12:06 | directly to our iPhone.
| | 12:09 | So you're not able to publish to the
iPhone without setting up this P12 file
| | 12:14 | from the command line here.
| | Collapse this transcript |
| Provisioning an iPhone and installing and testing an app on an iOS device| 00:00 | In order to publish an application to
an iPhone, we will need a P12 file and a
| | 00:05 | mobile provisioning profile.
| | 00:08 | We have already explored how to create
the P12 files in the last video and in
| | 00:13 | this video, we will
create a provisioning profile.
| | 00:16 | To do that, you do that at the Apple
Developer Center and you use Flash Builder
| | 00:21 | to then publish the application to an IPA file.
| | 00:25 | Now, we will have to install the IPA
file directly to iTunes, and we move it
| | 00:30 | into our iTunes Library, and then we sync with
the device to actually install it on the iPhone.
| | 00:35 | We can also take that IPA file and
upload it directly to Apple, so that they can
| | 00:40 | include it on the App Store
and they can approve the app.
| | 00:42 | So let's go ahead and explore how to do this.
| | 00:45 | So the first step is just go to
developer.apple.com, click on the iOS Dev Center,
| | 00:52 | and you'll see here that I would have to
log in with your Apple credentials, so in
| | 00:57 | this case I just have logged in as
James Talbot, and you can see that.
| | 01:00 | So then click on your iOS provisioning
profile here, and of course we already
| | 01:05 | have our certificate set
up from previous videos.
| | 01:08 | Let's add in a new device.
| | 01:10 | So now in order to add a device, plug your
device into your computer and open up iTunes.
| | 01:17 | So I have used the USB cable, I have
plugged in my iPhone4 here, and I am going
| | 01:22 | to go over to iTunes.
| | 01:23 | So you will see once you click on the
device over here, it defaults to where
| | 01:27 | it say Serial Number.
| | 01:28 | Click on the serial number and it
should tell you the UDID of the device.
| | 01:33 | This is what Apple needs in
order to provision your device.
| | 01:37 | So click Edit > Copy and just copy this
UDID over to your clipboard and open up
| | 01:44 | your web browser and then just click Add,
and we will just enter this in as Lynda
| | 01:52 | iPhone 4. And then I'll take my UDID
and just paste that right in there, and
| | 01:59 | then I'll just click Submit, and
that should add a new device here.
| | 02:04 | You can see in this case I can
register up to a hundred devices per developer,
| | 02:08 | and you'll see that that's added in.
| | 02:10 | Now, the next step is to
create an application ID.
| | 02:14 | So go to your App ID section and just
click on New App ID, and let's give this a name.
| | 02:22 | So I'll call this lyndaiphone,
okay, so this is for my provision here.
| | 02:29 | And then again what I'm going to do is
again we will just choose Generate New
| | 02:33 | from my keychain and then for my
Identifier here, let's make this match or
| | 02:38 | Hello World application.
| | 02:40 | So I'm just going to say
com.lynda.HelloWorld, as you see there, and then I'm
| | 02:48 | going to click Submit, and
that should create a new App ID.
| | 02:54 | Then once I've done that, I'm
going to simply just create a new
| | 02:59 | provisioning profile.
| | 03:01 | So I am going to click here, and I can
say New Profile, and I will give this a
| | 03:08 | profile name, so we'll call this iPhone4Profile.
| | 03:14 | I'll use this certificates
that I have already created.
| | 03:17 | I will select my App ID, which is my
lyndaiphone, and we will choose this for my
| | 03:22 | device that I've already added in.
| | 03:25 | So now I will simply click on Submit,
and you should see that it will go out
| | 03:30 | and again the status is currently
Pending for my provisioning profile, so I
| | 03:35 | will click here under Provisioning,
and I will click on Download to actually
| | 03:40 | download this, okay.
| | 03:42 | Again, I will just click on my
Downloads folder in my browser, and you'll see
| | 03:46 | that this created a new mobile provision file.
| | 03:50 | Let me show that in the folder here.
And you'll see I have my iPhone for mobile
| | 03:55 | provision and I also have my developer
identity, but let's just take this and I
| | 04:02 | will just simply copy this, and I will
put this provisioning file on my Desktop
| | 04:06 | just so I can easily remember that.
| | 04:09 | I'll close off iTunes here and put this
provisioning profile right here on the desktop.
| | 04:14 | Now that we have our provisioning
profile and we have our certificate file,
| | 04:20 | let's go ahead and open up Flash
Builder and go back to the HelloWorld
| | 04:25 | application that we originally built for iOS.
| | 04:29 | So here I'm opening up Flash Builder,
and you'll see Flash Builder open up, and
| | 04:33 | your HelloWorld project from your
earlier movie should still be here.
| | 04:36 | So I am going to open up the
HelloWorld project, and I am going to go to the
| | 04:40 | source directory of course, and you'll
see that of course we have our views and
| | 04:44 | our ViewNavigatorApplication. And let's
go ahead and actually test this and run
| | 04:49 | this directly on our
device to generate an IPA file.
| | 04:53 | So we are going to have to
set up a run configuration.
| | 04:56 | So click here under Run
Configurations, and we have already of course talked
| | 05:00 | about how to test it on the Desktop,
but now let's test this actually on the device.
| | 05:05 | So I am going to say On Device, and I can
package this up in some different ways here.
| | 05:10 | I can either package it up as Standard
packaging--the application performance
| | 05:14 | will be very similar to what it
would be like in the real world.
| | 05:17 | I can take this and I can upload
this IPA file that will be produced.
| | 05:21 | I can upload it directly to the Apple App
Store and have Apple approve this for distribution.
| | 05:26 | I'm able to do that. Or I can click on
Fast, and this mean that the packaging
| | 05:30 | will take just a couple of
seconds, but the application will run
| | 05:33 | significantly slower than normal.
| | 05:35 | So generally, you want to do Standard.
| | 05:37 | For our purposes, just to see how this
works, I'll package it up fast because we
| | 05:41 | are doing training here.
| | 05:42 | But under the Packaging
settings, let's point this,
| | 05:46 | we are going to need to point this
to our P12 file and to our mobile
| | 05:49 | provisioning profile.
| | 05:51 | So go ahead and click here and choose
your certificate, and you remember I did
| | 05:55 | this on the Windows platform. On the
Mac yours might be a little bit
| | 05:59 | different. But I put mine under
C/OpenSSL-Win64/bin, and you'll see the
| | 06:06 | iphone_dev certificate that you created earlier.
| | 06:09 | So here's the iphone_dev. Click Open
and then choose your provisioning file, and
| | 06:15 | your provisioning file is located on the
desktop, so that we could find this easy,
| | 06:20 | and here's our iPhone4 mobile
provisioning file. And then all you have to do is
| | 06:26 | click on OK right here and it will
update those, and then you can click Run and
| | 06:32 | what it should do is it should generate
us an IPA file in our bin-debug folder.
| | 06:39 | So we should see, it will
be in that bin-debug folder,
| | 06:42 | it's going to prompt us for
the password for our certificate.
| | 06:45 | So type in your password that you
created earlier for that certificate, and you
| | 06:50 | should see it goes ahead and it builds
an actual IPA file and places that IPA
| | 06:56 | file in your bin-debug folder.
| | 06:58 | So you'll see that, and now it's easy enough to
actually add this directly into our library.
| | 07:05 | So what I am going to do is I
am going to take this IPA file.
| | 07:08 | Just so I have easier access to it, I am
just going to copy my IPA file, and I'll
| | 07:12 | put that IPA file on my desktop.
| | 07:14 | So there is my HelloWorld.ipa file.
| | 07:17 | I'll open up iTunes, and the easiest
way to actually test on your device is to
| | 07:23 | just add it to your library.
| | 07:25 | So just click File > Add File to Library
and scroll down here, and you should see
| | 07:31 | your HelloWorld.ipa file. Okay, and you'll
see that of course this is an app here.
| | 07:38 | Now if you click on your iPhone here,
and then I will click on Apps inside of
| | 07:43 | iTunes, and then I'll just make sure
that it's going to actually sync this app
| | 07:48 | now that my audio phone is plugged in,
and this should install this HelloWorld.
| | 07:52 | Let me just check that off
here, and I'll just click on Apply.
| | 07:57 | And what will happen is it now
installs the HelloWorld-debug application here
| | 08:03 | directly on my iPhone, and I can test it and
see how the application performs on the device.
| | 08:11 | Once iTunes is done syncing, you will
see the Hello...debug icon on your phone.
| | 08:17 | Now notice there's no
graphic yet associated with it.
| | 08:20 | We will learn how to do that in a later
movie. But I can click on the icon here
| | 08:25 | and you'll see my HelloWorld application.
| | 08:28 | So you have learned how to build an
application inside of Flash Builder, how to
| | 08:33 | publish that to an iPhone by
setting up a Developer Certificate, and a
| | 08:37 | provisioning profile and this is the
technique you will use throughout the rest
| | 08:41 | of the course to test your
applications on the iPhone.
| | Collapse this transcript |
|
|
2. Configuring Flash Builder for Building Mobile AppsCreating a new ActionScript-only mobile project| 00:00 | Building applications with pure
ActionScript can make it feel like we are
| | 00:04 | programming closer to the metal.
| | 00:06 | A pure ActionScript 3 project uses only
ActionScript and does not use the Flex
| | 00:11 | framework, but it still does use ADT,
which is the AIR compiler, to create the
| | 00:16 | final APK or IPA file.
| | 00:20 | The result is a very compact file that
contains just the code it needs to get the job done.
| | 00:25 | There is, however, of course a price to pay.
| | 00:28 | There are no developer conveniences,
such as data binding, layout manager, or
| | 00:33 | even MXML, and it generally takes us a
lot more effort to make a completely
| | 00:37 | polished application.
| | 00:39 | Flash Builder 4.5 provides a brand-new
workflow for building mobile applications,
| | 00:44 | making it much easier to
develop and test applications.
| | 00:48 | A new project wizard called
ActionScript Mobile Project takes a lot of the
| | 00:52 | pain out of setting up your ActionScript-only
projects and points us in the right direction.
| | 00:57 | So I am just going to click File > New,
and I am going to say to say ActionScript
| | 01:01 | Mobile Project right here, and this will
enable me to create an ActionScript-only
| | 01:06 | project targeted directly for mobile devices.
| | 01:09 | So I'll call this project
ActionScriptMobile, and I'll use the default Flex SDK,
| | 01:18 | and I'll click Next, and then I'll
choose the platforms that I want to target.
| | 01:22 | And in this case I'll just simply say
I am going to target Google Android, just
| | 01:26 | keep it simple here.
| | 01:28 | And I'll say INTERNET, WRITE_
EXTERNAL_STORAGE, READ_PHONE_STATE.
| | 01:31 | I can of course set up the permissions
that will be written to the manifest file.
| | 01:35 | And then I'll click Next, and you'll
see, it's going to simply build me an
| | 01:40 | ActionScriptMobile.as file, and of course
it will indicate an application ID that
| | 01:45 | will be written to my AIR descriptor file.
| | 01:47 | So now I am going to click Finish, and
you'll see that my ActionScript class only
| | 01:52 | extends Sprite, which is very high up
on the display-object inheritance list.
| | 01:58 | So it's a very basic display-object
building block, and you'll see that.
| | 02:02 | It does add in some
mobile-specific functionality here.
| | 02:06 | For example, it says stage.align =
StageAlign.TOP_LEFT, so that would mean it
| | 02:11 | will support auto orientation.
| | 02:14 | And you'll see that if the user of
course changed their device to a horizontal
| | 02:18 | or to a vertical mode,
you'll see that that supported.
| | 02:20 | And some other things you may want to
add as a developer is of course most
| | 02:24 | devices support multi-touch, so you
might want to add in Multitouch and you can
| | 02:29 | just say Multitouch.inputmode =
MultitouchInputmode.TOUCH_POINT, and that will
| | 02:43 | enable multi-touch in your applications.
| | 02:45 | And you may want to set the stage state
to display full screen, for example, and
| | 02:49 | I could say stage.displayState =
StageDisplayState.FULL_SCREEN_INTERACTIVE, and
| | 03:04 | I can add this to my ActionScript project.
| | 03:08 | So you'll see that I get some little
errors here in Flash Builder 4.5, and that
| | 03:12 | just means that I need to
add the import statement.
| | 03:15 | So I'll place my cursor at the end of
where I need the import statement here,
| | 03:19 | and I can simply just click on
Ctrl+Space, and it will automatically add in the
| | 03:25 | import statement for me.
| | 03:28 | So I'll do the same thing here for the
StageDisplayState, and you'll see that it
| | 03:32 | adds those imports automatically, just
by clicking on Ctrl+Space. And you will
| | 03:36 | also see that I need to add
in an import for Multitouch,
| | 03:40 | so I'll go here to Multitouch and also
add in a Multitouch here, and you'll see
| | 03:46 | that it adds that in
directly to my ActionScript project.
| | 03:50 | So I'll click Save, and now I have the
foundation of an ActionScript project.
| | 03:55 | Of course it's now up to you as a
developer to code and make that magic happen.
| | Collapse this transcript |
| Understanding device configurations and debugging| 00:00 | For initial debugging, Flash Builder
actually lets you run and debug the
| | 00:05 | application on the device by
installing it on the device.
| | 00:10 | The device can then communicate back
with the computer, and you can actually see
| | 00:14 | what's happening on the device
when you launch into Debug mode.
| | 00:18 | So this is very, very useful, and the
device can connect back to the computer
| | 00:22 | in two different ways:
| | 00:24 | it can either utilize a wireless network,
or it can connect back via a USB cable.
| | 00:30 | So the trick with the wireless
network is both the computer and the phone
| | 00:34 | need to be on the same wireless
network and from my experience, it has to be a
| | 00:40 | very local network.
| | 00:42 | So for example, it won't work on many
corporate networks, even if the computer
| | 00:46 | and the phone are connected
at the same corporate networks.
| | 00:48 | I've had problems when I've been in
hotels trying to connect to a hotel network.
| | 00:52 | And in some cases if I need to debug
over a network, I'll just bring my own
| | 00:56 | wireless router and set up my own
network, for example, in my hotel room.
| | 01:01 | That makes it a bit easier.
| | 01:02 | But you can debug also just by
plugging it into the USB cable--and that's
| | 01:06 | generally the preferred recommendation.
| | 01:09 | So let's click on Window, and let's
look at some of the Preferences here for
| | 01:13 | our target platform.
| | 01:14 | So you'll see under Flash Builder
we have a setting here called Target
| | 01:18 | Platforms and if you click here, you can
simply just say how you want to embed
| | 01:23 | your network interface.
| | 01:24 | Okay, so this means that again,
you can debug over the network.
| | 01:28 | You can either have Flash Builder do
this for you automatically or you can
| | 01:31 | choose to actually embed the network
interface directly into the IPA or the APK file.
| | 01:38 | So you do have that option. And again,
you just want to ensure that the selected
| | 01:43 | network interface is accessible from the device.
| | 01:46 | If it can't find the network interface,
Flash Builder will actually display a
| | 01:51 | dialog that requests the IP address of the host
machine, so then you will have to enter that in--
| | 01:56 | this makes it so you don't have to.
| | 01:59 | Okay, and now let's just talk a little
bit about debugging, and you'll see we
| | 02:03 | have our HelloWorld application.
| | 02:05 | Let's just again have
something to actually debug,
| | 02:08 | so I am going to go into my first view
here from what we've created before, and
| | 02:11 | you'll see of course we have the
Label control that says Hello World.
| | 02:14 | I am going to go ahead and add in a
script block, so I'll say fx:Script, and
| | 02:21 | let's just create a very simple method.
| | 02:23 | I'll say private function init(),
and then I'll just simply say void, and what
| | 02:29 | I'll do is I'll add a trace statement in here.
| | 02:33 | So I'll just say trace ("init method
called") and we'll talk about how to send
| | 02:39 | this information back to the
debugger directly from the mobile app.
| | 02:43 | So here I'll say trace ("init method
called"), and then of course I need to
| | 02:46 | call that init method,
| | 02:48 | so I'll add a CreationComplete to my
View and I'll just say init, just like that.
| | 02:55 | So now I'll hit Save.
| | 02:58 | I will save my HelloWorldHomeView,
I'll call my init method called, and now I
| | 03:02 | want to just set up a
debug launch configuration,
| | 03:06 | so I'll click right here.
| | 03:08 | I'll say Debug Configurations.
| | 03:10 | I'll choose my Mobile Application here
and I'll build a new debug configuration.
| | 03:16 | I am going to say HelloWorld.
| | 03:16 | I am going to say HelloWorld.mxml.
| | 03:18 | We are targeting Goggle Android for now.
| | 03:21 | Then I'll say On device, and here I have a
choice of how I want to do the debugging.
| | 03:26 | Do I want to do it via a wireless
network, or do I want to do it via USB?
| | 03:30 | Well, I currently have my device
plugged in via USB, so we'll just make it
| | 03:34 | easier, and that way I won't have to mess
around with actually making sure that
| | 03:37 | it's connected to right wireless
network, and the network interface is embedded.
| | 03:41 | So we'll just do it via USB.
| | 03:43 | I'll click Apply, and then I'll click
Debug, and it will launch into Debug mode.
| | 03:49 | So here I'll just manually
switch into my Flash Debug.
| | 03:53 | It will install the application on the
device and from the device, you should see
| | 03:59 | that it will actually call the init
method, and you'll see that trace is sent
| | 04:05 | back here. And I can utilize the
debugger to see what's going on within my
| | 04:09 | application that's actually
running on the mobile device.
| | 04:13 | The debugging capabilities inside of
Flash Builder are very powerful, and you have
| | 04:18 | the ability to actually see
what's happening on the device.
| | 04:22 | Also, if you're on an Android device,
of course you can see everything
| | 04:26 | that's happening here.
| | 04:27 | I don't actually need to go out to
the command line at all, but here I'll
| | 04:31 | just click on Computer.
| | 04:33 | I'll choose my C drive.
| | 04:36 | I'll go to my Program Files (x86).
| | 04:39 | I'll choose Android/android-sdk,
and then I'll open up my tools.
| | 04:45 | I'll choose my ddms tool here, just
double-click on it, and I can also see
| | 04:50 | inside of this Android Debugging tool,
| | 04:53 | I could see my device and I could see
everything that's happening on my device
| | 04:57 | utilizing it here for my Android tool
as well, and see what's happening as I am
| | 05:03 | running that application there.
| | 05:04 | So there are lots of debugging tools
available to us as mobile Flex developers.
| | Collapse this transcript |
| Converting an app project from one device to another| 00:00 | It is possible to build a Flex mobile
project and deploy that on multiple devices.
| | 00:06 | Many times what you'll want to do of
course is you'll want to create a separate
| | 00:09 | project for your Android phones,
| | 00:12 | you'll want to create a separate
project for your iPhones, and then you can use
| | 00:16 | project libraries to share the code
amongst those. But the advantage of having
| | 00:21 | separate projects is you can have
separate views, and you can really take
| | 00:25 | advantage of the form factor of each of them.
| | 00:27 | So, for example, on an iPhone, you
might take advantage of being able to have
| | 00:32 | the onscreen elements for navigation
and on the Android, you might be able to
| | 00:36 | use the buttons there.
| | 00:37 | So that makes a big difference, and it's very
easy to take advantage of the form factors.
| | 00:42 | However, there are times when there is
enough similarities and you can simply
| | 00:46 | just add conditional logic to determine
what platform you are on, where you want
| | 00:50 | to convert the whole
project into another platform.
| | 00:54 | So for example, I have this
HelloWorld project that we've already built, and
| | 00:58 | currently this is an Android project.
| | 01:01 | If I want to convert this into an iOS
project so I can deploy to both platforms,
| | 01:06 | I can simply just click on Properties,
go to my Flex Build Packaging here, and I
| | 01:12 | can choose Apple iOS, and I can
just say Enable this target platform.
| | 01:18 | Of course I will still need to set up
my certificate and my Provisioning file,
| | 01:22 | but now I'll be able to also publish
directly to iOS devices as well as Android devices.
| | 01:29 | So Flex mobile projects can have it set
up for both platforms and even for the
| | 01:35 | BlackBerry tablet OS as well.
| | 01:38 | In a later movie, what we'll talk about
is we'll talk about how to actually set
| | 01:42 | up our libraries so that we can have a
desktop application, a web application,
| | 01:48 | a mobile application, maybe even a
tablet application, all sharing certain code,
| | 01:54 | and then we will be able to take
advantage of the form factor of each of those
| | 01:58 | by having separate projects,
and we'll be able to share it that way.
| | 02:01 | So we will talk about that in a later
movie, but that's how you can change from
| | 02:05 | one project type to another.
| | Collapse this transcript |
| Using the Android Emulator| 00:00 | The Android SDK ships with an emulator
that actually simulates an Android phone.
| | 00:05 | It's a virtual mobile device
that runs on your computer.
| | 00:08 | The emulator lets us prototype, develop,
and test Android applications without
| | 00:12 | using the physical device.
| | 00:14 | The Android Emulator mimics all of
the hardware and software features of a
| | 00:18 | typical mobile device.
| | 00:19 | It provides a variety of navigation and
control keys which you can press using
| | 00:24 | your mouse or keyboard to
generate events for the application.
| | 00:28 | The Emulator also provides a screen
in which your application is displayed
| | 00:31 | together with any other Android
applications that are running.
| | 00:34 | You can model the application easily by
creating an Android Virtual Device, and
| | 00:39 | this allows us to specify which Android
platform we're using, such as Gingerbread
| | 00:44 | or Honeycomb or Froyo, as well as the
hardware options and emulator skins.
| | 00:49 | To run your AIR application on the device,
we actually have to install Adobe AIR.
| | 00:55 | One of the limitations of the emulator
is that it doesn't have access to the
| | 00:58 | Android Marketplace, so we have to manually
install it, and I'll walk you through that.
| | 01:03 | It is important to note that
applications typically run much slower on the
| | 01:07 | emulator than on the device itself,
and the emulator doesn't support some things
| | 01:11 | like the Market, Bluetooth,
or making actual phone calls.
| | 01:15 | So let's create a virtual device, and
I'm going to go to the directory where I
| | 01:19 | installed my Android SDK.
| | 01:21 | So this is a 64-bit Windows machine,
so it installed to Program Files
| | 01:25 | (x86)/Android/android-sdk,
and you'll see I have my SDK Manager here.
| | 01:32 | Let me just double-click on that.
| | 01:34 | I can cancel off of this.
| | 01:35 | It's just downloading and checking that,
so I'll just cancel off of that, and
| | 01:40 | I'll go here to Virtual devices.
| | 01:42 | So I'll just click on New to
create a new device, and I'll type in
| | 01:46 | 'virtualPhone' to name my device.
| | 01:49 | And here's where I can
indicate the Android operating system.
| | 01:52 | So for Android AIR is only supported in
Froyo or 2.2 and above, so let's choose 2.2.
| | 01:59 | I could also of course test my
application on Honeycomb or Gingerbread, but here
| | 02:04 | I'll just choose 2.2.
| | 02:05 | I can indicate the size of my SD
card, which of course varies among the
| | 02:08 | devices, so I'll say 1024.
| | 02:11 | I can indicate the skin that I want to use.
| | 02:13 | You'll see there are multiple skins.
| | 02:14 | We'll just choose a WVGA800.
| | 02:17 | And then I can indicate what hardware
functionality I want my device to have.
| | 02:21 | So let's definitely add SD Card support,
and then you'll also see that I can add
| | 02:26 | things like audio playback support.
| | 02:29 | I can add track-ball support, camera support,
GPS support, and all that kind of thing.
| | 02:34 | Now just a word of caution there: the
more elements you add here, the longer it
| | 02:39 | will take to create your Android Virtual
Device and the slower that it will run.
| | 02:43 | So now click on Create AVD, and you'll see
this will create your Android Virtual Device.
| | 02:51 | You'll see that it's created the
Android Virtual Device, so now you could just
| | 02:55 | click on the virtual device and choose Start.
| | 02:58 | And I'll click Launch, and this
will launch my virtual device.
| | 03:03 | You'll see here it says Android.
| | 03:05 | You'll see that I have a keyboard that I
can click on to simulate typing on the device.
| | 03:09 | You will also see that, in typical
Android fashion, we have a Home button, a MENU
| | 03:14 | context button, a Back button, and a
Search button, as well as ways to access
| | 03:19 | the camera and to turn the device on and off.
You'll see we have those buttons on our emulator.
| | 03:24 | Again, the emulator does run fairly slowly,
so it may take a little time to start.
| | 03:29 | So once it starts, I want you to just
open up a command Line, and I'm on Windows
| | 03:35 | 7 here, so I'll just type in 'cmd,'
and let's browse to our android-sdk.
| | 03:40 | So I'll type in cd, and I'll type in slash--
| | 03:44 | that will take me to my root.
| | 03:46 | And then I'll simply just type in
'cd program files (x86),' and then I'll type
| | 03:55 | in 'cd Android,' and I'll type in 'dir' and
I'll just type in 'cd android-sdk,' and
| | 04:03 | then I'll type in 'cd platform-tools,'
and this will take me to the
| | 04:09 | platform-tools directory.
| | 04:11 | One of the key commands that you'll
use in Android development is called adb.
| | 04:16 | And this command will enable us to do
things like install applications here at
| | 04:20 | the commandlLine, or it will enable us
to see the devices that are currently
| | 04:24 | attached to our computer, and we'll
be able to utilize that adb tool here.
| | 04:30 | Once you've set that up, let's
wait for our virtual device to start.
| | 04:34 | Again, as I said before, the emulator
can run fairly slowly, but it can be
| | 04:38 | invaluable for testing your
applications, so I wanted to show it to you here.
| | 04:43 | So we're starting up the Android Emulator.
| | 04:45 | You'll see here's our virtual device,
and we can navigate through the virtual
| | 04:48 | device just as we would a normal phone.
| | 04:51 | You'll see that widgets are supported.
| | 04:53 | You'll see the widgets added in.
| | 04:54 | You can see the browser is fully supported.
| | 04:57 | I can browse utilizing the device.
| | 04:59 | Again, I can also click here
and view all of the applications.
| | 05:03 | Again, it does take a little while to start.
| | 05:05 | You could see even my
widgets haven't started yet.
| | 05:07 | But here you'll see, as it starts
running a little bit longer, the
| | 05:10 | performance starts to improve.
| | 05:12 | But here are all, for example, my
applications that I can access here, and you
| | 05:16 | should see these buttons are purely functional.
| | 05:18 | So, for example, if I want to go Home,
I can just click here. And make sure at
| | 05:24 | this point that you don't have any
phones actually plugged into your computer.
| | 05:28 | So if you do, go ahead and just unplug
those, and then I want to just go back to
| | 05:32 | the command line for a second
that I had just had right here.
| | 05:36 | And then let's use our adb
tool and just type in 'devices.'
| | 05:41 | So if I type in 'adb devices,' it should
now show the list of devices that are
| | 05:45 | attached to the computer and you should
see there's an emulator device--that's
| | 05:49 | this device right here.
| | 05:50 | Our PC in this case is thinking of this
as an actual phone just like a phone is
| | 05:55 | plugged into the USB port, and I can
utilize this just as I would normally.
| | 06:00 | So this does not have access to the
Android Market, so I can't go out and
| | 06:04 | actually just download the AIR
Runtime from the Android Market.
| | 06:07 | I have to install it.
| | 06:09 | So to do that, I'm going to just go
to the Computer here, and what I'll do
| | 06:15 | is I'll go to my C:
drive and I'll go to Program Files (x86).
| | 06:19 | I'll go to Adobe here, and then
I'll go to Adobe Flash Builder 4.5.
| | 06:25 | And you'll see, under sdks, there is a
4.5.1 SDK, and then you will also see
| | 06:31 | there's a folder in here called runtimes.
| | 06:33 | So there is air, and I have to
install AIR on the emulator.
| | 06:38 | So you will see under android, there's
actually an emulator version of Adobe
| | 06:42 | AIR, and you'll see that this is an APK file.
| | 06:45 | So I'll just take this APK file, and I
will simply just copy it to my clipboard
| | 06:52 | and I will go ahead and just browse
out to my platform-tools directory.
| | 06:57 | So let me go here to my platform-tools
directory inside of my android-sdk, and
| | 07:03 | I'll just paste this APK file
here, and there's my Runtime.apk.
| | 07:10 | I'll go back to my command line, and I'll
just type in 'adb install Runtime,'
| | 07:18 | as you see there. I'll say Runtime.apk.
| | 07:24 | And what this will do is this will
install the Adobe AIR Runtime on to my
| | 07:30 | virtual device so that I can run all of
the applications that I build utilizing
| | 07:36 | Flash Builder and Flex inside of the device.
| | 07:39 | So there I just typed in adb install
Runtime.apk, and you'll see that it's going
| | 07:44 | through that process.
| | 07:46 | So now you can see that the AIR
Runtime has successfully been installed on my
| | 07:50 | virtual device, so now we can take any
APK that we built with Flash Builder and
| | 07:55 | actually install that on the
device in exactly the same way.
| | 07:59 | So go ahead and open up Adobe Flash Builder 4.5.
| | 08:02 | You should see that there's already an
APK file in your bin-debug folder, as long
| | 08:07 | as you still have your HelloWorld
application that we've been working with.
| | 08:11 | So there already should be an APK file
in there, so I'm going to go ahead and
| | 08:15 | open up Flash Builder.
| | 08:16 | And I'll just take that APK file
and copy it over to my platform-tools
| | 08:20 | directory, and we should
see that there's an APK file.
| | 08:24 | Now in real life I probably would
set up an environment variable so that
| | 08:28 | it points directly.
| | 08:29 | I'd set up a path variable so it
points directly to that platform-tools
| | 08:32 | directory, so I wouldn't have to paste
everything in that directory to use the adb tool.
| | 08:37 | But I just wanted to sort of show you
the emulator so you can add it to your
| | 08:40 | toolbox for testing.
| | 08:42 | We won't be using it much in
this series, so I didn't set up an
| | 08:45 | environment variable.
| | 08:46 | So you'll see here, here's the
HelloWorld.apk when we built our HelloWorld
| | 08:50 | Android application.
| | 08:52 | So just take this APK file and copy it
to the clipboard, and then just minimize
| | 08:57 | Flash Builder here and go back to
your platform-tools directory in your
| | 09:02 | android-sdk and paste
this here in your directory.
| | 09:08 | You'll see it says HelloWorld.apk.
| | 09:11 | And then I'm going to go
back to my command line
| | 09:13 | that's already browsed to the
platform-tools directory, and I'm just going to
| | 09:16 | type in 'adb install' and I'll say 'HelloWorld.apk.'
| | 09:25 | And that will install this HelloWorld
application on my emulator, so I can fully test it.
| | 09:33 | The only thing is is you have to
make sure that you're installing a debug
| | 09:37 | version of your APK on your emulator,
which makes sense because of course we
| | 09:42 | want to see all the
debugging capability there as well.
| | 09:46 | And again, I may have it set up,
so let's look at it on my device now.
| | 09:50 | If I click here, it should show
me the different applications.
| | 09:54 | And then you'll see your
HelloWorld-debug is installed here, so I'm going to
| | 09:58 | just double-click it and open up this.
| | 10:01 | You may see that this is a debug
version, so you'll see that AIR Debugger is
| | 10:04 | actually waiting for the
debugger to make a connection.
| | 10:07 | In this case, it's not going back to
the device because this debugger is not
| | 10:10 | actually connected to
Flash Builder at this time.
| | 10:13 | So I'm just going to click Cancel here.
| | 10:15 | This would be if we're actually testing
it on the device, and we learned how to
| | 10:18 | do that over a wireless
network in an earlier movie.
| | 10:21 | So let's look at this, and you should
see your HelloWorld application display in
| | 10:26 | your emulator, and we can now navigate
around and see what will happen if we
| | 10:31 | click on certain buttons,
| | 10:32 | if we click on the keyboard.
Of course we don't have the most detailed
| | 10:35 | application here, but this is
extremely useful for testing applications,
| | 10:41 | especially if you don't have a mobile
device and you want to test it on other
| | 10:44 | operating systems, for example,
Gingerbread, Honeycomb, so you can get an idea of
| | 10:48 | how your application will function.
| | Collapse this transcript |
| Testing an iOS app without using the iOS Simulator| 00:00 | Unfortunately, the simulator that
ships with the iPhone SDK does not work
| | 00:06 | with Flex applications,
| | 00:08 | so if you want to test your
application, there really is no substitute for
| | 00:13 | testing on the device.
| | 00:14 | Now we've already learned how to test
actually on an iPhone, and we've gone
| | 00:18 | through that process with the IPA and
installing it on the iPhone; however, we
| | 00:24 | may not have every version of
the iPhone that we need to test on.
| | 00:27 | So we may not have an iPad,
an iPhone 4, and an iPhone 3GS.
| | 00:31 | There's a great little company out
there called testflightapp.com that allows
| | 00:37 | you distribute your IPA to other
folks who may have those devices and can
| | 00:41 | assist you in testing.
| | 00:43 | So you can just go out here to
testflightapp.com, drag your IPA here, email
| | 00:48 | yourself and others, and have a link
to easily download and install that IPA
| | 00:53 | without having to go through iTunes.
| | Collapse this transcript |
|
|
3. Understanding the Architecture of a Flex Mobile AppUsing the ViewNavigator classes in a Flex mobile app| 00:00 | The mobile Flex framework makes the
task of creating mobile applications for
| | 00:05 | Android and iOS devices very easy.
| | 00:08 | The ViewNavigator classes are actually
designed to assist in making the most of
| | 00:12 | the limited screen real estate
that we have available on phones.
| | 00:16 | In addition, these classes will
automatically create and destroy the
| | 00:20 | different views, and they will
optimize the memory and processing power of
| | 00:26 | the mobile devices.
| | 00:27 | So the Navigator classes will work
with tablets, but since the developer
| | 00:31 | generally has more real estate
available on tablets, we may want to consider
| | 00:35 | using the Spark application tag
instead of these ViewNavigator classes.
| | 00:39 | Using these ViewNavigator classes,
we can split the information and UI of
| | 00:44 | our application to multiple screens
and again maximize efficient memory and
| | 00:49 | processor use of the phone, and the Flex
Framework will handle this automatically.
| | 00:54 | It will handle the memory management,
the transitions, the application
| | 00:57 | state, integration with all the
hardware buttons, and even passing different
| | 01:02 | data between the views.
| | 01:03 | So let's explore how to use
the ViewNavigator classes.
| | 01:07 | What we are going to do is we are
going to build an Explore California
| | 01:11 | mobile application.
| | 01:12 | So the first step is just simply to
click on File, choose New, and I'm just going
| | 01:18 | to choose Flex Mobile Project.
| | 01:20 | I am going to create a new mobile
project called Explore California.
| | 01:27 | So here's my new project.
| | 01:29 | Be sure you're using the Flex 4.5.1 SDK.
| | 01:32 | Go ahead and click Next, and again if
you were designing something for a tablet,
| | 01:37 | you might use this Blank here.
| | 01:39 | We are going to use the View-Based
Application, which is going to give us access
| | 01:42 | to the ViewNavigator classes.
| | 01:45 | Okay, so for now let's target Android
Platforms, just to get an idea, and of
| | 01:48 | course we can also target Apple iOS.
| | 01:50 | There would be no difference.
| | 01:52 | And of course Google has this permission
that's written to the Android manifest file.
| | 01:57 | So let's set right to access the
Internet, and we also have the right to the
| | 02:00 | external storage of the device.
| | 02:03 | Okay, I am going to also
set up Automatically reorient.
| | 02:06 | I will automatically scale the
application for different screen densities;
| | 02:09 | in this case I will set it to
240 dpi. I will click Next.
| | 02:14 | I'll click Next again, and you'll see
it's going to automatically create this
| | 02:17 | file called Main.mxml.
| | 02:20 | Let's take a look at what we have. Perfect!
| | 02:23 | So you will see here it creates my project here.
| | 02:25 | My project is called Explore California,
and you will see it creates a default
| | 02:30 | package here, our main application file.
| | 02:32 | If I just open this up, I have spark
ViewNavigatorApplication, and notice here
| | 02:38 | it says firstView="views.MainHomeView", and
you will see that views MainHomeView here.
| | 02:44 | Now you can create an unlimited number
of views, and this framework will again
| | 02:49 | create and destroy these views as they're
called by the user, maximizing memory use.
| | 02:54 | So that's very powerful in terms of
actually doing the development here.
| | 02:58 | So you will see the ViewNavigator
class and in this main application, you can
| | 03:02 | put things like an action bar,
and this action bar would be shared across all
| | 03:06 | the different views.
| | 03:08 | For now what I want you to do is we are
going to use some assets in our project here,
| | 03:13 | so I want you to just go to your
exercise files here, and in your exercise files
| | 03:17 | I just want you to take this Images
folder, and just drag and drop that Images
| | 03:22 | folder into your project here, into
the Source directory of your project.
| | 03:26 | So we are going to utilize some of
these images in our project later on,
| | 03:30 | so go ahead and just drag and drop
those for now, and we should be good.
| | 03:34 | So I will close off my exercise files.
And what I'm now going to do is let's just
| | 03:39 | add in a splashScreenImage to our Flex project.
| | 03:43 | So this will appear when the user first
starts up the application, and it'll be very useful.
| | 03:48 | So let's go to our main mobile
application here, which is of course called
| | 03:53 | Main.mxml, and you'll see here at the
top here I am going to add in a tag here
| | 03:58 | called splashScreenImage, just as you
see there. And then I am going to simply
| | 04:05 | say I am going to add an @Embed
tag, so I am going to say @Embed.
| | 04:09 | What that means is it's going to take
the image and it's going to actually
| | 04:13 | embed it into the SWF.
| | 04:14 | So if you do this, the user won't
actually need to have a data connection on
| | 04:18 | their device because this image
will be baked into the actual SWF file.
| | 04:22 | Now this can be a bad thing of course
because this would mean that your SWF
| | 04:26 | file would get bigger.
| | 04:27 | But in terms of the image that we are
going to embed into our application that's
| | 04:30 | going to first appear when the user
starts the application, you will see it's
| | 04:34 | this image here called cali_flag.jpg.
| | 04:38 | So we are going to take our splashScreenImage.
| | 04:41 | That's a fairly small image.
| | 04:42 | So I am just going to say @Embed,
like we see here, and then I am going to
| | 04:47 | reference my Images folder like so.
And then I'm just going to reference this
| | 04:51 | file name here, which is called cali_flag.jpg.
| | 04:57 | So here I am going to say cali_flag.jpg,
and of course I will then close my--here.
| | 05:10 | What this will do is this
will add a splashScreenImage
| | 05:13 | so when the application first starts, it will
then display this to the end user. Okay, great!
| | 05:18 | Now another thing that we may want to
do is for our first view that we show
| | 05:23 | under the MainHomeView, you'll see the
title of this view that appears, and the
| | 05:26 | title is simply called HomeView.
| | 05:29 | Let's change this to something a
little bit more descriptive and call this
| | 05:33 | Explore California, just like so.
| | 05:36 | So now what we want to do is we want
to actually go out and our database
| | 05:41 | developers have been very nice and what
they've done is they've generated us a
| | 05:45 | PHP script that lives up on the server,
and this generates an XML feed of all
| | 05:50 | the latest tour information.
| | 05:52 | So it gives us the level of difficulty,
the price of each tour, a very nice
| | 05:56 | description, an image that's
associated with each tour, and they've written a
| | 06:00 | PHP file so we can access this
from our Flex mobile application.
| | 06:05 | Now, of course the user will need a
data connection in order to use this, but
| | 06:08 | most smartphones these days of
course have a data connection.
| | 06:11 | So what I want you to do is inside of
the Declarations block, we are going to
| | 06:14 | just utilize an HTTP service tag.
| | 06:17 | Again, everything is supported on
mobile devices that we know and love in Flex
| | 06:21 | development, such as
remote object, web services.
| | 06:24 | In this case, we are just choosing
to use an HTTP service tag because our
| | 06:29 | database developers are working in PHP.
| | 06:31 | But again, everything that we know and
love is also supported in mobile devices
| | 06:34 | for Flex development.
| | 06:35 | So what I am going to do is just
reference spark, and remember we talked
| | 06:39 | about this earlier, but you should always
use spark components in a mobile application.
| | 06:43 | They've all been optimized for mobile.
| | 06:45 | They are architected better, and your
applications will perform a lot better.
| | 06:49 | So here I'm going to simply say spark
and I will reference my HTTP service tag,
| | 06:54 | just like so. And then I am going to
simply point the URL property here to the
| | 06:59 | URL that my database developers gave me.
| | 07:02 | So I will just paste that in,
and you can see the URL right there.
| | 07:05 | So I will point that there, and then
what I am going to do is I am going to
| | 07:08 | assign this an ID of getTrips,
so I can reference my HTTP service.
| | 07:15 | So this is called HTTP. It's called getTrips.
| | 07:19 | Then the next thing I am going to do
is once the data has been received back
| | 07:23 | from the mobile application, I want to
call a function that I can now reference.
| | 07:28 | So what I am going to do is I am going to add
a result event directly to my HTTP service tag.
| | 07:34 | So I am just going to say result
and I am going to generate the event
| | 07:38 | handler automatically.
| | 07:40 | So whether you're on Windows or
whether you're on Mac, you can just press
| | 07:42 | Ctrl+Space and what you should see is you
should see it says here result - HTTPService.
| | 07:48 | I will click on that, and then you will
see it says Generate Result Handler, and
| | 07:53 | I'll click on that again and you'll
see up here it automatically generated my
| | 07:57 | getTrips resultHandler.
| | 07:59 | Now, for those of you who really enjoy
typing, feel free to type that all in yourself.
| | 08:03 | You'd have to make sure that it
matches my screen here exactly, and it should
| | 08:07 | work the same way. I just showed you
a little way to make this much faster.
| | 08:11 | So now, what we are going to do is the
first thing I want to do is just create
| | 08:15 | something to actually store the
information from the database.
| | 08:18 | So I am going to store that locally
here on my mobile device, and I will just
| | 08:22 | create an ArrayCollection.
| | 08:23 | So an ArrayCollection works with
data binding, and I'll just call
| | 08:27 | this protected var.
| | 08:29 | We will call it myTrips, and I will
simply just type this as an ArrayCollection.
| | 08:37 | Check and be sure that it
added the import for you.
| | 08:39 | It should have automatically added
an import. Mine did not in this case.
| | 08:43 | So I will just go here and type
Ctrl+Space again, and you'll see it
| | 08:47 | automatically adds in the import.
| | 08:49 | So again check and make sure
that it automatically imports that
| | 08:52 | ArrayCollection class, and then also make sure
that your ArrayCollection has a bindable meta tag.
| | 09:00 | This means it will be able to be used
with all the mobile components, and it will
| | 09:04 | actually be bindable, and you
will be able to work with that.
| | 09:06 | So I set that to Bindable,
so perfect. And you will see it says
| | 09:09 | myTrips:ArrayCollection. Okay, that's ideal.
| | 09:13 | So we are going to store this, and then
all I want you to do is inside of the
| | 09:18 | resultHandler when the information
comes back from the database, I want you to
| | 09:22 | take the information and populate
this myTrips:ArrayCollection with the
| | 09:27 | information from the database.
| | 09:29 | So remember, the information is
sent back in the event object,
| | 09:33 | so I should just be able to say
event.result and if you actually look at the XML
| | 09:40 | feed--let's just open it up in a
browser just so we can get a quick idea of how
| | 09:45 | that's going to look.
| | 09:46 | What I'll do is just paste in that
URL, and this is what our data looks like
| | 09:51 | that's coming back from the database.
| | 09:52 | So again, nice and clean. It's in XML.
| | 09:54 | You will see there is a top-level node
called tours, and then there's a repeating
| | 09:58 | node here called tour, and the
information we need for our mobile application,
| | 10:02 | you will see there is tourId, tourTitle,
packageId, packageTitle, description,
| | 10:07 | price, difficulty, all of that.
| | 10:09 | So what I am going to do is just go
back to Flash Builder and I am going to
| | 10:13 | reference the top-level node, which is
tours, and then I am going to reference
| | 10:17 | the repeating node, which is tour.
| | 10:20 | Then all I want to do here is just
simply say myTrips is equal to that.
| | 10:27 | So again, the Flex framework very
nicely converts all of this into an Array
| | 10:32 | Collection for us and allows us to
populate this myTrips variable like you see there.
| | 10:38 | So that's very powerful.
| | 10:39 | So you will see we have that code and
then if I go up to the top here, I just
| | 10:43 | want to execute and call my HTTP service.
| | 10:47 | So I am just going to go up here,
and I am going to simply use the
| | 10:50 | creationComplete event, and I am going
to now reference my HTTP service. And if
| | 10:57 | you remember we called
our HTTP service getTrips.
| | 11:00 | So I am just going to say getTrips.send,
and that will call the HTTP service when
| | 11:06 | all of the components are ready for use.
| | 11:09 | Okay, so now let's make sure that our
data is actually coming back and in a
| | 11:14 | later movie, we are going to talk
about how to put this kind of thing in a
| | 11:17 | separate file and utilize that.
| | 11:20 | So you'll see it says getTrips.send.
| | 11:22 | That will execute this, and then if I
just click Save--so make sure you save
| | 11:27 | your MainHomeView, and then you
click here, you click Save as well,
| | 11:32 | so save both of these views--
| | 11:34 | you should see that there are no
problems. And let's just make sure that the
| | 11:37 | data is in fact coming back
in to our mobile application.
| | 11:41 | So some of you may need to actually
install the debug version of the Flash
| | 11:44 | player, which you can go out to Adobe
and just install the debug version--
| | 11:48 | it also ships with a copy of Flash
Builder as well--to actually see the debugging.
| | 11:53 | To use some of the debugging
capabilities, I am going to go to line 16 here and
| | 11:58 | I am going to just add in a break point.
| | 11:59 | So I am going to right-click on
line 16 and say Toggle Breakpoint.
| | 12:03 | What this breakpoint means is it just
simply means that when the debugger hits
| | 12:08 | this, it will stop, and it will open up
the Debugging mode, and we should be able
| | 12:12 | to see the data that is in fact coming back.
| | 12:16 | You'll see one other quick thing is I
just need to close off, make sure my HTTP
| | 12:20 | service is actually closed off.
| | 12:22 | So you will see that, and I could tell over
here because it wasn't appearing in Outline mode.
| | 12:26 | So I just need to close off my HTTP
service and we should be good once we hit Save.
| | 12:32 | Then what I am going to do is just
set up a debugging configuration.
| | 12:36 | So if you choose Debug Configuration,
choose Mobile Application, and then click
| | 12:41 | New, and then let's say Explore California.
| | 12:45 | We're going to choose our Application file.
| | 12:46 | We are going to choose our target
platform, which in this case is Google Android.
| | 12:51 | We will choose On desktop for now.
| | 12:53 | We'll choose a device we want to simulate,
and we'll choose the Motorola Droid X in this case.
| | 12:59 | I will click Apply, and then I will
choose Debug, and you'll see my Flash
| | 13:05 | screen image appeared.
| | 13:06 | So again, that was the first thing that
appeared when I started the application,
| | 13:09 | and I set up that splash screen.
| | 13:11 | So you'll see that.
| | 13:12 | Then what happened is that it
went out, called that HTTP service, it hit
| | 13:16 | that resultHandler.
| | 13:17 | It hit, and then it said, "Hey!
| | 13:19 | This is the debugging
perspective for Flash Builder.
| | 13:21 | Do you want to open this now?"
| | 13:22 | And then we can click Yes.
| | 13:25 | We should see the event object here,
and inside of the event object, you will
| | 13:29 | see the result property that we referenced.
| | 13:32 | Inside of this result property, you
should see another property in they are
| | 13:37 | called tours. And then inside of
this property you'll see of course the
| | 13:41 | repeating node called tour.
| | 13:43 | In here you should see all of
the data that we are going to use.
| | 13:47 | So, for example here, you'll see the
Salton Sea tour. We will look here.
| | 13:52 | We will see the AMGEN tour.
| | 13:53 | We will see the level of difficulty.
| | 13:56 | We will see the image that's associated with it.
| | 13:58 | We will see the length, and then we'll
see the associated link, and we can also
| | 14:03 | see some other information stored in an
object, including the description, the
| | 14:07 | difficulty, the image, and all this
other information that we can utilize in our
| | 14:13 | application that we're going
to build for mobile devices.
| | 14:17 | We've now gotten a good idea of how
to set up a mobile project and how
| | 14:21 | to incorporate assets from a
database, as well as image assets in our
| | 14:26 | mobile application.
| | Collapse this transcript |
| Using the mobile-ready app components| 00:00 | Flex 4.5 expands the extensive
existing web and desktop component library by
| | 00:06 | adding 21 new touch-enabled,
optimized, and density-aware mobile components.
| | 00:13 | We've already explored the
ViewNavigator components, but now let's explore the
| | 00:17 | List and ItemRenderer components.
| | 00:20 | All of the mobile components implement
elastic pull effects for scrolling and
| | 00:24 | transitions, auto-scaling based on
pixel density, default mobile themes, native
| | 00:29 | support for keyboard input, and
multi-resolution bitmap support.
| | 00:34 | What we are going to do is we are
going to take our Explore California
| | 00:37 | application where we've loaded all of
the data from the database into, and we are
| | 00:41 | going to actually display some of this
data in our application, and we are going
| | 00:46 | to use a List control.
| | 00:47 | A List control is great for displaying
complex data items, and it's much less
| | 00:53 | heavy than the DataGrid components,
which you really shouldn't use in a
| | 00:56 | mobile application.
| | 00:57 | But we'll see with the list control we
can do almost everything we can do in a
| | 01:01 | DataGrid, especially by using
what are called ItemRenderers.
| | 01:05 | So I am going to open up my Explore
California application, and I am going to
| | 01:09 | go back to my first view, so you'll
see of course in our default package is
| | 01:13 | our Main.mxml folder. But let's go back to
our first view, which is MainHomeView.mxml.
| | 01:20 | You'll see here of course this is where
we access our data, and our data is all
| | 01:24 | stored in this array collection that
we've created earlier called myTrips, and
| | 01:29 | there's lots of data in here, right?
| | 01:30 | We explore that in the
last movie. We have an image, we have a price,
| | 01:35 | we have a difficulty level, a long
description of each particular tour.
| | 01:40 | So what we are going to do is we are
going to display this data in the first
| | 01:44 | view, so the user can see a list of all
of the different tours available to them,
| | 01:49 | and eventually they will be able to
drill down and get more information about
| | 01:52 | each tour, see the difficulty, actually
access the mobile web site from directly
| | 01:57 | within our application,
| | 01:58 | and we are going to implement
some really cool functionality.
| | 02:00 | But for now let's just display the
list of trips or tours that they have
| | 02:04 | available to them, and I am going to
switch over to Design mode just to make life
| | 02:08 | a little bit easier here, and you'll
see I am going to add a List control.
| | 02:12 | So let's add a List control over here
to Design mode, and what I am going to do
| | 02:16 | is just simply eyeball it here and
again set the size of the list to take up
| | 02:22 | all of the different real estate.
| | 02:24 | Now again, there is all kinds of ways of
controlling our layout in mobile Flex applications.
| | 02:29 | A good way that we are going to use
here is Constraint-based layout and
| | 02:33 | utilizing the Constraint-based
layout here, I am going to set it to be in
| | 02:38 | certain places here.
| | 02:39 | So no matter what, because I have 0, 0
and 0 here, it's always going to be at
| | 02:44 | those X and Y positions, no matter
what the screen size of the device is.
| | 02:49 | So even if I'm viewing it on a XOOM, for
example, which has a much bigger screen
| | 02:53 | than a Nexus S, you'll see
that it's displayed the same way.
| | 02:57 | It's displayed the same way in orientation.
| | 02:59 | So this Constraint-based layout is
a great way for mobile applications.
| | 03:02 | Another great way is to utilize the
width and the height percentages, so that
| | 03:07 | your component takes up a
percentage of the real estate available.
| | 03:12 | And again, all of that is
available in our regular Flex course.
| | 03:16 | So this is specific to mobile,
but just remember percentages and
| | 03:20 | Constraint-based layout are great
ways to layout your application.
| | 03:23 | And notice in Design mode you can test
it right here on different devices and
| | 03:28 | test out that layout.
| | 03:29 | Okay, so now we have a List control.
| | 03:31 | Let's link up that List control to this data
structure that we created in the last movie.
| | 03:38 | So we can do that simply by using a
property here called dataProvider.
| | 03:42 | So I am going to say dataProvider.
| | 03:44 | I'm going to set up a binding control here.
| | 03:47 | I'm going to use the curly braces to do so,
and let's bind this list to the myTrips
| | 03:52 | array collection that we've built
earlier. So here I am going to say myTrips
| | 03:57 | like so, and that's the dataProvider.
| | 04:00 | I am going to then click Save, and let's
see what is actually displayed right now.
| | 04:05 | Remember, in this mytrips,
there's lots of data in here.
| | 04:09 | So I am going to set up Google Android,
I'm going to run this on the desktop, and I'll
| | 04:14 | choose Motorola Droid X here,
and then I'll click Run.
| | 04:18 | Again, I could choose whatever device I
want, and you'll see that there is just
| | 04:22 | a quick error here, so let's see. I have
dataProvider, and you'll see I made a typo, right.
| | 04:28 | And ActionScript is a case-sensitive
language, so you'll see this as myTrips, and
| | 04:33 | the typo that I made here is capital letter.
| | 04:37 | So you are going to hit Save, and
again I am going to rerun this in the
| | 04:42 | configuration here, so I'll
set up my Run Configuration,
| | 04:45 | re-run it on the Motorola Droid X and again,
this will often happen in Flash Builder.
| | 04:51 | If you may try to run it once, you'll
see that, but here is our application, and
| | 04:56 | you'll see that it's just
simply displaying object Object.
| | 04:59 | Now AIR will actually display this
anytime complex object is coming down.
| | 05:04 | So this actually has lots of
different properties; for example, it has a
| | 05:08 | property called image,
| | 05:10 | it has a property called
description, called price.
| | 05:12 | What we want to do is we want to
sort of modify this so that it's only
| | 05:17 | displaying the image property.
| | 05:19 | So to do that, I am going to add a
property to my List control here, and I am
| | 05:23 | going to add this property,
this is called IconItemRenderer.
| | 05:27 | And this allows me to customize a List
control so it will display the data that
| | 05:31 | I need in a very nice tabular form.
| | 05:35 | So I am going to say here and I am
going to just simply add in a property,
| | 05:39 | a spark property, and we are going to
add in the property called itemRenderer, just like so.
| | 05:45 | So there is my itemRenderer to my List control.
| | 05:48 | Inside of this itemRenderer
property, I am going to build a component.
| | 05:53 | Okay, again this could be done in
ActionScript of course as well, but in
| | 05:57 | this case, just to keep things
simple, I am choosing to use MXML, but you
| | 06:00 | could use ActionScript.
| | 06:02 | And then I am going to use this
IconItemRenderer class, and this is an item
| | 06:07 | renderer. Again, it's
optimized for mobile devices.
| | 06:11 | So we are going to learn how
to use this IconItemRenderer.
| | 06:14 | I could specify, for example, the
iconField if I wanted to display the images.
| | 06:19 | However, I have a problem in the fact
that the image that's coming back is just
| | 06:24 | simply the name of the image, and in
terms of my project, or in terms of my web
| | 06:28 | server, in terms of real life, you
may not have the exact information--
| | 06:32 | that is, the exact path to the
image that's being sent back.
| | 06:36 | So you could just say iconField if you
have the exact path, and it would work
| | 06:40 | fine, but in our case we need to make
some modifications so that we have images
| | 06:45 | slash at the beginning of the actual
path to the image because that's where it's
| | 06:48 | stored in our project.
| | 06:50 | Again, in real life you might have
this pointing to a particular web server
| | 06:54 | where those images are stored.
| | 06:56 | So we are going to have to make some
modifications, and we can do that simply by
| | 06:59 | using this property here called iconFunction.
| | 07:03 | So I am going to say iconFunction here,
and then I am going to simply just say
| | 07:06 | is equal to and we are going to
write a function here called getPhotoURL.
| | 07:12 | Now notice this is just a property, so
we don't put the paren, paren in when
| | 07:17 | we call this function.
| | 07:18 | So I'm just going to say
iconFunction="getPhotoURL".
| | 07:23 | Let's explicitly define how big we want
this icon to be, so I'll say let's make
| | 07:28 | the iconWidth say 72 pixels, make
the iconHeight = 72 pixels as well.
| | 07:38 | We'll set the height = 110 pixels,
and then we'll set up the verticalAlignment
| | 07:45 | of this to the top, just like so.
| | 07:49 | What I'll do is I'll close my
IconRenderer tag, and notice it automatically
| | 07:54 | adds that ending for me.
| | 07:54 | And then what I want to do is inside
of the IconItemRenderer, I am going to
| | 07:59 | actually write a script.
| | 08:01 | So I am going to say fx:Script here, and
I am going to have to create a function
| | 08:05 | in this script called getPhotoURL.
| | 08:09 | So I'll say protected function
getPhotoURL, just like so and that of course
| | 08:17 | has to match here, so there is my
getPhotoURL. And what happens is is the
| | 08:21 | IconItemRenderer will call this
function for every single row in the data
| | 08:26 | structure and it will allow us to set this
up so we can render this for every single row.
| | 08:31 | So this is very useful.
| | 08:32 | So I'll just specify item, and then it's
going to send it back as just a regular
| | 08:37 | old object. So, I'll say Object,
and then I'll say String, and we are going to
| | 08:42 | have this return a string.
| | 08:43 | So I am going to say protected function
getPhotoURL. It's going to return a string.
| | 08:50 | And then what we are going to do is we
are going to return, and then I am going
| | 08:53 | to need to add to the
value to match my path here.
| | 08:56 | So that's going to be images, as you see
there, and then a forward slash. So I am
| | 09:01 | going to say images, and then I'm
going to say plus, do a concatenation right
| | 09:06 | there, and I am going to say + item.image.
And that is the structure that's being
| | 09:12 | returned from the data source,
| | 09:14 | so I'll say item.image, and that will
be called for every single row, and that
| | 09:19 | should display the image in every
single row of my list component.
| | 09:23 | So make sure that you've
closed off your script block,
| | 09:26 | you've closed off your
IconItemRenderer, your component, and then also your
| | 09:30 | ItemRenderer, as well as your List control.
| | 09:33 | Save your view here, and then what I'd
like to do is just go back to your Run
| | 09:37 | Configurations, choose Google Android.
| | 09:40 | Let's try it on a Motorola Droid X.
I am going to click Run, and we should
| | 09:44 | see that there's my splash screen,
and what happens is is it pulls in each
| | 09:49 | one of the images associated with the tours
and you could see, I can scroll through here.
| | 09:54 | It's all touch enabled.
| | 09:56 | I could test this right here inside
of Flash Builder, and I could see what
| | 10:00 | it's going to look like,
| | 10:01 | for example, if I rotate my
application to the right and I do all of that.
| | 10:06 | So that's just a simple example of how
to display complex data inside of our
| | 10:13 | mobile application utilizing the List control.
| | 10:16 | So in mobile applications, oftentimes
the List control is a great substitute for
| | 10:20 | something like a DataGrid that we may
be using in Desktop Flex applications.
| | Collapse this transcript |
| Understanding the ViewNavigator classes| 00:00 | In this movie, we're going to explore a
little bit more about the ViewNavigator
| | 00:04 | classes and understand
how to switch out screens.
| | 00:08 | So what we're going to do is build a
new component that extends the View class
| | 00:13 | and then each view component has a
property called Navigator, and we can use
| | 00:18 | this property to push a new view on
to the screen, or to move back to a
| | 00:22 | previous view, or to jump to any
other view while we pass the needed data
| | 00:26 | between those different views.
| | 00:28 | The Flex framework handles all of
the memory optimization and screen
| | 00:32 | transitions for us automatically, and our
application is automatically hardwired
| | 00:37 | to listen to the Android Back
button, so when you click Back, it'll
| | 00:40 | automatically moves between views.
| | 00:43 | So let's explore the architecture of an
application based on the ViewNavigator classes.
| | 00:47 | I'm going to start here where we left
off during the last video, and you'll see
| | 00:52 | that of course we have our default
package, which is our Main.mxml, and then we
| | 00:56 | have the MainHomeView where we
actually went out and the made the call of the
| | 00:59 | database and then displayed the images here.
| | 01:02 | So what I'd like you to do is just create
a new component in this views folders.
| | 01:08 | So I'm going to right-click here and
just saying New, and I'm going to say MXML
| | 01:12 | Component, and that will create a
new MXML component. It's going to be in
| | 01:17 | the views package, and it's going
to inherit from the view component.
| | 01:21 | So what I'm going to do is just call
this TripDetails, so when the user clicks
| | 01:27 | on one of the trips, I want it to change
the screen and give them details about
| | 01:32 | the particular trip that they clicked on.
| | 01:33 | So, for example, maybe the price, a
description, maybe a different image, so we
| | 01:38 | can see all of that,
so I'm going to click on Finish.
| | 01:40 | Now you'll see that there is a
TripsDetail view, and you'll see that the title
| | 01:44 | here is called TripDetails. And then
what I'm going to do is let's just go and
| | 01:50 | actually examine the data source.
| | 01:53 | I'm going to just open up Firefox
here, and we'll just make sure that we
| | 01:57 | understand the data that's coming back
because we're going to need to do that.
| | 02:00 | So here you'll see the data that's
coming back, and you'll see our tour node, and
| | 02:04 | you'll see that there's a tour ID, a
tourTitle, a packageTitle, a description,
| | 02:10 | a price, a difficulty, a length, and an
associated image, as well as a link for each tour.
| | 02:16 | So I'm just going to leave that open,
so we can switch back to it if we need it
| | 02:20 | as we're doing this. And then inside
of my View here, I'm going to go ahead
| | 02:24 | and add a bitmap image.
| | 02:27 | So I'm going to say s: and I'll say
| | 02:30 | BitmapImage, so there is my bitmap
image, and you'll specify the source here.
| | 02:36 | And what I'm going to do is I'm going
to specify the data property here, and I'm
| | 02:44 | going to say image.
| | 02:45 | So we might need to make some
modifications to that, and I think we will, so
| | 02:50 | again, remember, we've looked at this before
and we saw how the image was being stored.
| | 02:54 | So in this case, I can
make this little bit easier.
| | 02:56 | I can just simply say images to
reference the appropriate image here, and then
| | 03:01 | put in a forward slash like that,
and I can say images/data.image.
| | 03:05 | I don't have to actually write a function
when I utilize data binding as we see there.
| | 03:10 | So now let's add in a text area
component, and I won't let the user edit this, so
| | 03:15 | I'll just simply set the editable
property to false. And then I'll specify a
| | 03:19 | text property for this, and I will
simply say data.description. And that should
| | 03:26 | pull out the appropriate description
for what the user has clicked on. And let
| | 03:31 | me add my spark name space of course. Perfect!
| | 03:36 | So there's my text area component.
| | 03:38 | Let's add in also a label control.
So I'll add in a label control and here I'll
| | 03:45 | specify the text property of the
label control is just simply equal to
| | 03:49 | data.price, which is again coming back
from my data source, and then I'm going to
| | 03:55 | add in a simple button for now. So I'll say s:
| | 03:59 | button, and I'll say label is equal to
Go to Site. So this will actually open
| | 04:06 | up site inside of our application, and we'll
talk about how to do that in another movie.
| | 04:11 | So you'll see we have the basic
component here, and let's just also just lay this
| | 04:15 | out in a vertical fashion. So I'll add
in a layout tag here, and what I will do
| | 04:22 | is I will just simply instantiate an
instance of my vertical layout class, like
| | 04:27 | you see there, so that'll lay this out
all vertically, and the Flex framework
| | 04:31 | will handle all the spacing and that
sort of thing for my application view.
| | 04:36 | Okay, so now I'll click on Save there,
and then what I'm going to do is I'm
| | 04:39 | going to return back to the Explore
California application, which is called my
| | 04:44 | MainHomeView--remember of course,
we titled it Explore California.
| | 04:48 | Now when I want this to happen is
when they click on one of the tours
| | 04:52 | inside of the list.
| | 04:54 | So the first thing I'm going to do is
I'm going to go to my List control and
| | 04:56 | let's name my List control here,
so that we can reference this.
| | 05:01 | We'll just call this tripList, so that
we can reference our List control. And we
| | 05:07 | want this to happen when the user
of course clicks on one of the trips.
| | 05:11 | So what I'll do is I just to add a
change event to the list, and I'll just
| | 05:15 | generate the event handler, so I'll
type in Ctrl+Space and I'll click change,
| | 05:20 | and then I'll say generate
changeHandler. And if we scroll up to the top,
| | 05:25 | you'll see that it now added this new
protected function here called tripList changeHandler.
| | 05:31 | So now, all I have to do is
reference my ViewNavigator class, so I just
| | 05:36 | used the word navigator.
| | 05:37 | This is just something you have to memorize.
| | 05:39 | This is specifically for mobile
components. So I'll say navigator, and I'll use
| | 05:43 | this method here called pushView.
| | 05:46 | So what that will do is that will
eliminate the view that the user is currently
| | 05:50 | viewing, which is his MainHomeView, and
put in our TripDetails view, and it will
| | 05:55 | handle all the memory management, the
instantiation, and really optimize for
| | 05:59 | mobile devices when I say pushView there.
| | 06:02 | So now I'll tell it which view to
push in. and that's of course under
| | 06:06 | Views > TripDetails, so here I'll just say
views.TripDetails, just like so, and
| | 06:14 | then I will reference my list control,
which as you remember had the ID of
| | 06:19 | tripList, and I'll just a tripList.selectedItem.
| | 06:28 | So what that's going to do is that's
going to take the tripList List control and
| | 06:33 | it's going to pass off what the user
has selected on that tripList. And it's
| | 06:38 | going to pass that off in the data
property when I set this bitmap image in and
| | 06:43 | I set the text area.
| | 06:44 | That's why I referenced this property called data.
| | 06:47 | It's going to pass that information off
to the component and again, it's always
| | 06:51 | passed with that name of data.
| | 06:53 | So let's test this, and I'm just going
to now again set up a Run Configuration,
| | 07:00 | go to my Mobile Application, set
up Google Android in this case.
| | 07:04 | I could of course do this on an iPhone
as well, and we'll choose a Droid X. I'll
| | 07:09 | click on Apply, and let's
go ahead and just run this.
| | 07:12 | I should see my mobile application.
| | 07:14 | There is my splash screen.
| | 07:16 | There's my list of objects.
| | 07:17 | Now watch what happens
when I click on one of these.
| | 07:19 | It should give me details about this.
And you can see here that I can scroll
| | 07:24 | through here, and you could see also
that I've would actually have to test this
| | 07:28 | on a mobile device to see what
happens, but it looks like some things are
| | 07:31 | getting cut off, like my button here.
| | 07:33 | But this is sort of when we start
really wanting to test this on a mobile
| | 07:37 | device and looking at this kind of
thing. You should also see that your back
| | 07:40 | button works, fully functional, right.
You'll see if I click on this, of course,
| | 07:44 | it's going to change,
depending on what I clicked on.
| | 07:47 | So, here is Big Sur. It gives me
some information about Big Sur.
| | 07:51 | I can see the image that's being pulled
in, and my Back button works fine, and
| | 07:55 | you can see again all this information
is being handled and controlled by the
| | 08:00 | ViewNavigator classes.
| | 08:01 | So we'll now looked to sort of see how
we can easily build an application that
| | 08:05 | takes advantage of the different
screen metaphor on a mobile device, and the
| | 08:09 | beauty of this is all the memory
management and instantiation is handled here
| | 08:14 | by the Flex framework.
| | 08:15 | We just have to memorize a couple of
things, such as navigator, and that the data
| | 08:19 | is passed in those properties,
but Flex handles it all for us.
| | Collapse this transcript |
| Understanding mobile transitions| 00:00 | When we navigate around a Flex mobile
application from view to view, there is a
| | 00:05 | default animation, or effect, that occurs.
| | 00:07 | This is known as a transition.
| | 00:09 | We can customize these transitions,
and there are four out-of-the-box mobile
| | 00:14 | transitions we can use,
including the SlideViewTransition, the
| | 00:17 | CrossFadeViewTransition, the
FlipViewTransition, and the ZoomViewTransition.
| | 00:22 | All of these transitions can be
extended, and we can create our own custom
| | 00:27 | transitions as well and create some
really, really cool mobile applications.
| | 00:32 | So let's take a look at our application.
| | 00:34 | I'm going to go back to our view here
and to the MainHomeView. And the first
| | 00:38 | thing, when we run our application--
let's just run it really quickly.
| | 00:42 | I'll set up our mobile
configuration if you don't have one set up, and
| | 00:46 | let's choose the HTC Desire.
| | 00:48 | So before we do anything, I just
want to change our List control so it no
| | 00:53 | longer says object Object.
| | 00:55 | So what we want to do is we want to
specify the label field of this actual cell
| | 01:00 | in our list control, and to do that,
let's take a quick look at our data
| | 01:04 | structure, and you'll see that the
property that we want is called tourTitle.
| | 01:09 | Let's specify the label field
of our list control as tourTitle.
| | 01:11 | So I'm going to scroll down here to my
List control, and I'm just going to simply
| | 01:16 | say lableField of the List control is
equal to tourTitle, just like so, and then
| | 01:25 | I'm going to hit Save. And then what I'm
going to do is just run, and you should
| | 01:29 | see that this looks a lot better
when I run this on my HTC Desire here.
| | 01:34 | You should see that there is my splash
screen of course, and now it actually
| | 01:38 | pulls in the name of each tour.
| | 01:41 | So when I click on one of these tours,
I want it to actually have a much nicer
| | 01:45 | transition than the default transition.
| | 01:48 | So let's try a few different
transitions, and you can choose whichever one you
| | 01:52 | like for your application.
| | 01:54 | So what we've done is we've
included some different transitions in the
| | 01:58 | code snippets file that is included
with your project files, just to save
| | 02:02 | yourself some typing.
| | 02:04 | So what I'm going to do is go back to
my exercise files here, and you'll see I
| | 02:07 | have my codeSnippets and go ahead and
open up that, and you'll see the first
| | 02:11 | transition that we have is this flip transition.
| | 02:15 | So let's explore how this
flipTransition looks. So I'm going to choose Copy
| | 02:19 | here and go back to good old Flash
Builder, and what I'm going to do is notice,
| | 02:25 | of course, we want this to occur when the user
clicks on something inside of the List control.
| | 02:31 | So you'll see we were calling a
change handler on our List control called
| | 02:35 | tripList changeHandler, as you see there.
| | 02:38 | So what I'm going to do is I'm going
to go up to my tripList changeHandler,
| | 02:42 | I'll just delete the code that's here,
and then I will paste the code for my
| | 02:47 | codeSnippets file into my tripList
changeHandler. So you see there's a Flip Transition.
| | 02:53 | Here it says FlipViewTransition.
| | 02:55 | It's specifying the direction that
it's going to occur. Feel free to play
| | 02:58 | around with these as well. You might
even want to try different direction than
| | 03:01 | up, you can try a different mode,
and again, there are lots of default settings
| | 03:06 | that you can customize and really get the
transitions that are right for your application.
| | 03:10 | And then we'll see we have the same
code we have before, navigator.pushViews, and
| | 03:15 | I'm pushing out my TripDetails,
you'll see that there, and then I have
| | 03:19 | tripList.selectedItem,
which I'm passing over here.
| | 03:24 | Okay, you'll see in this case we're not
passing anything as this parameter, and
| | 03:28 | then this is the last parameter that
you pass into the pushView method is the
| | 03:33 | transition. And you'll see
flipTrans matches my transition right here.
| | 03:37 | Now you will have to add the import
statements, so put your cursor right by the
| | 03:42 | class here, which is the
FlipViewTransition, and just press Ctrl+Space, and that
| | 03:47 | will automatically add the import.
So you can see it automatically added our
| | 03:51 | FlipViewTransition import right
there, and then do the same thing for this
| | 03:56 | ViewDirection UP, add that import,
and you'll see that little warning message
| | 04:01 | disappears. And then also do the same
for the FlipTransitionViewmode, and the
| | 04:05 | little warning message should disappear.
And if you scroll up to the top, you'll
| | 04:09 | see it's added in all of those mobile
transition imports into our application.
| | 04:14 | Okay, so let's examine this FlipViewTransition.
| | 04:17 | I'm going to run it again.
| | 04:19 | You should see it pops open my HTC
Desire, and when I click on this, notice
| | 04:24 | there's the cube transition.
| | 04:26 | I think that was pretty noticeable as
you clicked there, and kind of cool. Maybe
| | 04:31 | a little too much for me, but we'll
look at some other transitions as well, and
| | 04:34 | remember you can certainly make
modifications to each one of those transitions.
| | 04:38 | But you can build some pretty cool
apps pretty easily utilizing the
| | 04:42 | transitions that ship with the Flex framework.
| | 04:46 | So let's try the zoom transition
and see how that looks, so I'm going to go
| | 04:50 | back to my code here and my
codeSnippet and just cut and paste the zoom
| | 04:56 | transition into my Flash Builder here.
So I'm going to scroll down here, back to
| | 05:02 | my changeHandler, and
let's examine this transition.
| | 05:06 | So what I'll do is just delete the
code that's already there, and I will just
| | 05:12 | cut and paste. Okay, perfect!
| | 05:15 | I need to get rid some of that white
space, and then I'll add the import for
| | 05:19 | my ZoomViewTransition.
| | 05:21 | I will also add in the import.
| | 05:25 | Here you'll see it gives me an error.
| | 05:26 | It says, "Access undefined
ZoomViewTransition mode," so we'll add in the
| | 05:31 | import for that as well.
| | 05:33 | Notice that eliminates those errors.
So I'll clicks Save again, and what I'll do
| | 05:38 | is just run this, and let's see how this
particular transition looks when I run
| | 05:42 | this project on my Desire. And oh, I like
that one, so take a look at that. It zooms in.
| | 05:50 | So I'll choose--wow, that one is pretty nice.
Again, there are some tweaks that I have to do here,
| | 05:55 | but you can see, right, that that is a
very nice way of displaying the data there.
| | 06:00 | Very cool. Let's look at the sliding transition.
| | 06:03 | So I'm going to go back to my
code snippets here, and go back to my
| | 06:08 | slideTransition, so let's explore
this a bit. And I'll choose Copy here. and
| | 06:16 | here's my changeHandler, just as we
saw before. Okay, I'm going to paste
| | 06:21 | this transition in.
| | 06:24 | Again, same thing, right.
| | 06:25 | I'm just using a different transition,
so I have to add the imports here, so
| | 06:29 | I'll import my SlideViewTransition.
| | 06:30 | You'll see that it eliminated both of
those this time, and then you'll also see
| | 06:35 | I'll import the SlideViewTransitionmode,
as you see there. I have a comment in
| | 06:41 | there. You can also choose, right, not
only uncover, but also cover, and push
| | 06:45 | modes there as well.
| | 06:46 | And we'll take a look at
the SlideViewTransition.
| | 06:49 | So let's go ahead and run this one, and let's
see what that one looks like. That's nice, too.
| | 06:56 | I love the way that just slides in.
| | 06:58 | So I'll take quick look one more time.
Pretty neat. Okay, that's very cool, and
| | 07:05 | let's try one more here.
| | 07:07 | So I'll go back to my code snippets,
and what I'll do it let's try the Fade
| | 07:13 | transition and see how that looks.
| | 07:15 | So this one's a little less code than
the others, and this will just add a fade
| | 07:21 | effect. So here I'll add this in,
and okay, very cool. That looks good!
| | 07:28 | I'm just going to need to of course add in
the import here, and that should add the import.
| | 07:33 | Let's run this one on our Desire.
| | 07:36 | And of course those of you may also
want to test it on your devices and see
| | 07:39 | how works on your devices, but again,
these are mobile optimized. And that's
| | 07:44 | little less intrusive there when we have the
fading in and the fading out, but I like it.
| | 07:49 | The Flex framework ships with some
great transitions that really can increase
| | 07:54 | the usability and increase the look
and feel of your mobile applications, and
| | 07:58 | Adobe has really worked hard to
optimize these for mobile devices so that they
| | 08:03 | follow best practices, and they'll work
of course on Android phones, on iOS
| | 08:07 | phones, so I encourage you to play
around and look at some of these different
| | 08:11 | transitions.
| | Collapse this transcript |
| Using and styling a mobile tabbed app| 00:00 | The tabbed ViewNavigator classes
are useful for creating an application
| | 00:04 | with multiple sections.
| | 00:06 | It provides a different look and feel than
the ViewNavigator classes that we've looked at.
| | 00:11 | There is a tab bar to support
navigation across the different views, and we can
| | 00:16 | customize the tabs using Cascading Style Sheets.
| | 00:19 | What we are going to do is we are going
to build an administrative application
| | 00:23 | for the executives at our
Explore California tour company.
| | 00:27 | Now, these executives would like to
see, again in a very easy format on their
| | 00:32 | iPhones, the most popular tours, the
most profitable tours, and the best reviewed
| | 00:37 | tours, and they'd actually like to see
some charts and graphs and that kind of
| | 00:41 | thing. And they'd like to be
able to see this on their iPhones,
| | 00:43 | so Flex works very well for
developing this type of application.
| | 00:47 | So let's go ahead and actually build
the beginning of this application for
| | 00:51 | our executive team.
| | 00:53 | So the first thing I am going to do is
just create a new Flex mobile project and
| | 00:58 | we will just simply call this
TourDashboard, as you see here, and then I will
| | 01:03 | click Next, and we are going to
choose a Tabbed Application right here.
| | 01:07 | I will set it up so it will
automatically reorient and will also automatically
| | 01:10 | scale because some of our executives
have iPhone 4s, some have iPhone 3GSs.
| | 01:16 | Not everyone has yet upgraded to the
iPhone 4, so we want to make sure that the
| | 01:19 | scaling happens automatically.
| | 01:21 | Okay, we are not targeting Google and
Android because the executive team at
| | 01:25 | Explore California is strictly Apple.
| | 01:27 | So we are going to just target Apple iOS.
| | 01:29 | That makes it a bit easier. I will click Next.
| | 01:31 | No application server type in this case
for now, and we're just going to say the
| | 01:36 | TourDashboard, we're just going to say
TourDashboard.mxml, and notice when I click here and I
| | 01:41 | choose the tabbed navigation, you will
see it's very different than the View
| | 01:45 | Navigator application.
| | 01:47 | So you will see it doesn't
create us a Views folder.
| | 01:49 | There's no firstView
property, or anything like that.
| | 01:53 | Let's just go ahead and
create this ourselves now.
| | 01:55 | So the first thing I want you to do
is drag in the images, because we are
| | 01:59 | going to use some images for our application,
just to make things look a little bit better.
| | 02:03 | So in your exercise files, just grab
your images and drag and drop that right
| | 02:08 | into the source folder that you see
there, and just close off Windows Explorer
| | 02:12 | there, or whatever platform you happen to be on.
| | 02:15 | So go back to your TourDashboard, and
then let's just simply go ahead and add in
| | 02:21 | some ViewNavigators that
will all be organized into tabs.
| | 02:25 | So what I am going to do is I am
going to just add in a spark ViewNavigator
| | 02:31 | component like you see here, and I'll
give this an ID of popular. And I will
| | 02:36 | specify the width of this is equal to
100% of the available real estate; the
| | 02:41 | height is also equal to 100% of the
available real estate, as you see there.
| | 02:47 | And then we'll just say the firstView is
going to equal a popular component where we
| | 02:52 | will put in our charts and
graphs and that sort of thing.
| | 02:55 | So we will eventually create a views
folder, and we will name our component
| | 02:59 | Popular, so go ahead and add that in
here, and then we are going to create a
| | 03:03 | custom icon here as well.
| | 03:06 | And what we're going to say here is we
are just going to say icon, and we are
| | 03:09 | icon, and we are going to
embed the icon directly into our SWF file.
| | 03:14 | So, the icons are extremely small.
| | 03:16 | It will just increase the performance since
it won't have to load in off the Internet.
| | 03:21 | So we are going to bake these into the SWF.
| | 03:23 | It's fine because it's very small.
| | 03:25 | So I am going to say @Embed, just like
so, and then I am going to simply say
| | 03:31 | icons. And this is the most popular,
so we'll use our applause icon.
| | 03:36 | So I am going to say applause.jpg, as you
see there, and you can just simply close
| | 03:42 | off that ViewNavigator class.
And let's add in the other ViewNavigator.
| | 03:46 | Just to save some typing here,
I will just simply cut and paste.
| | 03:50 | So I will copy that over here, and I'll
paste this in, and the next component is
| | 03:56 | going to be the most profitable.
| | 03:58 | So I have a feeling our executives
will probably spend the most time in this
| | 04:01 | tab. And then change views here,
instead of Popular, change that to Profit, and
| | 04:07 | then let's put in--there is an icon
that we've already created in Photoshop
| | 04:11 | here called dollar.jpg.
| | 04:13 | So you'll see that, and that's pointing there.
| | 04:18 | Let's add in one more tab here, and
this will be for best reviewed tours.
| | 04:24 | So here I have my @Embed.
| | 04:26 | I have icons and let's specify.
| | 04:30 | We have a thumbs-up sign,
so we will say thumbs-up.
| | 04:33 | Our first view will be Review, as you
see here, and then this will simply be
| | 04:39 | called reviewed for our
best reviewed tours here.
| | 04:45 | So we're just creating the simple
administrative dashboard interface for
| | 04:50 | our executive team.
| | 04:51 | Okay, so now what I'd like you to do is
just click Save and then in your default
| | 04:56 | package here, or in your source folder,
let's just create a new folder, and let's
| | 05:03 | call that folder views.
| | 05:06 | And then inside of this views folder,
views package, I want you to create a
| | 05:11 | new MXML component based off of the view class.
And let's create our first one called Popular.
| | 05:17 | We will create another component in
here, and I'll simply call that Profit.
| | 05:24 | I will create another component in here
called Review, and I will click Finish.
| | 05:32 | So now I have these three components:
| | 05:34 | I have Popular, Profit, and Review.
And then I have my TourDashboard here.
| | 05:40 | Let's now go back up to my Run
configurations, and I am going to go to my
| | 05:43 | Mobile Application.
I am going to set up a new Run Configuration.
| | 05:47 | We are testing this of course on Apple iOS.
| | 05:50 | I am going to say on the desktop, and
let's try this first on an iPhone 4.
| | 05:56 | And remember, the iPhone 4
has a very high resolution.
| | 05:58 | So I am just going to click Run,
and you'll see there's a quick error.
| | 06:02 | So let's see what the problem is, and so
you'll see in here if I look at my code,
| | 06:09 | I've actually pointed this
to the wrong folder here.
| | 06:11 | So you will see I said icons.
| | 06:13 | Remember, I put this in an images, and
then there's an icons directory here.
| | 06:18 | So let's just fix that
so it points to the right place.
| | 06:21 | That's always important.
| | 06:22 | So I will just add an images here.
| | 06:25 | Again, I will say images/icons.
| | 06:29 | Then if you hit Save, that
should resolve those errors.
| | 06:33 | I will just do a quick project-clean to
make sure everything else is resolved.
| | 06:36 | You will see I no longer
have any errors in my project.
| | 06:40 | Let's go back to my Run
Configuration here, my TourDashboard.
| | 06:44 | Here's my Apple iPhone 4. I will click Run.
| | 06:48 | Remember, the Apple iPhone 4 is a very
high-resolution device, so it's difficult
| | 06:52 | to test here in Portrait mode.
| | 06:54 | So what I will do is I will just
click on Device and I'll rotate left, and
| | 06:59 | notice if I click on each
tab, it changes automatically.
| | 07:03 | So here's my most popular tours, here's
my most profitable tours, and then you
| | 07:08 | will see the thumbs-up
sign, my best reviewed tour.
| | 07:10 | So I can see that here, and let's go
back here to my Run Configurations. And the
| | 07:16 | iPhone 3GS of course has
a much lower resolution,
| | 07:20 | so let's test it on the iPhone 3GS.
And we should see in Portrait mode, ah,
| | 07:26 | that fits in the real estate I have
available here. Because of the resolution I
| | 07:30 | am at, you can see that fits a
lot better in Portrait mode here.
| | 07:34 | Again, we will still of course work
in Landscape mode as well when the user
| | 07:39 | rotates the device, but you can
see the actual TourDashboard there.
| | 07:45 | So now of course our executives are
pretty demanding and they want something
| | 07:49 | more than just the style that we currently have.
| | 07:52 | So what we want to do is actually
add in some better styling so we can
| | 07:56 | brand this for our corporate logo here, so
we match this to the Explore California logo.
| | 08:01 | We can't just have that boring black and white.
| | 08:03 | So what I've done here is just
included some CSS, some Cascading Style
| | 08:08 | Sheets, here in your exercise files
in the code snippets, just to avoid us
| | 08:13 | typing, and this is the CSS that's
used on the web site here, with some
| | 08:17 | modifications. But these match sort
of the Explore California corporate
| | 08:21 | colors and corporate imaging.
| | 08:23 | So you'll see here it says Movie 3-5.
| | 08:26 | Just take this code here from your
code snippets and just copy it out and go
| | 08:33 | back to Flash Builder and go
ahead and add in a style block.
| | 08:38 | Now, normally of course in real life,
we are in training here but probably
| | 08:41 | take this style block and put this in
a separate file, as opposed to adding a
| | 08:46 | style block inline.
| | 08:47 | You'd have your CSS, so you could
use it with multiple different projects,
| | 08:51 | that sort of thing, so we can see how it
works, and then just paste that code in there.
| | 08:55 | I think it actually automatically
added the namespace, so we only need this
| | 08:59 | once, so you can just eliminate
the namespace there. Perfect!
| | 09:04 | You will see we specified, for all the
action bars--and yet we don't have any,
| | 09:09 | but this is just the corporate style
sheet that Explore California uses--
| | 09:12 | you will see we have the action bar here.
| | 09:14 | You'll see we have the title display.
| | 09:17 | So this is pointing it for
what's going to be the title.
| | 09:20 | You'll see for the Tab
ViewNavigator, the tab bar.
| | 09:22 | We are customizing it with a particular font.
| | 09:25 | We are setting up the icon placement,
we are setting up some custom colors here
| | 09:29 | for the tab bar in the Tab View
Navigator, and we should see this alters our
| | 09:34 | application, so it follows
corporate branding much better.
| | 09:38 | So what I am going to do is just
go back to my Run Configurations.
| | 09:41 | We will make sure we test it on
the iPhone 3GS, and I'll click Run.
| | 09:46 | You should see that now this
utilizes the fonts and everything, and our
| | 09:52 | application is branded now for the
Explore California and utilizing those much
| | 09:58 | brighter nicer colors that
comes with the stock Flex component.
| | 10:01 | So again, you can use the CSS style
sheets and you can customize that, and
| | 10:06 | we've now learned all about the
ViewNavigator classes, as well as the
| | 10:10 | TabNavigator classes.
| | Collapse this transcript |
| Using ActionBar in a Flex mobile app| 00:00 | The ActionBar can persist across
all views of our application and can be
| | 00:05 | useful for items like navigation
buttons, or other buttons related to actions
| | 00:10 | on the current screen, or even for
a title customized for the current
| | 00:13 | information displayed.
| | 00:15 | For each view, you can specify
ActionBar content, and there are three different
| | 00:19 | areas, including navigation content,
title content, and action content.
| | 00:24 | If you want the ActionBar to persist
across all the views, you set the ActionBar
| | 00:28 | in the main application file.
| | 00:30 | There is also a property called
ActionBar Visible that can be set for each view
| | 00:35 | at run time to turn the ActionBar on and off.
| | 00:38 | Let's create a Back button that will
persist across all the views of our Explore
| | 00:42 | California end-user application
to be used as navigation content.
| | 00:47 | So you'll see I have the 3_06
project opened here, and this is our Explore
| | 00:51 | California application just as we left it.
| | 00:53 | So if I run this and set up a Run
Configuration, you'll see here of course right
| | 00:58 | here is my list of different views in
the wine country and my different tours.
| | 01:02 | Right now, I just have to
use Back button on the device.
| | 01:06 | But again, this won't work so well for iOS
because of course iOS doesn't have a Back button.
| | 01:10 | So we want to actually build a Back
button on the screen, and we can have this
| | 01:15 | apply to both Android and iOS, or
just iOS, especially if we use the
| | 01:19 | capabilities object to test what
platform we're currently on. We can do that.
| | 01:24 | So what I want you to do is
go to your Main.mxml here.
| | 01:28 | This means by putting it here, this
navigation content will persist across all
| | 01:32 | of the different views.
| | 01:33 | So what I'm going to do is I'm just
going to specify spark, and I'm going to say
| | 01:38 | navigationContent right here.
| | 01:40 | I'm going to specify
this property here, like so.
| | 01:44 | Then inside of the navigationContent
I'm going to add a simple button control.
| | 01:49 | So I'm going to say spark
button. I'll say Label.
| | 01:53 | Let's just simply say Back, as you see there.
| | 01:57 | Then on the click event of the button
I'll reference my navigator class, like so.
| | 02:03 | I use the method here called popView.
| | 02:06 | Remember, before we used
pushView to push the new screens.
| | 02:09 | This will return us to the view we
were just at, again handling all of the
| | 02:13 | instantiation of the objects, handling all the
memory management for us when I do this popView.
| | 02:18 | So you'll see here I say popView. Close.
| | 02:24 | Let's see what happens
when we test our application.
| | 02:26 | Now, of course in real life we'd
probably want to style or skin our button and
| | 02:30 | have it have a better look and feel.
| | 02:32 | But just so we understand the concept
of navigation content and ActionBars,
| | 02:36 | let's go ahead and run this on our device.
| | 02:39 | Now you'll see that there is a Back button.
| | 02:41 | So if I click here under a Week of Wine,
for example, and I click Back instead
| | 02:45 | of clicking the Back
button on the Android device,
| | 02:48 | you'll see that that works fine, as you see here.
| | 02:50 | Now, you'll also see that it's added it
across all views, and it doesn't make a
| | 02:54 | lot of sense in this view.
| | 02:56 | If I go back from that view, all of a
sudden I'm stuck as the end user,
| | 03:00 | because I just went back to some place
it didn't exist when I did the popView.
| | 03:05 | So we can actually fix that, and let's
go back to our first view here, which is
| | 03:11 | of course MainHome.View.
| | 03:13 | And on this view, let's add a property,
and let's just make navigationContent set to nothing.
| | 03:20 | So here I'm just going to say
<s:navigationContent/>, and I'll just close off my tag like that.
| | 03:29 | So now I run this, like so, I click here,
| | 03:34 | I click Back, and notice there is no
Back button on my main front screen here,
| | 03:41 | so because I added that
navigation content there.
| | 03:44 | So the action and the navigation
content lets us persist controls or data
| | 03:50 | across multiple views of our mobile application.
| | 03:54 | So there's really no substitute for
actually testing our application on the device.
| | 04:00 | So what I've done is I've gone through
the process of actually installing this
| | 04:04 | on the device, set up a new
Provisioning profile, and I pointed that to my
| | 04:08 | Apple developer account and to the
certificate that we learned about how to
| | 04:11 | create in earlier movies, and then
I built the IPA file utilizing Flash
| | 04:15 | Builder, and then I added it to my
iTunes Library and synched that with my device
| | 04:20 | to install this to my iPhone.
| | 04:22 | So now I'm just going to click on the icon here.
| | 04:24 | This is still the debug version I created,
so it says Main-debug.
| | 04:28 | So I'm going to click right here,
and we should see all of the different
| | 04:33 | tours that are available.
| | 04:34 | Notice I can scroll through here.
| | 04:35 | It's all touch enabled. Very nice!
| | 04:38 | I can click on one of the tours--
in this case I'm clicking on
| | 04:40 | Coastal Experience.
| | 04:43 | You can see I'm going to need to do
some tweaks to be able to make sure that my
| | 04:47 | text is displayed,
but that's not important for now.
| | 04:49 | What we're testing is the Back button.
| | 04:51 | So let's test to make sure our iOS users
have a way to navigate around our application.
| | 04:56 | So now I've just clicked on the Back
button, and you'll see the Back button works
| | 05:00 | perfectly, and it no longer appears
in the front part of our application.
| | Collapse this transcript |
| Understanding the View Lifecycle| 00:01 | It is important as programmers to
understand how the Flex mobile framework
| | 00:04 | handles the creation and the
destruction of views, so we can tell the mobile
| | 00:09 | framework what needs to happen when.
| | 00:11 | So, for example, when I click here, it
destroys the original view and puts in the new view.
| | 00:17 | Now, of course we can keep the
information through the data property and that
| | 00:20 | sort of thing, but there are
situations where we might not want to destroy
| | 00:25 | the original view. And we can capture
the event, so we can see exactly when a
| | 00:29 | view was activated, when a view was
deactivated, and we can prevent this from happening.
| | 00:34 | Again, there may be situations where
we want that to happen, for example if
| | 00:37 | our view is really complicated and we don't
want to take the time to re-create it again.
| | 00:41 | So let's explore the view
lifecycle of our ViewNavigator components.
| | 00:47 | It's very exciting.
| | 00:48 | So you'll see in the exercise files here,
I've just added some code snippets that
| | 00:53 | we can use to sort of get a better idea
of how views are created and destroyed
| | 00:58 | by the Flex framework.
| | 00:59 | So you'll see there is a simple init
function here, and if I just scroll down,
| | 01:03 | go ahead and just copy these
functions here, and I'll just copy these to my
| | 01:07 | clipboard. And I'm going to
return back to Flash Builder here.
| | 01:12 | So I'm going to go to my first view here.
| | 01:15 | You'll see in your first view
there is the Views folder here.
| | 01:18 | I am going to open up the MainHomeView.
| | 01:21 | If I scroll down, I'm just going to
paste this right approximately here on line
| | 01:26 | 22 at the beginning of my script block,
right after my myTrips:ArrayCollection.
| | 01:32 | I'm going to look up, and you're going to see
that there is an init function that I've created.
| | 01:37 | You'll see that I'm using addEventListener.
| | 01:39 | I'm using the ViewNavigatorEvent class.
| | 01:42 | I'm going to use this VIEW ACTIVATE event.
| | 01:44 | When the view is activated, I'm going
to call this a method right here that
| | 01:48 | simply executes a trace that says View
Activate, and so on and so forth, when the
| | 01:53 | view is deactivated,
and as the view is removing.
| | 01:56 | So by looking at this, we'll sort of
understand a little bit better about how the
| | 02:00 | views are created and destroyed and
what events we can capture as developers.
| | 02:05 | So the first step here is just
to make sure that you import the
| | 02:08 | ViewNavigatorEvent class because
we're going to need to use that.
| | 02:11 | So just move your cursor to the end of
the class, press Ctrl+Space, and that will
| | 02:16 | get rid of all of the warnings and the
errors. And then of course we need to
| | 02:20 | actually call our init method.
| | 02:23 | So here I'm just going to say init,
and I'm going to type in paren, paren, and
| | 02:28 | then I'm going to hit Save. And you're
going to see I'm going to call my init
| | 02:32 | method, and that will execute all of my events.
| | 02:35 | So now let's debug this.
| | 02:36 | I am going to open up my console here,
and I'm going to just click on Debug, and
| | 02:41 | we should see, it's going to debug my
application. And you'll see it immediately
| | 02:45 | says View Activate, as you see here.
| | 02:48 | So we can see that that was called
as soon as my view was activated.
| | 02:51 | Now, if I click on it, what we should see is
we should see first removing this call.
| | 02:55 | So we can capture that while it's
actually being removed from memory, and then
| | 02:59 | there should be another event once it's
completely removed from memory that's
| | 03:02 | fired called View Deactivate,
and you'll see that that works perfectly.
| | 03:07 | Here's my view removing
and my view deactivated.
| | 03:11 | So that's very, very useful.
| | 03:13 | We can also prevent the view from
actually being destroyed, and to do that on
| | 03:18 | the view, we can specify a
property called destructionPolicy.
| | 03:22 | So we can set that up.
| | 03:24 | So again, by doing this and destroying
each of the views, Flex is keeping our
| | 03:28 | memory footprint small, and the views
are pushed and popped and everything is
| | 03:32 | handled automatically, but there are
times certainly as developers that we
| | 03:35 | need to override that.
| | 03:37 | So I'm going to just scroll
up here to the top of my view.
| | 03:41 | What I'm going to do is I'm going to
add a property here on the view, and this
| | 03:45 | property is called destructionPolicy.
| | 03:50 | You'll see there is a property in here
called destructionPolicy, and I'm just
| | 03:52 | going to specify this to Never.
| | 03:54 | So this means that this view will
never be destroyed when we set that up.
| | 03:59 | So that can be very useful.
| | 04:01 | So we can set that up as well.
| | 04:03 | Now we can also maintain the entire
application in case it's closed by Android itself.
| | 04:08 | So for example, if a user takes a
phone call in the middle of working with our
| | 04:12 | application, we can set it up so they
can come back to exactly the same point
| | 04:17 | in the application. Or if they're inside
of our application and all of a sudden
| | 04:21 | they decide to switch to another
application to check their Facebook or
| | 04:24 | whatever they're checking,
| | 04:25 | we can set it up so that that can
automatically, when they come back to our app,
| | 04:29 | it will be exactly in the same state.
| | 04:32 | So to do that, let's save our
MainHomeView and then let's go to Main.mxml here,
| | 04:38 | which is our ViewNavigator, and we add
a property here, and the property here
| | 04:43 | that we add is called persistNavigatorState.
| | 04:49 | I can just set this to true.
| | 04:52 | Then wherever I am in the application,
I will be immediately returned there.
| | 04:56 | So let's actually test this out.
| | 04:59 | We could see how this works.
| | 05:00 | So now if I click Save, you'll see I
have persistNavigatorState, and I'm just
| | 05:05 | going to simply run my application.
And you'll see that of course my
| | 05:08 | application starts up.
| | 05:10 | Notice because I had
persistNavigatorState set to true, it takes me back to
| | 05:15 | exactly where I was.
| | 05:16 | Again, I'll prove that to
you by testing it again.
| | 05:19 | Let's say I say Big Sur
Retreat. Here's my Big Sur.
| | 05:22 | You can see my Big Sur image.
| | 05:24 | I close that, completely gone.
| | 05:26 | I'm in another application, playing
the game, going to Facebook, checking the
| | 05:29 | news, whatever it is, and then I run.
My splash screen still appears, but it
| | 05:34 | immediately takes me back to where I
was in the application, and that's all
| | 05:38 | because I set this
persistNavigatorState to true.
| | 05:42 | So, crucial to developing a
well-performing application is having this ability
| | 05:47 | to override some of these default
behaviors and be able to set this all up with
| | 05:51 | the views.
| | Collapse this transcript |
|
|
4. Utilizing Mobile ComponentsLoading HTML into a mobile AIR app| 00:00 | Many of today's mobile applications
blend both application and web content.
| | 00:06 | The StageWebView classes addresses an
often-required use case, that of displaying
| | 00:11 | rich HTML content in a mobile AIR application.
| | 00:15 | What we can do as developers is we
can actually embed HTML content directly
| | 00:20 | into our mobile application and render it
using the platform's native HTML rendering engine.
| | 00:27 | Let's explore how to do this.
| | 00:28 | We are going to have to clean up our
application a little bit here, and we're
| | 00:31 | kind of long overdue for it.
| | 00:33 | But let's take a look at our application again.
| | 00:34 | I am going to just test it on Apple iOS,
and I am going to choose the Apple 3GS,
| | 00:40 | and I am going to click Run.
| | 00:41 | You are going to see your application of course.
| | 00:44 | Here's our splash screen.
| | 00:45 | Now if I click here under A Week of
Wine, for example, you'll see here that I
| | 00:49 | have my image, and I have some text here.
And you could see the price and on some
| | 00:55 | platforms, and depending on which tour I
click on, this has actually just cut off
| | 00:59 | because I don't have scrolling
enabled or anything like that.
| | 01:02 | So let's sort of clean up this interface
a little bit before we do anything at all.
| | 01:05 | So what I am going to do is I
am going to open up my view.
| | 01:09 | This is my TripDetails view.
| | 01:12 | So let me go over here into Design mode,
and the first thing I am going to do is
| | 01:16 | just add in an HGroup container over here.
| | 01:20 | Let's put our button inside of the HGroup
container, and let's go back to Source mode here,
| | 01:27 | so now you will see here. And then
let's also make sure that our image control
| | 01:31 | will be arranged horizontally as well.
| | 01:35 | So I am going to put that in my HGroup
container, and then you'll see you have
| | 01:40 | your text area here.
| | 01:42 | Let's put our price above the text area,
because everyone wants to know what the
| | 01:47 | price of each tour is.
| | 01:49 | So let's click here.
| | 01:51 | I will add a Dollar sign to sort of
pretty that up a little bit. And then in
| | 01:54 | our text area, very important, let's make
sure that we enable touch-enabled scrolling.
| | 02:00 | So you will see that there is a setting
in here called verticalScrollPolicy, and
| | 02:04 | I'll set this is equal to on.
| | 02:08 | So, all of our tours have lots of
text, so we always need to enable our
| | 02:13 | verticalScrollPolicy.
| | 02:14 | So now I am just going to click Save,
and then I am going to click Run here, and
| | 02:19 | you should see that our application
looks a little prettier right now, and you'll
| | 02:23 | see, so I have my HGroup up here.
| | 02:26 | I can now access this Go to
Site, and you should see, oh,
| | 02:29 | look at that, scrolling is
all enabled. We have a price.
| | 02:32 | It looks much better! You guys can still tell I am
not a designer, but at least we are getting somewhere.
| | 02:37 | This is more usable anyway.
| | 02:38 | So now if you click here, what we want
to happen is when the user clicks on Go
| | 02:42 | to Site, we want it to open up a
brand-new component and load the HTML directly
| | 02:48 | into our AIR application.
| | 02:50 | So let's explore how to do that.
| | 02:51 | I am going to close this off, and the
first thing I would like you to do is
| | 02:56 | open up your TripDetails component
over here, locate your button, and let's
| | 03:01 | just add a click event to our button.
And here I am going to reference my navigator class.
| | 03:06 | I am just going to simply say
navigator.pushView here, and then I am going to
| | 03:12 | say we are going to create a new
component called TripHtml, and I am going to
| | 03:17 | pass it the data property.
And this, I believe, is under link.
| | 03:23 | We'll check that in just a moment,
we'll look at the data structure.
| | 03:26 | But I believe this is sent as link.
| | 03:29 | So type in data.link, and then of course
close off your click event here and hit Save.
| | 03:35 | What I'll do is I will just simply open
up Firefox, and I'll just go to my tours
| | 03:43 | site, and you'll see the link to the
web site here is Explore California.
| | 03:48 | It's given an ID here, and you can see here.
| | 03:51 | I am going to actually have to talk
back to my database developer and just make
| | 03:54 | sure that they send back the mobile web site.
| | 03:57 | I'm not sure that this is
not the mobile web site.
| | 03:59 | But again, it'll load in HTML
either way. The user might have a better
| | 04:02 | experience if it's a mobile web site,
and design for the smaller screen, but we
| | 04:06 | will be able to continue this and
see exactly how it loads in either way.
| | 04:11 | Let's go back to Flash Builder and make
sure your TripDetails component is saved.
| | 04:16 | Then what I want you to do is go to your
Views component and let's create a new component.
| | 04:22 | So I am just going to say New > MXML
Component here, and I am going to simply
| | 04:27 | call this TripHtml, like you see there, and
it's going to be based on this View component.
| | 04:33 | So I am going to go ahead and click OK.
| | 04:35 | Here's my brand-new component, and the
first thing that I am going to do is just
| | 04:40 | simply add in a script block here.
| | 04:42 | So I am just going to simply say
fx:Script, as you see there.
| | 04:49 | Then the first thing I want to
do is instantiate my StageWebView.
| | 04:52 | So I am going to create a new variable here.
| | 04:55 | I am going to say protected
var, and I'll call it webView.
| | 04:58 | I am going to then type this as a
StageWebView, as you see here, and I am going
| | 05:03 | to say is equal to new StageWebView.
| | 05:07 | This is where I can load my HTML directly into.
| | 05:10 | So I am going to say new StageWebView,
and that's going to add this in here.
| | 05:15 | So now I'm going to simply just
create a new function here called init.
| | 05:20 | I am going to say protected function init().
| | 05:23 | I will say :void, as you see there.
| | 05:27 | Then, just in case I forget,
let's add a creationComplete
| | 05:32 | that will call this init function.
| | 05:35 | So here I am going to say init, like so,
and then I am going to say protected
| | 05:39 | function init, and then I am going
to reference my webView variable here.
| | 05:44 | So I am just going to say webView,
and I will say .stage = stage, as you
| | 05:50 | see there. Perfect!
| | 05:52 | Then I am going to specify how
big I want the HTML area to be.
| | 05:57 | We will just create a rectangle to show that.
| | 05:58 | So I will say webView, and I'll use the
property viewPort to show this is where
| | 06:03 | the HTML will actually be
displayed inside of my AIR application.
| | 06:07 | So I will say webView.viewPort, and
let's just create a new rectangle here.
| | 06:13 | I will specify, okay, let's put this at
X 20, Y 100, and let's make it 450 pixels
| | 06:20 | wide and 450 pixels high.
| | 06:24 | Again, you might have to talk to your
web developer and see exactly how big that
| | 06:28 | site is that's coming back.
| | 06:29 | You can see all of that.
| | 06:30 | Now it's as simple as just saying
webView.loadURL, and then what we are going to
| | 06:39 | do is we are going to reference
the link that was passed from here.
| | 06:43 | And if you remember when we moved
from component to component, it's always
| | 06:47 | passed in the data property.
| | 06:49 | So I am going to say loadURL, and I am
just going to cast this as a string, and
| | 06:53 | then I am going to reference that data
property. Since that was the only thing
| | 06:56 | that I was sending along in the
data property was just that link,
| | 07:00 | I don't have to worry about
drilling down any further.
| | 07:03 | So you can see that.
| | 07:04 | So now I have webView.loadURL string data,
and that should load that into my viewport.
| | 07:12 | So you'll see I have that,
and then I have my text area component.
| | 07:16 | I think that should be good.
| | 07:19 | So let's go ahead and just click Save,
and what I am going to do is I'm just
| | 07:24 | making sure that all my imports have been added.
| | 07:27 | I might want to just make sure that I
have an import for the StageWebView.
| | 07:30 | That should be good, and then I am
going to just run this, and let's explore
| | 07:36 | if this works or not.
| | 07:37 | So there's my application. All right!
| | 07:40 | I will click on, for example, The
Channel Islands Excursion, and I will click on
| | 07:45 | Go to Site, and look at that.
| | 07:48 | It loads this actually from the web,
so you can see, and it's fully functional.
| | 07:52 | If I click on Tours here, you could see here.
| | 07:55 | Now, you could see in this case my
web developer didn't exactly load the
| | 07:58 | information in because this is designed for
a desktop web site, not for a mobile site.
| | 08:03 | So you can see the end user is not
exactly having the best experience.
| | 08:06 | But if we just changed our RSS feed so it's
pulling in the appropriate mobile web site,
| | 08:12 | that would be a much greater
experience, and you'll see that everything works
| | 08:15 | here exactly as we expect.
| | 08:18 | So you can see that. Ah!
| | 08:19 | So you'll see here actually, not
exactly as I expect, because when I get back,
| | 08:23 | this still hangs out here.
| | 08:25 | So I can go ahead and fix that simply by
disposing of it when I go to a different state.
| | 08:33 | This gets back to the view life cycle
and why this can be very useful.
| | 08:37 | So here if I go back to my Trip.html,
we can just simply add in a new function
| | 08:43 | here called protected function
onRemove. And I am going to say
| | 08:50 | event:ViewNavigatorEvent,
which is going to be passed here.
| | 08:56 | I am going to say void.
| | 08:58 | There is my function here, and then
I'll just say this.webView. And now I can
| | 09:02 | just get rid of it when I say dispose.
| | 09:07 | I might want this event to actually
be called when it's actually removing
| | 09:13 | that particular view.
| | 09:14 | So I can set up an addEventListener, just
like we learned earlier, and I could say
| | 09:19 | ViewNavigatorEvent.REMOVING, as you
see there, and then I can reference that
| | 09:28 | method that I just created called
onRemove, and that will again get rid of it.
| | 09:33 | So now go ahead and click Save and go back
to Main, and again try to run this again.
| | 09:40 | There's my application.
| | 09:42 | Again, I go to my different sites.
| | 09:44 | I go to Big Sur Retreat and I go
to Go to Site, and you'll see that.
| | 09:48 | Now, if I click Back, it
should automatically be destroyed.
| | 09:52 | So that's just an example of how
important the view life cycle is to
| | 09:56 | mobile development.
| | 09:58 | Now we have just explored how we can
load HTML natively directly into our
| | 10:04 | AIR application.
| | Collapse this transcript |
| Loading a web page into a device's native browser| 00:00 | In the last video, we took HTML and we
loaded it directly into our AIR application.
| | 00:06 | Now, it's also possible, instead of doing
that, to load it into the device's browser.
| | 00:12 | So, in order to do that, we have to
start the browser from our AIR application.
| | 00:17 | So let's explore how to do that.
| | 00:18 | I'm going to open up our application
that we created from the last movie, the
| | 00:23 | TripHtml, and you'll see of course
here's how we've set up our viewport.
| | 00:28 | We've loaded the HTML directly into our
AIR application, but let's add a button
| | 00:32 | right below our script block here.
| | 00:35 | So I'm just going to say s:button, as
you see there, and on this button I'm
| | 00:41 | going to simply just add in a label here,
and we'll just say Load page in native browser.
| | 00:52 | Then what I want you to do is add in
a click event, and I'm just going to
| | 00:56 | simply say navigateToURL, and then I'm going to
simply make a new URL request, as you see here.
| | 01:07 | Then I'm going to simply specify exactly
what I specified to load in the AIR application.
| | 01:12 | So I'm going to cast it as a string,
and then I'm going to simply say Data, and
| | 01:17 | then I will just close off my
parentheses for my URL request, and that should
| | 01:22 | load it into the native
browser of whatever device you're on.
| | 01:25 | So if you're on an iPhone,
it will load it into Safari,
| | 01:29 | it'll load it into the mobile web
browser on a Droid or Android phone, and then
| | 01:34 | of course if I'm on a Windows machine,
it'll load into whatever default browser
| | 01:38 | I've specified on the Windows
machine if I'm testing from Flex.
| | 01:41 | So let's go ahead and test that and
make sure that that actually works.
| | 01:45 | So I'm going to click Save, and what
I'm going to do is go back to my main
| | 01:49 | application and run this.
| | 01:50 | I'll set up a mobile profile.
| | 01:53 | Let's test this on the iPhone.
| | 01:54 | So we'll test this on the 3GS,
and then I'll click Run, and there's my
| | 01:59 | application, and let me just
browse to a different trip here.
| | 02:03 | So let's do my Big Sur Retreat.
| | 02:06 | I'll click on Go to Site.
| | 02:07 | Notice it loads it in, but it doesn't
appear all that well because again, it's
| | 02:11 | not optimized for mobile devices.
| | 02:13 | But now if I click on Load page
in native browsers, you'll see that
| | 02:16 | it immediately works.
| | 02:18 | But in this case my native browser is
set to Chrome, and of course this is going
| | 02:21 | to look great because I'm on a desktop machine.
| | 02:24 | But you can see again this site may
not be optimized for mobile, so when you
| | 02:27 | test this on a mobile device, it may
look a little bit different. But that's how
| | 02:32 | you can actually access the
native hardware functionality.
| | 02:35 | You can also use that URL request to do
things like access the phone from an AIR
| | 02:39 | application, so it can dial a number
or send an SMS, and there's all kinds of
| | 02:43 | things you can do through that URL
request to access sort of the native
| | 02:47 | functionality on the device.
| | Collapse this transcript |
| Using the Scroll container| 00:00 | In a mobile Flex application, when you
navigate to a new view, the old view is
| | 00:05 | automatically destroyed.
| | 00:07 | If you have a long list of items in a
list, the scroll position will be lost
| | 00:12 | when navigating between the different
views, even if you've set up the Persist
| | 00:16 | Data view like we saw in an earlier movie.
| | 00:20 | In this example, we're going to
explore how to save that initial scroll
| | 00:24 | position in the application, and we're
going to utilize our Trips List so that
| | 00:29 | when a user goes to a different view,
it remembers exactly what trip they had
| | 00:34 | clicked on earlier.
| | 00:36 | Now, this may seem a little bit overkill
for our Trips application, but this can
| | 00:40 | actually be a very, very useful
technique when you're dealing with rows and rows
| | 00:44 | of data because the user may need to
exactly be where they are, and can really
| | 00:49 | affect the usability of a mobile application.
| | 00:52 | There is actually a fair
amount of code involved here,
| | 00:55 | so I'm going to just open
up my Trips application here.
| | 00:59 | You'll see that, and then also
open your main and then open your
| | 01:03 | MainHomeView.mxml. And I'm just going
to minimize Flash Builder here, and I'm
| | 01:09 | going to open up my codeSnippets text file here.
| | 01:13 | I want you to just locate your Movie 4-2
and just take these methods and just
| | 01:18 | cut and paste these methods into
your script block in your MainHomeView.
| | 01:23 | So I'm just going to copy that, and I'm
going to go back to Flash Builder here.
| | 01:28 | I'm going to scroll down to the end of
my list block right here, and I'm just
| | 01:34 | going to paste this in here.
| | 01:36 | Let's take a look at what this code
is and sort of how this code works.
| | 01:39 | But before we do that, let's set it
up so the code is called when we need.
| | 01:43 | So again, I'm going to go back up to
the top here, and I'm going to access my
| | 01:48 | Creation Complete method, and I'm
going to call the restoreScrollPosition.
| | 01:55 | So as soon as this is
created, I'm going to call this
| | 01:57 | restoreScrollPosition method here.
| | 02:01 | If you scroll down here,
let's take a quick look at our
| | 02:03 | restoreControlPosition method.
| | 02:06 | Again, if the data is null, it's going
to get out of this, but again, it's going
| | 02:10 | to take the number and it's going to
take this data property that we're saving.
| | 02:14 | Notice we're saving this information on
the data property, and remember the data
| | 02:18 | property is passed to the view
each time the view is instantiated.
| | 02:22 | So it's taking this vertical scroll
position, the horizontal scroll position,
| | 02:26 | and saving it here, and then it's
also taking the max height, and it's also
| | 02:32 | referencing the data group where it's
stored in, in terms of the list--it's
| | 02:35 | referencing that it's vertical scroll
position--and again it's doing some math
| | 02:40 | to actually calculate that, as we can see there.
| | 02:43 | So this code can be very useful, and you're
welcome to use this code in your own projects.
| | 02:47 | If I take a look here, you'll see that,
and then what I want you to do is add a
| | 02:52 | ViewDeactivate to the main application
that will call the saveScrollPosition.
| | 02:58 | So what I'm going to do is go back up
here, and you'll see I'm going to just
| | 03:03 | simply add in some more code here, and
I'm not going to add it to the Creation
| | 03:08 | Complete, but I'm going to say I'm
going to say viewDeactivate, as you see here.
| | 03:14 | So this is going to be called
when this is actually removed.
| | 03:17 | I'm going to say viewDeactivate, and I'm going
to call the saveScrollPosition, as you see here.
| | 03:26 | If you scroll down here,
you'll see that there is of course a
| | 03:29 | saveScrollPosition, and this is just
saving that information to that data
| | 03:36 | property that you saw there.
| | 03:37 | So it's just taking the data vertical
scroll position, the horizontal scroll
| | 03:40 | position, and remember, this
data property is persisted.
| | 03:44 | So this again is a great example of
how you can use the data property to
| | 03:47 | persist this information.
| | 03:49 | Again, if you look at the architecture
of the Trip list, you'll see that there's
| | 03:52 | actually a data group inside of
the Trip list and it's capturing that
| | 03:56 | information for each element in the Trip list.
| | 03:59 | So you'll see that there, very nice!
| | 04:02 | Then what I want you to do is
actually access the List control.
| | 04:07 | So let's scroll down here and access
our List control, and let's add an event.
| | 04:11 | I'm going to add a
preinitialize event to my List control.
| | 04:14 | So I'm going to add a preinitialize
and in this, what I'm going to do is I'm
| | 04:19 | going to call the tripList preinitialize
handler right here, preinitHandler that you see here.
| | 04:27 | I'm going to close that, and let's just
take a look at our preinitialize handler.
| | 04:34 | So you'll see there's a data provider,
and you'll see this is calling an update
| | 04:39 | complete, which will be executed, and you
can see again we're restoring the scroll
| | 04:43 | position, and it's removing these
event listeners, and then it's also again
| | 04:48 | making the data provider change.
| | 04:49 | So again, nothing new here in terms of
desktop Flex development, but you can see
| | 04:54 | the main issue here is that we're
saving this information to the data property
| | 04:58 | for use in a mobile application.
| | 05:01 | So now if I just click on Save and I
go ahead and run this guy, I'll just run
| | 05:10 | this on the desktop,
and let's run it on the iPhone 3GS,
| | 05:14 | I'll click Run and you'll
see it gave me a quick error.
| | 05:19 | So let's take a look at the error.
| | 05:21 | We need to add an event parameter to the
tripList preinitHandler because this is
| | 05:29 | an event, and then I'm going to hit Save.
| | 05:31 | That's what the initHandler is expecting.
| | 05:34 | So now let's just make sure. I might have to
clean the project to get rid of that error.
| | 05:40 | Now I'll go ahead and run this.
| | 05:41 | I'll go back.
Remember, it's persisting where I was.
| | 05:45 | I'll go back to my actual list of trips here.
| | 05:48 | Notice here I've selected Big Sur Retreat.
| | 05:50 | Now if I go back, you should see
that Big Sur Retreat is highlighted.
| | 05:55 | So now, if I click on A Week of Wine,
and again, I go back, even after it's been
| | 06:00 | destroyed because I'm
saving it on that data property,
| | 06:03 | you'll see that A Week of
Wine is now highlighted.
| | 06:06 | So we've explored how to save the scroll
position in a List control from view to
| | 06:12 | view utilizing the data property.
| | 06:14 | So you can save all kinds of
information on that data property, not necessarily
| | 06:19 | the scroll view, though this is a nice
technique to increase the usability of
| | 06:23 | our mobile application.
| | Collapse this transcript |
| Using the PopUp and Menu containers| 00:00 | The ViewMenu component has been
optimized for mobile development.
| | 00:04 | It is automatically created whenever
the physical menu button on an Android
| | 00:08 | device is pressed, but it can also be
created programmatically so that when the
| | 00:13 | user taps an onscreen button on an
iOS device, the menu is also created.
| | 00:19 | On Android, it is automatically
closed when the user clicks outside of the
| | 00:23 | menu area, but we can also set it up
so it can be closed programmatically
| | 00:27 | from our code as well.
| | 00:29 | Let's explore how to use this
new View menu component. Okay.
| | 00:34 | So the first thing, since this is
designed specifically for Android but can
| | 00:38 | also be used on iOS,
| | 00:40 | let's change our project to an Android project.
| | 00:43 | So here's my 4_04 project.
| | 00:45 | What I am going to do is just click on
Properties, and I am going to go to my
| | 00:49 | Flex Build Packaging, and I am
going to go over here to Google Android.
| | 00:53 | I am just going to click on
Enable this target platform here,
| | 00:57 | and then I'll go back to Apple iOS,
make sure you hit Apply, and just
| | 01:01 | disable Apple iOS for now.
| | 01:03 | Click Apply, and then I am
going to click OK. Perfect!
| | 01:07 | Okay. So now what we're going to do
is let's go ahead and open up our
| | 01:12 | MainHomeView.mxml, and let's scroll all
the way down to the beginning of--you'll
| | 01:20 | see we have our navigationContent here.
| | 01:22 | You'll also see that we have a list.
For now, just to get an idea for
| | 01:26 | testing purposes, let's remove the
navigationContent directly below your
| | 01:30 | Declarations block.
| | 01:31 | Mine is a approximately line 113 here.
| | 01:34 | And what I'm going to do is I'm going
to simply just add in a ViewMenuItems
| | 01:41 | property to my component
here, to my View component.
| | 01:44 | So I am going to say ViewMenuItems,
just like so, and then inside of this
| | 01:51 | ViewMenuItems properties, I'm going to
create a ViewMenuItem object for each of
| | 01:56 | the different properties that I need.
| | 01:59 | So here I am going to say s and I am
going to say ViewMenuItem, just like that.
| | 02:05 | I am going to give it an id of tours.
| | 02:06 | We are going to create a button called
tours, called mission, and called contact
| | 02:12 | for our Explore California application.
| | 02:15 | So here go ahead and add a click
event and on this click event just say
| | 02:19 | itemClickInfo, as you see there,
and pass it the event object here. Perfect!
| | 02:28 | And now let's add in an icon, so I am
going to say icon. And we are going to
| | 02:33 | embed actually an image and use that
as an icon in just a moment, but we are
| | 02:38 | going to call this image toursIcon.
| | 02:41 | We are going to embed that.
| | 02:43 | And then let's place our icon on the
left-hand side, and there's a property
| | 02:47 | that makes this real easy called
iconPlacement, and we'll place it on the
| | 02:52 | left-hand side here.
| | 02:53 | Notice the code hinting helps us do that. Okay.
| | 02:55 | You can close your ViewMenuItem object
and close your tag, and then I am just
| | 02:59 | going to take this and copy
this for my other ViewMenuItems.
| | 03:03 | So I'll copy it to the clipboard here.
| | 03:06 | I'll paste this in here, and instead of
calling this one tours, let's call this one mission.
| | 03:12 | I am going to set my icon
to be missionIcon. Perfect!
| | 03:18 | Same thing for the ViewMenuItem.
And then instead of tours, this one is going to
| | 03:23 | be called contact and we are going to
set this up to be a contactIcon. Perfect!
| | 03:30 | So now I have set up my ViewMenuItems, as you
see there. Let's just make sure I Save that.
| | 03:35 | Okay. And now let's add our
icons to our script block.
| | 03:39 | So go to the very top of your script
block where we define our variables, and
| | 03:43 | you can define these after the array
collection that you've already defined.
| | 03:47 | And you'll see that we've included these
icons in the icons directory in your images here.
| | 03:54 | So what we're going to do is just
simply point these to the appropriate place,
| | 03:58 | and I am just going to add a meta tag
here called Embed, and I am just going to
| | 04:03 | say images/icons/tours.png, so there we go.
| | 04:13 | And then I am going to say public var
toursIcon. I am going to define that
| | 04:20 | as a class, as you see there. Okay.
| | 04:24 | And let's do this also
for mission and for contact.
| | 04:28 | So I'll just again copy and paste.
So I'll copy this out here, and I'll just
| | 04:34 | change this instead of tours.png, I'll say
mission.png, and I'll change the name here.
| | 04:40 | So instead of toursIcon,
I'll call this missionIcon.
| | 04:47 | Same thing here. Again, instead of
tours, I am going to change this to
| | 04:51 | contact.png, and then I'm going to change
this to my contactIcon. That is perfect!
| | 05:01 | So now you will see we have
contact, mission, and tours.
| | 05:06 | And then what we're going to do is
we have a code snippet here for our
| | 05:09 | actual itemClickInfo.
| | 05:11 | So I'm just going to go
back to my exercise files,
| | 05:13 | I am going to open up codeSnippets,
and scroll down to exercise 4-4 here.
| | 05:21 | You'll see we have the itemClickInfo.
| | 05:23 | I just want you to take this
code snippet and just highlight the function here,
| | 05:29 | the itemClick function and just click
Copy, and then I am going to go back to
| | 05:34 | Flash Builder here and I am going to
scroll down to the end, and I am going to
| | 05:40 | add this itemClickInfo.
| | 05:42 | So this itemClickInfo, we set up
so it's going to be called when they click on
| | 05:46 | each of the menu items, and it's
going to pass the event object.
| | 05:50 | Here I am just adding a switch
statement that's simply saying, hey, switch
| | 05:54 | and, again, in case they click on
tours, then populate the title of my
| | 05:59 | component to tours selected;
| | 06:00 | in case they click on mission,
populate this to mission selected;
| | 06:04 | in case they click on contact,
populate the field here to contact selected.
| | 06:09 | So now this is not currently
enabled for iOS devices, but should work
| | 06:14 | perfectly on Android devices.
| | 06:16 | So since we have an
Android project, let's test it.
| | 06:18 | I am going to hit Save,
and then I am going to hit Run here.
| | 06:21 | You will see that it's
currently targeted for Google Android.
| | 06:24 | You might have to set up a new
device configuration. Launch it on the
| | 06:27 | desktop, and let's try this on a
Samsung Vibrant this time and see how it
| | 06:33 | looks on that Android device.
I am going to click Run.
| | 06:37 | And you'll see that there is a quick
error here, and let's just go ahead and
| | 06:41 | take a look at what that error is.
| | 06:44 | And you'll see that I
made a mistake here, right?
| | 06:46 | The ViewMenuItems is actually a property,
so it's a lowercase v. No problem, so
| | 06:54 | just change that to lowercase v,
click Save, and then run this again.
| | 07:00 | You will see it gives us quick warning.
| | 07:02 | We'll look at those warnings in just a
second, but you'll see, if I choose my
| | 07:06 | Rotate Right, and then I click
on Device and I click on menu,
| | 07:10 | you'll see that each of these menus appear.
| | 07:12 | That's just simulating the
physical menu device of an Android button.
| | 07:16 | So I'll click here and
notice it says tours selected.
| | 07:18 | If I click on menu again, it's going to
say contact selected, and so on and so forth.
| | 07:24 | So I am going to go here and let's
take a quick look, and you'll see that it
| | 07:27 | says data bindings will not be able
to detect assignments to contactIcon,
| | 07:31 | missionIcon, and toursIcon.
| | 07:33 | So the reason for that--this is very
common of course in Flex development, and
| | 07:38 | you'll see up here that I did not make
these bindable, so that if these change
| | 07:43 | at run time, the data binding
will not actually pick it up.
| | 07:47 | So at this point, it doesn't matter,
because these are not going to change at
| | 07:50 | runtime, so those warnings are
actually okay. But to eliminate those
| | 07:54 | warnings, what I could do is I could just add
in a bindable meta tag above each one of those.
| | 08:03 | Again, for our purposes here, we're
not planning on switching those out at
| | 08:07 | runtime and we're not planning on
using data binding to switch those out, so
| | 08:10 | those warnings won't affect our particular
application, but that will get rid of those warnings.
| | 08:15 | Now, let's talk about how to call the
ViewMenuItems programmatically in case we
| | 08:20 | are on an actual iOS device, right?
| | 08:23 | So what I am going to do is I am going
to just add a button, and let's add that
| | 08:27 | button in our Main.mxml so it
appears on all of the different controls.
| | 08:32 | So I am just going to go here and add in
a button. I'll say s:button, and I'll
| | 08:39 | say label="menu", so I'll
follow that iOS convention.
| | 08:45 | So now I am going to simply say label
there, and what I am going to do is I am
| | 08:48 | just going to add a click event here.
| | 08:51 | And to actually create this
programmatically, I am going to say click and
| | 08:55 | I'll say mx.core.FlexGlobals.topLevelApplication,
and then I'll just utilize viewMenuOpen.
| | 09:10 | So now I will simply close off my button,
so you'll see that this viewMenuOpen
| | 09:16 | here is actually a Boolean.
| | 09:19 | So let's just change that and set that to true.
| | 09:22 | So I just close that line.
| | 09:23 | I'll go ahead and Save.
| | 09:25 | Let's go ahead and test the
application on our device.
| | 09:28 | So I am going to again go to Run and
set up my Run Configuration here, if you
| | 09:34 | might need to, and you should now see
that there is a menu button for our iOS users.
| | 09:39 | So if you click on the menu button,
that should cause the menu to appear.
| | 09:42 | You can see in my resolution I am
going to have to rotate this to the right,
| | 09:46 | but of course on the device you'd be
able to test that, and you can see, for
| | 09:49 | example, it works in exactly the same
way, except now iOS users can just simply
| | 09:55 | click on that menu button and you
can pop open that menu on both iOS and
| | 10:01 | Android devices.
| | Collapse this transcript |
| Utilizing the charting components| 00:00 | At this point in time, there are no
charts available in Flex 4.5 that are
| | 00:04 | designed specifically for mobile devices.
| | 00:08 | Charts and other components ship with
Flash Builder 4.5, but they are heavier
| | 00:13 | than spark components, and
they're not actually touch enabled.
| | 00:17 | So a great idea, instead of using the
default charts that come with Flex, is you
| | 00:22 | can use some of the FXG rendering
capabilities to draw lightweight charts in
| | 00:26 | your mobile applications, and you can
either use ActionScript or you could
| | 00:30 | create that in Illustrator and
then import it into Flash Builder.
| | 00:34 | But doing all of this can be a lot of
work in terms of creating good charts,
| | 00:39 | and you would have to go ahead and
build all the ActionScript stuff, and that
| | 00:42 | can be a lot of work.
| | 00:44 | So if we're developing a lightweight
mobile application, and especially one
| | 00:49 | that is targeting sort of higher
processor- and memory-enabled devices, such as
| | 00:54 | the iPhone 4, it is possible to use the MX
charting components in a mobile application.
| | 01:00 | The nice thing about the MX charting
components is they're not as heavy as a
| | 01:04 | lot of the other MX components, so we
can utilize them with very good results
| | 01:10 | in a mobile application.
| | 01:11 | It is something we want to be cautious
with, but let's explore how to use these
| | 01:16 | charting components in our mobile application.
| | 01:19 | So you'll see that I've imported 4_05,
and this is currently an iPhone project.
| | 01:25 | The requirements are, is of course this
is our dashboard application, and this is
| | 01:30 | what our executives will be using to
view the most popular tours, the most
| | 01:34 | profitable tours, and the best-reviewed tours.
| | 01:37 | What our requirement is is that the
Popular should have a bar chart, the Profit
| | 01:42 | should have an area chart, and the
Review should have a line chart. And we want
| | 01:46 | the executives to easily be able to
just click on the tabs and view each one of
| | 01:51 | those tabs, just so as they're on
the go, they can immediately get this
| | 01:54 | information and this information
will be updated from the database.
| | 01:58 | Again, these are desktop charts, so all
of the APIs and everything that you know
| | 02:03 | and love from the desktop are
completely applicable here, and you could connect
| | 02:07 | that via remote object, via a web service.
| | 02:10 | You could do all of that
to add data to those charts.
| | 02:13 | But now let's set up our project
so we can utilize these charts.
| | 02:17 | So the first thing I want you to do is
just right-click or Ctrl+Click on your
| | 02:20 | project, go to your Properties here,
and then highlight over here, the Flex Build
| | 02:26 | Path, and let's add our
charting SWC to this project.
| | 02:30 | So go ahead and click Add SWC and then
click Browse, and let's go to our Flash
| | 02:36 | Builder installation, which is, on my
machine is under the C drive, Program
| | 02:40 | Files (x86), and it's under Adobe/
Adobe Flash Builder 4.5. Then it's under
| | 02:50 | sdks, it's under 4.5.1.
| | 02:53 | And you should see, it's under the
frameworks, and then it's under the libs
| | 02:58 | directory, and here's all of our
different libraries, our SWC files, which are
| | 03:03 | very similar to the JAR files in the Java world.
| | 03:06 | So let's click on charts here and
import this SWC file into our Flex project.
| | 03:12 | So now we've added that SWC file to our
Flex project. Go ahead and just click OK.
| | 03:16 | It should update the project, and let's
work on fulfilling those requirements.
| | 03:21 | So here I am going to open up my
Popular component, and the first step is I'm
| | 03:26 | just going to add in the new charting namespace.
| | 03:30 | So I am going to say xmlns:charts, as
you see there, and then I'm just going
| | 03:35 | to simply say is equal to, and I'm
going to point it to the mx namespace, and
| | 03:41 | then I'm just going to say charts. And I'll
import everything in that charting directory.
| | 03:46 | So there is my xmlns:charts,
as you see there, so perfect!
| | 03:51 | And now I should have access to
all of the charts in this namespace.
| | 03:56 | So the first requirement was a bar
chart, so I should just be able to open up
| | 03:59 | the tag, type in the word charts, and see all
of these different charts that are available.
| | 04:04 | Again, these are exactly the same as
on the desktop, but you'll see they do
| | 04:08 | scale to a mobile device.
| | 04:10 | There's no incompatibilities in
terms of some of the things that aren't
| | 04:14 | supported in mobile projects.
| | 04:15 | The charts should work okay.
| | 04:17 | They just will require a little
more horsepower to really run well on a
| | 04:20 | mobile device, but I certainly had a lot of
success in using these on mobile applications,
| | 04:25 | so I definitely wanted to show this to you.
| | 04:28 | So now just close off this BarChart here,
and what I'll do to make my life easier
| | 04:33 | is I'll just cut and paste this
namespace here, like so. I'll hit Save.
| | 04:38 | I'll then go to my Profit component.
| | 04:42 | Again, I'll just paste in that
namespace and I will add in my chart namespace.
| | 04:48 | And the requirement for this one was to
add in an AreaChart, so that's easy enough.
| | 04:54 | I'll say AreaChart. All right, perfect!
| | 04:58 | Then I'll choose the Review
tab here. Again, same thing.
| | 05:03 | I will simply just say paste in my
namespace, just like so, and the requirement
| | 05:09 | for this Review tab was to add in a LineChart.
| | 05:13 | So again, I'll just say charts, and I'll
scroll down to my LineChart, and I'll add
| | 05:19 | that into my Review component.
| | 05:21 | So now, again, if I want to connect
this to data, I can utilize any of the
| | 05:25 | data components that we've learned about
already, in terms of web service and HTTP service.
| | 05:30 | I could of course learn about the charts,
and if you have more questions about
| | 05:35 | how to use the charts, that's covered
in the Essential Training. And again,
| | 05:38 | everything that you know on the
desktop applies here on mobile devices.
| | 05:42 | So what we've covered, we just have to
add this namespace, and you'll see that
| | 05:45 | these scale to the mobile device.
| | 05:47 | So let's go ahead and explore that,
and I'm just going to run this, and I'll set
| | 05:52 | up a Run Configuration here.
| | 05:54 | So I'll set up a new configuration,
and just due to the resolution issues, I
| | 05:58 | know we are targeting iPhone 4s,
but remember of course that in Flash Builder
| | 06:02 | here, it doesn't take into consideration any of
the increased processing power and memory power.
| | 06:07 | So just for resolution issues, let's target
the iPhone 3GS so you will be able to see.
| | 06:12 | And then I'm going to click Run.
| | 06:14 | And when I run this, you will see
that all my charts are incorporated here.
| | 06:19 | So for example, here's my most Popular,
| | 06:21 | if I click on this tab, my most Profitable,
and I click on my Best Reviewed, I can see that.
| | 06:27 | Again, you connect these just like you
would utilizing any other desktop chart,
| | 06:32 | but you'll see they automatically scale in for
the mobile application and can be very useful.
| | 06:38 | So that's just a quick introduction
of how to utilize the default charts in
| | 06:43 | your application.
| | Collapse this transcript |
| Using the PersistenceManager| 00:00 | The PersistenceManager provides a
simple method to save data to a local shared
| | 00:05 | object in the mobile Flash player.
| | 00:07 | All you have to do is create an
instance of the PersistenceManager class and
| | 00:11 | use the Set property and Get property
methods to retrieve data from the device.
| | 00:16 | Let's explore how to use the
PersistenceManager in our Explore
| | 00:20 | California application.
| | 00:22 | So in our Explore California application,
remember of course we have a component
| | 00:27 | here called TripDetails, and this
component is executed right when a user
| | 00:31 | clicks on one of the trips
that they're interested in.
| | 00:34 | Let's add a little text input field to
this component where the user can save
| | 00:39 | the information, so they can
take different notes about the trip.
| | 00:42 | So I am going to open up the TripDetails
component, and what I am going to do is
| | 00:46 | inside of this TripDetails component,
let's go into Design view and let's first
| | 00:52 | of all, make our area here just a
little bit bigger for our HGroup.
| | 00:55 | So I am going to make that a bit bigger.
| | 00:58 | And then let's add in two buttons here.
| | 01:00 | One of these buttons I will call a
Save button, so the user can save the
| | 01:04 | note. And then I'll just add in a
Clear button as well, so the user can get
| | 01:09 | rid of that if they like.
| | 01:11 | So I'll add in a Clear button.
| | 01:13 | I'll specify Clear.
Doing this all in Design mode.
| | 01:16 | And then what I can do is just simply
add in a text input field, and I'll add
| | 01:21 | that below here, so the
user can just make some notes.
| | 01:25 | So they have the option of going to the site,
of saving a note, and of clearing the note.
| | 01:29 | So now that we have set up the UI,
let's actually go in and add in some code.
| | 01:35 | So the first thing I want you to do is
let's add in an add event to the view
| | 01:41 | with a parameter of add.
| | 01:43 | I am going to just simply take my view,
| | 01:45 | I am going to just say add, and this
is going to be created as soon as the
| | 01:49 | component is added to the content.
| | 01:51 | So again, as soon as this is executed,
it's going to call this add function.
| | 01:56 | So let's set up this add function, and
let's call addHandler here, just like so,
| | 02:04 | and I'm going to pass it an
event object, just like so.
| | 02:07 | Now I'm going to add in a script block
to my component here, and I'll just say
| | 02:11 | fx:Script. And of course I am going to
write a new function called addHandler.
| | 02:19 | So I'll say protected function addHandler.
I am going to pass it an event here.
| | 02:26 | I'll datatype that as an
event, and I'll specify void here.
| | 02:32 | And then I am going to create a new
instance of the PersistenceManager.
| | 02:36 | So I am just going to simply say
loadManager, and I am just going to say
| | 02:40 | PersistenceManager, like so. And I am
just going to go is equal to new and
| | 02:49 | then of course I'll simply say
PersistenceManager, like so, and that will
| | 02:54 | create a new instance of the
PersistenceManager class in this object I created
| | 03:01 | called loadManager.
| | 03:03 | Now I'll add in some
conditional logic, and I'll just simply say
| | 03:07 | if(loadManager.load()).
| | 03:13 | What I am going to do is I am going
to just, again, if it's loaded in, I am
| | 03:16 | going to take my saved data.
| | 03:19 | So I'll say var savedData, and I'll
just type that as an object, and I'll just
| | 03:24 | say is equal to loadManager.getProperty.
| | 03:30 | So this would get the actual
information from the device.
| | 03:33 | So I'll change this here to myText.
| | 03:37 | Let me get myself a little
bit more real estate here.
| | 03:41 | And then I'll simply say if(savedData)
is true, like so, I'll simply just say
| | 03:49 | tripNotes.text = savedData.toString(), just like so.
| | 03:59 | So there is your tripNotes.text. All right!
| | 04:02 | Let's make sure that we've called our
tripNotes here. Go back to Design mode for a second.
| | 04:07 | Make sure that you've assigned this an ID of
tripNotes, so that we can save that information.
| | 04:15 | So you will see that should now be
called tripNotes, and you'll see that's of
| | 04:18 | course reflected in my code here.
| | 04:21 | It now says tripNotes. So that's great!
| | 04:24 | Let's just go back to our script block.
| | 04:27 | And now you'll see you
have your addHandler method.
| | 04:31 | So now let's actually save this
information so when the user clicks on the Save
| | 04:35 | button, let's do that.
| | 04:37 | I'll just go back to my button here
that we added in, the Save Note button, and
| | 04:43 | what I am going to just say is I am
going to say click, interactive object,
| | 04:46 | just like so, and I'll generate the
clickHandler automatically, as we've done many times before.
| | 04:52 | So there is my clickHandler that I
generated automatically, and then inside of
| | 04:57 | this, of course this is when they click
the Save button, I am going to now just
| | 05:00 | create a saveManager. And I am
going to again datatype that as the
| | 05:06 | PersistenceManager and again,
instantiate a new instance of the
| | 05:11 | persistenceManager class, like so.
| | 05:16 | And then I'm going to say
saveManager.setProperty.
| | 05:17 | I'll call it myText, just to be
consistent with what I'm loading into, and then
| | 05:26 | I'll just save the information
that they have in the text field.
| | 05:29 | So I'll say tripNotes.text,
just like you see there.
| | 05:35 | And then the final thing I want to do
is just implement the Clear functionality
| | 05:38 | here for my Clear button.
| | 05:40 | So, that's very easy.
| | 05:41 | I'll add a clickHandler again here,
and you'll see here we'll just call a
| | 05:47 | function that we are going
to write called clearbutton.
| | 05:49 | We'll call it clearbutton_Handler,
pass it the event object.
| | 05:58 | And then I'll just write my
function up here called protected function
| | 06:04 | clearbutton_handler, and I will just
say event and type that as a MouseEvent,
| | 06:14 | since of course it's a click event.
| | 06:15 | We're not going to be returning anything there.
| | 06:19 | And then what I'll do is I'll again
just instantiate my PersistenceManager, so
| | 06:26 | I'll say var persistenceManager,
datatype it as a PersistenceManager = new
| | 06:35 | PersistenceManager, just like so.
And then I'll just simply utilize my
| | 06:43 | persistenceManager and I will just say.clear,
so that will clear out my PersistenceManager.
| | 06:51 | And then I'll just also erase the text
field here, so I'll say tripNotes.text =
| | 06:58 | " " and we'll see that.
| | 07:00 | So that should be called
on my Clear button handler.
| | 07:03 | So again, the Save button will save the
information from that text field into
| | 07:08 | this property in the PersistenceManager.
| | 07:10 | The Clear button will clear it out.
| | 07:12 | And then in the addHandler, again, if
it already exists, it will load that
| | 07:17 | information into the text field
here and convert it into a string.
| | 07:22 | So let's go ahead and just test this.
| | 07:24 | I am going to just save, and I am
going to go back to my Main.mxml and just
| | 07:29 | run the application.
| | 07:31 | I am going to test it on the desktop,
and let's try this today on a Droid 2.
| | 07:39 | Click Apply. Click Run.
| | 07:43 | You should see my application starts out fine.
| | 07:45 | I'll go back here, and I'll select a trip.
| | 07:47 | Let's make some information on Big Sur.
| | 07:52 | I'll say, "Need to ask about driving Highway 1."
| | 07:58 | So put in that
information just to make that note.
| | 08:01 | I'll save that note. I'll go back.
| | 08:05 | If I go back to my Big Sur, even after
going somewhere else, notice my note is
| | 08:09 | now saved and it's persisted here.
| | 08:12 | Again, if I run this, you'll see that
even if I close the application, get out
| | 08:18 | of it, this is now written directly
to my mobile device, and this will be
| | 08:23 | persisted until I hit the Clear button.
| | 08:27 | So now it's removed.
| | 08:28 | So that is how you utilize the
PersistenceManager to save information from your
| | 08:34 | mobile app directly back to your mobile device.
| | 08:37 | One quick note here is that this will
be persisted across all different trips.
| | 08:43 | So if you wanted this note to be for
a specific trip, you'd have to set up
| | 08:47 | the ID and be able to save it
or create a new instance of the
| | 08:51 | PersistenceManager there.
| | 08:52 | Again, the main goal of this video
was just to show you how to utilize the
| | 08:55 | PersistenceManager, and you
can run with it from here.
| | Collapse this transcript |
| Creating a busy indicator| 00:00 | The BusyIndicator component gives
the user a visual indication that the
| | 00:04 | application is in the middle of an
operation, such as a long-running calculation
| | 00:08 | or a network operation.
| | 00:10 | All the developer has to do when
starting a long-running application is add the
| | 00:15 | BusyIndicator directly to the display list.
| | 00:18 | After the operation has finished, the
developer can then remove the BusyIndicator.
| | 00:23 | The graphic is actually displayed as
spokes and has a customizable symbol color
| | 00:28 | and rotation interval property.
| | 00:30 | When the BusyIndicator is not visible,
it will not consume any additional
| | 00:35 | processor cycles, and has been
optimized for mobile devices.
| | 00:40 | What we are going to do is we are going
to explore how to use the BusyIndicator
| | 00:44 | when we actually load in the external
HTML into our mobile application, because
| | 00:49 | this can take some time and the user
might like to see that there is a visual
| | 00:52 | indication that this HTML
is actually being loaded in.
| | 00:56 | So the first step here is let's open up
the application where the HTML is loaded
| | 01:00 | in, which is our TripHtml component.
So go ahead and open up TripHtml component,
| | 01:07 | and the first thing I'd like you to do
is just above the init function, let's
| | 01:11 | declare a BusyIndicator variable.
| | 01:14 | So I am just going to say protected var.
I'll call it bi for BusyIndicator,
| | 01:19 | and I will just say BusyIndicator here.
| | 01:24 | And you should have seen it
automatically added the import.
| | 01:26 | If Flash Builder did not add the import,
you'll need to add that in manually.
| | 01:30 | And then remember our init
function is of course being called on the
| | 01:34 | creation complete, so let's go ahead
and in the init function let's just
| | 01:40 | create a new BusyIndicator.
| | 01:42 | So I'll say bi is equal to new
BusyIndicator, just like so, so that will create
| | 01:51 | a new BusyIndicator.
| | 01:52 | As long as I am not using it, it
won't consume any processor cycles.
| | 01:56 | And then I'll reference my webView
that I created earlier, which is my stage
| | 01:59 | webView, so I'll do that and I'll just
say addEventListener, and I'll listen for
| | 02:07 | when everything is complete.
| | 02:09 | So I'll say flash.events.Event.Complete,
and I'll listen for that event.
| | 02:17 | When that event is complete, I am
going to write a method here called
| | 02:20 | htmlLoadDone, just like so.
| | 02:24 | So that's just listening for this event,
the flash.events.Event.Complete, and I
| | 02:29 | am going to call my htmlLoadDone.
| | 02:31 | Now, right after that, I am going to
then add this to my display object, so I'll
| | 02:37 | say this.addElement, and I'll add my
BusyIndicator, just like that. And I'll turn
| | 02:43 | the visibility on so that it's
actually able to be seen, and I'll just use the
| | 02:48 | visible property and I'll set that to true.
| | 02:52 | So you'll see that. That will
set the visible property to true.
| | 02:55 | And then finally, right after my
new init method, I'll say protected
| | 03:03 | function htmlLoadDone.
| | 03:07 | I'll reference my events:Event,
and I'll say void here because my function
| | 03:15 | won't be returning anything, and then
I'll just say right when it's done, turn
| | 03:19 | off my BusyIndicator.
| | 03:21 | So I'll say bi.visible is equal to false,
as you see there, and that will then execute.
| | 03:30 | I actually have an extra brace
in there. And that should be it.
| | 03:34 | So now I am going to hit Save, and I am
going to go back to my Main, and I'll set
| | 03:38 | up my Run configuration.
| | 03:41 | So I'll set up a new one, my Mobile
Application here, and let's first of course
| | 03:45 | try to run it on the desktop. And I'll
run it on my Google Nexus S here, and
| | 03:50 | I'll click Apply, and then I'll click Run.
| | 03:53 | You'll see that there is just a
quick error here and it just says,
| | 03:57 | flash.events.Event.Complete and, ah,
you will see what the problem is is
| | 04:06 | complete is of course an event, so it's
in all caps. And of course ActionScript
| | 04:13 | is a case-sensitive
language, so you'll see that.
| | 04:15 | I'll try that again and
you'll see that it compiles fine.
| | 04:19 | So now I'll click on one of these.
For example, let's choose my Hot Springs.
| | 04:23 | Clear out my notes, go to the site,
and in this case I have a very, very fast
| | 04:29 | connection, so there was almost no lag
time at all, so you probably barely even
| | 04:33 | saw that BusyIndicator.
| | 04:35 | So let's go through and actually
install this on the device where my connection
| | 04:39 | is a bit slower and we can actually see that.
| | 04:43 | So what I'll do here is I'll just click here,
| | 04:47 | I'll choose my Run Configurations,
and I will run it on the device.
| | 04:51 | I have connected my Google Nexus S to
the computer here, so I'll click Apply, and
| | 04:58 | I'll click Run, and then I will
actually run it on the device here.
| | 05:03 | So you'll see the Explore California app
on my Nexus S here, and I am going to go
| | 05:08 | ahead and click on a Tour. So I click
on the Tour, and then you will see when I
| | 05:13 | click on Go to Site, if you look
at the upper left-hand corner of the
| | 05:18 | application, you'll see the
BusyIndicator and you'll see that BusyIndicator
| | 05:24 | going as the HTML is loaded in.
| | 05:27 | And now that it's finished you'll see
that the BusyIndicator is gone, and you'll
| | 05:33 | see that our HTML is
displayed in the application.
| | 05:36 | And again, it's not utilizing any
processor cycles now that it's gone, and this
| | 05:40 | is a great way to let your audience
know that something is actually happening
| | 05:44 | in your application.
| | Collapse this transcript |
|
|
5. Building an ActionScript Mobile SkinUnderstanding mobile skins| 00:00 | The mobile-optimized skins provided
in Flex 4.5 are designed with touch
| | 00:05 | interaction, performance,
and memory usage in mind.
| | 00:08 | Despite the relatively powerful devices
available on the market today, typical
| | 00:13 | spark skins, including the default
skins introduced in Flex 4, do not perform
| | 00:18 | well enough for
real-world use on mobile devices.
| | 00:21 | The Adobe mobile-optimized skins are
built to balance two opposing goals:
| | 00:26 | overall performance and ease
of skin creation by developers.
| | 00:31 | MXML skins can be usable to a certain
extent. Adobe really recommends following a
| | 00:36 | few simple guidelines to ensure that
Flex 4.5 mobile applications meet your
| | 00:41 | performance expectations, as well as
your users' performance expectations.
| | 00:46 | The mobile theme is essentially a
subset of the functionality introduced with
| | 00:50 | the spark theme in Flex 4, and the
mobile theme makes critical optimizations for
| | 00:56 | performance and memory use.
| | 00:58 | Now we have different skins for
different DPIs in mobile devices.
| | 01:03 | So this is very powerful, and again,
they're designed to be optimized
| | 01:07 | specifically for mobile devices.
And remember, your skin should always be
| | 01:12 | written in ActionScript
for the best performance.
| | 01:15 | Try to stay away from MXML
skins, as we talked about.
| | 01:19 | So let's take a look at the skins.
| | 01:21 | I'm just going to go over here to Flash Builder.
| | 01:24 | Okay, great. So here I am Flash Builder,
and let's take a look at sort of how
| | 01:29 | the skins are put together.
| | 01:31 | So what I'm going to do is I'm just
going to not even create a project,
| | 01:34 | I'm just going to say Open File,
and I'm going to browse through my local
| | 01:37 | directory here, under Program
Files (x86), I'm going to choose Adobe.
| | 01:42 | I'm going to scroll down
here to Adobe Flash Builder 4.5.
| | 01:46 | I'm going to go here to my sdks. I'm
going to look at 4.5.1, and then I'm going
| | 01:52 | to go ahead and look at the folder in
here, called frameworks, and in here
| | 01:57 | you'll see there is another folder
called projects. And inside this projects
| | 02:01 | folder you'll see a setting
in here called mobiletheme.
| | 02:04 | Go ahead and open up that and
then choose the source code.
| | 02:07 | Now under spark are all of the
different skins that we have available, and here
| | 02:12 | they are for the different DPIs that we support.
| | 02:15 | So again, there is 160 dpi, 240, 320
and in a later video, we are actually going
| | 02:21 | to learn how to switch out these skins
at run time based on the device, which
| | 02:26 | will again give the user the best
mobile-optimized experience for the particular
| | 02:32 | device that they're viewing the application on.
| | 02:34 | So for example, if I look under mobile, I'll
see all of the default skins that I can use.
| | 02:40 | Now these skins are here for you to do
what you like with, as a developer. What I
| | 02:44 | generally do is take these skins, copy
them over so I don't make any changes to
| | 02:49 | the original skins, and then I point
my assets to my newly modified skins.
| | 02:53 | So let's take a look at sort of
how these skins are put together.
| | 02:56 | So you'll see again, we have
all kinds of different skins.
| | 02:59 | So let's take a look at, for example,
the ViewMenuItemSkin, which is for the
| | 03:03 | menu items that you can pop up
and have menus pop up, either on an Android
| | 03:08 | device or on an iOS device. And if
you scroll down here, you'll see, for
| | 03:13 | example, that you have the ViewmenuItemSkin.
| | 03:17 | This is extending a ButtonSkin,
which is a mobile-optimized skin.
| | 03:21 | So let's take a look at the ButtonSkin,
okay. So you'll see that there is a
| | 03:25 | ButtonSkin in there. And here is the
ButtonSkin and notice, if you look at
| | 03:31 | the ButtonSkin that the ButtonSkin
extends the ButtonSkinBase, okay. And if
| | 03:37 | you scroll down here,
| | 03:39 | you'll see that it might be under
the support class, so you'll see the
| | 03:42 | ButtonSkinBase here.
| | 03:44 | And if you scroll down, notice the
ButtonSkinBase here extends the MobileSkin.
| | 03:49 | And let's just take a quick look at
the MobileSkin, and you'll see that this
| | 03:53 | MobileSkin here actually extends
the UI component, when we look at this.
| | 03:59 | So you'll it extends the UI component.
| | 04:01 | It implements an interface that of
course tells it what methods it needs to
| | 04:06 | implement in order to be used.
| | 04:07 | So you'll see that there is a simple MobileSkin.
| | 04:10 | Okay, so you can sort of get an idea of
the hierarchy of the skins and what you
| | 04:14 | have available to you and of course
what you need to include in your project.
| | 04:17 | I usually just include the whole
folder when I'm setting this up.
| | 04:21 | So let's go back to our ViewmenuItemSkin
here for a moment and take a look here.
| | 04:26 | And again, you'll see that it checks
the application dpi, and then in case of
| | 04:31 | this dpi, it goes out and it pulls in
the appropriate assets automatically.
| | 04:37 | So in order to do this, what it does is
it pulls in these FXG actual assets, and
| | 04:42 | this is very powerful because the
graphics for these skins actually rely on a
| | 04:47 | combination of compiled FXG and
programmatic ActionScript drawing.
| | 04:52 | So there's really no drawing of code,
because that's fairly heavy and can
| | 04:56 | utilize a lot of resources,
| | 04:58 | so it's only used in very small examples,
for sort of trivial graphics or when
| | 05:02 | it's actually required to
support some of the styling components.
| | 05:06 | So most of the graphics are really
done with compiled FXG, and this really
| | 05:09 | optimizes performance.
| | 05:11 | The MXML graphics are not an option
with the MobileSkin class, unless you put
| | 05:16 | your MXML graphics actually inside of a group.
| | 05:19 | So here, for example, you'll see I have
| | 05:21 | sparks.skins.mobile.320.assets.ViewItem_up.
| | 05:24 | So what I could do is actually
examine that asset. Okay, so if I just go up
| | 05:29 | here, you'll see there's an assets
directory that it's pointing to right here,
| | 05:33 | and now you can see all of your FXG files.
| | 05:36 | So let me scroll down here, and you'll
see, for example, that the last one here
| | 05:41 | is my ViewmenuItem_up that it's pointing to.
| | 05:44 | So now, if you wanted to make a
change, just say for 320-dpi devices, you
| | 05:49 | could scroll down here and you could
actually just change out the graphics here yourself.
| | 05:54 | In your newly copied over skin classes,
you could change the color here, for
| | 05:58 | example, and that would now change
the color on the stroke of the rectangle
| | 06:03 | that's used to actually
draw the different menu items.
| | 06:05 | Or you could go in and change all the
rectangles to ellipses, and now all of a
| | 06:09 | sudden your menu items would have
circles in them, instead of doing that.
| | 06:13 | Now again, this would only be for this
particular asset, which is when the menu
| | 06:17 | is in its up state, and when you have a 320 dpi.
| | 06:21 | So you would have to go through and use
Find and Replace if you wanted that to
| | 06:24 | be consistent across all the
different assets and change that there.
| | 06:28 | But as a developer, this gives you a
lot of power and in many, many cases,
| | 06:33 | instead of trying to build a
brand-new skin from scratch, it makes a lot of
| | 06:37 | sense to just go in here and modify some of
the existing skins and make it much easier.
| | 06:42 | So when we go back and look at mobile skin,
| | 06:45 | remember mobile skin is actually not a
group, so it can't employ spark layouts
| | 06:51 | that we know, like horizontal layout,
vertical layout, or even basic layout, when
| | 06:55 | we're trying to lay out our different assets.
| | 06:57 | The way we do this is it's actually
laid out programmatically through code and
| | 07:02 | MobileSkin actually adds a new
lifecycle method, which is called layout
| | 07:06 | contents, and this is
automatically called from the display list.
| | 07:11 | So this method is actually used to position
different child elements of the skin inside of it.
| | 07:16 | Again, if you're just modifying the
skins, making quick changes, you won't have
| | 07:20 | to worry about that, but if you do
extend this class and utilize this class,
| | 07:24 | that might be something that you worry about.
| | 07:26 | Again, another thing, as well, is states.
| | 07:29 | So the state support in MobileSkin is
one major feature that is optimized for
| | 07:34 | mobile development, and the normal
usage of states, whether you do it in MXML
| | 07:38 | or you do it procedurally in
ActionScript, really can add memory and
| | 07:42 | performance overhead costs.
| | 07:44 | So MobileSkin optimizes this by
manually handling the state changes inside of
| | 07:49 | procedural code, instead of actually
doing it in the state class and its
| | 07:53 | associated overrides, such
as set property and add child.
| | 07:58 | Let's talk a little bit more about
sort of understanding Flex mobile skins.
| | 08:03 | So the mobile theme does not actually
include the Flash Text Engine or the text
| | 08:08 | layout framework inside of the default skins.
| | 08:10 | Now this is done primarily for
performance reasons and to support native
| | 08:14 | predictive text input and editing.
| | 08:17 | Instead, Flex 4.5 introduces a new
stylable text field primitive found in the
| | 08:22 | mobile component.swf file.
| | 08:25 | This class extends text field
and adds support for styles.
| | 08:29 | It is designed to be used in mobile
ActionScript and ItemRenderers only, and
| | 08:34 | it's not intended for use inside of MXML.
| | 08:37 | Now when you use a stylable text field
and the label simultaneously, developers
| | 08:42 | must embed fonts twice.
| | 08:44 | So again, bear that in mind, if you use
this with a label, you have to make sure
| | 08:49 | that you have your embed fonts set to true.
| | 08:52 | Okay, we do also recommend that you
don't use the rich editable text component
| | 08:57 | in mobile projects, and we
have not through this series.
| | 09:00 | We've only used the text area
component, which is optimized for mobile.
| | 09:05 | Now when we talk about styling, this is
great, because if you try to use these
| | 09:10 | styles, these are not supported in skins,
but if you try to use these in a Flash
| | 09:14 | Builder mobile project, they won't
actually show up inside of your code hints.
| | 09:19 | So some of the styles you
shouldn't use are the rollOverColor--
| | 09:23 | They're not supported, because they're
not touch enabled, and they're not the
| | 09:26 | main use case--borderAlpha,
border-color the CornerRadius.
| | 09:31 | These are again properties of the
compiled FXG, and they're not changed at run time.
| | 09:37 | The dropShadoVisible is not supported
to minimize the use of filters, right.
| | 09:42 | This greatly affects performance.
| | 09:44 | Flash Builder will not show them in
your code hinting and that sort of thing.
| | 09:48 | So in mobile development, as we just
spoke about, you should really not use the
| | 09:52 | Rich Text component.
| | 09:53 | None of these have been optimized for mobile.
| | 09:55 | You should really not use a ComboBox
or the DropDownList, the NumericStepper,
| | 10:00 | the VideoDisplay, and the VideoPlayer,
the Vslider, the Panel, the TabBar.
| | 10:06 | So we've now gotten sort of an
introduction to the skins, we know where the
| | 10:10 | existing skins are, we can modify those
skins, and we have a good idea of how to
| | 10:17 | begin to change the look and the
feel of our mobile applications.
| | Collapse this transcript |
| Building a simple mobile skin| 00:00 | In this movie, what we're going to do is
we're going to apply a custom skin that
| | 00:04 | we create in Adobe Illustrator to the
default button skin, so we can change the
| | 00:09 | complete look and feel of the button.
| | 00:12 | So the first step is to create an FXG
file, and you can use lots of Adobe tools
| | 00:17 | to create FXG files.
| | 00:19 | You could use Adobe Flash Professional,
Adobe Illustrator, or Adobe Fireworks to
| | 00:23 | actually go ahead and create that FXG.
| | 00:26 | Now then, the next step is to edit the
FXG by hand inside of Flash Builder, so
| | 00:32 | we can actually use design mode to
make sure that our FXG we created in, for
| | 00:36 | example, Illustrator, lines
up with the default button.
| | 00:40 | So what we could do is we could take
our skin and we can look at a regular
| | 00:43 | button and make sure that it's not
too big, it's not too small, it doesn't
| | 00:47 | block out any of the other pieces of
the button component, and we can use
| | 00:50 | Design view to render it.
| | 00:52 | So once we've done all of that and
set everything up with our FXG file and
| | 00:56 | created the design of the FXG file, the
next step is to create a new skin class
| | 01:02 | in ActionScript that inherits
from an existing skin class.
| | 01:06 | So we can just do that, and we want to
make sure that we inherit from the mobile
| | 01:10 | theme. And inside of our class what
we're going to do is instead of pointing to
| | 01:14 | the default FXG assets the skin uses,
we're going to point to the new FXG assets
| | 01:21 | that were created inside of Adobe Illustrator.
| | 01:24 | So that's very powerful.
| | 01:26 | And then the final step is we just use
the skin class attribute. And in this
| | 01:30 | case we can either use CSS or MXML to
assign the skin class to our buttons, or
| | 01:36 | to all buttons in our application,
depending on what we want to do.
| | 01:40 | So let's first of all take a
quick look at the FXG file.
| | 01:45 | So here you'll see there's an FXG
file that's been created for you called RoundedButton.
| | 01:48 | You'll see it's inside of Adobe
Illustrator and it's sized perfectly, because
| | 01:53 | we've tested it in a Flash Builder. But if
I just scroll up here, you'll see it's
| | 01:58 | just simply a rounded button here
that's been created in the Illustrator.
| | 02:02 | So instead of the default
rectangular lines, it's rounded.
| | 02:06 | So what we want to do is apply this to
our button, okay, and let's go ahead and
| | 02:11 | do that. And we're going to apply this
to all buttons inside of our application.
| | 02:15 | So the first step is just simply to
create a new Flex mobile project, and let's
| | 02:20 | go ahead and just call this TestSkin.
I'm going to click Next.
| | 02:23 | Let's target both Google Android and Apple
iOS, and then I'm going to click on Blank here.
| | 02:29 | I'm going to click on Automatically reorient
and also automatically scale the application.
| | 02:34 | So I'm going to choose to 240 dpi, I'm
going to click Next, and then I'm going
| | 02:38 | to click Next again, and then I'm
going to click Finish. And here's my
| | 02:42 | TestSkin.mxml that it
creates for me automatically.
| | 02:47 | First step is a button control,
so let's go ahead and add in a button control.
| | 02:52 | add in a simple label, and just say,
"This is the button to be skinned."
| | 02:58 | Okay, great. So that's the button that
we're going to skin, and we've also set
| | 03:02 | this to apply to all buttons in our application.
| | 03:05 | Okay, so again, if I add another button,
we'll set up our skin class to apply to
| | 03:09 | everything in the actual
application. Okay, wonderful!
| | 03:14 | So now, let's create the structure of
our project and follow best practices.
| | 03:19 | So in your source directory, let's
create a new folder, okay, and let's just
| | 03:23 | call this assets, and this is where
we're going to put in our FXG file.
| | 03:27 | Okay, so there is our assets directory,
and then create another directory in
| | 03:32 | here called skins. Perfect!
| | 03:36 | Okay, so there is another skin directory.
| | 03:38 | So you see I have an assets and
I have skins directory. Perfect!
| | 03:42 | And then go to your exercise files and
just simply go to Chapter 5 and take your
| | 03:48 | RoundedButton.fxg and copy that into
your assets folder. Now you'll have that
| | 03:55 | FXG file that we've set up the design
and set everything up in Adobe Illustrator
| | 04:00 | and Flash Builder and made sure that
it matches our button. Okay, perfect!
| | 04:04 | And then in your skins directory,
just simply right-click, choose New, and
| | 04:10 | then go ahead and click o --in this
case what we're going to do is we're not
| | 04:14 | going to use MXML skin, right;
we're going to use just a regular old
| | 04:17 | ActionScript class.
| | 04:19 | So if you scroll down here, choose
ActionScript Class, okay, and this is going
| | 04:24 | to be in our skins package. And let's
just call this RoundedButtonSkin, and then
| | 04:31 | our Superclass is going to
simply be the button skin class.
| | 04:36 | So let's click Browse and make sure
we inherit from the mobile button skin.
| | 04:39 | So you see if I type in buttonSkin here,
since I'm in a mobile project, it will
| | 04:45 | first show me that button skin.
| | 04:47 | So go ahead and click on mobile
buttonSkin, then click Finish, and you'll see
| | 04:53 | this builds us the skeleton of a skin class.
| | 04:58 | Okay, so now you'll see, of course, it
imports that mobile ButtonSkin since it
| | 05:02 | inherits from that, so that make sense.
| | 05:04 | Let's add in another import
and actually import our FXG.
| | 05:08 | So here, I'm going to say assets,
and then I'm going to simply say RoundedButton,
| | 05:14 | and that's going to import this
FXG for use inside of our class.
| | 05:20 | Now we've created a code snippet for
you, so that we can save on some typing
| | 05:24 | here. We're going to walk through what
that code snippet does, but you'll see in
| | 05:28 | here, there's a Word file called
codeSnippets in your exercise files.
| | 05:32 | Scroll down to just your Movie 5-2 here
and just take the code here, and then of
| | 05:41 | course I'm going to just copy that.
And what I'm going to go is I'm going to go
| | 05:46 | back to Flash Builder and I'm just
going to eliminate this public function
| | 05:51 | RoundedButton here, and then what I'm
going to do is just paste this code inside
| | 05:57 | of my class, just like so.
| | 06:00 | Okay, now let's take a look at the
actual code, and what you should see is you
| | 06:07 | should see we have public class
RoundedButtonSkin extends ButtonSkin, so that's
| | 06:13 | perfect, and then you'll see we
defined a Boolean variable called colorized
| | 06:17 | here, and we've set the
default = false where you see that.
| | 06:21 | So now inside of the constructor,
which of course is called as soon as an
| | 06:24 | object is created, we're calling the
constructor of the ButtonSkin just to do
| | 06:29 | some setup and that sort of thing.
And then you've seen we have the upBorderSkin,
| | 06:33 | which is pointing to our FXG file.
| | 06:36 | So you'll see the upBorderSkin,
so what this is doing is this is replacing
| | 06:40 | the default FXG that comes with the
button with our new FXG that we created
| | 06:46 | inside of Illustrator.
| | 06:47 | So let's check here, so the
upBorderSkin and the downBorderSkins are fine,
| | 06:51 | should see that there is my skins
directory, and notice what we called our
| | 06:56 | skin here, it says skins.RoundedButton, we want
this actually pointing to the assets directory.
| | 07:04 | So we want this actually
pointing to the FXG file.
| | 07:07 | So go ahead and change this to assets,
change this to assets, because that's we
| | 07:14 | place that and then make sure
you're pointing to the RoundedButton.fxg,
| | 07:19 | because that's where we're
placing the FXG file with.
| | 07:21 | So this is again the default ones in
the button and you're replacing it there.
| | 07:25 | So you'll see we have the
measuredDefaultHeight, the measureDefaultWidth--those
| | 07:29 | need to be included here--and then
you'll see we're overriding the protected
| | 07:33 | function called drawBackground
of our original ButtonSkin class.
| | 07:39 | Okay, so by default these receive
two parameters called unscaledWidth
| | 07:43 | and unscaledHeight.
| | 07:44 | What we're going to do is we're going to
emit the call to super draw background,
| | 07:49 | because what we're going to do is we're
going to draw a tint instead and we're
| | 07:53 | not going to draw the fill
that the button skin does.
| | 07:55 | So we're not going to call
super.drawBackground here from the constructor and
| | 08:00 | from the parent class. And you see,
we're just defining our chromeColor that you
| | 08:05 | see there, and we're going to get that
style, and then we're just adding in some
| | 08:10 | conditional logic here that says
| | 08:11 | if it equals this particular color or
if it's false and it equals this color,
| | 08:17 | we're going to then apply a tint
instead of a fill, as you see here.
| | 08:21 | Again, if we restore it to the original
color, we're going to unset the colorized.
| | 08:26 | Okay, great, so very simple skin
class here that we've now created.
| | 08:31 | Let's go ahead and save that
RoundedButtonSkin, and let's go back to our test
| | 08:35 | skin, make sure that this is saved, and
then what I want you to do is just to add
| | 08:40 | in a style block to apply our new skin
class to all buttons, and we're going to
| | 08:45 | do that in a cascading style sheet.
| | 08:47 | So here, I'm going to simply say fx:
| | 08:50 | Style, and then I'm of the say
s|button, which you see there, and then we're
| | 08:57 | going to apply a type selector.
| | 08:59 | So first of all, I'm going to specify
my skinClass, and then I'm going to say
| | 09:04 | ClassReference, and we're going to
reference my actual skin class that I created
| | 09:11 | and remember, this is called
RoundedButtonSkin and it's in the skins directory.
| | 09:16 | So here, I'll say,
skins.RoundedButtonSkin, and that will then apply this skin
| | 09:25 | directly to our button.
| | 09:27 | So what I'm going to do is just click
Save, and then let's test this on a mobile
| | 09:32 | device. So I'll say Run
Configuration and actually, we'll test them on the
| | 09:36 | desktop, but we will simulate a mobile device.
| | 09:38 | So I'll choose On desktop,
| | 09:40 | we'll test it on a Apple iPhone 3GS,
and let's click Run, and let's see how this looks.
| | 09:48 | Okay. So you've see what happens is it
actually implemented our new skin here, and
| | 09:53 | you'll see now it's a rounded button
instead of the default rectangular, because
| | 09:58 | it's pulling in this new FXG asset that
we created inside of Adobe Illustrator.
| | 10:04 | So you've now got an idea of sort of how
the architecture of skins work and how
| | 10:09 | to build your own custom mobile skins in Flex.
| | Collapse this transcript |
|
|
6. Understanding Mobile-Specific APIs in ActionScript 3Using gestures on a mobile device| 00:00 | Gestures allow a user to touch the
screen of a mobile device in unique ways, and
| | 00:04 | this determines what
actions the device will perform.
| | 00:07 | Mouse events that are supported in
both Flash and Flex work just fine on
| | 00:11 | mobile applications.
| | 00:13 | If a user presses a button on the
touch screen of the device, it will behave
| | 00:16 | very much as if the user was
clicking a button on the Desktop.
| | 00:19 | However, developers can take advantage
of the touch screen by doing things like
| | 00:23 | flicking or swiping, which is when the
user moves the finger and lifts it off
| | 00:28 | the screen immediately.
| | 00:30 | There are many types of gestures
supported by AIR for mobile devices, such as
| | 00:35 | pinching, panning, dragging,
double-tapping, and even more.
| | 00:40 | Developers can even create their own
gestures in Adobe AIR simply by extending
| | 00:45 | the existing gestures class.
| | 00:47 | Let's learn how to add a swiping
gesture to a mobile Flex application.
| | 00:52 | So you will see I've imported this
6_01 project, and you'll see this is
| | 00:56 | called Gestures.mxml.
| | 00:58 | I am going to go ahead and just run
this, and let's look at what we have.
| | 01:01 | Currently, when the user taps one of
these buttons, it moves it to a different
| | 01:06 | image, as you can see here.
| | 01:09 | And again, if I click Previous, it
will move me to the previous image here.
| | 01:12 | What we want to do is implement swiping
in our application so if the user flicks
| | 01:18 | the touch screen, it will then move
without having to click the buttons, so that
| | 01:22 | they're able to do that.
| | 01:23 | So let's learn how to
implement that in our application.
| | 01:28 | So you'll see I have my GesturesHomeView,
right here, and let's add in a script block.
| | 01:34 | Now the good news is, in this
particular component we only want them to be
| | 01:38 | able to swipe one direction, because they
can't go back because this is the first component.
| | 01:43 | So in order to go to the next
component, we have to indicate which direction
| | 01:48 | they are swiping in, and that would be a
-1, because we're checking the X position.
| | 01:53 | So we just have to check for that, and that's
all passed by the swiping APIs in ActionScript.
| | 01:59 | So our first step is to simply just
create a function here called init, and then
| | 02:05 | I am going to specify this as void, as
you see there, and then inside of this
| | 02:11 | function I am going to add an EventListener.
| | 02:14 | So I gm just going to say
addEventListener, and let's listen for a gesture event.
| | 02:19 | So I am going to say
TransformGestureEvent, and then I am going to say
| | 02:24 | GESTURE_SWIPE, just like so, and then I
am going to call a swipeHandler method
| | 02:33 | that I am going to write in just a moment.
| | 02:35 | So that sets up my listening for this event.
| | 02:39 | Let's make sure I call this
event when this component is created.
| | 02:43 | So I'll just say
creationComplete="init ()", as you see there.
| | 02:50 | And that sets up that addEventListener.
| | 02:53 | Now, let's go ahead and
write our swipeHandler function.
| | 02:58 | So I'll say protected function
swipeHandler, and I'll pass it the event object,
| | 03:06 | and this is going to be a TransformGestureEvent.
| | 03:10 | There is lots of useful information
that I can get in this GestureEvent.
| | 03:14 | So I am going to say :void because
my method is not actually going to be
| | 03:20 | returning anything, get myself a little
bit more real estate there, and make sure
| | 03:25 | my indentation is correct.
| | 03:27 | Now I am just going to say, okay if
they click, again, I am going to have to
| | 03:31 | search for a negative number, because I
want them to gesture to move to the next
| | 03:35 | component, and I don't worry about
gesturing to a previous component.
| | 03:38 | So I'll just say if (event.offSetX == -1),
and then what do I want it to do?
| | 03:50 | Well, I want it to open up the new component.
| | 03:52 | So I use my navigator class, I use
pushView, and I want it to open up this
| | 03:57 | component right here, this tour2 component.
| | 04:01 | So here I'll say tour2, and that's it.
| | 04:05 | So that's how I add in that offset
component, and you'll see that that's all set.
| | 04:10 | That should add gestures to my
first component that's displayed.
| | 04:13 | Now of course I want to do the same
thing for the other components here,
| | 04:17 | so first of all take this init function, and it's
going to be exactly the same in each component.
| | 04:22 | So take this component--in fact let's
take the whole script block and just copy
| | 04:26 | and paste it, just to make life easier.
| | 04:29 | So I'll take my whole script block here
and copy it to my clipboard and add this
| | 04:35 | to my tour2 component.
| | 04:36 | So again, just below the
Declarations tag let's add in a script block.
| | 04:40 | The init function is going to remain
exactly the same, and my swipeHandler is
| | 04:45 | going to be a little bit different.
| | 04:46 | So if they flick -1, if they flick it
there, I want it to open up the tour3 component.
| | 04:51 | So now if they flick a +1, I want it
to go back to my Gestures Home view.
| | 04:59 | So to do that we can simply just say
else if (event.offsetX == +1) here.
| | 05:11 | I just noticed a quick typo, and this
offsetX property is actually a lowercase.
| | 05:17 | And I need to fix this in my other
code as well, since I copied and pasted.
| | 05:22 | So you'll see here if you just fix
that offsetX--I'm just used to type in
| | 05:27 | in CamelCase there--the property is
passed in as offsetX. Okay great!
| | 05:33 | So there I have my offsetX = 1,
and then I can just say navigator.popView, and
| | 05:41 | that will again get rid of this
component and take me back to the previous
| | 05:44 | component, as we learned in
earlier movie called GesturesHomeView.
| | 05:50 | So we have that. The only other thing
we need to do is actually call the init
| | 05:53 | from this component.
| | 05:55 | So here I'm just going to add a
creationComplete and I am going to call the init
| | 06:02 | function here from this creationComplete.
| | 06:04 | So here I am going to click Save,
and then I am going to do the same thing here.
| | 06:09 | I will paste my script block
in here, okay. I'll fix my typo.
| | 06:16 | This is no longer offSetX, but again,
the same code, and then this is now going
| | 06:21 | to be a +1 and again, there are only three components
so they won't have to go to the next component.
| | 06:28 | And then what I want it to do is
here I can just go back to the previous
| | 06:31 | component, so just to make this easier, I
just type in popView there if they swipe there.
| | 06:39 | And again, you're going to need to
do the same thing and just call that
| | 06:43 | creationComplete from this
component, so just make sure you say init.
| | 06:49 | So now what you've done is you've
added this swipe gesture to all of your
| | 06:55 | different components so
swiping will be supported.
| | 06:57 | Now, we'll test it on the Desktop
just to make sure that we don't have any
| | 07:01 | errors, but this is one we are
actually going to have to test on the device
| | 07:05 | because gestures are not
supported in the Desktop.
| | 07:08 | So you'll see here, again I have
another quick typo. It says, "Access of
| | 07:11 | undefined property tour2," in this case,
right. Tour2 is a capitalized letter, as
| | 07:19 | you can see in my components here.
| | 07:21 | So let me fix that.
| | 07:23 | And let's go back to my Gestures here,
and let's try to first run it on the device.
| | 07:28 | Okay I'll run it on my Google Nexus S.
I'll click Run, make sure everything is saved.
| | 07:34 | You'll see I made the same error here,
and again my components are capitalized.
| | 07:41 | So there you see that.
| | 07:42 | I'll run it again on the Desktop.
| | 07:45 | You'll see it compiles fine, and of
course the gestures are now supported, but I
| | 07:51 | can't test the gestures on the Desktop,
so let's now publish this to the device.
| | 07:56 | So I'll click here, I'll choose Run
Configurations, and I'll just say On device.
| | 08:01 | So my device is currently plugged
in. All my drivers are good to go.
| | 08:05 | I'm testing this on an Android
device so Flash Builder will automatically
| | 08:08 | install and get it ready on the device.
| | 08:10 | Of course, if I had an iOS device and
I was testing it here, the same APIs
| | 08:15 | apply exactly in iOS.
| | 08:17 | You would just need to make some
changes and generate your IPA file through your
| | 08:21 | mobile provisioning
profile for this application.
| | 08:24 | So here I am going to click Run.
| | 08:26 | This should install it on the device, and
you'll see it right here on the device.
| | 08:31 | You should be able to see that I can
just simply utilize my gestures to move
| | 08:37 | from component to
component, and it works perfectly.
| | 08:41 | So now we've seen how we can add
touch-screen events directly to our Flex
| | 08:48 | and AIR applications.
| | Collapse this transcript |
| Using multi-touch on a mobile device| 00:00 | Multi-touch is revolutionizing the way
we interact with a mobile application.
| | 00:05 | The idea of user interfaces behaving
like real-life objects has been kicked
| | 00:09 | around for a long time and touch
screens remove an important barrier.
| | 00:14 | In the area of data visualization,
multi-touch can have a particularly
| | 00:18 | transformative effect.
| | 00:20 | There are definitely a lot of
opportunities for more natural data
| | 00:24 | manipulation and exploration.
| | 00:26 | When a user interacts with the screen, it is
typically with a finger or a pointing device.
| | 00:31 | We can capture events such as
panning, rotating, and pinching using the
| | 00:36 | multi-touch events in Flex.
| | 00:39 | Let's explore how to utilize a multi-touch event.
| | 00:42 | So you will see here I've imported
project 6_02, and what I'd like you to do is
| | 00:48 | just go to the source code here.
And in your first view here, under
| | 00:52 | FirstView.mxml, you should see if you
scroll down just a bit that there is a
| | 00:59 | navigator on line 25.
| | 01:01 | Let's just currently un-comment
that code, and you'll see it says
| | 01:05 | navigator.pushView, and this is
pushing in our MultiTouchHomeView.
| | 01:10 | Okay, so let's create that
component, and let's make sure that we name
| | 01:13 | it MultiTouchHomeView.
| | 01:15 | So just click on your Views folder,
choose New, and choose MXML Component and just
| | 01:22 | go ahead and call this
MultiTouchHomeView, as you see here, and then click Finish,
| | 01:29 | and here's our MultiTouchHomeView. Okay, great!
| | 01:34 | So now what we are going to do
is create a new component in here.
| | 01:38 | So what we are going to do is when the
user actually clicks on this, I want it
| | 01:42 | to have a circle, and I want the user
to be able to drag and drop that circle
| | 01:47 | around the screen of their device and
then when they let go of the circle, I
| | 01:51 | wanted to end that dragging.
| | 01:54 | So let's learn how to
build an application like this.
| | 01:57 | The first thing I am going to have to
do is let's just simply draw a circle.
| | 02:01 | So inside of your Declarations block
here, let's create a new circle, and we
| | 02:06 | will just draw it in code.
| | 02:07 | Of course, we could use fxg or
something like that in Illustrator, but here, I
| | 02:11 | am just going to say fx:Component, and
let's assign the className= let's call it
| | 02:19 | "Circle" just to make things easier.
| | 02:22 | Okay, so now we have created a new
component inside of our Declarations block
| | 02:26 | here, and then what I want you to do is
let's add in an Ellipse and I am going to
| | 02:33 | specify the width of this ellipse is
equal to 140 pixels and the height of
| | 02:40 | this ellipse is also equal to 140 pixels.
| | 02:44 | So we will just draw an ellipse,
and then let's create a fill in here,
| | 02:48 | so I am just going to say s:fill.
And then inside of this fill, let's add in
| | 02:54 | a solid color here.
| | 02:56 | So I am going to say s:SolidColor,
and then I will simply say color=blue, and
| | 03:04 | this will just draw us a nice circle.
| | 03:07 | So that's going to create a circle, and
again what I want the user to do is they
| | 03:11 | are going to just click on the screen
and be able to drag this circle around
| | 03:14 | utilizing the multi-touch events. So, very nice!
| | 03:18 | Okay, now let's go up here and
outside of your Declarations block, in fact,
| | 03:23 | directly below your Declarations block
in your component, go ahead and just add
| | 03:27 | in a Script block here.
| | 03:30 | Let's me give myself a little more
real estate, so you can better see what I'm
| | 03:33 | doing, and the first thing I
want you to do is just declare,
| | 03:37 | I am going to say protected
var and let's call it circles.
| | 03:42 | I will datatype it just as a simple
object, and I will just say new Object there,
| | 03:47 | so I will just declare that.
| | 03:49 | And then let's just declare a
protected function init, like you see there.
| | 03:54 | I am going to specify void for my
protected function init and just so I
| | 03:59 | don't forget, let's add the call
to that init up on my component.
| | 04:05 | So here I will say creationComplete, and
I'll just call my init function. Perfect!
| | 04:12 | So there is my init function. All right!
| | 04:14 | So the first thing I want to do
is set up my multi-touch input mode.
| | 04:18 | So I want this to happen right when the
user clicks right on the screen, so I'm
| | 04:22 | going to set up a touch point.
| | 04:24 | So here all I have to do is just say
Multitouch.inputmode, and then I am going
| | 04:31 | to say MultitouchInputmode
and I'll just say .TOUCHPOINT.
| | 04:37 | So this will set up the multi-touch
input for the touch point, so when the user
| | 04:41 | just clicks, we'll try to get
the circle to appear there.
| | 04:45 | Okay, now let's set up some event
listeners so that something happens, right.
| | 04:50 | The first thing we are going to have is
a TouchBegin. We want the circle to be
| | 04:54 | instantiated and start being able
to be dragged around, and of course
| | 04:58 | we are going to do that on a touch
move, so we are going to have to set up a
| | 05:01 | TouchMove and then of course, we want
the circle to disappear when the user
| | 05:04 | lifts their finger off of the screen,
and we'll do that on an onTouchEnd.
| | 05:10 | Okay, so let's set up all of those
events, so I am just going to simply say
| | 05:13 | this.stage.addEventListener, and I will
say TouchEvent and I'll say TOUCH_BEGIN.
| | 05:24 | So when that occurs, I am going to
write a method here called onTouchBegin.
| | 05:32 | We are going to need to write that
in just a second, and we have some code
| | 05:36 | snippets to do that actually,
so we don't have to do all the typing.
| | 05:38 | But for now, just say this.addEventListener.
| | 05:44 | Then say TouchEvent as you see here,
and then we are going to just say TOUCH_END,
| | 05:52 | so this is when the user lets go of the
circle. And we are going to call a method
| | 05:56 | here called onTouchEnd. And then I am
going to say this.stage.addEventListener,
| | 06:06 | and I am going to simply say TouchEvent,
and I am going to say TOUCH_MOVE, as you
| | 06:14 | see here, and then I am
going to say onTouchMove.
| | 06:18 | Okay, so that's when they first start
moving their finger around the screen.
| | 06:23 | So now we have set up all of these
different events, and you'll see of course we
| | 06:26 | get warnings because these
methods have not yet been written.
| | 06:30 | And now let's just cut and paste some
code from our code snippets for each one
| | 06:34 | of those different methods, so we don't
have to write those methods ourselves.
| | 06:38 | So I am going to just minimize this,
| | 06:39 | go over to my exercise files, and open
up my codeSnippets here. And if you scroll
| | 06:45 | down, just locate where it says Movie
6-2 and just take this code for your touch
| | 06:51 | events and just copy
that to your clipboard here.
| | 06:57 | And what I am going to do is go back to
Flash Builder and make sure I'm still in
| | 07:01 | my Script block and then just
paste in that code right here.
| | 07:06 | And let's go through and make sure we
understand when this code and how this code is working.
| | 07:11 | So the first thing is we're doing to do
an onTouchBegin, so this is when the user
| | 07:15 | first touches a screen.
| | 07:17 | First thing we do is we
instantiate this circle that we created.
| | 07:22 | Okay, so I think there's a quick
error here, because if you look at our
| | 07:25 | component, you'll see that the class
name is Circle, and in the code snippet
| | 07:30 | here, let's just change
that so it's a capital Circle.
| | 07:34 | And now you'll see what we're doing is
we're setting the circle that we just created,
| | 07:37 | we are setting it to the localX
position. It occurred relative to the containing
| | 07:41 | sprite here, and we're just subtracting
70 pixels from there. And again, we are
| | 07:45 | also setting the Y position, and then we
are adding it here using the addElement
| | 07:49 | method to our display object to our container.
| | 07:53 | And then we are setting up our circles
here that we created up here where you
| | 07:58 | see circles, where I created the Object.
We are setting up the touchPointID is
| | 08:03 | equal to the circle that we created here.
| | 08:07 | Okay, so that should cause it to
appear on the stage right where the user
| | 08:11 | clicked, at least appear to, right, because,
of course the circle has its own size.
| | 08:15 | So then the next thing that happens is
the user will start moving it around and
| | 08:19 | as we do here, we're just saying as
long as the touchPointID is not equal to
| | 08:24 | null--so the touchPointID exists--
| | 08:27 | we then take our circles, we take our
touchPointID, and we take the X position
| | 08:32 | and we equal to this. And this is going
to occur every time they move it, so it's
| | 08:36 | going to be continually set to the
current position -70 pixels, and it will set
| | 08:43 | both the X and the Y coordinates.
| | 08:44 | So as long as they're still moving it,
you'll see that this is called each time
| | 08:49 | that they move it, but again, once
they lift their finger off, it's going to
| | 08:52 | call this function, onTouchEnd, and it's
going to remove the circle, as well as
| | 08:59 | its touchPointID, and it's going to delete
the circle's object there, so you can see that.
| | 09:05 | So that's sort of just a quick example of how
to utilize multi-touch in your Flex application.
| | 09:12 | So let's save this.
| | 09:14 | So you will see that I saved that, and
what I am going to do is I am also going to
| | 09:18 | save my FirstView.mxml.
And now multi-touch is not supported on the desktop.
| | 09:24 | I will, first of all, just run it on
the desktop so I will set up a mobile
| | 09:27 | configuration here, just to make
sure that there are no errors.
| | 09:31 | So I am going to choose my Google
Nexus S. I'm going to click Run.
| | 09:37 | Okay, I will click on Multitouch here
to open up that view navigator, just like
| | 09:41 | we showed you before.
| | 09:42 | Here's my MultiTouchHomeView.
| | 09:44 | You will see that currently it does nothing
because it's not supported on the desktop.
| | 09:48 | So let's make sure you'll see that
the project compiles with no problem.
| | 09:52 | So let's click on Run Configuration,
choose On device, and in this case make
| | 09:58 | sure that your device is plugged
in and all your drivers are working.
| | 10:02 | Click Run and you should see it
installs it on your device. For those iOS users,
| | 10:08 | you will have to take the IPA file,
set it up with your Provisioning profile
| | 10:11 | and your certificate and then create
the IPA file then add it your iTunes
| | 10:14 | Library and install it on your device that way.
| | 10:17 | Again, I am on an Android device.
| | 10:19 | So you'll see when I open this up on
the device, I'll click on the Multi-touch
| | 10:24 | here that I created, and then I will
just click somewhere on the screen and you
| | 10:28 | will see it creates that blue circle, and
I am continually moving it around using
| | 10:32 | the touch element here. Very cool!
| | 10:35 | And then when I let go of it, you'll
see that it disappears. Very, very cool!
| | 10:42 | So I will click on it again. Notice it appears.
| | 10:44 | It calls those methods.
| | 10:45 | I click on it and then it disappears.
| | 10:48 | So we've now seen how to add
multi-touch to a Flex for AIR application so we
| | 10:54 | can really interact with our users as they
were designed to be interacted on a mobile device.
| | 11:00 | Very, very powerful!
| | Collapse this transcript |
| Understanding the Keyboard class| 00:00 | Many mobile devices use a
virtual keyboard for text entry.
| | 00:04 | Virtual keyboards obscure part of the
screen and can sometimes be cumbersome to use.
| | 00:09 | When developing mobile applications, it
can often make sense to use alternatives
| | 00:13 | to the virtual keyboard.
| | 00:15 | For example, to have a user enter in a
number instead of a text field, consider
| | 00:19 | providing two buttons to
increase and decrease the values.
| | 00:24 | Try to limit depending on
keyboard events as much as possible.
| | 00:28 | Remember, the virtual keyboard is
only present when a user edits a text
| | 00:32 | field, and the application will only
dispatch these events when the keyboard is present.
| | 00:36 | Now that said, as developers, we can
cause that virtual keyboard to appear at
| | 00:41 | other points, and we are going to learn
how to do that. And then we can also let
| | 00:45 | our application actually resize itself
when that virtual keyboard appears on the
| | 00:50 | screen, taking up valuable real estate.
| | 00:53 | Getting the information from Android
device buttons is easy utilizing the
| | 00:58 | keyboard class as well, and these
device buttons are treated by AIR in exactly
| | 01:03 | the same way regular
keyboard events are treated.
| | 01:06 | By listening to the KeyDown event
we can get the key code and handle it
| | 01:10 | appropriately in our application.
| | 01:12 | Remember though, it's not possible
to override the Android Home button or
| | 01:16 | the iOS Home button.
| | 01:18 | These are both system protected.
| | 01:20 | We can, however, prevent the default
behavior of the Back, Search, and menu items
| | 01:25 | on the Android platform.
| | 01:27 | Okay, let's go ahead and examine
how to utilize some of the keyboard
| | 01:31 | functionality in our Flex application.
| | 01:34 | So you'll see here we have a
KeyboardExample main application. Then there's the
| | 01:38 | KeyboardHomeView that will pop up.
| | 01:40 | So let us look at some of these examples.
| | 01:43 | You'll see that there is the
skeleton of an init function.
| | 01:46 | This init function is being called on
the creationComplete, and then you also
| | 01:49 | see that there is a label in here as well.
| | 01:52 | So let's set up a listener here.
| | 01:54 | I am just going to say
stage.addEventListener, and just let's get an idea of how
| | 02:00 | to access the keyboard class.
| | 02:02 | So I am going to listen for a
typical keyboard event, which is a
| | 02:05 | KeyboardEvent.KEY_DOWN, and this just
means that the user has tapped one of the
| | 02:11 | keys. And then we'll call a
method here called handleKeyDown.
| | 02:16 | And then we'll write this new function
called private function handleKeyDown,
| | 02:23 | and we will make sure that we send
an event to it, which is called a
| | 02:27 | KeyboardEvent, as you see there.
| | 02:30 | So there's my KeyboardEvent.
| | 02:33 | Okay, the function itself won't be
returning anything, so I'll just specify void.
| | 02:37 | And then inside of here, let's just add
a quick conditional logic, just to test
| | 02:41 | this, and I'll say if
(event.keyCode == Keyboard.BACK), I can reference the
| | 02:53 | Android Back button and I can do something.
| | 02:56 | So in this case, I'll just type in deviceTxt.
| | 03:01 | Notice down below there is
already a text field with the deviceTxt.
| | 03:05 | I'll say .text property is
equal to "Back Button Pressed".
| | 03:10 | Okay, I could also prevent this
default behavior in my Android device if I
| | 03:15 | wanted to, by saying event.preventDefault,
or being able to do that.
| | 03:18 | So I have that very simple way of doing that.
| | 03:21 | And again, you'll see if I click Save,
let's just quickly run this on the Desktop.
| | 03:27 | I'll set up a new mobile launch
configuration, Google Android, since that's what
| | 03:32 | our project is, and let's run it on
the Nexus S, and then I'll click Run and
| | 03:39 | you'll see this runs it on the Nexus S.
| | 03:41 | If I click Keyboard, okay I click
Back and notice it quickly flashed the Back
| | 03:46 | button was pressed, and you could see
that, and you can also of course see that on
| | 03:50 | the device when we test it on the device.
| | 03:52 | Okay, let's look at some
other functionality here.
| | 03:54 | So one of the cool things is on your
whole application if the keyboard actually
| | 03:59 | pops up, that obviously takes up a lot
of screen real estate, and it can mess up
| | 04:03 | sort of the interaction and the
look and feel of your application.
| | 04:07 | So you actually have the ability on the
actual ViewNavigator application to set
| | 04:12 | a property here called resize for soft keyboard.
| | 04:16 | So let's add that to our
ViewNavigator application, and this will resize our
| | 04:20 | whole application
whenever a keyboard is pressed.
| | 04:23 | So here I am just going to
say resizeForSoftkeyBoard.
| | 04:32 | So the resizeForSoftkeyBoard ="true".
| | 04:36 | So I'll Save that, and this means that
whenever keyboard pops up, the application
| | 04:40 | will automatically resize itself
based on the less available real estate.
| | 04:46 | Okay, another thing that I can do is as
a developer, I can pop open that keyboard
| | 04:51 | any time that I like, not only when the
user clicks in a text field, but let's
| | 04:54 | say they highlight a button or a hotspot.
| | 04:57 | So here I can just simply say s:Button.
| | 05:02 | So what I'll do inside of this button,
you'll see that there is a property in
| | 05:05 | here called needsSoftKeyboard.
| | 05:08 | That will actually pop open the
soft keyboard if I set that to true.
| | 05:12 | So here if I just change this is equal
to label="Open Keyboard", you'll see that
| | 05:19 | that works perfectly.
| | 05:20 | Now these won't be possible to test in
the Desktop emulator, so we'll have to
| | 05:24 | actually test this on the device.
| | 05:27 | So let's see we have the Open Keyboard,
and what I am going to do is just go back
| | 05:31 | to my Run Configurations, make sure
that my Android device is actually plugged
| | 05:35 | in, and then I'll choose On device.
| | 05:37 | I'll click Apply, and I'll click Run.
| | 05:42 | And you'll see we have
just a quick error up here.
| | 05:45 | So I am sure if I just click here, let
me just go back up here and make sure I
| | 05:51 | get the code hinting.
| | 05:52 | So if I say resizeForSoftKeyboard, okay,
just as you see there, that will resize
| | 05:59 | it and then add in my equal and
then set up my indentation there.
| | 06:04 | You could see I just had the
CamelCase wrong for that resizeSoftkeyBoard.
| | 06:08 | So I'll click there, and then what I'll
do is go back to my Run Configurations
| | 06:14 | and run this on the device, and we
should see that error now disappears.
| | 06:19 | And it will install it on the device.
| | 06:23 | Okay, so you can now see that
it's installed on the device.
| | 06:25 | I am going to click right here
on the word Keyboard to open up my
| | 06:29 | KeyBoardHomeView, and you'll see I
have the button there. And if I change the
| | 06:34 | focus to the button, notice my virtual
keyboard now pops up on the screen, and
| | 06:41 | the application resizes based on the less
available real estate because of that keyboard.
| | 06:47 | So, now we've sort of learned how to
interact with the keyboard on a mobile
| | 06:53 | device using various different
techniques available to us in mobile
| | 06:57 | application development.
| | Collapse this transcript |
| Using the Camera class| 00:00 | In this movie, we will look at
accessing the camera feed from the device inside
| | 00:04 | of our AIR application, which opens up a
tremendous amount of possibilities for
| | 00:09 | building creative applications.
| | 00:11 | There are two ways to play with
the camera in Flex applications.
| | 00:14 | We can either use the camera UI class,
which lets the phone capture a picture or
| | 00:19 | a video and then save it to the camera
roll of the device, or we can use the
| | 00:24 | classic ActionScript camera class,
which we will explore in this movie.
| | 00:28 | After adding the code, we will then
run the application on the device and see
| | 00:33 | how it can access the camera.
| | 00:35 | Okay, so I've imported my exercise files
for this in 6_04, and what I'd like you
| | 00:40 | to do is just create a brand-new component.
| | 00:43 | So I am just going to say New > MXML
Component, and let's just call this
| | 00:48 | CameraHomeView, and then I am going to
just click Finish. Make sure it's based
| | 00:53 | off of your view class.
| | 00:55 | Okay, now in order to access the
camera if you are on an Android device and
| | 00:59 | testing this on an Android device,
| | 01:02 | make sure you check your
CameraExample-app.xml, your descriptor file, and make
| | 01:07 | sure that you actually have
permission to access the camera.
| | 01:11 | Now of course you could set this up
when you're building the project, but for
| | 01:14 | now since we already have an
existing project, scroll down here to
| | 01:19 | approximately line 157 and make sure
that this uses-permission Android Camera
| | 01:26 | is not commented out, because you have
to have permission to access the camera
| | 01:31 | on an Android device.
| | 01:32 | For iOS users, you don't need to
worry about setting up the permissions.
| | 01:37 | But again for Android users, if this is
not working, come back here and make sure
| | 01:41 | you check that because odds are, you
don't have permission to access the camera.
| | 01:45 | Okay, so let's go our CameraHomeView
and first of all, inside of our view, let's
| | 01:50 | just add a group container.
| | 01:52 | So I am just going to simply say s:Group,
and I'll give this an id of
| | 01:57 | cameraGroup here, and let's set up a width of 320
pixels and a height of 320 pixels as well.
| | 02:09 | So now I've set that up, and this is just
where I am going to place my video from
| | 02:13 | the camera inside of this group
container. And then let's go ahead and add in a
| | 02:17 | script block and I'll just follow best
practices here and add it above my group.
| | 02:23 | So I'll just say fx:Script, and then let's
first of all, just add in an init function.
| | 02:30 | So I'll say private function init, and then
I'll specify void, and I'll put in my function here.
| | 02:37 | And then let's also make sure
that I don't forget to call this.
| | 02:40 | So I'll add a creationComplete on my
view to call that init function.
| | 02:46 | Okay, so there is my init function,
and then let's say var camera:Camera =
| | 02:56 | Camera.getCamera, okay.
| | 02:59 | So of course, our device will have
to have a camera for this to work.
| | 03:02 | But this will actually get the camera
from the device and place it in this
| | 03:07 | camera object, and I'll just add in an
if statement to make sure that camera is
| | 03:11 | in fact true, that they were able to do that,
| | 03:14 | so it will work on devices that
have a camera, and then I'll say var.
| | 03:19 | We'll just create ui here, and
we'll type this guy as a UIComponent.
| | 03:24 | And then I'll simply just say New >
UIComponent, and then I'll create a video
| | 03:31 | object so I can display this on our
screen. And I'll simply say Video, or Video
| | 03:37 | is equal to a new Video object, and
let's match the size of the group container
| | 03:44 | that we added earlier.
| | 03:45 | So here I'll just say 320 width, 320 height.
| | 03:49 | So that's of course where we are going to
store the video inside of that group container.
| | 03:52 | And then I'll just set the mode of the camera.
| | 03:55 | So I'll say setMode, and again I am going
to set it to 320 pixels, 320 for the height.
| | 04:02 | I could set up the frames per second as well.
| | 04:05 | So I am going to say it's going to
capture 24 frames a second, and then to my
| | 04:10 | video object that I created,
I'll just attach my camera object.
| | 04:15 | So I'll use the method here called
attachCamera, and then I'll take my camera
| | 04:19 | object that I created earlier and
attach it right there to my video object.
| | 04:24 | Then I'll take my UIComponent,
| | 04:26 | I'll simply do addChild,
okay, and I'll simply say video.
| | 04:30 | I add that video object that I created
directly to my UIComponent, and then
| | 04:36 | I'll reference my group, and I'll add
the UI to my group container so it will be
| | 04:42 | displayed on the screen.
| | 04:44 | So here, remember I created that group
container with a lowercase c, as you can
| | 04:48 | see there, so I'll say
cameraGroup.addElement, and then I will add the UI
| | 04:58 | element there, and that should
display the camera on the device.
| | 05:03 | Now again this is not supported in
the Desktop devices that we have,
| | 05:06 | so make sure you save that.
| | 05:08 | One other thing you're going to need to
do is go back to your FirstView here and
| | 05:12 | just make sure that the call to this
component, the views.CameraHomeView,
| | 05:17 | first of all, make sure that it
matches the name, and then secondly just
| | 05:21 | uncomment that, so that when you
click on the Camera inside of your mobile
| | 05:26 | application it will display that.
| | 05:28 | Okay, so now I am going to click there,
and I am going to go ahead and just run
| | 05:32 | this application on my device.
| | 05:34 | So I'll set up a new mobile launch
configuration and again, for those of you
| | 05:39 | who have iOS devices, you have to point
it your provisioning profiles, point it
| | 05:43 | to your certificate, create the IPA file,
put the IPA file into iTunes, and sync
| | 05:47 | it with your device.
| | 05:48 | If we are on Android devices,
I can just click on On device here.
| | 05:52 | Make sure that your
Android device is plugged in.
| | 05:55 | Click Run and it should automatically
install the application on the Android device.
| | 06:02 | So you'll see my application here on
the Android device. You'll see the three
| | 06:05 | buttons where it says
Multitouch, KeyBoard, and Camera.
| | 06:09 | If I just click on the word Camera,
and you can see it on the device the
| | 06:14 | actual video from the camera being
displayed right inside of your Flex
| | 06:21 | application. Very cool.
| | 06:24 | So now we've gotten a good idea of
how to utilize the camera class with
| | 06:29 | Adobe Flex applications.
| | Collapse this transcript |
| Referencing the camera roll| 00:00 | The camera roll class allows us to
access the images stored on the camera
| | 00:04 | roll of the device.
| | 00:06 | The camera UI class works in the
same way as the camera class we learned
| | 00:10 | about in the last movie.
| | 00:11 | We must request an image from the
camera, either the camera itself or the
| | 00:16 | camera roll, and doing this works in much the
same way as the browse method in the file class.
| | 00:22 | We make a request to the camera
application and we wait for either a complete or
| | 00:27 | a cancel event to fire.
| | 00:28 | The complete event returns an instance
of the Imedia promise class with a type
| | 00:34 | of media event, and this gives us all
the information we need to actually access
| | 00:39 | the image and put it into our AIR application.
| | 00:42 | We're now ready to build a simple
example that shows how to browse the camera
| | 00:46 | roll of the device, and then we will
use the loader class to load that image
| | 00:50 | directly into our application.
| | 00:52 | We'll also use the MediaEvent and
MediaPromise classes to access some of the
| | 00:57 | properties of the image.
| | 01:00 | So the first thing, let's go to our
views folder and let's create a new MXML
| | 01:05 | component. And inside of this MXML
component, let's go ahead and just call this
| | 01:12 | CameraHomeUIView and go ahead and click
Finish, and let's go ahead and just add
| | 01:22 | in a label control, first of all.
| | 01:24 | So I'm just going to simply say
spark Label and let's give it an id of
| | 01:29 | mediaPath, just so we can
know where our mediaPath is.
| | 01:34 | This will be useful for debugging.
And then of course let's go up to our
| | 01:39 | component itself, add a creationComplete,
and then specify an init function here
| | 01:47 | on a creationComplete, very nice.
| | 01:49 | So now we specified that, and then let's
go ahead and add in a bitmap image, so we
| | 01:55 | have a place to load the image
itself into. So I'll say, s:
| | 01:58 | BitmapImage, and I'll give it an id of
imageLoader, so we'll load our image into that
| | 02:08 | bitmap, as you see there. And then I
will simply add in a button control, so
| | 02:13 | I'll say s : button, and I'll give it an
id of browseCameraBtn, and I'll give it
| | 02:23 | a label, to just say Open Camera Roll.
| | 02:28 | So when the user clicks on this, what
we're going to do is we're going to simply
| | 02:32 | have to open up the camera roll, and
the user will be able to click on that
| | 02:35 | button to make that happen.
| | 02:37 | Okay, let's also check our descriptor file
and make sure that we have access to the camera.
| | 02:42 | So open up your CameraRollExample,
right here your descriptor file, the XML
| | 02:47 | file, and again, this is only needed to do if
you're deploying this on an Android device.
| | 02:51 | For iOS users, you don't need to
worry about this, but just again, make
| | 02:56 | sure here on line 157 that this is not commented out,
because we need to have permissions to access
| | 03:02 | the camera of the device. Okay.
| | 03:04 | So I'm in good shape there. And now
what I want you to do is go back up above
| | 03:10 | your UI components and just
simply add in a script block.
| | 03:16 | So here, I'm going to say fx:Script, and then
what I want you to do is in your init function, just say
| | 03:23 | protected function init, and then
specify void here. And now let's access the
| | 03:30 | button that we created.
| | 03:31 | So we're going to say
browseCameraBtn then, we'll say, addEventListener.
| | 03:38 | We'll listen for a click event.
| | 03:40 | So I'll say MouseEvent.CLICK, and
then we'll have a method here called
| | 03:45 | browseCameraBtnClicked.
| | 03:51 | So that's going to be a method that
we're going to write in just a moment, and
| | 03:54 | then we'll create a camera roll in
just a second here. So let's say roll, and
| | 04:00 | then we'll say addEventsListener
directly to our camera roll, and this will be
| | 04:06 | when the user actually selects something.
| | 04:07 | So we use this
MediaEvent.SELECT here, and I'll call a method
| | 04:12 | called imageSelected.
| | 04:14 | So this'll be when the user actually selects
something from the camera roll, we'll set that up.
| | 04:19 | So up above, let's declare our camera roll.
| | 04:23 | So I'll say, protected var roll:
CameraRoll = new CameraRoll, just like so, and
| | 04:34 | then I'll say protected var loader:
| | 04:39 | Loader, because we're going to load
this in, and I'll just say new Loader.
| | 04:43 | So we'll use both of these in just a moment.
| | 04:46 | So there is our init function.
We've set up to listen for this event.
| | 04:49 | We've set up to listen for the mouse
event here, and you'll see that it's just
| | 04:53 | given us a few errors saying
these have not been written.
| | 04:55 | So we're going to write those right now.
| | 04:57 | So let's first of all, let's get a
little more real estate for our coding here,
| | 05:03 | and I'm going to say protected
function browseCameraBtnClicked. Then I'll say
| | 05:16 | event:MouseEvent, and I'll specify
that this won't be returning anything, so
| | 05:19 | I'll specify a void here.
And then I'll simply say if
| | 05:22 | CameraRoll.supportsBrowseForImage,
so again, that means you're allowed to
| | 05:32 | browse the camera roll, I'm going to do it.
| | 05:35 | So there is a command here inside
of Flex that I can do, and it's just
| | 05:39 | simply reference your camera roll object and
you just use command called browseForImage.
| | 05:45 | So I'm just making sure that it does
in fact support that, and if it doesn't
| | 05:50 | support it, let's go ahead and just say
mediaPath.text = "Browse for image is not supported".
| | 06:01 | So that just again means that
that's not actually supported.
| | 06:05 | Okay, that's easy enough. And then
finally, let's create another function here,
| | 06:11 | so I'm just going to simply say
protected function, and we'll call this function
| | 06:16 | imageSelected, and this is
going to receive event:MediaEvent:
| | 06:24 | void. And then add in the braces of
course, for my function, and then we'll
| | 06:30 | create a MediaPromise object.
| | 06:33 | So here I'll say var
mp:MediaPromise = event.data, and then I'll say
| | 06:42 | mediaPath.text = mp object.file.name, and
then I'll simply just say add in a line break.
| | 06:56 | So I'll use a /n to put a
line break in, and then I'll say + mp MediaPromise.file.URL.
| | 07:07 | So this is where that lives on the
device, and then all I have to do is take my
| | 07:12 | loader object and just specify that I want to
load that particular item into my loader object.
| | 07:20 | So I'll say imageLoader.source = mp my
MediaPromise.file.url, as you see there.
| | 07:30 | So that will again execute the image
selected, and that should allow me to
| | 07:35 | browse the camera roll,
so let's go ahead and save that.
| | 07:40 | If you go back to your FirstView.mxml,
if you just go back over here and just
| | 07:46 | uncomment this Camera Home UI view,
| | 07:50 | let's go ahead and just select that.
| | 07:53 | You should see the Camera Home UI.
| | 07:55 | It will load that in, and you'll see I
have a quick typo here, so let's load in
| | 08:00 | the proper component. And ours is called
CameraHomeUIView, okay. That should get
| | 08:10 | rid of that little warning message,
perfect. And again this is something that
| | 08:14 | we're going to actually
need to test on the device.
| | 08:17 | So here I'm going to
click on Run Configurations.
| | 08:19 | I may choose my mobile application.
| | 08:22 | I'll set up a launch
configuration, and I'll test it on the device.
| | 08:26 | So I'll say On device. I'll click Run.
| | 08:29 | We should see that it compiles with no
problem, and it goes ahead and actually
| | 08:34 | installs this on the device.
| | 08:37 | If I click on the CameraRoll icon right
here on the device, and now you'll see
| | 08:42 | that I have my button called Open Camera Roll.
| | 08:46 | You'll see it automatically opens up
the camera roll inside of the application.
| | 08:51 | I could see all the images on my camera roll.
| | 08:53 | I can browse through them, or I can
even take one by clicking on the camera
| | 08:57 | button. But I can select this image
here, for example, and it goes ahead and
| | 09:04 | loads it right into my
AIR application, very cool!
| | 09:09 | In this case, you can see
this image is extremely large.
| | 09:12 | I can only see a small piece of it in
my mobile application, but you can see
| | 09:17 | it did load that image directly into
the application utilizing the loader
| | 09:22 | class, very nice!
| | Collapse this transcript |
| Using the Geolocation APIs| 00:00 | The Geolocation APIs provide a
high-level interface to access the geographical
| | 00:05 | location of the device.
| | 00:07 | We will use an interval to get
repeated location updates in our application.
| | 00:12 | In Android, when the location of the
device changes, the application can receive
| | 00:17 | updates about the changes, including
information on altitude, accuracy, heading
| | 00:22 | speed, and timestamp by
using either the GPS satellites--
| | 00:26 | if a GPS sensor is available--or from the
wireless network itself, which will give
| | 00:31 | us a more approximate location.
| | 00:33 | The same applies in iOS as well.
| | 00:36 | In our application, for testing purposes,
we will be setting the Update Interval
| | 00:41 | to 100 milliseconds.
| | 00:42 | For most applications this is very high,
and you should use the highest settings
| | 00:47 | your application will permit to save
on battery power, which will probably
| | 00:51 | require some trial and error.
| | 00:53 | If the GPS sensor is muted, for example
the device is inside without a strong signal,
| | 00:58 | you can test on the Muted property
and turn off all GPS functionality, which
| | 01:03 | will save battery life.
| | 01:04 | Remember, the GPS subsystems
running constantly are true power hogs on
| | 01:10 | our mobile devices.
| | 01:12 | Okay, so I've imported project 6_06,
and I am just going to create a new
| | 01:17 | component in my views here called GPSHomeView.
| | 01:22 | So here I am going to click New,
and then I'm going to simply say MXML Component
| | 01:26 | here, and I am going to call this
GPSHomeView, so now you see I have my
| | 01:32 | spark.components.View.
| | 01:34 | In this case, I won't need to specify a
layout. I'll click Finish, and that will
| | 01:38 | create my component, and let's just
go ahead and add a label control here.
| | 01:42 | So I'll just say s:Label, and I am
going to go ahead and go in and add a label
| | 01:49 | with the id= "geoStatus", okay.
So I just added a very simple Label control.
| | 01:57 | I am going to also add a text area,
so I'll just say s:TextArea, as you see
| | 02:03 | there, and let's give this and id of
geoResponse. And then I am going to go ahead
| | 02:12 | and add a creationComplete
that cause an init function.
| | 02:17 | So I am going to just go up here and
add a creationComplete to my view, and we
| | 02:23 | are going to go ahead and just call an
init function, just like so. And let's just
| | 02:28 | check our GPSExample.xml,
and this is on approximately line 158.
| | 02:34 | Let's make sure for Android users that
we have permission to access the GPS.
| | 02:38 | So if you scroll to 158, you should
see that this is not commented out, your
| | 02:43 | uses-permission, android.permission.ACCESS_FINE_LOCATION.
| | 02:48 | That means that we do have
access to utilize the GPS chip.
| | 02:52 | So again iOS users don't need
to actually worry about that.
| | 02:56 | So make sure that that's set, and then
let's go ahead and just add in a script block.
| | 03:01 | So I am going to say fx:Script, and the
first thing that I am going to do is I am
| | 03:05 | going to build a init function.
| | 03:07 | So I'll say protected function init,
and then we'll just make sure that our
| | 03:13 | device does in fact support GPS.
| | 03:15 | So I'll just say if (Geolocation.
isSupported == true), then I'm going to go
| | 03:26 | ahead and I am going to say
geoLocation = new Geolocation.
| | 03:33 | So that's going to create a new
object called Geolocation based on the
| | 03:37 | Geolocation class. And then let's just define
that Geolocation class outside of our init.
| | 03:44 | So I am just going to say protected var
geoLocation, and then I am going to say
| | 03:52 | Geolocation right here.
| | 03:54 | And then of course I'm populating it, if in
fact the Geolocation classes are supported.
| | 04:00 | Now let's go ahead and do the
Geolocation set requested update interval.
| | 04:04 | So I am going to say
geoLocation, and then I am going to say
| | 04:07 | setRequestedUpdateInterval, and this is
how often our application will go back
| | 04:11 | and check with the GPS to
determine our specific functionality.
| | 04:15 | So again, the more times we go back,
the faster that battery drains.
| | 04:19 | So in this case, for training,
so we see something quick,
| | 04:22 | we'll set it to 100 milliseconds.
| | 04:24 | Again, you might want to work with it
and do some trial and error and figure out
| | 04:28 | what the lowest setting you can to get your
application to work effectively is. All right!
| | 04:33 | So now I am going to say geoLocation,
and then I'll say addEventListener and
| | 04:42 | I'll say GeolocationEvent.UPDATE.
| | 04:48 | So this is when this update is fired.
| | 04:50 | Then I am going to write a method
here called handleLocationRequest.
| | 04:57 | So this is a method that I am going to write.
| | 04:58 | So it's going to again listen
for that. When that update is fired,
| | 05:02 | it's going to call this. So that's perfect.
| | 05:05 | And let's just add in an else, just in
case GPS is not supported on our device.
| | 05:11 | Let's just go ahead and add in an else
statement here and just simply update
| | 05:16 | our text field and just say geoStatus.text and
just say, "GPS is not supported on your device."
| | 05:28 | So now we've updated that, and then
let's of course write our method here.
| | 05:32 | There is our init function,
and you'll see we have our
| | 05:35 | handleLocationRequest method.
| | 05:37 | Let's go ahead and write that method.
| | 05:39 | However, this method just updates a
lot of different information, because the
| | 05:43 | GPS not only includes where you
are on a map but includes your exact
| | 05:48 | longitude, your altitude, your speed,
your speed heading, your speed in miles
| | 05:53 | per hour, your speed in kilometers per hour,
your horizontal accuracy, your vertical accuracy.
| | 05:57 | So there is actually quite a bit of code here.
| | 06:00 | So I've just created a code snippet
for you. And if you go over here to your
| | 06:05 | exercise files and open up your code
snippets and then scroll down here, and
| | 06:12 | inside of your code snippets you'll
see at the end here in your 6_06, you have
| | 06:16 | your handleLocationRequest.
| | 06:19 | I'll just copy and paste this code,
and here's our method. Just make sure you put
| | 06:25 | it right after your init method and
just paste it right in there, and let's just
| | 06:30 | take a quick look at this code.
| | 06:32 | So you'll see that we're converting us
into miles per hour, and this is being
| | 06:36 | sent in the event object, the speed.
| | 06:38 | So here we're following this
formula to convert it to miles per hour.
| | 06:41 | We're also following a formula to
convert that to kilometers per hour, and then
| | 06:45 | you'll see we're updating the text field
here to the date and the time. And then
| | 06:49 | you will also see that we're setting
the latitude which is also being passed in
| | 06:54 | the event object, as is the longitude,
as is the altitude, and we're again
| | 06:59 | converting our miles per hour and
our kilometers per hour into strings.
| | 07:03 | We're setting up the heading,
and then we're also creating the horizontal
| | 07:06 | accuracy and the vertical accuracy, and we
are going to write this all to the screen.
| | 07:11 | Okay, so now let's just go ahead and
save this, and then all I want you to do is
| | 07:18 | just make sure that in your FirstView
here under GPS, you have your GPSHomeView.
| | 07:26 | You'll see the names match, and just
uncomment the GPSHomeView, and the user ends
| | 07:31 | up clicking there. And let's go ahead
and just test this actually on the device.
| | 07:37 | So I am going to go back here to my Run
Configurations, I am going to create a
| | 07:42 | new mobile launch configuration.
| | 07:44 | I am going to say On device in this case.
| | 07:46 | I've already connected my device in.
| | 07:48 | I'll click Apply, and then I'll click Run
and I'll just take a look at my device here.
| | 07:56 | Okay, so what I am going to do is I am
going to click on the GPS frame here,
| | 08:01 | and then you'll see it populates my
text area here with a latitude, the
| | 08:06 | longitude that I am currently at, the
altitude, the speed in both miles per
| | 08:11 | hour and kilometers per hour, the heading, the
horizontal accuracy, and the vertical accuracy.
| | 08:17 | So you can see, you can easily
incorporate, using the Geolocation classes, this
| | 08:22 | GPS functionality into your Flex
applications, whether you're on Android or
| | 08:27 | whether you're on iOS.
| | Collapse this transcript |
| Using the Accelerometer| 00:00 | Using the accelerometer, the
developer can get controls and user
| | 00:04 | interactions based on how a user
interacts with the device itself, and not
| | 00:09 | just the screen controls.
| | 00:10 | The accelerometer can make a very
useful control mechanism for mobile
| | 00:14 | application and in particular, games.
| | 00:17 | The accelerometer class in
ActionScript checks for signals from the device
| | 00:21 | accelerometer at a specified update.
| | 00:24 | It is important to check this interval and do
what makes the most sense for your application.
| | 00:28 | If you check too often, you can kill the
battery; but if you do not check enough,
| | 00:33 | the updates may not do exactly what you want.
| | 00:35 | It's important to test and test and test on
the device, especially for the accelerometer.
| | 00:41 | So we're now ready to actually go
through and build an application that will
| | 00:45 | move a ball around the screen
based on a user's interaction.
| | 00:49 | It's important to check if the
accelerometer is supported, because not all
| | 00:53 | devices support the accelerometer.
| | 00:55 | And we also of course want to check
that our update performs well and conserves
| | 00:59 | battery power when we can.
| | 01:01 | Okay, so the first thing I want you to do is
just create a new component in your views here.
| | 01:06 | Let's just say New > MXML Component, and
let's call this component AccelHomeView.
| | 01:17 | Okay, then I'll click Finish.
| | 01:18 | So now I've just created a brand-new
component, and the first thing I want to do
| | 01:23 | is we're going to let the
user move around a ball.
| | 01:26 | So I want to just make sure that I
have--you should see in your assets folder
| | 01:31 | here there is just a file
in here called circle.jpg.
| | 01:34 | So in that assets folder, let's add in
an import. I'm just going to say s:Image.
| | 01:41 | I'll give this an id of c. And what
I'm going to do is embed this image of a
| | 01:46 | circle right here, so I'm just
going to simply say source= @Embed.
| | 01:53 | This means I'll bake it into the SWF,
as we seen before, and then I'm going to
| | 01:56 | say assets and I'll say circle.jpg.
| | 02:01 | Okay, close off my embed, close off my
quote, and then close off my image tag there.
| | 02:06 | So I've added an image here, and that
will be the circle that the user will
| | 02:10 | actually move around on the
screen based on the accelerometer.
| | 02:14 | Now, I'll go ahead and build a script
block here and inside of the script block,
| | 02:19 | what I'm going to do is I'm going to
declare a few different variables here.
| | 02:22 | So I'm going to just simply say
protected var accel, and I'm going to datatype
| | 02:29 | this as an accelerometer.
| | 02:33 | So there is my accelerometer.
| | 02:34 | I'll do a Ctrl+Space and actually just
add the import here, so it automatically
| | 02:39 | imports that class for me.
| | 02:41 | We'll be utilizing that. And then I'm
also going to just simply say protected
| | 02:46 | var, and I'll say accelX:Number,
and that will just declare this.
| | 02:54 | And then I'm going to say protected
var accelY, and then I'm also going to
| | 03:00 | type that as a number.
| | 03:02 | And then I'm going to say protected var
accelZ. I'll datatype that as a number as well.
| | 03:09 | So now I have all of these
different, so again I have the Z index, the
| | 03:13 | acceleration X and Y positions
of my accelerometer. Okay, great.
| | 03:18 | Let me just add a space between the
declaration of my variables here, and then of
| | 03:22 | course I'm going to first of
all build my init function.
| | 03:25 | So I'll say protected function
init(), and then I'll specify void here,
| | 03:32 | okay, because I won't be returning
anything. And let's add that creationComplete
| | 03:36 | up here to the top of my view,
so I can call that init function.
| | 03:41 | So here I'll just say
creationComplete= init(), as you see there.
| | 03:45 | Set up some of my spacing here.
| | 03:49 | So there is my
creationComplete and my init function.
| | 03:53 | And then I'm just going to add in some
code here, and I'm just going to simply
| | 03:56 | say if(accelerometer.isSupported)--
| | 04:02 | that means if your device does
in fact have an accelerometer--
| | 04:06 | let's go ahead and create a new accelerometer.
| | 04:09 | So I'm going to say new Accelerometer().
I've just created a new accelerometer,
| | 04:16 | and then I'm just going to say how
often I want my application to check.
| | 04:20 | So here I'm going to use a property
called setRequestedUpdateInterval.
| | 04:24 | so I'm going to set it to 100 milliseconds here.
| | 04:27 | And then I'm going to add an EventListener here.
| | 04:31 | So I'll say addEventListener, and I'm
going to listen for an event called
| | 04:35 | Accelerometer.Update that you see
there. And let's create a method here called
| | 04:40 | _onAccel_ and we'll just
call it UpdateHandler, like so.
| | 04:50 | So that will call my _onAccel_
UpdateHandler, and then I'm going to just add
| | 04:55 | another EventListener called Enter_Frame.
| | 04:59 | So I'm going to say Event.Enter_Frame, okay,
and then I'm going to say _onEnterFrame.
| | 05:11 | So what _onEnterFrame does is this
is based on the frame rate of your
| | 05:15 | application, and it will actually call
whatever method we put in here--in this
| | 05:20 | case we're saying _onEnterFrame--it will
actually go ahead and call this based on
| | 05:25 | the frame rate of the movie.
| | 05:26 | So if it's 24 frames a second, it will
call that function 24 times, and that will
| | 05:30 | just be nice because we can
continually check for updates when we do that.
| | 05:35 | Okay, so again, you'll see that we
have not defined our _onEnterFrame and we
| | 05:39 | haven't defined our OnUpdate handler.
| | 05:41 | But I've actually defined those for you
in a code snippet, because again there is
| | 05:45 | a fair amount of code here, and I
want to be able to walk through it.
| | 05:48 | So if you go back to your exercise files
and you go to your codeSnippets and you
| | 05:54 | scroll down to the end here, okay, we
should see that we have some code snippets
| | 06:00 | here. And you'll see we have, under
Movie 6_07, you have your _onEnterFrame, and
| | 06:07 | then you also have another property
in here called Accel_UpdateHandler.
| | 06:12 | And let's look at what this doing.
| | 06:14 | I'm going to click Copy and I'll be
able to copy those functions directly
| | 06:19 | into my Script block.
| | 06:21 | So make sure you place them after your init
methods, and let's just look at the code we have.
| | 06:26 | So first of all, you could see we've
commented it here for you. But we want to
| | 06:30 | make sure that when the user rolls the
device, when they move the device around
| | 06:35 | and rotate the device, we don't want the
circle to actually completely go off the screen.
| | 06:39 | So in this case I have a setting
called keep in x bounds for this.
| | 06:43 | Okay, and then I have it make sure that
it's kept in the y bounds. And you could
| | 06:47 | see I'm basing it off of these pixel
settings, so in this case 480 and 775.
| | 06:54 | We might want to change
those based on the mobile device.
| | 06:58 | So you could see we have
that for the accelerometer.
| | 07:01 | We also have to keep in y
balance, and then you'll see for the
| | 07:04 | UpdateHandler, right,
| | 07:05 | we're just setting these to the
accelerationX, the accelerationY, and the
| | 07:10 | accelerationZ, and these are all
automatically been sent over from the event objects.
| | 07:16 | Make sure you have a
semicolon there at the end.
| | 07:18 | Again, this event object is updated
every time we check using the interval that
| | 07:23 | we set up earlier, so we can see that.
| | 07:26 | Okay, so that's pretty straightforward,
and that allows us to access the accelerometer.
| | 07:31 | All right, so let's see how this works.
| | 07:33 | I'm just going to hit Save,
and there is my AccelHomeView.
| | 07:37 | Let's go back to our FirstView
here and uncomment right here, okay.
| | 07:44 | You'll see we have the
accelerometer AccelHomeView.
| | 07:48 | Go ahead and click Save, and then what
I'd like you to do is go back here, and
| | 07:54 | again we're going to need to test
the accelerometer itself on the device,
| | 07:59 | so here I can click on Run
Configurations, choose my Mobile Application, set up a
| | 08:04 | new launch configuration for my device,
| | 08:06 | make sure that my device is currently
plugged in, click on Apply, and then click
| | 08:11 | on Run, and you should see the
application will start up the device.
| | 08:17 | And now if I click on the
Accelerometer tab on the device, you could see that
| | 08:24 | just by rotating the device, I can move
around that circle and you could see that
| | 08:30 | it constrained within the limits.
| | 08:31 | Again, you could see the constraints
that I've set up are not exactly perfect
| | 08:35 | for a mobile device here, for this Nexus S,
but you can actually play with it and
| | 08:40 | adjust those settings.
| | 08:42 | And again, a lot of times when you're
using the accelerometer, to make sure
| | 08:45 | you've utilize battery life it is sort
of a process of trial and error, but you
| | 08:50 | can play with that, and you could
see that in fact you can access the
| | 08:53 | accelerometer from a mobile device.
| | 08:56 | And it's a very powerful functionality,
| | 08:58 | especially if you're building games, if
you want a unique way to interact with
| | 09:02 | the user outside of the screen,
the accelerometer is perfect.
| | Collapse this transcript |
|
|
7. Optimizing Flex Apps for MobileUtilizing decreased memory | 00:00 | Conserving memory is always
important in application development, even for
| | 00:04 | desktop applications.
| | 00:06 | Mobile devices, however, place a
premium on memory consumption, and it is
| | 00:10 | worthwhile to limit the amount of
memory your application consumes.
| | 00:14 | One way of doing this is of course
developing your application in pure
| | 00:18 | ActionScript and choosing the simplest display
object that makes sense for your application.
| | 00:24 | For simple shapes that are not
interactive, choose a shape rather than a sprite,
| | 00:28 | a view, or other complicated display objects.
| | 00:32 | Remember, each object takes up memory, and
memory is at a premium on a mobile device.
| | 00:38 | Also, when you can, instead of creating new
objects, try to reuse objects in your code.
| | 00:44 | So let's look at some examples here,
and you'll see here if you scroll down, if
| | 00:48 | you import 7_01 and you scroll down to
your init function, well, you see that
| | 00:53 | I've created three different objects.
| | 00:55 | I've created a Shape object, I've created a
Sprite object, and I've created a View object.
| | 01:00 | So you see I have all these different
objects, and I'm utilizing this getSize
| | 01:04 | method, located in my flash.sampler
package, and I just want to see what the size
| | 01:10 | of each one of these different objects are.
| | 01:13 | So let's go ahead and
just debug our application.
| | 01:16 | So I'll choose Debug Configurations.
| | 01:19 | I'll set up a new mobile debug
configuration. We'll just do this on the desktop.
| | 01:23 | And I have this set up as an iPhone application,
| | 01:26 | so let's choose an iPhone 3GS.
I'll click Debug, and let's look at our console.
| | 01:32 | So you'll see here,
my shape object is only 236 bytes.
| | 01:38 | The sprite object is only 424,
but my view in this case is 1244.
| | 01:45 | Now bear in mind the mobile framework
will create and destroy these, but when
| | 01:49 | you are getting into larger
applications, these kind of things can matter.
| | 01:53 | Also remember, it's very important to
remove objects when you're finished with
| | 01:58 | them, so that they no longer take up
memory and that can actually be done by
| | 02:02 | setting the object to null.
| | 02:04 | So remember, we can do that at later points, too.
| | 02:07 | So, for example, I can simply say
something like mySprite is equal to null
| | 02:13 | and that will actually remove the object and delete that as well.
| | 02:18 | And then remember I can also call
System.gc, the garbage collector.
| | 02:24 | I can force the
garbage-collection process at any point.
| | 02:28 | Other things that you can do is
try to utilize the SQL database
| | 02:32 | that's actually included with the
AIR run time, instead of storing that
| | 02:36 | information actually in the memory of the
device, and write that information to the database.
| | 02:41 | Again, lynda has a series on how to
utilize the desktop version of the AIR
| | 02:45 | database and again it's exactly the
same on mobile devices, so you can do that.
| | 02:50 | Another thing that you often can make
mistakes within your code here is, for
| | 02:55 | example, you can fall under the
temptation not to remove your event listeners.
| | 03:00 | So, for example, you'll see down below I
have a button here called mybutton, and
| | 03:04 | then I have a label here called
"click me", and I've added an Add Event
| | 03:09 | Listener to the button here.
| | 03:11 | So one of the most common sources of
memory leaks in Flex applications
| | 03:15 | is you just have too many event
listeners and you forget to remove them.
| | 03:18 | So in this case have added a simple
event listener called Click, and I'm
| | 03:22 | calling mybutton handler down here and I just
have a simple trace that says button clicked.
| | 03:27 | But you can often forget to remove
your event handlers, so you always want to
| | 03:33 | make sure that when you're done so--
for example, I'm no longer listening for
| | 03:36 | this click event--I always use this
command here called removeEventListener, and
| | 03:42 | I can remove the event and then specify
the method that I want to remove. And at
| | 03:47 | this point, in this case, when I click
the button again, you'll see that that will
| | 03:51 | no longer cause the button to click.
| | 03:54 | So let's save that, and I'll go ahead
and just run this on a mobile device, and
| | 04:00 | make sure, you'll see I have my ADL
already open. In fact, let's debug this.
| | 04:05 | So if I debug this, I click on click me,
notice it says button clicked, but if I
| | 04:10 | click it again, that listener has been
removed and is no longer active, so the
| | 04:15 | button no longer works.
| | 04:16 | So again when you're done with
something, do not forget to do that remove event
| | 04:21 | listener, and that will cause your
applications to perform much better and can be
| | 04:25 | very important on mobile devices.
| | 04:27 | So remember, memory management is an
important consideration for mobile devices.
| | 04:31 | It's important to optimize your code
so that you can use the least-complex
| | 04:35 | object your application needs.
| | 04:37 | You should always remove all the event
listeners and clean up objects, so garbage
| | 04:41 | collection will pick them up.
| | 04:43 | It's also important to reuse objects
when possible and even store objects in an
| | 04:48 | array or a vector and then call them
when needed, and this is actually known as
| | 04:53 | object pooling and can greatly enhance
the resources of your mobile application.
| | Collapse this transcript |
| Utilizing decreased processing power| 00:00 | Another important area of focus
for mobile optimization is CPU usage.
| | 00:05 | Optimizing CPU processing improves
performance and as a result, battery life, on
| | 00:11 | mobile devices. The most universal rule
of reducing CPU usage is to consider the
| | 00:16 | frame rate of the application.
| | 00:18 | The default frame rate for AIR
applications is 24 frames per second.
| | 00:22 | This means that 24 times every second
new code is being executed, regions are
| | 00:27 | being drawn, and user
interactions are being calculated.
| | 00:31 | If we reduce our frame rate, you will
reduce the amount of times per second all
| | 00:35 | of these calculations are being run,
which will greatly conserve processing and
| | 00:40 | battery power on your device.
| | 00:42 | One of the most powerful features of a
Flash platform is the ability to change
| | 00:47 | the frame rate of the application while
it is running. For example, you can set
| | 00:51 | your frame rate low while not much is
occurring in the application, to something
| | 00:54 | like four frames a second, and you can
also set it higher when you need some
| | 00:58 | additional smoothness for
an animation, for example.
| | 01:01 | It makes sense to lower your
application's frame rate when it is not active.
| | 01:06 | Now, try to avoid timers as much as
possible and if you can, try to have one
| | 01:10 | timer for your entire application.
| | 01:12 | Also try to avoid using blends and
filters, as these cause an extra amount of
| | 01:17 | heavy lifting from the AIR player.
| | 01:20 | Be sure that the sounds and images you
use are as compressed as much as possible,
| | 01:26 | and also try to use JPEG
files instead of PNGs if you can.
| | 01:31 | So you'll see here I have some simple
code and first of all, you'll see that I
| | 01:35 | have an init function.
| | 01:37 | I can actually listen for when this
application is activated and when it is deactivated.
| | 01:43 | So one of the issues of course in
Android is that--and this is not so much an
| | 01:47 | issue for iOS because once you get
out of the application the iOS platform
| | 01:51 | will destroy this--but on Android your
application can still be running in the background.
| | 01:56 | So a good rule of thumb, depending on
what you want to do, is you can set the
| | 02:00 | native application here.
| | 02:02 | We could set the addEventListener,
and we can say when our application is
| | 02:06 | deactivated, I am going to execute this
code here that says onDeactivateApp, and
| | 02:12 | then this is going to go ahead and
actually exit the app, so that when it's
| | 02:16 | deactivated, it's done.
| | 02:18 | Now you may not always want to do this.
Another thing that you can do is you can
| | 02:22 | just type in stage.frameRate, and we can
set our frameRate here to a much lower
| | 02:28 | setting, to again reduce CPU usage.
So for example, I can say frameRate is 4, and
| | 02:33 | again I can set this at run time.
| | 02:36 | So, for example, if I am not doing any
animation in my application, you might
| | 02:40 | find 12 frames a second is fine.
| | 02:42 | If you're doing a lot of animation in
your app, you might want to up it when
| | 02:46 | those animations are running. But you
still have that ability in how to set
| | 02:50 | that up, so that's very nice.
| | 02:52 | Some other things that we can do is
we can cause the processor to undergo
| | 02:57 | unnecessary calculations. Remember
transparency can be very processor intensive.
| | 03:02 | So images that are set to the power
of two actually tend to render faster.
| | 03:07 | For example, a 31x15 pixel image will
actually render faster in our mobile AIR
| | 03:13 | application than a 33x17 inch pixel image.
| | 03:17 | So if you can, open up Photoshop or
another tool and again edit your images so
| | 03:23 | that they are set to the power of two,
and they will actually render faster.
| | 03:26 | So that's another nice thing as well.
| | 03:29 | And remember to always resize your
images, instead of doing it in Flex, by setting
| | 03:35 | the width and the height and that sort
of thing, always try to resize them in
| | 03:39 | another app and then bring
them into your Flex application.
| | 03:43 | Again, that will save lots
of processor cycles as well.
| | 03:46 | Now remember too, events can be very
costly in terms of CPU and battery usage and
| | 03:53 | that having lots of events and
bubbling can definitely lead to performance
| | 03:57 | issues and bottlenecks.
| | 03:58 | As we talked about in the last movie,
don't forget to remove your event, and
| | 04:02 | then for mobile applications, a quick
way to deal with this issue is really not
| | 04:06 | to bubble your events when possible.
And if you really need to bubble, stop the
| | 04:12 | propagation when the events have reached a
point when they don't need to bubble anymore.
| | 04:16 | Remember, mouse events are set to bubble
by default, so what we can do is we can
| | 04:21 | just stop this at any point simply by
typing in 'event.stopPropagation,' and that
| | 04:29 | will actually stop your events,
so you're able to do that as well.
| | 04:34 | Mouse events are set to bubble by
default and if you don't want them affecting
| | 04:38 | children not intended, you can just
set mouseEnabled to false if you're not
| | 04:44 | using a mouse event for an object.
| | 04:46 | So for example, if you're not using
mouse events on a particular object, for
| | 04:50 | example, I can just say
this.mouseEnabled, as you see here, is equal to false.
| | 04:56 | And of course I won't have access to any of
my mouse events, but that will result in
| | 05:01 | a much better application
that you can do that as well.
| | 05:04 | Remember, the color white tends to take
more battery power than darker colors,
| | 05:09 | so you can change the
background color of your application.
| | 05:12 | Use native Android fonts when you can.
| | 05:15 | You can set all of this up.
| | 05:17 | So also, if you happen to be a Flex
developer of course and you're using a Flash
| | 05:22 | application inside of your Flex application,
| | 05:26 | you can actually reference the movie
clip component, and you can stop that
| | 05:30 | utilizing the stop method.
| | 05:32 | So again if you're utilizing Flash
components and you want to make sure the
| | 05:37 | movie clip timeline in a flash
component, if you have animation, can really
| | 05:41 | consume a lot of CPU usage and a lot
of processing intensive, so you can just
| | 05:47 | reference the movie clip component so,
for example, say myMc and then say stop.
| | 05:53 | This is if you've imported a movie clip
from the flash environment, you can do
| | 05:57 | that as well, and that will
greatly increase the performance of your
| | 06:03 | application on a mobile device.
| | 06:05 | So remember, devices generally have
less processing powers than PCs, and it's
| | 06:10 | always important to conserve on battery life.
| | 06:13 | The most important CPU optimization that
you can do is frame rate, and you should
| | 06:17 | always set the lowest possible frame
rate and change that frame rate to a lower
| | 06:22 | setting when it's not being used.
| | Collapse this transcript |
| Optimizing data connectivity| 00:00 | In this movie, we're going to
optimize our Explore California application.
| | 00:06 | So actually, what we've done so far is
when we downloaded the data from the
| | 00:11 | Internet we've actually called the
service on our first view that you see here.
| | 00:16 | So again, if you look here under
mainhomeview.mxml, you'll see that we've
| | 00:20 | actually called our HTTP service here.
| | 00:23 | Now that works fine, and it's great
for what we've done in terms of training
| | 00:27 | and understanding how everything is put
together, but this is kind of a bad practice right?
| | 00:32 | Because every time we go back to this
view, this HTTP service is called again.
| | 00:37 | So that can actually make unnecessary
calls, and it's basically a useless request
| | 00:43 | every time we go back to it.
| | 00:44 | So what's a much better practice is
to put this HTTPService in our main
| | 00:49 | application file, and then we pushed
the actual view on the result event and we
| | 00:55 | use the ViewNavigator classes to do so.
| | 00:58 | What we're going to do is we're
going to actually just pass this and
| | 01:00 | rearchitect our application so its
completely optimized and it doesn't make any
| | 01:05 | unnecessary data calls.
| | 01:08 | So let's explore how to do this, and
you're going to see the first thing that we
| | 01:11 | do is we have our http service here in the
Declarations tag of our first view. So why
| | 01:17 | don't you highlight this? And you'll see
that I've imported the Project 7_03, and
| | 01:22 | mine is on approximately line 51.
| | 01:25 | So I am just going to take this code
here, okay, and I am going to cut it, and I
| | 01:30 | am going to go ahead and just move this
code over to the my main.mxml. And what I
| | 01:36 | am going to do is I'm just going to take
this code and put it in my declarations
| | 01:40 | block here, so I actually make that
call, okay. And then you'll see I have my
| | 01:44 | getTrips send, so let's
add a creationComplete here.
| | 01:50 | So I'm just going to say
creationComplete = getTrips.send.
| | 01:59 | So that will be right when my
ViewNavigator application first starts off.
| | 02:02 | So here I placed it in the main view.
Now there's a few other things we need to do.
| | 02:06 | So first of all, if you're going to
see I have my Declarations tag here, and
| | 02:11 | you should see of course that you have your
resultHandler here, your getTrips resultHandler.
| | 02:16 | Again, mine is on approximately line
30. What I want you do is take this
| | 02:20 | resultHandler and cut it out, just like
so. I'll get rid of some of the spacing
| | 02:25 | here, so everything's little bit cleaner.
| | 02:27 | And I will now add this to my
script block in my main application.
| | 02:33 | So again I am going to just paste it in
here, and I am going to add this to my main
| | 02:37 | script block here, so I have my getTrips_
resulthandler, and you'll see exactly how that works.
| | 02:44 | So now, a couple things here.
First of, all we don't need this code anymore
| | 02:48 | because were going to immediately pass
this data--this data is certainly not
| | 02:51 | going to be used here on our maindata mxml.
| | 02:53 | We're only action making the data call
here. This is actually going to be passed
| | 02:58 | to our other component, so let me just
delete that, and I will delete that, and
| | 03:03 | then I will go back here. And again, to
reduce the overhead, I no longer need this
| | 03:07 | array collection that's bindable
here, so I will get rid of that.
| | 03:12 | So now here's my main data mxml, and
what I now want to do inside of this event
| | 03:19 | handler is I just want to simply use
the ViewNavigator classes to push this
| | 03:24 | off. So I will just say navigator, and
then what I will do is I will say pushView.
| | 03:31 | So this is when the last byte of data
has been received, and of course the view
| | 03:35 | that I would want to push in here is
simply called views, and you'll see it's
| | 03:41 | called MainHomeView.
| | 03:42 | And then what I want to push along
here is I want to push the event from the
| | 03:48 | event object.result.tours. And if you
recall, right, my repeating node was called
| | 03:55 | tour, so here I am going to say
event.result.tours.tour, just as you see there.
| | 04:01 | And then the only thing is it's
expecting an array collection here,
| | 04:05 | so I am actually going to have to
cast that as an array collection, and
| | 04:09 | let's make sure of course that our
array collection is imported, so we are
| | 04:12 | going to need that.
| | 04:13 | You are also going to need to make sure
that your result event is imported, so I
| | 04:17 | just added a Ctrl+Space at the end of
each one of those. And then were also to
| | 04:22 | make sure that we're
importing our main home view.
| | 04:25 | So again Ctrl+Space there, and that should
import your main home view, so now we have that.
| | 04:32 | So now we're waiting for the data to
actually be called, and we're only making
| | 04:36 | that call once, so we no longer
need this firstView setting.
| | 04:40 | So let's get rid of the firstView
setting that we have here.
| | 04:44 | Now you will see we get rid of that.
| | 04:45 | I'm going to save that again, and then I
am going to go back to my main home view.
| | 04:51 | So now, if we were called about the
ViewNavigator classes, which are optimized
| | 04:54 | for mobile phone communication, you'll
see I have navigator, I have push view, and
| | 04:59 | of course this array collection is
now coming back as the property of data.
| | 05:06 | So all I need to do here is just go
back to my main home view and where I
| | 05:11 | actually, of course right where I
actually specified the data provider for the
| | 05:15 | list, this used to be myTrips right.
| | 05:18 | Well, no longer, because myTrips no
longer exists, but I should be able to do
| | 05:23 | exactly the same thing just by specifying data.
| | 05:26 | So what's going to happen is Main is
going to make a call, it's going to then
| | 05:29 | instantiate the main home view, and
everything should work fine. But if I ever
| | 05:34 | come back to that main home view,
the data will still be there, but I won't have
| | 05:38 | to continue to make that call.
| | 05:40 | Now again this has pros and cons, right,
because maybe when you come back to that
| | 05:44 | you want it to do that.
| | 05:45 | Again, this can really help optimize
your application and not make that, so again,
| | 05:49 | it that the data's constantly
changing up on the server, you know you can of
| | 05:53 | course haven't recall that data service.
| | 05:55 | So as usual in training, the answer is
it depends, but this can of course really
| | 06:00 | increase your application and increase
the performance of your application.
| | 06:05 | So here I am just going to click Save,
and then I am going to go ahead and run this,
| | 06:09 | and you'll see I just have a few
errors here, so let's take a look.
| | 06:12 | I forgot to remove my creationComplete
from this view, so I no longer need
| | 06:16 | this creationComplete. And then of
course I did add the creationComplete here, so
| | 06:22 | I should be good there. I'll save that
removing the creationComplete, and then I
| | 06:27 | am going to go back to my main.mxml, and
I am going to just hit run again. And we
| | 06:33 | should see that our application
functions just like it did before, but we've now
| | 06:39 | only made one database
call, so you can see that.
| | 06:43 | So that's just again another way
of optimizing your application.
| | Collapse this transcript |
| Building apps with different pixel densities| 00:00 | Flex 4.5 includes many features to
help us manage resolution and DPI for our
| | 00:05 | application to target or
scale for different devices.
| | 00:09 | We can set an application DPI just like
we've seen when we create a new mobile
| | 00:13 | project, but we can also determine and
use the run time DPI with some of the new
| | 00:19 | properties that are available.
| | 00:20 | So not only can we select different
style sheets based on the DPI, but we can
| | 00:25 | specify different bitmap image sources.
| | 00:28 | So, for example, if I have an image, I
can specify different image for a 160-DPI
| | 00:32 | device versus a 240-DPI device.
| | 00:36 | And I can even specify different skins
to switch in and out based on the DPI.
| | 00:41 | So this is very, very powerful, and
really allows us to give the users the best
| | 00:46 | possible experience.
| | 00:47 | Now the way that it works is it works
through something called CSS media queries
| | 00:51 | and we can use @media rules in our
style sheets to filter based on the device's
| | 00:57 | DPI classifications.
| | 00:59 | So there are two properties we can filter on.
| | 01:01 | There is OS-Platform and some of the
settings here include Android, QNX for
| | 01:06 | Blackberry, Macintosh, Windows, Linux,
iOS, and then we can also filter on
| | 01:11 | the Application DPI.
| | 01:13 | So let's get an example of how to do this.
| | 01:15 | What I am going to do is I am
going to create a new project here.
| | 01:17 | We're going to create a new Flex Mobile Project.
| | 01:20 | Let's just call it DPI_example.
| | 01:24 | I'll click Next and go ahead and set
this to a Blank Application tag, and make
| | 01:29 | sure that you're targeting both Google
and Apple iOS here. Click Next here.
| | 01:34 | You'll see we have our DPI_example
and go ahead and just click Finish.
| | 01:39 | So now what we are going to do, first
thing let's define this and understand
| | 01:43 | how this all works.
| | 01:44 | So directly below your Declarations
block here, go ahead and just add in an
| | 01:49 | fx:Style tag right here. And let's
add in the @media, so I am going to say
| | 01:56 | @media, and then I am going to say os-platform.
| | 02:01 | Then I am going to say colon, and you'll
see I can specify Android, iOS, Linux,
| | 02:05 | Macintosh, QNX, all that good stuff.
And then I am also going to specify that I
| | 02:09 | am targeting Android devices with this
particular style sheet. I am targeting
| | 02:13 | the application-dpi of 240.
| | 02:18 | And then I am going to specify the spark button.
| | 02:23 | So I am going to say spark button, and we
are going to target all the buttons here.
| | 02:27 | So here I am going to simply say the
fontSize of the button is going to be 10
| | 02:33 | points for this particular DPI,
and let's also specify the color of the button
| | 02:38 | will be red, the color inside of the text there.
| | 02:41 | So this will only apply to
Android application 240 DPI.
| | 02:47 | So now let me just add a button here,
okay, so I am just going to simply say Button.
| | 02:52 | We will specify a label of Sample Styled Button,
| | 02:58 | so we could see that.
| | 03:00 | And then another really cool component
that we can use to do this sort of thing
| | 03:04 | is you'll see if I say s:MultiDPIBitmapSource.
| | 03:10 | So you can use this as your image tag
here, and notice you have a property here
| | 03:15 | where you could specify the properties
here for 160 DPI and you could point this
| | 03:20 | to 160 DPI for an image to
target for those devices.
| | 03:24 | You could point it to a separate
image for the 240 DPI and for the 320.
| | 03:29 | So again, very powerful.
| | 03:31 | This allows you to switch that out into
something other than CSS style sheets.
| | 03:35 | So let me just delete that for now,
and let's get an idea of how this
| | 03:38 | will actually work.
| | 03:40 | And the cool thing is this is
actually supported on the desktop emulator.
| | 03:44 | So it will think that we're on
Android here. So, watch this. If I say let's
| | 03:49 | switch to our Target platform Google
Android for now and we'll choose the
| | 03:54 | Google Nexus S which is 240 DPI.
| | 03:57 | So if we did this right, we should
see, when I run it here, look at that.
| | 04:02 | We have some red text to our style sheet at
10-point font, so you'll see our button
| | 04:07 | here is incorporating that style sheet.
| | 04:10 | Now let's see what happens if I run
this on iOS. So I am now going to say my
| | 04:14 | Target platform is Apple iOS, and let's
simulate an Apple iPhone 3GS, and I am
| | 04:21 | going to click Run, and we know
that that doesn't have that DPI.
| | 04:25 | And you are going to see it's just a
normal button on the Apple 3GS. And of
| | 04:29 | course I could set up a separate style
sheet for each one of those devices and
| | 04:33 | again give the best possible user
experience by setting this DPI at run time.
| | Collapse this transcript |
| Using project libraries to optimize development for different form factors| 00:00 | One of the huge advantages of
developing applications with Flex is that we can
| | 00:05 | share the same code base
among many different form factors.
| | 00:09 | So for example here, I have
completely different projects here that are all
| | 00:13 | sharing the same code base.
| | 00:14 | So for example, I have a desktop
application that's designed to run on Mac
| | 00:18 | and Windows systems.
| | 00:20 | I have a phone application that's
designed to run on iOS and Android devices.
| | 00:25 | I have a tablet application that's
designed to run on the iPad and on Android
| | 00:29 | tablets, as well as the BlackBerry PlayBook.
| | 00:31 | I have a web application that's
designed to be viewed in a browser.
| | 00:35 | I might even have a mobile web application
that's designed to be a mobile web browser.
| | 00:40 | I might create different projects for Android
and for Apple, depending on what I want to do here.
| | 00:45 | So I really have a lot of flexibility,
and what I want to do is I want to share
| | 00:49 | code amongst these projects as much as I can.
| | 00:53 | So for example, a desktop and a phone
are very different, but they still might
| | 00:57 | use the same data services.
| | 00:59 | They might use the same event classes.
They might use the same value objects.
| | 01:03 | So what I can do is I can set up a
common library and I can put things like data
| | 01:07 | calls, things like events, things like
value objects in this common library and
| | 01:11 | share this code across all my different
form factors here. And Flash Builder is
| | 01:16 | optimized for this and the Flex
framework in general is optimized for this
| | 01:20 | because I can set up these project libraries.
| | 01:23 | And these can be shared as SWC files,
and you can easily take these libraries and
| | 01:29 | utilize these in other projects.
| | 01:31 | So you'll see, for example, I have an
events package here, I have a services,
| | 01:35 | and I have a valueObjects.
| | 01:37 | Let's learn how to set this all
up from our Explore California app.
| | 01:41 | So what I'm going to do is just delete all this.
| | 01:43 | I'll also delete the contents from the
file system, and let's go ahead and just
| | 01:47 | import our 7_05 right here.
| | 01:52 | Let's go ahead and import
that, and let's click Finish.
| | 01:56 | And you'll see this is our phone
application that we've been working on, and
| | 02:00 | you could see of course, we have
some things that we might share among
| | 02:03 | different projects. Now this isn't a real-world
project, so we don't have things like value
| | 02:07 | objects and events and that kind of
thing. Our main focus here is just to
| | 02:11 | teach the mobile form factor.
| | 02:14 | So what we do have, however, as you can
see, we have the getTrips_resultHandler
| | 02:20 | and we have an HTTPService call here
that you'll see that actually goes out and
| | 02:25 | will make that call back
out to explorecalifornia.org.
| | 02:29 | So let's take this HTTPService and put
it in a library and share it amongst all
| | 02:35 | of our different projects, just so
we learn how to set up libraries.
| | 02:39 | So what I'm going to do is just copy
this HTTPService code. In fact, I'll cut it
| | 02:43 | out because I no longer need it here.
| | 02:45 | I'll save that, and then what I'm going
to do is I'm going to create a new Flex
| | 02:50 | library project right here, and I'll just call
this ExploreCalifornia_common. I'll click Next.
| | 03:00 | This builds me a project, creates a
source, and a bin folder, and then of
| | 03:05 | course, inside of the source folder
here, I might want to create a folder
| | 03:09 | called services, like so.
| | 03:14 | I might want to create another
one called vos for my value objects.
| | 03:18 | If I was doing a real-world project here,
I might want to create one as well
| | 03:24 | called events, so we can have
a real-world type project here.
| | 03:28 | So now inside of the services,
let's actually build a new component.
| | 03:32 | So here I'm just going
to say New > MXML Component.
| | 03:37 | Inside of my Services panel, you'll see
that this is actually based off of the
| | 03:41 | group container that you see here.
| | 03:43 | So let's call this DataServicesCalifornia.
| | 03:51 | So this is for our ExploreCalifornia.
| | 03:52 | This will be all the data services that
we're going to use here will be located
| | 03:57 | inside of this component.
| | 04:01 | So here's my
DataServicesCalifornia, so that's perfect.
| | 04:02 | And then what I want you to do, again,
go on to your Main.mxml and you've cut
| | 04:07 | and pasted this, and then what I want you
to is paste this into this component here.
| | 04:13 | So outside the comments, paste your
HTTPService in there, and for now, let's
| | 04:18 | remove the resultHandler, because we're
going to have a different resultHandler
| | 04:21 | depending on the actual form factor.
| | 04:24 | So the tablet app will of course have
a different resultHandler because we'll
| | 04:27 | need to manipulate the view and that sort of
thing, but this particular call we can set up.
| | 04:32 | Now again, in real life your data
services' calls were probably be more
| | 04:35 | complicated than this, right, because
you'll have AsyncTokens, and you'll go out
| | 04:40 | and you might use the data wizard to
generate the value objects, and you'll have
| | 04:43 | lots of code that you'll share amongst
all of your different projects, but for
| | 04:47 | our purposes here, you can
see that we can set that up.
| | 04:50 | So let's save that, and then I'm going
to go back to my Main.mxml here, and what
| | 04:56 | I want you to do is just
create a reference to that project.
| | 05:00 | So first things first, okay, let's
go here and let's just simply say
| | 05:05 | xmlnamespace, and then let's reference my services
here. And then I'm just going to load
| | 05:13 | everything from that services
directory into this particular namespace.
| | 05:17 | And of course the namespace could be
called whatever you like, but in this
| | 05:20 | case, I'm just saying I'm
calling it services here. All right!
| | 05:24 | The next step is to simply add
our common library to our project.
| | 05:29 | We do that by right-clicking on the
project, choosing Properties, going here to
| | 05:35 | our Flex Build Path,
and then clicking on Add Project.
| | 05:40 | Of course, it will also compile it as a SWC,
so you could add it as a SWC, either way.
| | 05:46 | So here I've added the project here.
| | 05:47 | You'll see my ExploreCalifornia is now added in.
| | 05:50 | That will update the compiler settings,
and then you'll see that my services is in here.
| | 05:56 | So what I should now be able to do is
in my Declarations block, I should just
| | 06:01 | simply be able to say services.
| | 06:03 | Notice it introspects it.
| | 06:05 | You will see services.
| | 06:06 | Let me make sure that's right here.
| | 06:09 | And you'll see that this is actually
called services:DataServices, and you'll see
| | 06:16 | it's called Calif, as you see there.
| | 06:18 | Let me just make sure I added the right
project library here, so I'm going to go
| | 06:25 | back to my Properties,
look at the Flex Build Path.
| | 06:28 | Let me just take a look.
Okay, that looks good.
| | 06:31 | So now I'm going to say
DataServicesCalifornia there, and I'm going to
| | 06:38 | implement that. Perfect!
| | 06:40 | So now all I have to do is just give
this an id here of delegate, just like so,
| | 06:48 | and then what I can do is I can go
back up and let's get rid of this
| | 06:54 | getTrips.send(), and let's
replace this with an init method.
| | 06:59 | What I'll do is I'll simply say protected
function init, and I'll say :void, just like so.
| | 07:08 | And now I'm just going to simply say delegate.
| | 07:11 | and I'm going to have to actually
reference my Trips component, which is inside
| | 07:15 | of there, so I'm going to have to say getTrips,
| | 07:17 | delegate.getTrips.addEventListener.
| | 07:24 | Then I'll say ResultEvent.RESULT,
and then I'll simply say
| | 07:31 | getTrips_resultHandler, and that
will call that getTrips_resultHandler.
| | 07:41 | And then I'll simply say
delegate.getTrips.send, and that will then execute the
| | 07:49 | actual HTTPService call
simply by referencing my delegate.
| | 07:54 | So now I'll just click Save, and I will
simply run this, and let's run it on the Desktop.
| | 08:01 | You may need to set up a profile.
| | 08:02 | I'll run it on my Google Nexus
S here, and then I'll click Run.
| | 08:07 | And if we ran this correctly, we
should see that the application functions
| | 08:12 | exactly as it did before,
but now I'm utilizing a common service.
| | 08:17 | So creating a common service like
this really allows you to share your code
| | 08:21 | amongst different form factors but
have a completely different view.
| | 08:25 | Obviously, our desktop application of
this is going to be completely different,
| | 08:29 | our web application is going to be
completely different, and we're able to share
| | 08:33 | that code amongst all of the different projects.
| | 08:36 | So that's very, very nice.
| | Collapse this transcript |
|
|
8. Packaging Apps for ReleasePackaging an app using custom icons| 00:00 | In this movie, we're going to generate
our application, executables, and prepare
| | 00:05 | to upload these to the appropriate app store.
| | 00:08 | So the first step is of course to
import our final finished project that we've
| | 00:14 | tested, we've debugged, we've made
sure that this application is good to go,
| | 00:18 | we have followed the best practices for
performance optimizations, and now we're
| | 00:22 | ready to start getting this ready for
submission to the various different apps
| | 00:26 | stores that we want to submit this to.
| | 00:28 | So the first step is is let's
modify the names in our application.
| | 00:33 | So if you open up the src directory
here of your application and go to
| | 00:37 | your default package, notice of course we
have our Main.mxml, which is what we've created.
| | 00:42 | Now we also have our Main-app.xml,
and let's make some changes in here so that
| | 00:48 | this will now be called ExploreCalifornia.
| | 00:51 | So you'll see we can leave our ID up
here, where it says ExploreCalifornia.Main,
| | 00:55 | but we want our file name for the
application to simply be ExploreCalifornia,
| | 01:03 | and then we want the name that is
actually displayed in the AIR application
| | 01:08 | installer for the name here.
| | 01:12 | Let's set this to Explore California,
so we're good to go there inside of our XML file.
| | 01:19 | Now, for our versionNumber,
this is version 1.0.0,
| | 01:25 | so we'll set up our versionNumber there.
| | 01:27 | We can leave the rest of this blank.
And then of course we don't want the default
| | 01:31 | iOS or Android icon for our application.
| | 01:35 | We want to point this to some custom
Explore California icon, so when user sees
| | 01:40 | this in their list of applications,
they can just click on the graphic that
| | 01:44 | says Explore California.
| | 01:46 | So on approximately line 129, go
ahead and just uncomment this icon setting
| | 01:53 | here, so I'll uncomment that, and then
inside of your exercise files, we've
| | 01:58 | actually included some
icons for you in the Ch 8 here.
| | 02:02 | You'll see there's an icons folder.
| | 02:04 | If we take a look, you'll see again if
I just open this up, you'll see some of
| | 02:07 | the Explore California icons.
| | 02:10 | That one is a little small to take a
look at, but we'll take a look at one of
| | 02:13 | the bigger ones here.
| | 02:14 | Here is the Explore
California icon that we will be using.
| | 02:18 | You'll see we have icons here in PNG
format for the different resolutions
| | 02:24 | that Adobe AIR expects.
| | 02:26 | So let's take this icons folder
and just copy it here, like so.
| | 02:32 | What I am going to do is go back to
Flash Builder and just copy this to my src
| | 02:38 | directory here, so I'll choose Paste.
| | 02:42 | Now you'll see that there is an icons
directory inside of my project, so I'll say icons.
| | 02:49 | So now from here I will just simply
reference each of the individual icons that I need.
| | 02:55 | So let's make sure that this is set up.
| | 02:58 | So for my 16x16, I'll simply say
icons, just like so, and I will say
| | 03:05 | exploreCal16.png. And then to make my
life a bit easier, what I will do is I will
| | 03:15 | paste this, or I'll copy it and then
paste it, for each of the other ones.
| | 03:20 | So here I'll say 32, okay, and
from there, I will do 36 and then 48.
| | 03:31 | Now, if I leave any of these blank,
Flash Builder will attempt to actually scale
| | 03:37 | one of the other images to that
appropriate resolution, if it in fact comes up.
| | 03:43 | So as a best practice, of course it
makes sense to go into an image editing tool
| | 03:47 | like Photoshop and change that,
but again that's not always practical.
| | 03:53 | So here I am going to say icons,
and then I am going to say there's my 72, and
| | 03:59 | then after that, I am going to say 114 and
then finally, we'll get to our icons 128.png.
| | 04:09 | Great! So now that we've gotten our main app
and we've uncommented that, so this is the
| | 04:13 | icon that system will
actually use for the application,
| | 04:16 | we should be good to go.
| | 04:19 | Now we're going to just close off this
Main.mxml, and then what we can do is we
| | 04:24 | can now export our release build for
the file that we're going to actually
| | 04:29 | upload to the Android or Apple iOS store.
| | 04:34 | Now, if we upload this to the Amazon
Appstore, there is a separate process we
| | 04:38 | need to follow and I'll walk
you through that in a later video.
| | 04:41 | So here I am going to click Project >
Export Release Build, and I can export to
| | 04:46 | whatever folder I like.
| | 04:47 | In this case, I'll just choose
bin-debug, and I'll say Signed packages for
| | 04:54 | each target platform.
| | 04:55 | Make sure that you've set up your
provisioning profile, if you're on iOS, to match
| | 05:00 | this application, your
mobile provisioning profile.
| | 05:03 | So go ahead and click Next.
| | 05:06 | Again, you can point this to your
certificate and as a best practice, if you
| | 05:11 | really want to get the attention that
you deserve from the market, you should
| | 05:14 | probably go out and get a certificate
from a company like VeriSign that really
| | 05:18 | verifies your identity; otherwise, you
can create a self-signed certificate here
| | 05:24 | and again for iOS users,
| | 05:26 | you don't need to worry about this
of course because Apple has all this
| | 05:30 | information already.
| | 05:31 | So here I'll just create
a self-signed certificate.
| | 05:34 | I'll say Lynda, Training.
| | 05:39 | We'll put this information here.
| | 05:41 | I will create a password.
| | 05:44 | Again, I am just doing a self-signed
certificate, so when the user sees this on
| | 05:47 | the Android market, it will say
that the identity cannot be verified.
| | 05:52 | So that is of course a risk, so I'll
call that myCert. I will click OK.
| | 05:58 | I can choose what contents I want in here.
| | 06:00 | We don't need this blackberry-tablet.xml
because we're not targeting BlackBerry
| | 06:05 | right now, but you'll see I include
my icons, I'll include these images, and
| | 06:09 | again if I do have a device connected,
I can install and launch that on a
| | 06:14 | device. So I can test here, and then I
can also specify the AIR download URL
| | 06:20 | here that you see here, and this is the
AIR run time and how to actually set this
| | 06:26 | up. And you will see, when we do this
later, we can leave this default if we're
| | 06:29 | going to deploy this to the Android
market, but for Amazon, it's a little bit of
| | 06:33 | a different process, and we'll walk
you through that in just a moment.
| | 06:37 | So now there I have Google Android.
| | 06:39 | I am now just going to click Finish,
and it's going to actually export this for
| | 06:44 | the Google Android platform. And if it
isn't installed on the device, it will
| | 06:49 | install it on the device
and it should work perfectly.
| | 06:55 | So now you will see that it creates
that APK file, and it says Main.apk. And of
| | 07:02 | course you could rename this
because it's based on your application.
| | 07:05 | So now at this point, you could of
course rename this to say Explore
| | 07:09 | California and be able to do that.
And when the user installs, it will say
| | 07:13 | Explore California.
| | 07:15 | So that's the process. Again if you
had set up your provisioning profile and did this in iOS,
| | 07:20 | it would create an IPA file here, and that IPA
file would then be packaged up and ready to go.
| | 07:27 | So since I now have this installed on
my Android device, I can just click here
| | 07:32 | to see all of my Android applications.
And if I scroll down here, notice there
| | 07:37 | is my Explore California application with the
Explore California icon. And if I open it up,
| | 07:44 | you will see immediately it goes out and
makes that data call, and I can see that
| | 07:49 | my application is working
and functioning on the phone.
| | Collapse this transcript |
| Distributing an app to the Android Market| 00:00 | In the last movie, we talked
about how to produce an APK file.
| | 00:04 | Once you've produced that export
release APK file and you've set up your custom
| | 00:09 | icons, you can upload
that to the Android market.
| | 00:13 | So in order to do that, you just browse
out to developer.android.com, you make
| | 00:18 | sure that you are currently registered
as an Android developer, and you also
| | 00:22 | make sure that you have a certificate
that is valid for at least 33 years;
| | 00:27 | otherwise, it will not allow you to
upload that to the android market.
| | 00:31 | So then you can just click on Publish.
| | 00:33 | You can log in with your Google account.
You can see I am already logged in here.
| | 00:37 | I can see all my Android market listings
right here. and then what you can do is
| | 00:42 | to actually upload a new application,
you can just click here under Upload
| | 00:46 | Application, you choose your APK file.
and that's currently in our bin-debug
| | 00:51 | folder, and then you can upload.
You have to upload screenshots,
| | 00:55 | a high-resolution application
icon, a promotional graphic.
| | 00:58 | You can include a video.
| | 00:59 | You put in the title, the description,
and you can indicate how you want this to
| | 01:04 | be published, as well as your contact
information and you have to acknowledge that
| | 01:09 | it meets your Android content guidelines.
| | 01:12 | You click Publish, and it's
immediately published to the Android market.
| | 01:16 | That's all there is to it, in terms
of uploading your application for
| | 01:20 | distribution on the Android marketplace.
| | Collapse this transcript |
| Distributing an app to the iOS App Store| 00:00 | In order to publish your application to
the Apple App Store, what you need to do
| | 00:05 | is produce your IPA file, which we
covered in the last video, and include of
| | 00:09 | course your application icons and make
sure that it's all ready to go, and then
| | 00:13 | you can go to developer.apple.com, log in
with your Apple ID, and click right here
| | 00:19 | under iTunes Connect.
| | 00:21 | This is the application that actually
allows you to submit your application to Apple.
| | 00:26 | So if you click here under Manage Your
Applications, you can click here and just
| | 00:31 | then click on Add New App and Apple
will walk you through the process of
| | 00:36 | actually adding in your
IPA file to the App Store.
| | 00:40 | Now it has to go through an approval
process that Apple even has a mobile app
| | 00:44 | that will let you know the status of
your application on your mobile device.
| | 00:49 | So that's very nice, and that is the
process for actually uploading your
| | 00:54 | application to iTunes.
| | Collapse this transcript |
| Packaging for release to the Amazon marketplace| 00:00 | When we publish an application in Adobe
Flash Builder for Android, by default it
| | 00:06 | points to the location of Adobe
AIR on the Android marketplace.
| | 00:11 | If we choose to publish this for the
Amazon Appstore, Amazon has the Adobe AIR
| | 00:16 | run time in a very different
location than the Android marketplace does.
| | 00:20 | So when we produce our APK file, we
need to make sure that we point to the
| | 00:25 | Amazon location of AIR instead of
the Android Google location of AIR.
| | 00:30 | So to do that, when you're building
your release build, just click on Project
| | 00:35 | and choose Export Release Build,
choose your project of course, put in your
| | 00:41 | base file name and all of that, just
like we would on Google, click Next, and of
| | 00:46 | course you still need a certificate,
as you see here--and you'll see you can
| | 00:50 | type in your password for your
certificate--and then click on the Deployment here.
| | 00:56 | And for the AIR download URL, instead of
pointing to the AIR download URL on the
| | 01:02 | marketplace, paste here and point to
this URL, which is available on Amazon.com.
| | 01:10 | So this is amazon.com/gp/
mas/dl/android/com.adobeair.
| | 01:19 | So this'll tell your application,
"Hey if the user doesn't have AIR installed
| | 01:23 | go out to this location on the marketplace
and download Adobe AIR on to that device."
| | 01:29 | So that must point to the download
location on the store where the application
| | 01:34 | will be hosted if you're going to publish
this to the Amazon Appstore, so that's very nice.
| | 01:40 | Okay, so then you can click Finish,
and it will build a new APK file that's
| | 01:47 | pointing to Amazon. Then once you've
done that, you can simply just go out to
| | 01:54 | developer.amazon.com/welcome. If you have
not yet created a developer account, you
| | 02:00 | may do so. As of the time
of this video, it's free.
| | 02:03 | Your 99 program fee is waived
for the first year. And then
| | 02:07 | you can just click Get Started, submit
your mobile application for review by the
| | 02:11 | Amazon team, and your approved apps will
now be available on the Amazon Appstore.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | I hope you are as excited as I am about
the potential of developing applications
| | 00:05 | for both iOS and Android
with the Adobe AIR platform.
| | 00:09 | It's very exciting.
| | 00:10 | And if we want to go out and learn more
about how to develop great applications,
| | 00:16 | I think a great idea is first of all to
go out to the Adobe Developer Connection
| | 00:20 | and go to the Flex
Developer Center that you see here.
| | 00:23 | So there's lots of resources here for
Flex development, for mobile, how to build
| | 00:28 | a mobile application, lots of good
things so you can learn even more.
| | 00:32 | Another series that may help you is
under AIR 2, if you want to learn things
| | 00:36 | specifically about Adobe AIR on
lynda.com, I have a series on AIR 2.0, but a
| | 00:42 | lot of this stuff applies to mobile.
So for example, if you're looking how to
| | 00:45 | create applications with CS5 or Flash
Catalyst, this will give you a good idea
| | 00:50 | of configurations, and we can also
learn here about how to access the built-in
| | 00:54 | database, which is available on mobile
platforms, how to secure your applications.
| | 00:59 | So there's some good information here as well.
| | 01:01 | And if you feel a little rusty with
Flex and you want to learn all about Flex,
| | 01:05 | you can go to the Flash
Builder 4 tutorials hosted by Mr.
| | 01:09 | David Gassner, and you can learn all
about the Flex programming languages, using
| | 01:13 | some of the debugging tools, the event
architecture, custom components, style
| | 01:19 | sheets. A lot of the things that we
talked about and we assumed you knew in this
| | 01:23 | series, you can go back and
get a refresher in this course.
| | 01:26 | So again, thank you very much, and I
really appreciate you watching my series.
| | Collapse this transcript |
|
|
