Skip to content
April 17, 2014 / Daniel Freeman

MadComponents 0.8 ExtendedMadness 0.3 BETA part 1

MadComponent128exThe next version of MadComponents/ExtendedMadness will include some significant changes and additions.  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.  Here are 10 new features:

1. Depreciated Components and New Components:  Experimental undocumented, and previously depreciated components have gone.  But the ancient UIDataGrid has gone (use UIFastDataGrid), and the ugly UIArrow component is also gone (use <list arrows=”true”>).  There are also new components added: UITable, UISpecialDataGrid, UITabPagesSliding, UIScreens, and UIRenderer.

2. Support for Multiple Screen Sizes And Pixel Densities:  Use the <screen> tag to specify alternate layouts for different screen sizes.

3. UISpecialDataGrid:  A fast and capable Datagrid with images.  optimised for mobile devices and GPU rendermode.

Screen shot 2014-04-17 at 12.57.45

4. UITable:  Another way of displaying tabular/grid layouts.

5. Icons and Labels For Tabbed Pages:  Previously, you needed to do this programmatically using the setTab() method. Now, you can specify labels and images in the layout – and you can even specify multiple versions for different screen pixel densities.

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, as there’s so much new stuff – it’s going to take a while to go through the details.  So I’m going to split the details between two blog posts.  This, and a sequel to follow soon.

1. Depreciated Components.

UIArrow, UIDataGrid, UIDetailList, UIField, UIArrowButton, UIAccordionList, UIPopUpButton, and UITextSlider.  Sometimes, ExtendedMadness included experimental trial components that were never formally documented – and it’s mostly those that have been removed here.  Be careful that UIArrow is gone now – as some early examples used this.  <fastDataGrid> is mostly equivalent to <dataGrid> – so there’s usually no problem replacing <dataGrid> with <fastDataGrid>, and UIDataGrid with UIFastDataGrid.

 

2. Support for screen sizes and pixel densities

The <screens> tag allows you to define multiple alternative layouts, for various screen sizes, orientations, or pixel densities.  Use it like this:-

<screens id=”screens” lazyRender=”true” recycle=”true” border=”false” autoResize=”false”>
{LAYOUT0}
{LAYOUT1}
{LAYOUT2}
</screens>

Each LAYOUT will define a size attribute.  For example:

protected static const LAYOUT0:XML = <vertical size=”P320x200C”>…etc…

The size code may optionally begin with a P or L, for portrait or landscape.  Next we specify the minimum screen size for this layout: WxH.  (Note that this is the screen size AFTER pixel density scaling.)

There’s an optional C – which will centre the layout on the screen.

Alternatively, specify the minimum pixel density.  eg:  size=”320DPI”.

You would arrange LAYOUT0, LAYOUT1, etc… in order from smallest to largest.  With the default specified last.

 

3. UISpecialDataGrid

I briefly considered calling this an Advanced Data Grid.  But I didn’t want to imply any Flex bloatedness.  The UISpecialDataGrid is optimised for performance with GPU rendermode and for mobile devices.   UISpecialDataGrid subclasses UIFastDataGrid and adds the ability to incorporate images (or any DisplayObject) inside grid cells.

The data for a UISpecialDataGrid starts with the two dimensional array for rows and columns – but any cell that includes more than one item (eg: text + image) will itself be defined as an array.

eg: [“Here s my text”, IMAGE_CLASS]  or [ IMAGE_CLASS, “Here is my text” ].  There is a restriction, in that you are only allowed ONE text part.  But you may use multiple images, both before and after the text.

(There is a possible work-around to this restriction – if you were to specify a DisplayObject that comprises of both images and text, and whatever else – but I haven’t tried this.)

 

4. UITable

MadComponents has always provided more than one way of constructing tables.  Originally, with the old UIDataGrid component – and using a list with a custom renderer and lines=”true” – to construct vertical dividing lines within each row.  <rows> and <columns> containers have always allowed you to arrange components into a tabular/grid arrangement – but there are no dividing lines.  The new UITable component can be used instead of UIRows – but each cell may have a background and outline colour.

Instead of writing this:

<rows>
    <columns>
        etc….

Just write this:

<table>
    <columns>
         etc….
 

5.  Icons and Labels for Tabbed Pages

Previously, the icons and labels on on tabbed pages needed to be constructed programmatically using the setTab method.  Use a data tag:

protected static const DATA:XML =
    <data>
        <item label=”page 1″  image={getQualifiedClassName(ERROR)}/>
        <item label=”page 2″  image={getQualifiedClassName(SYNC)} />
        <item label=”page 3″  image={getQualifiedClassName(CHAT)}  />
    </data>;
 
protected static const LAYOUT:XML =
    <tabPages>
        {DATA}
        {PAGE1}
        {PAGE2}
        {PAGE3}
    </tabPages>;

In this new version – you may specify them within the XML layout.  Also, you can deal with screens with different pixel densities.  You can use a size attributes to specify screen dpi, as you would for the <screens> tag.  Pixel Densities specified in ascending order, and multiple DATA definitions.

<data size=”160DPI”  >

There’s another way to specify images for multiple pixel densities.  Using ldpi, mdpi, hdpi, xhdpi, and xxhdpi attributes.  Like this:-

protected static const DATA:XML =
    <data>
    <item label=”page 1″
        ldpi={getQualifiedClassName(ERROR_LD)}
        mdpi={getQualifiedClassName(ERROR_MD)}
        hdpi={getQualifiedClassName(ERROR_HD)}
    />
    <item label=”page 2″
        ldpi={getQualifiedClassName(SYNC_LD)}
        mdpi={getQualifiedClassName(SYNC_MD)}
        hdpi={getQualifiedClassName(SYNC_HD)}
    />
    <item label=”page 3″
        ldpi={getQualifiedClassName(CHAT_LD)}
        mdpi={getQualifiedClassName(CHAT_MD)}
        hdpi={getQualifiedClassName(CHAT_HD)}
    />
</data>;
 

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: