You know the problem, you are styling your flex application using css – you might even compile the css externally and load it through StyleManager at runtime. This is all fine, but when it comes to complex layouts you face one ugly thing, you can not set width, height, x and y through css as those are actionscript properties and not styles. But that quite sucks, you have to size everything through top, left, bottom and right styles – but sometimes you don’t want that.

To overcome that restriction I seeked throught the whole net and found the following

http://www.craftymind.com/2008/03/31/hacking-width-and-height-properties-into-flexs-css-model/

That was a nice base, but it required to override all the damn classes – this is no real solution for me, I need to have something easy I can just put into my application and get going. So i took what I found there and made another util out of it – the StylePropertyManager, this small class will help you to get to results as easy as possible. Here is an example how to use it (put the following into your main application or any container which should have it’s properties, and child properties, in the css model):

override public function styleChanged(styleProp:String):void{
	super.styleChanged(styleProp);
	StylePropertyManager.notifyStyleChanged(this,styleProp);
}

That’s it – the class will do everything else for you! There is just one restriction, if you have elements that get initialized through PopupManager or states you need to put the line into that class also. Let’s say you have a component called “MyPopup” which is being opened by PopupManager you need to set it up like the following:

<mx:TitleWindow
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="this.styleName='TitleWindowCheckoutCompletion'"
	>
        <mx:Script>
		<![CDATA[
			import de.aggro.utils.StylePropertyManager;

			override public function styleChanged(styleProp:String):void{
				super.styleChanged(styleProp);
				StylePropertyManager.notifyStyleChanged(this,styleProp);
			}
		]]>
	</mx:Script>
...

Note the code that get’s executed in the initialize handler, you need to set the stylename at that point to get to some results and you need to call the StylePropertyManager::notifyStyleChanged method.

Here is the code of StylePropertyManager:

package de.aggro.utils
{
	import mx.containers.*;
	import mx.controls.*;
	import mx.controls.sliderClasses.*;
	import mx.core.UIComponent;

	public class StylePropertyManager
	{

		private static const properties : Array = [
		"width", "height", "percentWidth", "percentHeight",
		"x", "y", "visible", "verticalScrollPolicy", "horizontalScrollPolicy",
		"columnWidth", "rowHeight", "layout", "direction"
		];

		private static const topLevelClasses: Array = [
			Slider, Button, ColorPicker, ComboBox, List, CheckBox, ButtonBar
		]

		public function StylePropertyManager()
		{
		}

		public static function notifyStyleChanged(scope:UIComponent, styleProp:String):void{
			if(!styleProp || styleProp == "styleName"){
				//if runtime css swap or direct change of stylename
				updateProperties(scope);
				updateChildProperties(scope);
			}
		}

		private static function updateChildProperties(obj:UIComponent):void{
			var numc:int = obj.numChildren;

			for ( var i : int = 0; i  " + prop);
						}
						obj[item] = prop;
						obj.invalidateDisplayList();
						obj.invalidateProperties();
						obj.invalidateSize();

					}catch(e:Error){}
				}
			}
		}

	}
}

Let me explain some things, first of all the properties array – it holds all the properties that you want to be reflected from the css to your component and it’s children. After that there is another array called topLevelClasses – it holds all the classes that have children which should not get the parents styles. I added the topLevelClasses array because I was setting the width of a slider and the manager reflected the width to it’s thumb, that looked kind of broken. Depending on your application needs you might need to adjust one or both of these arrays.

Ok now, you can set properties through css now – happy styling

P.S.: As usual this source code is free to use on a “do whatever you want with it” license, take it for commercial, private or whatever purpose and drop me a comment if you like it

Hi folks,

since so many people liked the CookieUtil, I will give away one of my other utils I have – a PasswordUtil. Many of you that are developing web applications with flex, or other actionscript 3 techniques, might have been in a situation where you needed to offer your users a solution to register up for a service. But what if you wanted to give your users the possibility to let you generate a password for them – solution is easy use PasswordUtil.

It allows you to generate random passwords in actionscript 3 of any length with just one single line of code. Just give a length and the chars that should be used. The class has predefined constants that you can use for the charset.

It comes with pre selected alphabets for the different chars you might want to use for your passwords, but you can extend it with any chars you like – change some lines and you can use it in russian or any other language.

Using it is easy:

var myPassword:String = PasswordUtil.generateRandomString( 32 , PasswordUtil.LETTERS);
trace(myPassword);

Just combine that with a button and a textinput field and voilá – there you go. The package contains a sample flex project that shows what you can do with it. It can also be used to generate a random integer of a specified length.

The scripts is public domain on a use it for whatever you like license, just like the CookieUtil.

http://depositfiles.com/files/yovo8uu4n

Hi folks,

a lot of time has gone by since my last post, I’m quite busy at the moment. But this didn’t stop me from setting up this post. I have written a small utility class which I think some of you really would like to use. It is a small class that makes it possible to set Cookies via Actionscript without adding anything to the HTML Wrapper, all the code will be injected at runtime.

I have packaged the whole thing as a ready to use flex project but feel free to use it in any other Actionscript 3 environment (Flash or pure AS3). You can grab the files here http://depositfiles.com/files/ry60vxfh8

The Util comes with methods for setting, getting and removing cookies – as mentioned before you do not have to change a single line in your wrapper, just import the class and start setting cookies from flash or flex. I have made this util because of some concerns using Flash Cookies (Shared Objects) with Internet Explorer 6 – now i do not use Shared Objects anymore if I do not really need them. I really do not know why this doesn’t come with any of the Adobe utils.

To use the util, download the file and put the de/aggro/utils/CookieUtil into your source folder, then try the following:

import de.aggro.utils.CookieUtil;
//Set a cookie named mycookie with a value of mycookie value with a time to live of 30 days
CookieUtil.setCookie("mycookie", "mycookie value", 30);
//Get that cookie and trace its value
trace(CookieUtil.getCookie("mycookie"));
//Delete the cookie from the users computer
CookieUtil.deleteCookie("mycookie");

Feel free to use the util for any commercial, private or educational purposes and drop me a comment if you like it.

Since so many people requested it, the sources are online again. No online demo yet but you can grab the files and check it out on your local System. See the post here.

Yesterday I had a really experience with Value Objects and Flex’s internal namespace. I had a bare value object which had a property “uid”. It was just a public property declared as int which I used to store Data from a Database. So When I tried to render those items in a TileList I suddenly could only highlight and select one of these items. F*** I thought, damn Flex bugs – so I searched the internet for “Flex UID” which leaded me to a great article on Flex’s internal uid behavior. The thing is, if you have a collection of items and you assign them as a dataprovider of some sort of List, the uid property is automatically added to every Value Object – but not if it is already there. Then Flex assumes you want to create your own uid for every object. So I just renamed the property (because all of those ids where the same at that point) and *bling* it works =)

So remember one thing, NEVER USE A PROPERTY CALLED UID IF IT ISN’T UNIQUE !!!

BTW: The Resizable Window class is still not fixed, I really try to do that as soon as possible.

Hi folks,

Thanks to everybody who commented on the CollapsableTitleWindow, I really appreciate that
I just wanted to let you know the current work in progress reagarding the CollapsableTitleWindow, the following things are being implemented at the moment:

• Adding a max/min width and height (already done, but I will let you see the code with the update)
• Fix the annoying bug when compiling for Flex 3 (there might be two versions in the future – I appologize but adobe has changed the BorderMetrics calculation)
• Let the window push forward if clicked anywhere – not only the titlebar.

I think the update might be ready this weekend, we’ll see. Stay tuned.

Today I wanted to show a simple preloader in an itemRenderer that just contained one Image. The problem was to get the image’s events before it was too late since you just can’t catch the OPEN, PROGRESS or COMPLETE event via MXML (Why did’t they just add the metadata for that?). I have seen quite a few approaches which extended the Image class but I wanted to use a custom Image class (SuperImage) to use it’s caching capabilities. So here is the example, I’m using a normal Image here but you can use any derived class you want, it just has to use the 3 events: (You might use the following as an ItemRenderer)

(Argh! WordPress destroyed the source code, I’ll repost it soon)

That’s it, using states it isn’t too hard to change the UI. If you need cool preloaders go checkout http://www.ajaxload.info – they will generate a gif which you can easily import into the Flash IDE to convert it to swf.

I have fixed the bug issued that it would close all other windows if closed (as I said, they were only invisible) and added CustomEvents and 2 properties most of you will like – startMaximized and startCollapsed. You can guess what the will do =) The events are resize, collapse, expand, maximize and minimize (opposite of maximize). They are all encapsulated in CollapsableTitleWindowEvent.

Source is the same as in the previous entry here

I have come around the Post regarding SuperPanel and was kind of upset it wasn’t that what I have been searching for. Also the perfomance is a little sucky (never mind ) So I thought I have to do it better – this is what I made out of it

Check the demo here (Currently down, get the files here)

You can add new Windows by Pressing the button, it will react exactly as you would expect it from a windows window. Double clicking the header will expand/shrink the window. If you collapse it it will set down to the bottom of it’s container. Please let me know what you think of it and I will release the source code. As you might guessed you can also resize the window by dragging the right lower corner. Al l graphics are drawn via code but this can be easily changed. There are Methods to let it come up expanded or shrinked, an initial size and position and much more. I’ll post the sources this weekend, if there is need for it.

[Update]

The source view is available now, I don’t know why but it doesn’t work using the contextual menu – but who cares use this link:

Download and View it HERE

See the documentation HERE

Temporary only downloadable (no demo online), my webspace is down at the moment – but get it here at Depositfiles

Here are some more examples on those implementations, none of them met my requirements:

http://manish.revise.org/archives/2005/01/09/resizable-titlewindow-in-flex/

http://dev.jessewarden.com/flex/collapsablepanel/

http://www.coenraets.com/

(All down :-O )

And the best one I found, but with to much overhead:

http://www.flexdaddy.info/2005/03/06/resizable-and-collapsable-titlewindow-flex-15/

License

This component is licensed under the MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Hi folks,

I recognized a lot of views on the last post I made came from users searching for stuff like 0xFFFFFFFF color code or something in that manner. This made me suggest there are a lot of people who do not understand what this means to Flex/Flash using Actionscript 3. So here is a little explanation:

Imagine you’d have a color code like this:

0xFFFF0000

This means a full opaque red for Flex, because the whole color code can be splitted into 4 regions (called channels) : Alpha, Red, Green and Blue

So for our example above this means you’re having the following channel options:

Alpha = FF (100%)
Red = FF (100%)
Green = 00
Blue = 00

So if you want to have a full opaque Blue you would write:

0xFF0000FF

Alpha = FF (100%)
Red = 00
Green = 00
Blue = FF (100%)

Now if you want to bring in lesser opacity you just have to reduce the alpha value. So to get a half opaque Green you would write:

0×8800FF00

Alpha = 88 (50%)
Red = 00
Green = FF ( 100%)
Blue = 00

So the conclusion out of this is that you will get a bright fully opaque white with writing:

0xFFFFFFFF

And a fully transparent “black” (transparent is transparent, no matter which color you take) with the following:

0×00000000

Some people who have a good understanding of colors (not me) can mix nearly every color just by mixing the colors in their head. If you are not interested in that (like me) just take a color picker and look at the Hexadecimal Code of the color.

The above will help you to get deeper into making effects using the Bitmap and BitmapData class and their methods. You can see a really simple example in the last tutorial – it shows you how to take out specific colors from an Bitmap in Flex / Flash using Actionscript 3. So go and have some fun with Bitmaps and Colors !