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