Extending LWUIT components on Series 40

Comments

Hamishwillee - Subedited - really like this one

Hi Shaii

I really like this one, both the idea and the article implementation. I've subedited it a bit for readability - please check you're happy with the changes.

In terms of "improvement" it would be really good to provide a code snippet showing how you extend the label class. I know it is "obvious" but showing it makes it clear there are no "tricks".

public class VerticalLabel extends Label {

Similarly, it is useful for readers to know what import libraries they need to import to extend LWUIT - identifying those that are needed all the time, and those that are needed in just this case. I suspect there are none that are "standard", but its still worth saying that.

Thanks!

Regards

Hamish

hamishwillee 09:42, 30 August 2012 (EEST)

Shaii - code

Hey Hamish,

The entire class code is attached as a source, didn't you previously said that its better not to include entire code in the article but rather as a source and only key points in article?

I have no problem integrating the changes you want if thats the case let me know and i'll do it.

Thanks,

Shai

shaii 10:18, 30 August 2012 (EEST)

Hamishwillee - Yes I did

Hi Shai

include entire code in the article but rather as a source and only key points in article?

Yes I did, but IMO the classes you extend and the import libraries you need to use may be key points. So in this case if the import libraries are just "the libraries containing definition of Label", then that's what you'd say - you wouldn't need to list them. However if there are import libraries that everone implementing an LWUIT component needs, then these are key points that need to be listed.

I thought about this article a bit last night. Based on the title "Extending LWUIT components on Series 40" I would expect this would have enough information for me to extend any component, and it does. I might also reasonably expect it to cover creating new LWUIT "from scratch" (ie title might mean "Extending the LWUIT component set"). In any case, for bonus points, a small section on the minimum needed to extend Component directly would be great - ie what you'd have to import and what main classes and methods you'd have to overload. That is optional, and perhaps another article.

Regards

Hamish

hamishwillee 03:34, 31 August 2012 (EEST)

Log in or Join to leave comments.

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

Article Metadata

---

Code Example

Source file: Media:vertical label.zip

---

Tested with

SDK: Nokia SDK 2.0 for Java

Devices(s): Nokia Asha 305, Asha 306 and Asha 311

---

Compatibility

Device(s): All

Dependencies: lwuit framework

---

Article

Created: shaii (29 Aug 2012)

Last edited: shaii (31 Aug 2012)

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.