Skip to content
May 11, 2011 / Daniel Freeman

Using MadComponents with MinimalComps or Flobile libraries

The latest updates to MadComponents (0.3) incorporates divided lists, search bar, activity indicator, and an optional right button on the navigation bar.  You can download the latest version, and documentation 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/

MadComponents isn’t the only choice for ActionScript Mobile developers.  It’s relatively new on the scene, and alternatives such as Keith Peter’s MinimalComps, Derek Grigg’s skinning library, and Todd Anderson’s as3Flobile components are very popular with developers.  (Although arguably, based more on the conventions of desktop applications than mobile ones).

But with MadComponents, you can enjoy the best of all worlds, incorporating other component libraries inside a MadComponents layout.

Here is an example, using Minimal Comps + Derek Grigg’s augmentations :-

package {
	import com.bit101.components.*;
	import com.dgrigg.skins.*;
	import com.danielfreeman.madcomponents.*;

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

	public class MadDemo extends Sprite {

		protected static const LAYOUT:XML = <vertical xmlns:minimal="com.bit101.components">
							<minimal:PushButton label="push me" alignH="fill" height="32" skinClass="com.dgrigg.skins::ButtonImageSkin"/>
						</vertical>;

		protected static const USES:Array = [PushButton,ButtonImageSkin,Knob];

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

			UI.create(this, LAYOUT);
		}
	}
}

Notice the USES definition. I’m not sure why – but if the component isn’t referenced in the code, you need to reference it in a dummy statement.  Maybe this is a bug in Flash builder?

Here is another example, utilising a Flobile picker component.  (Although you might want to look at MadComponents own picker component – if you need a picker.)

package {
	import com.custardbelly.as3flobile.controls.label.Label;
	import com.custardbelly.as3flobile.controls.picker.Picker;
	import com.custardbelly.as3flobile.controls.picker.PickerColumn;
	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.text.engine.ElementFormat;
	import flash.utils.getQualifiedClassName;

	public class MadPickerUI extends Sprite {

		protected static const LAYOUT:XML = <vertical xmlns:flobile="com.custardbelly.as3flobile.controls.picker">
							<flobile:Picker id="picker" itemHeight="50" alignH="fill"/>
							<image />
							<label id="day"/>
							<label id="month"/>
							<label id="year"/>
						</vertical>;

		protected var _picker:Picker;
		protected var _day:UILabel;
		protected var _month:UILabel;
		protected var _year:UILabel;

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

			UI.create(this, LAYOUT);

			_day = UILabel(UI.findViewById("day"));
			_month = UILabel(UI.findViewById("month"));
			_year = UILabel(UI.findViewById("year"));

			var dataProvider:Vector.<PickerColumn> = new Vector.<PickerColumn>();
			dataProvider.push( getPickerColumnMonths() );
			dataProvider.push( getPickerColumnDays( 50 ) );
			dataProvider.push( getPickerColumnYears( 80 ) );

			_picker = Picker(UI.findViewById("picker"));
			_picker.selectionChange.add( pickerSelectionDidChange );
			_picker.dataProvider = dataProvider;
		}

		protected function getPickerColumnDays( width:Number = Number.NaN ):PickerColumn {
			var column:PickerColumn = new PickerColumn(); //null, getQualifiedClassName(CustomPickerColumnItemRenderer));
			for( var i:int = 0; i < 31; i++ ) {
				column.data.push( {label:( i + 1 ).toString()} );
			}
			column.width = width;
			return column;
		}

		protected function getPickerColumnMonths( width:Number = Number.NaN ):PickerColumn {
			var column:PickerColumn = new PickerColumn(); //null, getQualifiedClassName(CustomPickerColumnItemRenderer));
			column.data = [{label:"January"}, {label:"February"}, {label:"March"}, {label:"April"}, {label:"May"}, {label:"June"}, {label:"July"},
				{label:"August"}, {label:"September"}, {label:"October"}, {label:"November"}, {label:"December"}];
			column.width = width;
			return column;
		}

		protected function getPickerColumnYears( width:Number = Number.NaN ):PickerColumn {
			var column:PickerColumn = new PickerColumn(); //null, getQualifiedClassName(CustomPickerColumnItemRenderer));
			var i:int = 50;
			while( --i > -1 ) {
				column.data.push( {label:(1973 + i).toString()} );
			}
			column.width = width;
			return column;
		}

		protected function pickerSelectionDidChange( column:PickerColumn, index:int ):void {
			var columnIndex:int = _picker.dataProvider.indexOf( column );
			if (columnIndex==0) {
				_day.text = column.data[index].label;
			}
			else if (columnIndex==1) {
				_month.text = column.data[index].label;
			}
			else {
				_year.text = column.data[index].label;
			}
		}
	}
}
Advertisements

3 Comments

Leave a Comment
  1. Bart / May 13 2011 9:28 am

    That USES dummy statement is probably there to make sure the component code gets compiled into the SWF. If you’d only reference the components by name (like from an XML) the player wont be able to find its definition at runtime because the compiler couldn’t know you want to use those classes and thus omitted it from the SWF.

  2. Layal Circus / Dec 5 2013 12:06 pm

    Hello! THANKS a lot for all these tutorials and work. I have a question about MadComponents / Flobile example : I wanted to trace column and index values within pickerSelectionDidChange, and I am surprised to see that once a call is done with

    ” _picker.selectionChange.add( pickerSelectionDidChange );”

    it won’t stop calling it, again and again even without having activity. I tried addOnce instead of add, but then there’s only one call for all. Is there a way to fix this forever calling problem ?

    protected function pickerSelectionDidChange( column:PickerColumn, index:int ):void {

    trace (“index: “,index,” column: “,column);

    var columnIndex:int = _picker.dataProvider.indexOf( column );
    if (columnIndex==0) {
    _day.text = column.data[index].label;
    }
    else if (columnIndex==1) {
    _month.text = column.data[index].label;
    }
    else {
    _year.text = column.data[index].label;
    }
    }

    • Daniel Freeman / Dec 12 2013 2:57 pm

      Actually – I wrote that so long ago – I’m afraid I don’t know why the picker selection changes keeps going. Have you considered using the MadComponents picker component?

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: