|
|
This article shows how I learned to create a custom component based on the Flex checkbox component, and some of the tricks I learned along the way.
Requirements
Flex Builder 3 beta
Download
Learn more
Sample files:
plugin_browser.zip (ZIP, 3K)
Prerequisite knowledge
To benefit most from this series, it is best if you have a basic working knowledge of Flex.
Getting started
Whenever I write applications, I first sit down with a pencil and paper (yes, I do—literally) and sketch out what I want the finished product to look like, based on what I know it should do. The upside of this drawing is that I don't get distracted by user interface components that might be easy or fun, and instead work towards the intended functionality. The downside is that I often wind up "coloring outside the lines"—and having to look for interesting ways of accomplishing what I want to do, but it is not often what the development environment provides. I'll assume this is also your preferred method—so now, both of us are wandering into new territory.
I created the Creative Suite Plug-in Browser for customers who were looking for a solution—and I knew it needed to allow a user to search by Adobe product. I wanted to create a push button with the Adobe product icon. When a user selects an icon in the control, the icon is grayed-out, and any plug-in that only works with that Adobe product no longer displays in the list. When the user selects the icon again by clicking it, the product list display is updated. I thought that a push button with icons would be attractive, an effective use of space, good Adobe branding, and so on. Just to prove that it can be done, look at Figure 1.
Making efficient check boxes
What I really needed was to create some sort of template for this check box, and then apply changes to it. In normal JavaScript, you would typically build a function that dynamically builds a component using a set of parameters. You might even build an object and create instances of a new check box. Flex provides a really easy way of doing this called a component. Components are a lot like objects—except easier to work with. No instantiation needed: just code and go!
The Flex help files have a great description on creating custom components. I'll abbreviate the steps here:
Assuming you're using Flex Builder, select File > New MXML Component. You might want to create a "components" folder in your Flex project and then put the code in that folder. Name it something creative. I called mine iconCheckbox.mxml and put it in a folder called mnrComponents.
In your main source (main.mxml), you'll need to connect the two files. To do this, add a namespace tag to the Application tag at the very beginning of the code. Here's the code before and after.
Before:
Playing pass the icon
Most importantly, I wanted each check box to use custom icons—and I wanted to specify only the "Up" icon and the "Down" icon. I wanted the component to handle all the messy assignments to the upIcon, overIcon, downIcon, and so forth.
Passing parameters to a component is easy; I'll leave it up to you to refer to the instructions in the help file. However, passing icons proved to be somewhat tricky. I tried passing the @embed data—with no luck. I tried passing the string, but components won't embed images. It turns out you little choice but to put on the ActionScript hat.
I finally solved this with two main steps: Create a collection of "embeds" and assign them to variables, and then pass the variables to the check box component, shown in the following section.
Embed the icons
First, create an ActionScript file (File > New > ActionScript File), name it adobeProductIcons.as or whatever makes sense to you, and stash it in a project folder (I used "Actionscript_includes"). Connect it to your main.mxml with the following line, placed immediately after the
