OBO_Accordion: Another Scripted UI “Widget”

Long ago, I created a package for handling “Complex Buttons” – that is buttons that remain selected until another button in the same “group” is selected. In a nutshell, the developer creates a class that describes visual states of his button and implements the interface IComplexButton. These classes are wrapped inside a ComplexButton instance. Several of these ComplexButton instances are then passed to a Menu class (which is finally added to the display list) which handles all mouse interaction (rollovers, dragovers, clicks, release outsides, etc) and maintains button state. For more information and some downloads, check out this old post over at Kirupa.com.

Why do I blather on about all this, you ask? Well, when I was trying to create an Accordion widget to use in my ASDoc Gui (post before this), I thought this little Complex Button “framework” (for lack of better term) would be just the way to go. Well, I was right and I was wrong. It turns out that the way I had written the ComplexButton class it would not work for an accordion (for starters, it disables mouse communication with its children – something you definitely look for in an accordion. It just went downhill from there.). Well after an hour or two of mucking about with the ComplexButton class, I finally just copied and pasted the whole schmeer into a new .as file, deleted what I didn’t want and added what I did. This is a horrible horrible coding practice. It should have been extended, encapsulated, or something. Instead I now have two nearly identical classes with nearly identical function – ComplexButton and ComplexAccordionButton – residing in the same package. Ouch. Lesson learned: ALWAYS design with extension in mind. It’s not just something you read in all the hot titles.

Anyway, that coding architecture faux pas aside, I now have a very nice Accordion widget added to my ui package that I shared earlier. A straight out of the box, no frills version looks something like this:

[kml_flashembed movie=”http://blog.onebyonedesign.com/wp-content/uploads/2008/06/accordion_basic.swf” height=”400″ width=”400″ /]

And with a simple dose of customization, you could make something like this:

[kml_flashembed movie=”http://blog.onebyonedesign.com/wp-content/uploads/2008/06/accordion_fancy.swf” height=”400″ width=”400″ /]

Both of these examples come from this simple script (just uncomment/recomment the lines for the basic or fancy accordion):

package {
 
	import com.onebyonedesign.ui.OBO_Accordion;
	import flash.display.Sprite;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
 
	/**
	* Example usage of OBO_Accordion class
	* @author Devon O.
	*/
 
	public class AccordionTest extends Sprite {
 
		private var _accordion:OBO_Accordion;
 
		public function AccordionTest():void {
			var content1:Sprite = createContent();
			var content2:Sprite = createContent();
			var content3:Sprite = createContent();
 
			var accordionInfo:Array = new Array( { label:"Content One", content:content1 }, { label:"Content Two", content:content2 }, { label:"Content Three", content:content3 } );
 
			// basic accordion
			_accordion = new OBO_Accordion(accordionInfo);
 
			// fancy pants accordion
			//_accordion = new OBO_Accordion(accordionInfo, 200, 350, 20, 0x4B4B4B, 0x292929, "_typewriter", 11, 0xFFFFFF, true);
			//_accordion.filters = [new DropShadowFilter()];
 
			_accordion.x = int(stage.stageWidth * .5 - _accordion.width * .5);
			_accordion.y = int(stage.stageHeight * .5 - _accordion.height * .5);
 
			addChild(_accordion);
 
			// getItemAt() method allows access to Accordion content
			_accordion.getItemAt(0).getChildByName("textField").text = "This is text added after accordion creation.";
		}
 
		/**
		 * Just creates a randomly colored sprite as test content
		 */
		private function createContent():Sprite {
			var content:Sprite = new Sprite();
			content.graphics.beginFill(Math.random() * 0xFFFFFF);
			content.graphics.drawRect(0, 0, 350, 200);
			content.graphics.endFill();
 
			var tf:TextField = new TextField();
			tf.autoSize = TextFieldAutoSize.LEFT;
			tf.x = tf.y = 25;
			tf.name = "textField";
			tf.text = "This is text added during content creation.";
 
			content.addChild(tf);
 
			return content;
		}
	}
}

If interested, you can download the new ui package here. It includes all the classes from the last post, plus the accordion, plus the complex button package, plus documentation.

Incidentally, the Accordion requires Tweener for its animation, but you’re welcome to re-write the AccordionSection.as file to use whatever tweening package you’re most comfortable with. Me, I like Tweener.

Hope this may help some folks out…