Skip to content
July 28, 2011 / Daniel Freeman

ExtendedMadness. More components and charts for mobile developers.

I wanted to keep MadComponents lightweight.  So I packed the most essential UI components and data capabilities into a small library.  But  I had more UI components that I wanted to contribute to Adobe mobile developers.  So I created ExtendedMadness.  The ExtendedMadness .swc does everything that the MadComponents .swc does, but also includes more components and charts.  The treeNavigation, and DataGrid, which were deprecated in MadComponents, have also made their way into ExtendedMadness.

Just like MadComponents, you can use ExtendedMadness within Flash or Flex (Flash Builder).  You can utilise it in Mobile AIR applications, or desktop AIR applications, or browser web services.  You use the same XML layout language as MadComponents, and you can freely mix MadComponents, and ExtendedMadness tags.

(If you don’t know about MadComponents yet – I recommend that you read other posts on this blog, and gain some insight into the approach, before reading any further).

Above you can see combo-boxes (drop-down menu), Cut-copy-paste control, segmented controls, checkboxes, and radio buttons.  Below are four examples of charts included in ExtendedMadness.

Set up an ExtendedMadness project

If you have a project utilising MadComponents (and you can read detailed tutorials on this blog about how to do that), then you can change it to an ExtendedMadness project as follows:-

1. Replace the MadComponents.swc library with an ExtendedMadness.swc library.

2. Ensure you have these imports at the top of the program:-

import com.danielfreeman.extendedMadness.*;
import com.danielfreeman.madcomponents.*;

3. Put another line of code above the UI.layout() statement:-

UIe.activate(this); // Gives us access to extended components
UI.create(this, LAYOUT);

(Note UIe - the “e” is not a typing error).

4. Now you can use extended tags in the XML layout.

Now let’s go through the components shown above, and how to describe them in XML.

Combo-box Menu.

<menu value=”choose…”>
      {DATA}
</menu>

Where DATA is defined in the usual way:-

<data>
      <dog/>
      <cat/>
      <goldfish/>
</data>

You can define a width, and alternative appearance for a menu.  You can also define a font:-

<menu value=”choose…”  width=”100″  alt=”true”>
      <font size=”20″/>
      {DATA}
</menu>

Usually, alt=”true” means that the component style will be smaller, and more appropriate for desktop or browser use, rather than mobile use.

Listen for a menu selection like this:-

var menu:UIMenu = UIMenu(UI.findViewById(“menu”));
menu.addEventListener(UIMenu.SELECTED, menuSelected);
 
protected function menuSelected(event:MyEvent):void {   // import asfiles.MyEvent
      trace(“menu: “+event.parameters[0]+” “+event.parameters[1]);
}

Segmented Control

<segmentedControl>
      {DATA}
</segmentedControl>

You can also specify width, alignH, alt=”true”, or background colours to customise appearance.   Listen for button clicks like this:-

protected var _segmentedControl:UISegmentedControl;
 
_segmentedControl = UISegmentedControl(UI.findViewById(“segmentedControl”));
_segmentedControl.addEventListener(Event.CHANGE, segmentedControlChanged);
 
protected function segmentedControlChanged(event:Event):void {
       trace(“segmented control: “+_segmentedControl.index);
}

checkBox

<checkBox/>
<checkBox alt=”true”/>
 
protected var _checkBox:UICheckBox;


_checkBox = UICheckBox(UI.findViewById(“checkBox”));
_checkBox.addEventListener(Event.CHANGE, checkBoxChanged);
 
protected function checkBoxChanged(event:Event):void {
      trace(“check box:”+_checkBox.state);
}

radioButton

<columns widths=”50,50,50″>
      <radioButton/>
      <radioButton/>
      <radioButton/>
</columns>
 
_radioButtons = UIPanel(UI.findViewById(“radioButtons”));
_radioButtons.addEventListener(UIRadioButton.TOGGLE, radioButtonsChanged);
protected function radioButtonsChanged(event:MyEvent):void {
      trace(“radio button: “+UIRadioButton(event.parameters[0]).name);
}

Charts

ExtendedMadness includes five kinds of chart.  pieChart, barChart, lineChart, scatterChart, and horizontalChart (horizontal barChart).  Some charts are automatically calibrated, according to how much space the graph takes in the layout.  When the user clicks on a chart, a tool-tip appears.

By default, pieChart, barChart, and horizontalChart are rendered in 3D.  Change them to 2D as follows:-

<pieChart render=”2d”/>

barChart and horizontalChart can be stacked as follows:-

<barChart stack=”true”/>

Assign data to the chart within the XML layout, or in ActionScript.  For example,

protected static const MATRIX:XML = <data>
           <row>1,2,3,4</row>
           <row>3,8,4,1</row>
           <row>4,1,5,12</row>
          <row>7,14,0,4</row>
          <row>6,8,3,1</row>
          <row>5,7,9,2</row>
  </data>;
 
<barChart>{MATRIX}</barChart>

or in ActionScript:-

var barChart:UIBarChart = UIBarChart(UI.findViewById(“barChart”));
barChart.data = [[4,3,2,5,6],[4,8,15,16,23]];
// or
barChart.xmlData = <data><row>4,3,2,5,6</row><row>4,8,15,16,23</row></data>;

The charts interpret the data row-by-row, unless you specify column-by-column like this:-

<barChart id=”barChart” order=”column”/>
 
 

Customise Chart Colours

There are a few ways to change the colours of a chart.  You can use a different colour palette.  There are four preset palettes.  “rainbow”, “subtle”, “greyscale0″ and “greyscale1″.  Some palettes look best with order=”row” (default), and some look best with order=”column”.  So it’s worth experimenting.  For example:-

<barChart stack=”true” palette=”subtle” order=”columns”>{MATRIX}</barChart>

A palette is a cyclic-list of preset colours.  To start at a specific place in that list, use paletteStart, like this:-

<horizontalChart id=”hChart”  paletteStart=”5″/>

Another way to specify chart colours is to use a custom colour list, like this:-

protected static const COLOURS:XML = <colours>#99FF99,#CC9999,#9999CC,#CCCC66,#CC9966</colours>;
 
<pieChart>{COLOURS}{DATA}</pieChart>
 
 

SVG Renderer

I’ve been completely self-indulgent, and included an SVG renderer in the library.  You can specify vector images between the <svg> tags.  I made this SVG parser myself, and it’s pretty good, with a few quirks occasionally, where the result differs from what you get in a browser.  Of course, on a mobile screen, it’s better to use .jpg bitmap images rather than to render complex vector images.

I got this particular SVG sample from  http://www.openclipart.org.

 

 

Get ExtendedMadness

Flash users can download the ExtendedMadness.swc from http://code.google.com/p/mad-components/downloads/list .

Flex (Flash Builder) users can check-out the latest .swc and MadComponents demos from the Subversion repository at: http://code.google.com/p/mad-components/source/checkout .

Example code using ExtendedMadness can be found here.

Help Spread the Word

I’ve contributed these components freely to the Flash Mobile developer community.  Please help spread the word about MadComponents and ExtendedMadness, by blogging and twittering.  It would be great if you could contribute more examples and tutorials, or even just talk about these libraries and what they can do.

About these ads

30 Comments

Leave a Comment
  1. Bart / Jul 28 2011 10:03 am

    Sounds good!

    Some interactive demos would be nice though. It’s cool you post the little preview images but why not put on the little SWF’s so we can get a feel for the comps without checking-out and importing and so on? Or maybe do a demo-gallery with all the comps so we can see and play with what’s in there.

    Reason: Whenever I send a link to MadComponents first thing they say is “looks nice, where can i preview?”

    If you’d do that it would be boss to have a demo working on a mobile too (on an Android browser is pretty easy). So we can have a looksy before getting setup ourselves.

    • Daniel Freeman / Jul 28 2011 10:51 am

      I see your point. Indeed a benefit of MadComonents, is that they will work anywhere – browser, desktop AIR, mobile AIR – so browser .swf demos would be good.

      Except through a mobile browser would be a different experience to an .apk Android app. Probably slower (although I haven’t tried). There IS an Android demo .apk amongst the downloads.

  2. mvbaffa / Aug 9 2011 12:40 pm

    Hi Daniel,

    I had to stop for a while using MadComponents because of other projects. As I have said you job is very good and I intend to develop a project for the Financial Market very soon.

    What could help:

    - Better styling options and samples for the Datagrid component. For finantial applications it is very
    important
    - Some view transitions. If you could implement the same transitions of jQueryMobile it could help a
    lot.
    - Usage of Flex Charts or any other flash Charts that you could indicate. For my project this is very
    important.

    Great job !!!

  3. Chris Douglass / Aug 19 2011 7:03 pm

    Daniel, am I missing something but I don’t see the source for MadComps in the SVN repo. Can you clarify if the source is open? Thanks

    • Daniel Freeman / Aug 20 2011 10:51 am

      Source isn’t open yet. I didn’t want to release it while the library and API were in flux. It’s mostly stable now, but I have two more features to implement. I’ve got some time over the next couple of weeks, so I’ll probably release the source next month. If not, October.

      • Chris Douglass / Aug 20 2011 1:35 pm

        Ok. If you need help creating docs (which is mostly why I asked to see the source), I’d be glad to help. I know you’re busy coding but as you know the comps are changing frequently and it’s difficult to know which events, for example, a comp fires and responds to, their key properties, etc. The docs you’ve posted on Goog are fine for getting started but we could use some ASDocs for MC. :)

        Let me know if I can help out.

        Chris

      • Daniel Freeman / Aug 21 2011 6:17 am

        I’ve just tried the asdoc command line tool in the SDK. It’s pretty cool (I’ve never used it before). My source needs more comments though.

        Thanks for the offer of help Chris,

        I’ll get the documentation done. But it would be great if people can write more examples, and blog about MadComponents.

  4. Michael Martinez (@MonkMartinez) / Aug 28 2011 7:31 am

    I love this library and I’m trying to use it in a project. I hate to bug you or seem ungrateful as I’m super grateful.

    Do you have any plans on implementing a text area of some kind? Something with word wrap and will accept html tags? Would love to hear future plans for this awesome library so I can determine if I should move forward with it.

    • Daniel Freeman / Aug 29 2011 3:36 am

      Here’s how to get an input text area:-

      var textInput:UILabel = UILabel(UI.findViewById(“textInput”));
      textInput.mouseEnabled=textInput.multiline=textInput.selectable=true;
      textInput.type=TextFieldType.INPUT;

      textInput.borderColor = 0xCCCCCC; //These lines optional and aesthetic
      textInput.border = true;

      (Note that flash input fields just don’t work in Safari v5.1 until Apple or Adobe fix the issue)

      • Paul / Dec 8 2011 4:04 am

        Is there anyway to fix the height of the textarea and enable it to be scrollable in vertical direction if there’s overflow of text, instead of extending the textarea automatically?

      • Daniel Freeman / Dec 8 2011 2:44 pm

        You can use a label as an input:-

        <label id=”input” height=”200″ alignH=”fill”/>

        Then in ActionScript, turn it into an input field:-

        var input:UILabel = UILabel(UI.findViewById(“input”));
        input.type = TextFieldType.INPUT;
        input.border = input.mouseEnabled = input.selectable = true;

        But I don’t think it will respond to finger swipe scroll gestures.

  5. Chris Douglass / Aug 29 2011 12:23 pm

    Hey Daniel, have you seen that the FRE native extension capability is being extended to AIR 3 (beta 2 was just released)? Not that this is relevant to MC but I know you have some interests in tools like AirPlaySDK, etc and doing work that is outside of the AIR boundary. However, we’re finally get a way to write C++ extensions that are in-process with AIR. Very cool stuff.

    BTW, the testing with MC went great. Will be writing my first real apps with the comps starting this week. Unfortunately, I’ll probably be asking a few questions too on basics for properties and usage here on your blog. Can we use a forum on Google Code for that type of Q+A or should we just post here when we have questions?

    This fall, I’ll blog as much as time permits for MC… Great stuff. Can’t wait to see the source.

    Chris

    • Daniel Freeman / Aug 29 2011 1:02 pm

      Best to just post here for questions – I always try and respond as soon as I can. I may set up something else later.

      Yes, AIR 3.0 is of great interest to me. I’ve been wading through a lot of the information about it today.

  6. Richard Haber / Nov 28 2011 7:00 pm

    Hi Daniel,

    Are there any examples of how to add labels to the pie wedges or bars of the charts? I’d also like to know how to assign colors to wedges or bars in code, perhaps based on other data sources.

    Thanks

    • Daniel Freeman / Nov 30 2011 1:33 pm

      Labels aren’t supported. You have to addChild() them yourself. Also, I haven’t allowed colours to be assigned from ActionScript, but I’ll put that into the next update.

  7. Lance / Feb 28 2012 3:21 am

    Does Mad Components support any type of callout component? In the first picture on this blog post, it kind of looks like Cut, Copy, and Paste are within a sort of callout container. Thank you for your time.

    • Daniel Freeman / Feb 28 2012 6:59 am

      It’s up to you to link a button click to a pop-up. There’s no callout button. But that’s not difficult to accomplish. You can launch a pop-up window, a sliding drawer, the UICutCopyPaste component in the picture, or a UIDropWindow. Those final two classes aren’t as flexible as they could be right now. I’ll do something in the next update to make callouts more powerful.

      • Lance / Feb 28 2012 11:36 pm

        Great, thank you for all your hard work!

  8. Lance / Mar 2 2012 3:17 pm

    Having an issue with the Split View Navigator, there is a small outline around the component that lets the user view content he/she isn’t supposed to. Have you encountered this before?

    Example: http://imgur.com/1ftzQ

    Thanks for your time!

  9. Probe / Jul 27 2012 9:57 am

    Hi Daniel,

    This is my first day using madcomponents and extended madness.
    I tried a coupled of things and got a few issues because I am still just a noob :-).

    First I added a combobox, then below added an inputBox using XmlMode, when I cliked the comboBox the choices where available below the inputBox. I tried using pure actionScript as well but the problem was still there.

    Then I added a combobox in pure actionScript. Setting the x and y in the attributes didn’t put the comboBox where I wanted to(like for the comboBox for example). Of course setting the x and y manually after that worked great.

    Cheers!

    • Probe / Jul 30 2012 8:19 am

      Ok I found a correction to my problem for the combobox. If you want to know the direct solution go to 2

      1 Before finding the solution I downloaded the sources and did a few modifications on the code to understand why it appeared below. First I had to modify the code the dirty way to make the menu appear on top.
      All I saw was that Cursor seemed to behave a strange way. Then I got a little further in the code and found that when you call activate the cursor will be set to a given Sprite.
      And when the popup is activated it will appear on top of that sprite.

      2 What I had before
      var mSprite:Sprite = Engine.GetMainSprite();
      UIe.activate(mSprite);
      //Components declaration including combobox
      Result :
      The combobox menu is displayed under ever component
      Solution
      var mSprite:Sprite = Engine.GetMainSprite();
      screen = UI.create(mSprite,);
      //Components declaration including combobox
      UIe.activate(mSprite);
      Result :
      The combobox menu is displayed over every component

      • Daniel Freeman / Jul 30 2012 10:57 am

        So without UI.create() Cursor wasn’t on-top of everything else? I’ll look into it.

  10. Probe / Aug 1 2012 5:12 am

    Hi Daniel,

    Actually I think it was more due to the activate method where _curson is instanciated.
    public static function activate(screen:Sprite):void {
    FormClass = UIPanel;
    extend(DESKTOP_TOKENS,DESKTOP_CLASSES);
    HintText.SIZE = 30;
    Cursor.HINT_Y = 64;
    _cursor = new Cursor(screen);
    _clickTimer.addEventListener(TimerEvent.TIMER, makeVisible);
    }

    Cheers

  11. james / Aug 30 2012 10:42 pm

    Thanks for the components they are cool. I have ran into a data size problem .is there a best practice for the data type array/xml. I have a list with 5000 rows, flex mobile shows the list with no problem,making a the list decent is a probl m. uilist crashes after the same data is added UIList is easier to work with. What are your recommendations?

    • Daniel Freeman / Sep 16 2012 2:15 am

      Use <longList recycle=”true”>. This recycles list rows as needed – and keeps memory usage down.

      • w0rt3x / Nov 20 2012 6:19 am

        I have using longList with recycle=”true” and also render mode is set to GPU, but app still crashes when I have more than 30 items….

      • Daniel Freeman / Nov 20 2012 6:37 am

        The dreaded Signal-11 bug?

        On which device?

        Have you tried with the latest version? Using the source code under MadComponents3D on the google code site? One user reported that the problem may be due to scrollRects, so this version deals with masking differently.

        By the way is in your app? Or no mask?

        I’ve tried getting Adobe to fix this bug in Adobe AIR – but it is difficult for them to reproduce it.

  12. qumberkazm / Mar 9 2013 1:35 pm

    i am using quest map with mad components, i have created image loader tag and in that tag i have loaded image … that is working fine but the problem is all the controls are not working, it could be because i have added all the action listener on map and add that map component in image .. is there any way to map the event listener

    • Daniel Freeman / Mar 10 2013 4:36 am

      Try setting mouseEnabled and mouseChildren to true for the . If it’s inside something that scrolls, try setting clickable to true. Come and join the facebook group – other people are doing map apps there and may be able to help further.

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

Trackbacks

  1. AS3 MadComponents Tutorial Series – Starting Out | Caffeine Industries

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

Follow

Get every new post delivered to your Inbox.

Join 86 other followers

%d bloggers like this: