Click on any phrase to play the video from that point.
[ADOBE DEVELOPER CONNECTION]
[Serge Jespers - Developer Evangelist]
Hi, my name is Serge and I work on Adobe's Developer Evangelism team.
In this video, I want to talk to you about how easy it is to build applications
using the Flex framework.
Now, if you're brand new to the Flex framework,
the Flex framework actually allows you to quickly build applications
on top of the Flash platform, and Flash Builder is the tool
that makes it very easy for you to build those types of applications.
Now, the first time you open up Flash Builder, you'll actually see
that there's a bunch of info on this start page.
You have a ton of tutorials that you can go through, but there's also a link to an application
called Tour de Flex.
Now, at Tour de Flex, you can find a bunch of code samples
that will just tell you how to use a specific component
or talk to a specific web service or something like that,
but let's just starting building a very simple application here.
I'm going to create a new Flex project, like that,
and it'll ask you where you want to run this application.
Do you run it on the web using Flash Player or do you want to build a desktop application
using Adobe AIR?
Now, in this case, I just want to build a web app so I'll just leave it like that.
I'll call this AdobeEvangelistWeb
and then click Finish.
Now, the first thing you probably want to do
is go into design view and actually just quickly look at all the components
that are available to you in the component library.
So if we just quickly scroll through it and you see things like buttons, data grids,
images, but also layout components that make it easy to quickly lay out
a bunch of components into, for instance, a panel or something like that.
And then also, navigational components like a button bar and a menu bar and tabs,
and also charting components, which are a little bit more advanced
than what we're going to use in this example.
Now, what I want to do is actually load in an XML file
and just display that in a data grid.
A very simple application and that's actually what we want to do right now.
So let me just quickly show you the XML file that we want to use.
So this is on adobeevangelists.com; we actually have an XML file
with all of the Evangelists that work for Adobe and what they do
and where they are on the web, where there are on Twitter and things like that.
So this information I want to load in and then do something with that later on
so I'm going to need the URL for that XML file that I just copied here.
Now, I do just quickly want to jump into code view
because what I want to set up is actually an HTTP service.
Now, with an HTTP service, you can load in data coming from the web.
It can be just a text file or in this case, an XML file,
so that's what we're going to use.
So I'll set up a new HTTP service component
and you actually do that in the declarations tag,
so Flash Builder knows where this is,
and I'll call this "myXML"
and I'll define the URL to be the URL that we just copied from the browser,
just like that.
Now, let's just jump back into design view, and I'm actually going to use a little button here
and like I said, I'm also going to use a data grid to display the data
coming back from that XML file, and you see that in the design view
you can just lay out your application like you want it.
I'll call this button--I'll give that a different label.
I'll just say "Get Data" or something like that.
Now, in my source view, whenever I click on this button,
I actually want to fire off the HTTP service call,
so I'm going to create a little click handler and it's very easy to do that in Flash Builder 4.5.
You just hit Enter, and then you can automatically generate a new click handler,
just like that.
And I'll give this a name as well; I'll call this GetData
instead of just ButtonClick.
And in here, I'm going to say myXML.send().
I just want to send off that HTTP service call and it's going to come back with data from that.
Now, what I could do is on my HTTP service component,
I could actually add a result handler, like that.
So whenever a result comes back, this function will be firing off,
but that's not what I'm going to do.
I'm going to use a feature called Data Binding, and this is very powerful and very cool
to use when you build applications like this.
So what I'm going to do is in my data grid, I'm actually going to get rid of all this dummy data
and the columns here because I'm just going to quickly say that the DataProvider
for this data grid is going to be whatever comes back from that XML service call.
So I'll say data provider is going to be myXML.lastResult
so whatever comes back from the server, and then I'm going to say evangelists.evangelist
and that actually refers to these notes in my XML file here
and that should be enough.
Let's see. I'm going to get rid of this requested row count as well
because we just want to display all the data that comes back from this XML file.
Now, if we launch this--and when we click on the button,
it should hopefully--you never know; we work with code here--
so when we click on the Get Data button, it should get the XML file
and then the data grid should show all the data that comes back,
so let's do that, and there we go.
We have the biography, the job title, location, name, and everything that was in that XML file
is now ready to be used in the application.
So hopefully that gives you a little bit of an idea on how easy it is to build the web application
with Flash Builder and with the Flex framework.
Check out the Adobe Developer Connection for more information and I'll see you next time.
[Adobe Developer Connection: adobe.com/devnet]
[ADOBE DEVELOPER CONNECTION]
