July 18, 2011 / Daniel Freeman

Tutorial 6: More MadComponents

So far, we’ve mostly concentrated on list-based mobile applications. A lot of applications rely on lists and list-based navigation. But in this tutorial, we’re going to explore more features of MadComponents. Tab-based applications, View Flippers, Groups, Scrolling Containers, Pop-Ups and Sliding drawers.

To get the most out of this tutorial, we recommend that you read the previous parts, 1 to 5.

Upgrade to the Latest Version

Over the last few weeks, there have been a lot of improvements to MadComponents. At the time of writing, version0.5.6 is the latest. So we recommend that you download MadComponentsLib0_5_6.swc, or a later version when available.

Flash users can download the project from http://code.google.com/p/mad-components/downloads/list .

Flex (Flash Builder) users can check-out the latest .swc and MadComponents demos from the Subversion repository at: http://code.google.com/p/mad-components/source/checkout .

Please click “like” on the Google code site, if you like MadComponents.

Note that <treeNavigation> is deprecated. And the <dataGrid> was deprecated and removed. But both these classes will make a come-back in a forthcoming new extended MadComponents library.

Tab-Based Applications

You can use <tabPages> to navigate between pages using tab buttons.

<tabPages id=”pages”>

   {PAGE1}

   {PAGE2}

   {PAGE3}

<tabPages>

This layout will result in three tab buttons at the bottom of the screen. They are automatically numbered 0,1,2… If you want to assign a label, and/or icon to each button, you accomplish this in ActionScript:-

var tabPages:UITabPages = UITabPages(UI.findViewById(“tabPages”));
tabPages.setTab(0, “categories”, ICON0);
tabPages.setTab(1, “add”, ICON1);
tabPages.setTab(2, “search”, ICON2);

Where ICON0, ICON1, and ICON2 are image classes that you’ve embedded, like this:-

[Embed(source=”images/list.png”)]

protected static const ICON0:Class;

Typically the icons are 20×20 pixels.

A variation on the tab bar style is achieved by including the alt=”true” attribute. I’ve also specified a dark colour here:-

<tabPages id=”pages” alt=”true” colour=”#111122″>

View Flippers

A view flipper allows the user to change page using a swiping gesture, pulling the pages left and right with a finger movement.

<viewFlipper>

   {PAGE1}

   {PAGE2}

   {PAGE3}

</viewFlipper>

To change the colour of the ‘dots’, at the bottom of a view flipper page, or to change the colour of the scroll bar, for any container that has one – use the scrollBarColour attribute. For example:-

<viewFlipper scrollBarColour=”#FFFFFF”>

A view flipper can be utilised as a scrolling gallery, where the scrolling region is smaller than a page. There’s an example of this in the code repository. You can see it here.

Groups

You’ll notice that the pages shown above depict grouped items. Like this:-

Here, we have two input fields, inside a group:-

<group>

<input prompt=”First” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

<input prompt=”Last” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>
</group>

( Notice, we’ve set the background to white, so that it’s invisible against the white background )

Let’s add another rows to the group. A field for a phone number:-

<group>

   <input prompt=”First” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

   <input prompt=”Last” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

   <input prompt=”Number” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

</group>

Let’s put a label before the Number field:-

<group>

   <input prompt=”First” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

   <input prompt=”Last” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

   <horizontal>

   <label>phone:</label>

   <input prompt=”Number” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

   </horizontal>

</group>

Finally, we can put a dividing line between the word “phone:”, and the input field. We modify the layout by including a lines=”true” setting:-

<horizontal lines=”true”>

<label>phone:</label>

<input prompt=”Number” alignH=”fill” background=”#FFFFFF,#FFFFFF,#FFFFFF”/>

</horizontal>

clickableGroup

A clickable group is similar to a group in the grouped list that we learnt about in tutorial 3. The difference between a clickable group, and a grouped list, is that every row of a grouped list uses the same item renderer. But with a clickable group, every row may have a different layout.

Here is the layout we used:-

protected static const GROOOP:XML =<clickableGroup id="group" gapV="30" stageColour="#E9E9EF,#EFEFEF,8">

	<horizontal>
		<image>{getQualifiedClassName(DOG_ICON)}</image>
		<label>Daniel Freeman</label>
	</horizontal>

	<horizontal>
		<label alignV="centre">https://madskool.wordpress.com</label>
		<arrow alignV="centre" alignH="right"/>
	</horizontal>

	<horizontal>
		<label alignV="centre">http://e2easy.wordpress.com</label>
		<arrow alignV="centre" alignH="right"/>
	</horizontal>

</clickableGroup>;

Listen for Event.CHANGE to detect row clicks. The index property will return the index of the row clicked. Here’s a complete example:-

package {

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

	import com.danielfreeman.madcomponents.*;

	public class MadGroups extends Sprite
	{
		[Embed(source="images/dogicon.png")]
		protected static const DOG_ICON:Class;

		protected static const GROOOP:XML =<clickableGroup id="clickableGroup" gapV="30" stageColour="#E9E9EF,#EFEFEF,8" background="#EEEEFF,#FFFFFF,#FFFFFF">

			<horizontal>
				<image>{getQualifiedClassName(DOG_ICON)}</image>
				<label>Daniel Freeman</label>
			</horizontal>

			<horizontal>
				<label alignV="centre">https://madskool.wordpress.com</label>
				<arrow alignV="centre" alignH="right"/>
			</horizontal>

			<horizontal>
				<label alignV="centre">http://e2easy.wordpress.com</label>
				<arrow alignV="centre" alignH="right"/>
			</horizontal>

		</clickableGroup>;

		protected var _clickableGroup:UIForm;

		public function MadGroups(screen:Sprite = null) {
			if (screen)
				screen.addChild(this);

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

			UI.create(this, GROOOP);

			_clickableGroup = UIForm(UI.findViewById("clickableGroup"));
			_clickableGroup.disableClickableGroupRows([0]);
			_clickableGroup.addEventListener(UIForm.CLICKED, clickHandler);
		}

		protected function clickHandler(event:Event):void {
			trace("row clicked="+_clickableGroup.index);
		}
	}
}

Notice how we’ve disabled the first row:-

_clickableGroup.disableClickableGroupRows([0]);

And we’ve set this first row to a different colour to the others:-

background=”#EEEEFF,#FFFFFF,#FFFFFF”

The result looks like this:-

Scrolling Containers

To make a page scrollable, place it inside a <scrollVertical> container:-

<scrollVertical>

{PAGE}

</scrollVertical>

To control the scroll position from ActionScript, you can assign to the scrollPositionY property:-

var scroller:UIScrollVertical = UIScrollVertical(UI.findViewById(“list”));

scroller.scrollPositionY = 100.0;

The scrollXY container is often utilised to contain an image, or a page, allowing a user to pan around, scrolling in both directions. You must specify a width and a height as follows:-

<scrollXY width=”640″ height=”480″ border=”false”>

   <image>

   {getQualifiedClassName(BIG_PICTURE)}

   </image>

</scrollXY>;

A common convention is that the user double taps on the screen to enlarge a view. We can achieve this, without any coding, simply by including a tapToScale=”3.0″ setting.

<scrollXY width=”640″ height=”480″ border=”false” tapToScale=”3.0″>

In this case “3.0” is the magnification that will be used, when the picture is double-clicked.

You can find a code example demonstrating this (and other examples) on the MadComponents code repository.

Pop-Ups

Create a modal pop-up window using the UI.createPopUp() method, like this:-

_popUp = UI.createPopUp(POPUP_LAYOUT, 180.0, 200.0);

Where 180 is the width, and 200 is the height of the window.

To hide, and show a pop-up, use:-

UI.hidePopUp(_popUp);

and

UI.showPopUp(_popUp);

respectively.

If you no longer require a pop-up, you can remove it permanently, using:-

UI.removePopUp(_popUp);

Activity Indicator

An activity indicator is a rotating symbol that symbolises something is processing, or waiting.

To show and hide an activity indicator use:-

UI.showActivityIndicator();

and

UI.hideActivityIndicator();

Sliding Drawer

In the first tutorial, we used the goToPage() method to navigate between pages. We utilised two transitions. UIPages.SLIDE_LEFT and UIPage.SLIDE_RIGHT. There are also transitions for pages that slide up and down over the currently viewed page. For example:-

<pages id=”pages”>

   {PAGEo}

   {PAGE1}

</pages>

var pages:UIPages = UIPages(UI.findViewById(“pages”));

pages.goToPage(1, UIPages.SLIDE_UP);

   .

   .

   .

pages.goToPage(1, UIPages.SLIDE_DOWN);

The <pages> container is like <tabPages>, but without tabs. You control page changes in ActionScript. It is the base class of <tabPages>, <navigation>. So the above example will still work substituting <pages> for <tabPages> or <navigation>.

Note that the page number parameter to remove a page with a SLIDE_DOWN transition must be the same as the parameter we used to change to slide the page in. In this example, 1.

A variation on pages that slide up or down are sliding drawers. With a sliding drawer, you still see a portion of the original page, under the sliding drawer (But you can’t click on it, even though you can see it.). The drawer height is always the same, regardless of screen size, device resolution, or orientation:-

What’s next ?

In the next tutorial we’re going to look at the third and final Flash Builder 4.5 tutorial (from here), and do it the MadComponents way. While most developers are attracted to MadComponents’ UI components, its data capabilities for XML, JSON and AMF are possibly underrated. Adobe’s Flex Test Drive for Mobile tutorial shows how a mobile client app can connect to an Adobe AMF web service. The next tutorial will show how this can be accomplished much more simply with MadComponents. And how the MadComponents application is much smaller than the application generated with Flash Builder 4.5.

Please Blog about MadComponents

Please help spread the word about MadComponents and blog about it. It would be great if you could contribute more examples and tutorials, or even just talk about MadComponents, and what it can do.