Skip to content
This repository has been archived by the owner on Oct 9, 2018. It is now read-only.

Image List

Jump to bottom
tneil edited this page May 5, 2012 · 31 revisions

Image lists give the user different options that they can choose. This user interface can seen in the BlackBerry options area.

Image List Image List

Creating an image list is really simple and begins with creating a <div> that has the attribute data-bb-type="image-list". Each item in the list is another <div> that has the attribute data-bb-type="item". Each item has an image (data-bb-img), a title (data-bb-title), accent text that floats in the top right (data-bb-accent-text), and a description which is the inner contents of the <div>. An image list can have both headers and line items. A header is declared by creating a <div> with a data-bb-type="header" attribute and the contents of the header are displayed as the label.
Headers have their text centered by default. To left justify your header text add the data-bb-justify="left" or to right justify your text add the **data-bb-justify="right"**attribute to your header.

Image Sizes

  • BlackBerry 5 & 6 - 60 x 60 pixels
  • BlackBerry PlayBook & BlackBerry 7 - 70 x 70 pixels
  • BlackBerry PlayBook with BB10 styling - 64 x 64 pixels
  • BlackBerry 10 - 119 x 119 pixels

`

<div data-bb-type="screen">
    <div data-bb-type="image-list" data-bb-context="true">
        <div data-bb-type="header">My sample header</div>
        <div data-bb-type="item" data-bb-img="icon1.png" data-bb-title="Input Controls">Use native looking input controls</div>
        <div data-bb-type="item" data-bb-img="icon2.png" data-bb-title="Inbox List">Style your list like the BlackBerry Inbox</div> 
        <div data-bb-type="item" data-bb-img="icon3.png" data-bb-title="Settings">Create native looking options screens</div> 
        <div data-bb-type="header">Look at me</div>
        <div data-bb-type="item" data-bb-img="icon6.png" data-bb-title="BBM Bubbles">Generate a chat window like BBM</div> 
        <div data-bb-type="item" data-bb-img="icon7.png" data-bb-title="Pill Buttons">Use pill buttons to organize your data</div> 
        <div data-bb-type="item" data-bb-img="icon8.png" data-bb-title="Charts">Add charts to your application</div> 
        <div data-bb-type="item" data-bb-img="icon9.png" data-bb-title="Guages">Use gauges and progress bars</div> 
        <div data-bb-type="item" data-bb-img="icon10.png" data-bb-title="Tab Controls">Use tabs to organize your data</div> 
        <div data-bb-type="item" data-bb-img="icon11.png" data-bb-title="Arrow List">Create a navigation list with arrows</div>
    </div>
</div>

` To add a click event to one of the line items, simply add an onclick event to the <div>

<div data-bb-type="item" onclick="alert('clicked')" data-bb-img="icon9.png" data-bb-title="Guages">Use gauges and progress bars</div>

Context Menu Integration

If you want to attach a BlackBerry 10 context menu to your image list you can add the data-bb-context="true" attribute. This will automatically hook up your image list to the press and hold context menu that you have declared for the screen. When the image list item is pressed and held for 667ms it will peek the screen's context menu passing the title and description of the list item along with a handle to the item element. See the Context Menu area for mor details of interacting with the menu.

NOTE: The context menu integration with the image list only works on BlackBerry 10

Clone this wiki locally