PieChart per item fill

Sample application for per item fill using PieChart

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

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

<![CDATA[

import mx.graphics.SolidColor;

import mx.graphics.IFill;

import mx.charts.ChartItem;

/* */

[Bindable]

private var date:Date = new Date();

/* */

private function pieFill(item:ChartItem, index:Number):IFill

{

var solidColor:SolidColor = new SolidColor(Math.round(getRandomNumber(uint.MIN_VALUE + 10000, uint.MAX_VALUE)));

return solidColor;

}

/* */

private function getRandomNumber(min:Number, max:Number):uint

{

return (Math.floor(Math.random() * (max - min + 1)) + min);

}

]]>

</mx:Script>

<mx:ArrayCollection id="arr">

<mx:Array>

<mx:Object name="Ashok" age="{date.getFullYear() - new Date(1984,03,05).getFullYear()}" />

<mx:Object name="Arun" age="{date.getFullYear() - new Date(1984,06,06).getFullYear()}" />

<mx:Object name="Mohan" age="{date.getFullYear() - new Date(1981,01,26).getFullYear()}" />

</mx:Array>

</mx:ArrayCollection>

<mx:PieChart id="pie"

dataProvider="{arr}" showDataTips="true">

<mx:series>

<mx:PieSeries

nameField="name"

field="age" fillFunction="pieFill"/>

</mx:series>

</mx:PieChart>

</mx:WindowedApplication>

Note: Change the root and end tag to <Application></Application> to run it in the browser.

Base64 Encoder and Decoder

A simple application on Base64 Encode and Decode

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

<![CDATA[

import mx.utils.Base64Decoder;

import mx.utils.Base64Encoder;

/*  */

private function decodeString(event:MouseEvent):void

{

var enc:Base64Encoder = new Base64Encoder();

var dec:Base64Decoder = new Base64Decoder();

var arr:ByteArray = new ByteArray;

var decodeStr:String = '';

/* Encde the String  */

enc.encode(str.text);

encStr.text =  enc.toString();

/* Decode the encoded string */

dec.decode(encStr.text);

arr = dec.toByteArray();

for(var i:uint=0;i<arr.length;i++)

{

decodeStr += String.fromCharCode(arr[i]);

}

orgStr.text = decodeStr;

}

]]>

</mx:Script>

<mx:Form>

<mx:FormHeading label="Base64Encoder" />

<mx:FormItem label="Enter a value to encode">

<mx:TextInput id="str" text=" " width="144"/>

</mx:FormItem>

<mx:FormItem label="Encoded string">

<mx:TextInput id="encStr" text=" " width="144"/>

</mx:FormItem>

<mx:FormItem label="The original string">

<mx:TextInput id="orgStr" text=" " width="144"/>

</mx:FormItem>

</mx:Form>

<mx:Button label="&Encode&" click="decodeString(event)"/>

</mx:Application>

TextInput with help labels (AIR)

Sample application for help TextInput.

package com.abc.components

{

import flash.events.Event;

import flash.events.FocusEvent;

import mx.controls.TextInput;

public class HelpTextInput extends TextInput

{

private var _label:String;

private var _isTextSet:Boolean;

public function HelpTextInput()

{

//TODO: implement function

super();

}

/*  */

public function get label():String

{

return this._label;

}

/*  */

public function set label(value:String):void

{

_isTextSet = false;

this._label = value;

updateField();

}

/*  */

override public function set text(value:String):void

{

if(value == "")

{

_isTextSet = false;

}

else

{

_isTextSet = true;

super.text = value;

}

updateField();

}

/*  */

[Bindable]

override public function get text():String

{

if(!_isTextSet)

{

return "";

}

else

{

return super.text;

}

}

/*  */

private function updateField():void

{

if(_isTextSet)

{

setStyle('color', 0x000000);

}

else

{

super.text = _label;

setStyle('color', 0xaaaaaa);

}

}

/*  */

private function onChange( event:Event ):void

{

if(super.text == "")

{

_isTextSet = false;

}

else

{

_isTextSet = true;

}

}

/*  */

private function onFocuIn( event:FocusEvent ):void

{

if(!_isTextSet)

{

setStyle('color', 0x000000);

super.text = "";

}

}

/*  */

private function onFocusOut( event:FocusEvent ):void

{

updateField();

}

/*  */

override public function initialize():void

{

super.initialize();

addEventListener(Event.CHANGE, onChange);

addEventListener(FocusEvent.FOCUS_IN, onFocuIn);

addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);

updateField();

}

}

}

The mxml part

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

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:components="com.abc.components.*">

<mx:Label text="Text" />

<components:HelpTextInput label="Enter firstname" />

<components:HelpTextInput label="Enter lastname" />

</mx:WindowedApplication>

Date sorter on DataGrid

Simple application to sort column with date type

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

<![CDATA[

import mx.collections.Sort;

import mx.utils.ObjectUtil;

import mx.collections.SortField;

private function dateSort(obj1:Object, obj2:Object):int

{

return ObjectUtil.dateCompare(new Date(obj1.creationdate), new Date(obj2.creationdate));

}

private function sortDate():void

{

dg.dataProvider.sort = new Sort();

dg.dataProvider.sort.fields = [new SortField("creationdate", false, false)];

dg.dataProvider.refresh();

}

]]>

</mx:Script>

<mx:ArrayCollection id="dataPro">

<mx:Object firstname='Ashok' lastname='NP' creationdate='07/08/2008 12:00:01'/>

<mx:Object firstname='Arun' lastname='A' creationdate='07/08/2008 12:00:02'/>

<mx:Object firstname='Siddharth' lastname='BR' creationdate='07/08/2008 12:10:01'/>

<mx:Object firstname='Mohan' lastname='KH' creationdate='07/08/2008 12:00:01'/>

<mx:Object firstname='Jais' lastname='M' creationdate='07/08/2008 12:00:00'/>

</mx:ArrayCollection>

<mx:DataGrid id="dg" dataProvider="{dataPro}" width="100%" height="50%"

creationComplete="sortDate()">

<mx:columns>

<mx:DataGridColumn dataField="firstname" />

<mx:DataGridColumn dataField="lastname" />

<mx:DataGridColumn dataField="creationdate" sortCompareFunction="dateSort" />

</mx:columns>

</mx:DataGrid>

</mx:Application>

Underline text in button on mouse over

Simple application to underline the text when mouseover on the button

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Button id="btn" label="Mouse Over" 

mouseOver="btn.setStyle('textDecoration','underline')"

mouseOut="btn.setStyle('textDecoration','none')"

labelPlacement="left" useHandCursor="true"

buttonMode="true"/>

</mx:Application>

Creating Bitmap Filters in ActionScript

Simple application to create Bitmap filters using actionscript.

package {

import flash.display.Sprite;

import flash.events.MouseEvent;

import flash.filters.BevelFilter;

import flash.filters.BitmapFilter;

import flash.filters.BitmapFilterQuality;

import flash.filters.BitmapFilterType;

public class FilterExamples extends Sprite

{

private var bgColor:uint = 0xFFCC00;

       private var size:uint    = 80;

       private var offset:uint  = 50;

        private var sp:Sprite = new Sprite();

/*  */

public function FilterExamples()

{

draw();

sp.addEventListener(MouseEvent.ROLL_OVER, showGlow);

addChild(sp);

}

/*  */

private function draw():void

{

sp.graphics.beginFill(bgColor);

sp.graphics.drawRect(offset,offset,size,size);

sp.graphics.endFill();

}

/*  */

private function getBitmapFilter():BitmapFilter

{

            var distance:Number       = 5;

            var angleInDegrees:Number = 45;

            var highlightColor:Number = 0xFFFF00;

            var highlightAlpha:Number = 0.8;

            var shadowColor:Number    = 0x0000FF;

            var shadowAlpha:Number    = 0.8;

            var blurX:Number          = 5;

            var blurY:Number          = 5;

            var strength:Number       = 5;

            var quality:Number        = BitmapFilterQuality.HIGH;

            var type:String           = BitmapFilterType.INNER;

            var knockout:Boolean      = false;

            return new BevelFilter(distance, angleInDegrees, highlightColor,

                                   highlightAlpha, shadowColor, shadowAlpha,

                                   blurX, blurY, strength,

                                   quality, type, knockout);

}

/*  */

private function showGlow(event:MouseEvent):void

{

//graphics.clear();

//draw();

var filter:BitmapFilter = getBitmapFilter();

var myFilter:Array = [];

myFilter.push(filter);

sp.filters = myFilter;

sp.addEventListener(MouseEvent.ROLL_OUT, onRollout);

}

/*  */

private function onRollout(event:MouseEvent):void

{

sp.filters = null;

}

}

}

Flex - Grails

Application for communication between Flex and Grails.

Without Flex-Grails plugin

1. Create a grails project in eclipse IDE. click here for help in grails-eclipse integration.

2. Create a service.

The groovy class

class UserServiceService 

{

boolean transactional = true

    

     def serviceMethod() 

{

     }

    

     def sayHello()

     {

    return "Hello from Grails";

     }

}

3. click here for the remaining procedures.

Sample with flex plugin for grails.

1. Install the flex plugin for grails 

2. Create service

The groovy class

class UserService 

{

static expose = ['flex-remoting']

   boolean transactional = true

    

     def serviceMethod() 

{

     }

    

     def sayHello()

     {

return "Hello from grails";

}

}

3. Create the war file

4. Deploy it in the tomcat

5. Create a Flex application

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.controls.Alert;

/**/

private function onResult( event:ResultEvent ):void

