Skip to content
May 2, 2011 / Daniel Freeman

New features in MadComponents 0.2.5

MadComponents is a lightweight framework and component library for Adobe AIR on mobile.

Version 0.2.5 has improved the appearance of picker and switch components, and introduced new <model> and <sendModel> tags for accessing the server.

Improved appearance

Connecting to the server

Let’s assume an online feed of names and ages.  For example:-

<?xml version="1.0" encoding="utf-8"?>
<people>
	<item>
		<name>Fred Bloggs</name>
		<age>32</age>
	</item>
	<item>
		<name>Sarah Wilson</name>
		<age>28</age>
	</item>
                .
                .
                .
	<item>
		<name>Frank Craig</name>
		<age>37</age>
	</item>
</people>

We can use the new <model> tag to load data into a form, list, or dataGrid.  For example, the following XML describes a list, and the data binding between the data and the custom row renderer.

<list id="myList">
	<model url="http://server.com/people.xml" action="load">
		<people>
			<item>
				<name>nameId</name>
				<age>ageId</age>
			</item>
		</people>
	</model>

	<horizontal>
		<label id="nameId"/>
		<label id="ageId" alignH="right">XX</label>
	</horizontal>
</list>

So without any ActionScript, the above XML MadComponents markup will populate the UIList component from the online feed, looking like this:-

The action=”load” attribute tells the data to be accessed immediately when the application is run.  But if we omit this attribute, we can accomplish getting the data under program control as follows:-

var myList:UIList = UIList(UI.findViewById("myList"));

myList.loadURL(url);

To populate a UIDataGrid with data downloaded from the server, we use a similar approach to the UIList, except that we refer to the names of the columns using the predefined names “column0”, “column1”, and so on.

<dataGrid>
	<model url="http://server.com/people.xml" action="load">
		<people>
			<item>
				<name>column0</name>
				<age>column1</age>
			</item>
		</people>
	</model>

	<widths>85,15</widths>
	<header>name,age</header>
</dataGrid>


Within forms, (<horizontal>, <vertical>, <frame>, and <columns> tags), we can use both <model> and <sendModel> descriptions to both send and receive data from the server.

<vertical>
	<sendModel url="http://server.com/people.xml" sendBy="xml" action="sendAndLoad">
		<login>
			<username>userNameId</username>
			<password>passwordId</password>
		</login>
	</sendModel>

	<model>
		<people>
			<item>
				<name>nameId</name>
				<age>ageId</age>
			</item>
		</people>
	</model>
	{FORM}
</vertical>

In the above example, the {FORM} XML will include UIInputs for the username and password, as well as UILabels to display the name and age.

Note that you can use sendBy=”get” or sendBy=”post” depending how your server-side code reads the sent data.

Where to get MadComponents

Download MadComponents from:-

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

Flash users, see:-

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

Flash Builder (Flex) users, just go to the Google Code site, and SVN the latest code.  Don’t forget to include the most recent MadComponents library.

Also, check out the three documentation pdfs available on the downloads page:-  http://code.google.com/p/mad-components/downloads/list

Advertisements

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: