 |
 |
|
This Macromedia Flash application uses the same ColdFusion
component invoked in the HTML application. To prepare the
CFC file (employeeMgr.cfc) set the cffunction tag attribute
to access="remote". This access attribute must
be set in each cffunction tag (five total) in employeeMgr.cfc
that will be called from Macromedia Flash. Changing the
access attribute to remote makes the CFC accessible to Macromedia
Flash MX SWFs and remote services.
In the code samples for this exercise, there is a fully
scripted ColdFusion Component that you will use.
Set up the Macromedia Flash MX SWF:
First you'll learn how to define the form controls
and layout. Then, you'll learn how to script the calls to
the ColdFusion server and how to write simple display logic.
First, setup a new Macromedia Flash Document in the Macromedia
Flash MX authoring tool. Name the file employee-rich.fla,
and save it in a folder called c:\cfmx_webroot\extremecf\
on your local computer or on the server, where cfmx_webroot
is the webroot for your ColdFusion installation.
|
|
1
|
In the timeline
panel, create for separate layers called "Labels",
"Actions", "UserPrompts", and "Forms"
in that order, from top to bottom (see image below).
To name the layers, right click each layer after creating
it, select Properties, and enter the layer name in the
Properties dialog for the layer. |
|
2
|
On the "Labels"
layer, click and drag frame 10 down to the to the bottom
layer so all layers are selected on frame 10. Select
Insert > Keyframe from the menu, or press F6. This
will set up keyframes on all layers (see figure 3).
|
| |
 |
|
|
Figure 3. Defining a keyframe.
|
|
3
|
Repeat the previous step
on frame 20 and frame 30. |
|
4
|
Give your keyframes labels
on the "Labels" layer. To do so, select each
of the following keyframes and enter the name for the
label in the properties inspector:
a. frame 1 label: "init"
b. frame 10 label: "Listing"
c. frame 20 label: "Forms"
d. frame 30: no label required |
|
5
|
Your timeline should look like the the timeline in
figure 4.
|
|
|
 |
|
|
Figure 4. Naming
the keyframes in the "Labels" layer. (view
full size)
|
|
6
|
Save the FLA. |
|
| |
|
Timeline structure
ColdFusion developers are often confused by the
concept of the Macromedia Flash timeline. In the previous
steps, you structured the timeline to display different
layouts on command. Consider how the HTML example uses the
"page" variable to filter HTML sent to the web
browser. Splitting the timeline so that it displays different
layouts effectively does the same thing. ActionScript will
jump from one frame (or screen layout) to another. If you
need to display a different layout, jump to (and stop on)
a different frame.
Above, you setup three main events: initialization, Listing
Display, and Forms display; essentially three different
layouts (in fact you setup only two, because Frame 1 is
never displayed). Frame 1 is used as a declaration frame.
In the screenshot above, notice the Macromedia Flash play
head (the red line). In this position, Macromedia Flash
would display the "Listing" screen.
The "Listing" page
Now you'll learn how to place components on the
Macromedia Flash stage. The Listing screen will have three
main elements on it:
|
|
1
|
A component to display
a list of the employee records |
|
2
|
An "Add New Employee" button |
|
3
|
Instructions to the user |
|
| Add
a component |
|
1
|
Place the
cursor in the timeline on frame 10 in the "Forms"
layer. |
|
2
|
Select the Flash UI Components
from the drop down menu in the Components panel. |
|
3
|
From the "Flash UI
Components Panel" (See figure 4 in the bottom right
corner), drag a ListBox control onto the Flash stage.
|
|
4
|
Give it the instance name
employeeList_lb, in the Properties
panel. |
|
5
|
Set the ChangeHandler
parameter to getEmployee. |
|
This process will reference a function you will script later,
which directs the Macromedia Flash Player to connect to the
server and retrieve the selected user record (through a Macromedia
Flash Remoting call).
Flash coding tip
Each component has a unique suffix for code hinting. When
you name a ListBox component, place an "_lb" suffix
onto the name. Doing this enables code hints to be displayed
about that component in both Macromedia Flash MX and Dreamweaver
MX. Each component has this ability: _lb = listBox, _cb
= comboBox, _ch = checkBox, _pb = pushbutton, and _sb =
scrollBar.
| Creating
the "Add New Employee" button: |
|
1
|
Place the
cursor in the timeline on frame 10 in the "Forms"
layer. |
|
2
|
Import the ADD button
graphic (use the file, AddButton.wmf) that was included
in the ZIP file for this tutorial. To import the artwork,
Select File > Import. |
|
3
|
Select the entire artwork
by drawing a box around the graphic with your selection
tool (arrow). With the graphic selected, click Insert
> Convert to Symbol, or press F8. |
|
4
|
Select "Button"
from the options and give it an instance name of add_btn.
Click OK. |
|
5
|
In the properties inspector
for the button, give the button an instance name of
add_btn. You'll reference
this later in ActionScript. |
|
| Adding
the user prompts: |
|
1
|
Place the
cursor in the timeline on frame 10 in the "UserPrompt"
layer. |
|
2
|
Using the text tool, create
some text prompts for your user (see figure 5). The
text tool is located in the Tools Panel. |
|
3
|
Click the text tool once
in the Tools panel, and then click on the stage to create
your text fields. |
To review, in Frame 10, you should have a Flash UI Component
(a ListBox) and the Add Button on the Forms Layer. In the
"UserPrompt" layer, you should have some text
that will prompt the user. In the example below, I added
some additional background art in layers below the "Form"
layer.
|
 |
