Create a custom widget

Kuix contains a lot of useful widgets, but sometime it's possible that you have a special need. In this case you would apreciate the Kuix flexibility, because it permits to create your own widgets by simply extend a Kuix internal component.

Create the widget

First, you need to create the widget class. For this you just need to extend a Kuix widget.
In the above example we choice to extends the basic widget.

MyWidget.java:
import org.kalmeo.kuix.widget.Widget;

public class MyWidget extends Widget {

    public static final String MY_WIDGET_TAG = "mywidget";

    public MyWidget() {
        // Define the Tag of this widget
        super(MY_WIDGET_TAG);
    }

}

 

In the previous code, we choice to give the tag mywidget to our custom widget.

But doing this is not enough to be able to use your custom widget in an XML file.

Create a custom converter

Now, you need to customize the KuixConverter to be able to use your new widget in an XML file (e.g. ).

Then somewhere in the init process of your application, you need to setup a new customized KuixConverter.
The next code show you how to customize the converter in the createNewConverterInstance() method of your KuixMIDlet (here MyApplication.java).

MyApplication.java
...
protected KuixConverter createNewConverterInstance() {
    return new KuixConverter() {

        public Widget convertWidgetTag(String tag) {
            if (MyWidget.MY_WIDGET_TAG.equals(tag)) {
                return new MyWidget();
            }
            return super.convertWidgetTag(tag);
        }

    });
}

public void initDesktopContent(Desktop desktop) {
    Screen screen = Kuix.loadScreen("screen.xml", null);
    screen.setCurrent();
}
...

 

Now you can create the xml file :

screen.xml:
<screen>
    <mywidget />
</screen>

 

Customize your widget

Override the paint method

Because circle and elipse are realy nice shapes, let's add to you widget the capability to paint a circle according to its size.
This will be done simply by overriding the paint method.

MyWidget.java:
...
public void paint(Graphics g) {
    super.paint(g);
    g.setColor(0xFF0000);
    g.drawArc(0, 0, getWidth() - 1, getHeight() - 1, 0, 360);
}

 

Calling the super.paint() permits to be able to use CSS styles to draw borders and background even if it's a custom widget. If you don't want to use this feature, ignore the super statement.

You can lauch you application and watch the result :

Parameterize the widget with attributes

It would be very nice if the circle could be parameterized by defining the radius for example. This is a simple thing to do with Kuix.
Edit the MyWidget.java :

MyWidget.java:
import javax.microedition.lcdui.Graphics;

import org.kalmeo.kuix.widget.Widget;

public class MyWidget extends Widget {

    private int radius;

    public MyWidget() {
        super("mywidget");
    }

    public boolean setAttribute(String name, String value) {
        if ("radius".equals(name)) {
            setRadius(Integer.parseInt(value));
            return true;
        }
        return super.setAttribute(name, value);
    }

    public void setRadius(int radius) {
        this.radius = radius;
    }

    public void paint(Graphics g) {
        super.paint(g);
        g.setColor(0xFF0000);
        g.drawArc(0, 0, radius * 2, radius * 2, 0, 360);
    }

}

 

And edit the screen.xml file :

screen.xml:
<screen>
    <mywidget radius="50" />
</screen>

 

You can lauch you application and watch the result :

Update display if widget's attributes have changed

A custom widget with a rdius attribute is a ggod thing, but if you change the radius when the widget is displayed, nothing appends.

To inform Kuix that the widget is invalid when the radius attribute change, you need to call the invalidate method.

MyWidget.java:
...
public void setRadius(int radius) {
    this.radius = radius;
    invalidate();                       // Call the invalidate process
}

 

Because the revalidate process is quite eavy, and because you know that changing the radius do not change the widget size, but only its appearance, you can optimize you code by calling invalidateAppearance() method instead of invalidate().
In this case only the widget region of the screen will be repaint on the next frame.