Looking for solutions on the interwebz reveals a few gems, but none that I like – mainly because they involve hard-coding widths. After some minor digging around the Tab Navigator source and doing a few experiments, I found a solution of my own.

Its quite simple actually:

1. The Tab Navigator is made up of several UIComponents in the standard Flex SDK. The actual tab that the user clicks is simply a Button.
2. The Tab Navigator has a getTabAt() method, which returns a Button object.
3. A Button, being a sub class of UIComponent, has the invalidateDisplayList() method. Calling this will
   

   Mark a component so that its updateDisplayList() method gets called during a later screen update.

Put the above steps together and you can create a custom Tab Navigator that calls invalidateDisplayList() on it’s first Tab after the CREATION_COMPLETE event is fired. See below for the simple code…

package foo
{
	import mx.containers.TabNavigator;
	import mx.events.FlexEvent;

	public class SweetTabNavigator extends TabNavigator
	{
		public function SweetTabNavigator()
		{
			super();
		    this.addEventListener(FlexEvent.CREATION_COMPLETE,
                            this.onCreationComplete);
		}

		protected function onCreationComplete(event:FlexEvent):void
		{
			this.getTabAt(0).invalidateDisplayList();
		}
	}
}

If you use this logic in your app, please extend Tab Navigator as seen above… Don’t go bloating your code with event handlers in the parent window, adding code inline in your MXML, etc…

Enjoy!

At any rate, I wrote a small static class for logging to firebug from a Flex app. Use it however you wish:

package ctz.util
{
	import flash.external.ExternalInterface;

	public final class ConsoleLog
	{
		public function ConsoleLog()
		{
			throw new Error("static methods only");
		}

		public static function log(o:Object):void
		{
			if (o is Array)
				ConsoleLog.logArray(o as Array);
			else if (o is String)
				ConsoleLog.logString(o as String);
			else
				ConsoleLog.logObject(o);
		}

		public static function logString(msg:String):void
		{
			if (ExternalInterface.available)
				ExternalInterface.call("function log(msg){ if (window.console) { console.log(msg); } }", msg);
		}

		public static function logObject(obj:Object):void
		{
			var s:String = "";
			for (var k:String in obj)
				s += k + ": " + obj[k];
			ConsoleLog.logString(s);
		}

		public static function logArray(arr:Array):void
		{
			var s:String = "Item Count: " + arr.length + " || ";
			for (var i:int = 0; i < arr.length; i++)
				s += i + ": " + arr[i] + " ";
			ConsoleLog.logString(s);
		}
	}
}

File can be downloaded here.

When writing custom components in Flex (and more or less writing anything to do with DisplayObjects in Flex) you find yourself writing a lot of the same, boring code. Basically, you instantiate a new DisplayObject, set some common properties on it, and then add it to a container. For example, take the following piece of code:

private function createUI():void
{
    var vbox:VBox = new VBox();
    vbox.percentWidth = 100;
    vbox.percentHeight = 100;
    vbox.name = 'My name is vbox';

    var txt:TextInput = new TextInput();
    txt.text = 'I am a TextInput';
    txt.setStyle('borderStyle', 'solid');
    txt.setStyle('borderThickness', 1);

    vbox.addChild(txt);
}

Pretty boring stuff, right?

Enter ctz.util.FlexUtils. With FlexUtils, you can cut down on writing all that boring code – like the snippet above. While there is nothing too complex or ground-breaking in this class, I find it to be quite helpful… and you may too:

package ctz.util
{
	import flash.display.DisplayObject;
	import flash.display.DisplayObjectContainer;
	import flash.utils.*;

	import mx.collections.ArrayCollection;

	public final class FlexUtils
	{
		public function FlexUtils()
		{
			throw new Error('static methods only');
		}

		/**
		 * Create a Display Object and add some atts
		 */
		public static function createDisplayObject(typeName:Class, atts:Object=null):DisplayObject
		{
			try {
				var o:DisplayObject = new typeName();
				if (atts != null) {
					for (var k:String in atts) {
						if (o.hasOwnProperty(k)) {
							o[k] = atts[k];
						} else {
							typeName(o).setStyle(k, atts[k]);
						}
					}
				}
			} catch (e:Error) {
				trace('Error in FlexUtils.createDisplayObject: ' + e.message);
			}
			return o;
		}

		/**
		 * Given a root display object, get all children of the same type, recursively
		 */
		public static function getChildrenByType(collection:ArrayCollection, typeName:Class, rootObject:DisplayObjectContainer):void
		{
			var dobj:DisplayObject;
			for (var i:int = 0; i < rootObject.numChildren; i++) {
				dobj = rootObject.getChildAt(i);
				if (dobj is typeName)
					collection.addItem(dobj);
				if (dobj is DisplayObjectContainer)
					FlexUtils.getChildrenByType(collection, typeName, dobj as DisplayObjectContainer);
			}
		}

		public static function objDump(o:Object):String
		{
			var s:String = '';
			for (var key:String in o)
				s += key + ' => ' + o[key] + '\n';
			return s;
		}
	}
}

Note, I should probably update the two custom components I have published to use this class, but I really don’t have the time these days.

The createUI() method from the snippet above is magically transformed into the snippet below using FlexUtils.createDisplayObject()…

private function createUI():void
{
    var atts:Object = {percentWidth: 100, percentHeight: 100, name: 'My name is vbox'};
    var vbox:VBox = FlexUtils.createDisplayObject(VBox, atts) as VBox;

    atts = {text: 'I am a TextInput', borderStyle: 'solid', borderThickness: 1};
    var txt:TextInput = FlexUtils.createDisplayObject(TextInput, atts) as TextInput;

    vbox.addChild(txt);
}

I hope someone finds this remotely useful.

You can download the file here.

Anyways, the issue at hand is setting up event bindings via jQuery inside of a class. This is easier explained with a simple code example. Take the following class:

function Page()
{
	var msg  = 'weeeeeeee';

	this.bindElements = function(elementOne, elementTwo)
	{
		$(elementOne).click(function() {
			this.elementOneStuff('yoyo');
		});
		$(elementTwo).click(this.elementTwoStuff);
	}

	this.elementOneStuff = function(a)
	{
		alert(a);
	}

	this.elementTwoStuff = function()
	{
		alert(this.msg);
	}
}

var p = new Page();
p.bindElements('#btnOne', '#btnTwo');

When you instantiate a new Page object and invoke the bindElements method you get barked at:

this.elementOneStuff() is not a function.

My initial reaction was that it was a scoping issue with my privileged class methods. After changing the architecture of my class to use public methods the same issue was there.

Solution / Answer

The this keyword that is being used in both of the callbacks will refer to the DOM element that dispatched the event…. not an instance of the Page Class. This is in fact the correct behavior as it will almost always be what is desired.

jQuery.bind( type, [data], fn ) to the rescue! Straight from the jQuery documentation:

data (Optional) Object
Additional data passed to the event handler as event.data

We can simply pass an object as the data parameter to the bind method and then invoke our class methods through event.data. So the updated, correct code would be:

function Page()
{
	var msg  = 'weeeeeeee';

	this.bindElements = function(elementOne, elementTwo)
	{
		$(elementOne).bind('click', this, function(evt) {
			evt.data.elementOneStuff('yoyo');
		});
		$(elementTwo).bind('click', this, function(evt) {
			evt.data.elementTwoStuff();
		});
	}

	this.elementOneStuff = function(a)
	{
		alert(a);
	}

	this.elementTwoStuff = function()
	{
		alert(this.msg);
	}
}

This took me more time to figure out than I would like to admit. I am posting this in the hopes that it saves someone some time and frustration.

The Flex UIComponents for Dates, namely DateField and DateChooser let you easily collect date information from the users of your application(s). However, and I’m not exactly sure why, but these components lack an interface for choosing time. The application I’m currently working on deals heavily with Date/Time – thus this was a major issue for me.

A quick search on Google returns a bunch of custom components which solve the issue of choosing Date/Time in Flex. While a few of the components I found would have been fine for my use I decided to roll my own, mainly for educational purposes.

This component can be customized in several different ways. Additionally, all of the children (e.g. NumericSteppers) are exposed so that styles can be applied. Let me know if you have any questions on some of the properties as I am only showing the basics here.

Source can be downloaded here.

Enjoy!

