Beberapa hari yang lalu saya sempat menulis sebuah aplikasi Blackberry yang cukup unik, bernama Mario Hari Ini. Aplikasi ini menampilkan sekitar 20 quote terakhir Pak Mario Teguh. Aplikasi ini sebenarnya cukup super. Di hari pertama, aplikasi ini di download sekitar 70 orang. Di hari kedua mencapai 500 orang. Beberapa hari setelahnya (selama 3 hari) kira-kira 150 orang. Hari ini aplikasi ini sudah saya cabut.

Salah satu yang menarik dari aplikasi ini, yang ingin saya share saat ini adalah tampilannya. Saya akan sharing bagaimana membuat user interface seperti aplikai tersebut. Screen dengan background kayu. Kemudian di atasnya, kita menempelkan kertas bertuliskan quote tertentu dengan sebuah selotip.

Yang Anda butuhkan adalah 3 file ini, silakan download ketiga gambar berikut:

Background

Kertas

Selotip

Berikutnya ini langkah-langkah yang saya lakukan.

1. Buat project Blackberry, beri nama Lakban
2. Masukkan ketiga gambar tadi ke dalam direkori res/img/
3. Buat package (di dalam direktori src) dengan nama com.durianapp.kertasdanlakban
4. Gunakan code snippet berikut
5. Anda sudah mendapatkan 2 file, Lakban.java dan LakbanScreen.java

   package com.durianapp.kertasdanlakban;
   import net.rim.device.api.ui.UiApplication;
   
   
   public class Lakban extends UiApplication {
   	public Lakban() {
   		pushScreen(new LakbanScreen());
   	}
   
   	public static void main(String[] args) {
   		new Lakban().enterEventDispatcher();
   	}
   }
   
   

   view raw Lakban.java This Gist brought to you by GitHub.

   
   package com.durianapp.kertasdanlakban;
   
   import net.rim.device.api.system.Bitmap;
   import net.rim.device.api.ui.container.MainScreen;
   import net.rim.device.api.ui.container.VerticalFieldManager;
   import net.rim.device.api.ui.decor.Background;
   import net.rim.device.api.ui.decor.BackgroundFactory;
   
   public class LakbanScreen extends MainScreen {
   
   	public LakbanScreen() {
   		super(NO_VERTICAL_SCROLL);
   
   		add(getMain());
   	}
   
   	private VerticalFieldManager mainManager;
   	private VerticalFieldManager getMain() {
   		if (mainManager == null) {
   			mainManager = new VerticalFieldManager(VERTICAL_SCROLL | USE_ALL_WIDTH | 
   					USE_ALL_HEIGHT);
   			mainManager.setBackground(getScreenBackground());
   		}
   		return mainManager;
   	}
   
   	private Background screenBg;
   	private Background getScreenBackground() {
   		if (screenBg == null) {
   			screenBg = BackgroundFactory.createBitmapBackground(
   					Bitmap.getBitmapResource("img/app-bg.jpg"));
   		}
   		return screenBg;
   	}
   }
   
   

   view raw LakbanScreen.java This Gist brought to you by GitHub.
6. Anda sudah bisa menjalankan aplikasi tersebut dan mendapatkan tampilan latar belakang dengan background kayu
7. Sempurnakan code Anda dengan code berikut ini

   package com.durianapp.kertasdanlakban;
   import net.rim.device.api.ui.UiApplication;
   
   
   public class Lakban extends UiApplication {
   	public Lakban() {
   		pushScreen(new LakbanScreen());
   	}
   
   	public static void main(String[] args) {
   		new Lakban().enterEventDispatcher();
   	}
   }
   
   

   view raw Lakban.java This Gist brought to you by GitHub.

   package com.durianapp.kertasdanlakban;
   
   import net.rim.device.api.system.Bitmap;
   import net.rim.device.api.ui.Field;
   import net.rim.device.api.ui.Graphics;
   import net.rim.device.api.ui.XYEdges;
   import net.rim.device.api.ui.component.TextField;
   import net.rim.device.api.ui.container.MainScreen;
   import net.rim.device.api.ui.container.VerticalFieldManager;
   import net.rim.device.api.ui.decor.Background;
   import net.rim.device.api.ui.decor.BackgroundFactory;
   import net.rim.device.api.ui.decor.Border;
   import net.rim.device.api.ui.decor.BorderFactory;
   
   /**
    * This is just a simple example of how to make a good user experince using 
    * native Java for Blackberry devices. In this snippet, I use a wooden background 
    * image, a small tape image and a piece of paper image to make an application
    * feels like we put notes on a piece of paper, then we attached them to a table
    * using small tape.
    * @author amri.shodiq
    *
    */
   public class LakbanScreen extends MainScreen {
   
   	public LakbanScreen() {
   		super(NO_VERTICAL_SCROLL);
   
   		add(getMain());
   
   		getMain().add(createQuoteField("Janganlah memboroskan hidup untuk " +
   				"membuktikan bahwa komentar miring orang lain itu salah."));
   
   		getMain().add(createQuoteField("Letakkan sandal Anda di bawah tanda berikut."));
   	}
   
   	/**
   	 * Create a main container for all fields on top of this screen.
   	 */
   	private VerticalFieldManager mainManager;
   	private VerticalFieldManager getMain() {
   		if (mainManager == null) {
   			mainManager = new VerticalFieldManager(VERTICAL_SCROLL | USE_ALL_WIDTH | 
   					USE_ALL_HEIGHT);
   			mainManager.setBackground(getScreenBackground());
   		}
   		return mainManager;
   	}
   
   	/**
   	 * Make a background with wooden texture
   	 */
   	private Background screenBg;
   	private Background getScreenBackground() {
   		if (screenBg == null) {
   			screenBg = BackgroundFactory.createBitmapBackground(
   					Bitmap.getBitmapResource("img/app-bg.jpg"));
   		}
   		return screenBg;
   	}
   
   	/**
   	 * Note a quote on a piece of paper with a tape on top of it.
   	 * @param quote
   	 * @return
   	 */
   	private Field createQuoteField(String quote) {
   		VerticalFieldManager v2 = new VerticalFieldManager() {
   			public void paint(Graphics g) {
   				super.paint(g);
   				// this is where we put the tape
   				g.drawBitmap(
   					(getWidth() - getTape().getWidth())/2, 
   					4, getTape().getWidth(), getTape().getHeight(), getTape(), 
   					0, 0);
   			}
   		};
   
   		VerticalFieldManager v = new VerticalFieldManager(VerticalFieldManager.USE_ALL_WIDTH);
   		v.setBorder(getQuoteBorder());
   		// make a small margin to make the paper looks smaller than the table
   		v.setMargin(8, 8, 8, 8);
   		// make a small padding to make a little distance between the letter and 
   		// paper side.
   		v.setPadding(8, 8, 8, 8);
   
   		// We use TextField to make this screen scrollable on a non touch device
   		TextField text = new TextField(TextField.NO_EDIT_MODE_INPUT|TextField.READONLY) {
   			// override this method to hide blue pointer
   			public void drawFocus(Graphics g, boolean on) {
   			}
   		};
   		text.setText(quote);
   		v.add(text);
   
   		v2.add(v);
   
   		return v2;
   	}
   
   	/**
   	 * Simply a bitmap instance of an image of tape.
   	 */
   	private Bitmap tape;
   	private Bitmap getTape() {
   		if (tape == null) {
   			tape = Bitmap.getBitmapResource("img/tape.png");
   		}
   		return tape;
   	}
   
   	/**
   	 * Border which represent a used paper.
   	 */
   	private Border quoteBorder;
   	private Border getQuoteBorder() {
   		if (quoteBorder == null) {
   			quoteBorder = BorderFactory.createBitmapBorder(
   					new XYEdges(26, 16, 12, 16),
   					Bitmap.getBitmapResource("img/note.png"));
   		}
   		return quoteBorder;
   	}
   }
   
   

   view raw LakbanScreen.java This Gist brought to you by GitHub.
8. Silakan jalankan aplikasi tersebut
9. Anda bisa coba-coba dengan gambar-gambar lain dan memodifikasi code tersebut sesuai kebutuhan

November 17, 2011

Posted in Snippet, Tutorial and tagged blackberry, java, ui.