Jappit.com » tutorial

How to build a CoverFlow component with QML

pit — Mon, 21 Feb 2011 15:07:43 +0000

Today I’ve published a new technical article on Forum Nokia Wiki, that shows how a CoverFlow component can be easily built with Qt Quick and QML.

You can see a video of the CoverFlow component in action on a Nokia N8 device below.

The full source code is available here: Building a CoverFlow component with QML.

Learning Qt: Beta Labs Example shows how to use QtWebKit

pit — Fri, 29 Jan 2010 14:37:29 +0000

If you’re starting learning Qt to develop your next mobile applications, or if you plan to do that (..you should ), you should definitly check out this good tutorial from Forum Nokia: QtWebKit: Beta Labs Example.

Mobilising websites: guidelines for WRT Widgets development, part 2

pit — Thu, 21 May 2009 12:53:59 +0000

Some days ago I wrote about WRT development, and listed some first considerations that I usually face when thinking about a new Web Runtime Widget.

Today I continue this series with other points, hoping these guidelines could help other WRT developers as well.

To read the full article, check out my blog on Forum Nokia:

Mobilising websites: guidelines for WRT Widgets development, part 2

Building a dynamic fisheye menu in Flash Lite

pit — Thu, 19 Feb 2009 12:43:13 +0000

Some time ago, we’ve seen how to build a fisheye menu with J2ME. Now, it’s time to see how to create the same component with Flash Lite.

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.

J2ME Images: how to create a reflection effect

pit — Sun, 25 Jan 2009 12:04:12 +0000

It’s surely time for some new J2ME tutorial, so this article will explain how to create a nice reflection effect starting from a simple Image.

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:

Getting the Graphics object of our mutable image
Filling the image with the background color
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:

Create the original Image
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

How to build a Canvas based List in J2ME

pit — Fri, 12 Sep 2008 07:44:33 +0000

Quite a bit of time is passed since the last Java ME tutorial.. so It’s time for something new, don’t you think?

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

Collapsible trees with J2ME

pit — Tue, 15 Apr 2008 15:01:08 +0000

Trees are not often used within j2me applications, but since it’s quite always a mess to deal with them, here’s a ready to use component for managing and drawing collapsible/scrollable trees

As usual, you can go to Forum Nokia Wiki for the full source code: J2me Collapsible Trees, or go to the emulator page to have a first look at a sample midlet using this component.

Customizing game sprites with J2ME

pit — Mon, 14 Apr 2008 10:07:07 +0000

You know, my great passion are games, and here’s a first game-related tutorial

Often in games a nice feature to give to users it the possibility to customize their own character, for example changing colors of the different parts (hairs, eyes, shirt, and so on).

To support this features there are 2 possibilities:

Include a different image for each color of each different part
Replace colors by code

The second options will save you the effort to create these multiple images, and will strip down your JAR size. Also, it will allow you to support a lot more colors.

You can see a simple midlet showing how this can be done with simple code on the emulator page

For the full source code you can visit the Forum Nokia Wiki page: J2ME Customizing Game Sprites Color

Building a J2ME vertical scrollable text component

pit — Thu, 10 Apr 2008 09:48:11 +0000

Everyone needs scrollable text, soon or late

This is the reason why I’ve posted a simple tutorial on how vertical scrollable text can be implemented with J2ME.

You can find it on Forum Nokia Wiki: J2me Scrollable Text tutorial

Comments are welcome!

Forum Nokia Wiki.. my first article!

pit — Wed, 09 Apr 2008 20:46:04 +0000

Yeah, I’ve finally done it!

Forum Nokia Wiki is a precious source for any kind of mobile related problems or questions, and now I’m really happy to have found the time to post my first article, that is…

How to implement custom Text Fields with J2ME!

Hope you’ll find it useful

EDIT: you can now test the custom Text Field component with the web emulator here.