Hi Everyone,
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.
Downloads:
Download The Source Code from Github
Also, for some tips on how to make a fast user interface you can check out the following link:
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.
Cheers
FYI... I have added some more UI examples... check out the first post to see what has been added and also grab the latest sample code
Items added:
- Dynamic sizing buttons
- Dynamic sizing drop-down buttons using the spinner control
- "Pill Buttons" used as tabs for a screen
- Google Charts included in a screen
- Example of how to perform placeholders in your UI while you retrieve external images
These have been tested on a Storm2 and Bold2. They work for both touch and trackpad navigation
Enjoy
bert2002 wrote:
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.
I'm curious of other examples you have in mind?
Let me know and I'll see if we can get them added.
