Tag Archives: Flex 3 Hacks

#9 Flex Hack – Filtering a data collection without filterFunction

1
Filed under Flex, Flex Hacks

This hack is about filtering data collection into control.
Some weeks ago a user of Flex-Brazil list asked how to apply filter directly on datagrid which gets the same data source. There are a great and very useful hack to apply filter function directly to data source not in the control, you can stop by here.
Okay, once you know that everything in Flash Player is Object and every object has own properties, it’s so easy to manipulate those objects, let’s take a look.

Level: Beginner.

So, what I used is just a little utility method to filter objects before apply to the control, it works with many cases, like XMLList, XMLListCollection, Array, and many UI controls that handle with data.

Here’s the method utility to make the magic:

		public function applyFilter(rule:String,col:ArrayCollection):ArrayCollection
		{
			var newArr:ArrayCollection= new ArrayCollection();
			if(col !=null){
				for each(var obj:Object in col){
					if(obj.level == rule){
						newArr.addItem(obj);
					}
				}
			}
			return newArr;
		}

I create a simple loosely temp array collection to catch all data that fits on the rule, the obj.level where level is the property I want to watch.
Doing that you will just need to some event-drive model to the collection itself and control logic workflow. The all things are very known from you.

Here’s the full code sample for this Hack.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
<mx:Script>
	<![CDATA[
		import flash.sampler.NewObjectSample;
		import mx.events.CollectionEvent;
 		import mx.collections.ArrayCollection;
 
		public function applyFilter(rule:String,col:ArrayCollection):ArrayCollection
		{
			var newArr:ArrayCollection= new ArrayCollection();
			if(col !=null){
				for each (var obj:Object in col){
					if(obj.level == rule){
						newArr.addItem(obj);
					}
				}
			}
			return newArr;
		}
		[Bindable]private var o:Object;
		private var change:Boolean = false;
		private function addGuru():void
		{
			if(guruname.text.length>0){
				o = new Object();
				o.name = guruname.text;
				o.level = gurulevel.selectedLabel;
				someflexgurusCollection.addItem(o);
				change =true;
				someflexgurusCollection.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
			}
 
		}
 
		private function updateProviders(event:CollectionEvent):void
		{
			if(change){
			dvDG.dataProvider = applyFilter('Dark Vader',someflexgurusCollection);
			cwDG.dataProvider = applyFilter('Cowboy',someflexgurusCollection);
			jdDG.dataProvider = applyFilter('Jedi',someflexgurusCollection);
			nbDG.dataProvider = applyFilter('Newbie',someflexgurusCollection);
			}
		}
	]]>
</mx:Script>
<mx:ArrayCollection collectionChange="updateProviders(event)" id="someflexgurusCollection">
		<mx:Object name="Rich Tretola" level="Jedi"/>
		<mx:Object name="Matt Chotin" level="Dark Vader"/>
		<mx:Object name="Ted Patrick" level="Jedi"/>
		<mx:Object name="Mark MidNight" level="Dark Vader"/>
		<mx:Object name="Jesse Warden" level="Dark Vader"/>
		<mx:Object name="James Ward" level="Cowboy"/>
		<mx:Object name="Joe Lott" level="Jedi"/>
		<mx:Object name="Marco Casario" level="Cowboy"/>
		<mx:Object name="Abdul Qabiz" level="Jedi"/>
		<mx:Object name="Igor Costa" level="Newbie"/>
</mx:ArrayCollection>
 
	<mx:Button x="10" y="126" label="Add" click="addGuru()"/>
	<mx:DataGrid id="dvDG" x="292" y="48" dataProvider="{applyFilter('Dark Vader',someflexgurusCollection)}">
		<mx:columns>
			<mx:DataGridColumn headerText="Guru Name" dataField="name"/>
			<mx:DataGridColumn headerText="Guru Level" dataField="level"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:DataGrid id="cwDG" x="292" y="240" dataProvider="{applyFilter('Cowboy',someflexgurusCollection)}">
		<mx:columns>
			<mx:DataGridColumn headerText="Guru Name" dataField="name"/>
			<mx:DataGridColumn headerText="Guru Level" dataField="level"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:DataGrid id="jdDG" dataProvider="{applyFilter('Jedi',someflexgurusCollection)}" x="502" y="48">
		<mx:columns>
			<mx:DataGridColumn headerText="Guru Name" dataField="name"/>
			<mx:DataGridColumn headerText="Guru Level" dataField="level"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:DataGrid id="nbDG" dataProvider="{applyFilter('Newbie',someflexgurusCollection)}" x="502" y="240">
		<mx:columns>
			<mx:DataGridColumn headerText="Guru Name" dataField="name"/>
			<mx:DataGridColumn headerText="Guru Level" dataField="level"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:Label x="292" y="21" text="Just Dark Vaders" fontWeight="bold" fontSize="11"/>
	<mx:Label x="292" y="213" text="Just CowBoys" fontWeight="bold" fontSize="11"/>
	<mx:Form x="10" y="36">
		<mx:FormItem label="Name">
			<mx:TextInput id="guruname"/>
		</mx:FormItem>
		<mx:FormItem label="Level">
			<mx:ComboBox id="gurulevel">
					<mx:dataProvider>
							<mx:String>Dark Vader</mx:String>
							<mx:String>Cowboy</mx:String>
							<mx:String>Jedi</mx:String>
							<mx:String>Newbie</mx:String>
					</mx:dataProvider>
			</mx:ComboBox>
		</mx:FormItem>
	</mx:Form>
	<mx:Label x="10" y="10" text="Add New Flex Guru" fontWeight="bold" fontSize="18"/>
	<mx:Label x="501" y="21" text="Just Jedi" fontWeight="bold" fontSize="11"/>
	<mx:Label x="502" y="213" text="Just Newbie" fontWeight="bold" fontSize="11"/>
</mx:Application>

#4 Flex Hack – Add charts to Datagrid without Data Visualization Framework

6
Filed under Flex, Flex 3, Flex Beyound basic, Flex Components, Flex Data Visualization Framework, Flex Hacks, Sample Application

By far Flex is great, you pick up an idea and after that becomes a solution. One of the things I really enjoy in Flex is playing with Charts. People here in Brazil always stay shocked with power of Charts and its simplicity to make.

Anyway, Bringing Charts in Flex are such power and looks your App really awesome. This hack today is regarding that thing, simplicity without the Data Visualization Framework aka(Flex Charts).

Also by meaning the real name for that is Gantt Chart like wikipedia says. Which a great colleague of field Andrew Trice dide a good example on how to handle that.[Update] Actually the Dusty explain on the comments that this hack is more micro chart(SparkLine chart) than Gantt Chart.

What is necessary to it?
– Flex 3.0.x SDK or Flex 2.0.x SDK
– Imagination

Anyway, here’s the result of what this hack can do:

How is it done?

Same as Andrew did, but a little simple, I explored the resources of Flex DisplayObject class has and UIComponent has, like draw easy.

Here’s the code for the Hack:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
 
			[Bindable]private var productCollection:ArrayCollection = new ArrayCollection();
			[Bindable]private var product:Object;
 
			private function addProduct():void {
				if(pName.text != '' && pPrice.text != '' && pSold.text != ''){
					product = new Object();
					product.Name = pName.text;
					product.Price = pPrice.text;
					product.Sold = pSold.text;
					productCollection.addItem(product);
				}else{
					Alert.show('Fill out all fields!','Error');
				}
			}
		]]>
	</mx:Script>
 
	<mx:DataGrid  dataProvider="{productCollection}" x="30" y="33" width="486" height="306">
		<mx:columns>
			<mx:DataGridColumn headerText="Product Name" dataField="Name"/>
			<mx:DataGridColumn headerText="Price" dataField="Price"/>
			<mx:DataGridColumn headerText="Sold Itens" dataField="Sold">
					<mx:itemRenderer>
						<mx:Component>
								<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
									<mx:HBox verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#a604e9"
										 width="{Number(data.Sold)*0.01}" height="100%"/>
									<mx:Label text="{String(Number(data.Sold)*0.01)}%"/>
								</mx:HBox>
						</mx:Component>
					</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:Form defaultButton="{addProductBtn}" x="545" y="24">
		<mx:FormItem label="Product Name">
			<mx:TextInput id="pName"/>
		</mx:FormItem>
		<mx:FormItem label="Price">
			<mx:TextInput restrict="[0-9]" id="pPrice"/>
		</mx:FormItem>
		<mx:FormItem label="Sold Itens">
			<mx:TextInput id="pSold" restrict="[0-9]"/>
		</mx:FormItem>
	</mx:Form>
	<mx:Button id="addProductBtn" x="736" y="142" label="Add Product" click="addProduct()"/>
 
</mx:Application>

As you see you can reproduce any kind of hack like that, because the power of itemRender mechanism in Flex is very powerful for data representation. By at the end you see that is not a big deal doing that with your project, and the final result looks awesome.

Playing Effects Too

Here’s same example but now using Effects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.ArrayCollection;
			import mx.effects.easing.Elastic;
 
			[Bindable]private var productCollection:ArrayCollection = new ArrayCollection();
			[Bindable]private var product:Object;
 
			private function addProduct():void {
				if(pName.text != '' && pPrice.text != '' && pSold.text != ''){
					product = new Object();
					product.Name = pName.text;
					product.Price = pPrice.text;
					product.Sold = pSold.text;
					productCollection.addItem(product);
				}else{
					Alert.show('Fill out all fields!','Error');
				}
			}
		]]>
	</mx:Script>
 
	<mx:DataGrid  dataProvider="{productCollection}" x="30" y="33" width="486" height="306">
		<mx:columns>
			<mx:DataGridColumn headerText="Product Name" dataField="Name"/>
			<mx:DataGridColumn headerText="Price" dataField="Price"/>
			<mx:DataGridColumn headerText="Sold Itens" dataField="Sold">
					<mx:itemRenderer>
						<mx:Component>
								<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%" height="100%">
									<mx:Resize duration="1500" target="{_grchart}" id="_eff" widthTo="{Number(data.Sold)*0.01}"/>
									<mx:Script>
										<![CDATA[
											import mx.effects.easing.Back;
										]]>
									</mx:Script>
									<mx:HBox  id="_grchart" creationComplete="_eff.play()" verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#a604e9"
										 width="0" height="100%"/>
									<mx:Label text="{String(int(data.Sold)*0.01)}%"/>
								</mx:HBox>
						</mx:Component>
					</mx:itemRenderer>
			</mx:DataGridColumn>
		</mx:columns>
	</mx:DataGrid>
	<mx:Form defaultButton="{addProductBtn}" x="545" y="24">
		<mx:FormItem label="Product Name">
			<mx:TextInput id="pName"/>
		</mx:FormItem>
		<mx:FormItem label="Price">
			<mx:TextInput restrict="[0-9]" id="pPrice"/>
		</mx:FormItem>
		<mx:FormItem label="Sold Itens">
			<mx:TextInput maxChars="4" id="pSold" restrict="[0-9]" width="162"/>
		</mx:FormItem>
	</mx:Form>
	<mx:Button id="addProductBtn" x="736" y="142" label="Add Product" click="addProduct()"/>
</mx:Application>

#1 Flex Hack – VBox,HBox with gradient background

5
Filed under Actionscript, Flex, Flex Beyound basic, Flex Hacks

It’s hard to find good resources or techniques for Flex Hacks, I will start from today a category on this blog for flex hacks, the first one is about the adding background gradient way in VBox and HBox which I guess why still doesn’t is by default.

Level of Hack: Easy
To: All Flex devs

Description:

I want to put a gradient color on my vbox container and hbox either, but is not allowed, with this hack you can, just simple as possible.

How:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="office.menu.*">
<mx:Style>
		.testeGradiente{
			fillColors: #444444, #ffffff;
			fillAlphas: 0.1,1;
		}
</mx:Style>
 
	<mx:VBox styleName="testeGradiente" borderStyle="applicationControlBar" x="101" y="46" width="174" height="170">
	</mx:VBox>
 
 
</mx:Application>

Explanation:

Since the components are shared the same classes or aka (inheritance ), you can take a hole possible new hacks on that and use same as applied for others containers.

The property I used to enable this was the borderStyle which I applied the same name as in the component applicationControlBar.

That’s all folks. Next hack to come.