Sunday, June 6, 2010

Pimp the VirtualKeyboard - by Chen Fishbein

LWUIT 1.4 is just around the corner, before the release I wanted to share
Some of the VirtualKeyboard enhancements/improvements that will be released as part of 1.4.

Since the VirtualKeyboard is a pure LWUIT component it can be customized in various ways:

1. Changing the Virtual Keyboard look – All Virtual Keyboard items can be customized from the resource editor, the associated ui id's are:

VKB – this id is used to style the Virtual Keyboard body.
VKBtooltip – this id is used to style the popup tooltip.
VKBButton – this id is used to style a regular button on the virtual keyboard (usually a char or a string).
VKBSpecialButton – this id is used to style the special buttons such as: 'Space', 'SH', ...
VKBTextInput – this id is used to style the textfield on the virtual keyboard.






















2. Adding a language -

The example below demonstrates how to add an input mode that supports hebrew:
Create an array of String arrays, each array represents a buttons column.
private static final String[][] DEFAULT_HEBREW = new String[][]{       
{"\u05e7", "\u05e8", "\u05d0", "\u05d8", "\u05d5", "\u05df", "\u05dd", "\u05e4", "$Delete$"}, 
{"\u05e9", "\u05d3", "\u05d2", "\u05db", "\u05e2", "\u05d9", "\u05d7", "\u05dc", "\u05da"}, 
{"\u05d6", "\u05e1", "\u05d1", "\u05d4", "\u05e0", "\u05de", "\u05e6", "\u05ea", "\u05e5"}, 
{"$Mode$", "$Space$", "\u05E3", "$OK$"}   };

Now extends the VirtualKeyboard and make sure when the VirtualKeyboard is initialized the new language mode is added.

public static class HebrewK extends VirtualKeyboard {  
public HebrewK() {    
   addInputMode("\u05d0\u05d1\u05d2", DEFAULT_HEBREW);    
   setInputModeOrder(new String[]{"\u05d0\u05d1\u05d2", QWERTY_MODE,    
   NUMBERS_SYMBOLS_MODE, NUMBERS_MODE, SYMBOLS_MODE   
  }
 );  
} 
}
Now you need to make sure the new HebrewK will be used as the default virtual keyboard.
Call this:
VKBImplementationFactory.init(HebrewK.class);
instead of the regular
VKBImplementationFactory.init();



3. Binding a VirtualKeyboard to a TextField – Now we have a use case where a TextField should accept only numbers, therefore launching the regular VirtualKeyboard will be a mistake.
What we need to do is to create a 'numbers only' VirtualKeyboard and launch it on a specific TextField.

TextField txt = new TextField(); 
txt.setConstraint(TextField.NUMERIC); 
txt.setInputModeOrder(new String[]{"123"}); 
txt.setInputMode("123");  
VirtualKeyboard vkb = new VirtualKeyboard(); 
vkb.setInputModeOrder(new String[]{VirtualKeyboard.NUMBERS_MODE});  
VirtualKeyboard.bindVirtualKeyboard(txt, vkb);

4. Adding your own button to a TextField – There are several use cases where you would want to place your own buttons on a specific Virtual Keyboard, for example if you are asking the user to insert input for a search field you might want a “search” command instead of the regular “ok” command that will automatically when pressed will invoke a submit action to the network.
To accomplish this you need to create a new virtual keyboard, declare your own input buttons and to add your own special button to be part of the virtual keyboard.



Declare a new input with a new special button “Search” (By default Virtual Keyboard is able to understand only the following special keys: "Shift", "Delete", "T9", “Mode”, “Space”, “OK”):

String[][] SEARCH_QWERTY = new String[][]{ 
{"q", "w", "e", "r", "t", "y", "u", "i", "o", "p"}, 
{"a", "s", "d", "f", "g", "h", "j", "k", "l"}, 
{"$Shift$", "z", "x", "c", "v", "b", "n", "m", "$Delete$"}, 
{"$Mode$", "$Space$", "$Search$"} };  

VirtualKeyboard vkb = new VirtualKeyboard(); 
//add the new input mode 
vkb.addInputMode("ABC_S", SEARCH_QWERTY); 
vkb.setInputModeOrder(new String[]{"ABC_S"}); 
//add the new special button to the vkb 
vkb.addSpecialButton("Search", new Command("Search") {  
public void actionPerformed(ActionEvent evt) { 
  //search logic
... 
} 
});  
//bind the vkb to the textfield 
VirtualKeyboard.bindVirtualKeyboard(txt, vkb); 
f.addComponent(txt); 

9 comments:

  1. Hi shai


    Can u help me in posting a calculator program as am new to lwuit my friend told me if we understand that program when can easily work in lwuit as many concepts are covered in a single program so please can u help me in same......................

    ReplyDelete
  2. Ever tried implementing a virtual keyboard in a HTML Component's textfield? Failed at implementing that.

    ReplyDelete
  3. In lwuit 1.5 when i click on the textfield i found the "Edit" Command with virtual keyboard.
    how i remove this extra Command .

    ReplyDelete
  4. tanx for useful article , i faced one problem while using virtual keyboard , the problem is that when i click on any textields the virtual keyboard appears and suddenly it dispears , i dnt know what has happend , it was working properly before , pls guide me regarding this issue
    tanx in advance

    ReplyDelete
  5. Hi Shai,

    I have been trying to use the virtual keyboard for my form-based application and I noticed that when I run a simple form using the Virtual keyboard, it works pretty well and fast but in a bigger application that contains this simple form, it is very slow( between every key press it takes like 6-7 seconds before it shows up ) .
    However the form in both the cases are simple form [ using 1 or 2 textfields ] though one of them is a part of a bigger application.

    How can I increase the response rate of the virtual keyboard and why is there a difference in the above scenario even though both the forms are literally same. Anything I can do to make this faster. Would appreciate your thoughts and suggestions.

    ReplyDelete
  6. @An - I am not sure what's causing this latency, it is possible that your bigger app simply consumes plenty of memory and the gc is being invoked constantly, which results in poor performance.
    Try to memory monitor the app to better understand the cause.

    ReplyDelete
  7. Yes, thanks.
    It could be that though I did notice the slow response at the start of the app a few times which kind of surprised me as instead of gc, I initialize several objects at that time that remains in memory as static till the end. I need to check whether this could be an issue causing the issue.
    Thanks again.

    ReplyDelete
  8. Cannot add own button to virtual Keyboard in LWUIT 1.5, Plz help! :D

    ReplyDelete
  9. Valuable information and excellent post you got here! I would like to thank you for sharing your thoughts and time into the stuff you post.

    BuzzDeli.com

    ReplyDelete