Anyways, I wanted something like this that I could use in applications for aesthetic purposes. I found a few solutions here and there which would have been adequate. However, for educational purposes, I decided to just roll out my own. Now, there are a few quirks here and there, but overall I am satisfied with the outcome. Just be careful if you are placing children inside ( take into account padding if you are giving the box heavily rounded corners ). Additionally, when rounding the corners and using a height / width that scales ( percentage ), it is important to find and use a minHeight and minWidth or else the box WILL become all wacked out when it gets small. It is all relative to the amount of corner radius you specify. Use the style explorer to see what I mean.

Below is a screen shot of what can be created using this component.

A style explorer can be found here ( with a link to source ).

Source can be downloaded here.

Enjoy!

The issue:
When scrolling through the data with the mouse wheel, the scroll bar was ’stepping’ to far and some rows were getting cut off. For example, if there were 40 rows of data and the amount of visible rows was 5, using the mouse wheel to scroll one notch would move the scroll index from position 0 to 7. This is a problem because it forces the user to either use the scroll arrows or drag the scroll bar to see every row. Which sucks because mouse wheels rule and make everyone’s life easier.

The solution:
Intercept the mouse wheel events that are fired and tell the component how to scroll. It’s quite simple actually. The first thing to do is register 2 event listeners on the Component, like so:

private function init():void
{
	this.adg.addEventListener(Event.RENDER, this.updateScroll, false, 0, true);
	this.adg.addEventListener(MouseEvent.MOUSE_WHEEL, this.handleMouseWheel, false, 0, true);
}

In the function above, adg references an AdvancedDataGrid, but that’s not really important. The Event.RENDER event is dispatched when the display list is about to be updated and rendered (the keyword being ‘about’). Consult the API Docs for a better description of this event. The MouseEvent.MOUSE_WHEEL is dispatched whenever the user scrolls with the Mouse Wheel.

The next part to look at is the method invoked after Event.RENDER is dispatched: updateScroll(). This method simply updates a variable with the vertical scroll position of the Component:

private function updateScroll(event:Event):void
{
	this.scrollPos = this.adg.verticalScrollPosition;
}

The last part to look at is the method invoked after MouseEvent.MOUSE_WHEEL is fired: handleMouseWheel(). This method uses the scrollPos variable that is constantly being updated via updateScroll() and intercepts mouse wheel events in order to override the behavior of vertical scrolling:

private function handleMouseWheel(event:MouseEvent):void
{
	var num:int = event.delta / Math.abs(event.delta);
	if( ( this.scrollPos - num ) <= 0)
		this.adg.scrollToIndex(0);
	} else if( ( this.scrollPos - num ) >= this.adg.maxVerticalScrollPosition ) {
		this.adg.scrollToIndex( this.adg.maxVerticalScrollPosition );
	} else {
		this.adg.scrollToIndex( this.scrollPos - num );
	}
}

This is also very straight forward: evaluate the current scroll position and proceed accordingly without causing wacky behavior. In other words, if the result of (scrollPos – num) is <= 0 or >= to the max vertical scroll position, send (or keep) the scroll wheel to the appropriate extreme, else scroll 1 unit in the appropriate direction.

Note: eventually I’ll start adding interactive examples here… someday.

thefuckingweather.com

That is all.

Oh and this.

Slacker Mobile is a great FREE streaming radio service for the blackberry. Simply type in an artist / band of your choice and you are instantly taken to your own personalized radio station where your chosen band will be played as well as several similar bands (a great way to discover new music). You can also choose from hundreds of ‘expert programmed’ stations. Better yet, you are given instant access to album info and band bios.

Perhaps the best feature is the ability to cache radio stations to your device’s memory card. This way you can listen to music pretty much anywhere… as long as your device’s battery isn’t dead.

Open up your device browser and go to http://www.slacker.com/mobile/blackberry/ to download and install.

The entity name must immediately follow the ‘&’ in the entity reference

The error message is sketchy, especially given the fact that the logical OR operator is allowed.
The ampersand needs to be html-encoded (after all, MXML is an XML-based markup language!)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
		[Bindable] private var arg1:Boolean;
		[Bindable] private var arg2:Boolean;

		private function validate():Boolean {
			return (this.arg1 && this.arg2);
		}
		]]>
	</mx:Script>

	<!-- bad -->
	<mx:Button enabled="{(this.arg1) && (this.arg2)}" />

	<!-- good -->
	<mx:Button enabled="{(this.arg1) &amp;&amp; (this.arg2)}" />

	<!-- also good, but more code -->
	<mx:Button enabled="{this.validate()}" />
</mx:Application>