This article will explain how to implement basic touch gestures in Flash Lite. Specifically, we’ll see how to detect both horizontal (left-to-right and right-to-left) and vertical (up-to-down and down-to-up) gestures.

In the above video it’s possible to see a simple Flash Lite photo viewer, where the user can go from a photo to the next/previous just sliding finger or stylus.

The source code

Step 1. Detect touch events

First thing to do is to detect and handle touch-based events, and this can be done by implementing a MouseListener, and its onMouseDown() and onMouseUp() methods. We also define 4 Number variables to hold the x and y coordinates associated to the mouse up and down events: these will be used to detect if the touch interaction was actually a gesture or not.

So, take a new and empty FLA, and add this code on your first frame:

var startX:Number;
var startY:Number;
var endX:Number;
var endY:Number;
 
var gesturesListener:Object = new Object();
 
gesturesListener.onMouseDown = function()
{
	startX = _root._xmouse;
	startY = _root._ymouse;
}
gesturesListener.onMouseUp = function()
{
	endX = _root._xmouse;
	endY = _root._ymouse;
 
	checkGesture();
}
Mouse.addListener(gesturesListener);

The onMouseDown() function just sets the starting coordinates values, while the onMouseUp() also calls the checkGesture() function, defined below, that will check if the touch interaction was actually a gesture.

Step 2. Identify a gesture

Before trying to identify a gesture, let’s define some variables used to identify and define specific gesture types:

// minimum length of an horizontal gesture
var MIN_H_GESTURE:Number = Stage.width / 3;
// minimum length of a vertical gesture
var MIN_V_GESTURE:Number = Stage.height / 3;
 
// flags for each kind of gesture
var UP_TO_DOWN:Number = 1;
var DOWN_TO_UP:Number = 2;
var LEFT_TO_RIGHT:Number = 4;
var RIGHT_TO_LEFT:Number = 8;

The MIN_H_GESTURE and MIN_V_GESTURE variables define the minimum horizontal and vertical distances that must exist between the onMouseDown() and the onMouseUp() event to have, respectively, a horizontal or a vertical gesture.

Now, we can easily implement the checkGesture() function, by getting the horizontal and vertical length of the touch interaction, and comparing them with the minimum distances defined above.

function checkGesture()
{
	var xDelta:Number = endX - startX;
	var yDelta:Number = endY - startY;
 
	var gesture:Number = 0;
 
	if(xDelta > MIN_H_GESTURE)
		gesture |= LEFT_TO_RIGHT;
	else if(xDelta < - MIN_H_GESTURE)
		gesture |= RIGHT_TO_LEFT;
 
	if(yDelta > MIN_V_GESTURE)
		gesture |= UP_TO_DOWN;
	else if(yDelta < - MIN_V_GESTURE)
		gesture |= DOWN_TO_UP;
 
	if(gesture > 0)
		handleGesture(gesture);
}

Step 3. Handling the detected gesture

Once identified a gesture, we have to actually handle it in some way. To do it, we’ll implement the handleGesture() function, that will check the passed argument to find which is the specific identified gesture.

In this example, we’ll simply trace the kind of identified gesture(s).

function handleGesture(gestureFlags:Number)
{
	if(gestureFlags & LEFT_TO_RIGHT)
		trace("left to right gesture");
	if(gestureFlags & RIGHT_TO_LEFT)
		trace("right to left gesture");
	if(gestureFlags & UP_TO_DOWN)
		trace("up to down gesture");
	if(gestureFlags & DOWN_TO_UP)
		trace("down to up gesture");
}

Further development

A lot of improvements can be done to the code presented in this article. Just some example:

• Detect diagonal gestures: by checking the appropriate gesture flags, it’s already possible to identify mixed diagonal gestures. So, basically you need to extend a bit the handleGesture() method
• Define a maximum time to perform a gesture: basically, accept a gesture only if the time elapsed to perform it is below a certain limit. This could be useful in some scenarios, to avoid detecting fake gestures.

Download source code

You can download the full source code used in this article here:

• Handling gestures in Flash Lite source code

Rate this article!

If you like this article, please vote it on Forum Nokia Wiki. Thanks

The FisheyeMenu source code

Step 1. The menu MovieClip and external class

Let’s create the FisheyeMenu ActionScript class, that will extend MovieClip, that will be used to implement the actual menu logic:

class FisheyeMenu extends MovieClip
{
}

Then, create an empty movie clip in your library, export it, and associate it with the FisheyeMenu class.

Step 2. Initializing the menu

First, define these 4 menu properties, that will hold some useful values:

// focus index of the selected menu item
var focusedIndex:Number;
 
// total number of menu items
var itemsNum:Number;
 
// width of single menu items (in pixels)
var itemWidth:Number;
 
