Table of Contents

Introduction
Who Should Read This?
How Does It Work?
Download(s)
System and Software Requirements
Adobe Photoshop Reserved Words

Tutorials
Overview

1. Starting a Flex Project
2. Hello World Panel
3. Placing the CSXS Library


4. Shortcut Buttons Panel
   1. JavaScript
   2. Design the Panel
   3. ActionScript
   4. Photoshop Persistent
   5. CSXS Logger AIR Debugger (Optional)


5. Setting Up Script Listener


6. Color Picker Panel
1. JavaScript
2. Design the Panel
3. Find Character ID Code to Register Events
4. ActionScript
5. Create Custom Icons


7. Flickr Search Panel
1. Design the Panel
2. Create a Flickr Service
3. Design a Custom Module
4. Modify Panel's Properties
5. Connect on Preferences


8. Per Layer Metadata Panel
1. View Metadata
2. JavaScript
3. Find Character ID Code to Register Events
4. Designing the Panel
5. ActionScript
6. Using Photomerge

Other Samples
Best Practices
Frequently Asked Questions
Acronyms and Definitions
Links

Adobe^® Photoshop^® Panel Developer's Guide

---

Flickr Search Panel: Create Custom Module

The third part of the Flickr Search Panel is creating a custom module for the tile list control component. The custom module will be designed as a new component called a Flickr Thumbnail. The module will be a vertical box component containing a fixed-size image and a fixed-size text field. The fixed-size image and fixed-size text will retrieve the data from the main application and use the photograph's properties such as the internet's location to display the image and the name of the image to display the text. The result is using the Flickr Thumbnail module to be placed in the tile list control component of the main application.

Instructions:

1. Go to File > New > MXML Component.
1. Under Filename:, type in FlickrThumbnail.
2. Under Based on:, select VBox.
3. Under Width and Height, type in 125.

2. Press Finish. The Flex Navigator now shows FlickrThumbnail.mxml under the src folder:
   
   The initial code should look similar to the following:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="125" height="125">
   </mx:VBox>

3. The red colored text are the changes made to FlickrThumbnail.mxml:

   <?xml version="1.0" encoding="utf-8"?>
   <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="125" height="125">
      <mx:Image width="75" height="75" source="{data.thumbnail.url}"/>
      <mx:Text width="100" text="{data.credit}"/>
   </mx:VBox>

   Code Walkthrough: The Image tag and Text tag each have a specified fixed-size. The Image tag displays the image based on the parameter source obtained from data.thumbnail.url from the Flickr API. The Test tag displays the text based on the parameter text obtained from data.credit from the Flickr API.

4. Click on the FlickSearch.mxml tab or double-click on FlickSearch.mxml under the src folder in the Flex Navigator.
5. The red colored text are the changes made to the TileList tag in FlickrSearch.mxml:

   <mx:TileList width="100%" height="100%" dataProvider="{photoFeed}" itemRenderer="FlickrThumbnail">
   </mx:TileList>

   Code Walkthrough: The TileList tag has a parameter dataProvider to obtain the ArrayCollection called photoFeed. The TileList tag also has a parameter called itemRenderer to render each item with the FlickrThumbnail module created earlier.

Continue to Modify Panel's Properties