【問題描述】
TextEdit是採用GameCanvas繪製的文本編輯器。本文結合實例給出實現的方法。
【原理】
1 運用Graphics、GameCanvas繪製文本框和光標。
2 檢測到輸入事件時，跳轉到高級界面->TextBox 。通過系統調用輸入法完成輸入。
3 將TextBox輸入的值返回給TextEdit對象。
【設計模式】
這個過程有點類似裝飾模式，實際上，實現輸入的還是TextBox，只是給TextBox裝飾了一下，形成了一個漂亮的外觀。
【代碼清單】
TextEdit.javapackage com.token.view.components; import javax.microedition.lcdui.Font; import javax.microedition.lcdui.Graphics; import javax.microedition.lcdui.game.GameCanvas; public class TextEdit extends GameCanvas { private Font ft; public int width; public int height; public TextEdit(GameCanvas canvas) { super(false); } //繪製文本框public void drawTextBox(GameCanvas canvas, Graphics graphics, String text, int x, int y, boolean cursorBlinkOn) { / /System.out.println("draw"); int padding = 4; int margin = 2; ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_MEDIUM); graphics.setFont(ft); width = 3*canvas.getWidth()/5+2*padding; height = ft.getHeight()+2*padding; graphics.setColor(Color.frame); graphics.fillRect(x+1,y+1,width+margin ,height+margin); graphics.setColor(Color.frameBg); graphics.drawRect(x, y,width, height); graphics.setColor(Color.background); graphics.fillRect(x+1, y+1,width -1,height-1); graphics.setColor(Color.text); graphics.drawString(text, x+padding, y+padding, Graphics.TOP|Graphics.LEFT); drawCursor(graphics, x+ft.stringWidth( text)+padding, y+padding, 1, ft.getHeight(), cursorBlinkOn); canvas.flushGraphics(x,y,width,height); } //繪製光標public void drawCursor(Graphics graphics, int x, int y , int width, int height, boolean cursorBlinkOn) { if(cursorBlinkOn) { ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_MEDIUM); graphics.setFont(ft); graphics.setColor(0x0,0x0, 0x0); graphics.drawLine(x+width,y,x+width,y+height); } } } PopUpTextBox.javapackage com.token.view; import javax.microedition.lcdui.Command; import javax.microedition.lcdui. CommandListener; import javax.microedition.lcdui.Displayable; import javax.microedition.lcdui.TextBox; import com.token.util.UIController; public class PopUpTextBox extends TextBox { private UIController controller; protected String canvasText = ""; private Command okCommand; private Command cancelCommand; private String object_name = null; private String editor = null; private Object args_t[]; private Object[] args; public PopUpTextBox(UIController control, String title, String text, int maxsize, int constraints) { super(title , text, maxsize, constraints); controller = control; args = new Object[6]; okCommand = new Command("確定", Command.OK, 1); cancelCommand = new Command("取消", Command.CANCEL, 1 ); this.addCommand(okCommand); this.addCommand(cancelCommand); this.setCommandListener(new TextBoxListener()); } public void init(Object[] args) { object_name = ((String)args[0]!=null )?(String)args[0]:""; editor = ((String)args[1]!=null)?(String)args[1]:""; //System.out.println(object_name); //System.out.println(editor); args_t = args; this.setString(""); } protected void closeTextBox(boolean update) { if (update) canvasText = this.getString(); //System.out. println(canvasText); if(object_name.equals("registScreen")) { if(editor.equals("regist_name")) { if(args_t[3]!=""||args_t[3]!=null|| args_t[4]!=""||args_t[4]!=null) { args[0] = object_name; args[1] = editor; args[2] = this.canvasText; args[3] = args_t[3 ]; args[4] = args_t[4]; } controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT_BACK,args); } else if(editor.equals("regist_passwd")) { if(args_t[2]!="" ||args_t[2]!=null||args_t[4]!=""||args_t[4]!=null) { args[0] = object_name; args[1] = editor; args[2] = args_t [2]; args[3] = this.canvasText; args[4] = args_t[4]; } controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT_BACK,args); } else if(editor.equals("regist_passwd_re")) { if(args_t[2]!=""||args_t[2]!=null||args_t[3]!=""||args_t[3]!=null) { args[0] = object_name; args[ 1] = editor; args[2] = args_t[2]; args[3] = args_t[3]; args[4] = this.canvasText; } controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT_BACK,args); } } //... } private class TextBoxListener implements CommandListener { public void commandAction(Command command, Displayable disp) { if(command==okCommand) { closeTextBox(true); } else if(command==cancelCommand) { closeTextBox(false) ; } } } } UserRegist.javapackage com.token.view; import javax.microedition.lcdui.Font; import javax.microedition.lcdui.Graphics; import javax.microedition.lcdui.game.GameCanvas; import com.token.model. *; import com.token.util.*; import com.token.view.components.*; public class UserRegist extends GameCanvas implements Runnable { private UIController controller; private Graphics graphics; private Font ft; private Menu menu; private Head head; private BackGroud backGroud; private UserDataRecord userRecord; private String title; private TextEdit textEdit_name; private TextEdit textEdit_passwd; private TextEdit textEdit_passwd_re; private int textEdit_name_x; private int textEdit_name_y; private int textEdit_passwd_x; private int textEdit_passwd_y; private int textEdit_passwd_re_x; private int textEdit_passwd_re_y; private int currentlySelectedIndex = 0; private String username; private String passwd; private String passwd_re; long caretBlinkDelay = 500L; long lastCaretBlink = 0; private String object_name; private String editor; private boolean cursorBlinkOn1; private boolean cursorBlinkOn2; private boolean cursorBlinkOn3; private int width; private int height; public UserRegist(UIController control) { super(false); this.controller=control; this.title = "用戶註冊"; setFullScreenMode(true); graphics = getGraphics(); width = getWidth(); height = getHeight(); menu = new Menu(this); head = new Head(this); backGroud = new BackGroud(this); userRecord = new UserDataRecord(); textEdit_name = new TextEdit(this); textEdit_passwd = new TextEdit(this) ; textEdit_passwd_re = new TextEdit(this); } public void show(Object[] args) { // TODO Auto-generated method stub setFullScreenMode(true); object_name = ((String)args[0]!=null)?(String )args[0]:""; editor = ((String)args[1]!=null)?(String)args[1]:""; username = ((String)args[2]!=null)? (String)args[2]:""; passwd = ((String)args[3]!=null)?(String)args[3]:""; passwd_re = ((String)args[4]!=null )?(String)args[4]:""; if(editor.equals("regist_name")) { cursorBlinkOn1 = true; cursorBlinkOn2 = false; cursorBlinkOn3 = false; currentlySelectedIndex =0; } else if(editor.equals(" regist_passwd")) { cursorBlinkOn1 = false; cursorBlinkOn2 = true; cursorBlinkOn3 = false; currentlySelectedIndex =1; } else if(editor.equals("regist_passwd_re")) { cursorBlinkOn1 = false; cursorBlinkOn2 = false; cursorBlinkOn3 = true; currentlySelectedIndex =2 ; } //System.out.println(object_name); //System.out.println(editor); draw(); redraw(); } public void draw() { //clearScreen(); backGroud.drawBackGroud(this , graphics); head.drawHead(this,graphics,this.title); menu.drawMenu(this,graphics,"下一步","退出"); drawBody(); } private void redraw() { switch(currentlySelectedIndex) { case 0: { cursorBlinkOn2 = false; cursorBlinkOn3 = false; editor = "regist_name"; break; } case 1: { cursorBlinkOn1 = false; cursorBlinkOn3 = false; editor = "regist_passwd"; break; } case 2: { cursorBlinkOn1 = false ; cursorBlinkOn2 = false; editor = "regist_passwd_re"; break; } default:; } textEdit_name.drawTextBox(this, graphics, username, textEdit_name_x, textEdit_name_y, cursorBlinkOn1); textEdit_passwd.drawTextBox(this, graphics, passwd, textEdit_passwd_x, textEdit_passwd_y, cursorBlinkOn2 ); textEdit_passwd.drawTextBox(this, graphics, passwd_re, textEdit_passwd_re_x, textEdit_passwd_re_y, cursorBlinkOn3); textEdit_name.flushGraphics(); } public void drawBody() { int margin =5; ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_BOLD ,Font.SIZE_LARGE); String info = "用戶名：/n"; String info_wrap1[] = StringDealMethod.format(info, width-10, ft); graphics.setFont(ft); graphics.setColor(Color.text) ; for(int i=0; i<info_wrap1.length; i++) { graphics.drawString(info_wrap1[i],5, (i) * ft.getHeight()+40, Graphics.TOP|Graphics.LEFT); } textEdit_name_x = 5; textEdit_name_y = info_wrap1.length * ft.getHeight()+40; textEdit_name.drawTextBox(this, graphics, username, textEdit_name_x, textEdit_name_y, cursorBlinkOn1); info = "用戶密碼：/n"; String info_wrap2[] = StringDealMethod.format(info, width-10, ft); graphics.setFont(ft); graphics.setColor(Color.text); for(int i=0; i<info_wrap2.length; i++) { graphics.drawString(info_wrap2 [i],5, (i+info_wrap1.length) * ft.getHeight()+textEdit_name.height+margin+40, Graphics.TOP|Graphics.LEFT); } textEdit_passwd_x = 5; textEdit_passwd_y = (info_wrap1.length+info_wrap2 .length) * ft.getHeight()+textEdit_name.height+margin+40; textEdit_passwd.drawTextBox(this, graphics, passwd, textEdit_passwd_x, textEdit_passwd_y, cursorBlinkOn2); info = "密碼確認：/n"; String info_wrap3[] = StringDealMethod.format(info, width-10, ft); graphics.setFont(ft); graphics.setColor(Color.text); for(int i=0; i<info_wrap3.length; i++) { graphics.drawString(info_wrap3 [i],5, (i+info_wrap1.length+info_wrap2.length) * ft.getHeight()+textEdit_name.height+textEdit_passwd.height+2*margin+40, Graphics.TOP|Graphics.LEFT); } textEdit_passwd_re_x = 5; textEdit_passwd_re_y = (info_wrap1.length+info_wrap2.length+info_wrap3.length) * ft.getHeight()+textEdit_name.height+textEdit_passwd.height+2*margin+40; textEdit_passwd_re.drawTextBox(this, graphics, passwd_re, textEdit_passwd_re_x, textEdit_passwd_re_y, cursorBlinkOn3); } public void clearScreen() { graphics.setColor(0xff,0xff,0xff); graphics.fillRect(0, 0, width, height); } public void checkTimeStamp() { long currentTime = System.currentTimeMillis( ); //System.out.println("1"); if(lastCaretBlink + caretBlinkDelay < currentTime) { //System.out.println("2"); if(editor.equals("regist_name")) { cursorBlinkOn1 =! cursorBlinkOn1; cursorBlinkOn2 = false; cursorBlinkOn3 = false; } else if(editor.equals("regist_passwd")) { cursorBlinkOn1 = false; cursorBlinkOn2 =! cursorBlinkOn2; cursorBlinkOn3 = false; } else if(editor.equals("regist_passwd_re" )) { cursorBlinkOn1 = false; cursorBlinkOn2 = false; cursorBlinkOn3 =! cursorBlinkOn3; } lastCaretBlink = currentTime; } } public void run() { //System.out.println("run"); while(true) { checkTimeStamp() ; redraw(); try { synchronized(this) { //System.out.println("3"); wait(50L); } } catch(Exception e) { e.printStackTrace(); } } } protected void keyPressed (int keyCode) { switch(keyCode) { case KeyID.SOFT_RIGHT: { controller.handleEvent(UIController.EventID.EVENT_EXIT,null); break; } case KeyID.SOFT_LEFT: { if(username!="" && passwd!=" "&&passwd_re!="") { if(passwd.equals(passwd_re)) { userRecord.db_deleteAllRecord(); if(userRecord.db_getRecord(1)==null) { UserDataItem userItem = new UserDataItem(1,(username+"," +passwd).getBytes()); userRecord.db_addRecord(userItem); userItem = null; System.gc(); } String update = "start"; Object [] args = {"activeScreen", null, update}; controller .handleEvent(UIController.EventID.EVENT_NEXT_ACTIVE_TOKEN_SCREEN,args); } } break; } case KeyID.KEY_EDIT: case KEY_NUM0: case KEY_NUM1: case KEY_NUM2: case KEY_NUM3: case KEY_NUM4: case KEY_NUM5: case KEY_NUM6: case KEY_NUM7: case KEY_NUM8: case KEY_NUM9: { //System.out.println(editor); Object[] args = {object_name,editor,username,passwd,passwd_re}; controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT,args); break; } default:; } keyCode = getGameAction(keyCode); switch(keyCode) { case UP: case LEFT: { currentlySelectedIndex--; if(currentlySelectedIndex<0) { currentlySelectedIndex=0; } else { redraw(); } break; } case DOWN: case RIGHT: { currentlySelectedIndex++; if(currentlySelectedIndex>2) { currentlySelectedIndex=2; } else { redraw(); } break; } } } }【分析】
1 文本框的繪製(TextEdit.java)
需要傳遞GameCanvas、Graphics對象，實現繪圖，策略是誰使用，誰傳遞該參數。此外需要床底文本框左上角坐標(x，y)以及控制光標閃爍的變量cursorBlinkOn。
public void drawTextBox(GameCanvas canvas, Graphics graphics, String text, int x, int y, boolean cursorBlinkOn) { //System.out.println("draw"); int padding = 4; int margin = 2; ft = Font. getFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_MEDIUM); graphics.setFont(ft); width = 3*canvas.getWidth()/5+2*padding; height = ft.getHeight()+2*padding; graphics.setColor(Color.frame); graphics.fillRect(x+1,y+1,width+margin,height+margin); graphics.setColor(Color.frameBg); graphics.drawRect(x, y,width, height ); graphics.setColor(Color.background); graphics.fillRect(x+1, y+1,width-1,height-1); graphics.setColor(Color.text); graphics.drawString(text, x+padding , y+padding, Graphics.TOP|Graphics.LEFT); drawCursor(graphics, x+ft.stringWidth(text)+padding, y+padding, 1, ft.getHeight(), cursorBlinkOn); canvas.flushGraphics(x, y,width,height); }2 繪製光標(TextEdit.java)
public void drawCursor(Graphics graphics, int x, int y, int width, int height, boolean cursorBlinkOn) { if(cursorBlinkOn) { ft = Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_PLAIN,Font.SIZE_MEDIUM); graphics.setFont (ft); graphics.setColor(0x0,0x0,0x0); graphics.drawLine(x+width,y,x+width,y+height); } }3 實現光標閃爍
光標閃爍的實現需要用到線程，在UIController.java類中，需要繪製文本框的視圖類，需要實現線程接口。
UIController.javacase EventID.EVENT_NEXT_USER_REGIST_SCREEN: case EventID.EVENT_USER_REGIST_EDIT_BACK: { reg.show(args); Thread thread = new Thread(reg); thread.start(); midlet.setCurrent(reg); break; } UserRegist.javapublic void checkTimeStamp () { long currentTime = System.currentTimeMillis(); //System.out.println("1"); if(lastCaretBlink + caretBlinkDelay < currentTime) { //System.out.println("2"); if(editor .equals("regist_name")) { cursorBlinkOn1 =! cursorBlinkOn1; cursorBlinkOn2 = false; cursorBlinkOn3 = false; } else if(editor.equals("regist_passwd")) { cursorBlinkOn1 = false; cursorBlinkOn2 =! cursorBlinkOn2; cursorBlinkOn3 = false; } else if(editor.equals("regist_passwd_re")) { cursorBlinkOn1 = false; cursorBlinkOn2 = false; cursorBlinkOn3 =! cursorBlinkOn3; } lastCaretBlink = currentTime; } } public void run() { //System.out.println("run" ); while(true) { checkTimeStamp(); redraw(); try { synchronized(this) { //System.out.println("3"); wait(50L); } } catch(Exception e) { e. printStackTrace(); } } }
4 調用高級界面TextBox子類PopUpTextBox
調用時，將調用對象名、編輯對象名、以及編輯框參數傳遞給PopUpTextBox對象(一定要有，目的是保存編輯框的值，否則多次調用返回時，不同編輯框的值被刷新為空了)
UserRegist.java(KeyPressed)case KeyID.KEY_EDIT: case KEY_NUM0: case KEY_NUM1: case KEY_NUM2: case KEY_NUM3: case KEY_NUM4: case KEY_NUM5: case KEY_NUM6: case KEY_NUM7: case KEY_NUM8: case KEY_NUM9: { //System.out.println( editor); Object[] args = {object_name,editor,username,passwd,passwd_re}; controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT,args); break; } UIController.javacase EventID.EVENT_USER_REGIST_EDIT: { textBox.init(args) ; midlet.setCurrent(textBox); break; }
5 PopUpTextBox參數的接收
public void init(Object[] args) { object_name = ((String)args[0]!=null)?(String)args[0]:""; editor = ((String)args[1]!=null) ?(String)args[1]:""; //System.out.println(object_name); //System.out.println(editor); args_t = args; this.setString(""); }6 PopUpTextBox返回輸入法輸入的值
if (update) canvasText = this.getString();
7 PopUpTextBox輸入值處理
依據調用的對象，以及編輯對象，對輸入的值進行處理，傳遞給父對象編輯框
if(object_name.equals("registScreen")) { if(editor.equals("regist_name")) { if(args_t[3]!=""||args_t[3]!=null||args_t[4]! =""||args_t[4]!=null) { args[0] = object_name; args[1] = editor; args[2] = this.canvasText; args[3] = args_t[3]; args[4 ] = args_t[4]; } controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT_BACK,args); } else if(editor.equals("regist_passwd")) { if(args_t[2]!=""||args_t[2 ]!=null||args_t[4]!=""||args_t[4]!=null) { args[0] = object_name; args[1] = editor; args[2] = args_t[2]; args [3] = this.canvasText; args[4] = args_t[4]; } controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT_BACK,args); } else if(editor.equals("regist_passwd_re")) { if(args_t[ 2]!=""||args_t[2]!=null||args_t[3]!=""||args_t[3]!=null) { args[0] = object_name; args[1] = editor; args[2] = args_t[2]; args[3] = args_t[3]; args[4] = this.canvasText; } controller.handleEvent(UIController.EventID.EVENT_USER_REGIST_EDIT_BACK,args); } }
8 輸入值的顯示
(1) 新建對象
private TextEdit textEdit_name; textEdit_name = new TextEdit(this);
(2) 接受輸入的參數
object_name = ((String)args[0]!=null)?(String)args[0]:""; editor = ((String)args[1]!=null)?(String)args[1]:" "; username = ((String)args[2]!=null)?(String)args[2]:""; passwd = ((String)args[3]!=null)?(String)args[3] :""; passwd_re = ((String)args[4]!=null)?(String)args[4]:"";
(3) 光標控制，定位到編輯對象，控制編輯對象的光標閃爍(run方法)
private void redraw() { switch(currentlySelectedIndex) { case 0: { cursorBlinkOn2 = false; cursorBlinkOn3 = false; editor = "regist_name"; break; } case 1: { cursorBlinkOn1 = false; cursorBlinkOn3 = false; editor = "regist_passwd"; break; } case 2: { cursorBlinkOn1 = false; cursorBlinkOn2 = false; editor = "regist_passwd_re"; break; } default:; } //... }
(4) 編輯框的繪製
private void redraw() { ... textEdit_name.drawTextBox(this, graphics, username, textEdit_name_x, textEdit_name_y, cursorBlinkOn1); textEdit_passwd.drawTextBox(this, graphics, passwd, textEdit_passwd_x, textEdit_passwd_y, cursorBlinkOn2); textEdit_passwd.drawTextBox(this, graphics , passwd_re, textEdit_passwd_re_x, textEdit_passwd_re_y, cursorBlinkOn3); textEdit_name.flushGraphics(); }實現的效果如圖1所示：