« Return to the Antair Blog

Archive for the ‘Programming’ Category

Building the user interface for Snippets

March 27th, 2010

Our upcoming product Snippets will be our sixth BlackBerry application, and our most ambition user-interface to date.

The custom user interface engine used in Snippets is capable of rendering on any modern BlackBerry device from the older Pearl models displaying at 240×260 pixels to the new Storm and Bold devices running upwards of 480×360 pixels.

To support the unique characteristics of the BlackBerry Storm and Storm2, the new Antair UI engine is also capable of dynamically switching from landscape rendering to portrait rendering, and has full touch-screen capabilities.

Let’s take a look at how we build up one of our custom screens in the new Snippets application. I’ll be using the BlackBerry Storm in landscape mode for presentation.

We begin with a blank screen and use a solid bitmap background as a foundation. For Snippets, we decided to go with a nice wood grain bitmap. The engine takes care of making sure that the background is fitted properly on the various screen sizes supported by the various BlackBerry devices.

Then, we use custom controls to create a beautiful title bar. Aside from displaying the application title and company name, the title bar is used to hold controls for various functions, including settings and support. It’s also semi-transparent, allowing for the wood texture of the background to show through.

Snippets is an auto-text/auto-complete application. We wanted to make the task of creating a new Snippet not only easy and intuitive, but also pleasant visually. So we built a ton of custom controls for the application. One such control is the Snippet editing control which looks like a real yellow notepad.

Then, we needed to add Snippet creation controls to the screen, along with a feature to allow you to enter a Quick Type sequence; the sequence of characters that will automatically insert your Snippet when you are creating a new e-mail or SMS message. But we didn’t want to break the feel of the yellow notepad. So we created a control panel that looks and feels like it belongs naturally in this scene – a ripped piece of paper held down by a paperclip.

Finally, we wanted to give the screen a little balance. We didn’t like the way to notepad ran off the bottom. We also needed a way to assign the new Snippet to a category. So we created a nice footer for the screen. Notice how the footer control is slightly transparent to allow a bit of the underlying yellow notepad to show through — another feature of the new Antair UI engine.

There you go. The design behind one of the screens for our upcoming Snippets application.

Cheers!

Antair Releases BlackBerry Auto-Responder 1.4

February 11th, 2010

We’ve just released version 1.4 of our Auto-Responder product for the BlackBerry.

This new version introduces more customer-requested features, such as an increased timeout for responses sent to the same e-mail address, and the ability to retain the subject line of the original message instead of using a custom subject line.

We’ve also updated the engine to support all modern BlackBerry devices, including the Storm and Storm2 touch-screen models.

As usual, both the touch and non-touch screen editions of Antair Auto-Responder are built from the same code-base using a combination of RAPC-supported precompilation and Antair magic voodoo.

One thing to note is that implementing support for touch devices made it necessary to modify the control scheme a bit. And while we were at it, the design wizards insisted that we change the color scheme of the app to make it more — “friendly and modern”.

Here, in the screenshot of an earlier version of Antair Auto-Responder, you can see the shaded-blue color scheme. The main control scheme revolved around a set of HTML-like links. A scroll of the trackwheel or trackball underlined the control under focus, making each screen flow more like a web page rather than a typical mobile app screen.

In the new version, the control scheme has been modified to work better with touch-devices, with the links being replaced by large buttons. And, as you can see, the color scheme has been modified as well. The app does feel more modern, and, I must admit, more “friendly”.

Cheers!

Debugging BlackBerry User Interface Code

September 25th, 2009

The most effective debugging techniques are usually the simplest; printf(), echo(), System.out.println().

If you’re debugging UI code for the BlackBerry, here’s your printf() :

protected void paint ( Graphics graphics )
{
    graphics.setColor ( 0×00FFFFFF );
    graphics.drawRect ( 0, 0, getWidth(), getHeight() );
    super.paint ( graphics );
}