IT tutorials
 
Graphics
 

Adobe Flash Catalyst CS5 : Using design-time data (part 1) - Replace design-time images & Edit design-time text

11/18/2011 4:45:21 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
Most data lists are connected to a data source and populated with data dynamically at runtime. A developer can make this connection using Adobe Flash Builder. In Flash Catalyst, you can add placeholder data to display in the Data List component using the Design-Time Data panel. In fact, five sample records are created automatically when you first create the Data List component. Each sample record is a copy of the repeated item in the data list. Using the Design-Time Data panel, you can replace the sample repeated images and text with more realistic examples of the actual data that you want displayed. This dummy data is called design-time data.

Tip

There is nothing stopping you from creating a finished data list using design-time data and images in the project library. You don’t have to connect the application to an external data source. However, if your application is used to display large amounts of data that change over time, binding your list to external data is a better choice.


It’s a good idea to include a representative sample, so that your developer knows exactly how you want the data to appear in the finished application.

Replace design-time images

Replacing the repeated sample data is easy. Open the Design-Time Data panel and swap the images for new ones.

1.
Select the Data List component in the Layers panel.

The data list is selected in the artboard. Using the Layers panel to select the data list is a good way to make sure you select only the data list and not the image below it.

2.
Open the Design-Time Data panel and drag the top border of the panel to make it taller.

The Design-Time Data panel organizes sample data similarly to a traditional data table. Each record is listed as a separate row, and the information in each record (images and text) is listed in columns. In this list, each item includes three images (stars, a round image, and a line) and two pieces of text (the review and the reviewer’s name). At first, the design-time data includes five copies of the repeated item, numbered from 0 to 4.


3.
Click the round image (in the Image 2 column) in row number 1 (the second row). Be sure to select the image in row number 1, not row number 0.

The Select Asset dialog box appears. You can choose an image in the project library or choose Import to add another image.

4.
Select reviewPopupIcon01.png and click OK.

The new image appears in the Design-Time Data panel.

5.
Click the stars (in the Image 1 column) in row 1.

6.
In the Select Asset dialog box, select reviewPopup4Stars.png and click OK.

The second review now has a four-star rating.

7.
Replace the round image in row 2 with reviewPopupIcon02.png.

8.
Replace the stars in row 2 with reviewPopup3Stars.png.

9.
Replace the round image in row 3 with reviewPopupIcon03.png.

10.
Replace the stars in row 3 with reviewPopup2Stars.png.

11.
Replace the round image in row 4 with reviewPopupIcon04.png.

12.
Replace the stars in row 4 with reviewPopup1Star.png.

The design-time data for the restaurant reviews data list now includes a more realistic collection of sample images.

Tip

By default, a data list opens with nothing selected. You can set the list to open with a specific record selected. To do this, select a row in the Design-Time Data panel. Then in the Component section of the Properties panel, enter 1 as the value for the Selected Index property. The row you selected will display its Selected state when the application runs.


Edit design-time text

Replacing sample design-time text is even easier than swapping images. Open the Design-Time Data panel, and enter new text for each record.

1.
In the Design-Time Data panel, click in the Text 1 column for row 1 and type a new review.

Tip

You can press the Tab key to quickly move between text fields in the Design-Time Data panel.

2.
Click in the Text 2 column for row 1 and type a new reviewer name.

3.
Add new reviews and reviewer names for the design-time data in rows 2, 3, and 4.

4.
Run the project in a browser.

5.
Click any of the restaurants in the horizontal list, and then click Reviews to see the updated data list with its new design-time data.

6.
Close the browser and return to Flash Catalyst.
 
Others
 
- Adobe Flash Catalyst CS5 : Setting data list properties
- Adobe Illustrator CS5 : Learning the Truth About Transparency (part 2)
- Adobe Illustrator CS5 : Learning the Truth About Transparency (part 1) - Understanding Transparency Flattening
- Dreamweaver CS5 : Using Dreamweaver Templates - Adding Content to Template Documents
- Dreamweaver CS5 : Using Dreamweaver Templates - Using Editable Regions
- Adobe Photoshop CS5 : Fixing Depth-of-Field Problems
- Adobe Photoshop CS5 : Using the Dodge and Burn Tools
- QuarkXPress 8 : Combining type and graphics
- QuarkXPress 8 : Fine-tuning typography
- Adobe After Effects CS5 : Curves: Gamma and Contrast
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Celebrity Style, Fashion Trends, Beauty and Makeup Tips.