Adventures of a Flex developer

Posters for a good cause!

Tuesday, 25 May 2010 by jonnysparkplugs

One of my friends is trying to raise money to allow him to climb mount Kilimanjaro, it’s a for Macmillan Cancer Support which is great charity, you can donate money here: http://www.justgiving.com/cobleydoeskili

These are the two posters which I created (click for full size)

Filed under having 0 comments

Creating custom components library (swc)

Sunday, 7 March 2010 by jonnysparkplugs

So you have created your custom components and you want to use them in multiply projects, you could add the source to every project, or you could create a swc. A swc is a compiled collection of classes.
Click to view the previous example with the custom component compiled into a swc.

Example
Source

You can easily create a swc from within Adobe Flex builder; simply create a new Flex library project. The example used above to build the swc can be found here.

Source

Filed under having 0 comments

Custom components with CSS attributes

Sunday, 28 February 2010 by jonnysparkplugs

Ever wondered how to add CSS attributes on to your own custom components, this can be useful if you have a large range of generic components used in different projects as you can take advantage of skinning your applications using CSS.

The example below is a simple component that highlights the border colour of a textinput control. If the set text has been changed, the border colour will change colour. This component would be useful for form editing.

 package indecentmonkey.controls  
 {  
   import flash.events.Event;  
   import mx.controls.TextInput;  
   import mx.styles.CSSStyleDeclaration;  
   import mx.styles.StyleManager;  
   /**  
    * Colour of the outline of changed text  
    *   
    * @default 0x03ce02  
    */  
   [Style(name="itemConfigChanged", type="uint", format="Color", inherit="no")]  
   /**  
    * Colour of the outline of unchanged text  
    *   
    * @default 0xb7babc  
    */  
   [Style(name="itemConfigDefault", type="uint", format="Color", inherit="no")]   
   public class TextInputColour extends TextInput  
   {  
     public function TextInputColour() {  
       addEventListener(Event.CHANGE,handleColour);  
     }  
     /**  
      * @private  
      *   
      * We initialize the default styles for outline and fill styles by calling  
      * initStyles() when the component is instantiated.  
      */  
     private static var stylesInitialised:Boolean = initStyles();  
     /**  
      * @private  
      *   
      * The default styes are defined here.  
      */  
     private static function initStyles():Boolean {  
       var sd:CSSStyleDeclaration = StyleManager.getStyleDeclaration("TextInputColour");  
       if (!sd) {  
         sd = new CSSStyleDeclaration();  
         StyleManager.setStyleDeclaration("TextInputColour", sd, false);  
       }  
       sd.defaultFactory = function():void {  
         this.itemConfigChanged = 0x03ce02;  
         this.itemConfigDefault = 0xb7babc;  
       }  
       return true;  
     }  
     /**   
      * string to hold set text  
      */   
     private var _setText:String = "";  
     /**  
      * Handles initialization of this component.  
     */  
     override public function initialize():void {  
       super.initialize();  
     }  
     override public function set text(value:String):void {  
       super.text = value;  
       _setText = value;  
       handleColour(new Event(Event.CHANGE));  
     }  
     private function handleColour(e:Event):void {  
       if ( _setText == text ) {  
         setStyle("borderColor",getStyle("itemConfigDefault"));  
       }  
       else {  
         setStyle("borderColor",getStyle("itemConfigChanged"));  
       }        
     }  
   }  
 }

example
viewsource

Filed under having 0 comments

Logging panel

Thursday, 18 February 2010 by jonnysparkplugs

If you haven’t been using logging in your flex application, you have been missing out on a very useful debug tool. By logging I do not mean the trace command which will output the trace window in Flex builder. I mean the Flex3 Logging API.

The logging API is based on the java API which was introduced in JDK 1.4. For more info on using logging see the API, also the Wrox book “Professional Adobe Flex 3” has a very useful chapter on logging.

I have created the logging panel which displays the log messages created in a handy TitleWindow, the title window simply displays the log messages. This is done by overriding the mx_internal function internalLog and redirecting the output.

 package indecentmonkey.logging  
 {  
      import mx.controls.TextArea;  
      import mx.core.mx_internal;  
      import mx.logging.targets.LineFormattedTarget;  
      use namespace mx_internal;  
      public class LogPanelTarget extends LineFormattedTarget {  
           private var _loggingTA:TextArea;  
           public function LogPanelTarget(console:TextArea) {  
       super();  
       this._loggingTA = console;  
           }  
           override mx_internal function internalLog(message:String):void {  
       this._loggingTA.text += message + "\n";  
           }  
   }  
 }