Multilingual Support for Flex

Some Cowboy coding techniques for supporting multilingual flex interfaces:
Instead of the usual form (from an Adobe development center post):
...text="{resourceManager.getString('resources', 'POSTDISPLAY_POST_TITLE')}"...
My label looks like:
...text="{gS['POSTDISPLAY_POST_TITLE']}"...
Which is so much shorter and nicer to read when you are coding.

The gS is actually a static object (i.e. hash map) that I load with all the key:value pairs of the language.
Once you declare gS as [Bindable] you can replace the object at runtime with other languages, resulting with the replacement of all the strings in the application.

Note: the compiler issues a warning that since you are using square brackets, the GUI object will not be able to detect changes in the data source. Well, it does.

Independent on Sundays

AAdmin - Flex on Rails Agile Admin Application

The AAdmin is a little project I'm developing on the side, for Valueshine which in essence is a fast Administration Application based on a Ruby on Rails back-end and a Flex Web front-end.

I love fast development mainly because I'm a lazy son of a batch file and for some reason, I feel that Ruby and Rails was made just for people like me.

Having a server side application that 70% of its tasks sum up to persistence functionality just screamed scaffolding to me. the only obvious difference is that for the sake of using a flex client, i would have to skip over the default view machinery, that are generated by the rails scaffold.

Pre Programming:
I've created the alternative controller template so scaffolding command would generate an XML based web service.
to match that I've written an ActionScript client side that talks CRUD on the one side and hands out a set of a-sync methods on the other side.

The application, is based on the two elements described above, let me have a RoR restful web services that would accommodate a rich client.

The server:
I have employed a standard scaffold script generation with a tweak to the controller template. this change bypasses the standard view that is created by Rails to relay on pure XML rendering.
there is one extra controller that is utilized for configuration data purpose. I use it for authentication, and to extract the entities structure xml file.

The Client:
This part is where the quick admin app comes to play. the AAdmin client enables all CRUD functionality on a list of entities, predefined in an entity xml.
the client logs in, extracts the entity xml file, and presents the table structure and functionality according to the definitional in the file.

Screen shoots:

AAdmin Login Screen.

The CRUD Data View

The Create and Edit screen

Resources:

• controller.rb - scaffold template for xml web services
• controller.rb - original template
• ActiveReasourceClient.as - client side adapter

Flex for Rails Scaffolding (cont) - the controller template

I've made a little improvement  to my development process, in such a way that the scaffolding i do for creating the web services I later use for my flex client are generated in their final form without the need to adjust them.
What i did was make some changes to the controller scaffold template.
The controller.rb template file is located at: [Ruby Home]\lib\ruby\gems\1.8\gems\rails-2.3.4\lib\rails_generator\generators\components\scaffold\templates

Backup the original (or pick it up from here).
Download the modified template


The Template should end up looking like:

class <%= controller_class_name %>Controller < ApplicationController
  # GET /<%= table_name %>
  # GET /<%= table_name %>.xml
  def index
    @<%= file_name %> = <%= class_name %>.all
   render :xml => @<%= file_name %>
  end

  # GET /<%= table_name %>/1
  # GET /<%= table_name %>/1.xml
  def show
    @<%= file_name %> = <%= class_name %>.find(params[:id])
    render :xml => @<%= file_name %>
  end

  # GET /<%= table_name %>/new
  # GET /<%= table_name %>/new.xml
  def new
   @<%= file_name %> = <%= class_name %>.new
   render :xml => @<%= file_name %>
  end

  # GET /<%= table_name %>/1/edit
  def edit
    @<%= file_name %> = <%= class_name %>.find(params[:id])
   render :xml => @<%= file_name %>
  end

  # POST /<%= table_name %>
  # POST /<%= table_name %>.xml
  def create
    @<%= file_name %> = <%= class_name %>.new(params[:<%= file_name %>])
    if @<%= file_name %>.save
      render :xml => {:notice => '<%= class_name %> was successfully created.'}
    else
      render :xml => {:notice => @<%= file_name %>.errors}
    end
  end

  # PUT /<%= table_name %>/1
  # PUT /<%= table_name %>/1.xml
  def update
    @<%= file_name %> = <%= class_name %>.find(params[:id])

    if <%= file_name %>.update_attributes(params[:<%= file_name %>])
      render :xml => {:notice => '<%= class_name %> was successfully updated.'}
    else
      render :xml => {:notice => @<%= file_name %>.errors}
    end
  end

  # DELETE /<%= table_name %>/1
  # DELETE /<%= table_name %>/1.xml
  def destroy
    @<%= file_name %> = <%= class_name %>.find(params[:id])
    @<%= file_name %>.destroy

    render :xml => {:notice => '<%= class_name %> was successfully deleted.'}
  end
end

Flex For Rails Scaffold

I’ve written a little component for connecting flex with rails scaffold as close as possible.

Step 1: Create a scaffold for Card

Within your rails application run the script:

./script/generate scaffold card id:integer timeStamp:timestamp data:text

(data types with Ruby and mySQL)


Step 2: Change the Card controller


Edit the Card Controller found at: myApp/app/controllers/cards_controller.rb and remove all view elements. this will make the controller omit pure XML structures


should result with the controller looking like:


class CardsController < ApplicationController
  # GET /cards
  # GET /cards.xml
  def index
    @cards = Card.all
    render :xml => @cards
  end

  # GET /cards/1
  # GET /cards/1.xml
  def show
    @card = Card.find(params[:id])
    render :xml => @card
  end


  # GET /cards/new
  # GET /cards/new.xml
  def new
    @card = Card.new
    render :xml => @card
  end


  # GET /cards/1/edit
  def edit
    @card = Card.find(params[:id])
    render :xml => @card
  end


  # POST /cards
  # POST /cards.xml
  def create
    @card = Card.new(params[:card])
    if @card.save
      render :xml => {:notice => 'Card was successfully updated.'}
    else
      render :xml => {:notice => @card.errors}
    end

  end


  # PUT /cards/1
  # PUT /cards/1.xml
  def update
    @card = Card.find(params[:id])

    if @card.update_attributes(params[:card])
      render :xml => {:notice => 'Card was successfully updated.'}
    else
      render :xml => {:notice => @card.errors}
    end

  end


  # DELETE /cards/1
  # DELETE /cards/1.xml
  def destroy
    @card = Card.find(params[:id])
    @card.destroy
    render :xml => {:notice => 'Card was successfully updated.'}

  end
end


Step 3: Client Side


To connect to the Rails server use an intermediate adapter called ActiveResourceClient.as

For testing, use the ServiceTester.mxml


good luck

Flex AS3 Multi Treading Workaround

Its well known that the current versions of Flex (using either the flash or AIR players) do not provide support for multithreading. Everything you do is loaded on the same main thread that is running the GUI too.

This restriction means that if you have to do a dutiful task, the GUI actually stops responding to the user and  your app may even get the “Not Responding” label in the title bar while its off processing.

The way to bypass this issue is to follow two guidelines

• Break down the big process in to smaller, manageable runs. this means that if you have a loop that each iteration is taxing, you would want to call that loop one iteration at a time.
• Call the single iteration in a way that interlaces with the GUI refresh rate.

Here is a simple GUI component that you may place on your application, to invoke calls on some other process without hampering the responsiveness of the GUI.

The method you call by this component has to be in the nature of:

public function runFunction(data:Object):Boolean

Download zip file for AsyncThreadComponent

Usage:
Paste this on your app:

<view:AsyncThreadComponent id="asyncThread" />

When you want something to be invoked, create an object and pass the method:

asyncThread.exec(theObject.runFunction,theObject);

Independent on Sundays

The TimeLabel component

The time label component is something I slapped together to show accumulated time. Its an enhanced ActionScript3 Label with a simple API for making it tick.

Input a numeric value of time in milliseconds, and the TimeLabel will display it grouped nicely in days, hours minutes and seconds.

Invoke the time label’s start/stop to make it count seconds in any direction you like.

This is the image of the TimeLabel, I surrounded with the controls that operate its API.

The API is as following:

Set and retrieve the numeric value representing time in milliseconds (note; there is no numeric validation, so its up to you):

• function set data(value:Object):void
• function get data():Object

Start and stop the timer:

• function start():void
• function stop():void

Determine if the timer goes up or down:

• function increment():void
• function decrement():void

download source code

Suppress mouse events on child components - Flex3

A college of mine showed me that in order to suppress mouse events on children components is by the obscure property of mouseChildren = false;

I use it when i want to catch a mouse event on a container, regardless of the component within that container that was exactly under the mouse.

There is no way under the heavens to guess this is the functionality of a property with such a name.

Thanks Liran.

Factory Implementation in Flex AS3

The closest thing i could find for implementing a simple factory in Flex is by using the getDefinitionByName function.

Usage:

import flash.utils.getDefinitionByName;
private static const basePath:String = "..path to implementation..";
private var a:SomeClassImp;
private var b:OtherClassImp;
public static function getRendrer(className:String):Object{
var classFullName:String = basePath+ className;
var objClass:Class = getDefinitionByName( classFullName ) as Class;
return new objClass();
}

Note: The classes that the factory is suppose to generate in run time have to be explicitly stated as var’s in the factory class. this is for the compiler to know to add them into the compilation product.

Flex Right to Left – for the Hebrew man

here is some cowboy programming for handling the text direction in flex. i found that the simplest way is to extend the text UI component (i.e. mx:TextArea or mx:TextInput) with my own class with some instrumentation.

amazingly enough, selecting the right font family is all it takes to have the UI component type the correct order in words. the font i used was Ariel.


this.setStyle("textAlign","right");
this.setStyle("fontFamily","Arial");


it gets a little bit trickier when setting or retrieving the text from the component, so I've added a set and get methods, that crudely check for the first character. if its Hebrew, i flip the order of words.

the setter and getter look like this:


public function getText():String{
return LanguageUtil.getLocalazedText(this.text);
}

public function setText(s:String):void{
this.text = LanguageUtil.getLocalazedText(s);
}


the language utility I'm using is actually the following method:


public static function getLocalazedText(message:String) :String {
var c:int = message.charCodeAt(0);
if(c>1487 && c<1515){
var resArray:Array = message.split(" ");
var resLine:String = "";
for(var i:int = resArray.length; i>0; i--){
if(i != resArray.length){
resLine += " ";
}
resLine += resArray[i-1].toString();
}
return resLine
}else{
return message;
}
}


i haven't tested this on Mac yet. but for windows it seems to be ok.

hee haw

Is it a bug? Is it a plane? no.. its...

last night i found a very interesting bug while running the debugger in the flex builder (version 3)

I tries to compare an XML typed object to an empty string, don't ask me why.

the debugger was watching the expression (dataSource=="").
i then noticed that when the variable dataSource was not null, and actually contained a valid XML object; the debugger was evaluating a false result in the watcher while in the code, the result was opposite.

i caught a screen shot of this anomaly: