Custom indeterminate Preloader in Actionscript3 in Flex

Hi,

The custom inderterminate preloader can be build by actionscript only and it can be support for change the background and preloader color by set the style of the custom preloader class. The code as follows

package com
{
import mx.controls.Label;
import mx.containers.VBox;
import mx.controls.ProgressBar;
import mx.managers.PopUpManager;
import flash.display.DisplayObjectContainer;
[Style(name="mapLoaderBackgroundColor",type="uint",format="Color",inherit="no")]
[Style(name="maploaderProgressColor",type="uint",format="Color",inherit="no")]
public class MapPreloader extends VBox
{
private var _progressBar:ProgressBar;
private var _loadingLabel:Label;
public function MapPreloader()
{
super();
width = 250;
height = 80;
setStyle("paddingTop",20);
setStyle("paddingBottom",10);
setStyle("cornerRadius",10);
setStyle("backgroundAlpha",1);
setStyle("borderStyle","solid");
setStyle("horizontalAlign","center");
setStyle("verticalScrollPolicy","off");
setStyle("horizontalScrollPolicy","off");
}
override protected function createChildren():void
{
super.createChildren();
_progressBar = new ProgressBar();
_progressBar.label = "";
_progressBar.labelPlacement = "center";
_progressBar.width = 200;
_progressBar.indeterminate = true;
_progressBar.setStyle("themeColor",0x333333);
addChild(_progressBar);
_loadingLabel = new Label();
_loadingLabel.text = "Loading...";
_loadingLabel.percentWidth = 100;
_loadingLabel.setStyle("fontSize",12);
_loadingLabel.setStyle("textAlign","center");
addChild(_loadingLabel);
}
public function show(parent:DisplayObjectContainer):void
{
PopUpManager.addPopUp(this,DisplayObjectContainer(parent),true);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
var _bgColor:uint = getStyle("mapLoaderBackgroundColor");
setStyle("backgroundColor",_bgColor);
var _progressColor:uint = getStyle("maploaderProgressColor");
_progressBar.setStyle("themeColor",_progressColor);
}
}
}

The color of custom indeterminate preloader can be change by following way

MapPreloader{
mapLoaderBackgroundColor:#FF0000;
maploaderProgressColor:#FFCC00;
}

Send SMS to Mobile using Way2SMS webservice in Adobe Air

Hi,

I created one appication for send sms to mobile phones all over india. I use the way2sms service provider for send the message to mobile phone. Here i mention the code for send sms message to mobile phones.

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF" width="500" height="380" showStatusBar="false"
layout="vertical" verticalGap="4" verticalScrollPolicy="off" horizontalScrollPolicy="off" creationComplete="onInit()" showTitleBar="false"
>
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.controls.Alert;
import flash.net.navigateToURL;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.events.ValidationResultEvent;
private var _dockImage:BitmapData;
private function onInit():void
{
var _loader:Loader = new Loader();
_loader.load(new URLRequest("images/systray_icon_16.png"));
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImageLoaded);
}
private function onImageLoaded(evt:Event):void
{
_dockImage = evt.target.content.bitmapData;
}
private function onCloseApp(evt:Event):void
{
NativeApplication.nativeApplication.icon.bitmaps = [_dockImage];
}
public function onResponse(e:ResultEvent):void
{
if(e.result == "invalid login")
txt_status.text = e.result.toString();
else if(e.result == "done")
txt_status.text = "Message was send successfully";
else
txt_status.text = e.result.toString();
}
public function onFault(e:FaultEvent):void
{
txt_status.text = "Message was not send";
}
private function sendMsg():void
{
WS.getOperation('sendSMSToMany').send();
}
private function redirectPage():void
{
navigateToURL(new URLRequest("http://wwwa.way2sms.com/jsp/UserRegistration.jsp"),"_POST");
}
]]>
</mx:Script>
<mx:WebService id="WS" wsdl="http://www.aswinanand.com/sendsms.php?wsdl" showBusyCursor="true">
<mx:operation name="sendSMSToMany" result="onResponse(event)" fault="onFault(event)">
<mx:request>
<uid>
{txt_user.text}
</uid>
<pwd>
{txt_pwd.text}
</pwd>
<phone>
{txt_mobile.text}
</phone>
<msg>
{txt_msg.text}
</msg>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:HBox verticalGap="1" horizontalGap="3" width="100%">
<mx:Image source="@Embed(source='images/logo.jpg')"/>
<mx:Text text="Send SMS to Friends in India" fontSize="18" fontWeight="bold"/>
</mx:HBox>
<mx:HBox verticalGap="1" width="100%" horizontalAlign="center">
<mx:Text id="txt_status" fontSize="16" fontWeight="bold" color="#FF0000"/>
</mx:HBox>
<mx:Form verticalGap="8" y="-30">
<mx:FormItem label="Username:" fontSize="14" color="#0000FF" fontWeight="bold" width="98%">
<mx:TextInput id="txt_user" fontSize="12" color="0x000000" fontWeight="normal" width="150" maxChars="10" restrict="0-9"/>
</mx:FormItem>
<mx:FormItem label="Password:" fontSize="14" color="#0000FF" fontWeight="bold" width="98%">
<mx:TextInput id="txt_pwd" fontSize="12" color="0x000000" fontWeight="normal" width="150" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem label="Mobile NO:" fontSize="14" color="#0000FF" fontWeight="bold" width="98%">
<mx:TextInput id="txt_mobile" fontSize="12" color="0x000000" fontWeight="normal" width="150" maxChars="10" restrict="0-9"/>
</mx:FormItem>
<mx:FormItem label="Type Message:" fontSize="14" color="#0000FF" fontWeight="bold" width="98%">
<mx:TextArea id="txt_msg" fontSize="12" color="0x000000" fontWeight="normal" width="180" height="80" maxChars="140"
change="maxchar.text = '* maxchar 140('+txt_msg.text.length.toString()+')'"/>
<mx:Label id="maxchar" text="* maxchar 140(0)" fontSize="11" color="0xFF0000" fontWeight="normal"/>
</mx:FormItem>
<mx:FormItem width="100%" paddingTop="10">
<mx:HBox width="100%">
<mx:Button label="Send" click="sendMsg()"/>
<mx:Button label="Register Now" click="redirectPage()"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:WindowedApplication>

Interact with PayPal in Flex3

Hi,
Here i post the nice example for choose the book from the list and enter the quantity of the book that they want. Then pass the information to the paypal application and we can see the amount of product that we order from the flex application. In below i given the code for that.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()">
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
private var _cmbArr:Array;
private function onInit():void
{
var _urlRequest:URLRequest = new URLRequest("xmls/bookList.xml");
var _urlLoader:URLLoader = new URLLoader();
_urlLoader.addEventListener(Event.COMPLETE,onXMLLoadComplete);
_urlLoader.load(_urlRequest);
}
private function onXMLLoadComplete(evt:Event):void
{
_cmbArr = new Array();
var _xml:XML = XML(evt.target.data);
var _xmlList:XMLList = XMLList(_xml.book);
_cmbArr.push("Select Product");
for(var i:int=0;i<_xmlList.length();i++)
{
_cmbArr.push({label:_xmlList[i].@name,id:_xmlList[i].@id,price:_xmlList[i].@price,tax:_xmlList[i].@tax,mail:_xmlList[i].@ordermail,thumb:_xmlList[i].@thumburl});
}
cmb_product.dataProvider = _cmbArr;
}
private function onProductChange(evt:Event):void
{
txt_prodid.text = cmb_product.selectedItem.id;
txt_amt.text = cmb_product.selectedItem.price;
txt_tax.text = cmb_product.selectedItem.tax;
img_src.source = cmb_product.selectedItem.thumb;
txt_desc.text = cmb_product.selectedItem.label;
}
private function makePayment():void
{
var url:String = "http://www.paypal.com/cgi-bin/webscr";
var _urlRequest:URLRequest = new URLRequest(url);
var _urlVar:URLVariables = new URLVariables();
_urlVar.cmd = "_xclick";
_urlVar.currency_code = "USD";
_urlVar.business = cmb_product.selectedItem.mail;
_urlVar.item_number = cmb_product.selectedItem.id;
_urlVar.item_name = cmb_product.selectedItem.label;
_urlVar.amount = cmb_product.selectedItem.price;
_urlVar.quantity = txt_qty.text;
_urlVar.tax = cmb_product.selectedItem.tax;
_urlRequest.data = _urlVar;
_urlRequest.method = URLRequestMethod.POST;
navigateToURL(_urlRequest,"_parent");
}
]]>
</mx:Script>
<mx:HBox paddingLeft="20" paddingTop="20">
<mx:Form backgroundColor="#FFFFFF" height="240">
<mx:Label width="100%" text="Product Catalogue" fontFamily="Arial" fontSize="15" fontWeight="bold" textAlign="center"/>
<mx:FormItem label="Choose Item :" fontFamily="Arial" fontSize="12">
<mx:ComboBox id="cmb_product" width="150" height="23" fontFamily="Arial" fontSize="12" change="onProductChange(event)"/>
</mx:FormItem>
<mx:FormItem label="Product ID :" fontFamily="Arial" fontSize="12">
<mx:TextInput id="txt_prodid" editable="false" width="150" height="23"/>
</mx:FormItem>
<mx:FormItem label="Amount :" fontFamily="Arial" fontSize="12">
<mx:TextInput id="txt_amt" editable="false" width="150" height="23"/>
</mx:FormItem>
<mx:FormItem label="Quantity :" fontFamily="Arial" fontSize="12">
<mx:TextInput id="txt_qty" text="1" width="150" height="23"/>
</mx:FormItem>
<mx:FormItem label="Tax :" fontFamily="Arial" fontSize="12">
<mx:TextInput id="txt_tax" editable="false" width="150" height="23"/>
</mx:FormItem>
<mx:FormItem>
<mx:Image source="http://www.paypal.com/en_US/i/btn/x-click-but01.gif" width="60" maintainAspectRatio="true" horizontalCenter="0" verticalCenter="0" click="makePayment()"/>
</mx:FormItem>
</mx:Form>
<mx:VRule height="100%" strokeColor="#CCCCCC"/>
<mx:VBox height="240" backgroundColor="#666666">
<mx:Image id="img_src" width="250" height="200" verticalAlign="bottom" horizontalAlign="center"/>
<mx:Text id="txt_desc" fontFamily="Arial" fontSize="12" textAlign="center" fontWeight="bold" color="#FFFFFF" width="100%" height="20"/>
</mx:VBox>
</mx:HBox>
</mx:Application>

The sample xml file for accessing those above example as follows

<?xml version="1.0" encoding="UTF-8"?>
<BookList>
<book id="201" name="Cool 3D" price="250" tax="2" ordermail="order@macromedia.com" thumburl="assets/images/cool3d.jpg"/>
<book id="010" name="Dream Weaver" price="180" tax="4" ordermail="order@adobe.com" thumburl="assets/images/dreamweaver.gif"/>
<book id="001" name="Dream WeaverMX" price="300" tax="2" ordermail="order@adobe.com" thumburl="assets/images/dreamweavermx.gif"/>
<book id="413" name="Open Suse" price="280" tax="6" ordermail="order@sunsystems.com" thumburl="assets/images/opensuse.png"/>
<book id="271" name="Software Application" price="320" tax="4" ordermail="order@microsoft.com" thumburl="assets/images/swapp.jpg"/>
</BookList>

Rotate the Header Text in Datagrid in Flex3

Hi,
Here is the nice example for rotate the header text of the datagrid. The custom class i created for rotate the header text of Datagrid. When we need to rotate the text we must embed the text otherwise it cannot be visible the header text after rotate it.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Style>
@font-face
{
src: url("/assets/fonts/trebucbd.ttf");
fontFamily: "TrebuchetMSBold";
fontWeight: bold;
}
</mx:Style>
<mx:Script>
<![CDATA[
import com.GridHeader;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.rpc.events.HeaderEvent;
import mx.controls.DataGrid;
[Bindable]
private var dp1:Array = [{Product: "ADBE", name: "Adobe Systems Inc.", price: 49.95},
{Product: "MACR", name: "Macromedia Inc.", price: 39.95},
{Product: "MSFT", name: "Microsoft Corp.", price: 25.95},
{Product: "IBM", name: "IBM Corp.", price: 42.55}];
[Bindable]
private var dp2:Array = [{Product: "SOFT", name: "Software", price: 49.95},
{Product: "HARD", name: "Hardware", price: 39.95},
{Product: "NETW", name: "Network", price: 25.95}];
private function onChangeProvider():void
{
if(dg.dataProvider.length == 4)
dg.dataProvider = dp2;
else if(dg.dataProvider.length == 3)
dg.dataProvider = dp1;
}
]]>
</mx:Script>
<mx:VBox>
<mx:DataGrid id="dg" dataProvider="{dp1}">
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="Product" headerRenderer="com.GridHeader"/>
<mx:DataGridColumn headerText="Name" dataField="name" headerRenderer="com.GridHeader"/>
<mx:DataGridColumn headerText="Price" dataField="price" headerRenderer="com.GridHeader"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Change Provider" click="onChangeProvider()"/>
</mx:VBox>
</mx:Application>

The code for the custom class for rotate the text as follows

package com
{
import flash.text.AntiAliasType;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import mx.containers.VBox;
import mx.controls.listClasses.IListItemRenderer;
public class GridHeader extends VBox implements IListItemRenderer
{
private var _lbl:TextField;
public function GridHeader()
{
super();
height = 60;
setStyle("backgroundColor",0xFF0000);
setStyle("verticalGap",2);
}
override protected function createChildren():void
{
super.createChildren();
var _txtFormat:TextFormat = new TextFormat();
_txtFormat.font = "TrebuchetMSBold";
_txtFormat.size = 13;
_txtFormat.bold = true;
_txtFormat.color = 0x0000FF;
_txtFormat.align = "center";
_lbl = new TextField();
_lbl.autoSize = TextFieldAutoSize.LEFT;
_lbl.embedFonts = true;
_lbl.antiAliasType = AntiAliasType.ADVANCED;
_lbl.defaultTextFormat = _txtFormat;
_lbl.rotation = 270;
rawChildren.addChild(_lbl);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
if(data.headerText != null data.headerText != "")
{
_lbl.text = data.headerText;
_lbl.y = height-5;
_lbl.x = (width - _lbl.width)/2;
}
}
}
}