Some Cool UI Examples

I have been putting together little samples in my spare time on some different ways to create some UI elements using simple CSS and HTML to make things look like a native application running on the BlackBerry.

Attached you will find a little sample that will show you how to create the following styles of user interfaces that you may find look familiar

Current Version of Sample is v1.7.0

Updated: Aug 24, 2011

List Examples

You will find a variety of different examples on how to layout lists that look like some of the familiar UI found on BlackBerry smartphones. These are all simple HTML and CSS layouts to accomplish this capability.

Input Layouts

And for a little bit of fun, I through in a rough little spinner select JavaScript extension that you can take a look at. along with some on/off and yes/no buttons.

There are also examples in here on how to create rounded border sections as well as tool tips. An additional part of these examples show how to create things like auto sizing buttons, drop downs and "Pill Button" tabs.

We have now also added Tabs that provide the same functionality as the "Pill Buttons" but with a familiar tab UI.

Charting

You will also find some examples on how to include dynamic charts in your Widget using Google's chart API. This example will also show you how to create temporary placeholders that wait for you to return an image from a remote location.

Progress Bars and Gauges

You can also check out how to make your own progress bars and gauges. The sample shows how they are updated on a setTimeout() to ensure that the JavaScript thread ends and the UI can be updated.

You should be able to find some pieces that you find useful for your applications. Whether or not you use the code in the sample, you can at least take a look and see how the UI was accomplished and then bring that knowledge to your application's user interface.

Let me know if you find any bugs and I'll try and update the code with your feedback.

Re: Some Cool UI Examples

this is really great but what about some Blackberry native looking examples? This will help newcomers more.

Hi bert2002,

I would actually consider these UI's native looking BlackBerry examples. They're examples of the inbox, Facebook, Twitter. BlackBerry Mesenger and our input screens with the different rounded border sections.

The samples should also show how to create buttons that look like BlackBerry buttons and dropdown buttons that size to your text.

Many of the BlackBerry applications out there have similar looking UI's. The spinner control is a built in native control as well. You will see examples of it in the alarm clock or when selecting a date in appointments.