Updates from September, 2008 Toggle Comment Threads | Keyboard Shortcuts

  • pit 10:02 am on September 30, 2008 Permalink | Reply
    Tags: , ,   

    I’m a Forum Nokia Champion! 

    Yesterday I’ve been selected as a Forum Nokia Champion! :)

    Telling this with Forum Nokia’s words..

    Jappit has been named a member of Forum Nokia Champion, a recognition and reward program for top mobile developers worldwide. Every six months, Forum Nokia, world’s largest dedicated mobile application developer community, invites outstanding members of the forum.nokia.com community to accept a one-year membership in this reward program. Forum Nokia Champions are a select group of outstanding individuals, honored because of their skills and devotion to the Forum Nokia community. For more details about Jappit and other Forum Nokia Champions, please visit http://www.forum.nokia.com/forumnokiachampion.

     
    • Ugur 9:31 am on October 1, 2008 Permalink

      Congrats Alessandro, great to see you among us as well!

    • pit 1:23 pm on October 1, 2008 Permalink

      Thanks Ugur!

    • Leonardo 10:36 am on October 2, 2008 Permalink

      Ciao Alessandro,

      Congrats!!! :-)

      Leo

    • pit 9:10 am on October 3, 2008 Permalink

      Thanks Leo!

      Honored to be in such a good company :)

    • Raj 1:34 pm on October 13, 2008 Permalink

      Hey Congrats!!!!!! pit

  • pit 4:09 pm on September 24, 2008 Permalink | Reply
    Tags: , , n810,   

    Nokia N810 arrived… and absolutely rocks! 

    Some days that I’m quite silent on this blog, but for a good reason this time! :D Here’s my brand new Nokia N810, won for being selected as June Poster of the Month this year.

    First impressions were absolutely positive: the device is incredibly cool, built with good material, and the whole feedback is totally great.

    Then I’ve started playing with it and, after some failed trials, I easily discovered that I had to upgrade the OS to install anything :)

    Seamlessly upgraded the OS to Diablo, I had a lot of fun installing the most disparate software directly from maemo website, and I immediately fell in love with Vagalume and Maemo Mapper!

    So, after first days of usage, I definitely love it. I’ve always been a bit skeptical about bringing around more than 1 phone/device, but I’ve never been happier to change my mind :)

    But now, shouldn’t I start to write some code? ;)

     
  • pit 9:21 am on September 18, 2008 Permalink | Reply
    Tags: c++, code camp, , , ,   

    Forum Nokia Code Camp in Rome! 

    Most of you probably already know this: on 28th October 2008 there will be a Forum Nokia Code Camp in Rome about Sensors, RGA and Open C/C++, and this is absolutely great!

    Forum Nokia Code Camps are stimulating workshops that are specially designed for mobile developers around the globe. These free Code Camps combine speaker presentations with hands-on coding to help you get up to speed quickly on a wide range of mobile development topics.

    This will be my first participation to a Forum Nokia Code Camp, and I’m really excited!

    So, the question is: will you be there?

     
  • pit 3:09 pm on September 15, 2008 Permalink | Reply
    Tags: , , , menu, menu transition, sliding menu,   

    Building a J2ME sliding menu with text and images 

    Whatever you’re building, a game or an application, you always need a menu to let users navigate through sections of your MIDlet.

    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:

     
    • deanet 7:21 pm on September 24, 2008 Permalink

      wew … nice code :mrgreen:

    • Stella 8:26 am on October 1, 2008 Permalink

      Hi ,
      this screen is brilliant, i was wondering if you could come up with a design that is similar to the carousel interface of yahoo GO!. this design is quite close to that

      byeeeee ;)
      Stella

    • pit 9:04 am on October 1, 2008 Permalink

      Thanks for your feedback :)

      @stella: check out this other article, if it could suit your needs
      http://www.jappit.com/blog/2008/04/24/building-a-fisheye-menu-in-j2me-with-jsr-226/

    • Stella 7:04 am on October 15, 2008 Permalink

      yep i seen that. but that uses JSR226 right :( what about devices that dont have JSR266

      Regards
      Stella

    • Tyler 1:22 pm on April 30, 2009 Permalink

      Hi jappit;
      i have look at your code but i think you always refresh screen and wait 100ms. right? It uses 100% processor.

    • jermaine 3:23 am on September 29, 2010 Permalink

      thanks for this bit of code…but uhm, how do i run this? i copied the source codes but i dont know where to place the jar files…

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

    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.

  • pit 9:45 am on September 10, 2008 Permalink | Reply
    Tags: alessandro pace, , croozeus, felipe andrade, , forum nokia widget contribution competition, , janus, , , kunerilite tutorial, , pasi manninen, project capuchin, pys60   

    Back to work with: Capuchin, Jarpa, Widgets, KuneriLite, Janus, Croozeus.. just to start! 

    I’m finally back to work after some holidays (from some days already… but first work days right after holidays are always full of tasks, don’t you think?)

    Anyway, I came back just in time to find a lot of cool news!

    Jappit

    First of all, the database of this blog was not working anymore, and so, if someone of you has tried to post comments, would have most probably failed. Anyway, after a night of passion, it is newly working like a charm!

    For those of you who missed it (ahem…) Adobe held an interesting eSeminar about Project Capuchin, and the recording is available here: Project Capuchin Adobe eSeminar.

    Meanwhile, Felipe Andrade released an LBS enabled MIDlet that makes use of Jarpa to allow Java ME and Flash Lite to intercommunicate.

    On Forum Nokia, the Wiki was revamped with a new homepage layout, and with some cool introductions. One of them is the Featured Articles section, that will highlight an interesting Wiki article each week. And with great pleasure I noticed that 2 articles I’ve written were featured in past weeks:

    Also, a new contest was launched, this time regarding Widget Development, and full rules are available here: Forum Nokia Widget Contribution competition.

    You should know that I’m also a great fan of KuneriLite and its team, and so I can not avoid to feature Pasi Manninen tutorial on how to Take, play and send video file from Flash Lite to server: superb!

    Talking about FlashLite and Symbian, Leonardo Risuleo released his Janus Symbian Engine, the custom made extension that will help you improve Flash Lite functionalities, as open source! I definitely think this is great, and that there should be more high-quality open-source projects like this in mobile environment. In this sense, mobile is yet far from web development.

    Also, Croozeus is doing a great work with his website dedicated to S60 Python developers, and he recently completed the first 5 applications (with full source code). Also, if you want to fully understand and learn PyS60, you should not miss out his talks!

    And, latest fresh news, Alessandro Pace (a.k.a. Biskero) was yesterday declared Forum Nokia Chamption of the Month: congratulations goes to him for this award as for its incredible effort and results in the FlashLite community!

    That’s a (really) rapid summary of what I’ve missed on these holidays (but I’ve not missed this one!), and a lot of other things are still around… maybe should I work more? :)

     
    • Coker 3:37 pm on March 8, 2009 Permalink

      Hello,

      Please does Kunerilite work on Series 40 phones? Also what alternatives do we have for Sony Ericsson?

      Thanks

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