| Figure
5. Add user prompts to the form. |
|
The "Forms" page
Creating the "Forms" page is a little
more complicated because more is happening in the display.
Review the image below as you read through the next few
steps.
|
1
|
For the following
steps, keep your cursor on frame 20 in the "Forms"
layer. |
|
2
|
Select the text tool (but don't click on the stage
yet). In the properties window set the following properties
before you draw the text boxes as shown in figure
6:
a. Type: Input Text
b. Font: "_sans"
c. Font Size: "12"
d. Select the button to Show Border (to the left of
Var).
e. Select the Character button and include the font
outlines for "All characters".
|
| |
|
|
|
Figure 6. The
settings for text in the form.
|
|
3
|
Draw 4 text fields on the stage, placing them in
logical order, as shown in figure 7 below.
|
|
4
|
Each input box must have
a variable name so we can populate them later with data.
In the "Var" field of the property inpector
for each text field, add in the following variable names,
one per text box:
a. firstName_str
b. lastName_str
c. Startdata_date
d. Salary_num |
|
5
|
Drag a ComboBox from the
Components panel. In the property inspector, give an
instance name of deptList_cb
to the ComboBox |
|
6
|
Drag a CheckBox from the
Components panel. In the property inspector, name the
CheckBox contract_ch.
This form element will act as the "Contract"
checkbox. |
|
7
|
Create three PushButtons, one for "Cancel",
one for "Delete", and one for "Apply".
Drag the three PushButtons from the Components panel
and place them on the stage appropriately. Apply the
following properties to the push buttons in the property
inspector:
a. "Cancel" button - Label: "Cancel",
ClickHandler: cancel_but
b. "Apply" button - Label: "Apply";
ClickHandler: apply_but
c. "Delete" button - Label: "Delete"; ClickHandler:
delete_but
|
|
8
|
From the Flash UI Components
Set #2, drag in a Calendar control from the Components
panel (you may need to select Flash UI Components 2
from the drop down menu in the Components panel). Don't
place it on the Scene whitespace yet. You will use ActionScript
later to move it. Place it in the gray workspace in
the Scene panel. Name the Calendar control startdate_cal,
and set the Change Handler to selectStartDate.
|
|
9
|
Add the graphic button
that will prompt the user to display the Calendar control.
Similar to what you did with the "Add" button
above, use File > Import to import the graphic called
"CalendarIcon.wmf", which is included in the
ZIP file for this tutorial. With the graphic selected,
select Insert > Convert to Symbol or F8 to make the
graphic a "button" symbol. Select the "Button"
choice, and enter an instance name of cal_btn
in the property inspector. |
|
10
|
The last component you will need is a MessageBox
component. This will act similar to a JavaScript "confirm"
box, asking the user if they are sure they would like
to delete a record. Drag a MessageBox component from
the Components Panel but like the calendar, don't
place it on the Scene yet; drag it to the gray workspace
to the right of the whitespace in the Scene. Set up
the properties for the MessageBox as follows:
Title: "Confirm Delete"
Message: "You are about to Delete this Record"
Icon: "Warning"
Buttons: [Cancel,Delete Now] (Click the plus sign
to add button choices.)
CloseHandler: delete_confirm
Visible: "false"
Change the size of the calendar as you prefer using
the free transform tool from the toolbar (a small
square with a dot in the middle on the toolbar panel).
|
|
11
|
Move your timeline cursor
up to the "UserPrompt" layer in frame 20,
and add in some user text prompts. Your completed form
will look similar to figure 7.
|
| |
|
|
|
Figure 7. The completed form. (view
full size)
|
|
| |
|
You've now created a Macromedia Flash user interface. To
review, you have created two separate display screens. The
"List" screen contains a ListBox that will display
a list of employees returned from the database. The "Forms"
screen displays a series of input boxes and UI components
that will allow the user to interact with the data.
Next you'll learn how to set up the ActionScript that executes
server calls and returns the results to your Macromedia
Flash SWF.
|
| |
|
|
| |
|
|
|