{

Alert.show( event.result.toString());

}

/**/

private function onFault( event:FaultEvent ):void

{

Alert.show("Fault");

}

]]>

</mx:Script>

<mx:RemoteObject

id="ser"

destination="userService">

<mx:method name="sayHello" 

fault="onFault( event )"

result="onResult( event )">

</mx:method>

<mx:Button click="ser.sayHello.send()" label="Call" />

</mx:Application>

Note:- The service name is the destination configured in the RemoteObject of Flex, (i.e, camel casing - userService not UserService)

HTML text with image in UITextField

Application to show Image in UITextField

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

initialize="initApp()">

<mx:Script>

<![CDATA[

import mx.core.UIComponent;

import mx.core.UITextField;

private var test:String = "<p>Who is the founders of google." + "<img src='http://blogs.citypages.com/gop/google.jpg' width='100' height='100'></p>" + 

"<p></P>";

private var uitext:UITextField;

private var uicomp:UIComponent;

/*  */

private function initApp():void

{

uitext = new UITextField();

uitext.width = 600;

uitext.height = 600;

uitext.multiline = true;

uitext.wordWrap = true;

uitext.autoSize = TextFieldAutoSize.LEFT;

uicomp = new UIComponent();

uicomp .addChild(uitext);

this.addChild(uitext);

uitext.htmlText = test;

}

]]>

</mx:Script>

</mx:Application>

Column text-select in DataGrid

Simple application to make the column selectable not editable :)

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

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>

<![CDATA[

import mx.controls.TextInput;

]]>

</mx:Script>

<mx:ArrayCollection id="arr">

<mx:Array>

<mx:Object name="Ashok" />

<mx:Object name="Potter" />

</mx:Array>

</mx:ArrayCollection>

<mx:DataGrid dataProvider="{arr}">

<mx:columns>

<mx:DataGridColumn dataField="name" itemRenderer="mx.controls.Text"  editable="true"/>

</mx:columns>

</mx:DataGrid>

</mx:WindowedApplication>

Playing Video (AIR)

This is a sample application, which plays an .flv file using VideoDisplay component in flex.

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

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:String id="urlStr">assets/Coldplay_1.flv</mx:String>

<mx:VideoDisplay id="vd" width="100%" height="100%">

<mx:click>

<![CDATA[

if(vd.playing)

{

vd.stop();

}

else

{

vd.play();

}

]]>

</mx:click>

</mx:VideoDisplay>

<mx:Button>

<mx:label>Start Play</mx:label>

<mx:click>

<![CDATA[

vd.source = urlStr;

]]>

</mx:click>

</mx:Button>

</mx:WindowedApplication>

Create Custom ToolTip

This is a simple Flex application to create custom tool tip using "toolTipCreate" event.

The tool tip component
1. create a component and name it as "CustomTip.mxml"

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

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 

layout="horizontal"

  implements="mx.core.IToolTip" 

width="200" 

alpha=".8" 

borderThickness="1" 

backgroundColor="0xCCCCCC" 

dropShadowEnabled="true" 

borderColor="black" 

borderStyle="solid" 

headerHeight="0" 

cornerRadius="2"> 

<mx:Script> 

<![CDATA[ 

/* */

 [Bindable] 

public var toolTipString:String; 

[Bindable] 

public var toolTipImage:String; 

/* 

Implement required methods of the IToolTip interface; these 

methods are not used in this example, though. 

*/

public var _text:String; 

public function get text():String 

{

 return _text; 

}

 public function set text(value:String):void { } 

]]> 

</mx:Script> 

<mx:Image source="{toolTipImage}" /> 

<mx:Text text="{toolTipString}" percentWidth="100"/> 

</mx:Panel>

2. The main mxml application "CustomToolTipSample.mxml"

<?xml version="1.0" encoding="utf-8"?>  <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 

creationComplete="init()"> 

<mx:Script> 

<![CDATA[

import mx.utils.StringUtil; 

import mx.managers.ToolTipManager; 

import components.CustomTip; 

import mx.events.ToolTipEvent; 

private function onTooltipCreate( title:String, message:String, url:String, event:ToolTipEvent ):void 

{

var pnl:CustomTip = new CustomTip(); 

pnl.toolTipString = message; 

pnl.toolTipImage = url; event.toolTip = pnl; 

} 

/* */ 

private function init():void 

{ 

ToolTipManager.hideDelay = 10000; 

} 

]]> 

</mx:Script> 

<mx:Button 

label="My Custom ToolTip" toolTip=" " 

toolTipCreate="onTooltipCreate('Test Heading','Test on custom tool tip', 'assets/application_error.png', event)" />

</mx:WindowedApplication>

Note:-Here in this example the component is created inside the folder called "components", and inorder to run this application place an image in the assets folder and pass the name of the image as the second parameter in onTooltipCreate() method.