Creating Custom Item Renderers for Litl Controls
As you know, the litl SDK come with some pretty handy controls that will assist in your development process by allowing you to focus on the task at hand, and not re-inventing the controls (I mean wheel). In this post, we’ll be discussing how you can create custom item renderers for use with controls like the SlideShow and FilmStrip. Both of these will take an array and scroll through the data. We’ll look at how we can customize that data to create unique views for your channel.
You can find the completed code for this tutorial at developer.litl.com under sample channels.
Create a Value Object
This value object will allow us to type our data to a specific object. Ours looks something like this.
package com.litl.itemrenderersample.vo
{
public class RendererDataObjectVO
{
public var title:String;
public var description:String;
public var address:String;
public var imageUrl:String;
}
}
Create an itemRenderer class
This class will define what data will be presented to the user via our control, how it looks, where it is placed, and how it’s updated. You can name it whatever you like, and store it somewhere in your channel directory (I usually store it inside of a renderers directory).
This class must do two things:
- Extend ControlBase
- Implement IitemRenderer
package com.litl.itemrenderersample.renderers
{
import com.litl.control.ControlBase;
import com.litl.control.listclasses.IItemRenderer;
public class RestaurantItemRenderer extends ControlBase implements IItemRenderer
{
public function RestaurantItemRenderer() {
super();
}
}
}
Override the createChildren() method
This is where you create the objects for your custom item renderer. These objects should have some sort of data property that will change with each object in your renderers collection. Great examples of these items are TextFields, TextAreas, and Images.
override protected function createChildren():void {
mouseChildren = false;
background = new Sprite();
addChild(background);
title = new TextField();
format = new TextFormat("CorpoS", 36, 0xffffff, false);
format.align = TextFormatAlign.LEFT;
title.defaultTextFormat = format;
title.wordWrap = true;
title.multiline = true;
title.selectable = false;
title.antiAliasType = "advanced";
title.gridFitType = "pixel";
title.autoSize = TextFieldAutoSize.CENTER;
addChild(title);
description = new TextField();
var descriptionFormat:TextFormat = new TextFormat("CorpoS", 28, 0xffffff, false);
description.defaultTextFormat = descriptionFormat;
description.wordWrap = true;
description.multiline = true;
description.selectable = false;
description.antiAliasType = "advanced";
description.gridFitType = "pixels";
description.autoSize = TextFieldAutoSize.CENTER;
addChild(description);
address = new TextField();
address.defaultTextFormat = descriptionFormat;
address.wordWrap = true;
address.multiline = true;
address.selectable = false;
address.antiAliasType = "advanced";
address.gridFitType = "pixels";
address.autoSize = TextFieldAutoSize.CENTER;
addChild(address);
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageComplete, false, 0, true);
addChild(loader);
}
Override the updateProperties() method
This is where you will change the data that is presented to the user for all of your renderers child objects. For example, this is where we set/update the text property for a TextField or where we load a new image based on a new URL.
override protected function updateProperties():void {
if (title != null)
title.text = (_data == null) ? "" : _data.title;
description.text = (_data == null) ? "" : _data.description;
address.text = (_data == null) ? "" : _data.address;
if (loader != null) {
loader.load(new URLRequest(_data.imageUrl));
}
}
Override the layout() method
This is where we position our objects on the stage. We check the _width && _height properties that we inherit from ControlBase.
override protected function layout():void {
if (_width > 0 && _height > 0) {
graphics.clear();
graphics.beginFill(0x0, 1);
graphics.lineStyle(1, 0xffffff, 1, true);
graphics.drawRect(0, 0, _width, _height);
graphics.endFill();
loader.x = 30;
loader.y = 30;
title.width = _width - 100;
title.y = loader.y + loader.height + 25;
title.x = 30;
description.width = _width - 10;
description.y = title.y + title.height;
description.x = 30;
address.width = _width - 100;
address.y = _height - 40;
address.x = 30;
}
}
Create the _data variable
This private variable will be typed to your value object that we created earlier.
private var _data:RendererDataObjectVO;
Create getters/setters for your _data property
Create these however you want, but I like to right click on my _data var → Source → Create Getters/Setters.
The thing to note here is that we accept an Object in the set data method and type it to our Value Object.
public function get data():Object {
return _data;
}
public function set data(obj:Object):void {
var vo:RendererDataObjectVO = obj as RendererDataObjectVO;
_data = vo;
invalidateProperties();
}
Create various setters
These getters/setters are really just a formality at this point. Any modification would be beyond the scope of this simple tutorial.
What needs to be created:
- set enabled(b:Boolean):void
- set selected(b:Boolean):void
- get selected():Boolean
- get isReady():Boolean
public function set enabled(b:Boolean):void {
}
public function set selected(b:Boolean):void {
}
public function get selected():Boolean {
return false;
}
public function get isReady():Boolean {
return (loader.contentLoaderInfo.bytesLoaded == loader.contentLoaderInfo.bytesTotal);
}
Create the SlideShow and set the item renderer property to your new custom item renderer
This is the last step. Now you can create additional item renderer classes and change them at runtime! Try it out, have fun, and be sure to let us know if you have any questions!
slideshow = new Slideshow();
addChild(slideshow);
slideshow.itemRenderer = RestaurantItemRenderer;
slideshow.setSize(800, 600);
var item1:RendererDataObjectVO = new RendererDataObjectVO();
item1.title = "Thaitation";
item1.address = "39 Jersey St. Boston, MA";
item1.description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at elit quis ligula tristique vulputate. Donec tempor imperdiet urna quis pellentesque. Phasellus eu arcu at tortor ultricies porta vel sed leo. Aenean tincidunt auctor risus, sit amet tempor lectus hendrerit id. Pellentesque dui nulla, vulputate nec egestas nec, porttitor non lectus.";
item1.imageUrl = "assets/thaitation.jpg";
var item2:RendererDataObjectVO = new RendererDataObjectVO();
item2.title = "Sonsie";
item2.address = "255 Newbury St. Boston, MA";
item2.description = "Sed leo enim, gravida vitae consequat quis, venenatis nec urna. Pellentesque erat lacus, posuere sit amet scelerisque eget, imperdiet quis tortor. Phasellus in purus eget urna imperdiet ullamcorper. Etiam mattis, libero ac interdum venenatis, est eros elementum ligula, euismod tincidunt nisl lorem id lacus.";
item2.imageUrl = "assets/sonsie.jpg";
slideshow.dataProvider = [ item1, item2 ];
Completed item renderer:
