Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Some Cool UI Examples

[ Edited ]

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:

http://supportforums.blackberry.com/t5/Web-Development/PLEASE-READ-PERFORMANCE-TIP-Speeding-up-your-...

 

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 :smileyhappy:

 

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.

 

mainscreen.png

 

sample2.png

 

 

sample3.png

 

 

sample4.png

 

 

sample5.png

 

2282iF3E0DA998992D278

 

 

 


 

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.

 

2205i271389ADDAB82B1D

 

2280i942F2622EA904492

 

sample7.png

 

 

2306i7B123D2F5FC5879A

 


 

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.

 

2206i33CF5E035E9C96AB

 

 


 

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.

 

2283iDE3A620579899733

 


 

 

 

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

 

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
bert2002
Posts: 172
Registered: ‎05-01-2010
My Device: Z10

Re: Some Cool UI Examples

wow that looks great and saves me a lot of time :smileywink:



----------------------------------------------------------
find my widgets -> http://blackberry.itbert.de
Please use plain text.
Developer
jmace
Posts: 482
Registered: ‎10-24-2008
My Device: 9300

Re: Some Cool UI Examples

The spinner allowed me to get past the 9 item limit on a select with RIM navigation mode on.

 

Again, great work and Kudos Tim.

_________________________________________
www.jasonmace.com/blackberry
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Some Cool UI Examples

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 :smileyhappy:

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Developer
keepcool
Posts: 23
Registered: ‎03-21-2010
My Device: Strom 9500 Bold 9700

Re: Some Cool UI Examples

Thanks a lot for sharing this Tim :smileywink:

 

Just when I tought I finished my widget, will have to review the UI with your samples

 

Cheers,

 

 

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Some Cool UI Examples

Hi everyone...

 

I just updated the sample with version 1.5.0 which now has some progress bar examples :smileyhappy:

 

Cheers

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Developer
devlin
Posts: 6
Registered: ‎05-31-2010
My Device: Bold 9700

Re: Some Cool UI Examples

Fair play... this is just what i needed...

 

I'm a web developer by day, and this is going to help a great deal with some sample apps i am putting together

 

:smileyhappy:

 

many thanks

Please use plain text.
Developer
bert2002
Posts: 172
Registered: ‎05-01-2010
My Device: Z10

Re: Some Cool UI Examples

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



----------------------------------------------------------
find my widgets -> http://blackberry.itbert.de
Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: Some Cool UI Examples

[ Edited ]

 


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. :smileyhappy:

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
New Developer
UserNeo
Posts: 74
Registered: ‎10-23-2008
My Device: 9000

Re: Some Cool UI Examples

Hi tim, thanks for this magnificent ui java script extension pack for widgets :smileyhappy:. Can you added "global notification" in this package? It's easy too or :smileyhappy: ?
Please use plain text.