// the MovieClip that will contain the menu items
var itemsContainer:MovieClip;

Let’s also define an utility function that returns the currently focused item index:

public function getFocusedIndex()
{
return this.focusedIndex;
}

And then, implement a function that will be used to initialize the menu with the items you want.

public function initializeMenu(itemIds:Array, itemWidth:Number)
{
	this.itemsNum = itemIds.length;
 
	this.focusedIndex = 0;
 
	this.itemWidth = itemWidth;
 
	this.initItems(itemIds);
}
private function initItems(itemIds:Array)
{
	this.itemsContainer = this.createEmptyMovieClip('itemsContainer', this.getNextHighestDepth());
 
	for(var i:Number = 0; i < itemIds.length; i++)
	{
		var item:MovieClip = itemsContainer.attachMovie(itemIds[i], 'item_' + i, itemsContainer.getNextHighestDepth(), {_x: itemWidth * i, _y: 0});
 
		if(i > 0)
		{
			item._xscale = 50;
			item._yscale = 50;
		}
	}
}

The initializeMenu() function is the function you will call to initialize your fisheye menu with the items you want. Its arguments are:

• an Array containing the id of MovieClip symbols to be used as items
• the width of single menu items

Once called, initializeMenu() initializes the menu properties and then calls the initItems() function, that will actually attach the item instances, scaling down the unselected items and translating the menu itself to its starting position.

The getMenuLeft() function returns the x position to be used for the itemsContainer MovieClip, and depends on the focused item index:

private function getMenuLeft():Number
{
	return - itemWidth * focusedIndex;
}

Step 3. Implement sliding funcionality

When the user presses LEFT and RIGHT keys, you want the menu to perform these steps:

• change the focused item, scaling down the previously focused one, and scaling up the new
• translate the menu to be centered on the new focused item

In ActionScript, you can do it this way:

public function shiftItem(itemDelta:Number)
{
	var nextIndex:Number = focusedIndex + itemDelta;
 
	if(nextIndex >= 0 && nextIndex < itemsNum)
	{
		scaleItem(focusedIndex, true);
 
		focusedIndex = nextIndex;
 
		scaleItem(focusedIndex, false);
 
		moveMenu();
	}
}
private function moveMenu():Void
{
	new Tween(itemsContainer, "_x", None.easeNone, itemsContainer._x, getMenuLeft(), .50, true);
}
private function scaleItem(itemIndex:Number, scaleDown:Boolean):Void
{
	var item:MovieClip = itemsContainer['item_' + itemIndex];
 
	var fromScale:Number = scaleDown ? 100 : 50;
	var toScale:Number = scaleDown ? 50 : 100;
 
	new Tween(item, "_xscale", None.easeNone, fromScale, toScale, .50, true);
	new Tween(item, "_yscale", None.easeNone, fromScale, toScale, .50, true);
}

In this code snippet, there are 3 functions:

• shiftItem() is the function called to change the focused Item index by the passed delta argument. It checks if the change is ok, and then calls the following 2 functions:
• moveMenu() actually translates the items container, to have the new focused item horizontally centered
• scaleItem() scales up or down, depending on the scaleDown argument, the item corresponding at the index passed as argument

Since here we use the Tween class, we have to add these 2 import lines at the beginning of the ActionScript file:

import mx.transitions.Tween;
import mx.transitions.easing.*;

How to use the fisheye-menu

Step 4. Create the menu items symbols

Take back your FLA, and create 3 symbols that will be used as items within the fisheye menu. Also, remember to check the “Export for ActionScript” option, to have them actually usable from ActionScript itself.

Step 5. Attach and initialize the menu

Now, attach a FisheyeMenu istance directly to the _root, and initialize it with the ID of the symbols created in the previous step:

var menu:MovieClip = _root.attachMovie('FisheyeMenu', 'main_menu', _root.getNextHighestDepth());
 
var items:Array = new Array('Item0', 'Item1', 'Item2');
 
menu._x = 120;
menu._y = 120;
 
menu.initializeMenu(items, 50);

Step 6. Create a KeyListener to interact with the menu

The KeyListener will be really simple, since it will simply call the shiftItem() function when the user press LEFT or RIGHT keys, and will call a custom function when the user press the ENTER key, to trace the index of the current focused item:

var keyListener:Object = new Object();
 
keyListener.onKeyDown = function()
{
	var key:Number = Key.getCode();
 
	if(key == Key.RIGHT)
	{
		menu.shiftItem(1);
	}
	else if(key == Key.LEFT)
	{
		menu.shiftItem(-1);
	}
	else if(key == Key.ENTER)
	{
		menuFireAction();
	}
}
Key.addListener(keyListener);
 
function menuFireAction()
{
	trace("MENU ITEM PRESSED: " + menu.getFocusedIndex());
}

Downloads and related resources

You can download full source code (FLA + ActionScript file) of this example here:

• Flash Lite Fisheye menu source code

If you like this article, feel free to vote it on Forum Nokia Wiki.

You can see the final effect, as usual, on the emulator page: J2ME Image reflection in action.

Source code

1. Method declaration

Let’s start by our method declaration:

public static Image createReflectedImage(Image image, int bgColor, int reflectionHeight)
{
}

We have 3 arguments:

• the original image that we want to reflect
• the background color (used for transparent images)
• the height of the reflection effect

2. The mutable Image

Now, let’s create the mutable Image that will hold the resulting effect:

int w = image.getWidth();
 
int h = image.getHeight();
 
Image reflectedImage = Image.createImage(w, h + reflectionHeight);

We store the original image width and height into 2 int variables, and then create the mutable image with the same width, but with an height equal to h (the original image) plus the specified reflection height.

3. Copy the original Image

Now, first drawing steps are:

1. Getting the Graphics object of our mutable image
2. Filling the image with the background color
3. Drawing the original image on the upper part of the mutable one

Graphics g = reflectedImage.getGraphics();
 
g.setColor(bgColor);
 
g.fillRect(0, 0, w, h + reflectionHeight);
 
g.drawImage(image, 0, 0, Graphics.TOP | Graphics.LEFT);

4. Create the reflection effect

Now, let’s get to the important part of this tutorial, that is the reflection effect itself:

• for each horizontal line of the reflected image part, take the corresponding vertical coordinate of the original image
• get the RGBA data of the corresponding horizontal line of the original image
• calculate the alpha to be applied to this line, and apply it to each element of the RGB data array
• draw the RGB data into the reflected image, by using its Graphics object

And here is the source code:

int[] rgba = new int[w];
int currentY = -1;
 
for(int i = 0; i < reflectionHeight; i++)
{
	int y = (h - 1) - (i * h / reflectionHeight);
 
	if(y != currentY)
		image.getRGB(rgba, 0, w, 0, y, w, 1);
 
	int alpha = 0xff - (i * 0xff / reflectionHeight);
 
	for(int j = 0; j < w; j++)
	{
		int origAlpha = (rgba[j] >> 24);
		int newAlpha = (alpha & origAlpha) * alpha / 0xff;
 
		rgba[j] = (rgba[j] & 0x00ffffff);
		rgba[j] = (rgba[j] | (newAlpha << 24));
	}
 
	g.drawRGB(rgba, 0, w, 0, h + i, w, 1, true);
}

as you can see, the rgba[] int array holds the current pixel row data, and will be refreshed only when necessary (so, when the y coordinate of the original image changes).

Sample usage

Using the above method is really simple, since it’s only necessary to:

1. Create the original Image
2. Call createReflectedImage() method by passing the original Image as argument, together with the background color and the reflection effect height

Image originalImage = Image.createImage("/cap_man1.png");
 
Image reflectedImage = ReflectedImage.create(originalImage, bgColor, 64);

Downloads

You can download the complete source code of this article here:

• ReflectedImage.java

Vote this article!

If you liked this tutorial, feel free to vote it on Forum Nokia Wiki: How to create an image reflection effect in Java ME

Today, we’ll see how it is simple to create a FlashLite ringtone with caller-id support and an application that allows users to easily set and unset it.

Step 1: The FlashLite ringtone

To start, we’ll build a really simple FlashLite ringtone.

Let’s start building a simple interface, with these elements:

Now it’s time to add some ActionScript to our interface. So, let’s open frame 1 of our Actions layer.

Important note: when using KuneriLite from a ringtone SWF, you MUST use port 2001.

First, we’ll define a method to retrieve caller infos, and display it, depending on the returned data:

var loader:LoadVars = new LoadVars();
 
getCallerName();
 
function getCallerName()
{
	commandOutput.text = "Getting caller's info... ";
 
	loader.onLoad = callerNameHandler;
 
	loader.load("http://127.0.0.1:2001/Basic/ring?klCommand=callerid");
}
function callerNameHandler()
{
	commandOutput.text += this.toString();
 
	if(this.klError != 0)
	{
		callerName.text = "Command error: " + this.klError;
	}
	else if(this.klName != undefined)
	{
		callerName.text = this.klName;
	}
	else
	{
		callerName.text = this.klNumber;
	}
}

And then, let’s add the call answer/reject functionality to our ringtone. Two other KuneriLite calls will do the job (note that we’ll reuse the LoadVars instance defined above):

answer.onPress = function()
{
	commandOutput.text = "Answering call... ";
 
	loader.onLoad = callCommandHandler;
 
	loader.load("http://127.0.0.1:2001/Basic/ring?klCommand=answercall");
}
reject.onPress = function()
{
	commandOutput.text = "Rejecting call... ";
 
	loader.onLoad = callCommandHandler;
 
	loader.load("http://127.0.0.1:2001/Basic/ring?klCommand=hangupcall");
}
function callCommandHandler()
{
	commandOutput.text += this.toString();
}

Important note: since KuneriLite ringtone plugin already handles device answer and reject keys (the green and red one) you could avoid implementing your custom buttons in ringtone SWF (thanks Jukka for the reminder!)

Step 2: Setting and unsetting the ringtone

Now, it’s time to build the “main” SWF application, that is the one that the user would launch from phone menu to manage its FlashLite ringtones.

As usual, let’s create a basic interface, with this layout:

Now, let’s add the necessary ActionScript code to our Buttons.
This is for the enable button:

enableButton.onPress = function()
{
	commandOutput.text = "Enabling ringtone..";
 
	var loader:LoadVars = new LoadVars();
 
	loader.onLoad = handleResponse;
 
	loader.load("http://127.0.0.1:1001/Basic/ring?klCommand=enableringswf&klPath=ringtone.swf");
}

And similarly, this is for the disable button:

disableButton.onPress = function()
{
	commandOutput.text = "Disabling ringtone..";
 
	var loader:LoadVars = new LoadVars();
 
	loader.onLoad = handleResponse;
 
	loader.load("http://127.0.0.1:1001/Basic/ring?klCommand=disableringswf&klPath=ringtone.swf");
}

And here’s the handler, used by both commands calls, to print out the KuneriLite response error code:

function handleResponse()
{
	commandOutput.text += " Error code: " + this.klError;
}

Step 3: building and testing

Building a KuneriLite app is easy as always, but you need to follow these 4 specific steps to make the ringtone correctly work:

1. Select Ringtone plugin
   
2. Place your ringtone SWF in a separate folder, containing only that SWF, and then select it on Wizard Step 2
   
3. Select the ringtone setter as main SWF
   
4. Since Ringtone plugin needs signing, on Step 3 fill in the certificate infos
   

Once done, just compile and transfer your SIS on your phone, install and launch it:

• on main app screen, click the enable button
• check the command output, to see if the command executed successfully: you should see this message

  Enabling ringtone... Error code: 0

• if yes, just close the app and call your own phone, and your FlashLite ringtone will magically appear!
• within the ringtone SWF you will see the caller’s name (if available on your phonebook), otherwise its phone number
• to answer or reject the incoming call, simply use the buttons we previously placed on stage

That’s it!

Conclusions

Now, add this with the other KuneriLite features, and you could end up having:

• browsable ringtones catalogs, directly downloadable from your FlashLite app
• ringones for specific contacts (a phonebook plugin would be great!)
• location-based ringones!

Isn’t this enough?

Today, we’ll see how to implement touch scrolling in Java ME in a simple scenario: scrolling a large Image, that doesn’t fit on the device display.

A sample MIDlet showing this code in action is available on the emulator page: Touch scrollable image in action.

Source Code: ScrollableImageCanvas class

Let’s start defining the main class, that will extend the Canvas object:

public class ScrollableImageCanvas extends Canvas
{
{

Now, we define properties that we’ll use to manage:

• image size
• image translation
• user touch interaction

// image-related properties
int imageHeight = 0;
int imageWidth = 0;
Image image = null;
// scroll properties
protected int translationX = 0;
protected int translationY = 0;
 
// touch properties
protected int lastPointerX = -1;
protected int lastPointerY = -1;

Class constructor is quite straightforward, and only needs an Image as argument:

public ScrollableImageCanvas(Image image)
{
	this.image = image;
	this.imageWidth = image.getWidth();
	this.imageHeight = image.getHeight();
}

Also paint() implementation is simple, since it simply draws the given Image at current translation x and y coordinates:

protected void paint(Graphics g)
{
	g.setColor(0xffffff);
	g.fillRect(0, 0, getWidth(), getHeight());
	g.drawImage(image, - translationX, - translationY, Graphics.TOP | Graphics.LEFT);
}

Finally, we must implement the touch-based scrolling functionality. To do this, we’ll override the 3 pointer handlers provided by Canvas objects:

• pointerPressed: called when the pointer is pressed
• pointerReleased: called when the pointer is released
• pointerDragged: called when the pointer is dragged

protected void pointerPressed(int x, int y)
{
	lastPointerX = x;
	lastPointerY = y;
}
protected void pointerReleased(int x, int y)
{
	lastPointerX = -1;
	lastPointerY = -1;
}
protected void pointerDragged(int x, int y)
{
	scrollImage(lastPointerX - x, lastPointerY - y);
	lastPointerX = x;
	lastPointerY = y;
}

The scrollImage() method implementation follows. What it does is:

• increment the current translation x and y coordinated by the given x and y deltas
• normalize the new translation x and y coordinates, so that Image will not go out of bounds

void scrollImage(int deltaX, int deltaY)
{
	if(imageWidth > getWidth())
	{
		translationX += deltaX;
		if(translationX < 0)
			translationX = 0;
		else if(translationX + getWidth() > imageWidth)
			translationX = imageWidth - getWidth();
	}
 
	if(imageHeight > getHeight())
	{
		translationY += deltaY;
 
		if(translationY < 0)
			translationY = 0;
		else if(translationY + getHeight() > imageHeight)
			translationY = imageHeight - getHeight();
	}
 
	repaint();
}

Complete class source code is available here: ScrollableImageCanvas.java.

If you like this article, feel free to rate it on Forum Nokia Wiki.

Further development

A lot of improvements can be done to the code presented in this article. Just some examples are:

• scrollbars: a fundamental element to let the user know how much he can scroll both in vertical and horizontal directions
• smooth scrolling: using some inertia when applying scrolling movement will make the whole scrolling effect a lot more realistic

This article will show how to build a menu with text and icons, and with a nice sliding effect to go from one menu item to another. You can see the final effect on the emulator page: J2ME Sliding Menu in action.

Source code: SlideIconsMenu class

As always, let’s start defining our class:

public class SlideIconsMenu
{
}

Now, we define some appearance-related properties, that can be customized to change menu colors and font.

// selected item index
public int selectedIndex = 0;
 
// icon label color
public int textColor = 0xff0000;
 
// menu bg color
public int bgColor = 0xffffff;
 
// icon label font
public Font textFont = Font.getDefaultFont();
 
// menu right and left Images
public Image slideRightImage = null;
public Image slideLeftImage = null;

And some other properties, that will be internally used by the menu class itself, to handle content and the sliding animation:

// menu size
int width = 0;
int height = 0;
 
// item labels
String[] labels = null;
// item icons
Image[] icons = null;
 
// previous item index (during menu translation)
int prevIndex = 0;
 
// menu sliding translation properties
public int translationDuration = 500;
long startTranslationTime = 0;

Now, let’s define the menu constructor. We need a constructor that will accept these arguments:

• a set of item labels
• a set of images, one for each item
• the menu width
• and the menu height

public SlideIconsMenu(String[] labels, Image[] icons, int width, int height) throws Exception
{
	this.width = width;
	this.height = height;
 
	this.labels = labels;
	this.icons = icons;
 
	slideRightImage = Image.createImage("/slide_right.png");
	slideLeftImage = Image.createImage("/slide_left.png");
}

The constructor also creates 2 Images to represent the left and right sliding arrows, that will be used to indicate more items on the menu left/right side. So, in your code, you must adapt those image paths to match existing ones within your project.

Now we must handle item change, by letting our menu slide with a nice transition. To do this, we’ll manage the item change with the following slideItem() method:

public void slideItem(int delta)
{
	if(!isTranslating() && selectedIndex + delta >= 0 && selectedIndex + delta < labels.length)
	{
		prevIndex = selectedIndex;
 
		selectedIndex += delta;
 
		startTranslationTime = System.currentTimeMillis();
	}
}
public boolean isTranslating()
{
	return prevIndex != selectedIndex;
}

And finally, since we need to paint our menu, here is its paint() method:

public void paint(Graphics g)
{
	g.setColor(bgColor);
	g.fillRect(0, 0, width, height);
 
	g.setColor(textColor);
 
	if(selectedIndex > 0)
	{
		g.drawImage(slideLeftImage, 2, height / 2, Graphics.LEFT | Graphics.VCENTER);
	}
	if(selectedIndex < icons.length - 1)
	{
		g.drawImage(slideRightImage, width - 2, height / 2, Graphics.RIGHT | Graphics.VCENTER);
	}
	g.drawString(labels[selectedIndex], width / 2, height - 2, Graphics.BOTTOM | Graphics.HCENTER);
 
	g.setClip(slideLeftImage.getWidth(), 0, width - 2 * slideLeftImage.getWidth(), height);
 
	if(selectedIndex != prevIndex)
	{
		int diff = (int)(System.currentTimeMillis() - startTranslationTime);
 
		if(diff > translationDuration)
		{
			diff = translationDuration;
		}
 
		int coeff = selectedIndex > prevIndex ? 1 : - 1;
		int currentX = width / 2 - coeff * diff * width / translationDuration;
		int nextX = currentX + width * coeff;
 
		g.drawImage(icons[prevIndex], currentX, height / 2, Graphics.VCENTER | Graphics.HCENTER);
 
		g.drawImage(icons[selectedIndex], nextX, height / 2, Graphics.VCENTER | Graphics.HCENTER);
 
		if(diff >= translationDuration)
		{
			prevIndex = selectedIndex;
		}
	}
	else
	{
		g.drawImage(icons[selectedIndex], width / 2, height / 2, Graphics.VCENTER | Graphics.HCENTER);
	}
}

Sample usage

Here’s a sample Canvas that uses the SlideIconsMenu class. The main steps are:

• the menu constructions
• the key handling, done within the Canvas keyPressed() method
• the menu repainting, done periodically, to allow the sliding transition to be smoothly drawn

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;
 
public class SlideIconsCanvas extends Canvas implements Runnable
{
	SlideIconsMenu menu = null;
 
	public SlideIconsCanvas()
	{
		Image[] im = new Image[3]; 
 
		try
		{
			im[0] = Image.createImage("/item0.png");
			im[1] = Image.createImage("/item1.png");
			im[2] = Image.createImage("/item2.png");
 
			menu = new SlideIconsMenu(
				new String[]{"Item 1", "Item 2", "Item 3"},
				im,
				getWidth(),
				getHeight()
			);
 
			new Thread(this).start();
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
	}
	protected void paint(Graphics g)
	{
		menu.paint(g);
	}
	public void keyPressed(int key)
	{
		int gameKey = getGameAction(key);
 
		if(gameKey == Canvas.RIGHT)
		{
			menu.slideItem(1);
		}
		else if(gameKey == Canvas.LEFT)
		{
			menu.slideItem(- 1);
		}
	}
	public void run()
	{
		try
		{
			while(true)
			{
				repaint();
 
				synchronized(this)
				{
					wait(100L);
				}
			}
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
	}
 
}

Download source code

You can download full source code here:

• SlideIconsMenu.java: menu source code
• SlideIconsCanvas.java: sample Canvas using the SlideIconsMenu

Today we’ll see how it is possible to implement a simple Canvas based List, with the following features:

• customizable style (colors, margins, font)
• vertical scrolling
• image and text support (as for standard Java ME Lists)

It is possible to see this code in action on the emulator page.

Writing the code

First thing you should define some style-related properties, that will be used to paint the List items. Name of single properties is self-explaining.

int linePadding = 2;
int margin = 2;
int padding = 2;
Font font = Font.getDefaultFont();
 
int bgColor = 0xffffff;
 
int foreColor = 0x000000;
int foreSelectedColor = 0xffffff;
int backColor = 0xffffff;
int backSelectedColor = 0x0000ff;
 
int borderWidth = 3;
int borderColor = 0x000000;
int borderSelectedColor = 0xff0000;

Now, here are some internal properties, that will be used to handle list items content and positioning.

// will contain item splitted lines
String[][] itemLines = null;
// will hold items image parts
Image[] images = null;
// will hold selected item index
public int selectedItem = 0;
 
// these will hold item graphical properties
int[] itemsTop = null;
int[] itemsHeight = null;
 
// these will hold List vertical scrolling
int scrollTop = 0;
final int SCROLL_STEP = 40;

Now, here is the CanvasList constructor. Its arguments are (similarly to javax.microedition.lcdui.List constructor):
* the screen’s title
* set of strings specifying the string parts of the List elements
* set of images specifying the image parts of the List elements
This article will not cover the handling of different types of Lists (e.g.: exclusive, multiple, ..).

public CanvasList(String title, String[] items, Image[] imageElements)
{
	setTitle(title);
 
	this.images = imageElements;
 
	itemLines = new String[items.length][];
 
	itemsTop = new int[itemLines.length];
	itemsHeight = new int[itemLines.length];
 
	for(int i = 0; i < itemLines.length; i++)
	{
		// get image part of this item, if available
		Image imagePart = getImage(i);
 
		// get avaiable width for text
		int w = getItemWidth() - (imagePart != null ? imagePart.getWidth() + padding : 0);
 
		// and split item text into text rows, to fit available width
		itemLines[i] = getTextRows((String) items[i], font, w);
	}
}

Here are the 2 utility methods found in the CanvasList constructor:

public int getItemWidth()
{
	return getWidth() - 2 * borderWidth - 2 * padding - 2 * margin;
}
Image getImage(int index)
{
	return images != null && images.length > index ? images[index] : null;
}

Now, here is the paint() method:

protected void paint(Graphics g)
{
	// paint List background
	g.setColor(bgColor);
	g.fillRect(0, 0, getWidth(), getHeight());
 
	// translate accordingly to current List vertical scroll
	g.translate(0, - scrollTop);
 
	int top = 0;
 
	g.setFont(font);
 
	// loop List items
	for(int i = 0; i < itemLines.length; i++)
	{
		int itemRows = itemLines[i].length;
 
		Image imagePart = getImage(i);
 
		int itemHeight = itemRows * font.getHeight() + linePadding * (itemRows - 1);
 
		itemsTop[i] = top;
		itemsHeight[i] = itemHeight;
 
		// is image part higher than the text part?
		if(imagePart != null && imagePart.getHeight() > itemHeight)
		{
			itemHeight = imagePart.getHeight();
		}
		itemHeight += 2 * padding + 2 * borderWidth;
 
		g.translate(0, top);
 
		if(borderWidth > 0)
		{
			// paint item border
			g.setColor(i == selectedItem ? borderSelectedColor : borderColor);
			g.fillRect(margin, margin, getWidth() - 2 * margin, itemHeight);
		}
 
		// paint item background
		g.setColor(i == selectedItem ? backSelectedColor : backColor);
		g.fillRect(margin + borderWidth, margin + borderWidth, getWidth() - 2 * margin - 2 * borderWidth, itemHeight - 2 * borderWidth);
 
		// has this item an image part?
		if(imagePart != null)
		{
			g.drawImage(imagePart, margin + borderWidth + padding, margin + borderWidth + padding, Graphics.TOP | Graphics.LEFT);
		}
 
		// paint item text rows
		g.setColor(i == selectedItem ? foreSelectedColor : foreColor);
 
		int textLeft = margin + borderWidth + padding + (imagePart != null ? imagePart.getWidth() + padding : 0);
 
		for(int j = 0; j < itemRows; j++)
		{
			g.drawString(itemLines[i][j], textLeft, margin + borderWidth + padding + j * (linePadding + font.getHeight()), Graphics.TOP | Graphics.LEFT);
		}
 
		g.translate(0, - top);
 
		top += itemHeight + 2 * margin;
	}
	// finally, translate back
	g.translate(0, scrollTop);
}

And finally, to handle user key events, here is the keyPressed() event:

protected void keyPressed(int key)
{
	int keyCode = getGameAction(key);
 
	// is there 1 item at least?
	if(itemLines.length > 0)
	{
		// going up
		if(keyCode == Canvas.UP)
		{
			// current item is clipped on top, so can scroll up
			if(itemsTop[selectedItem] < scrollTop)
			{
				scrollTop -= SCROLL_STEP;
 
				repaint();
			}
			// is there a previous item?
			else if(selectedItem > 0)
			{
				selectedItem--;
 
				repaint();
			}
		}
		//going down
		else if(keyCode == Canvas.DOWN)
		{
			// current item is clipped on bottom, so can scroll down
			if(itemsTop[selectedItem] + itemsHeight[selectedItem] >= scrollTop + getHeight())
			{
				scrollTop += SCROLL_STEP;
 
				repaint();
			}
			// is there a following item?
			else if(selectedItem < itemLines.length - 1)
			{
				selectedItem++;
 
				repaint();
			}
		}
	}
}

About the getTextRows() method, you can grab an implementation (but you could find a lot of other ones on the Web) on this other article written some time ago: J2ME Scrollable Text.

How to use CanvasList class

Here is a sample usage of CanvasList class, that will display a list (without image parts):

String[] items = new String[]{"Item 1", "Item 2", "Item 3"};
 
CanvasList myCanvas = new CanvasList("Test canvas", items, null);

To add images to your items, it’s necessary to instantiate an Image array, and pass it to CanvasList constructor as its third argument:

Image[] images = null;
try
{
	images = new Image[]{
		Image.createImage("/item1.png"),
		Image.createImage("/item2.png"),
		Image.createImage("/item3.png")
	};
}
catch(Exception e)
{
	e.printStackTrace();
}
String[] items = new String[]{"Item 1", "Item 2", "Item 3"};
 
CanvasList myCanvas = new CanvasList("Test canvas", items, images);

Related resources

You can download full CanvasList source code here: CanvasList.java

When writing mobile applications, it’s always cool to add some effects or transitions. But, while for example FlashLite has a nice builtin support for them, with J2ME you have to hand-code even the simplest movement (and this is the main reason why most J2ME apps are all but attractive).

So, here’s a first class that you can use to add an “explode” effect to images in a straightforward way. How to do it? Here we come:

1. Download the ExplodingImage.java source code and put it straight in your project
2. Instantiate an ExplodingImage this way:

   //get your Image
   Image sourceImage = Image.createImage("/image.png");
   //and then use it in ExplodingImage constructor
   ExplodingImage image = new ExplodingImage(sourceImage , 5, 8, 8);

   The ExplodingImage constructor accepts the following arguments:

   • An Image instance
   • An int representing the “level” for the exploding effect, that is the strength of the effect itself (higher the level, stronger the effect).
   • The last 2 int arguments represent the horizontal and vertical pieces of the exploded image.
3. Start the explode effect with the explode() method, that will accept the effect duration as argument:

   image.explode(2000L);

4. To paint it, simply use its paint() method, very similary to the Graphics drawImage() one. For example, in a Canvas paint() method, you can do something like this:

   protected void paint(Graphics g)
   {
   	g.setColor(0xffffff);
   	g.fillRect(0, 0, width, height);
   	image.paint(g, getWidth() / 2, getHeight() / 2, Graphics.HCENTER | Graphics.VCENTER);
   }

   To give the effect a “smooth” animation, you should paint it quite frequently (let’s say, not once per second ). So, always using Canvas, a sample code could be like this:

   public void run()
   {
   	while(true)
   	{
   		repaint();
    
   		try
   		{
   			synchronized(this)
   			{
   				wait(50L);
   			}
   		}
   		catch(Exception e)
   		{
   			e.printStackTrace();
   		}
   	}
   }

5. To test if the effect has ended, you can simply access your ExplodingImage ended instance variable:

   if(image.ended)
   {
   	//effect-end related code
   }

6. And you’re done! See it in action here: J2ME image explode effect in action

Sample source code is available here:

• ExplodingImage.java: main class
• ExplodingImageCanvas.java: sample usage of ExplodingImage within a Canvas

If this is your case, you could find useful this simple function:

public static Image rotateImage(Image image, int angle) throws Exception
{
	if(angle == 0)
	{
		return image; 
	}
	else if(angle != 180 && angle != 90 && angle != 270)
	{
		throw new Exception("Invalid angle");
	}
 
	int width = image.getWidth();
	int height = image.getHeight();
 
	int[] rowData = new int[width];
	int[] rotatedData = new int[width * height];
 
	int rotatedIndex = 0;
 
	for(int i = 0; i < height; i++)
	{
		image.getRGB(rowData, 0, width, 0, i, width, 1);
 
		for(int j = 0; j < width; j++)
		{
			rotatedIndex = 
				angle == 90 ? (height - i - 1) + j * height : 
				(angle == 270 ? i + height * (width - j - 1) : 
					width * height - (i * width + j) - 1
				);
 
			rotatedData[rotatedIndex] = rowData[j];
		}
	}
 
	if(angle == 90 || angle == 270)
	{
		return Image.createRGBImage(rotatedData, height, width, true);
	}
	else
	{
		return Image.createRGBImage(rotatedData, width, height, true);
	}
}

So, how can you use it? Nothing more than:

Image original = Image.createImage("/original_image.png");
 
Image rotated_image = rotateImage(original, 90);

If you prefer a live demonstration rather than a simple screenshot, just go here: Canvas Calendar in action.

So, how to use it?

1. Download its source code (CalendarWidget.java) and put it straight in your project
2. Instantiate it within your Canvas with its plain-old-unique constructor:

   CalendarWidget calendar = new CalendarWidget(new Date());

3. Customize it with the colors/fonts/padding you prefer:

   calendar.headerFont = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD, Font.SIZE_LARGE);
   calendar.weekdayFont = Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_BOLD, Font.SIZE_MEDIUM);
   calendar.weekdayBgColor = 0xccccff;
   calendar.weekdayColor = 0x0000ff;
   calendar.headerColor = 0xffffff;

4. After you’ve customized it, remember to always call its initialize() method:

   calendar.initialize();

5. Now, to paint it, you can simply call its paint() method from your Canvas paint(), like this:

   protected void paint(Graphics g)
   {
       g.setColor(0xffffff);
       g.fillRect(0, 0, getWidth(), getHeight());
       calendar.paint(g);
   }

6. Now you must allow users to interact with it, so you can, for example, use Canvas keyPressed() method to interact with calendar:

   protected void keyPressed(int key)
   {
       int keyCode = getGameAction(key);
       if(keyCode == FIRE)
       {
           Display.getDisplay(midlet).setCurrent(
               new Alert("Selected date", calendar.getSelectedDate().toString(), null, AlertType.CONFIRMATION)
           );
       }
       else
       {
           calendar.keyPressed(keyCode);
           repaint();
       }
   }

   As you see, what we do is this:

   • if the user press FIRE button, we alert the current selected date
   • otherwise we call calendar keyPressed() method, to make it behave accordingly
7. Other customizable properties include:
   • MONTH_LABELS: change this to customize month labels in your own language
   • WEEKDAY_LABELS: as above, change this to customize weekday labels
   • startWeekday: this represents the week starting day, and its values range goes from 0 (for Monday) to 6 (for Sunday)

You can download source code of the example described above here: CalendarCanvas.java.

To get some more details about CalendarWidget source code, you can take a look at my article on Forum Nokia Wiki: Building a J2ME Canvas based Calendar / Date picker.