Lập trình mobile - Phần 4

LẬP TRÌNH MOBILE
Lập trình giao diện người dùng mức thấp
11/20/2009
1
Võ Phương Bình – ITFAC - DLU
Lập trình giao diện người dùng mức thấp
Lớp Canvas
Vẽ trên Canvas
Sử dụng Canvas
Xử lý bàn phím
Đồ họa Graphics
Sử dụng đối tượng đồ họa Graphics
Vẽ với Graphics
Xử lý Game
Xây dựng hoạt cảnh


11/20/2009
Võ Phương Bình – ITFAC - DLU
2
Lớp Canvas
Sử dụng lớp Canvas để trực tiếp vẽ các đường thẳng, văn bản, hình ảnh lên màn hình.
Lớp Canvas cung cấp một màn hình trống mà ở đó MIDP có thể vẽ lên.
Ví dụ, vẽ chuỗi "HelloWorld" lên màn hình:
Lớp Canvas, là một lớp trừu tượng được kế thừa từ lớp Displayable và override phương thức paint( ).
Lớp vẽ kế thừa lớp Canvas và định nghĩa lại phương thức Paint(Graphics g).
11/20/2009
Võ Phương Bình – ITFAC - DLU
3
Lớp Canvas (2)
public class MyCanvas extends Canvas {
public void paint(Graphics g) {
g.setColor(255, 0, 0);
g.fillRect(0, 0, getWidth(), getHeight( ));
g.setColor(255, 255, 255);
g.drawString("Hello World!", 0, 0, g.TOP | g.LEFT);
}
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
4
Sử dụng Canvas
public class MyMidlet extends MIDlet {
public MyMidlet( ) {
}
public void startApp( ) {
Canvas canvas = new MyCanvas( );
Display display = Display.getDisplay(this);
display.setCurrent(canvas);
}
public void pauseApp( ) {
}
public void destroyApp(boolean unconditional) {
}
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
5
Xử lý bàn phím
Lớp Canvas thực thi interface CommanListener.
Xử lý Command:
public void commandAction(Command c, Displayable d)
//viết code
{
Xử lý phím:
protected void keyPressed(int keyCode)
//viết code
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
6
Xử lý bàn phím – Ví dụ
public class MyCanvas extends Canvas implements CommandListener {
private Command cmExit;
private String keyText = null;
private MyMidlet midlet;

public MyCanvas(MyMidlet midlet)
{
this.midlet = midlet;
cmExit = new Command("Exit", Command.EXIT, 1);
addCommand(cmExit);
setCommandListener(this);
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
7

public void paint(Graphics g) {
g.setColor(255, 255, 255);
g.fillRect(0, 0, getWidth(), getHeight());
if (keyText != null) {
g.setColor(0, 0, 0);
g.drawString(keyText, getWidth()/2, getHeight()/2, Graphics.TOP | Graphics.HCENTER);
}
}
public void commandAction(Command arg0, Displayable arg1) {
if (arg0 == cmExit)
{
midlet.destroyApp(false);
midlet.notifyDestroyed();
}
}
protected void keyPressed(int keyCode)
{
keyText = getKeyName(keyCode);
repaint();
}
}
Xử lý bàn phím – Ví dụ
11/20/2009
Võ Phương Bình – ITFAC - DLU
8
Đồ họa Graphics
Cách 1: dùng trong phương thức paint()
Cách 2:
Tạo đối tượng image chỉnh sửa được (Mutable).
Lấy đối tượng Graphics của image:
public Graphics getGraphics( );
11/20/2009
Võ Phương Bình – ITFAC - DLU
9
Xử lý Game
Màn hình khởi động
Lớp GameCanvas
Xử lý menu
11/20/2009
Võ Phương Bình – ITFAC - DLU
10
Ví dụ
11/20/2009
Võ Phương Bình – ITFAC - DLU
11
Màn hình khởi động
Lớp IntroCanvas
Lớp CountDown
11/20/2009
Võ Phương Bình – ITFAC - DLU
12
Lớp IntroCanvas
public class IntroCanvas extends Canvas {
private static final String logoName = "/Images/Splash.png";
private Display display;
private Displayable nextScreen;
private int timeout;
private Timer timer = new Timer();
public IntroCanvas(Display display, Displayable nextScreen, int timeout){
this.display = display;
this.nextScreen = nextScreen;
this.timeout = timeout;
}
public void startIntro(){
display.setCurrent(this);
}
public void endIntro(){
display.setCurrent(nextScreen);
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
13
protected void paint(Graphics g) {
try {
Image logo = Image.createImage(logoName);
g.drawImage(logo, getWidth()/2-logo.getWidth()/2, getHeight()/2-logo.getHeight()/2, Graphics.TOP | Graphics.LEFT);
}
catch (IOException e) {
g.drawString("Logo Error", 0, 0, Graphics.TOP | Graphics.LEFT);
}
}
protected void showNotify() {
timer.schedule(new CountDown(), timeout);
}
protected void keyPressed(int keyCode) { endIntro();}
Lớp CountDown
private class CountDown extends TimerTask {
public void run() {endIntro();}
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
14
Lớp GameCanvas
public class ExampleGameCanvas extends GameCanvas implements Runnable, CommandListener {
private Command cmdExit;
private Command cmdMenu;
private boolean isPlay;
private long delay;
private int currentX, currentY;
private int width;
private int height;
private Image img;
MIDlet midlet;
public void stop() {
isPlay = false;
}
public void start() {
isPlay = true;
Thread t = new Thread(this);
t.start();
}

11/20/2009
Võ Phương Bình – ITFAC - DLU
15
public ExampleGameCanvas(MIDlet midlet) {

super(true);
this.midlet = midlet;
cmdExit = new Command("Exit",Command.EXIT,1);
cmdMenu = new Command("Menu",Command.OK,1);
addCommand(cmdExit);
addCommand(cmdMenu);
setCommandListener(this);
width = getWidth();
height = getHeight();
currentX = width / 2;
currentY = height / 2;
delay = 20;

try{
img = Image.createImage("/Images/JavaPoint.png");
}
catch (Exception e){}
}
Lớp GameCanvas
public void run() {
Graphics g = getGraphics();
while (isPlay == true) {
input();
drawScreen(g);
try {
Thread.sleep(delay);
}
catch (InterruptedException ie) {}
}
}
private void input() {
int keyStates = getKeyStates();
if ((keyStates & LEFT_PRESSED) != 0)
currentX--;
if ((keyStates & RIGHT_PRESSED) !=0 )
currentX ++;
if ((keyStates & UP_PRESSED) != 0)
currentY --;
if ((keyStates & DOWN_PRESSED) !=0)
currentY++;
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
16
private void drawScreen(Graphics g) {
g.setColor(224,224,224);
g.fillRect(0, 0, getWidth(), getHeight());
g.setColor(0x0000ff);
g.drawImage(img,currentX,currentY,Graphics.TOP|Graphics.LEFT);
flushGraphics();
}

public void commandAction(Command c, Displayable s) {
if (c == cmdExit)
{
midlet.notifyDestroyed();
}
}
Sử dụng GameCanvas
public class ExampleGameCanvasMidlet extends MIDlet{
private Display display;
private boolean isSplash = true;
private Image imgSpash;
public ExampleGameCanvasMidlet() {
super();
}
protected void startApp() throws MIDletStateChangeException {
display = Display.getDisplay(this);
ExampleGameCanvas gameCanvas = new ExampleGameCanvas(this);
gameCanvas.start();
if(isSplash)
{
isSplash = false;
IntroCanvas introCanvas = new IntroCanvas(display,gameCanvas,3000);
introCanvas.startIntro();
}
}
protected void pauseApp() {}
protected void destroyApp(boolean arg0) throws MIDletStateChangeException {}
}
11/20/2009
Võ Phương Bình – ITFAC - DLU
17
Xử lý menu
11/20/2009
Võ Phương Bình – ITFAC - DLU
18
Xử lý menu (2)
Lớp Setting
Lớp HighCore
Lớp Help
Lớp About
Lớp xử lý menu chính
11/20/2009
Võ Phương Bình – ITFAC - DLU
19