Category Archives: Flex Components

It’s worth to migrate my Flex 3 app to Flex 4 app?

1
Filed under Flex, Flex 4, Flex Components

Got a question today on skype over a developer from US, asking me some other things and finally all explanation gave to him he asked me if it worth to migrate a current built app done in Flex 3.x SDK to Flex 4 SDK.
Besides the fact of corporate world, Homologate than start using for first class projects, it’s worth at all to start using Flex 4 SDK. And now why?

To better help you here’s a list of things that you will consider before and after choose Flex 4 SDK:

Flex 4 vs. Flex 3:
Each other does not compete with each other, they work together and smooth, guys from Flex SDK team and their manager (Deepa), did an amazing job putting this to work smooth. You can easy use both Spark components and Halo components together without hassle. Both products SDKs was built to distinct goals. When Flex 3 SDK was shipped to the market was consolidating itself to solve most problem in industry of RIA applications, the easiness of doing incredible products with desktop behavior and data-ware prospect. Which includes a hell lot of new components, new charts capabilites and until today you still uses those creations. Flex 4 SDK was built to help ensure that thinking before, help not just creating easyness UI for applications but, do them beauty.
Today worlds we don’t just have desktops to use, we have mobile devices, devices of any kind and with the current look and feel of Flex components it’s hard to keep code up to date and still working on those types of screen/hardware. Where Flex 4 SDK came to close this gap, making beauty, usefull and maintanable your work.

Composite vs. inheritance

Still today you can do both with Flex 3 SDK. the 3th version and his variants can support composite, as you know Flex 4 SDK still uses the inheritance but main goal of Flex 4 SDK is composite components, more easy and fun to code, increasing among many other things that you will see in your day-by-day job.
To illustrate the easy of creating new components in Flex, please see theses slides from Mrinal Wadhwa, his slides explanation will let you know more about what I’m talking to.

Code confort:

When you have a mature SDK that let you know what you’re doing, it’s hard to keep distance from it. Sample of that people missunderstand that an mature SDK is that SDK that it’s out of the box components, just drag and drop and it’s working. In some parts is cool programming in that way for small, prototype and presentations. But in a real world you will have to costumise each component, don’t you? In Flex 3 SDK you have to handle pretty well and know all the behavior of Flex 3 Component life cycle. Many developers are still facing on how is the better approach. I admit that it was usual hard to get working. But in Flex 4 SDK life cycle of a component get ridiculous simple. You now can have decouple UI, you can split the design and logic ui in two files. Letting you do the hard part of costumization easy to you. Never been so easy to create and deploy your own custom components without worry to meet the qualified classes or behavior methods to declare in order to properly work. This is the past, from now one you will see in your future Flex 4 SDK projects how this become easy.

Performance:
We have today a world that is slave of clock and everything that comes to you it’s for delivery yesterday, don’t happen with you? And to keep in track time and projects you need a tool, that facilitate all of these work, it’s basicly a give me what I want in the time I want. the new mxmlc compiler is twice fast than the old one in Flex 3 SDK. Part of that is to help the developer increase their producitivy and increasing that you have loved developers on your pocket. Team did a good job. In some cases for example I’ve notice that increased 4.3x times than before. It’s like I don’t need no more coffee break as sorry to producitivy.

Imaginable components:
Imaginated create that mo’ fc’ component you always wanted and don’t have the skills necessery to create? Simple, you can do design right? You have Flash Catalyst to do the dirt job to you. and it will compile to you a nicely tag component ready to be used for your developer. Their are still working on this tool to get worth using. But if you don’t want to wait, you can right now test a beta version of this tool in the Adobe Labs.

Migration Code:
One of the principal concern is motivation on gains to move code on to new workflow of Flex 4 SDK does. A worth looking is the documentation that specify straight to the point where show all new way of doing in Flex 4. It’s not hard to update your current code, you just have to adapt, a sample of that I bet you will only need 40% of your current code migrated to Flex 4 SDK standards. If you do much use of States,HBox,VBox. I increase this value to 50% of code migration.

All theses worth mention can help you understand if worth right now to migrate to Flex 4 SDK. There’s another indirect benefits of start using Flex 4 SDK, like direct access to the new API of Flash Player, AIR, code execution faster, less open bugs on the database,etc. It’s now up to you decide.

Doing Flex 3 components in actionscript the right way

4
Filed under 3.0, Flex, Flex 3, Flex Components

One of the big problems I had in the past was developing kick ass components in actionscript format, where you see by proven simple basic component done for Google Maps.
Most of applications I did before was using only mxml format and this is straight forward way that 9 of 10 Flex developers does in usual ways.
I was doing pretty well, but for sure if you’re trying to get better and better as a developer you see that a long way to do and write stuffs like bytearray.org, mchambers, gskinner. Most of theses developers love and breath the development process, respecting the framework and the way they flow.

Six months ago I had this as goal, achieve a development senior level for custom components in actionscript format. The best way to do that was reading the Flex SDK source code, and see how I could learn from them. I must say you to not do that right now if you don’t have a big experience in Flex development, has a lot of way to go.

It’s hard enough to learn this path and get a level of that. The pursuit of happiness was very clear for me after three months of study and internal tests, samples. I personally don’t like read I most enjoy see in action examples of some framework then I read later the docs.

In fact was hard months, because I just got 3 or 2 hours a day to study. I needed as anyone needs to work and put grant the food for home. And some times I would think in give up and keep going doing mxml code and some little utility classes. But when everytime I saw a bug logged in the Flex bug base and example of work from those guys I mentioned earlier. I draw back and keeping fire to learn theses process.

There’s a bunch of information out there today after those 5 years of working with Flex framework and for sure this might be one of the best time to learn Flex and even getting deep to learn from the source. Many resources, slides, samples you can find on internet that are better worth then the livedocs, where today in my point of view are getting better and better with days to come.(Randy is doing a great job there).

But you’re very lucky today after I saw a simple, direct to point white paper to learn the process of doing components in Flex. Kudos to James Polanco and Aaron Pedersen . They’ve released a documentation that is worth to read for any developer that reads this blog or works with Flex development, with simple words any dummy developer that has a minimum of 6 months of experience in Flex framework can learn on the component live cycle in Flex.

Here’s the direct link for the PDF file where you can print and read in home even if you’re not in front of PC or MAC(who knows?!).

For others document I’ve collected before when I was learning this is the comprehensive list of sources I’ve got to kick ass in as3 components for Flex, in a TOP of 10 resources sites:

1. Slide share collection of slides that get you ahead in this field.
2. Live Docs on Advanced Flex Components
3. For who without free time to learn and want learn fast.
4. Like a to-do-check-list for any developer who wants to check your component before use it.

5. A nice review that was my second text on learning.
6. A nice diagram and complete diagram of workflow where you can print and never forgot.
7.Implementing accessibility on to your flex components.
8. How to write non-visual Flex components.
9. A nice one read for non-visual flex components.
10. And the last but no least a great white paper of doing Flex 3 Components int he right way. (This is recent and didn’t had the lucky to read in that time).

Enforce your development skills with this little list, has a lot of other resources like Jessen Warden blog and gets a lot of boiler list of tips and tricks for flash platform developers, google code, with a 1.333 projects tags as Flex and you save time in light up new ideas of components, check that before.

Hope you enjoy.

#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>

Flex removeChildById implementation

6
Filed under Experiments, Flex Components, Labs

So, on Flex2/3/4 SDK does not have any kind of implementation. I’ve search on web and found that only Sandy 3D engine has one typical method.

For who came or know java as well has a plethora a kind of method available and why not in Flex? Is a thing to think about it.

DisplayObject class is great but avoiding that only simple methods and a lot of workarrounds to handle that.

Any case you might wonder or required kind of method is simple here’s a example of that:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
 
 			public function removeChildById(id:String):void{
				for each( var item:Object in getChildren()){
						if(item['id'] == id){
							removeChild(item as DisplayObject);
						}
				}
 
			} 
		]]>
	</mx:Script>
	<mx:Button id="a" x="387" y="124"/>
	<mx:Button id="b" x="265" y="124"/>
	<mx:Button id="c" x="278" y="73"/>
	<mx:Button x="114" y="280" label="remove by Id" click="removeChildById(fieldId.text)"/>
	<mx:TextInput id="fieldId" x="197" y="280"/>
</mx:Application>

You just implement this method in any custom component that you created.

This method is very utility when you are creating a based tool mockup. Any future ideas or others developers has different approach?

