Skip to content
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.

Further reading

To find out more about MadComponents, you can read the other related threads on this blog, or download the documentation or examples for Flash at http://code.google.com/p/mad-components/downloads/list

There are also lots of code examples to view or check-out from the subversion repository at http://code.google.com/p/mad-components/source/checkout

Please subscribe to this blog if you want to catch subsequent tutorials.

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.

Advertisements

36 Comments

Leave a Comment
  1. cole / Aug 30 2011 4:06 pm

    is there documentation that describes all the option for styling? I am trying to figure out how to modify the width of a ui list.
    thanks
    cp

  2. cole / Aug 30 2011 4:21 pm

    sorry just saw this from my other post

    {FORM}

    thanks
    cp

  3. ahmad / Sep 5 2011 11:08 pm

    The activity indicator is too big and doesn’t have a background, also, it appears below everything, and I can’t control it!

    • Daniel Freeman / Sep 6 2011 3:54 am

      Odd. Under what circumstance? Running as an AIR desktop app?, in the browser?, on a device?

      It is a little larger than Apple’s Activity Indicator, but it should always pop up in the centre on the screen. It doesn’t have a background.

      • ahmad / Sep 6 2011 4:17 am

        Iphone 3GS, it does show up in the center but below my buttons

      • Daniel Freeman / Sep 6 2011 7:45 am

        You could always use UIActivity in the pure actionscript way:-

        var activity:UIActivity = new UIActivity(this, myXPosition, myYPosition);
        activity.scaleX = activity.scaleY = 0.5;
        activity.rotate = true;

        …That way you can position it where you like, and scale it too if you like.

  4. Jeremy / Nov 27 2011 9:52 am

    I am trying to use UITabPages, but I run into a few limitations:
    – I want to control the fontsize, is there any way to do this? I want the text to be bigger.
    – I want to be able to control the height of the tabs.
    – Is it possible to place the tabs at the TOP of the screen, rather than the standard bottom of the screen?

    I hope you can help me with these issues!

    • Daniel Freeman / Nov 28 2011 1:05 am

      alt=”true” gives you larger text, but a smaller buttons not too suitable for icons. I’m planning an Android style tabPages in extendedMadness. But no time to do that right now. Best thing you can do is subclass UITabPages

      http://code.google.com/p/mad-components/source/browse/trunk/MadComponentsLib/src/com/danielfreeman/madcomponents/UITabPages.as

      Then you have access to _buttons, and array of UIButtons that you know how to customise. And you could set the position of _buttonBar.y. But you’d need to move each page down too. A bit fiddly.

      If you subclass a madcomponent, you can add to into MadComonents like this:-

      UI.extend([“myTabPages”],[NewTabPages]); //each parameter is an array, add as many as you like.

      …then you can include <myTabPages>

      • Jeremy / Dec 2 2011 6:45 pm

        Thanks! That really helped me! Been playing around with madcomponents a bit in the last week, really liking it!

        I have another question, regarding UIScrollVertical. I want to make an image draggable that is located INSIDE a UIScrollVertical, however, when I am dragging the image, the UIScrollVertical component is also scrolling along. Is there a way to temporarily disable the scrolling (in Actionscript 3).

        Or is there an alternate (better?) way to accomplish what I want to do? I do need the scrolling capabilities of the UIScrollVertical for the rest of the page, just not when I want to drag my image.

        The ASDoc says:

        MadComponents vertically scrolling container

        But is that last attribute correct? Because alignV seems to occur twice.

      • Jeremy / Dec 2 2011 6:47 pm

        I’m sorry, the XML in my previous post seems to have been filtered, I am talking about the documentation of the UIScrollVertical on http://e2easy.byethost9.com/madcomponents/

      • Daniel Freeman / Dec 3 2011 4:13 pm

        tricky. I had to disable mouseMove events within a scrollable container. But you should be able to write code to move it if you don’t rely on it receiving this event. Maybe start and stop a timer, and move the draggable thing according to mouseX and mouseY every TimerEvent.TIMER. Or startDrag(), and stopDrag() should still work?

      • Jeremy / Dec 4 2011 7:23 am

        Actually, I can drag the image just fine (using startDrag or startTouchDrag), but when I am dragging the image the UIScrollVertical is ALSO scrolling along, but in the opposite direction.

        So, if I drag my image down, the UIScrollVertical thinks I want to scroll up. So I want to disable scrolling on the UIScrollVertical WHILE I am dragging the image.

        I have tried uiScroll.attributes.noScroll = true; but noScroll is read-only.

        Also, I am not using MouseMove events, but TouchEvents (TOUCH_BEGIN and TOUCH_END).

        Is there a way to disable the scrolling on a UIScrollVertical? Thanks for the help so far!

    • Daniel Freeman / Dec 3 2011 4:41 pm
      • Jeremy / Dec 4 2011 7:24 am

        I’ll check it out!

      • Jeremy / Dec 14 2011 5:33 pm

        Another question about the iOS style tab-pages:

        Is it possible for the ‘titlebar’ of the current tab to contain buttons? For example, in the appstore, the top-25 tab has 3 additional tabs in the titlebar. Can I do something like that too?

      • Daniel Freeman / Dec 15 2011 6:09 am

        You’d have to add and position the segmented controls programmatically to do that. There’s a segmented control in extendedMadness

        UI.create(this, NAVIGATION);

        var nav:UINavigation = UINavigation(UI.findViewById(“nav”));
        var attributes:Attributes = new Attributes();
        attributes.parse(SEGMENTED);
        var segmentedControl:UISegmentedControl = new UISegmentedControl(nav.navigationBar, SEGMENTED, attributes);
        segmentedControl.x = (nav.navigationBar.width – segmentedControl.width) / 2;
        segmentedControl.y = (nav.navigationBar.height – segmentedControl.height) / 2;

        Assuming you’ve defined both NAVIGATION, and SEGMENTED (controls) layout. (<navigation alt=”true” ….) With suitable colours, and use alt=”true” for the segmentedControl, because it looks better.

        Although you can choose suitable colours, I notice that the curved edges on the segmented control too rounded to look exactly like the appstore titlebar. I’ll give you a way to modify this curvature in the next update of extendedMadness.

      • Jeremy / Dec 14 2011 5:36 pm

        Oh, and also:

        When I use the alt=”true” for the iOS tabs, when the text becomes too long, it disappears. Is this a bug?

      • Daniel Freeman / Dec 15 2011 6:10 am

        I’ll look into it. Just have to accept it as a limitation for now.

  5. Hyun / Dec 31 2011 3:26 am

    How to use web view component like StageWebView?

    • Daniel Freeman / Dec 31 2011 5:46 am

      As StageWebView, StageVideo, etc. don’t sit on the display list, you just need to put a place-holder within the layout to represent their position and size. I’d say something like

      <image id=”webPlaceHolder”>300,400</image>

      Then, in the code, obtain the position of the place holder, convert to stage coordinates – and that’s where you’d place your StageWebView.

  6. Hyun / Dec 31 2011 8:30 am

    I wanna http://google.com -> show native web browser.
    Is it Possible?

  7. Lance / Jan 31 2012 3:31 am

    When you create the variable _popUp here:

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

    What type of variable is _popUp?

    • Daniel Freeman / Jan 31 2012 4:06 am

      protected var _popUp:UIWindow;

      • Lance / Feb 3 2012 2:47 am

        Great, thank you. I appreciate the speedy reply 🙂

  8. Seliverstoff Maxim / Feb 10 2013 10:12 pm

    I’m trying to listen for events viewFlipper, but nothing happens.
    What can you recommend?

    Here’s the code:
    viewFlipper = UIViewFlipper (UI.findViewById (“galery”));
    viewFlipper.addEventListener (UIScrollVertical.STARTED, SendPictures);

    private function SendPictures (e: Event) {
    trace (“Event – OK!”);
    }

    Gallery works fine, thank you very much!
    I can not deal with such a little thing … “SendPictures” – silent …
    No errors appear, compilation is successful

    • Daniel Freeman / Feb 11 2013 2:33 am

      That event isn’t dispatched by UIViewFlipper. Sorry if you had spent time trying to figure it out. You could listen for a mouseDown event on the viewflipper. This is usually the start of a scroll. It has already filtered out button presses, etc. But it might just be the user touching the background.

      Did you want an event that tells you when the user has stopped dragging the views – and it is about to snap to a page?

      Or an event that tells you when the page has changed?

      • Seliverstoff Maxim / Feb 11 2013 2:41 am

        I had to any decision.
        Of course, if the object will have its own event – it’s better.
        Thanks for the tip!

  9. azlim / Sep 5 2013 9:32 am

    hi, is it possible to provide foldover tutorial ? i am using adobe air and i hv found your tutorial but i cant run on my pc

  10. Malik Farhan / Nov 14 2013 11:20 am

    In view flipper example,
    Example uses Embed(source) protected static const etc.But I need it to be dynamic ? Any Idea How can I do that ? For

    Example:
    1- I have local resources folder with many sub folders and these sub folders contains images.
    2- I have PAGES element on stage, First Page contains a list and Second page contains Flipper Which will flip images from

    local resource folder, but which folder it will dependon selection from List.

    I am only interested to know How can i make Flipper use images dynamically from selection ? instead of defining them as

    constants.

  11. SyD / Dec 11 2013 4:54 pm

    Hello!
    About ViewFipper, I need to write the current page number in a textfield, how could I listen correctly to a pagenumber change event ? I mean, with :

    _myFlipper = UIViewFlipper(UI.findViewById(“flipper”));
    _myFlipper.addEventListener(MouseEvent.MOUSE_UP, myFunction);

    the problem is that between the mouseUp event and the end of the flipping, the wrong page number is thrown. I tried Event.CHANGE, wich doesn’t work. Also Event.SCROLL, Event.COMPLETE…

    And I have the same issue with UISwitch component : what is the correct event listener ? as the MouseEvent.MOUSE_UP fires before the switch completed.

    Thanks for help 🙂

    • Daniel Freeman / Dec 12 2013 2:53 pm

      With the ViewFlipper, try listening for UIScrollVertical.STOPPED . The UISwitch dispatches Event.CHANGE

      • SyD / Dec 24 2013 8:58 am

        Thanks a lot it worked very well ! I have another (newbie) question :
        I’d like to re-use labels with ID, but I can’t figure out to make it work:

        protected static const GREY16:XML = ;
        protected static const MYLABEL:XML ={GREY16};
        protected static const LABEL1:XML ={GREY16} PAGE 1;
        protected static const LABEL2:XML ={GREY16} PAGE 2;
        protected static const LAYOUT1:XML = {LABEL1}{MYLABEL};
        protected static const LAYOUT2:XML = {LABEL2}{MYLABEL};
        protected static const NAVIGATOR:XML =
        {LAYOUT1}{LAYOUT2};

        Once initialized, {MYLABEL} shows up in the first page “LAYOUT1”, but doesn’t on page 2 “LAYOUT2”. How could I re-Use myLabel, without creating a new id ? Thanks again.

      • SyD / Dec 24 2013 9:12 am

        sorry some code disappeared, so I rewrite it without ‘greater and lower signs’

        protected static const GREY16:XML = font size=”16″ color=”#AAAAAA”/;
        protected static const MYLABEL:XML =label id=”myLabel” alignH=”left”{GREY16}/label;
        protected static const LABEL1:XML =label alignH=”left”{GREY16} PAGE1 /label;
        protected static const LABEL2:XML =label alignH=”left”{GREY16} PAGE2 /label;
        protected static const LAYOUT1:XML =vertical {LABEL1} {MYLABEL} /vertical;
        protected static const LAYOUT2:XML =vertical {LABEL2} {MYLABEL} /vertical;
        protected static const NAVIGATOR:XML =navigation background=”#000000″ id=”nav” {LAYOUT1}{LAYOUT2} /navigation;

Trackbacks

  1. AS3 MadComponents Tutorial Series – Starting Out | Caffeine Industries

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: