Exercise

Generate the main screen, which is the default entry point into your application. Use the Screen Editor to create controls such as labels, lists, and text boxes.

Objectives

• Discover how to design the main screen, which is the default entry point into your application and the user interface.
• See how to create controls such as labels, lists and text boxes using the Screen Editor.

Setup Tasks

Open BlackBerry MDS Studio™ and select the LengthConverter project which you created in the previous lab. See the lab entitled Creating a Bottom-up BlackBerry MDS Studio Project for more details.
If you have not completed the first lab in this series, create the LengthConverter project following these steps:

1. Download the LengthConverter workspace (ZIP) then unzip the file…
2. Importing the LengthConverter workspace to BlackBerry MDS Studio
   Click File menu -> Import Existing… -> Browse -> select LengthConverter -> Finish

Tasks

Tip: To design the user interface in full screen mode, from the toolbar, click the Change Screen Editor Skin arrow. Select Fullscreen.

Final LengthConverter Interface

Remove the default region

1. In the Navigator pane, expand Screens.
2. Double-click scrMain.
3. In the Outline pane, click regionMain.
4. Press DELETE.

Create a new region to group the screen controls

1. In the Screen Editor pane, on the Screen Editor palette, click Region.
2. Place the region on the screen canvas.
3. In the Properties pane, in the Layout drop down list, click Grid.

Add labels to the region

1. In the Screen Editor, on the Screen Editor palette, click Label.
2. Place the Label in the region.
3. In the Properties pane, in the Caption property, click ....
4. In the edit field, type From:.
5. Click OK.
6. Add two more labels to the right of the previous label with the following captions:
   • To:
   • Value:

Add drop-down lists

1. On the Screen Editor palette, click Choice.
2. Place the choice control to the right of the From label.
3. Expand Enumerations.
4. Click LengthUnit.
5. Click Apply.
6. Click OK.
7. In the Properties pane, in the Appearance drop-down list, click dropdown.
8. To refresh the choice control, click the screen.
9. To the right of the To label, add another choice control.
10. Repeat steps 3 through 8.

Add a text box to enter the length value

1. To the right of the Value label, create an EditBox control.
2. In the Properties pane, in the Entry type drop-down list, click number.

Add a separator

• Under the region, create a Separator control.

Add a region

• Under the separator, create a Region control.

Add a response label

• In the region, create a label control with the Caption property set to Result.

Add a text box to display the converted length

1. To the right of the Result label, create an editBox control.
2. In the Properties pane, in the Entry Type drop-down list, click number.
3. In the Properties pane, in the Read Only drop-down list, click true.

Add a button

1. Under the region, create a button control.
2. In the Workflow Wizard, in the Button Caption field, type Convert.
3. Click Define later.
4. Click Finish.

Save the project

1. In the Navigator pane, click the LengthConverter project.
2. On the toolbar, click Save.

Additional Labs

Go to the next exercise in “Creating a Length Conversion Application Using the Bottom-up Approach”, Create Communication Between the User Interface and the Length Conversion Web Service.

Back to the Developer Lab Main Menu