Charts for Mobiles

Its a great feature that Adobe has given support for Flex charts on mobiles

All the MX charting components can be used in mobile development. Just need to make sure that you don’t use too much of animations in your project.

Best practice to have good performance is not to use animations.

All the best for your Mobile Projects…
Have a nice Dev Time

Layout Types Available in Flex 4.5 for mobile Development

Here is the list of Layout types available for the layout development

DataGroup
Group
HGroup
Scroller (supports touch scrolling, includes scroll indicator)
Spacer
TileGroup
VGroup

SQL Database Connection with Flex Air

Just create simple air application in Flex.
Using the below code you can able to connect to database.

<?xml version=“1.0″ encoding=“utf-8″?>
<mx:WindowedApplication xmlns:mx=“http://www.adobe.com/2006/mxml”
layout=“absolute” creationComplete=“init()”>
<mx:Script>
<![CDATA[
import mx.controls.Alert;

private var dbConn:SQLConnection;
private var dbFile:File;

private function init():void
{
	dbFile = File.applicationStorageDirectory.resolvePath("flashallys.db");

	dbConn = new SQLConnection();

try
{
	dbConn.open(dbFile, SQLMode.CREATE);
}
catch(e:SQLError)
{
	Alert.show("SQL Error Occured: ", e.message);
}
}
]]>
</mx:Script>
</mx:WindowedApplication>

Here goes the explanation

These two lines are mandatory to declare the SQL connection and to declare db file.

private var dbConn:SQLConnection;
private var dbFile:File;

We apply init funtion for this to dish out the file storage and to establish SQL connection.
private function init():void
{
dbFile = File.applicationStorageDirectory.resolvePath(“flashallys.db”);

dbConn = new SQLConnection();

This part of the code figures out if the output is productive and connects to the database.
try
{
dbConn.open(dbFile, SQLMode.CREATE);
}

Or else,this turns out to display the occurence of an error.
catch(e:SQLError)
{
Alert.show(“SQL Error Occured: “, e.message);
}
}

CS4, CS3 caretIndex Word

The code also works with flash cs3


import fl.controls.TextInput;
import fl.controls.Label;

var myLabel:Label = new Label();
myLabel.text = "Caret Index Word";
myLabel.x = 5;
myLabel.y = 0;
addChild(myLabel);

var textInput:TextInput = new TextInput();
textInput.x = 100;
textInput.y = 10;
addChild(textInput);

var t:Timer = new Timer(100);
t.addEventListener(TimerEvent.TIMER, caretindex);

function caretindex(e:TimerEvent):void {
	var caretIndex:Number = textfield.getCharIndexAtPoint(textfield.mouseX, textfield.mouseY)
	if(caretIndex == -1) {
		return;
	}
	var str:String = textfield.text;
	var words:Array = str.split(' ');
	var n:Number = 0;
	while(n<=words.length){
		var subset:Array = words.slice(0, n);
		var sliceString:String = subset.join(' ');
		if(sliceString.length>caretIndex) {
			textInput.text = String(subset[n-1]);
			break
		}
		n++;
	}
}
t.start();

This movie requires Flash Player 9

using backgroundFill in BorderContainer

Simple example which shows how to use backgroundFill with BorderContainer


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <s:BorderContainer cornerRadius="10" width="100%" height="100%">
        <s:backgroundFill>
            <s:SolidColor
                color="0xFF00FF"  alpha="1"/>
        </s:backgroundFill>

        <s:Label text="sample text" />

    </s:BorderContainer> 

</s:Application>

using spark List with ArrayCollection


xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">


India
Russia
Srilanka
Canada
Spain
Italy


using LinearGradient in spark flex


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   width="200" height="200"
			   left="20" right="20"
			   top="20" bottom="20">
		<s:Rect x="0" y="0"
				height="100%" width="100%">
			<s:fill>
				<s:LinearGradient>
					<s:entries>
						<mx:GradientEntry color="0xFF0000"/>
						<mx:GradientEntry color="0x00FF00"/>
						<mx:GradientEntry color="0x0000FF"/>
					</s:entries>
				</s:LinearGradient>
			</s:fill>
		</s:Rect>
</s:Application>

Using Background Image with Spark BorderContainer

Very simple example shows how to use Background Image with Spark Container


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"> 

    <fx:Script>
        <![CDATA[

	    [Bindable]
            [Embed(source="sampleImage.jpg")]
            public var ImageSample:Class;
        ]]>
    </fx:Script> 

    <s:BorderContainer
        backgroundImage="{ImageSample}"
        width="100%" height="100%">
    </s:BorderContainer>
</s:Application>

using Spark BorderContainer

Simple Example which shows you how to use border container in spark

Just I have inserted simple label inside container


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"> 

    <s:BorderContainer
        backgroundColor="red" cornerRadius="10"
        borderStyle="inset" borderWeight="4" >
        <s:Label text="Some text here" />
    </s:BorderContainer>
</s:Application>

Setting Vertical Layout for Application tag in Spark

Following example shows how to setup vertical layout in spark application tag


<?xml version="1.0" encoding="utf-8"?>
<s:Application	 xmlns:fx="http://ns.adobe.com/mxml/2009"
   		 xmlns:mx="library://ns.adobe.com/flex/mx"
   		 xmlns:s="library://ns.adobe.com/flex/spark"> 

        <s:layout>
            <s:VerticalLayout
                paddingLeft="5" paddingRight="5"
                paddingTop="5" paddingBottom="5"/>
        </s:layout>

        <s:Button label="Sample1"/>
        <s:Button label="Sample2"/>
        <s:Button label="Sample3"/>
        <s:Button label="Sample4"/>

</s:Application>