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

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Using the Decorator Pattern for a Real Web Site - Setting Up the User Interface
(Page 4 of 6 )

The largest single class we’re going to use is the one to create the user interface. The line numbers appear in the Example 4-48 for the purpose of referencing lines in the code. A lot of the work done by this class, named Deal, is to set up the interface objects. These include the radio button, checkbox, and button components. Additionally, a good hunk of code is required for the text field output window and formatting for the output. So while the interface to the decorator pattern may look unwieldy, it’s not decorator pattern’s fault. In fact, only the getCar() (beginning on line 115) and getOptions() (beginning on line146) private functions are employed to pull out the information generated by the Decorator pattern.

To get a handle on what the class does, enter the code from Example 4-48 and save it asDeal.as.

Example 4-48. Deal.as

  1package
 2 {
  3   import fl.controls.CheckBox;
 4   import fl.controls.RadioButton;
 5   import fl.controls.Button;
 6   import flash.display.Sprite;
 7   import flash.display.MovieClip;
 8   import flash.events.MouseEvent;
 9   import flash.text.TextField;
 10   import flash.text.TextFormat;
 11
 12   public class Deal extends Sprite
 13    {
 14       internal var checks:Array=[];
 15       internal var cars:Array=[];
 
16      internal var carDeal:Auto;
 17      public var dealText:TextField=new TextField();
 18
 19      //Constructor Function
 20      public function Deal ():void
 
21       {
 22          getRadios ();
 23          getChecks ();
 24          doDealButton ();
 25          showDeal ();
 26       }
 
27      //Add button from Library
 28      private function doDealButton ():void
 29      {
 30         var doDeal:Button=new Button();
 31         this.addChild (doDeal);
 32         doDeal.x=215;
 33         doDeal.y=195;
 34         doDeal.label="Make Deal";
 35         doDeal.addEventListener (MouseEvent.CLICK,getPackage);
 36       }
 37      //**
 38      //Get information from Decorator and display it
 39      //**
 40      private function getPackage (e:MouseEvent):void
 41      {
 42         getCar ();
 43         getOptions ();
 44         if (carDeal == null)
 45         {
 46            return;
 47         }
 48         else
 49         {
 50            var nowDrive:String=carDeal.getInformation()+"\nTotal=$"+carDeal.price();
 51          }
 52         dealText.text=formatMachine(nowDrive);
 53       }
 54      //Format Output
 55     private function formatMachine (format:String):String
 56     {
 57        if (format.indexOf("~") != -1) 
 58         {
 59            format=format.split("~").join("\n");
 60        }
 61        return format;
 62     }
 63     //Text Field & Format
 64     private function showDeal ():void
 65     {
 66        dealText.width=150;
 67        dealText.height=100;
 
68         dealText.wordWrap=true;
 69         dealText.multiline=true;
 70         dealText.x=165;
 71         dealText.y=230;
 72         dealText.border=true;
 73         dealText.borderColor=0xcc0000;
 74         var dealerFormat:TextFormat=new TextFormat();
 75         dealerFormat.leftMargin=4;
 76         dealerFormat.rightMargin=4;
 77         dealText.defaultTextFormat=
dealerFormat;
 78         this.addChild (dealText);
 79      }
 80      //Add Check boxes for Options (Concrete Decorators)
 81      private function getChecks ():void
 82      {
 83         var gizmos:Array=new Array("MP3","Heated Seats","GPS", "Rear View Video");
 84         var saloon:uint=gizmos.length;
 85         var giz:uint;
 86         for (giz=0; giz<saloon; giz++)
 87         {
 88             checks[giz]=new CheckBox();
 89             this.addChild (checks[giz]);
 90             checks[giz].width=150;
 91             checks[giz].x=250;
 92             checks[giz].y=80+(giz*30);
 93             checks[giz].label=gizmos[giz];
 94         }
 95      }
 
96     //Add Radio buttons Auto (Concrete Components)
 97     private function getRadios ():void
 98     {
 
99         var car:Array=new Array("Escape","Mariner","Prius","Accord");
100        var saloon:uint=car.length;
101        var ride:uint;
102        for (ride=0; ride<saloon; ride++)
103        {
104            cars[ride]=new RadioButton();
105            cars[ride].groupName="deals";
106            this.addChild (cars[ride]);
107            cars[ride].x=150;
108            cars[ride].y=80+(ride*30);109            cars[ride].label=car[ride];110        }
111     }
112     //Select Auto and create Concrete Component
113     private function getCar ():void
114     {
115         var tracker:String;
116        var hybrid:uint;
117         for (hybrid=0; hybrid<cars.length; hybrid++)
118        {
119            if (cars[hybrid].selected)
120             {
121                tracker=cars[hybrid].label;
122                switch (tracker)
123                {
124                   case "Escape" :
125                       carDeal = new Escape();
126                       break;
127
128                   case "Mariner" :
129                       carDeal = new Mariner();
130                       break;
131
132                   case "Prius" :
133                       carDeal = new Prius();
134                       break;
135
136                   case "Accord" :
137                       carDeal = new Accord();
138                       break;
139               }
140            }
141         }
142      }
143     //Select options -- wrap Concrete Component in Decorator
144     private function getOptions ():void 
145     {
146          var tracker:String;
147         var toy:uint;
148         for (toy=0; toy<checks.length; toy++)
149         {
150            if (checks[toy].selected)151             {
152               tracker=checks[toy].label;
153               switch (tracker)
154               {
155                   case "MP3" :
156                      carDeal = new MP3(carDeal);
157                      break;
158
159                  case "Heated Seats":160                     carDeal = new HeatedSeats(carDeal);
161                     break;
162
163                  case "GPS":
164                      carDeal = new GPS(carDeal);
165                     break;
166
167                  case "Rear View Video":
168                     carDeal = new RearViewVideo(carDeal);
169                }
170             }
171         }
172      }
173   }
174 }
175


blog comments powered by Disqus
FLASH ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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