Skip to content
May 24, 2011 / Daniel Freeman

Improvements to MadComponents (version 0.3.7, and 0.3.8)

I welcome suggestions, feedback, and bug reports concerning MadComponents.  I’d like it to be used by developers, so I’ll do what I can to accommodate user requests.  MadComponents is free – but I’d also like it to be as useful as it can be.

This morning, I picked up some feedback from a developer, asking me about two features:-

1. Centre/right justified text in Lists/Pickers.

2. Specifying the width of pickers.

The developer wanted to create picker banks, where the width of each picker could be specified like this:

Specifying absolute widths was written anyway, and due to make it into the next release – so the request prompted me to wrap it up, fix an issue with centre and right justification, and release a new version today.  Actually, the request lead me fixing an unrelated bug, concerning custom renderers, – so it was a useful exercise.

The picker bank above is created using the following layout:-

    <columns gapH="0" widths="40,50%,50%">
        <picker alignH="centre">
                 <item label="0"/>
                 <item label="1"/>
                 <item label="2"/>
                 <item label="3"/>
                 <item label="4"/>
                 <item label="5"/>
                 <item label="6"/>
                 <item label="7"/>
                 <item label="8"/>
                 <item label="9"/>

… but you’ll need to update to MadComponentsLib 0.3.7 (or later) for this to work. You can download it from

UPDATE: 25th May.  MadComponents 0.3.8 is now available to download.

Flex (Flash builder) users can checked-out this particular example from the SVN repository:-

If you’ve incorporated MadComponents into a Flash project, simply replace your MadComponentsLib .swc file with MadComponentsLib0_3_8.swc (or higher version, when this becomes available).

In the previous layout, notice the way that column widths are specified.  (40, 50%, 50%).  40 doesn’t have a % after it – that’s not a typo.  It specified an absolute measurement of a column in pixels.  Not a percentage.  The percentages (50%,50%), are allocated to the remaining column widths (subtracting absolute pixel widths and gapH between columns from the total).

So what other enhancements does version 0.3.7 provide?

Well, you can now specify absolute widths of buttons, labels, and input.  For example

<button width=”60″/>

But use absolute widths carefully.  MadComponents is designed to automatically render the UI to suit different screen sizes and resolutions.  So absolute measurements aren’t always a good idea.

MadComponents 0.3.7 includes alternative appearances for some UI components.

<button alt=”true”/>

<input alt=”true”/>

<tabNavigator alt=”true”/>

MadComponents 0.3.8 adds an index (setter) property, and attribute to the XML.  So you can set the position of the picker, like this:-

<picker index=”3″>

0.3.8 also introduces a new <slider> component.

<slider id=”slider1″ value=”0.2″ alignH=”fill”/>

<slider id=”slider2″ width=”130″ background=”#CCCC00,#999933,#AAAA99″/>

The slider emits an Event.CHANGE event when being moved, and an Event.COMPLETE event when released.  There is a value (setter and getter) property to read a value between 0 and 1.

There’s one more thing worth mentioning… While American English is standard for specifying HTML layouts, I’ve defined the layout language using my native British English.  So this leads to mixtures like this:-

<button colour=”#CCCCCC”><font color=”#333333″>hello</font></button>

Also, be aware that you should write alignH=”centre“, not alignH=”center“.



Leave a Comment
  1. richardtolley / May 24 2011 10:47 pm

    Hey Daniel

    Top Job!

    Thank you for the update – you’ve just made my day 🙂


  2. richardtolley / May 25 2011 12:19 am

    Probably being a pain but…

    Can I set the picker to a specific value. i.e. picker displays a list of numbers from 1 to 100. Can I do something like picker.selectedIndex = 50;

    or similar?



    • Daniel Freeman / May 25 2011 9:07 am

      You’ve got a good point. It’s an important omission. It won’t be difficult to implement – I’ll release a new update this evening (UK time).

      done. MadComponentsLib0_3_8.swc is available. now.

  3. Sanad / May 26 2011 7:52 pm

    This very helpful. I have a question. Does these components support right to left languages such as Urdu, Arabic & Hebrew? I tried typing Arabic into the search box in MadComponents.apk on my android phone but I just saw squares. Does that mean those characters are not supported?

  4. Richard Tolley / May 27 2011 4:46 am

    🙂 Nice one – thank you for the setter.


    Is it possible to use these components just through as3 without the XML?

    if so, could you show a very quick simple example?



To discuss MadComponents/MC3D, join the Facebook group!

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: