MadComponents sans XML

MadComponents is a free library to make user interfaces for Flash/AIR on Mobile.  (iPhone, Android, etc.).  MadComponents projects can be authored using either Flash, Flex (Flash Builder), or command line tools (amxmlc, adt).

Usually, the layout is defined using XML.  This approach will be familiar to developers who’ve used HTML, Adobe MXML, Java Swing, or native Android development.  The advantage of an XML layout description is that the renderer can adapt for different screen sizes and resolutions.

By the way, for a bit more control over the positioning of components described by an XML layout, you can always use an <image> as a spacer/padding.

eg:  <vertical><switch/><image>45,25</image><switch/></vertical>

…where 45 is the width, and 25 the height.

But for precise absolute positioning, it is possible to utilise MadComponents in a good ol’ fashioned Pure ActionScript way, in ActionScript 3.

For example…

package
{

	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.text.TextFormat;

	public class MadComponentsPure extends Sprite {

		public function MadComponentsPure() {

			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var label:UILabel = new UILabel(this, 20, 10, "Hello World", new TextFormat("Times",24,0xCCCCCC,true));
			var button:UIButton = new UIButton(this, 20, 50, "button", 0xCCFFCC, new <uint>[]);
			button.fixwidth = 80.0;
			var slider:UISlider = new UISlider(this, 20, 100, new <uint>[]);
			slider.fixwidth = 160.0;
			slider.value = 0.3;
			var input:UIInput = new UIInput(this, 20, 140, "input", new <uint>[0x9999AA,0xEEEEFF], true);

			var picker0:UIPicker = new UIPicker(this, <picker/>, new Attributes(20,200,120,200), false, false);
			var picker1:UIPicker = new UIPicker(this, <picker/>, new Attributes(140,200,40,200), false, false);
			var picker2:UIPicker = new UIPicker(this, <picker><data><year label="2010"/><year label="2011"/><year label="2012"/></data></picker>, new Attributes(180,200,80,200), false, false);

			picker0.xmlData = <data>
								<January/>
								<February/>
								<March/>
								<April/>
								<May/>
								<June/>
								<July/>
								<August/>
								<September/>
								<October/>
								<November/>
								<December/>
							</data>;

			var data:Array = [];
			for (var i:int = 1; i<=31; i++) {
				data.push({label:i.toString()});
			}
			picker1.data = data;</pre>
var uiSwitch:UISwitch = new UISwitch(this ,20, 380);
		}
	}
}

Notes on the above example:-

1. The vector parameter ( new <uint>[] ) can contain the colour values usually expressed in the XML background attribute.  (See layout documentation http://code.google.com/p/mad-components/downloads/list )

2. The picker has an attributes parameter which defines a rectangle (x, y, width, and height).

3. Note 3 ways to populate a list or picker.  XML data description, assign array to list.data, or assign XML to list.xmlData.

4. Also note two ways to describe list values in XML:   <item label=”one”/><item label=”two”/><item label=”three”/>  or the shorthand way: <one/><two/><three/>

Here are some further examples of defining pickers and lists in Pure ActionScript:-

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import com.danielfreeman.madcomponents.*;

	public class MadComponentsPurePicker extends Sprite {

		protected static const DATA:XML = <data>
											<Apple/>
											<Orange/>
											<Banana/>
											<Pineapple/>
											<Lemon/>
											<Mango/>
											<Plum/>
											<Cherry/>
											<Lime/>
											<Peach/>
											<Pomegranate/>
											<Grapefruit/>
											<Strawberry/>
											<Melon/>
										</data>;

		public function MadComponentsPurePicker() {
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var columns:UIForm = new UIForm(this, <columns gapH="0"><picker>{DATA}</picker><picker>{DATA}</picker></columns>,new Attributes(0,0,280,200));
			columns.x = 20;
			columns.y = 40;
		}
	}
}

package
{

	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.text.TextFormat;

	public class MadComponentsPureList extends Sprite {

		public function MadComponentsPureList() {

			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			var list:UIList = new UIList(this, <list/>, new Attributes(0,0,320,480));

			list.xmlData = <data>
								<January/>
								<February/>
								<March/>
								<April/>
								<May/>
								<June/>
								<July/>
								<August/>
								<September/>
								<October/>
								<November/>
								<December/>
							</data>;

		}
	}
}

Get the latest version, and documentation for MadComponents from:-

http://code.google.com/p/mad-components/downloads/list

Flex (Flash Builder) users can check out examples from the subversion repository:-

http://code.google.com/p/mad-components/source/checkout

Flash users can build MadComponents mobile applications using Flash.  Just follow the instructions at:-

https://madskool.wordpress.com/2011/04/24/getting-started-with-madcomponents-in-flash/

UPDATE:-

I noticed a Burrito flavoured post on Adobe feeds, concerning IOS style buttons in Flex 4.5, prompting me to write this update, about how to achieve a similar outcome in MadComponents 0.3.9+.  For example:-

<navigation id=”nav” rightButton=”done”/>

<navigation id=”nav” rightArrow=”next”/>

You can listen for clicks like this:-

var nav:UINavigation = UINavigation(UI.findViewById(“nav”));

var bar:UINavigationBar = nav.navigationBar;

bar.rightButton.addEventListener(UIButton.CLICK,rButtonClick);

//or

bar.rightArrow.addEventListener(MouseEvent.MOUSE_UP,rArrowClick);