Scroll to top/bottom of page in Flex 4

To make the scroller of a Form go either to the top or bottom of the page the following code can be used.

Top:

scrollerID.verticalScrollBar.value = scrollerID.verticalScrollBar.minimum;

Bottom:

scrollerID.verticalScrollBar.value = scrollerID.verticalScrollBar.maximum;

 

 

Customize Tooltip in ColumnChart

The datatTipFunction here helps in displaying a yValue and its yName along with the DisaplayName, it can be be further customized based on the needs of the information to be displayed.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			public var dpac:ArrayCollection = new ArrayCollection ([
				{ date:"01/01/2006", cash:50000,
					stocks:198192, retirement:130101,
					home:750000, other:19148 },
				{ date:"02/01/2006", cash:50000,
					stocks:210309, retirement:143707,
					home:760000, other:19493 },
				{ date:"03/01/2006", cash:50000,
					stocks:238992, retirement:169529,
					home:770000, other:19933 },
				{ date:"04/01/2006", cash:50000,
					stocks:292269, retirement:242596,
					home:770000, other:21445 }]);
			
			import mx.charts.series.items.ColumnSeriesItem;
			import mx.charts.series.ColumnSeries;
			import mx.charts.HitData;
			import mx.collections.ArrayCollection;
			
			private function myDataTipFunction(hitData:HitData):String
			{			
				var series:ColumnSeries = ColumnSeries(hitData.element);	
				var item1:ColumnSeriesItem = ColumnSeriesItem(hitData.chartItem);
				var date:Object = item1.item.date;
				var value:Number = Number(item1.yValue);
				
				return  "<b>" + series.displayName + "</b>\n" +
					"<b>------------------</b>\n" +
					"<b>Date:\t\t</b>" + date + " \n" +
					"<b>Count:\t\t</b>" +series.displayName+":"+ value + " \n";
				
			}
		]]>
	</fx:Script>
	<mx:Legend dataProvider="{otherDashGraphCE}" direction="vertical" height="20" right="0"/>
	<mx:ColumnChart dataProvider="{dpac}"
					width="100%" height="90%" horizontalCenter="0"
					paddingLeft="5"
					paddingRight="5"
					showDataTips="true"
					id="otherDashGraphCE"
					bottom="15" dataTipFunction="myDataTipFunction">
		<mx:horizontalAxis>
			<mx:CategoryAxis  categoryField="date"/>
		</mx:horizontalAxis>
		<mx:series>
			<mx:ColumnSeries displayName="cash"  yField="cash"/>
			<mx:ColumnSeries displayName="stocks"  yField="stocks"/>
			<mx:ColumnSeries displayName="retirement"  yField="retirement"/>
			<mx:ColumnSeries displayName="home"  yField="home"/>
			<mx:ColumnSeries displayName="other"  yField="other"/>
		</mx:series>
	</mx:ColumnChart>
	
</s:Application>

Simple Text in Flex using ActionScript 3

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

	<fx:Script>
		<![CDATA[
			import mx.controls.Text;
		
			private function init():void 		{			
				//Cretaing a Text in as3
					var simpleTxt:Text = new Text();		
					simpleTxt.horizontalCenter = 0; 		
					simpleTxt.verticalCenter = 0;			
					simpleTxt.text = "Hello World";
					
				//To display the text element
					this.addElement(simpleTxt);
			}
		]]>
	</fx:Script>
</s:Application>

Simple PieChart using mx:PieChart

This application helps to create a simple Pie Chart using mx:PieChart.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	
	<fx:Script>
	<![CDATA[
			import mx.collections.ArrayCollection;
			[Bindable]
			public var expenses:ArrayCollection = new ArrayCollection([
			{Expense:"India", Amount:2000},
			{Expense:"UK", Amount:1000},
			{Expense:"USA", Amount:100},
			{Expense:"Australia", Amount:450},
			{Expense:"SriLanka", Amount:100},
			{Expense:"France", Amount:200}
			]);
		]]>
	</fx:Script>
		<mx:PieChart id="myChart" 
					 dataProvider="{expenses}" 
					 showDataTips="true"
					 width="100%" height="90%"
					 >
			<mx:series>
				<mx:PieSeries 
					field="Amount" 
					nameField="Expense" 
					labelPosition="callout"
					/>
			</mx:series>
		</mx:PieChart>
		<mx:Legend dataProvider="{myChart}" direction="horizontal"/>
</s:Application>

Simple Column Chart using mx:ColumnChart

This application helps to create a simple Column Chart using mx:ColumnChart.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	
		<fx:Script>
			<![CDATA[
				import mx.collections.ArrayCollection;
				
				[Bindable]
				public var dpac:ArrayCollection = new ArrayCollection ([
					{ date:"01/01/2006", cash:50000, 
						stocks:198192, retirement:130101, 
						home:750000, other:19148 },
					{ date:"02/01/2006", cash:50000, 
						stocks:210309, retirement:143707, 
						home:760000, other:19493 },
					{ date:"03/01/2006", cash:50000, 
						stocks:238992, retirement:169529, 
						home:770000, other:19933 },
					{ date:"04/01/2006", cash:50000, 
						stocks:292269, retirement:242596, 
						home:770000, other:21445 }]);
			]]>
		</fx:Script>
		<mx:Legend dataProvider="{otherDashGraphCE}" direction="vertical" height="20" right="0"/>
		<mx:ColumnChart dataProvider="{dpac}"
						width="100%" height="90%" horizontalCenter="0"
						paddingLeft="5" 
						paddingRight="5" 
						showDataTips="true"
						id="otherDashGraphCE"
						bottom="15">
			<mx:horizontalAxis>
				<mx:CategoryAxis  categoryField="date"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries displayName="cash"  yField="cash"/>	
				<mx:ColumnSeries displayName="stocks"  yField="stocks"/>	
				<mx:ColumnSeries displayName="retirement"  yField="retirement"/>	
				<mx:ColumnSeries displayName="home"  yField="home"/>
				<mx:ColumnSeries displayName="other"  yField="other"/>
			</mx:series>
		</mx:ColumnChart>
		

</s:Application>

Create Your Own QR-Charts using Google’s chart API

This application helps to create a QR chart using Google’s chart API.

 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   >
	
	<fx:Script>
		<![CDATA[
			protected function button1_clickHandler(event:MouseEvent):void
			{
image.source = "https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl="+qrvalue.text+"&choe=UTF-8";
			}

			protected function qrvalue_clickHandler(event:MouseEvent):void
			{
				qrvalue.text = "";
			}

		]]>
	</fx:Script>
<s:Label text="Welcome to QR charts" top="30" fontSize="24" horizontalCenter="0"/>
	
<mx:VBox horizontalCenter="0" verticalCenter="0">
			
 <s:TextInput text="Text to embed in QR Code:" click="qrvalue_clickHandler(event)" id="qrvalue"/>
		
 <s:Button click="button1_clickHandler(event)" label="Submit"/>
		
 <mx:Image id="image"/>
		
</mx:VBox>
	
</s:Application>
 

Parsley Framework – Example

Here is a download link to a sample project built on Parsley framework, The detailed description of the project will be added in a few days.  http://www.2shared.com/file/xWXIPLhA/Parsley_Login_Sample.html

The Demo can be viewed here.

The project includes:

1.The Above mentioned, purely with Parsley Framework
2. Model,View,Controller Architecture

Topics Covered:

Some of the cool features of the framework are :

1.Dependency Injection
2.Messaging capabilities (read event system)
3.Flex Modules support
4.Localization
5.Injection via metadata

General Topics Covered:

1.Http service
2.States
3.Json Decoding
3.Validation etc.

Parsley 2.2 SWC and spicelib 2.2 SWC are used and these SWCs also being included in the downloads from the Parsley download page.

Cache/Refresh Problem in Internet Explorer – Solution

In Internet Explorer, the refresh doesn’t happen due to the caching done by IE.  To avoid this issue once for all the following settings has to be changed,

1) Go to Tools> internet options.

2) Browsing  History >  Settings > Check for new versions of stored pages >  Select Radio : “Every time i visit the page”then check your application.

All Refresh issues will be solved now….

 

Flex DataGrid

The following example demonstrates, displaying elements from an ArrayCollection in a DataGrid using the mx:dataGrid component.

Two methods have been used in the same example to display items in a datagrid, either by using a custom itemrenderer(first datagridcolumn) or by using the itemrenderer in the same mxml(second datagridcolumn). It helps in displaying Items in a datagrid when dynamic data is used ex: XML, Json etc.

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

 <fx:Script>
 <![CDATA[
 import mx.controls.Alert;
 import mx.events.ListEvent;
 import mx.collections.ArrayCollection;

 public var ac:ArrayCollection = new ArrayCollection([
 { date:"2010/12/4", data:"party value", label:"Party"},
 { date:"2010/1/5",  data:"meeting value", label:"Meeting"},
 { date:"2010/12/15", data:"holiday value", label:"Holiday"},
 { date:"2010/12/15", data:"dinner value", label:"Dinner"},
 { date:"2010/12/15", data:"bedtime value", label:"Bedtime"}
 ]);

 ]]>
 </fx:Script>
  <mx:DataGrid id="myGrid" width="100%" dataProvider="{ac}">
    <mx:columns>
      <mx:DataGridColumn headerText="Col1" itemRenderer="itemRenderer" textAlign="center"/>

      <mx:DataGridColumn headerText="Col2" textAlign="center">
        <mx:itemRenderer >
          <fx:Component>
            <mx:HBox toolTip="{data.label}" horizontalScrollPolicy="off">
               <mx:Label verticalCenter="0" x="10" color="#635648"  fontWeight="bold"  text="{data.label}"/>
            </mx:HBox>
          </fx:Component>
        </mx:itemRenderer>   
      </mx:DataGridColumn>
    </mx:columns>
  </mx:DataGrid>
</s:Application>

itemRenderer.mxml

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

 <mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx"
 doubleClickEnabled="true"
 doubleClick="dummyClickHandler(event)">
 <fx:Script>
 <![CDATA[
 private function dummyClickHandler(event:Event):void
 {
 // do nothing
 }
 ]]>
 </fx:Script>
 <mx:Label text="{data.data}" fontWeight="bold"/>
 </mx:VBox>

Flex Tree -

The following example demonstrates, displaying elements from an ArrayCollection in a tree structure using the mx:tree component. It also displays the no of children under the parent item of the tree.

The labelFunction has been used in this example not only to display the no of children under the parent, It helps in displaying Items in a tree structure when dynamic data is used ex: XML, Json etc.

      
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	
<fx:Script>
   <![CDATA[
	import mx.collections.ArrayCollection;
	[Bindable] public var ac:ArrayCollection= new ArrayCollection([
		{ name: "Animals", 
         	  children: new ArrayCollection([{name:"dog"},{name:"cat"},
                  {name:"kitten"}])},
		{ name: "Fruits",  
		  children: new ArrayCollection([{name:"orange"},{name:"apple"} 
          ])}
         ]);
			
	private function Tree_labelFunc(item:Object):String {
		var suffix:String = "";
		if (Tree.dataDescriptor.hasChildren(item)) {
			suffix = " (" + item.children.length + ")";
		}
		return item.name+" "+suffix;
	}		
]]>
</fx:Script>
<mx:Tree   id="Tree"
	   labelFunction="{Tree_labelFunc}"
	   dataProvider="{ac}" openItems="1"     
	   openDuration="500" width="100%" height="100%">
</mx:Tree>

</s:Application>


<mx:Tree   id=”contentManagementTree”  itemRenderer=”treeRenderer” defaultLeafIcon=”{leaf}”  labelFunction=”{contentManagementTree_labelFunc}” dataProvider=”{contentmodel.topiclist}” openItems=”1″fontSize=”12″ color=”#0d1b02″ filters=”{textEmboss}”  fontFamily=”Calibri” fontAntiAliasType=”advanced”
contentBackgroundAlpha=”0″ borderAlpha=”0″ selectionColor=”#cbec91″ rollOverColor=”#98b26b”
openDuration=”500″ width=”100%” height=”100%” creationComplete=”contentManagementTree_creationCompleteHandler(event)” itemClick=”contetntMang_itemClickHandler(event)”  >
<!–tree–>
</mx:Tree>

Follow

Get every new post delivered to your Inbox.