Home>

In javame serialization (3)-also said mvc design pattern article mentioned a textedit class, but did not give a specific implementationtextedit is a text editor drawn using gamecanvas.This article gives an implementation method with examples.

【Problem Description】

textedit is a text editor drawn using gamecanvas.This article gives an implementation method with examples.

【principle】

1 Use graphics and gamecanvas to draw text boxes and cursors.

2 When an input event is detected,Jump to the advanced interface->textbox. Complete the input through the system call input method.

3 Returns the value entered by textbox to the textedit object.

【Design Patterns】

This process is a bit similar to the decorative pattern,In fact, the input is still textbox, just decorated textbox,Formed a beautiful look.

[Code list]

textedit.java
package 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);
  }
  //Draw the text box
  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);
  }
  //Draw the cursor
  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.java
package 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 ("OK", command.ok, 1);
     cancelcommand=new command ("Cancel", 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.java
package 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="User Registration";
    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, "Next", "Exit");
    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="username:\ 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="User password:\ 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="Password confirmation:\ 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;
      }
    }
  }
}

【analysis】

1Drawing of a text box (textedit.java)

Need to pass gamecanvas, graphics objects to achieve drawing,Who uses the strategy,Who passed the parameter.In addition, you need the coordinates (x, y) of the upper left corner of the text box at the bottom of the bed and the variable cursorblinkon that controls the blinking of the cursor.

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 Draw the cursor (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 Implement cursor blinking

Cursor blinking requires threads.In the uicontroller.java class, the view class that needs to draw the text box,Need to implement the thread interface.

uicontroller.java
case 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.java
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 ();
    }
  }
}

4 Call the advanced interface textbox subclass popuptextbox

When calling, pass the calling object name, edit object name, and edit box parameters to the popuptextbox object (must haveThe purpose is to save the value of the edit box,Otherwise when multiple calls return,(The values ​​of different edit boxes are refreshed to be empty)

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.java
case eventid.event_user_regist_edit:
{
   textbox.init (args);
     midlet.setcurrent (textbox);
   break;
}

5 Receiving popuptextbox parameters

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 ("");
}

6popuptextbox returns the value of the input method input

if (update) canvastext=this.getstring ();

7 popuptextbox input value processing

Depending on the object being called,And editing objects,Process the entered value,Pass to parent edit box

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 Input value display

(1) New object

private textedit textedit_name;
textedit_name=new textedit (this);

(2) Accept the input parameters

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) cursor control,Navigate to the edit object,Control the blink of the edit object (run method)

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) Drawing the edit box

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 ();
}

The effect achieved is shown in Figure 1:

  • Previous C # method of reading and writing INI files
  • Next Using regular expressions to grab blog garden list data