Rambling Developer

Recent Posts


Archives


Rambling Developer

Examples

Creating A Flex Spark List of Checkbox Bound To XML DataProvider

For the sake of the cookbook recipe, I will assume you already have the data you are working with in XML format from whatever backend solution you choose. The simple XML I will be using is:

<fx:XML format="e4x" id="namesXML">
  <people>
    <person name="Leon"/>
    <person name="Mathilda"/>
    <person name="Stansfield"/>
    <person name="Benny"/>
  </people>
</fx:XML>

Displaying all of the people in this list with checkboxes next to their names involves three parts.

  1. Creating an ItemRenderer Component which contains a Checkbox which will display the person’s name in “namesXML” as the CheckBox label.
  2. Defining the new ItemRenderer to be the default ItemRenderer of our s:List component.
  3. Defining dataProvider of an s:List component to be the “namesXML” data shown above.

First we need to define out ItemRenderer as a new MXML Item Renderer called “CheckBoxItemRenderer”.  The source of the file will be:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" autoDrawBackground="true">
 
<s:CheckBox label="{data.@name}"/>
 
</s:ItemRenderer>

Notice, that the only component defined within our new MXML ItemRenderer is a s:CheckBox. The label of this checkbox is bound to the @name attribute of an object called data. The data Object is autopopulated by the ItemRenderer class and reflects a single node of the dataprovider which is feeding the list of which the ItemRenderer is a part. Simply, there will be a new instance of the “CheckBoxItemRenderer” for each node in the “namesXML” and the label of the checkbox will be set to the person’s name.

Lastly, we need to define our list which will define it’s itemRenderer as “CheckBoxItemRenderer” and it’s dataProvider as “namesXML”. Since “namesXML” is XML instead of an XMLListCollection which is required to set a dataProvider, we will need to convert the XML to an XMLListCollection. The MXML defining the list is:

<s:List itemRenderer="CheckBoxItemRenderer" dataProvider="{new XMLListCollection(namesXML.children())}"/>

With that definition, you will now have a list of checkboxes with a person’s name next to each checkbox. The list of names is bound to the “namesXML” and can be updated with updates to the namesXML object feeding the dataProvider.

Live demo and source code  you can visit our one of our last website https://www.canlicasinouzmani1.com/

adminadmin

Flex Memory Management Question

One of the best questions to ask during an interview for a new Flex developer is how to handle memory management in Flex.  You can immediately gauge someone’s competence (how they handle memory issues) and experience (if they’ve had to handle memory issues on large projects) with this single question.

If someone fails to answer this question adequately, it’s an immediate red flag that the interviewee probably isn’t hiring material.

A good answer involves weakreferences, methods to cleanup or dispose of all references to a class/object, reusable renderers and sometimes using Grant Skinner’s Janitor class.

Grant Skinner has also published an good overview presentation on memory management here.

adminadmin

Flex Java removeAll() Implementation

Just created a implementation of the Java removeAll() method for Flex ArrayCollections.  Here it is:


public function removeAll(collection1:ArrayCollection,
                    collection2:ArrayCollection):ArrayCollection{
  var dictionary : Dictionary = new Dictionary(true);
  var value : Object;
  var i:Number
  //Loop through first collection and put objects in dictionary
  for(i = 0; i < collection1.length; i++){
    value = collection1.getItemAt(i);
    dictionary[value.id] = value;
  }
  //Loop through second collection and remove objects in dictionary
  for(i = 0; i < collection2.length; i++){
    value = collection2.getItemAt(i);
    if(dictionary[value.id] != null){
      delete dictionary[value.id];
    }
  }
                     
  var unique:ArrayCollection = new ArrayCollection();
  //Loop through dictionary and put remaining value in collection
  for(var prop:String in dictionary){
    unique.addItem(dictionary[prop]);
  }
  dictionary = null;
  return unique;
}

Here's a link to the Adobe Forum post where I created this snippet: http://forums.adobe.com/thread/793088

adminadmin