docs/examples/example 11 - PickerList/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>GOWN.js example: PickerList</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../lib/pixi/pixi.js"></script>
<script src="../../dist/gown.js"></script>
</head>
<body>
<script>
var stage = new PIXI.Container();
var sizes = {w: 800, h: 600};
var renderer = PIXI.autoDetectRenderer(sizes.w, sizes.h, {backgroundColor : 0xffffff});
document.body.appendChild(renderer.view);
//var metalTheme = new GOWN.ThemeParser("../../themes/assets/metalworks_desktop/metalworks_desktop.json");
var aeonTheme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");
function onCompleteAeon() {
// TODO: implement sth. similar to the DropDownPopUpcontentManager
// and do NOT add the children to the PickerList directly
// see https://github.com/BowlerHatLLC/feathers/blob/master/source/feathers/controls/popups/DropDownPopUpContentManager.as
var list = new GOWN.PickerList(aeonTheme);
list.dataProvider = new GOWN.ListCollection([
{ text: "Milk" },
{ text: "Eggs" },
{ text: "Bread" }
]);
list.width = 100;
list.height = 44;
list.itemRendererProperties = {
labelField: 'text'
};
// TODO: remove this and set fixed width/height in DefaultListItemRenderer
list.itemRendererFactory = function(theme) {
var item = new GOWN.DefaultListItemRenderer(theme);
item.width = 100;
item.height = 44;
// TODO: important! do not set pecentWidth/percentHeight in the
// DefaultListItemRenderer
item.percentWidth = item.percentHeight = -1;
return item;
};
// TODO: calculate height of list based on items inside it!
list._listFactory = function(theme) {
var list = new GOWN.List(theme);
list.width = 100;
list.height = 3 * 44;
return list;
}
stage.addChild(list);
requestAnimationFrame(animate);
}
//metalTheme.once(GOWN.Theme.COMPLETE, onCompleteMetal, this);
aeonTheme.once(GOWN.Theme.COMPLETE, onCompleteAeon, this);
function animate() {
// render the stage
renderer.render(stage);
requestAnimationFrame(animate);
}
GOWN.loader.load();
</script>
</body>
</html>