ListView control

Full source code for the project is available here - click here

How to create a list view of your own:

Step 1: Create a model by extending com.sun.list.ListModal
define your data model in this class.
example :

public class ExpenseInCategory extends ListModal {

    public var amountSpent: Number;
    public var category: Category;
    public var percentSpent: Integer;

    public override function toString() : String {
        "Expenses in {category} is {amountSpent} percentwise {percentSpent} Size of transactions is : {sizeof(transactions)}";
    }
}


Step 2:

extend the com.sun.list.ListItem  class and override cloneNode() and create() method.

in the create method you should specify how to  draw the item in ListView.  I have given two implementation for the ListItem  TextItem ( contains only Text node ) and categoryItem ( contains text , amount spend and percentage).
Example:
public class ExpenseInCategoryListItem extends ListItem{

    def font: Font = Font.font("Arial", FontWeight.BOLD, 12);
    def font1: Font = Font.font("Arial",10);

    public override function cloneNode():ListItem {
        ExpenseInCategoryListItem{
            item:item
            width:width
            height:height
            selected:selected
        }
    }

    public override function create():Node{
        var expense = VBox {
            translateY:3
            spacing:5
            content: [
                Text{
                    content: bind (item as ExpenseInCategory).category.toString()
                    font:font
                    fill: Color.MAROON
                },
                HBox {
                    spacing: 60
                    content: [
                        Text{
                            content:bind "${(item as ExpenseInCategory).amountSpent}"
                            font:bind font1
                            fill:Color.BLUE
                        },
                        Text{
                            //translateY:bind (-height)
                            content:bind "{(item as ExpenseInCategory).percentSpent}%"
                            font:bind font1
                            fill:Color.BLUE
                        }
                    ]
                }
            ]
        }
        Group{
            content: [rectangle,expense]
        }       
    }
}


Step 3:
Extend the factory and specify how to create your ListItem.  ListView will use this factory to create the list item.
Example:
public class ExpenseInCategoryFactory extends ListItemFactory{
    public override function create():ListItem{
        ExpenseInCategoryListItem{
        }
    }
}

Now testing your list item.
Step1: Create an array of Model

var categories : ExpenseInCategory[] =
      [ExpenseInCategory{category: Category {name : "Health"} amountSpent:100 percentSpent:10},
       ExpenseInCategory{category: Category {name : "Entertainment"} amountSpent:200 percentSpent:20},
       ExpenseInCategory{category: Category {name : "Car"} amountSpent:400 percentSpent:40},
       ExpenseInCategory{category: Category {name : "Education"} amountSpent:200 percentSpent:20},
       ExpenseInCategory{category: Category {name : "Apparel"} amountSpent:100 percentSpent:10}
       ExpenseInCategory{category: Category {name : "Medical"} amountSpent:100 percentSpent:10}
       ];

Step2: Create the listView
var chartListView = ListView{
       factory: ExpenseInCategoryFactory{}
       listItems: categories
       listHeight: 300
       listWidth: 240
       slotHeight: 35
       };