Display a row of images for scrolling

Help Center

Search This Document

Download PDF

Import the required classes and interfaces.

import net.rim.device.api.system.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
import net.rim.device.api.ui.decor.*;       
import net.rim.device.api.ui.extension.component.*;

Create the application framework by extending the UiApplication class. In main(), create an instance of the new class and invoke enterEventDispatcher() to enable the application to receive events. In the constructor, invoke pushScreen() to display the custom screen for the application. The PictureScrollFieldDemoScreen class, described in step 3, represents the custom screen.
```
public class PictureScrollFieldDemo extends UiApplication
{
     public static void main(String[] args)
     {
          PictureScrollFieldDemo app = new PictureScrollFieldDemo();
          app.enterEventDispatcher();
     }
    
     public PictureScrollFieldDemo()
     {
          pushScreen(new PictureScrollFieldDemoScreen());
     }
}
```

Create the framework for the custom screen by extending the MainScreen class.

class PictureScrollFieldDemoScreen extends MainScreen
{	
     public PictureScrollFieldDemoScreen()
     {
     }
}

In the constructor, invoke setTitle() to set the text that appears in the title section of the screen.
```
setTitle("PictureScrollField Demo");
```

In the constructor, create and initialize three arrays to store the images to display in the PictureScrollField and the labels and tooltip text that appear when each image is selected. In this example, the PictureScrollField contains three images.

Bitmap[] images = new Bitmap[3];
String[] labels = new String[3];
String[] tooltips = new String[3];

images[0] = Bitmap.getBitmapResource("img1.jpg");
labels[0] = "Label for image 1";
tooltips[0] = "Tooltip for image 1";

images[1] = Bitmap.getBitmapResource("img2.jpg");
labels[1] = "Label for image 2";
tooltips[1] = "Tooltip for image 2";

images[2] = Bitmap.getBitmapResource("img3.jpg");
labels[2] = "Label for image 3";
tooltips[2] = "Tooltip for image 3";

In the constructor, create and initialize an array of ScrollEntry objects. A ScrollEntry represents each item in the PictureScrollField.

ScrollEntry[] entries =  ScrollEntry[3];

for (int i = 0; i < entries.length; i++) 
{ 
     entries[i] = new ScrollEntry(images[i], labels[i], tooltips[i]);
}

In the constructor, create and initialize the PictureScrollField with each image 150 pixels wide and 100 pixels high. Invoke setData() to set the entries in the PictureScrollField. The second paramater in setData() specifies which image position is selected by default.
```
PictureScrollField pictureScrollField = new PictureScrollField(150, 100);
pictureScrollField.setData(entries, 0);
```
In the constructor, set the style of the PictureScrollField. Invoke setHighlightStyle() to specify how the selected image is highlighted. Invoke setHighlightBorderColor() to specify the selected image's border color. Invoke setBackground() to specify the background of the PictureScrollField. Invoke setLabelVisible() to specify whether the PictureScrollField displays the selected image's label.
```
pictureScrollField.setHighlightStyle(HighlightStyle.ILLUMINATE);
pictureScrollField.setHighlightBorderColor(Color.BLUE);
pictureScrollField.setBackground(BackgroundFactory.createSolidTransparentBackground(Color.RED, 150));
pictureScrollField.setLabelsVisible(true);
```
In the constructor, invoke add() to display the PictureScrollField.
```
add(pictureScrollField);
```

Next topic: Menu items

Previous topic: Code sample: Displaying a row of images for scrolling

Was this information helpful? Send us your comments.

Global Navigation

Help Center

Local Navigation

Display a row of images for scrolling