Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we've created a functional data list component here in Flash Catalyst, we're ready to start working with the data inside of it. We can do that, using the Design-Time Data panel which can be found at the bottom of the screen. I'll double-click on the tab to open it and let me scroll up just a little bit here, so we can see the entire component on our screen, and I'll simply click on the component itself to select it. Notice that now, the Design-Time Data panel is filled with information. I'll enlarge the panel a bit so that we can see what's inside of it. I currently have two columns: something called Text 1 and Text 2.
Flash Catalyst creates these automatically, based on whatever was inside of my data list component. Remember that there were two rectangles inside of my repeating item. Those are those gradients that appear behind the text; those obviously don't appear here. The only thing that Flash Catalyst can treat as data, are either text elements or images, which we'll learn about later on in this chapter. By default Flash Catalyst created five repeating elements. So I have five rows here that represent the data inside of this data list component.
If I want to change these values, I can simply click here and make the changes by typing directly into the Design-Time Data panel. For example, I'll add a date here for January 7th. I'll then hit the Tab key and change Los Angeles to San Francisco. I'll hit Tab again, and notice that right here on my artboard I can now see the data has changed inside the component. Let's add a few more dates. I'll do January 23rd, once again hit Tab and this time I'll put in Seattle.
Tab advances me to the next field. Let's do February 10th and let's change this to read Dallas. I'll add a few more cities here. Let's do 2.17 and let's actually have this in Miami. And now I'd like to actually add some more cities here. So I'll click on this button here called Add Row. In fact, I'll add a few more so that I have a total here of eight. Notice it starts from O, so even though it says 7 here, I now have 8 rows.
So you can see that you can easily add rows and change the data for each of these rows, just by entering information into the Design-Time Data panel. Unfortunately there is no way to import an Excel Spreadsheet directly. You'll actually have to key it all in here directly inside of Flash Catalyst. But once I'm done, I can go up to the File menu here and I can choose to run this project to preview how this data list is going to work inside of my application. Notice that I can grab the thumb in the scrollbar and actually drag it up and down to view the different cities and I can also use the buttons here, to incrementally move up and down as well.
While the data that I am using inside of this component is something that I myself have made up and have entered manually inside of Flash Catalyst, I can certainly use this functional mock -up to show a client or a manager how it's going to look. Once approved, I can hand my Flash Catalyst file off directly to a developer, component, to some data services online.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.