Skip to content
April 6, 2011 / Daniel Freeman

MadComponents update

I’ve just completed the 0.1 update of MadComponents, and I’ve put it up onto Google code:

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

MadComponents are UI components for Adobe AIR on iPhone, Android, etc.  It renders an XML description of your UI, so it is device screen size and resolution independent, and it even handles orientation changes (landscape-portrait).

For an introduction, see: https://madskool.wordpress.com/2011/03/18/madcomponents-wow/

Version 0.1 incorporates the following new features:-

1. Tree Navigation.  (Each list option invokes a different list at the next level.)

2. Picker component.  (Spin-able list selector)

3. DataGrid.  (Tabulated data component).

4. tickOneList component.  (like the tickList, but only one may be selected)

5. New “data” tag for specifying list items.  (see examples below).

6. New “UI” class.  UIFormStart is now deprecated.

7. Improvements to version-0.0 components.

Here are examples showing how to use Tree Navigation, Pickers, and DataGrids in your mobile applications.  (Example code is available to checkout from here.)

package
{
	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;

	public class MadComponentsTree extends Sprite {

		protected static const DATA:XML = <data>
											<Animals>
												<Felines>
													<Tiger/>
													<Leopard/>
													<Lion/>
													<Panther/>
												</Felines>
												<Canines>
													<Dog/>
													<Wolf/>
													<Hyena/>
												</Canines>
												<Monkeys>
													<Baboon/>
													<Macaques/>
													<Chimpanzee/>
												</Monkeys>
											</Animals>
											<Household>
												<Kitchen>
													<Cooker/>
													<Fridge/>
													<Table/>
													<Cupboard/>
												</Kitchen>
												<Lounge>
													<Television/>
													<Sofa/>
													<Rug/>
													<Fireplace/>
												</Lounge>
											</Household>
											<Colours>
    											<Red/>
        										<Orange/>
        										<Yellow/>
        										<Green/>
        										<Blue/>
												<Indigo/>
											</Colours>
										</data>;

		protected static const DETAIL:XML = <vertical>
												<label id="detail" alignH="centre" alignV="centre">ggg</label>
											</vertical>

		protected static const TREE_NAVIGATOR:XML = <treeNavigation id="tree">
														{DATA}
														{DETAIL}
													</treeNavigation>;

		protected var _detail:UILabel;

		public function MadComponentsTree() {
			var i:int;
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			UI.create(this, TREE_NAVIGATOR);

			var uiTreeNavigation:UITreeNavigation = UITreeNavigation(UI.findViewById("tree"));
			uiTreeNavigation.addEventListener(Event.COMPLETE,treeComplete);

			_detail = UILabel(UI.findViewById("detail"));
		}

		protected function treeComplete(event:Event):void {
			_detail.text = UITreeNavigation(event.target).label;
		}

	}
}
package
{
	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;

	public class MadComponentsDataGrid extends Sprite {

		protected static const DATA_GRID:XML = <vertical background="#FFCC33,#FFDD00">
												<dataGrid id="grid" editable="true" background="#663300,#cc9900,#ff9933">
												<widths>20,20,60</widths>
												<data>
													<header>one,two,three</header>
													<row>1,2,3</row>
													<row>4,5,6</row>
													<row>7,8,9</row>
													<row>2,7,5</row>
												</data>
											</dataGrid>
											<button id="reload" background="#FF6666">reload</button>
											</vertical>;

		protected var _testData:Array = [[2,3,4],[5,6,7],[8,9,0],[4,6,8]];

		public function MadComponentsDataGrid() {
			var i:int;
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			UI.create(this, DATA_GRID);

			var button:UIButton = UIButton(UI.findViewById("reload"));
			button.addEventListener(MouseEvent.MOUSE_UP,reload);
		}

		protected function reload(event:MouseEvent):void {
			var dataGrid:UIDataGrid = UIDataGrid(UI.findViewById("grid"));
			dataGrid.dataProvider = _testData;
			_testData[1][1] = 1;
			dataGrid.invalidate();
		}

	}
}
package
{
	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;

	public class MadComponentsPicker extends Sprite {

		protected static const START:XML = <vertical>
												<button id="popup" alignH="centre" alignV="centre">picker pop-up</button>
											</vertical>;

		protected static const DATA:XML = <data>
	    									<Red/>
	        								<Orange/>
	        								<Yellow/>
	        								<Green/>
	        								<Blue/>
											<Indigo/>
										 </data>;

		protected static const PICKER_EXAMPLE:XML = <vertical alignH="fill">
											<columns gapH="0">
												<picker id="picker1" background="#FFFFFF">
													{DATA}
												</picker>
												<picker id="picker2" background="#FFFFFF">
													{DATA}
												</picker>
											</columns>
											<columns>
												<button colour="#66CC66" id="cancel">cancel</button>
												<button colour="#CC6666" id="ok">ok</button>
											</columns>
										</vertical>;

		protected var _popUp:UIWindow;
		protected var _picker1:UIPicker;
		protected var _picker2:UIPicker;

		public function MadComponentsPicker() {
			var i:int;
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			UI.create(this, START);

			//Set up a pop-up window
			_popUp = UI.createPopUp(PICKER_EXAMPLE,180.0,200.0);
			UI.hidePopUp(_popUp);

			//references to picker1 and picker2
			_picker1 = UIPicker(_popUp.findViewById("picker1"));
			_picker2 = UIPicker(_popUp.findViewById("picker2"));

			//Listeners for showing and hiding pop-up
			var showPopUpButton:UIButton = UIButton(UI.findViewById("popup"));
			showPopUpButton.addEventListener(MouseEvent.MOUSE_UP,showPopUp);

			var okButton:UIButton = UIButton(_popUp.findViewById("ok"));
			okButton.addEventListener(MouseEvent.MOUSE_UP,popUpOk);

			var cancelButton:UIButton = UIButton(_popUp.findViewById("cancel"));
			cancelButton.addEventListener(MouseEvent.MOUSE_UP,popUpCancel);
		}

		protected function showPopUp(event:MouseEvent):void {
			UI.showPopUp(_popUp);
		}

		protected function popUpOk(event:MouseEvent):void {
			trace("picker1.index="+_picker1.index+" picker2.index="+_picker2.index);
			UI.hidePopUp(_popUp);
		}

		protected function popUpCancel(event:MouseEvent):void {
			UI.hidePopUp(_popUp);
		}

	}
}

(Note:  To try this out – you do not need a mobile version of AIR, nor the most recent versions of Flash Builder or Flash.  If you test this application in the browser, ensure that you resize the window after starting.

Advertisements

4 Comments

Leave a Comment
  1. Richard Tolley / May 24 2011 3:48 am

    Hi

    Great Work 🙂

    Can you tell me if it is possible to set the width of a picker?

    This is driving me crazy.

    I also would like to know if it’s possible to left/centre/right align text on picker?

    I was hoping for something like

    picker id=”picker1″ width=”50″ alignH=”centre”

    I have a long list of numbers 1 – 100 left aligned a) doesn’t look correct and b) needs a narrow picker – single picker on a page seems to fill the width.

    Any help – greatly appreciated.

    Once again – superb work!

    Rich

    • Daniel Freeman / May 24 2011 8:02 am

      First of all, It’s great to have some feedback on MadComponents. If anyone has suggestions or requests, I’ll do what I can to accommodate them. (Although, I want to keep MadComponents lite, so I’ll refrain from adding anything major – and the deprecated datagrid component won’t be included in the next update).

      The ability to define widths for a container is coming anyway in the next update. But Rich’s question also revealed a deficiency with Lists/Pickers that I need to sort out.

      I should be able to put out a new update today. Watch this space.

  2. Manx / Jun 3 2011 2:49 pm

    Is there or can you give an example of how to add “detail” information? I want to add quite a bit of copy and photos. How would I add those to the Tree Navigation example?

    • Daniel Freeman / Jun 3 2011 5:49 pm

      In the example, the DETAIL XML can be as sophisticated as you like – incorporating images, more text, etc.

      So then, you need to work out which images and copy to assign to the detail page when it is displayed.

      TreeNavigators emit an Event.CHANGE whenever the view changes, and an Event.COMPLETE when the detail page is displayed.

      var index:int = _uiTreeNavigation.index; //This is the index of the last list item pressed.
      var label:String = _uiTreeNavigation.label; //This is the label on the last item pressed.
      var pageNumber:int = _uiTreeNavigation.pageNumber; // Is which page is being displayed.

      So you could use these methods, within “treeChange” (see example) – to track where you are in the tree.

      But if the label items before the detail page are all different – you could always set up a Dictionary data structure, referenced by the label – and assign the information to the detail page within “treeComplete”.

To discuss MadComponents/MC3D, join the Facebook group!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: