Sorry for being not so present

Guys I’m still here, but currently I just don’t have the time to add any new stuff here – but I still feel this blog is filled with interesting information so I will not tear it down. Just give me a few more weeks to get a stable Shirtnetwork solution and I will be right back here with fresh tutorials. Did I mention I will add another section on Oxid E-Sales programming, check it out – it’s one of the most intersting and powerful ecommerce solutions you can find (no it’s not a gigantic monolith like magento).

New Year, New Style

Thanks to wordpress.com team for the new monochrome style – finally a slick clean style that doesn’t break the source code inclusion on my blog :)

Adding width, height, x and y into the CSS Model of Flex

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 < numc; i++ ){
				var c:Object = obj.getChildAt(i);
				
				if(c is UIComponent){
					
					var child:UIComponent = c as UIComponent;
					updateProperties (child);
					
					var isTopLevel:Boolean = false;
					
					for each(var tclass:Class in topLevelClasses){
						if(c is tclass){
							isTopLevel = true;
							break;
						}
					}
					
					if(!isTopLevel)	updateChildProperties(child);
				}
				
			}
		}

		private static function updateProperties(obj:UIComponent):void{
			for each (var item:String in properties){
				var sdec:Object = obj.styleDeclaration;
				var prop:Object = obj.getStyle(item);
				if(prop != null){
					try{
						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

Actionscript PasswordUtil

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

Actionscript Cookie Util

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.

Edit:

Wow, I can’t believe how many people claim this as their own code – I’m not complaining but just renaming or removing the package name isn’t enough for a cheap copy :) Here are some examples (my js functions name starts with ‘snw_’ – this is our shirtnetwork prefix so this is quite funny to see):

http://code.google.com/p/goodboyxmeangirl/source/browse/trunk/railk/as3/utils/CookieUtil.as (he dropped a comment, so everything fine here now)

http://workingsoftwaresolutions.blogspot.com/2010/01/cookie-setting-in-flex-actionscript.html (added link to this post, changed package name – no problem)

http://www.imemment.com/post/86.html

And here is one I like, he links to this post and he didn’t rename the package to claim it as his own (at least i think that):

http://blog.jidolstar.com/454?t=c&i=0

Guys if you take the util this is fine, but if you just rename the package and put it onto your page without a backlink this sucks .

CollapsableTitleWindow is online again

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.

The UID thing

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.

Follow

Get every new post delivered to your Inbox.