The concept and code are largely copied from an existing community discussion at:
http://www.kalmeo.org/forum/topic/148/problem-creating-choiceradiogroup/1#post573
My contribution is just abstracting the concept a little bit and trying to document it. Don't neglect the widget reference at:
http://www.kalmeo.org/files/kuix/widgetdoc/widgets/choice.html
It's diagram of the choice -> choicecontainer and choiceradiogroup ->choicescreen is invaluable to understanding how this widget is composed.
Here is the XML for our generic Choice widget. Note the use of the <_renderer> to create the radiobuttons from the list we assign, pretty useful part of KUIX.
<choice> <choiceradiogroup> <_renderer> <![CDATA[<radiobutton><_value>${itemValue}</_value>${itemName}</radiobutton>]]> </_renderer> <_items>@{itemList}</_items> </choiceradiogroup> </choice>
Nothing unique in the Frame, just a call to initialize the choices. You will probably want to pass an Array of options in later, but for now we are just creating fake options:
public class SparkScreenFrame implements Frame {
protected MyDataProvider myData = new MyDataProvider();
public void onAdded() { myData.initializeChoices(); screen = Kuix.loadScreen(GlobalDataProvider.XML_SRC + "my_screen.xml", myData); screen.setCurrent(); }
public boolean onMessage(Object identifier, Object[] arguments) {
} }
The Screens DataProvider. In the example it's just creating two fake items, which are actually objects of another DataProvider, which we call ChoiceListItem:
public class MyDataProvider extends DataProvider {
private static final String ITEM_LIST = "itemList"; public void initializeChoices() { for(int i=0;i<2;i++) { ChoiceListItem item = new ChoiceListItem(); item.setItemName("ItemName " + i); item.setItemValue("ItemValue " + i); addItem(ITEM_LIST, item); } } }
This class is really the meat of the example. Each of these objects will be rendered by the XML
public class ChoiceListItem extends DataProvider { private static final String ITEM_NAME = "itemName"; private static final String ITEM_Value = "itemValue"; public String itemName; public String itemValue;
public void setItemName(String itemName) { this.itemName = itemName; dispatchUpdateEvent(ITEM_NAME); }
public void setItemValue(String itemValue) { this.itemValue = itemValue; dispatchUpdateEvent(ITEM_Value); }
protected Object getUserDefinedValue(String property) { if (ITEM_NAME.equals(property)) { return this.itemName; } if (ITEM_Value.equals(property)) { return this.itemValue; } return null; } }
We also need (or want to) set some items in the CSS file:
choice { bg-color: white; bg-image: url(/src/img/arrow.png); bg-repeat: 1 1; bg-align: right; border-color: #485f5f; }
choice text { font-face: proportional; font-size: small; color: black; }
choicecontainer { color: black; }
choicescreen { bg-color: #FFFFFF; }
Most of the CSS here is optional. I just wanted a white background with black text, as well as the arrow to appear on the choice widget.
Note any corrections in the comments below, I'll try to add more if I learn more.
Good Luck! |