{"id":1246,"date":"2011-01-26T21:46:51","date_gmt":"2011-01-27T02:46:51","guid":{"rendered":"http:\/\/www.lonhosford.com\/lonblog\/?p=1246"},"modified":"2015-07-31T18:25:51","modified_gmt":"2015-07-31T23:25:51","slug":"parsley-hello-world-for-a-flash-builder-actionscript-project","status":"publish","type":"post","link":"https:\/\/www.lonhosford.com\/lonblog\/2011\/01\/26\/parsley-hello-world-for-a-flash-builder-actionscript-project\/","title":{"rendered":"Parsley Hello World For A Flash Builder Actionscript Project"},"content":{"rendered":"<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#appId=105467682877384&amp;xfbml=1\"><\/script><fb:like href=\"https:\/\/www.lonhosford.com\/lonblog\/2011\/01\/26\/parsley-hello-world-for-a-flash-builder-actionscript-project\/\" send=\"true\" width=\"450\" show_faces=\"true\" font=\"\"><\/fb:like><br \/>\nI had reasonable success using the  <a href=\"http:\/\/www.spicefactory.org\/parsley\/\" target = \"_blank\">SpiceFactory Parsley<\/a> framework for Flex and AIR projects. I posted a <a href=\"https:\/\/www.lonhosford.com\/lonblog\/2010\/09\/14\/basic-parsley-framework-flex-example-explained\/\">basic Flex Example<\/a> in this blog. I also wanted to use it for Actionscript projects in Flash Builder. <img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"http:\/\/lh6.ggpht.com\/_e5pwU0LJbN8\/TUDbXBX15QI\/AAAAAAAAFyI\/yx_5bTk9wBc\/s800\/ParselyHelloWorld_AS_published.png\" class=\"alignleft\" width=\"370\" height=\"201\" \/>This is as minimalist example as I could make. It shows how to configure the Actionscript project for Parsley, how to wire in your view and how to access the Parsley messaging framework. <\/p>\n<p>[UPDATE] I posted a second example that includes a minimalist model view controller with Parsley: <a href=\"https:\/\/www.lonhosford.com\/lonblog\/2011\/02\/07\/basic-parsley-mvc-flash-builder-actionscript-project\/\">Basic Parsley MVC Flash Builder Actionscript Project<\/a>.<\/p>\n<p>The only basic example for Flash I could find is referenced from the <a href=\"http:\/\/spicefactory.org\/parsley\/documentation.php\" target = \"_blank\">Spicefactory Parsley Developer Manual<\/a> in chapter 1 under &#8220;Other Resources&#8221;. This example is found at <a href=\"http:\/\/www.sitronnier.com\/blog\/parsley-2-basic-flash-example\" target = \"_blank\">BloggingLemon<\/a>. It was written in July 2009.  There is a live demo and you can view the source code. Unfortunately the article has no explanations. It did provide me a good template for the Parsley bootstrapping.<\/p>\n<p>The BloggingLemon article attempts to show using model-view-controller with Parsley.  I stripped that out so you have a real basic example that, to my search efforts, is not available on the web or at the SpiceFactory web site.<\/p>\n<p>You can build this with the free Flex SDK by using the code in the src folder and be sure to include a path to the Parsley and Spicelib library. I have included the Flash Builder 4 project file here you can download.<\/p>\n<ul style = \"padding-top:10px\">\n<li><a href=\"https:\/\/www.lonhosford.com\/content\/flex\/Parsley\/ParsleyFramework_HelloWorld_AS.zip\"  onClick=\"javascript: pageTracker._trackPageview('\/downloads\/ParsleyFramework_HelloWorld_AS.zip'); \">Flex Builder 4 Actionscript Project<\/a><\/li>\n<\/ul>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>Application Class &#8211; ParsleyFramework_HelloWorld_AS.as<\/strong><br \/>\nThis is the bootstrap application class. The constructor lines 33 &#8211; 40 configure the Parsley log messaging useful for debugging Parsley. Here we are suppressing the Parsley messaging so you can view the trace statements I added to help follow the application and Parsely messaging. <\/p>\n<p>Lines 69 and 70 of the initApp method load the Parsley xml configuration file shown later in this post.<\/p>\n<p>Lines 79 an 81 of the contextEventInitializedHandler method create Parsley managed objects for the two views in this application. The input view is two buttons labeled on and off. The output view is a Flash TextField.<\/p>\n<p>The trace statements will show you the flow of the class.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage\r\n{\r\n\timport flash.display.Sprite;\r\n\timport flash.display.StageAlign;\r\n\timport flash.display.StageScaleMode;\r\n\timport flash.events.Event;\r\n\timport org.spicefactory.lib.flash.logging.Appender;\r\n\timport org.spicefactory.lib.flash.logging.FlashLogFactory;\r\n\timport org.spicefactory.lib.flash.logging.LogLevel;\r\n\timport org.spicefactory.lib.flash.logging.impl.DefaultLogFactory;\r\n\timport org.spicefactory.lib.flash.logging.impl.TraceAppender;\r\n\timport org.spicefactory.lib.logging.LogContext;\r\n\timport org.spicefactory.lib.logging.Logger;\r\n\timport org.spicefactory.parsley.core.context.Context;\r\n\timport org.spicefactory.parsley.core.events.ContextEvent;\r\n\timport org.spicefactory.parsley.flash.logging.FlashLoggingXmlSupport;\r\n\timport org.spicefactory.parsley.xml.XmlContextBuilder;\r\n\timport views.InputView;\r\n\timport views.OutputView;\r\n\t&#x5B;SWF(frameRate=&quot;30&quot;, width=&quot;800&quot;, height=&quot;650&quot;, backgroundColor=&quot;0x666666&quot;)]\t\r\n\tpublic class ParsleyFramework_HelloWorld_AS extends Sprite\r\n\t{\r\n\t\t\/**\r\n\t\t * This app's context for Parsley.\r\n\t\t * *\/\r\n\t\tprotected var _mainContext:Context;\r\n\t\t\/**\r\n\t\t * Application bootstrap class.\r\n\t\t * *\/\r\n\t\tpublic function ParsleyFramework_HelloWorld_AS()\r\n\t\t{\r\n\t\t\tsuper();\r\n\t\t\tvar factory:FlashLogFactory = new DefaultLogFactory();\r\n\t\t\t\/\/ Spicefactory warning level for logging.\r\n\t\t\tfactory.setRootLogLevel(LogLevel.WARN);\r\n\t\t\tvar traceApp:Appender = new TraceAppender();\r\n\t\t\t\/\/ Suppress SpiceFactory lib tracing.\r\n\t\t\ttraceApp.threshold = LogLevel.OFF;\r\n\t\t\tfactory.addAppender(traceApp);\r\n\t\t\tLogContext.factory = factory;\r\n\t\t\tif (stage == null) \r\n\t\t\t{\r\n\t\t\t\taddEventListener(Event.ADDED_TO_STAGE, addedToStageEventHandler);\r\n\t\t\t}\r\n\t\t\telse \r\n\t\t\t{\r\n\t\t\t\tinitApp();\r\n\t\t\t}\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Handler for ADDED_TO_STAGE EVENT\r\n\t\t *\/\r\n\t\tprotected function addedToStageEventHandler(event:Event):void\r\n\t\t{\r\n\t\t\ttrace(&quot;INIT: ParsleyFramework_HelloWorld01_AS.addedToStageEventHandler(...)&quot;);\r\n\t\t\tremoveEventListener(Event.ADDED_TO_STAGE, addedToStageEventHandler);\r\n\t\t\tinitApp();\r\n\t\t} \r\n\t\t\/**\r\n\t\t * Initialize the stage and load Parsley configuration.\r\n\t\t *\/\r\n\t\tprotected function initApp():void\r\n\t\t{            \r\n\t\t\ttrace(&quot;INIT: ParsleyFramework_HelloWorld01_AS.initApp()&quot;);\r\n\t\t\tstage.align = StageAlign.TOP_LEFT;\r\n\t\t\tstage.scaleMode = StageScaleMode.NO_SCALE;\r\n\t\t\tFlashLoggingXmlSupport.initialize();\r\n\t\t\t\/\/ INITIALIZE CONTEXT\r\n\t\t\t_mainContext = XmlContextBuilder.build(&quot;ParsleyConfiguration.xml&quot;);\r\n\t\t\t_mainContext.addEventListener(ContextEvent.INITIALIZED, contextEventInitializedHandler); \r\n\t\t}\r\n\t\t\/**\r\n\t\t * Handler for Parsley ContextEvent.INITIALIZED event.\r\n\t\t *\/\r\n\t\tprotected function contextEventInitializedHandler(event:ContextEvent):void\r\n\t\t{    \r\n\t\t\ttrace(&quot;INIT: ParsleyFramework_HelloWorld01_AS.contextEventInitializedHandler(...)&quot;);\r\n\t\t\t_mainContext.removeEventListener(ContextEvent.INITIALIZED, contextEventInitializedHandler);\r\n\t\t\tvar inputView:InputView = _mainContext.getObjectByType(InputView) as InputView;\r\n\t\t\taddChild(inputView);  \r\n\t\t\tvar outputView:OutputView = _mainContext.getObjectByType(OutputView) as OutputView;\r\n\t\t\taddChild(outputView);  \r\n\t\t\toutputView.y = inputView.y + inputView.height + 5;\r\n\t\t}        \r\n\t}\r\n}\r\n<\/pre>\n<p><strong>Parsley Configuration XML File &#8211; ParsleyConfiguration.xml<\/strong><br \/>\nFor Parsley to look for the Parsley metatags and other management tasks, it needs to know which classes to search. Loading an XML configuration file is how that is done.<\/p>\n<p>Lines 11 and 12 show how to wire in the two classes we are using.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\n&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;\r\n&lt;objects \r\n    xmlns=&quot;http:\/\/www.spicefactory.org\/parsley&quot;\r\n    xmlns:xsi=&quot;http:\/\/www.w3.org\/2001\/XMLSchema-instance&quot;\r\n    xsi:schemaLocation=&quot;http:\/\/www.spicefactory.org\/parsley \r\n        http:\/\/www.spicefactory.org\/parsley\/schema\/2.3\/parsley-core.xsd&quot;\r\n    &gt;\r\n    &lt;!-- Classes managed by Parsley --&gt;\r\n\t&lt;object type=&quot;views.InputView&quot;  \/&gt;\r\n\t&lt;object type=&quot;views.OutputView&quot;  \/&gt;\r\n&lt;\/objects&gt;\r\n<\/pre>\n<p><strong>The Input View &#8211; InputView.as<\/strong><br \/>\nThis input view is two buttons labeled on and off. The UI classes for the buttons is shown later in this post.<\/p>\n<p>The key items to see here are the Parsley metatags. The first is line 25 where [MessageDispatcher] defines this class as a dispatcher of Parsley messages. Line 26 follows with the name of the function for message sending.  Lines 65 and 73 show this dispatcher function in action.<\/p>\n<p>Line 39 shows the [Init] metatag. There may be times that you need to wait until Parsley is fully configured before adding display objects or performing other class initialization tasks. The [Init] metatag defines the function that Parsley will call when it is fully configured. An example is included here for demonstration purposes but we have no need for it other than to display a trace message for you to follow in your output console.<\/p>\n<p>You can appreciate the two buttons sending their messages within the InputView and then the InputView dispatching messages to Parsley for other objects to handle. InputView is decoupled from the overall application and can be easily inserted into another application without a concern about the application messaging framework.<\/p>\n<p>I made the InputView class so it would also handle the messages is gives to Parsley. You see this on lines 79, 89 and 97 with the [MessageHandler] metatags. These lines indentify functions that will act as Parsley message handlers. These are the methods that follow the [MessageHandler] metatags on lines 80, 90 and 98.<\/p>\n<p>The message selection works by comparing the event in the [MessageHandler] method&#8217;s argument. A further feature can target the message using a selector. You see this with lines 89 and 89 where the event&#8217;s type becomes a filter for calling the method. You will see these event types later in the OnOffEvent class which is a common custom Actionscript event class.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage views\r\n{\r\n\timport events.OnOffEvent;\r\n\timport flash.display.Sprite;\r\n\timport flash.events.MouseEvent;\r\n\timport ui.simple.QuickButton;\r\n\t\/**\r\n\t * Demonstrates UI components sending messages confined to this view while\r\n\t * using Parsley to send messages outside. This view also\r\n\t * handles the Parsley messages it dispatches.\r\n\t * *\/\r\n\tpublic class InputView extends Sprite\r\n\t{\r\n\t\t\/**\r\n\t\t * The on button\r\n\t\t * *\/\r\n\t\tprivate var onButton:QuickButton;\r\n\t\t\/**\r\n\t\t * The off button\r\n\t\t * *\/\r\n\t\tprivate var offButton:QuickButton;\r\n\t\t\/**\r\n\t\t * Parsley injected message dispatcher\r\n\t\t * *\/\r\n\t\t&#x5B;MessageDispatcher]\r\n\t\tpublic var dispatcher:Function;\r\n\t\t\/**\r\n\t\t * Constructor\r\n\t\t * *\/\r\n\t\tpublic function InputView()\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView()&quot;);\r\n\t\t\tsuper();\r\n\t\t\tcreateChildren();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Parsley calls automatically after context parsing.\r\n\t\t *\/\r\n\t\t&#x5B;Init]\r\n\t\tpublic function parsleyInit():void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView.parsleyInit()&quot;);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Build the UI for this display object.\r\n\t\t *\/\r\n\t\tpublic function createChildren():void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView.createChildren()&quot;);\r\n\t\t\t\/\/ Create two QuickButtons and add to display list.\r\n\t\t\tonButton = new QuickButton(&quot;On&quot;);\r\n\t\t\tonButton.addEventListener(MouseEvent.CLICK, onButtonClickHandler);\r\n\t\t\taddChild(onButton);\t\r\n\t\t\toffButton = new QuickButton(&quot;Off&quot;);\r\n\t\t\toffButton.addEventListener(MouseEvent.CLICK, offButtonClickHandler);\r\n\t\t\toffButton.x = onButton.x + onButton.width + 10;\r\n\t\t\taddChild(offButton);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Handler for onButton MouseEvent.CLICK\r\n\t\t * *\/\r\n\t\tprivate function onButtonClickHandler(e:MouseEvent):void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView.onButtonClickHandler(...)&quot;);\r\n\t\t\tdispatcher( new OnOffEvent(OnOffEvent.ON) );\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Handler for offButton MouseEvent.CLICK\r\n\t\t * *\/\r\n\t\tprivate function offButtonClickHandler(e:MouseEvent):void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView.offButtonClickHandler(...)&quot;);\r\n\t\t\tdispatcher( new OnOffEvent(OnOffEvent.OFF) );\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Parsley event handler. Listening for OnOffEvent all types. \r\n\t\t * Other Parsley managed views can do the same.\r\n\t\t *\/\r\n\t\t&#x5B;MessageHandler]\r\n\t\tpublic function offOnEventHandler(event:OnOffEvent):void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView.offOnEventHandler(...) - event.type: &quot; + event.type);\r\n\t\t} \r\n\t\t\/**\r\n\t\t * Parsley event handler. Listening for OnOffEvent ON type. Shows using a selector.\r\n\t\t * Other Parsley managed views can do the same.\r\n\t\t *\/\r\n\t\t&#x5B;MessageHandler(selector=&quot;event.OnOffEvent.OFF&quot;)]\r\n\t\tpublic function offEventHandler(event:OnOffEvent):void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView.offEventHandler(...)&quot;);\r\n\t\t} \r\n\t\t\/**\r\n\t\t * Parsley event handler. Listening for OnOffEvent all types. Shows using a selector.\r\n\t\t * Other Parsley managed views can do the same.\r\n\t\t *\/\r\n\t\t&#x5B;MessageHandler(selector=&quot;event.OnOffEvent.ON&quot;)]\r\n\t\tpublic function onEventHandler(event:OnOffEvent):void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: InputView.onEventHandler(...)&quot;);\r\n\t\t} \r\n\t}\r\n}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>The Output View &#8211; OutputView.as<\/strong><br \/>\nThe OutputView class receives Parsley messages in the same way the InputView class does. In fact they are both receiving the same Parsley messages on line 64, 73 and 82. The one difference is that the view is updated. <\/p>\n<p>The messaging is the InputView buttons result in Parsley messages that the OutputView receives. <\/p>\n<p>You also see the [Init] metatag on line 36 to further demonstrate Parsley providing its ready message to managed objects.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage views\r\n{\r\n\timport events.OnOffEvent;\r\n\timport flash.display.Sprite;\r\n\timport flash.events.MouseEvent;\r\n\timport flash.text.TextField;\r\n\timport flash.text.TextFieldType;\r\n\timport flash.text.TextFormat;\r\n\timport flashx.textLayout.formats.TextAlign;\r\n\t\/**\r\n\t * Simple output view. Demonstrates receiving Parsley managed messages.\r\n\t * *\/\r\n\tpublic class OutputView extends Sprite\r\n\t{\r\n\t\t\/**\r\n\t\t * Output TextField component.\r\n\t\t * *\/\r\n\t\tprivate var tf:TextField;\r\n\t\t\/**\r\n\t\t * TextFormat for tf.\r\n\t\t * *\/\r\n\t\tprivate var tfFormat:TextFormat;\r\n\t\t\/**\r\n\t\t * Constructor\r\n\t\t * *\/\r\n\t\tpublic function OutputView()\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: OutputView()&quot;);\r\n\t\t\tsuper();\r\n\t\t\tcreateChildren();\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Parsley calls automatically after context parsing.\r\n\t\t *\/\r\n\t\t&#x5B;Init]\r\n\t\tpublic function parsleyInit():void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: OutputView.parsleyInit()&quot;);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Build the UI for this display object.\r\n\t\t *\/\r\n\t\tpublic function createChildren():void\r\n\t\t{\r\n\t\t\ttrace(&quot;VIEW: OutputView.createChildren()&quot;);\r\n\t\t\t\/\/ TextFormat\r\n\t\t\ttfFormat = new TextFormat();\r\n\t\t\ttfFormat.align = TextAlign.LEFT;\r\n\t\t\ttfFormat.bold = true;\r\n\t\t\ttfFormat.font = &quot;_typewriter&quot;;\r\n\t\t\t\/\/ TextField.\r\n\t\t\ttf = new TextField();\r\n\t\t\ttf.border = true; \r\n\t\t\ttf.multiline = true;\r\n\t\t\ttf.background = true;\r\n\t\t\ttf.width = 600;\r\n\t\t\ttf.height = 400;\r\n\t\t\taddChild(tf);\t\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Parsley event handler. Listening for OnOffEvent all types. \r\n\t\t * Other Parsley managed views can do the same.\r\n\t\t *\/\r\n\t\t&#x5B;MessageHandler]\r\n\t\tpublic function offOnEventHandler(event:OnOffEvent):void\r\n\t\t{\r\n\t\t\taddText(&quot;VIEW: OutputView.offOnEventHandler(...) - event.type: &quot; + event.type);\r\n\t\t} \r\n\t\t\/**\r\n\t\t * Parsley event handler. Listening for OnOffEvent ON type. Shows using a selector.\r\n\t\t * Other Parsley managed views can do the same.\r\n\t\t *\/\r\n\t\t&#x5B;MessageHandler(selector=&quot;event.OnOffEvent.OFF&quot;)]\r\n\t\tpublic function offEventHandler(event:OnOffEvent):void\r\n\t\t{\r\n\t\t\taddText(&quot;VIEW: OutputView.offEventHandler(...)&quot;);\r\n\t\t} \r\n\t\t\/**\r\n\t\t * Parsley event handler. Listening for OnOffEvent all types. Shows using a selector.\r\n\t\t * Other Parsley managed views can do the same.\r\n\t\t *\/\r\n\t\t&#x5B;MessageHandler(selector=&quot;event.OnOffEvent.ON&quot;)]\r\n\t\tpublic function onEventHandler(event:OnOffEvent):void\r\n\t\t{\r\n\t\t\taddText(&quot;VIEW: OutputView.onEventHandler(...)&quot;);\r\n\t\t} \r\n\t\t\/**\r\n\t\t * Appends to tf and adds to Flash trace output.\r\n\t\t * @param message Text to append\r\n\t\t * *\/\r\n\t\tprivate function addText(message:String):void\r\n\t\t{\r\n\t\t\ttrace(message);\r\n\t\t\ttf.appendText(message + &quot;\\n&quot;);\r\n\t\t\ttf.setTextFormat(tfFormat);\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p>[ad name=&#8221;Google Adsense&#8221;]<br \/>\n<strong>The OnOffEvent &#8211; OnOffEvent.as<\/strong><br \/>\nThis is a typical Actionscript custom event class. The clone method is optional for Parsley messaging. However you might need to use the event for both Parsley and Flash messaging so it is no bother to include it for consistency.<\/p>\n<p>Lines 9 and 10 show the event types. The string descriptors are used as selectors in two of the [MessageHandler] metatag methods in both the InputView and OutputView. Since these need to be hardwired in the selector for the [MessageHandler] metatag, you must manually manage any changes to the string descriptors throughout the application. An alternative is to create two separate events.<\/p>\n<p>Data can be sent with the event via Parsley in the same way you are accustomed with Actionscript custom events.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage events\r\n{\r\n\timport flash.events.Event;\r\n\t\/**\r\n\t * Event for demonstrating Parsley. Simply reports an on or off state event.\r\n\t * *\/\r\n\tpublic class OnOffEvent extends Event\r\n\t{\r\n\t\tpublic static const ON:String = &quot;event.OnOffEvent.ON&quot;;\r\n\t\tpublic static const OFF:String = &quot;event.OnOffEvent.OFF&quot;;\r\n\t\tpublic function OnOffEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)\r\n\t\t{\r\n\t\t\tsuper(type, bubbles, cancelable);\r\n\t\t\ttrace (&quot;EVENT: OnOffEvent(...) type: &quot; + type);\r\n\t\t}\r\n\t\toverride public function clone():Event\r\n\t\t{\r\n\t\t\treturn new OnOffEvent(type, bubbles, cancelable);\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p><strong>The QuickButton- QuickButton.as<\/strong><br \/>\nThis is just an Actionscript SimpleButton to use for the demo.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage ui.simple\r\n{\r\n\timport flash.display.DisplayObject;\r\n\timport flash.display.Shape;\r\n\timport flash.display.SimpleButton;\r\n\timport flash.events.MouseEvent;\r\n\tpublic class QuickButton extends SimpleButton\r\n\t{\r\n\t\t\/**\r\n\t\t * The up state background color;\r\n\t\t * *\/\r\n\t\tprivate var upColor:uint   = 0xFFCC00;\r\n\t\t\/**\r\n\t\t * The over state background color;\r\n\t\t * *\/\r\n\t\tprivate var overColor:uint = 0xCCFF00;\r\n\t\t\/**\r\n\t\t * The down state background color;\r\n\t\t * *\/\r\n\t\tprivate var downColor:uint = 0x00CCFF;\r\n\t\t\/**\r\n\t\t * Width.\r\n\t\t * *\/\r\n\t\tprivate var buttonWidth:Number;;\r\n\t\t\/**\r\n\t\t * Label.\r\n\t\t * *\/\r\n\t\tprivate var label:String;\r\n\t\t\/**\r\n\t\t * Constructor.\r\n\t\t * @param label The caption for button.\r\n\t\t * @param buttonWidth Width of the button. Height is 1\/3 of buttonWidth\r\n\t\t * *\/\r\n\t\tpublic function QuickButton(label:String = &quot;Button&quot;, buttonWidth:Number = 80)\r\n\t\t{\r\n\t\t\ttrace(&quot;UI: QuickButton() - label: &quot; + label);\r\n\t\t\tthis.label = label;\r\n\t\t\tthis.buttonWidth = buttonWidth;\r\n\t\t\tdownState      = new QuickButtonDisplayShape(label, downColor, buttonWidth);\r\n\t\t\toverState      = new QuickButtonDisplayShape(label, overColor, buttonWidth);\r\n\t\t\tupState        = new QuickButtonDisplayShape(label, upColor, buttonWidth);\r\n\t\t\thitTestState   = new QuickButtonDisplayShape(label, upColor, buttonWidth);\r\n\t\t\tuseHandCursor  = true;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<p><strong>The QuickButton Skin &#8211; QuickButtonDisplayShape.as<\/strong><br \/>\nHow I skinned the QuickButton.<\/p>\n<pre class=\"brush: as3; title: ; wrap-lines: false; notranslate\" title=\"\">\r\npackage ui.simple\r\n{\r\n\timport flash.display.Sprite;\r\n\timport flash.text.TextField;\r\n\timport flash.text.TextFieldAutoSize;\r\n\timport flash.text.TextFormat;\r\n\timport flashx.textLayout.formats.TextAlign;\r\n\t\/**\r\n\t * Rounded button with text label. Width and height and not margins or padding.\r\n\t * *\/\r\n\tpublic class QuickButtonDisplayShape extends Sprite\r\n\t{\r\n\t\t\/**\r\n\t\t * Background color.\r\n\t\t * *\/\r\n\t\tprivate var bgColor:uint;\r\n\t\t\/**\r\n\t\t * Width.\r\n\t\t * *\/\r\n\t\tprivate var buttonWidth:Number;\r\n\t\t\/**\r\n\t\t * Height.\r\n\t\t * *\/\r\n\t\tprivate var buttonHeight:Number;\r\n\t\t\/**\r\n\t\t * Label TextField component.\r\n\t\t * *\/\r\n\t\tprivate var tf:TextField;\r\n\t\t\/**\r\n\t\t * Left padding for tf inside the button shape.\r\n\t\t * *\/\r\n\t\tprivate const TF_LEFT_PADDING:Number = 6;\r\n\t\t\/**\r\n\t\t * Right padding for tf inside the button shape.\r\n\t\t * *\/\r\n\t\tprivate const TF_RIGHT_PADDING:Number = 6;\r\n\t\t\/**\r\n\t\t * Ratio of button height to the buttonWidth.\r\n\t\t * *\/\r\n\t\tprivate const BUTTON_HEIGHT_RATIO:Number = 1\/3;\r\n\t\t\/**\r\n\t\t * Constructor.\r\n\t\t * @param label The caption for button.\r\n\t\t * @param bgColor Color for the button background.\r\n\t\t * @param buttonWidth Width of the button. Height is 1\/3 of buttonWidth\r\n\t\t * *\/\r\n\t\tpublic function QuickButtonDisplayShape(label:String,bgColor:Number, buttonWidth:Number)\r\n\t\t{\r\n\t\t\t\/\/ Consume parameters\r\n\t\t\tthis.bgColor = bgColor;\r\n\t\t\tthis.buttonWidth = buttonWidth;\r\n\t\t\tthis.buttonHeight = buttonWidth * BUTTON_HEIGHT_RATIO;\r\n\t\t\t\/\/ Draw button graphics.\r\n\t\t\tdraw();\r\n\t\t\t\/\/ TextField for the button caption.\r\n\t\t\ttf = new TextField();\r\n\t\t\tvar tfFormat:TextFormat = new TextFormat();\r\n\t\t\ttf.text = label;\r\n\t\t\t\/\/ Format for centering.\r\n\t\t\ttfFormat.align = TextAlign.CENTER;\r\n\t\t\ttfFormat.bold = true;\r\n\t\t\ttfFormat.font = &quot;_sans&quot;;\r\n\t\t\t\/\/tf.border = true; \/\/ Design guide for layout.\r\n\t\t\ttf.setTextFormat(tfFormat);\r\n\t\t\t\/\/ Position and size the caption.\r\n\t\t\ttf.x = TF_LEFT_PADDING;\r\n\t\t\ttf.width = buttonWidth - (TF_LEFT_PADDING + TF_RIGHT_PADDING);\r\n\t\t\ttf.height = tf.textHeight + 2;\r\n\t\t\ttf.y = Math.max(0, ( buttonHeight - (tf.textHeight + 4)) \/ 2);\r\n\t\t\t\/\/ Add caption.\r\n\t\t\taddChild(tf);\r\n\t\t}\r\n\t\t\/**\r\n\t\t * Draw graphics.\r\n\t\t * *\/\r\n\t\tprivate function draw():void \r\n\t\t{\r\n\t\t\tgraphics.beginFill(bgColor);\r\n\t\t\tgraphics.drawRoundRect(0, 0, buttonWidth, buttonHeight, 20, 20);\r\n\t\t\tgraphics.endFill();\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#appId=105467682877384&amp;xfbml=1\"><\/script><fb:like href=\"https:\/\/www.lonhosford.com\/lonblog\/2011\/01\/26\/parsley-hello-world-for-a-flash-builder-actionscript-project\/\" send=\"true\" width=\"450\" show_faces=\"true\" font=\"\"><\/fb:like><\/p>\n<div id=\"fb-root\"><\/div>\n<p><script src=\"https:\/\/connect.facebook.net\/en_US\/all.js#xfbml=1\"><\/script><fb:comments href=\"https:\/\/www.lonhosford.com\/lonblog\/2011\/01\/26\/parsley-hello-world-for-a-flash-builder-actionscript-project\/\" num_posts=\"2\" width=\"500\"><\/fb:comments><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I had reasonable success using the SpiceFactory Parsley framework for Flex and AIR projects. I posted a basic Flex Example in this blog. I also wanted to use it for Actionscript projects in Flash Builder. This is as minimalist example as I could make. It shows how to configure the Actionscript project for Parsley, how [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[19,55,42],"class_list":["post-1246","post","type-post","status-publish","format-standard","hentry","category-general","tag-actionscript","tag-parsley","tag-textfield"],"_links":{"self":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/comments?post=1246"}],"version-history":[{"count":32,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1246\/revisions"}],"predecessor-version":[{"id":3690,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/posts\/1246\/revisions\/3690"}],"wp:attachment":[{"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/media?parent=1246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/categories?post=1246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lonhosford.com\/lonblog\/wp-json\/wp\/v2\/tags?post=1246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}