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">
            <data>
                 <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"/>
            </data>
        </picker>
        <picker>
             {DATA}
        </picker>
        <picker>
             {DATA}
        </picker>
    </columns>

… but you’ll need to update to MadComponentsLib 0.3.7 (or later) for this to work. You can download it from http://code.google.com/p/mad-components/downloads/list

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:-

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

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“.