Skip to content
December 7, 2011 / Daniel Freeman

ExtendedMadness now Open-Source

ExtendedMadness is a Pure ActionScript framework and UI component library for mobile applications.  It’s based on MadComponents at the core, and although it contains more UI components, it is still going to result in much more lightweight mobile applications than Flex.  ExtendedMadness now contains a SplitView for tablet UIs, Android-style tab buttons, and a star-rating component.

You can find the sourcecode here, and plenty of examples here.  Download the .swc from here.

I’ve blogged about some of the components before.  Charts, SegmentedControls, etc.. ( <svg> has been depreciated and removed )  So here’s a quick rundown about what’s left:-

CheckBoxes and RadioButtons

CheckBoxes and RadioButtons now have a built in label, so you utilise them like this:-

<checkBox>Text Here</checkBox>
<checkBox><font color="#FF9933">Text Here</font></checkBox>
<checkBox><font color="#FF9933"/>Text Here</checkBox>
<radioButton><font color="#FF9933"/>Text Here</radioButton>

Tab Pages Top

These are Android-style tab buttons at the top of the page.  You use them exactly as you would the MadComponents <tabPages> container.

<tabPagesTop id="tabs" stageColour="#333333">
   {PAGE}
   {SCROLLXY}
   {LIST}
</tabPagesTop>;
var tabPages:UITabPagesTop = UITabPagesTop(UI.findViewById("tabs"));
tabPages.setTab(0, "U.I.", OPTIONS);
tabPages.setTab(1, "scrollXY", ZOOMIN);
tabPages.setTab(2, "List", ARROW);

Star Rating

<starRating id="stars" value="3" background="#999999,#FFFFFF"/>
<starRating value="2" alt="true" background="#999999,#FFFFFF"/>
_stars = UIStarRating(UI.findViewById("stars"));
_stars.addEventListener(Event.CHANGE,starsChanged);
protected function starsChanged(event:Event):void {
     trace(_stars.value);
}

ScrollXY

ScrollXY was originally part of core MadComponents, but I moved it into ExtendedMadness to make room for more mainstream stuff.  ScrollXY allows you to scroll in both directions, and double-tap to magnify and reduce the contents.  The tapToScale attributes specifies the magnification, and notice how we declare the width and height of the contents.

<scrollXY tapToScale="3.0" stageColour="#666666"
             scrollBarColour="#FFFFFF" width="480" height="640" border="false">
   <image>
      {getQualifiedClassName(THAILAND)}
   </image>
</scrollXY>;

There’s an example on the code site, here.

Split View

This is an essential container for tablet UIs.  It is the tablet equivalent to a navigation container, where both the list and the detail page are shown in landscape orientation.  In portrait orientation, the list is inside a drop down menu.

There’s a simple example of the split view here.

Tree Navigation

This is a list component that was originally part of MadComponents, but overflowed into ExtendedMadness to make space.  The concept of tree navigation, is to turn hierarchical data into hierarchical nested lists.  There are a couple of examples of using this component here and here.

 

 

DataGrid

For displaying tabular data.  You can make it editable by using an editable=”true” attribute, but that is only recommended for desktop use, not mobile, as the cells are quite small (and difficult to poke with a finger).  But fine for displaying un-editable data on mobile.

<dataGrid colour="#999999" background="#888899,#EEEEFF,#DDDDEE">
   <widths>30,30,40</widths>
   <header>one,two,three</header>
   <data>
       <row>1,2,3</row>
       <row>4,5,6</row>
       <row>7,8,9</row>
       <row>2,7,5</row>
       <row>1,2,3</row>
       <row>4,5,6</row>
       <row>7,8,9</row>
       <row>2,7,5</row>
   </data>
</dataGrid>

There’s a datagrid example here.

ScrollBars

There are three desktop-style scrollbar panels.  <scrollBarVertical>, <scrollBarHorizontal>, and <scrollBarPanel>.  A <scrollBarPanel> has both a side and bottom scroll bar.  Like scrollXY, you must specify a width and a height for the contents.

Advertisements

12 Comments

Leave a Comment
  1. James / Dec 7 2011 9:03 am

    Hi can I request if you can reprogram Madcomponent scrollbar’s skin similar to Lion’s scrollbar by default? I feel Flex 3 scrollbar are a bit old skool.

    • Daniel Freeman / Dec 7 2011 9:18 am

      Lion’s scrollbars look like mobile scrollbars. You could use scrollVertical (in MadComponents) and scrollXY – but you’d need to write a bit of code to respond to scroll events.

  2. Jeff / Dec 7 2011 1:44 pm

    I think this is some of the best, freshest UI development going on in Flash/ActionScript right now. Well done & thank you for some incredible code.

  3. Keith Lee / Dec 12 2011 6:06 pm

    I’m glad I found MadComponents. I think I’ve pretty much given up on Flex for mobile at this point. I’m continuously disappointed with the performance on my IPad. With that said, are there any apps in the AppStore or in the market place which are built with MadComponents? I want to check them out before I start development.

  4. Jeremy / Dec 25 2011 1:05 pm

    Hi, the starrating component is very handy, but is there a way to ‘lock’ the star value?

    So, for example:
    stars.value = 3;
    stars.locked = true;

    So that the user can no longer change the stars value. I have tried:
    stars.clickable = false;
    But this does not work. Is there another way? Thanks!

  5. Daniel Freeman / Dec 25 2011 1:12 pm

    clickable works inside a scrolling container. mouseEnabled works elsewhere.

    stars.mouseEnabled = false;

    • Jeremy / Dec 26 2011 9:22 am

      Actually, that does not work. After setting mouseEnabled to false, I can still change the rating. Am I doing something wrong? I use this:

      stars.addEventListener(Event.CHANGE, ratingChanged);
      stars.mouseEnabled = false;

      protected function ratingChanged(event:Event):void
      {
      var stars:UIStarRating = UIStarRating(currentNavigation.findViewById(“stars”));
      trace(stars.mouseEnabled);
      }

      Which then prints ‘false’, which should be impossible right?

      • Daniel Freeman / Dec 27 2011 3:24 am

        Not impossible. Inside a scrolling container, MadComponents apprehends mouse/touch events while it determines whether the touch is a scroll. Then it re-issues the event if necessary.

        But it looks like clickable isn’t working for UIStarRating, so I’ll look into fixing this for the next release.

      • Jeremy / Dec 27 2011 6:46 am

        Ok, thanks!

  6. Jon Tetzlaff / May 9 2012 6:13 pm

    How do you easily download the source code separated into classes. I can’t seem to find a link for that.

Trackbacks

  1. Developing iOS apps on Windows. « Flash for the Masses

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: