Werth.

Flex fires unexpected errors during compiling, if we use in german so called “Umlaute” in the code- or targeting UTF-8 encoding. Unfortunately the UTF-8 XML-tag at the head of any Flex code ducument is not enough to reach the “freedom of UTF-8″. The document itself has to be saved UTF-8 encoded. This could be done by using an editor like Notepad++ or any other program containing save options like “save as UTF-8″.

stevie AIR 1.5, Action Script 3, Flex 3

Flex states are wonderful. What if we need substates?
A closer look to the lifedocs shows us an attribute which is providing this. The so called “basedOn-attribute”.

The mx:State tag has the following attributes:

  mx:State
  Properties
  basedOn="null"
  name="null"
  overrides="null"

stevie Flex 3

To use multiple styles, themes, skins from within flex we need to compile corresponding layout data to a sfw-file. Some examples bellow.

Compile a simple css file on windows to use it as switchable style (style.swf):

C:\FLEX\flex_sdk_3\bin\mxmlc C:\AIRSDK\pslrss\css\style.css

Compile a theme/skin from fillcolors.com on windows:

C:\FLEX\flex_sdk_3\bin\mxmlc

-include-libraries=
C:\AIRSDK\pslrss\themes\rainbow\CSSPlus.swc,
C:\AIRSDK\pslrss\themes\rainbow\Mate3.swc

C:\AIRSDK\pslrss\themes\rainbow\Rainbow.css

stevie AIR 1.5, Flex 3 Flex Skin Switch, Flex Template Chooser, loadStyleDeclarations, Theme, Themes

Wrapping Text in Flex is sometimes difficult.
To eleminate white space use the attribute:

condenseWhite=”true”

…For example this could be done by using a Textarea:

mx:String id=”myTextVar” source=”./myText.html”
mx:TextArea id=”textArea”
htmlText=”{myTextVar}”
condenseWhite=”true”
width=”100%”
height=”150″
editable=”false”

stevie Flex 3

Default rounded corners do not work on Textinputs (textInputs) but a textinput can have rounded corners try this:

mx:TextInput cornerRadius=”10″ borderStyle=”solid”

Without the borderStyle set to solid it doesn’t work. This might work on different other components like boxes etc. too.

stevie Flex 3

Have you ever tried to implement a theme chooser in Flex?
We know we have to compile the CSS files for a skin to a SWF to make this happen. But unfortunately the adobe livedocs dont tell something about the nessesarry unloadStyleDeclarations method:

StyleManager.unloadStyleDeclarations(oldStyleFile);

…which will prevent us from some random mysteriouse behavior ;-).
Here comes a complete AS 3 example for Flex:

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

	
    
< ![CDATA[

    import mx.styles.StyleManager;

    [Bindable]
    private var themes: Array = [
        {label:"Smoke", data:"themes/Smoke/Smoke.swf"},
        {label:"Institutional", data:"themes/Institutional/Institutional.swf"},
        {label:"AeonGraphical", data:"themes/AeonGraphical/AeonGraphical.swf"},
        {label:"Shadow", data:"css/shadow.swf"},
        {label:"Default Flex Style", data:"css/style.swf"},
        {label:"Blend", data:"css/blend.swf"},
        {label:"Flex Skins", data:"css/flex_skins.swf"},
        {label:"Ice", data:"themes/Ice/Ice.swf"},
        {label:"Rainbow", data:"themes/rainbow/Rainbow.swf"},
        {label:"Carbon", data:"themes/carbon/carbon.swf"},
        {label:"yflexskin", data:"themes/yflexskin/yflexskin.swf"}

    ];

    private var oldStyleFile:String;

    private function myLoadStyle():void{
        var layout:String=theme.selectedItem.data;
        StyleManager.unloadStyleDeclarations(oldStyleFile);
        StyleManager.loadStyleDeclarations(layout);
        oldStyleFile = layout;
    }

    ]]>
	

	

Notice:

1. To avoid any flicker effects while switching themes, we can use fadeIn/fadeOut-flex-effects during style changes.

2. Style-Declarations have to be set equivalent from theme to theme. Otherwise we get some memory effect on forgotten declarations (still present styles after changing).

Exciting FLEX themes/skins can be found here:
http://www.scalenine.com/
http://www.fillcolors.com/
Unfortunately most of them require some modifications for special (or common) purposes ;-).

stevie AIR 1.5, Action Script 3, Flex 3 AIR 1.5, Flex 3, Flex Skin Switch, Flex Template Chooser, loadStyleDeclarations, StyleManager, Theme, Themes

In addition to Christophe Coenraets article “Using the SQLite Database Access API in AIR Part 3″ I made some modifications to enable inline editing and update the grid imidiately after every data change.

import mx.events.DataGridEvent;
private var em:EntityManager = EntityManager.getInstance();

public function saveItem():void
{
    em.save(contact);
    parentApplication.loadContacts();
}

public function saveItemInline(event:DataGridEvent):void
{
    var field:String = event.dataField;
    contact[field] =   event.currentTarget.itemEditorInstance.text;
    em.save(contact);
}

public function deleteItem():void
{
    em.remove(contact);
    parentApplication.loadContacts();
}

public function newItem():void
{
    contact = new Contact();
}

stevie AIR 1.5, Action Script 3, Flex 3 AIR 1.5, EntityManager, Flex 3, Flex ORM, Flex SQLite, newDB, SQLConnection