Click on any phrase to play the video from that point.
Hi there and welcome to Adobe's San Francisco office.
My name is Serge, and I work on Adobe's Developer Evangelism Team,
and in this video, I'd like to show you some of the work that we're doing in Flash Builder and Flash Catalyst
that will make it a lot easier for you to work with both. I think you'll like this.
Here we are in Flash Builder, and the first thing you'll notice when you create a new project is that we have a couple of new project types,
and one of those new project types is the Flash Catalyst Compatible Project.
That's what I have set up here.
It's just a normal flex application except that we've added some new metadata for Flash Catalyst,
and you'll also be able to edit this file in Flash Catalyst, and that's exactly what we're going to do.
Now, this is a very simple application.
I'm just loading an xml file, and then I'm displaying the result in a list, but note on the left here--
I actually have two little icons here that actually tell me that there's some information there.
In the Problems panel, I get a little bit more information about what's going on there.
I have already bound my list to the data coming from that xml file, and that's not something that you can do in Flash Catalyst,
and so it warns you that when you open this up in Flash Catalyst, you may have problems editing this file.
Now, in this case, that's perfectly fine since I want to use the data coming from that xml file.
Now what I'm going to do is actually right click on my project, and you'll see that we have a new menu item here,
and when you open that up it says, "Edit this project in Flash Catalyst," and that's exactly what we're going to do.
It'll ask you to save the project when you're done in Flash Catalyst, and I'm just going to open it up in Catalyst automatically.
Here's our file in Flash Catalyst, and we're ready to make this a little bit nicer.
You see that we have our list here, and it's actually telling you that this is bound to the dynamic data,
so when you change this in Flash Catalyst, you may need to edit the code back in Flash builder so you hook it up to the correct data,
but I'm not going to change the list. What I'm going to do is actually just create two different states here.
I'll call this the list state and the detail state.
My detail state--I'm just going to move this to the left a little bit,
so I create some extra space to show the actual data for the person that I selected in that list.
Something like that and I'm also going to make this a nice little gradient so it looks a little bit nicer.
Then I'm going to also convert this into an actual component, so it's easier to work with all the extra fields that I'm going to add here.
So I'll call this the details panel or something like that.
[DetailsPanel]
Now that I have this extra component, I'm just going to bind this to the edges of the application,
so it is also nicely centered with this list.
Then I'm going to add a couple of extra components in here.
First of all, I'll use this wire-frame component or place holder that you can use in Flash Catalyst.
This is just to tell the developer that this is supposed to be a photo, and I'm also going to add two text fields.
This will be the name for the person that I selected, and I'm also going to change the font in here
and maybe make that a little bit bigger--something like that.
I'll add an extra text field as well to show the job title, and I'll position that where I want it. Okay. I'm done here.
The next thing I want to do is to make sure that I have a nice transition.
You can also do that just with codes, but it's a lot easier, again, to do that in Flash Catalyst.
I'll just make a nice little transition between those two states. Yep. That looks great.
Then when I click on one of the items in the list, I also want to go to that second state,
so I'll choose the state that I want to go to and click okay.
Now, I'm done here in Flash Catalyst, so what I'm going to do is just save this project and then go back into Flash Builder,
and you'll notice that our project is actually locked in Flash Builder. I can't actually do anything here.
Also, when I click on that, it'll tell me that this project is locked, but now we can actually resume working on that project.
It's going to load all the changes that we made in Flash Catalyst, and then I am ready to go and hook this up to the actual data.
That's the last step I'm going to do in this application.
As you can see, all the code from Flash Catalyst is brought in here.
Here is our list-change handler that we added, all the different states, and also the transition between the states is right here as well,
and our custom component that we created is right here as well.
I want to make sure that I can hook that up to the actual data that I select in the list.
What I'll do is I'll create two string variables--call that one "select a name"
and the second one--call that "select a job" or something like that,
and instead of displaying the text that I entered in Flash Catalyst, I'm just going to bind this to the data coming from that list.
One more step to do and that is to make sure that the actual components get the data from that list,
so I'll say selected name equals--and I'll bind this as well to my list--selected item dot name,
and then the last thing was the selected job--my list dot selected item, and I think the value there is job title.
Now, when I run this you should hopefully see a working application. Yep. There we go.
