Archive for the ‘ Uncategorized ’ Category

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).

Advertisements

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

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.

And another one – CollapsableTitleWindow grows up

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.