Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.
Extending LWUIT components on Series 40
This article explains how to extend the LWUIT framework to create new UI components . The code example provided creates a vertically aligned Label.
Note: This is an entry in the Asha Touch Competition 2012Q3
Lightweight UI Toolkit (LWUIT) is a UI framework and "widget" library for Java ME. It comes with a number of in-built components, which allow you to create Forms and UI screens, these components include buttons, labels, checkbox, radiobuttons etc.
While the library contains many components, it doesn't have a Label/Text widget which you can display vertically (in LWUIT all Label/Text components are horizontal). This sort of component is useful in a number of cases, for example for drawing text labels over the vertical bars and or axis in a graph.
In this article I will demonstrate how to create a new vertical text component. Similar techniques can be used to create other components.
Since our desired components have all the properties of a Label then its a good idea to start by inheriting and extending the Label component. While it is perfectly possible to extend the base class Component, that is a lot more difficult. The extending is done as follows
public class VerticalLabel extends Label
The only imports that needs to be done is are for LWUIT classes such as Label, Image, Graphics etc.
The main methods which we need to override are:
- protected Dimension calcPreferredSize();
- public void repaint();
- public void paint(Graphics g);
- public void initComponent();
The first method is simply to swtich the default width & height of a label component in the platform look & feel.
The second method is called to initiate a repaint. We call the super class repaint and also do work needed to create an image which contains our redrawn label.
public void repaint()
The third method actually does the painting. In this case we draw the image we created in repaint() (using convertToVerticalImg()) with the vertical text & icon of the label.
public void paint(Graphics g)
g.drawImage(img, getX(), getY());
The fourth method tells us when the component has finished its initialization so we can actually convert this Label to a vertical representation.
public void initComponent()
Lastly we have the heart of the code - the convertToVerticalImg() method which is called in initComponent() and repaint()
private void convertToVerticalImg()
Image temp = Image.createImage(getHeight(), getWidth());
Rectangle rect = getBounds();
int tempWidth = rect.getSize().getWidth();
tempX = getX();
tempY = getY();
tempWidth = rect.getSize().getWidth();
img = temp.rotate(90);
In the above method we first check that indeed the component was initialized already, then we create an image with the reversed dimension of the label component and we also reverse the dimension of this component and reset its x and y.
Then we call its parent method paint(Graphics g) with the graphics obeject of the image we previously created so that we have an image of the horizontal look of this Label we then restore the dimension and position of the component and save a 90 degrees rotate image of the previously created image.
You can extend almost any lwuit class to create a new component, since the Component class is already a fully funtionall component you dont have to overload any of the methods unless you wish to add functionality or change the way it looks etc. This is done by overload specific methods for instance pointerPressed, pointerReleased, keyPressed, keyReleased needs to be overload to get user interaction, paint(Graphics g) needs to be overload to draw your component.
I hope this article will help you to learn how to extend and implement your own components in LWUIT to be able to create new and innovative UI.
Feel free to go over the source in the attached media for the full details.