Skip to content
June 30, 2011 / Daniel Freeman

Tutorial 3: Lists and Pickers

Having laid the foundations with the previous two tutorials, now we can start to demonstrate the real power of MadComponents for mobile flash applications.  In this tutorial, we’re going to investigate lists and pickers.

There have been a few version updates since the last tutorial – So always make sure that you have the latest version of the mad components library.  (Currently, the latest is madComponentsLib0_5_3.swc).  Download from here.

Beware Copy and Paste

Given that these tutorials are full of XML examples, it’s worth mentioning again that things can go wrong if you copy and paste XML into Flash or Flex Builder.  You might get an error that says:- “TypeError: Error #2007: Parameter text must be non-null”.  This is because the pasted text contains unprintable characters that screw things up.  Refer to the previous tutorial for advise of how to remedy this.

Defining Data in XML

Let’s assume that we want to build an application, where the user can scroll through a list of names.  We can first define the data that will populate the list like this:-

<data>
    <item label=”Sneezy”/>
    <item label=”Sleepy”/>
   <item label=”Dopey”/>
    <item label=”Doc”/>
    <item label=”Happy”/>
    <item label=”Bashful”/>
    <item label=”Grumpy”/>
</data>

There is also an alternative shorthand way of expressing XML data in MadComponents.  Given that the names have no spaces or non-alphabetic characters, we can save some typing and write:-

<data>
     <Sneezy/>
     <Sleepy/>
<Dopey/>
    <Doc/>
    <Happy/>
<Bashful/>
    <Grumpy/>
</data>

Making a list

To put this data into a list, we simply write:-

<list>
    {DATA}
</list>

So, the entire program looks like this:-

package
{
	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	public class MadLists extends Sprite
	{
		protected static const DATA:XML = <data>
	<Sneezy/>
	<Sleepy/>
	<Dopey/>
	<Doc/>
	<Happy/>
	<Bashful/>
        <Grumpy/>
   </data>;

		protected static const LIST:XML = <list>{DATA}</list>;

		public function MadLists(screen:Sprite = null)
		{
			if (screen)
				screen.addChild(this);

			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			UI.create(this, LIST);
		}
	}
}

If you rapidly click and drag the list up or down, you’ll see it scroll, and the scrollbar appearing at the side.  You probably want a longer list of data to really see this in action.  Testing an app on the desktop, using a mouse or trackpad, it can be a bit tricky to control the difference between scroll/swipe gestures and click gestures.  But on the device – it all makes sense.

Listen for clicks

Listen for list clicks as follows:-

protected var _list:UIList

_list = UIList(UI.findViewById(“list”));
_list.addEventListener(UIList.CLICKED, listClickedHandler);
 
protected function listClickedHandler(event:Event):void {
        var index:int = _list.index;
//   var group:int = _list.group; //divided and grouped lists only.
}

Divided and Grouped lists have a group property, that gives the group index of the clicked row.

 

Tick Lists

NOTE: SINCE WRITING THIS TUTORIAL – TICK LISTS HAVE MOVED INTO EXTENDEDMADNESS.  Please use ExtendedMadness.swc library, and UIe.create() for this next part.

MadComponents has two kinds of tick list.  <tickList/> and <tickOneList/>.  As you’d expect, <tickOneList> only allows one row to be ticked at any time.  (so click on a second row, and the first one un-ticks itself).

You can read the state of the tick list using ActionScript.  When listening for the state of the data to change, listen for Event.CHANGE , rather than UIList.CLICKED.

package
{
	import com.danielfreeman.madcomponents.*;
import com.danielfreeman.extendedMadness.*; //new

 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;

 public class MadTickList extends Sprite
 {
 protected static const DATA:XML = <data>
 <Sneezy/>
 <Sleepy/>
 <Dopey/>
 <Doc/>
 <Happy/>
 <Bashful/>
 <Grumpy/>
 </data>;

 protected static const TICKLIST:XML = <tickList id="ticks">{DATA}</tickList>;

 protected var _tickList:UITickList;

 public function MadTickList(screen:Sprite = null)
 {
 if (screen)
 screen.addChild(this);

 stage.align = StageAlign.TOP_LEFT;
 stage.scaleMode = StageScaleMode.NO_SCALE;

 UIe.create(this, TICKLIST);  //new (e)

 _tickList = UITickList(UI.findViewById("ticks"));
 _tickList.addEventListener(Event.CHANGE, tickListChanged);
 }

 protected function tickListChanged(event:Event):void {
 trace();
 for each(var item:uint in _tickList.tickIndexes) {
 trace(UILabel(_tickList.findViewById("label",item)).text);
 }
 }
 }
}

