Skip to content
April 21, 2014 / Daniel Freeman

MadComponents 0.8 ExtendedMadness 0.3 BETA part 2

MadComponent128exIn the previous part of this blog post, we described five new features in the MadComponents beta release. In this second part, we’ll describe five remaining new features. Most new features are refinements on existing components.  The beta is available on the MadComponents FaceBook Group to download and try now.  (See in pinned thread – the beta is included in the 0.79/0.21 folder).

Please try it out – and report any problems.  There’s a lot of new stuff – so I’d appreciate any help ensuring that all the old functionality is still ok – and all the new stuff works as advertised.

This is what we have left to cover:

6. UIIcons improvements:  The new scheme for specifying images and labels in the XML layout, and different resolution images for different density screens, may also be used with the UIIcons component.

7. UITabPagesSliding:  Another kind of tabbed pages component, with a tab button panel that scrolls horizontally, allowing you to add many buttons, regardless of screen size limitations.

8.  Per-Row Renderers and Background Colours for Lists:  Apply different item renderers, and different settings to different rows of a list.

9. Better List Scrolling Performance and <renderer> Tag:  An easier way to define custom item renderers – that also results in smoother scrolling behaviour.

1o. <model> tag now deals with XML attributes:  Previously, the model tag dealt with <this>kind of data</this> not <this attr=”kind of data”/>.

 

 

So here’s the remaining new stuff in detail:-

6. UIIcons Improvements.

UIIcons has been refined and improved a lot over the last few versions. UIIcons allows for a horizontally arranged line of clickable icons. Each may have a label. (It may have a length of one. Just one icon). Each icon may be pixel-snapped, and unscaled for sharpness. And you can automatically selected from different size images. Here’s a typical UIIcons layout:-

<icons border=”false”
gapH=”30″
leftMargin=”20″
height=”38″
background=”#001133,#000022″
iconColour=”#FFCC33″
activeColour=”#CCCCFF”
pixelSnapping = “true”>
<font color=”#FFEE99″/>
<activeFont color=”#CCFFFF”/>
{DATA}
</icons>;

UIIcons

So this layout describes a line of icons. LeftMargin defines the start position of the first, and then they are spaced by gapH. iconColour and activeColour describe the colour applied to icons, and how it changes if an icon is pressed. The icons are toggled, so that only one is active at any time. <font> and <activeFont> describe the styling applied to the label in the normal and active states. Note that the background has two values, again for normal and active states.

The data is specified in the same way as tabbed pages. Including the use of “ldpi”, “mdpi”, “hdpi”, “xhdpi” and “xxhdpi” attributes. eg:

<data>
<item label=”page 1″
ldpi={getQualifiedClassName(ERROR_LD)}
mdpi={getQualifiedClassName(ERROR_MD)}
hdpi={getQualifiedClassName(ERROR_HD)}
/>
…etc… etc….
</data>
 
 

7. UITabPagesSliding

UITabPagesSliding encapsulates a popular layout that combines UIIcons with UIScrollHorizontal and UIPages to provide a tabbed pages layout with sliding tab buttons. Rather than implement it yourself, from its constituent components – you just need to use a layout like this:-

protected static const PAGES:XML =    <tabPagesSliding background=”#CCFFCC” alt=”true”>
{DATA}
{PAGE0}
{PAGE1}
</tabPagesSliding>;

The data is the same as UIIcons. Note that you can get to instances of the UIPages and UIIcons constituents using the .tabPages and .icons getter methods.

 

8. Per-Row Renderers and Background Colours for Lists

Lists include a new setter method, rendererXML. This allows you to specify a new custom renderer prior to assigning new data to a list. eg:

_myList.rendererXML = RENDERER_XML;
_myList.data = newData;

(There is also a depreciated .renderer setter – use .rendererXML instead, as .renderer will be removed soon)

But it is also possible to specify different renderers for each list row ($renderer). You can also assign different background colours ($colour), whether to draw vertical dividing lines or not ($lines), and whether the list row highlights when clicked ($highlight). These options may be optionally included in the row data. eg:

_myList.data = [{label:”Hello World”, $renderer:XML_RENDERER, $colour:0xFF9900 , $lines:false, $highlight:true }];

 

9. Better List Scrolling Performance and <renderer> Tag

This new version has tweaked the performance of lists so that they scroll more smoothly. There is also a new, more efficient way to declare common custom renderers. The most common custom renders declare text fields one after another, with an optional image on the left. Up until now – we would have used nested <horizontal> and <vertical> tags to achieve this. But a nested, more complicated, Sprites within Sprites, display-list tree turns out to be less optimal when it comes to scroll performance. Especially, when your list has many renderers made up like this. The new UIRenderer class results in a flatter row renderer.

So, instead of writing a list renderer like this:-

<horizontal>
<image id=”img”>60</image>
<vertical alignV=”centre”>
<label id=”line1″>Hello World</label>
<label id=”line2″>second line of text</label>
</vertical>
</horizontal>

You can simply write it like this:-

<renderer>
<image id=”img”>60</image>
<label id=”line1″>Hello World</label>
<label id=”line2″>second line of text</label>
</renderer>

It’s easier, and it performs better. But obviously, the old method is still appropriate for any general renderer layout where <renderer> can’t be applied.

 

1o. <model> tag now deals with XML attributes

The <model> tag has always made it easy to read XML, JSON, or AMF data from a server – and use it to populate a list or form. But previously, the XML capability was limited to reading data between tags. <this>kind of data</this>. Now we can deal with <this attr=”kind of data”/>.

Consider the following XML data:-<?xml version=”1.0″ encoding=”utf-8″?>
<stuff>
<item gender=”male”>
<name>Fred Bloggs</name>
<age flag=”2″>32</age>
</item>
<item gender=”female”>
<name>Sarah Wilson</name>
<age flag=”3″>28</age>
</item>… etc…etc…..

You could write the following layout to extract this data and display it in a list:-

<list>
<model url=”http://127.0.0.1/people.xml&#8221; action=”loadXML”>
<stuff>
<item gender=””>
<name/>
<age flag=”flagg”/>
</item>
</stuff>
</model>
<renderer>
<label id=”name”/>
<label id=”age”/>
<label id=”gender”/>
<label id=”flagg”/>
</renderer>
</list>

… so that’s all the new stuff covered.  Please download the Beta, and try it out.  Let me know about any problems.

Join The Community

For community discussions about MadComponents, and to download the latest .swc libraries, come and join the facebook page:-http://www.facebook.com/groups/madcomponents

You may also be interested in the Stage3D Facebook group: http://www.facebook.com/groups/stage3d/

here’s an introductory video to MadComponents here: http://www.youtube.com/watch?v=CMf2XGRhkOk

Please blog about this project and help to spread the word. Also, don’t forget to leave a “star”, or “g + 1″ recommendation on the Google Code site.

 

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: