Skip to content
September 7, 2013 / Daniel Freeman

New MadComponents Release!

MadComponent128exIt’s been a while since MadComponents was updated.  But in the meantime I’ve still been developing the framework.  Also, developer interest in the framework doesn’t seem to be subsiding anytime soon.

The new version of MadComponents and ExtendedMadness has greatly improved the behaviour of many components.  Also, I’ve introduced a number of new components into ExtendedMadness, with an special emphasis on data grids.

Download MadComponents from here.

Stage3D vs. Display List

While prevailing opinion favours Stage3D over the display list graphics – it all depends on the application.  Many developers assume that Stage3D is better and faster – but is it really better for general purpose User Interfaces?

MadComponents is based on the traditional display list.  Originally, I had intended to redevelop MadComponents and base it on Stage3D.  I intended to merge MC3D and MadComponents.  But after gaining a thorough understanding of Stage3D – I changed my mind.  I concluded that the Display List was the way to go, after all.  While MC3D demonstrated a few neat tricks, and impressive transitions – I wasn’t happy with what this cost in other respects.

The Stage3D approach lends itself naturally to Games – but the good old-fashioned Display List is better suited to building general purpose mobile UIs.

That is, unless your application uses Stage3D anyway.  If you’ve built your game in Starling, it makes sense to build your UI with Feathers.  Because Feathers and Starling interoperate better than Starling and MadComponents.

But assuming you’re not using Stage3D for anything else – why go for a Display List framework?

1. Ease and Speed of development are particular strengths of MadComponents.  For example, if you take a look at this Feather’s Tutorial   Now take a look at the equivalent MadComponents code.  (link).   MadComponents makes it all much simpler.   But MadComponents was designed specifically to do this kind of thing, and to make it easy.

I’m not saying the Feathers approach or the tutorial isn’t useful.  If you were building a lists and navigation for a Starling game – the approach described in the tutorial, and Feathers would be the way to go.

2. Image sharpness is another advantage of the display-list.  Stage3D textures aren’t appropriate for pixel-snapped sharp images.

3. MadComponents UIs are easily styled and coloured just by tweaking attribute values in the XML layout.  You can accomplish some striking and beautiful user interface designs – without any skinning.  (Although MadComponents supports skinning too).

4. You can easily combine MadComponents with legacy display-list code, Minimal Components, even Flex.  And it’s easy to add your own custom components.

5. MadComponents and ExtendedMadness contains about 80 different components.  Including exotic components such as Wheel Menus, Page Turn and Charts  That’s many more components than any Stage3D-based framework.

wheels
Screen shot 2013-03-06 at 17.23.51

6. While Stage3D is fast once it gets started – the set-up and upload times are still a bottleneck.  Especially when the textures are dynamically generated (not just static sprite sheets).  A sophisticated UI is either going to have a lot of textures to upload, or a lot of vertices, or both.  With Stage3D this will incur a significant set-up and upload delay.  But the Display List and GPU-rendermode won’t incur this.

Improvements to MadComponents

The new release of MadComponents introduces many refinements to existing components.  Lists, Switched and Sliders respond much better to touch events.  Sliding transitions and List Scrolling is smoother.  There are also some minor improvements to appearance.

There are a couple of enhancements to the way you to navigate to change the page.  There’s a new goToPageId method in UIPages, UINavigation, etc.

Rather than specifying a numeric index for the page, you can refer to a page by its id.  For example.

_pages.goToPageId(“page_two”);

Also, if you have a button, and you want to switch page when the user clicks the button, you can use a new goTo attribute.  You don’t need to write any AS3.

<button goTo=”home_page” transition={UIPages.SLIDE_LEFT}>

Finally, you can use absolute positioning within a frame layout now.

<frame>
     <button x=”100″ y=”200″/>
     <slider x=”200″ y=”300″/>
</frame>

But be careful how you use it.  Don’t forget that Android screens come in many sizes – and elastic layouts are better.

 

Additions to ExtendedComponents

There are four new DataGrid components, specifically designed for viewing and interaction on mobile devices.   (UIFastDataGrid, UIScrollDataGrid, UIScrollDataGrids, and UITouchDataGrids.).  These will be discussed fully in the next post.

There are a few further additions too <labelShadow> for labels with a drop shadow.  <arrowButton> for buttons that have an up or down arrow symbol, and <textSlider> for sliding controls.  For example:  <textSlider>A B C D E</textSlider>

testSlider

<screens>

Finally, there’s a new container component called <screens>.  This is useful for developing layouts that might be arranged differently for different screen sizes and orientations.  For example, a screen might be laid out one way for small screens, a different layout for a larger screens, and possibly a different layout again for tablet devices.

You would build each layout like this:

<vertical size=”P320x220C”>
    layout here
</vertical>

Notice the size attribute.  The first letter is optional.  Either P for portrait or L for landscape.  Next, you specify the size of the layout.  (horizontal x vertical).  Finally, there’s and optional C character.  If you specify C then the layout will be centred on the screen.

Having declared several layouts for several screen sizes, you use the <screens> container like this:

<screens lazyRender=”true” recycle=”true”>
   {LANDSCAPE_SMALL}
   {PORTRAIT_SMALL}
   {LANDSCAPE_MEDIUM}
   {PORTRAIT_MEDIUM}
</screens>;

The screens container will dispatch a UIScreen.SCREEN_CHANGED when a layout is selected.  It you use the same components inside each layout (with the same ids) – then you should put all your findViewById()’s inside the UIScreen.SCREEN_CHANGED handler.

There’s a example for the new <screens> tag here.

Join The Community

For community discussions about MadComponents/MC3D, 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/

There’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

18 Comments

Leave a Comment
  1. Michoko / Sep 8 2013 10:29 am

    Thank you for your work on this great framework! When I need to design a complex UI, I’m pretty sure I will use it. However, I’d be very interested in testing global performance on mobile devices (I’m especially curious about the page turn effect). Do you think you could compile an ipa / apk showcasing the different madcomponents features, please? I know you already made one demonstrating Stage3D, but I mean pure DisplayList + GPU here. I’m sure it would help people see how the components behave, and attract even more interest.
    Thank you! 🙂

    • Daniel Freeman / Sep 9 2013 9:12 pm

      I don’t have the time to write a showcase app – but it would be good if someone wrote one.

  2. who / Sep 8 2013 5:16 pm

    hi i have tried the old version of madcomponents and i found there is no gesture on the image component to scale it ,if i need to add on my own if i need that? or any plan to integrate it into the lib? thx

  3. Zync / Sep 8 2013 8:48 pm

    Love using this MC, just wish there was a better way to do this via external XML code. Reckon you can put together a tutorial on doing that? Or do you have a good reference somewhere?

  4. Daniel Freeman / Sep 9 2013 10:54 am

    By external XML, do you mean separating the XML layout from the AS3? That’s easy enough, just put it in another class (and make it public).

    There’s a tutorial here about using MadComponents with RobotLegs: http://ajukraine.blogspot.co.uk/2012/09/madcomponents-with-robotlegs.html

    see also: http://caffeineindustries.com/tutorials/as3-madcomponents-tutorial-series-–-separation-of-concerns/

    Or do you mean read from a server? Or file?

    • Zync / Sep 9 2013 12:36 pm

      Yeah I mean from an XML File, the templating engine doesn’t seem to like a loaded in XML file or even a directly embedded one. The data doesn’t substitute properly.

  5. Mike / Sep 20 2013 1:36 am

    Do any of the lists have collapsible attributes?

    • Daniel Freeman / Sep 25 2013 12:23 pm

      No. There was an AccordionList in the works – but I haven’t finished it. Do you need one?

      • Mike / Sep 25 2013 1:42 pm

        Yes that would be great. I would use along the lines of the divided list were the headers would collapse. I have a lot of data coming from an external xml file and there are 2 levels of relationships.

      • Mike / Oct 26 2013 7:51 pm

        My apologies I know you are very busy, I am just curious if you have had a chance to work on this component. I greatly appreciate your work.

      • Daniel Freeman / Oct 27 2013 1:55 am

        <accordionList> actually made the cut for the beta versions on the Facebook page:-

        https://www.facebook.com/groups/madcomponents/

        I didn’t test in in the latest ExtendedMadnessLib0_2_1betaC.swc – you may possibly need to backtrack to B or A.

        I’m changing the way lists work – so it probably won’t make it into the final release. But it’s in the betas (to C).

  6. Tobias Niva / Oct 20 2013 1:52 am

    Still no enable/disable of components? I mean, even though I set aButton.clickable = false….there is no support out of the box for a different look on it?!

    • Daniel Freeman / Oct 27 2013 1:59 am

      _button.clickable = false;
      _button.colour = GREYED;

  7. brainz1688 / Nov 7 2013 10:19 am

    Hi , is there any example for the page flipping component like in the image above and which .swc it use (ExtendedMadness /MadComponents or MC3D) ? ,btw thx for making this great UI component

    • Daniel Freeman / Nov 13 2013 3:01 pm

      This is in ExtendedMadness (so UIe.create(… )

      {PAGE1}
      {PAGE2}
      ;

      But the trick is to ensure that PAGE1 and PAGE2 have opaque backgrounds – not transparent. So …etc….

  8. Rahul Joshi / Apr 6 2014 6:22 pm

    Nice post. Are Mad Components really better than Feathers UI performance wise? I was looking forward to use Feathers UI but now fee that Mad Components might also be a good option.

    • Daniel Freeman / Apr 21 2014 11:43 am

      If you’re using Starling anyway – stick with Feathers.

      MadComponents is certainly faster to build an app. Plus – if you need to write your own custom components – MadComponents makes that easier. Direct Rendermode can ensure sharp images – if your UI has pictures.

      Performance wise – it comes down to GPU rendermode vs. Direct rendermode.

      GPU rendermode is faster for setting everything up – because with Direct rendermode, you’d have to upload textures, vertices and indices via the Stage3D APIs. If your UI contains images – this is a bigger bottleneck.

      Once everything is uploaded – provided that nothing else needs uploading – then Stage3D will be smoother. BUT that’s only if there are no further uploads – in practice – I found that was having to swap textures, vertices, shaders, etc.. – quite a bit. But this does depend on how sophisticated the UI is – and how often its appearance changes – as data gets displayed and changed.

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: