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.