[Updated]
Sencolar sent me a tip that do all stuff, I made a mistake, didn’t tought about that. Thanks to the tip. You can follow the Senocular tip bellow on comments.

Survey Lite Library for Flex developers

1
Filed under 3.0, Actionscript, Experiments, Flex, Flex 3, Flex Components, General announcements, Labs, Open Source Stuffs

Part of my contribution to the community is help them to grow as developers and bring more new fresh content here or there.
Last month a client of mine who has very strick business model for marketing research called us to create a entire library for them to build survery quick as possible. It’s took me dozens days to develop the library and after I finish up I realize that I could create a new one more light and tiny version of that I did. And the result is bellow:

The Flex 3.0 survey 0.1 library, it’s very alpha and is very simple, not even close what we did. But in case you need to create such survey for your Flex app it should work.

SurLL, intend to get more easy to create UI survery in Flex with no extra work. Quite simple, Lovely solution and should help you to make an extra money, isn’t Jesse?!

A little FAQ is ready to get start. Here’s a example bellow that you can explore in the package.

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="makeMyQuestions()" layout="absolute">
 
	<mx:Script>
		<![CDATA[
 
		import mx.controls.Alert;
		import org.igorcosta.view.QuestionContainer;
		import org.igorcosta.view.QuestionTemplate;
 
	 	 public var mysurvey:QuestionContainer = new QuestionContainer();
 
 
		public function makeMyQuestions():void{
			var qOne:QuestionTemplate = new QuestionTemplate();
			var qTwo:QuestionTemplate = new QuestionTemplate();
			var qThree:QuestionTemplate = new QuestionTemplate();
			var qFour:QuestionTemplate = new QuestionTemplate();
 
			// Add questions to the Survery Container model
 
			mysurvey.AddQuestion(qOne);
			mysurvey.AddQuestion(qTwo);
			mysurvey.AddQuestion(qThree);
			mysurvey.AddQuestion(qFour);
 
			addChild(mysurvey);
 
			// Set up the questions and answers;
 
			qOne.SetQuestion = 'What is your gender?';
			qOne.AddAnswer('Male');
			qOne.AddAnswer('Female');
 
			qTwo.SetQuestion = "How old are you?";
			qTwo.AddAnswer('12-16');
			qTwo.AddAnswer('18-24');
			qTwo.AddAnswer('25-32');
 
			qThree.SetQuestion = 'Do you like milk?';
 
			qThree.AddAnswer('yes');
			qThree.AddAnswer('no');
 
			qFour.SetQuestion = 'Are you a workholic?';
 
			qFour.AddAnswer('yes');
			qFour.AddAnswer('no way');
			qFour.AddAnswer('Not sure');
		}
		]]>
 
	</mx:Script>
	<mx:Button x="46" y="420" label="Previous" click="mysurvey.previousQuestion();"/>
	<mx:Button x="140" y="420" label="Next" click="mysurvey.nextQuestion();"/>
	<mx:Label x="46" y="471" text="Question {(mysurvey.selectedIndex+1).toString()+ 'of'+mysurvey.getChildren().length.toString()}"/>
 
 
</mx:Application>

Visit the project in the Google Code host farmer.

Again: Google Flex Maps Component 1.0

7
Filed under 3.0, ASDoc, Flex, Flex 3, Flex Components, Google, Labs, Open Source Stuffs

So, Took 1 hour after work today and did a update and finally.

Now, the Google Flex Maps Component 1.0 has a documentation where you can read it from here.

Pamela Fox from Google answer me the question about language issue.

One of the problems I still believe that should be open the .swc exposed by Google, there’s some mistery on some properties that I tried to implement that didn’t work . If someone’s from Google or even Pamela could give me access to that I should for sure add more options to the sdk.

So, The Google Flex Maps isn’t a replacement of Google Maps AS3.0 API as many people said. But is only a extended version of google instead of putting slices or UIComponent implementation on the code. Major goal is provide a easy way to developers.

Requirements: Google AS3.0 API to proper work and Flex 3 SDK.

Google Flex Map 1.0 Component: Binary format *.swc

Documentation for Google Flex Map 1.0

Source Code of Component.

Updated Flex Google Map component

8
Filed under 3.0, Actionscript, Experiments, Flex Components

So, after some free minutes on a straight business day, I did some updates on the component and has a new Example and some methods, also some implementations and a refector.
There’s a Lot to do but works fine.

Here’s a Live Example Running and The Entire Project Source Code.

Note for Source code Only: Ignore the language selection Google Map API has a problem with that, and needs to fix it. Always stays in default value of google Maps Language.(Any google Folks want talk with me?)

GoogleFlexMap Class

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
>>
package com.igorcosta
{
	/**
	 * www.igorcosta.org
	 * 	
        THIS SOURCE CODE IS PROVIDED "AS IS" AND "WITH ALL FAULTS", WITHOUT 
        ANY TECHNICAL SUPPORT OR ANY EXPRESSED OR IMPLIED WARRANTIES, INCLUDING,
        BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
        FOR A PARTICULAR PURPOSE ARE DISCLAIMED.  ALSO, THERE IS NO WARRANTY OF 
        NON-INFRINGEMENT, TITLE OR QUIET ENJOYMENT.  IN NO EVENT SHALL MACROMEDIA
        OR ITS SUPPLIERS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
        EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, 
        PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
        OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 
        WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR 
        OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOURCE CODE, EVEN IF
        ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
	*/
 
 
		import com.google.maps.LatLng;
		import com.google.maps.Map;
		import com.google.maps.MapEvent;
		import com.google.maps.controls.MapTypeControl;
		import com.google.maps.controls.PositionControl;
		import com.google.maps.controls.ZoomControl;
 
		import flash.events.Event;
		import flash.geom.Point;
 
		import mx.core.UIComponent;
		import mx.events.FlexEvent;
 
	public class GoogleFlexMap extends UIComponent
	{
 
		private var _Width:Number = 800;
		private var _Height:Number = 500;
		private var _map:Map;
		//private var _tipomapa:String;
		private var _key:String;
		private var _ZoomControl:Boolean = false;
		private var _PositionControl:Boolean = false;
		private var _TypeControl:Boolean = false;
 
		public function GoogleFlexMap()
		{
			super();
			super.addEventListener(FlexEvent.INITIALIZE,init);
 
		}
		private function init(event:Event):void {
			 this.width = _Width;
			this.height = _Height;			
			// Iniciando o Objeto Map
			_map = new Map();
			try{
				_map.key =_key;
			}
			catch(e:Error){
				 throw new Error("Please specify a Google Map Key to start use it!");
			}
 
			_map.addEventListener(MapEvent.MAP_READY,createUIMap);
			//_map.setSize( new Point (this.width, this.height));
				if(_ZoomControl){
				_map.addControl( new ZoomControl());
				}
				if(_TypeControl){
					_map.addControl(new PositionControl());
				}
				if(_TypeControl){
					_map.addControl(new MapTypeControl());
				}
 
			// add map Object to UIComponent;
			this.addChild(_map);
		}
 
		public function get showZoomControl():Boolean{
			return _ZoomControl;
		}
		public function set showZoomControl(value:Boolean):void {
			_ZoomControl = value;
		}
		public function get showPositionControl():Boolean{
			return _PositionControl;
		}
		public function set showPositionControl(value:Boolean):void {
			_PositionControl = value;
		}
		public function get showTypeControl():Boolean {
			return _TypeControl;
		}
		public function set showTypeControl(value:Boolean):void {
			_TypeControl = value;
 
		}
		public function get key():String{
				return _key;
		}
		public function set key(value:String):void {
			_key = value;
		}
 
		private function createUIMap(event:Event):void {
			_map.setCenter( new LatLng(40.736072,-73.992062),14,null);
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			_map.setSize( new Point(unscaledWidth,unscaledHeight));
		}
 
		/* public function get TipoMapa():String {
			return _tipomapa;
		}
		public function set TipoMapa(value:String):void{
			var tipos:Array = [MapType.HYBRID_MAP_TYPE,MapType.NORMAL_MAP_TYPE,MapType.PHYSICAL_MAP_TYPE,MapType.SATELLITE_MAP_TYPE];
			tipos = MapType.DEFAULT_MAP_TYPES;
				switch(value){
						case "hibrido":
										//remove
											_map.removeMapType(tipos as IMapType);
										//add
										_map.setMapType(MapType.HYBRID_MAP_TYPE);
 
										break;
						case "normal":
										_map.removeMapType(tipos as IMapType);
										_map.setMapType(MapType.NORMAL_MAP_TYPE);
										break;
						case "fisico":
										_map.removeMapType(tipos as IMapType);
										_map.setMapType(MapType.PHYSICAL_MAP_TYPE);
										break;
						case "satelite":
										_map.removeMapType(tipos as IMapType);
										_map.setMapType(MapType.SATELLITE_MAP_TYPE);
										break;
				}
		} */
 
	}
}

GoogleMap Flex Component

15
Filed under 3.0, Actionscript, Experiments, Flex, Flex Components, Google, Sample Application

After the release of greatest and awaited API for Flash Platform developers, I decided to facilitate the life of Flex Developers, Created just in some minutes a new component for Flex Developers who want to add more control or be very well organized.

I’ve created a new Component for Flex. here’s how to its works.

Copy and paste this code in your own Path.

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
>>
package com.igorcosta
{
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
 
	import flash.events.Event;
	import flash.geom.Point;
 
	import mx.core.UIComponent;
	import mx.events.FlexEvent;
 
	public class GoogleFlexMap extends UIComponent
	{
 
		private var _Width:Number = 650;
		private var _Height:Number = 500;
		private var _mapa:Map;
		private var _key:String;		
		public function GoogleFlexMap()
		{
			super();
			super.addEventListener(FlexEvent.INITIALIZE,init);						
		}
		private function init(event:Event):void {
			 this.width = _Width;
			this.height = _Height;			
			// Ininitate the Map Object
			_mapa = new Map();
			_mapa.key =_key;
			_mapa.addEventListener(MapEvent.MAP_READY,createUIMap);
			_mapa.setSize( new Point (this.width, this.height))
			// add map to displaylist
			this.addChild(_mapa);
		}
		public function get key():String{
				return _key;
		}
		public function set key(value:String):void {
			_key = value;
		}
		private function createUIMap(event:Event):void {
			_mapa.setCenter( new LatLng(40.736072,-73.992062),14,MapType.HYBRID_MAP_TYPE);
		}	
	}
}

How to use?

Simple just do that in your main application

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:google="com.igorcosta.*"  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
  	<google: GoogleFlexMap 
  		key="your_key_goes_here" 
  		width="100%" height="100%"/>
 
</mx:  Application>

Very important link before you start.

There’s a lot of to do to be more simple as possible, as soon as I get more time I will add more options to automate that.

String Util class for verify blank spaces

2
Filed under 3.0, Actionscript, Flex, Flex Components, Labs

I’d like to share with you a small class that is part of util package of AbsolutoBrasil a Brazilian framework we’ve been develop to help flex developers in Brazil to lavergage their day-by-day uses to automatizate process.
[java]
package br.absolutobrasil.utils
{
public class StringUtil
{

public static function verifyBlankSpaces(value:String):Boolean {
var cont:int=0;
for(var i:int=0;i if(value.substring(i,i+1)==” “) cont++;
if(cont==value.length)
return false;
else
return true;
}

}
}
[/java]
Use free at your project.

Component: Expire your Flex Application

6
Filed under 3.0, Actionscript, Flex, Flex Components, General announcements, Labs, Open Source Stuffs

One of the thing that is very handy useful is make a Flex Application expire in a certain period of time after 30 days or a specify counter for access and application.

Today I was reading at Flex-Brasil mail-list where a user request a kind of situation, how to limit for a certain time of period an execution of Flex application.

Than after that he gives to me idea to develop kind of component with no existing before in the Flex community.

It’s pretty simple enough the component and works like a charm, you define how much of time this application will be used, than choose your own message to alert the user the application request already take too much time to be executed.

Download and Installation.
First download the .swc . Then put inside the lib folder of your Flex Builder 3.

How to usage?

1
<custom:Expire PrintText="Application Expired!"/>

Available properties:

TimeToUse:int – represents the quantity of views that SWF will works.

ContactInfoForSupport:String – represents the contact information after the expiration shows up.

PrintText:String – The message you want to display to the user.

Requirements

I’ve tested only in Flex 3 beta 3. Don’t know if is compatible with Flex 2 or earlier versions.

Bug and questions?

Please reply with comments. Also if you want do donate I much appreciate.