Using Image Inside the Sprite in Flex

Using Image Inside the Sprite in Flex

If we want to add any Image inside the Sprite class in flex,then It is not possible to add image inside the sprite. But if your requirement is as such in that case you can achieve this by adding the Loader inside the sprite. Below is the code for the same.

MainApplication.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" creationComplete="createSpriteWithBitmap()">
	<mx:Script>
	<![CDATA[
	import mx.controls.Image;
	private function createSpriteWithBitmap():void
	{
	var sp : SpriteWithBitmap = new SpriteWithBitmap();
	can.rawChildren.addChild( sp );
	}
	]]>
	</mx:Script>
	<mx:Canvas id="can" x="200" y="200"/>
</mx:Application>

SpriteWithBitmap

package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.*;
import flash.net.URLRequest;

import mx.controls.Alert;

public class SpriteWithBitmap extends Sprite
{
	//Pass the source path or url here.
	private var url:String = "http://shardulbartwal.files.wordpress.com/2009/09/ssbrose.jpg";

	public function SpriteWithBitmap()
	{
		loadImg();
	}
	private function loadImg():void
	{
		var loader:Loader = new Loader();
		loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadFailure);
		var request:URLRequest = new URLRequest(url);
		loader.load(request);
		this.addChild(loader);
	}

	private function loadFailure(event:IOErrorEvent):void
	{
		Alert.show("Can't load :" + url);
	}
}

}

Enjoy Flexing………….

Zoom Any container with children In Flex 3.0

Zooming in Flex

I saw many people searching for the finding solution for zooming functionality. They are normally trying it with the zoom effect or scaling which is very true. But the case is bit sensitive when you have to zoom all the components inside a component and so on. So surly this will be achieved through a recursive function which will zoom each and every control inside a container unto the nth level where a container will not have any more child. Below is the demo application for achieving this. Hope this will be useful for all those who are having such requirement.

For code click on the link below.
ZoomDemo Source Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.Container;
import mx.core.UIComponent;
private function doZoom(component:UIComponent,val:Number):void
{
component.scaleX = val;
component.scaleY = val;
if(component is Container)
{
var children:Array = Container(component).getChildren();
for(var i:int = 0; i < children.length; i++)
{
doZoom(children[i], val);
}
}
}
public function applyZoom():void
{
if(pnl == null)
{
return;
}
doZoom(pnl,zoomSlider.value);
}
]]>
</mx:Script>
<mx:HBox horizontalAlign="right">
<mx:VBox width="700" height="100%">
<mx:Panel id="pnl" width="400" height="400" title="Panel">
<mx:HBox width="100%" height="100%">
<mx:Button label="B1"/>
<mx:Button label="B2"/>
<mx:Button label="B3"/>
</mx:HBox>
<mx:HBox width="100%" height="100%">
<mx:Button label="B11"/>
<mx:Button label="B21"/>
<mx:Button label="B31"/>
</mx:HBox>
</mx:Panel>
</mx:VBox>
<mx:VBox>
<mx:HSlider id="zoomSlider" minimum=".1" value="1"
maximum="2" change="applyZoom()" width="180"/>
<mx:Label text="Apply Zoom"/>
</mx:VBox>
</mx:HBox>
</mx:Application>

Hope you will like this………Enjoy Flexing…

Rotating Display Object around its Center

Sometimes back I was looking for how to rotate any component from its Center.But I don’t got any proper solution for that.As all of us know the registration point of the any display object are its top left point i.e (0,0).Hence I used the ‘Rotation Effect’,and used the originX and originY for finding the center of the Display object.But I know that it was not proper solution.Currently I am here with the proper solution.Its very simple to acheive.You can also get the source code from here.Below is the Link.
Click Here For RotationDemo Source Code.

Masking in Flex 3

Masking in Flex 3

Using the masking in flex is very simple as there is already a property mask with each UIComponet.Just assing this property of the component to that visual display object by which you want to mask it.In most cases you will require to draw the different shapes and mask with them your display object.
You can check it out from here with code.
Hope you will like this.

Shardul Singh Bartwal

Passing variable from outside into a popup window

If we are require to pass any variable from outside into a popup window in flex,the way
is slightly different then creating Popup in a classic way.Actully its not the different
instead there is a type casting into the same class which we are going to display in popup.
Let suppose you want to pass a string value into the popup then inside the popup you need
to create a public varible, like I am creating ‘urlValue’ string type variable inside the popup.

Now pass the value inside the popup as below:-

var myPopUp:MyPopup= MyPopup(PopUpManager.createPopUp(this, MyPopup, true));

myPopUp.move(((Application.application.width/2)-(myPopUp.width/2)),((Application.application.h

eight/2)-(myPopUp.height/2)));

myPopUp.urlValue = “value from outside”;

Here the MyPopUp is the class which we are going to show in popup.

Hope it will be helpfull for you.

Managing Custom Events in Flex 3.0 in a easy way

As all of us require Custom Events in our Flex applications. Also we know the Event Life Cycle in Flex. I am sure that all of you will be familiar with event targating,bubling,capturing etc.Also we know that we are require to remove the Listeners which we adds. We all know that inside a flex application the event first goes to the application level and then from there back to the component which have to listen it. This issue becomes more critical if we are not using any particular architecture like Pure MVC or Cairngorm etc.So in this condition first you have to dispatch a event and listen it at application level and then again dispatch a event on its occurring and listen that at the desired place. The other ways are like by using the references of the Class from where the event is dispatched and where it is being listen in each other etc.I have created a CustomEventManager Class for managing custom event dispatching, and Listening it.Its very simple to use it. It is a static class.

For dispatching event simply write like this:

CustomEventManager.dispatchEvent(new YourCustomEvent(YourCustomEvent.YOUR_CUSTOM_EVENT));

and for Listioning the custom event write like this at right place in the event Listioning
class(e.g. at creationComplete of the class or constructor etc ):

CustomEventManager.addEventListener(YourCustomEvent.YOUR_CUSTOM_EVENT,yourCustomEventHandler);

I am also adding the code of the ‘CustomEventManager’ class.Hope it will be helpful for you.

For CustomEventManager Class click here.

Smoothing the Bitmap

Normally when we are dealing with the ’smoothing’ property of the ‘Bitmap’ class it looks that its effect is not of the major aspect.But it plays a vital role.I found a very help full link related to understanding its value.If you are not getting the quality factor on the movement(by mean of rotation,skew,scale etc) on bitmap then you should check the ’smoothing’ property of the bitmap by tracing it whether it is true or false.The link below will clear you doubts and variations of the quality issue in Bitmap.Its value is more important if u are getting the bitmap of any Image which you are accessing through the url.
Please have a look at the link below to understand this issue and its solution.Thnx to Grant Skinner for this nice post.

The link is……….

http://www.gskinner.com/blog/archives/2007/08/minor_bug_with.html

Flex Charting with Editable Datagrid

Charting in Flex

Charting in flex is one of the important and owesome feature of flex.Here is a example in which you u can see the Chart representation of the values in a Datagrid.Hoping you all will enjoy it.The important featureof the flex is the that on changing the value in the datagrid there is the coresponding change in the Chart and for achieving this you don’t require to do any thing more.

   Just  copy and paste the code below in your Application mxml of Flex.

******************************************************************

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” paddingTop=”50″
layout=”vertical” verticalScrollPolicy=”off”
>
<mx:Style>
Application {
backgroundColor: #333333;
}
Label{
color:#ff0000;
fontSize:11;
textAlign:justify;
font-family:Verdana;
}

Alert{
modalTransparencyBlur: 5;
modalTransparency: 0.6;
modalTransparencyColor: #DDDDDD;
modalTransparencyDuration: 1000;
color : #0f3177;
title-style-name : “.alertTitle”;
header-height:19;
border-thickness: 1;
drop-shadow-enabled: true;
drop-shadow-color :#d1ddf7;
background-color: #ffffff;
corner-radius :6;
border-style :solid;
header-colors : #90a4d1, #5970a0;
footer-colors : #9db6d9, #ffffff;
border-color : #5970a0;   
}

.alertTitle{
font-family :Times New;
font-size :20;
font-weight :bold;
text-align :left;
color :#ffffff;
}
</mx:Style>

  <mx:Script><![CDATA[
    import mx.utils.ArrayUtil;
     import mx.collections.ArrayCollection;
     import mx.events.DataGridEvent;
     import mx.events.ListEvent;
     import mx.controls.Alert ;
   
  public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"January", Profit:2000000, Expenses:1500000,ENo:100},
        {Month:"February", Profit:1000000, Expenses:200000,ENo:80},
        {Month:"March", Profit:1500000, Expenses:500000,ENo:110},
        {Month:"April", Profit:1500000, Expenses:500000,ENo:130}
     ]);
      
     public function functionAddRecord(expenses:ArrayCollection):void
     {
     var strMonth:String=txtMonth.text;
  var strProfit:String=txtProfit.text;
  var strExpenses:String=txtExpenses.text;
  var strENo:String=txtENo.text;
  if(strMonth.length==0){Alert.show(“Enter the month First,it can not be Empty.”,”Blank field”)}
  else if(strProfit.length==0){Alert.show(“Enter the Profit First,it can not be Empty.”,”Blank field”)}
  else if(strExpenses.length==0){Alert.show(“Enter the Expenses First,it can not be Empty.”,”Blank field”)}
  else if(strENo.length==0){Alert.show(“Enter the ENo First,it can not be Empty.”,”Blank field”)}
  else
   {
    expenses.addItem({Month:strMonth,Profit:strProfit,Expenses:strExpenses,ENo:strENo});
        expenses.refresh();
        txtMonth.text=”";
        txtProfit.text=”";
        txtExpenses.text=”";
        txtENo.text=”";
     }
  }
 
      public function functionRemoveRecord(expenses:ArrayCollection):void
      {
       var _selectedindex:Number=dg1.selectedIndex;
       var _expensesLength:Number=expenses.length;

           if(_selectedindex!=-1)
        {
         var _selectedindex:Number=dg1.selectedIndex;
        expenses.removeItemAt(_selectedindex);
         expenses.refresh();
        }
         else if(_expensesLength==0)
         {
          Alert.show(“There is no Record to Delete”,”Error”);
         }
      }
  
  public function functionCheckStatusOfRemove():void
  {
   if(dg1.selectedIndex >0)
   {
    btnRemove.enabled=true;
   }
  }  
  
     public function functionitemEditEnd(event:DataGridEvent):void
        {
        /* var _rowIndex:Number=event.rowIndex;
        var _columnIndex:Number= event.columnIndex;
        var cell:String=(String(event.currentTarget.itemEditorInstance));
           if(event.currentTarget.itemEditorInstance.length==0)
           {
            Alert.show(“Not Possible”);
           } */
         }
 
  public function functionItemClick(event:ListEvent)
  {
        /*   var _rowIndex:Number=event.rowIndex;
          var _columnIndex:Number=event.columnIndex;
          {
           if(_rowIndex==1)
            {
    //trace(expenses.getItemAt((event.rowIndex-1)).Month);
    expenses.refresh();
            }
          } */
        }
  ]]>
  </mx:Script>
<mx:WipeLeft id=”myWipeLeft” duration=”2000″/>
<mx:WipeRight id=”myWipeRight” duration=”2000″/>
<mx:WipeUp id=”myWipeUp” duration=”1000″/> 
<mx:HBox width=”100%” height=”50%” verticalScrollPolicy=”off”>
<mx:VBox width=”50%” height=”100%” creationCompleteEffect=”{myWipeRight}”>
<mx:Panel title=”Monthly Status of Company” id=”pChart” width=”100%” headerColors=”100%” height=”100%”>
     <mx:ColumnChart id=”myChart” dataProvider=”{expenses}” addedEffect=”{myWipeLeft}” 
     mouseDownEffect=”{myWipeUp}” creationCompleteEffect=”{myWipeUp}”>
        <mx:horizontalAxis>
    <mx:CategoryAxis dataProvider=”{expenses}” id=”ca” categoryField=”Month”/>
        </mx:horizontalAxis>
 <mx:series>
   <mx:ColumnSeries xField=”Month” yField=”Profit” displayName=”Profit” addedEffect=”{myWipeUp}”/>
   <mx:ColumnSeries xField=”Month” yField=”Expenses” displayName=”Expenses” addedEffect=”{myWipeUp}”/>
   <mx:ColumnSeries xField=”Month” yField=”ENo” displayName=”No Of Employees” addedEffect=”{myWipeUp}”/>
 </mx:series>   
     </mx:ColumnChart>
     <mx:Legend dataProvider=”{myChart}”/>
</mx:Panel>
</mx:VBox>

<mx:VBox width=”50%” height=”100%” creationCompleteEffect=”{myWipeLeft}”>
 <mx:HBox width=”100%” height=”50%”>
  <mx:Panel width=”100%” height=”100%” title=”Add New/Remove Record”>
  <mx:Spacer height=”5″ width=”100%”/>
  <mx:HBox width=”100%” height=”20%”>
   <mx:Label text=”Month” width=”100″/>
   <mx:TextInput id=”txtMonth” width=”150″ height=”30″ restrict=”A-Z,a-z” toolTip=”Value should be non numeric.”/>
   </mx:HBox>
  <mx:HBox width=”100%” height=”20%”>
   <mx:Label text=”Profit” width=”100″/>
   <mx:TextInput id=”txtProfit” width=”150″ height=”30″ restrict=”0-9″ toolTip=”Value should be numeric.”/>
  </mx:HBox>
  <mx:HBox width=”100%” height=”20%”>
   <mx:Label text=”Expenses” width=”100″/>
   <mx:TextInput id=”txtExpenses” width=”150″ height=”30″ restrict=”0-9″ toolTip=”Value should be numeric.”/>
  </mx:HBox>
  <mx:HBox width=”100%” height=”20%”>
   <mx:Label text=”No of Emp.” width=”100″/>
   <mx:TextInput id=”txtENo” width=”150″ height=”30″ restrict=”0-9″ toolTip=”Value should be numeric.”/>
  </mx:HBox>
  <mx:HBox width=”100%” height=”20%”>
   <mx:Spacer width=”70″/>
   <mx:Button label=”Add New Record” click=”functionAddRecord(expenses)”/>
   <mx:Button id=”btnRemove” enabled=”false” label=”Remove Selected Record” click=”functionRemoveRecord(expenses)” toolTip=”For Removing any item first select it from ‘Edit Records’.”/>
 </mx:HBox>
</mx:Panel>
</mx:HBox>

<mx:HBox width=”100%” height=”50%”>
<mx:Panel id=”p1″ width=”100%” height=”100%” title=”Edit Records”>
<mx:DataGrid id=”dg1″ width=”100%”  editable=”true” selectable=”true” dataProvider=”{expenses}”
 itemClick=”functionItemClick(event)” itemEditEnd=”functionitemEditEnd(event)” enterFrame=”functionCheckStatusOfRemove()”>
 <mx:columns>
  <mx:DataGridColumn dataField=”Month” headerText=”Month” editable=”false”/>
  <mx:DataGridColumn dataField=”Profit” headerText=”Profit” textAlign=”center”/>
  <mx:DataGridColumn dataField=”Expenses” headerText=”Expenses” textAlign=”center”/>
  <mx:DataGridColumn dataField=”ENo” headerText=”No Of Employee” textAlign=”center”/>
 </mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Application>

******************************************************************

******************************************************************

Enjoy Flexing.

Shardul Singh Bartwal