Defining Grouped Data in XML

Now, we’re going to look at grouped lists in MadComponents.  But first, let’s look at how to define grouped data.

<data>
     <group label=”dwarfs”>
          <Sneezy/>
          <Sleepy/>
<Dopey/>
         <Doc/>
         <Happy/>
<Bashful/>
         <Grumpy/>
    </group>
    <group label=”reindeer”>
          <Dasher/>
          <Dancer/>
          <Prancer/>
          <Vixen/>
          <Comet/>
          <Cupid/>
          <Donder/>
          <Blitzen/>
    </group>
</data>

You can still use the alternative notation, for example: <item label=”Dasher”/> if you wish.  Group label attributes above are optional.  Include them if you require group headings on your grouped list.

Divided and Grouped Lists

You can create a divided list as follows:-

<dividedList>
     {GROUPED_DATA}
</dividedList>

Or, create a grouped list like this:-

<groupedList>
     {GROUPED_DATA}
</groupedList>

But we can improve the appearance of the grouped list, by choosing appropriate colours and spacing:-

<groupedList background=”#C6CCD6″ colour=”#CCCCCC” gapH=”32″ gapV=”4″>
       {GROUPED_DATA}
</groupedList>
 

Colouring Lists

In the previous example, we used the colour, and background attributes to change the appearance of a list. This works for any list.  Not just the grouped list.

The colour attributes defines the colours of the dividing lines.  The background attribute can specify several colour values, separated by commas.  The first parameter is the background colour, the second is the row colour.  Any further parameters allow you to have rows with alternating colours.  For example:-

<list colour=”#333366” background= ”#CCCCFF,#9999CC,#AAAACC”>

Creates the following result:-

Suppose you also want to make the text colour white.  You can define <text> formatting as follows:-

<list colour=”#333366″ background= “#CCCCFF,#9999CC,#AAAACC”>
     {DATA}
     <font color=”#FFFFFF”/>
</list>

Notice that colour attribute inside an HTML font tag has American spelling.  But Colour elsewhere in the layout is spelt with a ‘u’, with British spelling.

Custom renderers

You can define a custom list item renderer in XML.  Suppose, for example, each row contains a label and a switch.  You can define that as follows:-

<list colour=”#333366″ background= “#CCCCFF,#9999CC,#AAAACC”>
        {DATA}
        <horizontal>
                <label id=”label”/>
                <switch id=”state” alignH=”right”/>
        </horizontal>
</list>
 

Searching Lists

The <search> tag may be used to create a search bar at the top of a list.  The field attribute can be used to enable searching and filtering of the list, without having to write any actionScript.  In the previous “dwarfs” list example, you can modify the layout as follows to enable searching:-

<list>
      {DATA}
      <search field=”label”/>
</list>
 

Setting data in ActionScript

You can set list data from ActionScript, rather than defining it in XML.  You can assign either an array, or XML.  You can assign an array of objects to the data property like this:-

list.data = [{label:”one”}, {label:”two”}, {label:”three”}];

There is also a short way to do this, using an array of strings.

list.data = [“one”,”two”,”three”];

For a custom renderer, you might have more than one value in each object, for example:-

list.data = [{label:”one”,switch:"on"}, {label:”two”,switch:"off"}, {label:”three”,switch":on"}];

For a divided, or grouped list, use a two dimensional array:-

list.data = [[{label:”one”}, {label:”two”}], [{label:”three”}]];

You can assign XML data like this:-

list.xmlData = <data><one/><two/><three/></data>;

Or this:-

list.xmlData = <data><i label=”one”/><i label=”two”/></data>;

For a divided or grouped list, we would do something like this:-

list.xmlData = <data><group> <one/><two/></group> <group><three/> </group></data>;
 

Pickers

We use pickers in a similar way to a list.  So we can set its data in XML, or using the data or xmlData properties, just like with a list.

The <picker> component tends to be used in conjunction with a <columns> layout.  The column layout was described in the first tutorial.

Here is an example a three column picker:-

<columns gapH=”0″ widths=”40,50%,50%” pickerHeight=”200″>
         <picker alignH=”centre”>
                  {NUMBERS}
         </picker>
         <picker>
                 {DATA}
         </picker>
         <picker>
                {DATA}
         </picker>
</columns>

The pickerHeight attributes enabled you to declare the height of the picker bank.

Here’s a complete code example of using a picker bank:-

package
{
	import com.danielfreeman.madcomponents.*;

	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;

	public class MadComponentsPicker extends Sprite {

		protected static const DATA:XML = <data>
     <Red/>
     <Orange/>
     <Yellow/>
     <Green/>
     <Blue/>
     <Indigo/>
   </data>;

		protected static const PICKER_EXAMPLE:XML = <columns gapH="0" widths="40,50%,50%" pickerHeight="180">
    <picker alignH="centre">
      <data>
         <item label="0"/>
         <item label="1"/>
         <item label="2"/>
         <item label="3"/>
         <item label="4"/>
         <item label="5"/>
         <item label="6"/>
         <item label="7"/>
         <item label="8"/>
         <item label="9"/>
       </data>
    </picker>
    <picker index="1">
        {DATA}
    </picker>
       <picker index="4">
        {DATA}
    </picker>
</columns>;

		public function MadComponentsPicker(screen:Sprite = null) {
			if (screen)
				screen.addChild(this);

			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			UI.create(this, PICKER_EXAMPLE);
		}
	}
}

Notice the index attributes in the XML, that set the pickers to initial preset positions.

What’s next ?

In the next tutorial we’re going to learn about navigation, connecting MadComponents to server data, and we’ll build a Twitter application.

Further reading

To find out more about MadComponents, you can read the other related threads on this blog, or download the documentation at http://code.google.com/p/mad-components/downloads/list

There are also lots of code examples to view or check-out from the subversion repository at http://code.google.com/p/mad-components/source/checkout

Please subscribe to this blog if you want to catch subsequent tutorials.

About these ads

58 Comments

Leave a Comment
  1. Richard Tolley / Jul 7 2011 11:41 am

    Hi Daniel

    I’ve played with the colour and background attributes for the picker. Is there anyway to change or remove the outside rectangular border? and possibly change the 2 background gradients? The ability to remove the border would be nice.

    Regards

    Rich

    • Daniel Freeman / Jul 7 2011 1:43 pm

      In MadComponentsLib0_5_4.swc,

      [columns background="#rgb0,#rgb1,#rgb2"][picker/]..etc…etc…[/columns]

      #rgb0 = gradient of picker frame colour
      #rgb1 = outline of picker frame colour
      #rgb2 = bottom half of picker frame colour

  2. NAGAI Katsunori / Jul 30 2011 6:02 am

    I would like to access switch compo in list compo.

    I can make the list of which row has a label and switch.
    I want to know the switch state after its state has been changed.
    How can I access ?

    const DATA_ARRAY:Array = [
    {label0:"ABC", state0:"on"},
    {label0:"CDE", state0:"off"},
    {label0:"FGH", state0:"off"}
    ];

    const LAYOUT:XML =

    ;

    UI.create(this, LAYOUT);

    var list:UIList = UIList(UI.findViewById(“list”));
    list.data = DATA_ARRAY;
    list.addEventListener(UIList.CLICKED, onTapList);

    function onTapList(evt:Event):void
    {
    // how??
    }

    • Daniel Freeman / Jul 31 2011 1:30 am

      Make the List object global, because you’ll need to reference it in the handler.

      protected var _list:UIList;

      findViewById actually has three parameters. id, row, group. So,

      protected function onTapList(event:Event):void {
      var uiSwitch:UISwitch=UISwitch(UI.findViewById(“switch”,_list.index));
      // var uiSwitch:UISwitch=UISwitch(_list.findViewById(“switch”,_list.index)); // a bit faster maybe
      trace(uiSwitch.state);
      }

      • NAGAI Katsunori / Jul 31 2011 1:56 am

        Thank you very much for your quick res!

        I could access to switch state.

  3. mike / Aug 22 2011 8:42 pm

    Hi Daniel,
    these components are really really good. Thanks for making them free.

    I’d like to ask a question that I’m struggling with. Using the MadList I want to be able to click on an index and get a trace. You have provided some code to do this (protected var _list:UIList etc) but I must be putting this in the wrong place as it gives a few errors, one being that _list is undefined. Can you tell me what I’m doing wrong.

    thanks

    Mike

    • Daniel Freeman / Aug 23 2011 1:54 am

      I assume protected var _list:UIList; is defined globally. (Somewhere after between class declaration, and the constructor). Make sure it isn’t defined in the code too. You should have:-

      _list = UI.findViewById(… etc …

      not

      var _list = UI.findViewById(… etc…

  4. mike / Aug 22 2011 9:09 pm

    Hi Daniel,

    I’m looking at the dividedList Now this is what I’m after…. a scrolling list with pics that you can click on. I cant find where the mouse clicks come from, I can’t see any event listener. I can see a trace for “mouse up” when I click on the divider. How can i add mouse/touch clicks to this.

    thanks (sorry for all the questions today)

    mike

    • Daniel Freeman / Aug 23 2011 2:01 am

      Hmmm, I haven’t provided an event for clicking on the divider. I’ll take a look at that for the next version.

      Normally, clicking on a list will dispatch a UILIst.CLICKED event.

  5. mike / Aug 23 2011 2:17 pm

    Hi Daniel,

    I have been working using the List components (dividedList) and think its fantastic what you have done for the community. I’m putting in a lot of hours to getting it to work and have hit a major stumbling block.

    I want to click on a scrolling list and get it to display another page relating to that page/index. so if I click on dog the scrolling list disappears and I get whole page of dog stuff. Then click “back” button and it goes back to the list.

    I have been at it for almost a day, I’m not a beginner, but your work is worth the effort. Can you help me and post an example .as of this or tell me exactly what I need to do.

    Also a separate question. I can get a “list.index” variable on click/touch and I get a trace index number. Perfect!

    What I’d like to do is then goto a frame depending on the number. But it said gotoAndStop is not a function. How would we manipulate MCs/objects external to the madComponents from inside madComponents. I have tried parent and root but it can’t see the timeline or any mc on the stage

    Thanks in advance

    Mike

    • Daniel Freeman / Aug 24 2011 2:31 am

      It’s a common requirement. To be able to link a list to a detail page, or detail pages within a navigation based application. I’ve written and uploaded two samples:-

      http://code.google.com/p/mad-components/source/browse/trunk/MadComponentStuff/src/MadComponentsNavigationT0.as

      http://code.google.com/p/mad-components/source/browse/trunk/MadComponentStuff/src/MadComponentsNavigationT1.as

      The first approach is to have one detail page layout, and have an array of text and pictures indexed by “index”. In my sample, DETAIL_PAGE could be much more sophisticated if you wanted. And the DETAIL_ARRAY (Array of Objects) could have many more fields in each object. {id0:value0, id1:value1, etc…}

      The second approach is to have a different detail page for each list item. In this case, we turn off automatic navigation, and explicitly goToPage() in handlers for list clicks and back button pressed.

      I hope these samples help.

      • mike / Aug 24 2011 8:11 am

        wow thanks Daniel
        I understand how it works now.

        I am trying to add pictures to the scrolling list and getting in a pickle. I’m using the code from the dividedList to embed the pics, but not having much luck. I’m adding all the constants and adding the {data} to the list.

        Can you tell me how I add pics to the scrolling list. I know its in the way that the {data} is added, but once I see this working I’ll be golden!

        thanks

        Mike

      • Daniel Freeman / Aug 24 2011 1:08 pm

        There’s a limitation with using XML data. You can’t provide more than one bit of data per row. So if you have both a label and a image, you can’t set both using XML data. This is a limitation I guess I need to fix now someone has spotted it :)

        You can assign data in an array in ActionScript:-

        uiDividedList = UIDividedList(UI.findViewById(“dividedList”));
        uiDividedList.data = ["Heading A",[{label:"zero",pic:getQualifiedClassName(IMAGE0)}],
        “Heading B”,[{label:"one",pic:getQualifiedClassName(IMAGE1)},{label:"two",pic:getQualifiedClassName(IMAGE2)},{label:"three",pic:getQualifiedClassName(IMAGE3)}],
        “Heading C”,[{label:”four”,pic:getQualifiedClassName(IMAGE4)}…. etc…etc…

  6. mike / Aug 24 2011 1:51 pm

    Hi Daniel,

    Your feedback is great and is very much appreciated.
    I’m almost there and have been working on it for many hours. One extra thing would be great as I am really struggling.

    On the link you sent me this morning “MadComponentsNavigationT0″ it has a list which you tap to go to detail page.

    protected static const DATA:XML =

    protected static const LIST:XML =
    {DATA}
    ;

    This works but how do I make or turn this basic list in NavigationT0 to look like the image list in MadComponents or the DividedList. With the little images by the side and a bit of text.

    Hope this makes sense. Basically I and trying to have an image scrolling list which when tapped goes to a detail page and back button to go back. I have got it working perfectly so far, I just can’t seem to be able to grab the code for the image scrolling list from another .as script and pop it into the NavigationTO .as without multiple errors.

    thanks

    Mike

  7. Ari / Sep 13 2011 7:48 am

    Hi Daniel

    for the picker, when i select the picker,
    how to trace the date who have been selected?
    then how to choose the date manually from code?

    thanks before, your picker is very nice

    • Daniel Freeman / Sep 15 2011 4:04 am

      I’ve updated the MadComponentsPicker.as example. I hope this helps.

      http://code.google.com/p/mad-components/source/browse/trunk/MadComponentStuff/src/MadComponentsPicker.as

      • Ari / Sep 20 2011 7:22 am

        thank u, but i’m still stuck to trace the xml, not the index..
        i’m very newbie for the as3, so please help me..
        i’m stuck to trace the selected xml,.

        Please help me..

        thank u very much for u’re help.

        ari

      • Daniel Freeman / Sep 21 2011 2:57 pm

        Ahh. Your question helped me spot a bug. You SHOULD be able to use:-

        _column0.row.label
        _column1.row.label
        _column2.row.label

        BUT. It DOESN”T WORK PROPERLY for a UIPicker, although it would work for a list. I’ll fix this bug in 0.6.1.

        So, in the meantime, you can use:-

        _column0.data[_column0.index+1].label
        _column1.data[_column1.index+1].label
        _column2.data[_column2.index+1].label

        …which you give you the correct values.

  8. Ari / Sep 22 2011 9:14 am

    wow.. thank u so much Daniel..
    once more question..
    for the spinner, whether it can resize automatically for the long xml label?

    how to adjust the scroll speed?

    thank u Daniel.. u’re very help me .. GBU

    ari

    • Daniel Freeman / Sep 24 2011 3:36 am

      Labels don’t resize. And for a picker, line wrapping isn’t a viable option.

      You’ve just got to ensure that the label fits.

      The scroll speed is related to how hard you flick a list. There’s no adjustment, but I can take a look for 0.6.1 if I can apply a tweak or not.

      But you can adjust the sensitivity.

      for example UIPicker.PICKER_DECAY = 0.99; … will make it more
      fluid. (at the moment it’s set to 0.98). Don’t give it a value >1.

  9. dave / Sep 26 2011 7:02 pm

    I am having difficulty retrieving the label for the selected row with the FlexUIPicker.

    I am have tried to link the FlexUIPicker with id=”picker1″ to a variable “myPicker”
    by using the approach in your example.

    1 protected var myPicker:UIPicker;
    2 myPicker = UIPicker(UI.findViewById(“picker1″));

    and it dies every time I try line 2

    any ideas?

    • dave / Sep 26 2011 10:22 pm

      Got it.

      UIPicker(component.getChildAt(0)) gives you the UIPicker Instance

      UIPicker(component.getChildAt(0)).row.label gives you the current label.

      I have altered:

      -UIPicker to have a get label(returns the current label)
      -FlexUIPicker to have a get inst (which returns the UIPicker instance)
      -FLEXUIPicker to have a get label(returns the current label)

      multi column picker functions will be next.

      Thanks for your work.

  10. Ari / Nov 8 2011 4:09 am

    hai daniel.

    why if i join list and switch, the switch code like

    protected function toggleActivity(event:Event):void {
    if (uiSwitch.state) {
    trace(“on”);
    UI.showActivityIndicator();
    }
    else {
    UI.hideActivityIndicator();
    trace(“off”);
    }
    }

    this function is not run, the trace can’t run. why ?
    pliss help, thanks before.

    • Daniel Freeman / Nov 8 2011 6:52 am

      Ok, you have a switch within a list, right? A custom renderer? And the switch has an id? Assume it’s called “swch”

      So you have a layout something like this?

      [list]
      [horizontal]
      [label id="label"]
      [switch id="swch" alignH="right"]
      [/horizontal]
      [/list]

      right?

      But now you have many switches in the list. Which one to listen to? Suppose you want to listen to the one in the first row (index 0), you’d write…

      var switch:UISwitch = UISwitch(UI.findViewById(“swch”,0)); //Notice the second parameter, the list row.
      switch.addEventListener(Event.CHANGE, toggleActivity);

      Is that what you’re doing?

      • ari / Nov 10 2011 5:46 am

        WOW that’s work… hehhee
        thanks daniel..
        one more question, if i do the same in the “groupedList”, it didn’t work.? why?
        pliss help

  11. ari / Nov 10 2011 5:49 am

    sorry daniel i find the answer…
    heheheh
    thanks daniel

  12. jonkaye (@jonkaye) / Nov 30 2011 5:04 am

    Dear Daniel,

    I was going through this tutorial and had two issues that look like layout bugs.

    1. I tried the Tutorial 1 NAVIGATOR example, throwing a list into a view:

    protected static const HOME_VIEW:XML =
    Continue
    Hello, World!
    {DATA};

    and running it on the desktop simulator for Android, the button is hidden by the container title (in portrait orientation), then when rotating simulated device to the right, the title hides both the button and the label.

    2. I tried your custom item renderer code, mixed into the NAVIGATOR example:

    protected static const HOME_VIEW:XML = ContinueHello, World!{DATA};

    and in portrait mode, the layout was correct (showing the button and label), but when rotated left, both the button and label disappeared under the container title.

    Thanks!

    • Daniel Freeman / Dec 1 2011 12:33 pm

      Thanks for the heads-up.

      Your metatags got stripped, but I’ll try to match the pattern that’s left to the tutorial. I sent an email to your flashsim address.

  13. jonkaye (@jonkaye) / Dec 11 2011 10:48 pm

    Dear Dan,

    Is there a way to make your TickOneList leave the highlight on instead of giving the check mark? I have used this list and set the font the 72 () and the check mark gets flattened out (about 1/4 the line height) — not a desirable look. I really just want a simple, obvious way to show that item is selected.

    Thanks for a great component set!

    • jonkaye (@jonkaye) / Dec 11 2011 10:51 pm

      Looks like my XML got swallowed up there around ‘the 72′ – was an XML string >list< >font size="72&quot /< &gt/list&lt

      • Daniel Freeman / Dec 12 2011 1:31 am

        There is a feature of the latest MadComponents version you can use. I implemented something new to make splitView work.

        If you use a normal list, and in ActionScript:-

        _list.showPressed = true;

        …then the selection highlight doesn’t go away. It sticks. Although it doesn’t toggle the way a tickOneList does. (so pressing a cell twice doesn’t de-select it).

      • jonkaye (@jonkaye) / Dec 12 2011 11:33 am

        Thank you so much Dan for your quick response – exactly what I needed!

    • jonkaye (@jonkaye) / Dec 14 2011 8:41 pm

      one more thing here — how can I clear the selected row programmatically?

      Thanks!

      • Daniel Freeman / Dec 15 2011 6:49 am

        Ooops, I didn’t provide a method to do that. That’s something else I need to include in the next update. But there’s a messy work-around for now.

        Shape(Sprite(_list.getChildAt(0)).getChildAt(0)).graphics.clear();

  14. Zezefreda / Jan 16 2012 7:20 pm

    Hi Daniel :)
    I was wondering if there’s a way to override highlight color settings via XML.
    Thanks for your attention,
    Zezefreda

    • Daniel Freeman / Jan 18 2012 5:05 pm

      Yes, there IS a way in XML. You must write it in the root node. eg:

      protected static const LAYOUT:XML = <vertical clickColour="#CCCC00" … etc…

      The ActionScript way is:-

      UIList.HIGHLIGHT = 0xCCCC00;

  15. Mark Dennis / Mar 1 2012 3:15 pm

    Hi Daniel,

    I tried to get the search bar on a DividedUIList to work, but it does not seem to work. The search bar appears fine, but when trying to search/filter it has no effect on the list. Of course, it works perfectly on a regular UIList though.

    I really like this library. It is excellent and by far the best out there especially for mobile development in AIR.

    On another note, when successfully filtering a UIList and an item is clicked, the index of the selected item of the list refers to the index in the filtered version of the list and not the original unfiltered version of the list. Is there anyway to get the index of the item in the non-filtered list, or in some way to get data from the selected item?

    Thanks!
    Mark

    • Daniel Freeman / Mar 1 2012 4:34 pm

      Yup, search bar doesn’t work for a divided or grouped list – it was written just for normal lists.

      But, you can make your own behaviour for it. You can treat a search bar just like you treat an input field. And repopulate the list with your own filtered data, when the user enters a search expression.

      There is a work-around for the filtered index problem. You could assign something to each row’s data that uniquely identified that row.

      You could define list data like this:-

      <data>
      <item firstname=”Fred” id=”0″/>
      <item firstname=”Sarah” id=”1″/>
      <item firstname=”Peter” id=”2″/>
      …etc…
      </data>

      and then read parseInt(list.row.id) to get the unfiltered index.

      But this workaround is awkward, and I think that I should provide an automatic mechanism to do this kind of thing.

      I’ll think about that for the next version.

      • Mark Dennis / Mar 1 2012 8:37 pm

        Ok! That’s great. Thanks a lot for your help and your feedback.

  16. Eric Goulet / May 9 2012 7:00 pm

    Hi Daniel, can I make a list (UIList) with multiple line for the label and each line with a different TextFormat?

    Thanks
    Eric

  17. Mirek / Jun 10 2012 12:53 am

    First – I’m a newbie :)
    I want to make short list and a button below this list.
    This is code:
    protected static const VERTICAL:XML =

    Button

    Button is only partially visible on bottom of the stage. Why? Maybe list always occupies all available stage height? How can I change this?
    _____
    sorry for my English

    • Daniel Freeman / Jun 10 2012 2:57 am

      I’m afraid WordPress strips all of the XML from your question. So I don’t know what you wrote. Probably the best way to ask a question like this is to ask it on the Facebook group:-

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

      • Mirek / Jun 10 2012 9:52 am

        I’m waiting for access to this group. But my problem is very basic. Code ist not necessary. I just want short list (2 – 3 entries) and a button below this list. When I try to do this button is always at the bottom of screen (partly goes beyond screen). Between list and button is white space. How can I get rid of this empty space?

      • Mirek / Jun 10 2012 2:58 pm

        I asked this question on facebook group

  18. Richard / Jun 29 2012 9:51 pm

    Beginners (like me) might use this update:

    tickList, tickOneList were moved to ExtendedMadness swc. To compile, REMOVE the library ref for MadComponentsLib0_7_4.swc (or your version) and add ref to ExtendedMadnessLib0_1_6.swc (or your version). Do not reference both libraries.

    I also saw error on running the adobe SDK adt after compile.

    “Comparison method violates its general contract!”

    It seemed to be triggered by this code… for some reason … but it’s apparently not related. Java 1.7 SDK has a bug. Uninstall 1.7, downgrade to 1.6.

    http://www.flashdevelop.org/community/viewtopic.php?p=42069

    • Richard / Jun 29 2012 10:04 pm

      If you use the original tutorial code without change, currently you likely will see:

      Error #1065: Variable tickList is not defined.

      Along with CHANGING the library to “Extended Madness”… it seems you need to add this line just before you do the UI.Create:

      UIe.activate(this); // Gives us access to extended components

      • Richard / Jun 29 2012 10:07 pm

        … plus…

        ADD an imports.

        import com.danielfreeman.extendedMadness.*;

        Although you only reference the library for “ExtendedMadnessLib0_1_6.swc” and not the regular MadComponentsLib0_7_4.swc… you still import both packages

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

  19. Graham / Oct 25 2012 5:53 am

    Fairly new to AS3 and just started with madcomponents…very cool so far!

    I do have a question though: when using custom renderers, as per your example above where each row contains a label and a switch,

    If it is just repeating each row and adding a switch with an id=”state”, am I wrong in assuming that all switches in the list would end up with the same id (“state”)?
    How are you able to listen for these switches change from on/off and identify which switch changed state?

    Thanks in advance for any help

    • Daniel Freeman / Oct 26 2012 7:04 am

      I think this was discussed on the Facebook group – but I couldn’t find it.

      First, you might consider using a or in extended madness.

      You could set the state of state of the switches with the data that populates the list:

      _list.data = {{label:”hello”, onOff:”on”},… etc…

      assuming

      (I think that works anyway.)

      To change it programmatically, for any row. var switch:UISwitch = UISwitch(UI.findViewById(“OnOff”, row));

      Notice the second parameter, which is the row in the list. (A grouped or divided list has a third optional parameter for the group)

      Come and join the Facebook group – there are more people there to help.

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

      • Graham / Oct 26 2012 7:51 pm

        Thanks Daniel! I will check out the Facebook group

  20. cedric.nicolas / Jan 23 2013 1:19 pm

    Customizing GroupedList (or DividedList) items :

    I’ve spend a bit of time on your great component suites that helped me quite a lot for my app. I was wandering on how to simply customize headings and items in a groupedList whose purpose is a menu list in an application, in order to change colors/font size individually on each items, or to link a View class to open when click on each line. Was not obvious to find how to do it in Flex Wrappers approch. Finally got this solution, don’t know if it the best one, but at least it works.

    you can extend the XML like this for example with new attributes

    then first extend the UIGroupedList.as class like this to manage individual items font customization:

    public class MyUIGroupedList extends UIGroupedList
    {
    public function VFUIGroupedList(screen:Sprite, xml:XML, attributes:Attributes)
    {
    super(screen, xml, attributes);

    }

    override protected function labelCell(record:*, position:Number):UILabel {
    var label:UILabel = super.labelCell(record,position);
    var format:TextFormat = label.getTextFormat();
    if (record.color) format.color=parseInt(record.color);
    if (record.fontSize) format.size=parseInt(record.fontSize);
    label.setTextFormat(format);
    return label;
    }
    }

    The view holding the list will be including this to manage view classes push on each item :

    protected function view_creationCompleteHandler(event:FlexEvent):void
    {
    myHomeList.list.removeEventListener(UIList.CLICKED, listSelect);
    myHomeList.list.addEventListener(UIList.CLICKED, listSelect);
    }

    private function listSelect(e:Event) : void {

    var item:Object = myHomeList.list.data[e.currentTarget.group*2+1][e.currentTarget.index];
    if( item.hasOwnProperty(“viewClass”)) {
    var aClassStr:String = item.hasOwnProperty(“viewClass”)?item.viewClass as String:””;
    try {
    var aClass:* =getDefinitionByName(“fr.villefluide.wedrive.views.”+aClassStr);
    if (aClass!=null) {
    navigator.pushView(aClass);
    }
    } catch (e:ReferenceError) {
    trace(“undefined view class “+aClassStr);
    }
    }
    }
    }

    Hope this helps…

    • cedric.nicolas / Jan 23 2013 1:21 pm

      Sorry, the XML snippet didn’t showed up, here it is :

      Customizing GroupedList (or DividedList) items :

      [group label="My Group"]
      [item label="my label 1" viewClass="MyViewClass1"/]
      [item label="my label 2" color="0x000000" fontSize="26" viewClass="MyViewClass2"/]
      [item label="my label 3" viewClass="MyViewClass3"/]
      [/group]

  21. Malik Farhan / Nov 14 2013 5:44 am

    i am defining many items like this,
    ;
    Each item has label,label2 and image which needs to be List image.

    {DATA}

    48

    But this is not working.image is always blank ? How can i dynamically embedd images ? into list from XML item string ?

  22. Malik Farhan / Nov 14 2013 6:09 am

    How can we use images in list which are defined in XML item instead of defninng them as constants ? In my case images have to be dynamic and loaded from local resource

Trackbacks

  1. Tutorial 3: Lists and Pickers « MobileAppDev | Flash | Adobe-Tutorial.com
  2. 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: