Click on any phrase to play the video from that point.
[♪ Music ♪]
[Adobe Developer Connection]
Hi there, my name is Serge and I work on Adobe's Developer Evangelism team,
and I want to talk to you today a little bit about building mobile applications
with Flash Builder 4.5 and the Flex 4.5 framework.
Here we are in Flash Builder 4.5 and immediately on the start page you already
see a bunch of tutorials that you can click on and they just help get you on your way.
But in this video, we're just going to create a quick little mobile application
so you can see how that works.
So in Flash Builder, you can now select to build a new Flex Mobile project like this,
and when you do that, it'll ask you a couple of things.
First of all, obviously, what's the name of your project.
So we'll call this Adobe Evangelists and then hit next.
Now in this screen, you actually get a couple of different settings and application templates.
First of all, it'll ask you what your target platform is.
Now right now this only says Google Android, but we'll be adding
other platforms to this as well.
The next selection you need to make is the application template.
You can actually create a completely blank application using the blank templates.
There's a view-based application.
We'll actually use that in this demo, and also a tabbed-based application where you can just
set up a bunch of tabs to navigate any application.
But like I said, we're going to use the view-based application template,
and that's the one that we're going to use.
The next settings here are the application settings.
What do you want the application to do?
Do you want it to automatically reorient when you turn your device to the
landscape mode or portrait modes?
Do you want to go full screen and things like that?
I'm just going to take the defaults here.
I'm going to select the automatically reorientation,
and everything else I'm going to leave like that.
Then when I click "finish" it's going to create that application for me based on the
template that I selected, and the application or Flash Builder now actually created
a bunch of application views.
We're going to start off with the home view, so that's the first
MXML file that you can start building.
Now what I'm going to do is actually load a little XML file with all the names and information
from all the Adobe Evangelists that are available throughout the world.
So I'll just use an HDP service component and give that a name.
So I'll call this "evangelistsXML" and then load the actual XML file, and that's going to be on
adobeevangelists.com/evangelists.xml like that.
Now because I'm using the Flex framework for this mobile application, I can also use
all the Flex framework features, things like data binding and stuff like that,
I can use that here as well.
But let's just jump into design view really quickly and set up our application.
So I'm going to need a list because I want to show everyone that's on the evangelism list
So I'll just constrain it to the full size of the application and that needs to be zero
instead of 100, like that, and then I'm going to use data binding to actually get the data
coming back from that HDP service call and use that in my list.
So I'll set up the data provider to listen to whatever comes back from that service call.
So evangelistsXML and then I'll say lastresult.evangelists, and I want all
evangelist nodes in this list, displaying in this list.
Let's see, what else am I going to do?
I'm going to make sure that whenever I'm in the home view that it's actually going to get
that XML file, right?
So I'll say "creation complete" and then generate a complete handler, and this
also is one of the new features in Flash Builder 4.5.
You can easily rename that complete handler if you want to.
So I'll just say omit instead of what it defaults to.
And then I'll say evangelistsXML.send.
That will send off that HDP service call and that should be enough.
Now that's going to get a bunch of data, not just the name, but also the location of the
evangelist, what type of work he does, the biography, and all that stuff is going
to be in that XML file.
So I'll just need to say that the label field that we want to show in that list is
actually going to be the name.
All right, let's see what happens if we launch this now.
It's going to ask how I want to launch this.
I can actually launch this on the desktop or on a device that I actually have connected with USB.
I'm going to do that later.
I'm just for testing purposes going to use the desktop first, and I'll select one of the
devices that you can easily set up, and this is actually the one that I have so I'll use that one.
Click run and it's going to open it up in this sort of emulator view, and there you can see that
this list is now running nicely, and you can also see that it has those specific mobile
characteristics of a list, we can throw it around and stuff like that.
Now when I click on this I actually want to go to another view in my aplication
to show the details of this person.
So that's what we'll set up next.
So in my views folder I create a new view by just creating a new MXML component,
and it will be based on the Spark component, the actual view Spark components,
and I'll just give that a name.
I'll call it "details" and click finish.
Now in here, again, I'll just quickly jump into design view and set this up a little bit
so it looks sort of nice.
It doesn't have to be perfect, right?
But we'll say that we want a little image here, and that will be something like that, and I'll
constrain it to the top of the application, and then also add a little label here, and that's
where we're going to display the job title.
So I'll say data.jobtitle I think I name it.
Now instead of this label here, so it automatically defaults to the name of that view,
I actually want to display the name of the person that I clicked on.
So I'll also use data binding for this, and I'll say data.name instead of details.
That doesn't really mean anything.
Now all these new components and all these new views
actually have mobile specific features.
So if I drag a button over to this action bar as we call it here, you see that I can actually
drop a button in that little part that is called the action content of your action bar.
So I'll drop that in there, and I'll just say that whenever we click on this
we're going to go back to the list.
All right, I'm going to go jump back into source view and then wire all this up.
So I'll say whenever I click on this button I'm going to generate a click handler.
So I'll call this "back button click" or something like that.
And then I'm going to go back to the previous view that we were in, and I'm just going to
do that by calling the navigator, which is part of this whole template.
So navigator.popview, which will then go back to the view that we were originally on.
And then when I'm in my main view and click on the list,
then I'm going to go into the actual details view.
So on my list I'll say "change" and add a change handler there as well, and I'll just
leave that to the default.
And then I'm going to say "navigator.pushview", and I'm going to push the details view,
and I'm also going to tell it which data object that it should use for that as well.
So I'm going to say "events.target" which will then point to the list, and the selected item
is what we need there.
So what happens here is when I click on the list, it's going to send the data from the
selected item to the details view, and then I can use that in the details view as well.
So let's see if this actually works.
You never know.
So I'll click on "Allen", and you see that Allen is actually
already titled for my details view.
It's now his name and he works for Strategic solutions.
So that works.
The image doesn't work yet because I forgot to set that up.
So in my image I'll say that the source is going to be data.profileimage, and I know that
it doesn't have the full path or the full url to that profile image so I'll just add
adobeevangelists.com.
I should see his photo and that back button works as well, and
you see it automatically does those transitions and all those things, so it's really easy for you
to build a mobile application like this.
I'll just quickly finish this up.
I'll also add the biography for the evangelist, and I'll use a text area for that.
Like that, make sure it's nicely in the correct position.
Like that, and this should be probably something like 160.
That looks nice, and then I'll also use data binding to tie this to the actual biography.
And I'll do one more label here, which is going to be the location.
All right, let's run it again.
Click on someone else here, and you see that the biography now shows up, the location
shows up and the actual text area is also mobile enabled so you can also throw that
around if you want to, things like that.
So very easy to really, really build this quickly.
In just a couple of minutes you can build an application like this.
Now the really cool thing is that you can also run this on your phone, so you can see what it
looks like on your phone and how it behaves on your phone.
So let's do that as well.
So I'm going to go into my run configuration, and I'm going to say I'm not going to launch it
on the desktop, I'm actually going to launch it on whichever device I have connected.
So when I click "run", let me just make sure that I have my device set up correctly.
Click "run" and then it's going to compile the application, send it to my phone, install it on my
phone, so as you can see it's really easy to test the application on your device
while you're still developing it, and that is the power of Flex 4.5 and Flash Builder 4.5.
So hopefully that gives you a little bit of an idea on how easy it is to build
mobile applications using our tools.
If you want more information than check out Adobe's devnet, and I'll see you next time.
[Adobe Developer Connection]
