Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When you think about building interactive applications, a design will often call for some kind of repeating list. For example, as you see right here in my browser, I have a list of dates and cities for when a certain olive tour is going to be appearing around the country. You can see that I can actually interact with this list by moving my mouse cursor over each entry, and I can also scroll down this list by clicking on this little thumb right here and dragging it down to view the additional cities and dates, or I can click on this button over here on the top to scroll upwards and scroll downwards as well.
Normally, a designer would face several challenges in trying to put this together. First of all, you need to create some kind of a functional scrollbar. Second of all, you would need some way to actually create a repeating element that's actually connected somehow to that scrollbar. For example, as I move the thumb on the scrollbar, you can see additional entries. Perhaps, most important though is the actual data itself; the entries that appear inside of these elements. In this example, that means the dates and the cities. You see normally on a web application this information would be supplied by a database, so that it's always up-to- date, after all as a web designer, I don't want to have to go in and update a web site every time a new city is added to the list.
As we are about to find out, Flash Catalyst can actually help us do all of this. First of all, you already know that with Flash Catalyst you can create functional components such as this vertical scrollbar here. As for creating repeating elements, we will soon learn that Flash Catalyst has another component called a Data List. This Data List component will allow us to enter dummy information or mock data, and link it to the scrollbar so that it acts as a functional Data List component. Finally, as you know, Flash Catalyst always turns everything that I create into code in the background.
So once I have created this functional piece right here and I've shown to a client and I've gotten approval, I can give my Flash Catalyst project to a developer who can hook it up directly to a database. Let's take a closer look at how Data List components work inside of Flash Catalyst. I will open up Flash Catalyst here and you'll see that I have a project opened called cities_datalist. If I take a look at my artboard here, I can click on this object which is actually a Data List component. The information that appears inside of the Data List component, in this case, the dates and the cities, is information that I have added myself directly here inside of Flash Catalyst.
This information which isn't real, but I'm using it simply to show how this list would work, we sometime refer to this as mock data or dummy data, is all controlled through the Design-Time Data panel which you will find at the bottom of your screen. I'm going to double-click on it so that we can see it and you will note that I have two specific text elements in each repeating elements here. Something here called Text 1 and Text 2. Similar to an Excel spreadsheet, I can specify information here that appears inside of the repeating Data List. I will collapse the panel for now, because I want to focus on the component itself.
If I double-click now on the Data List component to isolate it, I will see that I can click on it to reveal something called the Repeated Item. If I double-click again, I can actually view just one of those components and as we'll soon learn, when I am designing a Data List component, all I care about are one of these elements. Flash Catalyst will automatically repeat them for me. So when I am really designing these Data Lists inside of Flash Catalyst, I am thinking about some kind of scrollbar component to allow me to scroll through the list and I am thinking about one of those repeating elements look like.
Once I have turned it into Data List component, I can then use the Design-Time Data panel to add my data. If I go to the breadcrumbs here and I click on DataList1, I can see that in my Properties panel, I have something called a Repeated Item or a Data Group, and if I scroll down here towards the bottom, I'll see that I can actually layout my Repeated Items in a variety of different ways. So as a designer, you no longer have to come up with complex schemes just to show a manager or a client how a list is going to function. You can actually display Repeated Items as a fully-functional Data List component using Flash Catalyst.
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.
Your file was successfully uploaded.