Dynamic Values for Choice Widget

2009-01-26 23:34
Submit by sdgiant

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!


Tags: Popularity: 981