×
Namespaces

Variants
Actions

Extending LWUIT components on Series 40

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to extend the LWUIT framework to create new UI components . The code example provided creates a vertically aligned Label.

Note.pngNote: This is an entry in the Asha Touch Competition 2012Q3

Article Metadata
Code ExampleTested with
SDK: Nokia SDK 2.0 for Java
Devices(s): Nokia Asha 305, Asha 306 and Asha 311
Compatibility
Dependencies: lwuit framework
Article
Created: shaii (29 Aug 2012)
Last edited: hamishwillee (01 Nov 2013)

Introduction

Screenshot showing vertical label

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.

Implementation

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.

protected Dimension calcPreferredSize()
{
Dimension ret = super.calcPreferredSize();
int temp = ret.getWidth();
ret.setWidth(ret.getHeight());
ret.setHeight(temp);
return ret;
}

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()
{
super.repaint();
convertToVerticalImg();
}

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()
{
convertToVerticalImg();
}

Lastly we have the heart of the code - the convertToVerticalImg() method which is called in initComponent() and repaint()

private void convertToVerticalImg()
{
if (!isInitialized())
return;
int tempX,tempY;
Image temp = Image.createImage(getHeight(), getWidth());
Rectangle rect = getBounds();
int tempWidth = rect.getSize().getWidth();
rect.getSize().setWidth(rect.getSize().getHeight());
rect.getSize().setHeight(tempWidth);
tempX = getX();
tempY = getY();
setX(0);
setY(0);
super.paint(temp.getGraphics());
setX(tempX);
setY(tempY);
tempWidth = rect.getSize().getWidth();
rect.getSize().setWidth(rect.getSize().getHeight());
rect.getSize().setHeight(tempWidth);
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.

Summary

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.

This page was last modified on 1 November 2013, at 08:53.
55 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×