Wednesday, September 30, 2009

LWUIT Virtual Keyboard - by Chen Fishbein

Touch devices are relatively a new trend in mobile and almost every manufacturer has released a Touch device lately.
Although LWUIT supports touch events out of the box, there are a few things you need to consider when you develop for a touch screen device.
One of the major issues is the device Virtual Keyboard, every device has it's own Virtual Keyboard and there is no standard API to popup the device Virtual Keyboard.
In the past year we got tons of requests to create a LWUIT virtual keyboard, so expect to see this as part of LWUIT 1.3 (the code is already committed to the workspace, so if you work directly with the sources you can see the code already there).

To use the Virtual Keyboard call:

VKBImplementationFactory.init();
Display.init(this);

This implementation provides some basics input modes such as "Qwerty, symbols and numbers", but a developer can extend this easily and add his own input mode including different languages.


Thursday, September 24, 2009

New Components In LWUIT


We are working full steam ahead towards LWUIT 1.3 and have gotten several of the key features in LWUIT 1.3 already into the SVN. We implemented a tree component very similar to the one mentioned in a previous post in this blog and now I committed yet another major component a table component.
Unlike our list which we discussed several times before this time we chose to go with the composite approach for building elaborate components. Our general thought process is that these components are elaborate and would include complex editing, while the list is more of a selection component designed for scalability.

Here is a minor sample of using the standard table component, it should be pretty self explanatory:
final Form f = new Form("Table Test");
TableModel model = new DefaultTableModel(new String[] {"Col 1", "Col 2", "Col 3"}, new Object[][] {
{"Row 1", "Row A", "Row X"},
{"Row 2", "Row B", "Row Y"},
{"Row 3", "Row C", "Row Z"},
{"Row 4", "Row D", "Row K"},
}) {
public boolean isCellEditable(int row, int col) {
return col != 0;
}
};
Table table = new Table(model);
table.setScrollableX(true);
f.setLayout(new BorderLayout());
f.addComponent(BorderLayout.CENTER, table);
f.show();
However, IMO the more "interesting" aspect of the table is the table layout and its ability to create rather unique layouts relatively easily similarly to HTML's tables. You can use the layout constraints (also exposed in the table class) to create spanning and elaborate UI's.
In order to customize the table cell behavior you can now derive the table to create a "renderer like" widget, however unlike the list this component is "kept" and used as is. This means you can bind listeners to this component and work with it as you would with any other component in LWUIT.

Saturday, September 19, 2009

LWUIT Finally On java.sun.com


LWUIT is now finally featured among other prominent Java ME technologies in its own page on java.sun.com. Its been a great ride taking LWUIT from a small project that Chen started on the side and seeing it materialize.

Sunday, September 13, 2009

Lost Again: Searchable List With Text Field

I'm really excited about the final season of Lost as is probably evidence by this and my previous demo on the subject, the new demo celebrating the upcoming season is now within the incubator SVN and in the video on youtube to your right.
This demo shows off an ability often requested by people, searching within a list without actually using a text field that "steals" the focus. As you can see a standard LWUIT text field is drawn on top of the List and accepts user input as it always does thus allowing me to narrow my search within a large unordered list.
This is accomplished rather easily by painting the text field on top of the list and redirecting game key events to the list while all others are sent to the text field.

The text field is hidden after 1000 milliseconds of no activity, no need for glasspane or anything of that magnitude. You do need the latest LWUIT trunk for this to work since text field assumed it has a parent from when getting input (which isn't the case here). To workaround this you can override install/remove commands in text field with an empty implementation.

List l = new List(LIST_DATA) {
private long lastSearchInteraction;
private TextField search = new TextField(3);
{
search.getSelectedStyle().setBgTransparency(255);
search.setReplaceMenu(false);
search.setInputModeOrder(new String[]{"Abc"});
search.setFocus(true);
}

public void keyPressed(int code) {
int game = Display.getInstance().getGameAction(code);
if (game > 0) {
super.keyPressed(code);
} else {
search.keyPressed(code);
lastSearchInteraction = System.currentTimeMillis();
}
}

public void keyReleased(int code) {
int game = Display.getInstance().getGameAction(code);
if (game > 0) {
super.keyReleased(code);
} else {
search.keyReleased(code);
lastSearchInteraction = System.currentTimeMillis();
String t = search.getText();
int modelSize = getModel().getSize();
for(int iter = 0 ; iter < modelSize ; iter++) {
String v = getModel().getItemAt(iter).toString();
if(v.startsWith(t)) {
setSelectedIndex(iter);
return;
}
}
}
}

public void paint(Graphics g) {
super.paint(g);
if (System.currentTimeMillis() - 1000 < lastSearchInteraction || search.isPendingCommit()) {
search.setSize(search.getPreferredSize());
Style s = search.getStyle();
search.setX(getX() + getWidth() - search.getWidth() - s.getPadding(RIGHT) - s.getMargin(RIGHT));
search.setY(getScrollY() + getY());
search.paintComponent(g, true);
}
}

public boolean animate() {
boolean val = super.animate();
if(lastSearchInteraction != -1) {
search.animate();
if(System.currentTimeMillis() - 1000 > lastSearchInteraction && !search.isPendingCommit()) {
lastSearchInteraction = -1;
search.clear();
}
return true;
}
return val;
}
};

Wednesday, September 9, 2009

New Stuff In LWUIT - Heading To 1.3

I recently committed some code signifying the direction LWUIT is now taking towards our 1.3 release and hopefully towards a more organized development plan that would include more official releases with predefined features. Some of the major changes going into 1.3 are already beginning to appear and some of the other architectural changes are already drawn in the sand.
One major change is that we now removed the compatibility mode for the old style syntax, to migrate into 1.3 you would need to update your code to use the new approach to styles. Normally we would keep compatibility indefinitely however since LWUIT needs to be packaged into your application on the mobile device the size issue becomes very relevant and we think removing features such as these is essential for trimming the application sizes. LWUIT grew noticeably over the past few years which is naturally inevitable however we intend to keep it trim and fit for devices despite newer features.

Other than that the current JWS version of the LWUIT designer finally allows adding SVG files to resources, LWUIT will show them as standard PNG's however if you use LWUIT's SVG Implementation factory and your device supports SVG you will get the full benefit of SVG support within LWUIT! Our goal is to provide seamless migration allowing developers to shift their code to SVG while keeping 100% compatibility with existing device and a single binary! Ambitious but so far it seems that it works...

Another major feature making its way into LWUIT is the table component, this will be an elaborate component from which you can pick and choose functionality as you go along. The first portion of the Table is already committed and its the table layout class. Its pretty much what it sounds allowing you to layout components as you would a table with support for the spanning of rows/columns using table constraints. I tried to make it simpler than Gridbag, I hope I was successful in that but its indeed a complex component...

We have some more things up our sleeve for LWUIT I will try to keep you posted on all of these changes as they occur.

Sunday, September 6, 2009

First LWUIT Book Review

Update: You can purchase the book directly from Packt here which includes both quantity discounts and an ebook option.

I recently got an email from Packt offering me a copy of the upcoming LWUIT-book from Biswajit for review, naturally I accepted and this is a review of that book which is the first published LWUIT book... Exciting. Notice that I reviewed the e-book version which is a PDF file and it features color photos etc, some aspects of the printed book might differ slightly (mostly in relation to production quality of the binding/font size/colors etc) so I won't discuss these aspects too much.
If you want to review a chapter of the book you can download the sample PDF from Packt by clicking here.

You can also purchase the book from Packt directly or via Amazon (by clicking the link to your left).

I'll start with the bottom line since this is probably what most of you want to know: I like the book, its far more refined than all other alternatives for learning LWUIT. Its very detailed goes into some things that even I forgot we had. Since this is the only published LWUIT book at the moment this should be a no-brainer for people using or considering LWUIT. Since the book goes into great details on many aspects I can pretty much guarantee that even if you used LWUIT for a while you would learn or re-learn something new by going through the entire book.
I give it 5 stars in Amazon to a large part for being a good, innovative first comer to the scene of LWUIT books.


The things I like about the book
  • Its well written and generally well organized, the very first "hello world" example seemed a bit out of place but its still a book you can just read through.
  • Its pretty accurate, while I did find some minor mistakes (e.g. Form doesn't expose BorderLayout by default) its generally pretty accurate for a book of so much details.
  • The book chooses a single good environment (the Sprint Wireless Toolkit) and uses it throughout the book, it doesn't try to "over complicate" and take a long detour on the unrelated subjects of IDE/Simulator choice.
  • Since Biswajit is unrelated to the authors of LWUIT he explained some things in ways that are different from our choices, this allows the book to be read in parallel to the developer guide/tutorial while still taking away some new information. E.g. Biswajit described margins quite differently and possibly in a simpler way than we chose to explain them.
  • It goes into some esoteric features of LWUIT such as building your own transition and motion classes which is something even I didn't explain.

Things that are decisions of interest for potential buyers

  • The book teaches LWUIT on MIDP without teaching MIDP or mobile development. This can be good, since it doesn't complicate the subject matter neither for newbies who might get overwhelmed or for more experienced developers who already know MIDP development.
  • No details of LWUIT's support for CDC, RIM, Android etc. are given in the book. The book would still be useful for developers of these platforms but some of the "magic" of building on such platforms is "problematic".
  • The book is organized more as a reference book with individual tutorials, that means you can often skim or skip through the book. This is very useful for some cases as a guide/reference, but don't expect the examples to map directly to your "real world" use cases.
  • The book focuses on the Resource Editor (mentions a bit the new LWUIT Designer version) but doesn't mention the Ant task code, this is a good choice since there is no need to confuse readers with 2 different ways of achieving the same result. However if you use the build XML approach don't expect information regarding that in this book.

The things I didn't quite like

  • No references to external sources, there aren't many links within the book e.g. to this blog, the forum etc.. No real historic review of the origins of LWUIT which help explain allot of the decisions.
  • I would have expected more in depth coverage of LWUIT's MVC, specifically in the List chapter which is quite detailed I would expect a diagram etc. It might seem obvious to some but this is still one of the hardest parts of LWUIT to grasp.
  • The book uses the getStyle().set* methods and discusses theming in chapter 9 (quite late), I think hardcoding the appearance clutters the code a bit. I would prefer "cleaner" samples without manual setting of styles. This would also simplify usage of the books sources for LWUIT 1.2+ (the book does reference the style changes in 1.2).
  • There wasn't enough discussion of the EDT, it was explained in some cases but as something which is so central to LWUIT and something that practically everyone experiences issues with I would expect far more details. I would have expected examples on how to understand that an issue relates to EDT violation, how to fix EDT issues. There are references to callSerially/AndWait only in the authoring custom components chapter and there is no reference to invokeAndBlock which is a remarkably useful yet hard to understand concept for new LWUIT users.

Friday, September 4, 2009

New LWUIT Introduction Screencast

Just in case you don't follow Terrence's blog (which you should), he just posted links to a set of screencasts one of which is a great LWUIT screencast available here.
This is a useful link to send out to your boss/colleagues who aren't familiar with LWUIT and want a quick and easy introduction/overview of the subject matter.
In other news I got a copy of the new LWUIT book and I will post a review shortly...

Tuesday, September 1, 2009

Great Looking Flickr Viewer Demo

A J2ME Developer just wrote to me with this really great looking demo of using LWUIT to communicate with flickr.
The demo shows off lots of the ways in which LWUIT can be easily customized, backgrounds, transitions, theme and menu are all very easy to customize.
The carousel effect is achieved using a horizontal list that has a fisheye render. Some of the great effects are the photos on the cork background that appear in a dialog when selected.

Great job and keep sending to lwuit at sun.com your creations.