Apache flex logo - I like it.

It looks great. X factor is clearly visible. All the best Apache Flex.

Logo contest http://incubator.apache.org/flex/logo-contest.html

Flex Adobe Air SQLite search query syntax

Adobe AIR does not support SQLite FTS.

To search for particular rows using WHERE & LIKE

SELECT * FROM tablename WHERE columnname LIKE :columnname"

:columnname holds the value "%somevalue%

Below are the few syntax for SQLite & Adobe AIR

Table Creation

CREATE TABLE IF NOT EXISTS tablename (id INTEGER PRIMARY KEY AUTOINCREMENT, column1 TEXT NOT NULL, column2 TEXT, column3 TEXT, columndate DATE)

Selecting rows using WHERE

SELECT * FROM tablename WHERE columnname = "somevalue" 

SQLite Date Comparison

SELECT * FROM tablename WHERE date(columndate) = date("somevalue") 

SQLite Multiple WHERE conditions

SELECT * FROM tablename WHERE columnname = "somevalue" AND columnname2 = "somevalue" 

SQLite INSERTing rows

INSERT INTO tablename (column1, column2, column3, column4) VALUES ( "somevalue", "somevalue", "somevalue", "somevalue" ) 

SQLite INSERTing multiple rows at once

INSERT INTO tablename (column1, column2, column3, column4) SELECT 'somevalue', 'somevalue', 'somevalue', 'somevalue' UNION SELECT 'somevalue', 'somevalue', 'somevalue', 'somevalue'

Android form layout components example/sample

Android components in form layout example sample code shown below.

The output looks like in the below image.

main.xml has the following code to show the components in vertical layout. It should look like a form. <?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" 
    android:layout_margin="50sp"> 
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:gravity="center_horizontal" 
        android:text="@string/hello" 
        android:textSize="32sp" /> 

    <!-- Name -->

    <LinearLayout 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:paddingTop="50sp" 
        android:orientation="horizontal" > 
        <TextView 
            android:layout_width="200sp" 
            android:gravity="right" 
            android:layout_height="wrap_content" 
            android:text="@string/pname" 
            android:textSize="32sp" /> 
        <EditText 
            android:id="@+id/nameID" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginLeft="20sp" 
            android:inputType="text" > 
        </EditText> 
    </LinearLayout>

    <!-- Age --> 
    
    <LinearLayout android:layout_marginTop="50sp" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" > 
        <TextView 
            android:layout_height="wrap_content" 
            android:layout_width="200sp" 
            android:gravity="right" 
            android:text="@string/page" 
            android:textSize="32sp" /> 
        <EditText 
            android:id="@+id/ageID" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content" 
            android:layout_marginLeft="20sp" 
            android:inputType="text" /> 
    </LinearLayout> 
    
    <!-- Sex --> 
    
    <LinearLayout android:layout_marginTop="50sp" android:layout_gravity="center_vertical"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal" > 
        <TextView 
            android:layout_height="wrap_content" 
            android:layout_width="200sp" 
            android:gravity="right" 
            android:text="@string/psex" 
            android:textSize="32sp" /> 
        <RadioGroup android:orientation="horizontal" 
            android:layout_marginLeft="20sp" 
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"> 
            <RadioButton 
                android:textSize="24sp" 
                android:text="@string/pmale"/> 
             <RadioButton android:layout_marginLeft="20sp" 
                 android:textSize="24sp" 
                android:text="@string/pfmale"/> 
        </RadioGroup> 
    </LinearLayout>
</LinearLayout>

Android Failed to allocate memory: 8 error

When you try to run your app on android emulator, you might get the following error.

Failed to allocate memory: 8 This application has requested the Runtime to terminate it in an unusual way. Please contact the application's support team for more information.

The emulator does not start. This is due to the RAM issue.

If you set the RAM to 1024, somehow it does not work. It should be less than that.

You could try by setting it to 512MB. I have tried with the following values & works well. 648, 756, 820MB.

Flex TextArea auto height re-sizable component

Flex TextArea custom component which has auto height feature based on the content height.

It extends the TextArea component & updates the height based on the scroller content height.

package utils
{
   import spark.components.TextArea;
   public class TextAreaAutoHeight extends TextArea
   {
      public function TextAreaAutoHeight()
      {
          super();
      }

      override protected function updateDisplayList(unscaledWidth:Number,     unscaledHeight:Number):void
      {
          super.updateDisplayList( unscaledWidth, unscaledHeight );

          this.height = scroller.viewport.contentHeight + 2 ;

           if( this.height < minHeight )
               this.height = minHeight;

           if( this.height > maxHeight )
               this.height = maxHeight;
       }
    }
}


Screenshot:

Flex mobile shared object data storage

If you are developing a mobile application & you might want to store the data globally so that you can access from the different views.

Using PersistenceManager we can achieve this. We can use the PersistenceManager which stores the data by using key value.

var persistenceManager:PersistenceManager = new PersistenceManager();
persistenceManager.setProperty("dataURL","http://google.com");
persistenceManager.getProperty("dataURL");


Spark multi column form control

Using nested FormItem we can achieve multi column form control in flex spark form component.

The above figure shows the multi column spark form.

Attached the code below.

Robotlegs - Accessing a view's objects from another view

 We can not directly access a view's object from another view mediator.

To achieve this, we need to dispatch the events & then access the view's objects from another view.

You can not inject a view object in another view mediator & access.

Sample:

I have a MainView which has viewstack consisting of 3 childs (1.UserScreen 2.ProjectsScreen 3.ConfigScreen)

Now i am in ProjectsScreen & on click of a button, want to display the UserScreen by changing the viewstack index on MainView.

In ProjectsScreenMediator you can inject MainScreen view & then change the ViewStack selectedIndex.

Robotlegs sample flex project with source code

This project gives the basic idea on robotlegs framework for flex applications.

Application execution steps:

1. It sets the flashvars object to a model object. (contextView stage parameters)

2. It fetches the user details from the server & stores it. (Using services)

3. On click of a button, it fetches the project xml data & displays it on a datagrid.

Sample screenshot of the application is attached.

Flex 4.5 project code attached. Am using the library & main application. Import the library & main app, start running. You will see the result in action.

I am sure that there would be much better ways to do the things, so comments are always welcome on optimizations/suggestions/questions.

Robotlegs !! Flex framework

Cairngorm 2, Its been 2 years & the framework journey with Cairngorm 2 was good till now. Now, as we all know, more frameworks are emerging with more features, we need to adopt to one good framework though.

This time i chose ROBOTLEGS. Here, the name itself is special :) - I like it.

I recommend to refer the below diagram before starting with your code.

Source: http://www.robotlegs.org/diagram/

It has good & active discussion forum to answer all your questions at free of cost. :)

So.. start debugging Robotlegs. Happy journey...

Flex Dock Menu: Custom icon navigation like Apple Dock Menu

Developed a simple Mac dock kind of navigation in flex.

It has two components, Main application & dock container component.

Hope you like it & love to get your comments :)

Main application code:

Now I am Adobe Certified Expert

Yes, now I am Adobe Certified Expert in Adobe Flex 3 with AIR (9A0-082).

Blackberry Playbook simulator installation by VMWare errors

I tried to install playbook simulator through VMWare player, but could not succeed.

I am getting the below error.

Any thoughts ?

Flex text mouse over tooltip dynamic for a part of text

Well, i had to develop custom functionality which has to give the mouse over tooltip on a part of text in a text field dynamically.

Could not find direct solution for this, but after my research got the solution.

Main application code:

Hide/Show the flex elements by id in action script 3

Hide/Show any flex element by ID in action script. Toggle any element in flex.

The below example gives the toggle of HBox on click of the label.

Here is the code to achieve the toggle functionality of any flex element in actionscript 3.

Have added the comments in the code to explain use of each element.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
//Add event listner to any element in flex to call the below function to hide/show the HBox by id

//Say on click of the lable call the handlerFunction.
public function handlerFunction(event:Event):void {
//get the id of the element by getting the data of the calling element event
var id:String = event.currentTarget.data.toString();
//get the handle of parent element. i.e. VBox in the below code
var parentVBox:VBox = event.currentTarget.parent as VBox;
//get the handle to the element by id
var hBoxtoShow:HBox = parentVBox.getChildByName(id) as HBox;
//code to toggle the HBox (hide/show)
if (hBoxtoShow.includeInLayout) {
hBoxtoShow.includeInLayout = false;
hBoxtoShow.visible = false;
} else {
hBoxtoShow.includeInLayout = true;
hBoxtoShow.visible = true;
}
}

public function init():void {
//add HBox id to the lable data. This is used for dynamic hide/show of multiple elements
labelID.data = "hideHBox";
labelID.addEventListener(MouseEvent.CLICK , handlerFunction);
}
]]>
</mx:Script>
<mx:VBox id="mainVBox">

<mx:Label text="Click me" id="labelID"/>
<mx:HBox id="hideHBox">
<mx:Text text="Sample HBox filed to hide this on click of the label"/>
</mx:HBox>

</mx:VBox>
</mx:Application>


Google Motion Chart using XML datasource

Hide/Show any flex element by ID in action script. Toggle any element in flex.

The below example gives the toggle of HBox on click of the label.

Here is the code to achieve the toggle functionality of any flex element in actionscript 3.

Have added the comments in the code to explain use of each element.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
//Add event listner to any element in flex to call the below function to hide/show the HBox by id

//Say on click of the lable call the handlerFunction.
public function handlerFunction(event:Event):void {
//get the id of the element by getting the data of the calling element event
var id:String = event.currentTarget.data.toString();
//get the handle of parent element. i.e. VBox in the below code
var parentVBox:VBox = event.currentTarget.parent as VBox;
//get the handle to the element by id
var hBoxtoShow:HBox = parentVBox.getChildByName(id) as HBox;
//code to toggle the HBox (hide/show)
if (hBoxtoShow.includeInLayout) {
hBoxtoShow.includeInLayout = false;
hBoxtoShow.visible = false;
} else {
hBoxtoShow.includeInLayout = true;
hBoxtoShow.visible = true;
}
}

public function init():void {
//add HBox id to the lable data. This is used for dynamic hide/show of multiple elements
labelID.data = "hideHBox";
labelID.addEventListener(MouseEvent.CLICK , handlerFunction);
}
]]>
</mx:Script>
<mx:VBox id="mainVBox">

<mx:Label text="Click me" id="labelID"/>
<mx:HBox id="hideHBox">
<mx:Text text="Sample HBox filed to hide this on click of the label"/>
</mx:HBox>

</mx:VBox>
</mx:Application>


Flex progress bar while loading the xml data using URLLoader

Show progress bar in flex while loading the xml data using URLLoader class.

For progress bar display, have a separate MXML component called LoadingBar

MXML Main Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:net="flash.net.*" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[

import mx.managers.PopUpManager;
import mx.containers.TitleWindow;
import flash.geom.Point;
import mx.containers.HBox;
import mx.controls.Spacer;
import mx.containers.*;
import mx.controls.*;
public var loadingBar:LoadingBar;

public function init():void{
loadingBar=LoadingBar(PopUpManager.createPopUp( this, LoadingBar , true));
loadingBar.progressBar.source = urlLoader;
PopUpManager.centerPopUp(loadingBar);
urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

urlLoader.load(new URLRequest("http://localhostdatasource"));
}

private function xmlLoaded(event:Event):void {

PopUpManager.removePopUp(loadingBar);

}
]]>
</mx:Script>

<net:URLLoader id="urlLoader" />

</mx:Application>

MXML Loading Bar component code

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

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Progress"
width="300" height="100" borderThicknessLeft="1" styleName="loadingStyle"
borderThicknessRight="1" borderThicknessBottom="1" borderThicknessTop="1" >

<mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<mx:ProgressBar id="progressBar" label="Loading Data..." mode="event" labelPlacement="center" />
</mx:VBox>

</mx:TitleWindow>

The Flex Project looks like below image.

Flex & ActionScript 3 tips useful for code optimization & performance

There are many useful tips to optimize the flex & actionscript code.

The below site gives some of the tips to optimize flex code while developing.

ActionScript 3.0 and Flex optimization techniques and practices

Gauge in flex open source code by brightpointinc

I need to develop a dashboard application with the column/bar charts and Gauges.

I searched in google for Gauge chart, i could find Gauge charts by IBM Ilog Elixir which is licensed version.

I continued my searching for a free Gauge chart and at last i found Gauge chart by Brightpointinc which is an open source.

Its very easy to use and easily customizable.

You can find the sample and source code here -- http://www.brightpointinc.com/flexdemos/gauge_v04/gauge_v04.html

Wedget Stack Graph in Flex by AXIIS Open Source

http://www.axiis.org/

Wedge Stack Graph is a fantastic chart that can be easily customizable and its free.

Link to download the source code -- http://www.axiis.org/examples/WedgeStackChartExample.html