WS-Blog

Swiz: Cafe Townsend example (incl. FlexUnit tests)

sectore — Sun, 25 Apr 2010 10:56:14 +0000

UPDATE [06/16/10]: Example and its full source has been updated using latest Swiz 1.0 RC 1.

Cafe Townsend is a well known application to demonstrate any MVC framework for using Flex or ActionScript. There are already ports of Cairngorm, Mate, PureMVC, Spring ActionScript, RobotLegs and now Swiz.

In cooperation with “my partner in crime” Sönke Rohde we have built a Swiz port including unit tests. Check out the following example and its source.

Live Example

(To view source code just a right mouse click on it)

Source code

You will find the full source of Swiz’ Cafe Townsend example at GitHub.

Thanks!

Thanks again to Sönke for his great cooperation including all helpful tips! Also big thanks to Swiz team for development such a simple to use framework – keep on rocking

-Jens

Slides und Source vom flexughh-Meeting: “Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen”

sectore — Tue, 06 Apr 2010 20:55:50 +0000

Nochmals vielen Dank, dass Ihr beim heutigen flexughh-Meeting “Wait A Frame! Das Flex 4 Komponenten Model und seinen Life Cycle verstehen.” so zahlreich erschienen seid und auch tapfer bis zum Ende des Vortrages durchgehalten habt Es hat großen Spass gemacht!

Hier die versprochenen Slides inkl. Source Code.

Folien

“Spark Component Model” Beispiel

[kml_flashembed movie="http://www.websector.de/blog/wp-content/uploads/2010/04/06/FxughhSpark.swf" width="500" height="370" bgcolor="#FFFFFF" menu="true" /]

Source

Den Source-Code der Beispiele findet Ihr hier beim flexughh Projekt bei Google Code.

-Jens

Mate: Cafe Townsend example updated for using Flex 4

sectore — Fri, 12 Mar 2010 19:51:53 +0000

For an upcoming Flex 4 training I do need a good example for using Mate framework. At the moment you will find a lot of examples on Mate’s official website or at the project called “mate-examples” at Google Code. But it seems that there is not any Flex 4 example available.

Anyway, I just ported the current Cafe Townsend example (Flex 3) created by Laura Arguello to Flex 4.

It was not a big deal, because Mate supports already Flex 4. Only few changes was necessary for using new Spark components.

Also I did some little modifications in MainEventMap.mxml to start all Inject properties for any views as soon as possible listening to FlexEvent.PREINITIALIZE. Furthermore all presentation models now are not created before its view will be added. But that is what we called “cosmetic” , because Laura has already done an awesome job building the Flex 3 example of Cafe Townsend!

Live example

[Update 03/15/2010] For a better use case of Flex 4 I have refactored the original code of the app. Now it based on a new layout and uses some effects. Last but not least the code implement a LocalEventMap to encapsulate the handling of employes, which is important if you want to use a modular app with Flex-Modules[/Update]

(To view source code just a right mouse click on the app)

[kml_flashembed movie="http://www.websector.de/blog/wp-content/uploads/2010/03/12/CafeTownsend.swf" width="500" height="530" bgcolor="#FFFFFF" menu="true" /]

Source code available

You will find the full source of Mate’s Cafe Townsend Flex 4 example at the project called ‘mate-examples’ on Google Code.

Have fun!

-Jens

Quick Tip (Flex 4): Using asfunction in TLF (Text Layout Framework)

sectore — Thu, 25 Feb 2010 13:40:29 +0000

Do you remember the very old school global function called asfunction? It was used to call custom ActionScript methods clicking an HTML link. The definition in HTML was something like this: < a href='asfunction:myFunction' >my link< /a > .

Since ActionScript 3 asfunction has been deprecated and was replaced with a new event handling using TextEvent.LINK and 'event:myEventType' defined at the HTML link. For example < a href='event:myEventType' >my link< /a > . In this case you have to add just one event listener to handle all(!!) events.

Flex 4 + Text Layout Framework + asfunction?

But what happens if you want to call an ActionScript method clicking an HTML link and using the Text Layout Framework (TLF) in Flex 4?

RichEditableText is the TLF component to embed a clickable HTML text, but it does not support an event handler for a TextEvent.LINK event. Today I ran into this issue and I couldn’t find any solution (either at official Flex doc or not at Google).

Anyway, the solution it is pretty easy. Just define your HTML links as before in Flex 3 and add an event listener for every (!!) event to a TextFlow of a RichEditableText

ASFunctionExample.mxml ( Download code )

xml version="1.0" encoding="utf-8"?>

    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo"
    >
    
        [CDATA[
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.events.FlowElementMouseEvent;
            
            import mx.events.FlexEvent;
 
            /**
             * HTML string
             * Note the anchor using ‘event:myEventType’ to call an ActionScript method
             */
            protected static const HTML: String =   "Hello, here is a link to "
                                                    + "run my custom method"
                                                    + "
";
    
            /**
             * Adding listener to for event:myEventType defined in HTML
             * at a TextFlow of RichEditableText
             * 
             */   
            protected function richtext1_initializeHandler(event:FlexEvent):void
            {
                myText.textFlow.addEventListener( ‘myEventType’, customMethodHandler );
            }
 
            /**
             * Custom event handler for event:customMethod defined in HTML
             * 
             */    
            protected function customMethodHandler( event:FlowElementMouseEvent ):void
            {
                result.text += "run custom method\n";
            }
 
        ]]>
    
    
    
    
        id="myText"
        width="100%"
        selectable="false"
        editable="false"
        initialize="richtext1_initializeHandler(event)"
        textFlow="{ TextConverter.importToFlow( HTML, TextConverter.TEXT_FIELD_HTML_FORMAT ) }"
        />
        
    
        id="result"
        />
 
    

Some notes:

To have an clickable HTML link using RichEditableText, its property selectable and editable has to be ‘false’
Anchors defined in HTML will be a LinkElements at the TLF
All events will be dispatched from this LinkElement as a FlowElementMouseEvent. Its type is a ‘custom’ type and will be the same as defined in HTML.
Any ‘asfunction’ call has to be defined in HTML using ‘event:myEventType’. The LinkElement will check itself if the link includes an url or just an ‘asfunction’ call.
To listen all events you have to add different listeners for each event type to a TextFlow of a RichEditableText.

-Jens

Quick tip (Flex 4): Goodbye templates – hello mxmlContent

sectore — Fri, 02 Oct 2009 11:06:37 +0000

Back in Flex 3

In Flex 3 is it pretty painful to extend a custom container component for adding children to it using MXML. The following example will throw an error like this: Error: Multiple sets of visual children have been specified for this component (base component definition and derived component definition).

MySubContainer.mxml ( Download code )

xml version="1.0" encoding="utf-8"?>

 
    class hierarchy of MySubContainer:
    
    Canvas
        |
        MyContainer
            |
            MySubContainer 
         
–>

    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:local="*"
    >   
    
        text="subContainer"
        />

To avoid this issue in Flex 3 there are already some workarounds using template components. For more information check the following posts:

Peter Ent: Template in Flex
Tony Fendall: Adding ‘Multiple sets of visual children’ to custom components
Dirk Eismann: A simple(r) workaround for the ‘Multiple sets of visual children’ runtime error

Today in Flex 4

Now in Flex 4 this issue has been fixed. There is no need for using custom template component if you extend Sparks Group or SkinnableContainer in multiple levels. That means there is no error using:

MySubContainer.mxml ( Download code )

xml version="1.0" encoding="utf-8"?>

    class hierarchy of MySubContainer:
 
    Group
        |
        MyContainer
            |
            MySubContainer 
 
–>

    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" 
    xmlns:local="*"
    >   
    
        text="subContainer"
        />
    

Behind the scenes: Every Spark Group or SkinnableContainer has a property called mxmlContent, which handles internal all the needed stuff for organizing children defined by MXML. Furthermore all container classes has defined a metatag declaration named DefaultProperty

Group: [DefaultProperty("mxmlContent")] )
SkinnableContainer: [DefaultProperty("mxmlContentFactory")]

which causes the compiler to add all (top) children defined within MXML as an array to the setter method mxmlConent or mxmlContentFactory.

Important note: If you have already defined children within the super class, these will be removed by the subclass by default. To avoid this, you have to override the setter method mxmlContent of the subclass or build your own custom template component.

Happy Flex 4 coding

-Jens

Custom ApplicationUpdaterUI for using AIR Update Framework in Flex 4

sectore — Wed, 09 Sep 2009 17:25:54 +0000

Flex 4 is Rock ‘n’ Roll! However, Flex 4 is still beta and it can’t be perfect right now. Today one of the most missing feature for me is using the ApplicationUpdaterUI of the Adobe AIR Update Framework in Flex 4. This bug is already documented. (BTW: Please vote here to fix this issue! )

Anyway, I can’t wait for the final release of Flex 4, so I decided to build a custom ApplicationUpdaterUI component based on the new Spark skinning architecture. The custom ApplicationUpdaterUI is built on the top of the current version of Adobes AIR Update Framework and most of the current features are available (e.g. auto check, localization etc.) The component is full skinnable using it as an external window (as before) or as an embedded view component in an application (without the need of a popup window).

Usage

Usage of ApplicationUpdaterUI ( Download code )

 
 
//
// [1] Using ApplicationUpdaterUI as a popup window using ActionScript
var updater: ApplicationUpdaterUI = new ApplicationUpdaterUI(   new File ( ‘pathToYourUpdaterXML’ ), true, true );
// Optional: setting skin
updater.setStyle(‘skinClass’, de.websector.utils.updater.ui.skins.silver.AppUpdaterUISilverSkin);   
// Optional:  change the height and width of the window
updater.windowHeight = 300;    
updater.windowWidth = 500;        
// check for updates
updater.checkNow();
 
 
//
// [2] Using ApplicationUpdaterUI as an embedded view within your application
// Important: Avoid using popup window: useWindow=false (default is true)
// Optional: setting skin class via "skinClass"
// Optional: If the view should be visible only if an update available set invisibleCheck="true" (default is false)

    xmlns:ws="http://websector.de"
    id="updater"
    width="100%" height="50"
    configurationFile="{ new File ( Constants.UPDATE_FILE ) }"
    skinClass="de.websector.utils.updater.ui.skins.firefox.AppUpdaterUIFirefoxSkin"
    invisibleCheck="true"
    useWindow="false"
    />

Skin examples

It’s pretty easy to create your own skin and add it to the component! Check out the 3 different skins and feel free to use these as an example for your custom skins.

AppUpdaterUIStandardSkin: Cloned interface of the Flex 3 based ApplicationUpdaterUI
AppUpdaterUISilverSkin: Inspired from Adobes shiny XD components
AppUpdaterUIFirefoxSkin: That’s my favorite . Do you know the status bar on the top of a HTML page in Firefox 3.0 if a popup is trying to open? This skin a clone of such a bar to inform the user, if an update available. No need for an extra popup window.

[kml_flashembed movie="http://www.websector.de/blog/wp-content/uploads/2009/09/09/FlexUpdaterUIExample.swf" width="500" height="500" bgcolor="#FFFFFF" menu="false" /]

Download full source

Full source is available at GitHub (package: de.websector.utils.updater.ui.*) :
http://github.com/sectore/applicationupdaterui/

All source of ApplicationUpdaterUI is open source licensed under Mozilla Public License 1.1.

Personal TODOs

Documenting / commenting code base
It’s not a “most wanted feature” right now, but handling of an update using files (events: StatusFileUpdateEvent.FILE_UPDATE_STATUS and StatusFileUpdateErrorEvent.FILE_UPDATE_ERROR) would be nice. If I have the time, I’m going to implement it.

Happy updating !

-Jens

Testing states of skin classes in Flex 4 using WSSkinStatesTester

sectore — Sun, 06 Sep 2009 09:59:38 +0000

WSSkinStatesTester is a handy tool to test visually all states of any skin classes in Flex 4 (Gumbo).

Imagine you as a Flex developer or a designer have been created a lot of skins for your application, e.g. using Flash Catalyst. Now you want to check the behavior of these skins changing its states. Therefore you will run your application to change different states of components or you open Flash Catalyst to check all the states of a skin. Or you could use Flash Builders design view for this issue, but unfortunately it is unable to show transitions switching between states.

Anyway, how about switching between skin classes and all its states (incl. transitions) using only one (test-) view?

Live example

(Right mouse click to view source of example)

[kml_flashembed movie="http://www.websector.de/blog/wp-content/uploads/2009/09/06/GumboTestSkinExample.swf" width="500" height="400" bgcolor="#FFFFFF" menu="false" /]

Usage

Two steps only:

Just create an instance of WSSkinStatesTester
And add all skins which have to be checked

Usage code example ( Download code )

 
//
// Step 1
// Create an instance of WSSkinStatesTester using MXML

    xmlns:ws="http://websector.de"
    id="skinTester"
    width="100%" height="100%"
    />
    
//
// Step 2
// Create and add an instance of a skin to WSSkinStatesTester. 
var skin: PanelSkin = new PanelSkin(); 
skin.width = 250;
skin.height =250;
skinTester.addSkin( skin );
 
 
//
// Step 2a  [ ALTERNATIVE ]
// Alternative you can add an array of skins to WSSkinStatesTester using ActionScript. 
// BTW: This usage is recommend if you want test a bunch of skins and have to set properties before!
var skin0: ButtonSkin = new ButtonSkin();
skin0.width = 150;
skin0.height = 50;
skin0.labelDisplay.text = "ButtonSkin (Spark)";
 
var skin2: ComboBoxSkin = new ComboBoxSkin();
var skin3: MyButtonSkin = new MyButtonSkin();
 
skinTester.skins = [ skin1, skin2, skin3  ];
 
 
//
// Step 2b [ ALTERNATIVE ]
// Or add an array of skins to WSSkinStatesTester using MXML

    xmlns:ws="http://websector.de"
    id="skinTester"
    width="100%" height="100%"
    skins="{ [  
                new CheckBoxSkin(), 
                new VideoPlayerSkin(), 
                new ButtonSkin() 
            ] }"
    />

Full source available

Note: To run all code Flex SDK 4.0.0.9948 or higher is required.

SWC of WSSkinStatesTester and example posted above: GumboTestSkinExample.zip (Downloads: 497)
Full source code of WSSkinStatesTester is hosted at Github: http://github.com/sectore/WSSkinStatesTester/

WSSkinStatesTester is open source licensed under Mozilla Public License 1.1.

Happy skin states testing

-Jens

Quick tip (Flex 4): Using generic skin classes

sectore — Mon, 10 Aug 2009 16:28:58 +0000

For skinning Flex 4 components you have a lot of great options. One way is using a custom skin class, which extends a Skin or a SparkSkin class and defines all needed style properties by itself.

Imagine a custom button skin, which is more complex than the standard Spark ButtonSkin. It declares additional gradients, rectangles, transitions etc. If you code all needed values for any style properties within this skin class, you may have to create another button skin class for using only one or two different style properties. Doing this, the amount of skin classes can be increased rapidly!

A better approach is creating generic skin classes. Such a skin class gets most of its properties from CSS declarations of its host component. So all needed styles can be defined using plain CSS and won’t be hard-coded anymore, even custom style declarations. That’s very simple to do and saves a lot of extra skin classes.

Example

Code is worth a thousand words, so check out the following example. It uses only one generic skin class for all different styled buttons (right mouse click to view source code):

[kml_flashembed movie="http://www.websector.de/blog/wp-content/uploads/2009/08/10/GumboGenericSkinExample.swf" width="500" height="70" bgcolor="#FFFFFF" fversion="10.0.0" menu="false"]

Source code

Check out the source code here.

Helpful links

Flex SDK – Confluence: “Gumbo Skinning (including SkinnableComponent) – Functional and Design Specification“
Adobe Flex 4 Help: “Skinning Spark components – Accessing the host component from inside the skin“
“Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo)” by Andy Hulstkamp

Happy Gumbo skinning

-Jens

Speed up JPEG encoding using Alchemy

sectore — Sun, 21 Jun 2009 15:16:42 +0000

Few weeks ago Thibault Imbert published an optimized version of Adobes JPGEncoder. And it rocks! However, if you may have very big-size bitmaps it takes too much time to encode images. For example: A bitmap with a size of 2000px x 1500px takes 22 sec. (BTW: Adobes version 30 sec.!!)

Today I came across to a post by Manfred Weber, which points to a discussion at Adobes Alchemy forum. There you will find a great solution published by metalbot for encoding JPEGs using Alchemy. It’s based on a C library for JPEG image compression by IJG and it’s pretty fast (2,7 sec. for 2000 px x 1500px ) !!! Check out the example:

Example

Click the image to see the live example. Feel free to post a comment about your your results!

Download Full Source

I have changed the original C code a little bit for manipulating the quality of an encoded image as well. It’s just one line added to “as3_jpeg_wrapper.gg” (line 78) jpeg_set_quality(&cinfo, quality, TRUE /* limit to baseline-JPEG values */); Therefore the “as3_jpeg_wrapper.swc” located within the *.zip is recompiled for using this feature in your Flex project via as3_jpeg_wrapper.write_jpeg_file(baSource, WIDTH, HEIGHT, 3, 2, quality);

Full source of the Flex based example above: AlchemyJPEGEncoderFlexExample.zip (Downloads: 1567)

BTW: You will find the original source of all C based classes published by metalbot here.

Tips

I struggled around to set up Alchemy and to recompile the IJG library and the “as3_jpeg_wrapper.swc”. To avoid this, here are some tips:

Instruction for set up Alchemy by Lee Felarca (zeropointnine). Best instruction I’ve found so far for set up Alchemy.
Recompiling the SWC of metalbot’s source following its “README.txt” and using its “Makefile” failed: To avoid this issue, after compiling the C library of jpegsrc you have to move the following files to $ALCHEMY_HOME/jpeg/ as well: “jconfig.h”, “jmorecfg.h” and “jpeglib.h”. Check out the comment by notnick here

[UPDATE 06/22/09] There is another great test for encoding images using Alchemy by Mateusz Malczak, which includes an asynchrounous example as well: Alchemy – asynchronous jpeg encoding Thanks to xoestudio for pointing to this via twitter! [UPDATE]

Have fun

-Jens

ThunderBolt AS3 version 2.2 out now!

sectore — Sun, 08 Mar 2009 16:33:31 +0000

ThunderBolt AS3, which is a lightweight logger extension for Flex 3-4, AIR and Flash 9-10 applications, has been updated to version 2.2.

Check out the new features:

New features

Logging of package names + class names + code line numbers (Flash Debug Player required).
ThunderBoltTarget for using Flex Logging API improved.
SWC updated for using Flex 4 (Gumbo)
ThunderBolt AS3 Console uses a certificate of Thawte sponsored by Adobe.
ThunderBolt AS3 Console is updated using latest version of Adobe AIR v.1.5.1
Issue 10 fixed: “Command + Q not working in OS X“
All examples and documentation has been updated as well.

Happy Logging

-Jens