Home arrow Flash arrow Page 5 - Using the Decorator Pattern for a Real Web Site

Using the Decorator Pattern for a Real Web Site

In this conclusion to a six-part series on the decorator pattern, we're going to put what we've learned to work on a more realistic example than the ones we've covered up until now: a web site for a hybrid car dealership. This article is excerpted from chapter four of ActionScript 3.0 Design Patterns Object Oriented Programming Techniques, written by William B. Sanders and Chandima Cumaranatunge (O'Reilly, 2007 ISBN: 0596528469). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
December 31, 2008
  1. · Using the Decorator Pattern for a Real Web Site
  2. · Hybrid car classes concrete component
  3. · Using Auto Options as Decorators
  4. · Setting Up the User Interface
  5. · Creating the document and setting the stage
  6. · Implementing the concrete components and their decorators

print this article

Using the Decorator Pattern for a Real Web Site - Creating the document and setting the stage
(Page 5 of 6 )

Once you’ve saved the Deal.as file, you’ll need to do a little work on a Flash document file. The following steps will guide you.

  1. Open a new Flash document and save it as AutoDealer.fla in the same folder as the .as files.
  2. In the Document class window, type in Deal, and resave the file.
  3. Using Figure 4-8 as a guide, use Static text to add the header “2 Guys From Connecticut Hybrid Cars.” Beneath the header, at horizontal position 150, type in Select Car, and on the same line at horizontal position 250, type in Select Options.
  4. Open the Components and Library panels and drag a copy of the radio button and the checkbox to the Library.
  5. Select Insert -> Symbol in the menu bar, and select Button as Type. In the Name window, type in Button (which is the default name), and click the Import for ActionScript checkbox. Click OK to enter the Button Symbol editor indicated by the special four-frame Timeline.
  6. In the Button Symbol editor, add a layer, and, selecting the top layer, use the Rectangle Tool to draw a rectangle with colors to suit your tastes with 8-point rounded corners located at x=0, y=0. Size it to W=43, H=13. Add keyframes to all the frames in the top layer. Select the object in the Over frame and swap (reverse) the stroke and fill colors.
  7. Add keyframes to the first three frames in the lower layer. In the Up frame, using a Static text and narrow sans serif 10-point font type, type “Calculate” centered below the button. In the Over frame, do the same thing, but type in Total Cost. Leave the Down frame empty.
  8. Check to make sure your Library shows the following: CheckBox, CheckBoxSkins, Component Assets, Button, RadioButton, RadioButtonSkins. If it does, you should be all set.

The next step is to test the application. All the buttons and the text field are automatically placed on the stage. Figure 4-8 shows what you can expect to see if everything is working as expected.

Figure 4-8.  Decorator user interface and output

blog comments powered by Disqus

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials