Tagged: tutorial Toggle Comment Threads | Keyboard Shortcuts

  • pit 4:07 pm on February 21, 2011 Permalink | Reply
    Tags: coverflow, , qml, , , tutorial,   

    How to build a CoverFlow component with QML 

    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.

     
  • pit 3:37 pm on January 29, 2010 Permalink | Reply
    Tags: example, , , , tutorial   

    Learning Qt: Beta Labs Example shows how to use QtWebKit 

    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.
    qtwebkit beta labs example

     
  • pit 1:53 pm on May 21, 2009 Permalink | Reply
    Tags: , , , tutorial, , ,   

    Mobilising websites: guidelines for WRT Widgets development, part 2 

    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:

     
  • pit 1:43 pm on February 19, 2009 Permalink | Reply
    Tags: , , , , tutorial   

    Building a dynamic fisheye menu in Flash Lite 

    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:

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

     
  • pit 1:04 pm on January 25, 2009 Permalink | Reply
    Tags: , , image reflection, , , , tutorial   

    J2ME Images: how to create a reflection effect 

    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:

    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:

    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

     
    • ion 9:51 am on February 5, 2009 Permalink

      hi.. nice code

      could you help me how to draw a “Justified” Paragraf in canvas…. please !!

  • pit 8:44 am on September 12, 2008 Permalink | Reply
    Tags: , , , , list, , tutorial   

    How to build a Canvas based List in J2ME 

    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)

    Java ME Canvas based List screenshot

    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

     
    • cool8jay 9:19 am on June 24, 2010 Permalink

      Very good tutorial about scrollable list view, it meets my demand. But the getTextRows() method has some shortcoming: it does not support language not using space as delimiter, like Chinese and Japanese.

      Here is a more flexible version:
      http://dev.firnow.com/course/3_program/java/javajs/20090304/157622.html#comment

    • ketut joko 2:04 pm on July 7, 2011 Permalink

      when i add this file class my main class cant detect, can u explain it please?

    • pooja 12:48 pm on January 16, 2013 Permalink

      Thanks. Nice post.

      But I am phasing the problem in converting the same for touch. As we need to give touch scrolling on the list. This post is for keypress events. can you please provide the same with touch scrolling.

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel