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
};
