advanced java application development for the blackberry smartphone

37
© 2009 Research In Motion Limited 41 Chapter 4: Advanced BlackBerry user interface development This chapter outlines the structure of the BlackBerry® smartphone UI, and describes how they work together. This chapter describes how you can customize Managers and Fields to create a dynamic and easy to use interface for the smartphone user, while taking into consideration their unique requirements. This chapter also describes how to create and use SVG to enhance the BlackBerry smartphone UI experience.

Upload: others

Post on 12-Sep-2021

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Advanced Java Application Development for the BlackBerry Smartphone
Page 2: Advanced Java Application Development for the BlackBerry Smartphone
Page 3: Advanced Java Application Development for the BlackBerry Smartphone

Advanced Java Application Development for the BlackBerry Smartphone

© 2009 Research In Motion Limited III

© 2009 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion®, SurePress™, SureType® and related trademarks, names and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countries around the world.

All other trademarks are the property of their respective owners.

The BlackBerry smartphone and other devices and/or associated software are protected by copyright, international treaties, and various patents, including one or more of the following U.S. patents: 6,278,442; 6,271,605; 6,219,694; 6,075,470; 6,073,318; D445,428; D433,460; D416,256. Other patents are registered or pending in the U.S. and in various countries around the world. Visit www.rim.com/patents for a list of RIM (as hereinafter defined) patents.

This documentation including all documentation incorporated by reference herein such as those provided or made available by hyperlink is provided or made accessible "AS IS" and "AS AVAILABLE" and without condition, endorsement, guarantee, representation or warranty of any kind by Research In Motion Limited and its affiliated companies ("RIM") and RIM assumes no responsibility for any typographical, technical, or other inaccuracies, errors or omissions in this documentation. In order to protect RIM proprietary and confidential information and/or trade secrets, this documentation may describe some aspects of RIM technology in generalized terms. RIM reserves the right to periodically change information that is contained in this documentation; however, RIM makes no commitment to provide any such changes, updates, enhancements, or other additions to this documentation to you in a timely manner or at all.

This documentation might contain references to third-party sources of information, hardware or software, products or services including components and content such as content protected by copyright and/or third-party web sites (collectively the "Third Party Products and Services" ). RIM does not control, and is not responsible for, any Third Party Products and Services including, without limitation the content, accuracy, copyright compliance, compatibility, performance, trustworthiness, legality, decency, links, or any other aspect of Third Party Products and Services. The inclusion of a reference to Third Party Products and Services in this documentation does not imply endorsement by RIM of the Third Party Products and Services or the third party in any way.

EXCEPT TO THE EXTENT SPECIFICALLY PROHIBITED BY APPLICABLE LAW IN YOUR JURISDICTION, ALL CONDITIONS, ENDORSEMENTS, GUARANTEES, REPRESENTATIONS, OR WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION, ANY CONDITIONS, ENDORSEMENTS, GUARANTEES, REPRESENTATIONS OR WARRANTIES OF DURABILITY, FITNESS FOR A PARTICULAR PURPOSE OR USE, MERCHANTABILITY, MERCHANTABLE QUALITY, NON-INFRINGEMENT, SATISFACTORY QUALITY, OR TITLE, OR ARISING FROM A STATUTE OR CUSTOM OR A COURSE OF DEALING OR USAGE OF TRADE, OR RELATED TO THE DOCUMENTATION OR ITS USE, OR PERFORMANCE OR NON-PERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICES REFERENCED HEREIN, ARE HEREBY EXCLUDED. YOU MAY ALSO HAVE OTHER RIGHTS THAT VARY BY STATE OR PROVINCE. SOME JURISDICTIONS MAY NOT ALLOW THE EXCLUSION OR LIMITATION OF IMPLIED WARRANTIES AND CONDITIONS. TO THE EXTENT PERMITTED BY LAW, ANY IMPLIED WARRANTIES OR CONDITIONS RELATING TO THE DOCUMENTATION TO THE EXTENT THEY CANNOT BE EXCLUDED AS SET OUT ABOVE, BUT CAN BE LIMITED, ARE HEREBY LIMITED TO NINETY (90) DAYS FROM THE DATE YOU FIRST ACQUIRED THE DOCUMENTATION OR THE ITEM THAT IS THE SUBJECT OF THE CLAIM.

TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, IN NO EVENT SHALL RIM BE LIABLE FOR ANY TYPE OF DAMAGES RELATED TO THIS DOCUMENTATION OR ITS USE, OR PERFORMANCE OR NON-PERFORMANCE OF ANY SOFTWARE, HARDWARE, SERVICE, OR ANY THIRD PARTY PRODUCTS AND SERVICES REFERENCED HEREIN INCLUDING WITHOUT LIMITATION ANY OF THE FOLLOWING DAMAGES: DIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, INDIRECT, SPECIAL,

PUNITIVE, OR AGGRAVATED DAMAGES, DAMAGES FOR LOSS OF PROFITS OR REVENUES, FAILURE TO

Page 4: Advanced Java Application Development for the BlackBerry Smartphone

Advanced Java Application Development for the BlackBerry Smartphone

IV © 2009 Research In Motion Limited

REALIZE ANY EXPECTED SAVINGS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, LOSS OF BUSINESS OPPORTUNITY, OR CORRUPTION OR LOSS OF DATA, FAILURES TO TRANSMIT OR RECEIVE ANY DATA, PROBLEMS ASSOCIATED WITH ANY APPLICATIONS USED IN CONJUNCTION WITH RIM PRODUCTS OR SERVICES, DOWNTIME COSTS, LOSS OF THE USE OF RIM PRODUCTS OR SERVICES OR ANY PORTION THEREOF OR OF ANY AIRTIME SERVICES, COST OF SUBSTITUTE GOODS, COSTS OF COVER, FACILITIES OR SERVICES, COST OF CAPITAL, OR OTHER SIMILAR PECUNIARY LOSSES,WHETHER OR NOT SUCH DAMAGES WERE FORESEEN OR UNFORESEEN, AND EVEN IF RIM HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW IN YOUR JURISDICTION, RIM SHALL HAVE NO OTHER OBLIGATION, DUTY, OR LIABILITY WHATSOEVER IN CONTRACT, TORT, OR OTHERWISE TO YOU INCLUDING ANY LIABILITY FOR NEGLIGENCE OR STRICT LIABILITY.

THE LIMITATIONS, EXCLUSIONS, AND DISCLAIMERS HEREIN SHALL APPLY: (A) IRRESPECTIVE OF THE NATURE OF THE CAUSE OF ACTION, DEMAND, OR ACTION BY YOU INCLUDING BUT NOT LIMITED TO BREACH OF CONTRACT, NEGLIGENCE, TORT, STRICT LIABILITY OR ANY OTHER LEGAL THEORY AND SHALL SURVIVE A FUNDAMENTAL BREACH OR BREACHES OR THE FAILURE OF THE ESSENTIAL PURPOSE OF THIS AGREEMENT OR OF ANY REMEDY CONTAINED HEREIN; AND (B) TO RIM AND ITS AFFILIATED COMPANIES, THEIR SUCCESSORS, ASSIGNS, AGENTS, SUPPLIERS (INCLUDING AIRTIME SERVICE PROVIDERS), AUTHORIZED RIM DISTRIBUTORS (ALSO INCLUDING AIRTIME SERVICE PROVIDERS) AND THEIR RESPECTIVE DIRECTORS, EMPLOYEES AND INDEPENDENT CONTRACTORS.

IN ADDITION TO THE LIMITATIONS AND EXCLUSIONS SET OUT ABOVE, IN NO EVENT SHALL ANY DIRECTOR, EMPLOYEE, AGENT, DISTRIBUTOR, SUPPLIER, INDEPENDENT CONTRACTOR OF RIM OR ANY AFFILIATES OF RIM HAVE ANY LIABILITY ARISING FROM OR RELATED TO THE DOCUMENTATION.

Prior to subscribing for, installing or using any Third Party Products and Services it is your responsibility to ensure that your airtime service provider has agreed to support all of their features. Some airtime service providers may not offer Internet browsing functionality with a subscription to BlackBerry® Internet Service. Check with your service provider for availability, roaming arrangements, service plans and features. Installation or use of Third Party Products and Services with RIM's products and services may require one or more patent, trademark, copyright or other licenses in order to avoid infringement or violation of third party rights. You are solely responsible for determining whether to use, Third Party Products and Services and if any third party licenses are required to do so. If required you are responsible for acquiring them. You should not install or use Third Party Products and Services until all necessary licenses have been acquired. Any Third Party Products and Services that are provided with RIM's products and services are provided as a convenience to you and are provided "AS IS" with no express or implied conditions, endorsements, guarantees, representations or warranties of any kind by RIM and RIM assumes no liability whatsoever, in relation thereto. Your use of Third Party Products and Services shall be governed by and subject to you agreeing to the terms of separate licenses and other agreements applicable thereto with third parties, except to the extent expressly covered by a license or other agreement with RIM.

Certain features outlined in this documentation require a minimum version of BlackBerry® Enterprise Server software, BlackBerry® Desktop Software, and/or BlackBerry® Device Software and may require additional development or Third Party Products and Services for access to corporate applications.

This product includes software developed by the Apache Software Foundation (http://www.apache.org/) and/or licensed pursuant to Apache License, Version 2.0 (http://www.apache.org/licenses/). For more information, see the NOTICE.txt file included with the software. Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and

limitations under the License.

Page 5: Advanced Java Application Development for the BlackBerry Smartphone

Advanced Java Application Development for the BlackBerry Smartphone

© 2009 Research In Motion Limited V

The terms of use of any RIM product or service are set out in a separate license or other agreement with RIM applicable thereto. NOTHING IN THIS DOCUMENTATION IS INTENDED TO SUPERSEDE ANY EXPRESS WRITTEN AGREEMENTS OR WARRANTIES PROVIDED BY RIM FOR PORTIONS OF ANY RIM PRODUCT OR SERVICE OTHER THAN THIS DOCUMENTATION.

Page 6: Advanced Java Application Development for the BlackBerry Smartphone

© 2009 Research In Motion Limited 41

Chapter 4: Advanced BlackBerry user interface development

This chapter outlines the structure of the BlackBerry® smartphone UI, and describes how they work together. This chapter describes how you can customize Managers and Fields to create a dynamic and easy to use interface for the smartphone user, while taking into consideration their unique requirements. This chapter also describes how to create and use SVG to enhance the BlackBerry smartphone UI experience.

Page 7: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

42 © 2009 Research In Motion Limited

4.8 Create a choice field

1. Construct a new ObjectChoiceField and supply a String label and an Object array as parameters.Hint: One of the required parameters has been defined for you in the CitySelectionScreen class. The other parameter is defined in the CityDetailsScreen class.

2. In the CitySelectionScreen constructor, complete the TODO step titled Create List.citiesChoiceField = new ObjectChoiceField(SELECT_CITY_STRING, CityDetailsScreen.cities);

In this exercise, you will create a choice field that allows a user to select cities. Complete exercises 4.1 through 4.6. You will need the Lab_02_UserInterface.zip.

Page 8: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 43

Notes

Page 9: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

44 © 2009 Research In Motion Limited

4.9 Create a screen

1. Initialize the three BasicEditFields with the following criteria:• The labels must be self-descriptive.

• The initial value must be null.

• The maximum number of characters must be 40.

• The style must be Field.READONLY.

2. In the CityDetailsScreen() constructor, complete the TODO step titled Create BasicEdit-Fields.

_popField = new BasicEditField("Population: ", null, 40.Field.READONLY);_stateField = new BasicEditField("State:", null, 40, Field.READONLY);_sightsField = new BasicEditField("Sights: ", null, 40,Field.READONLY);

3. Display the city name LabelField.

4. Add a separator field.Hint: Use the following ode to add the separator field:

add(new SeparatorField());

5. Add the three information fields.

6. In the CityDetailsScreen() constructor, complete the TODO step titled Add UI Fields.add(_cityNameField);

add(new SeparatorField())add(_popField);add(_stateField);add(_sightsField);

7. Implement the update() method. This method updates text in BasicEditFields based on the selected index in ObjectChoiceField.

In this exercise, you will create a Screen and add UI components to it.

Page 10: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 45

8. In the CityDetailsScreen() constructor, complete the TODO step titled Update Text.if (index < cities.length) {

_cityNameField.setText(cities[index]);_popField.setText(populations[index]);_stateField.setText(states[index]);_sightsField.setText(sights[index]);<br/>

}

Page 11: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

46 © 2009 Research In Motion Limited

Notes

Page 12: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 47

4.10Update and display the screen

1. Call a method on the ObjectChoiceField, which retrieves the selected index to pass to the CityDetailsScreen.update() method.

2. In the pushDetailsScreen() method of the CitySelectionScreen class, complete the TODO step titled Get Index.

int selectedIndex = _citiesChoiceField.getSelectedIndex();

The static method UiApplication.getUiApplication() returns the running UiApplication.

3. Call the correct method on the UiApplication instance to push the details screen on to the stack.

4. In the pushDetailsScreen() method of the CitySelectionScreen class, complete the TODO step titled Push Screen.

UiApplication.getUiApplication().pushScreen(_detailsScreen);

In this exercise, you will update and display the CityDetailsScreen.

Page 13: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

48 © 2009 Research In Motion Limited

Notes

Page 14: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 49

4.11Create a MenuItem

1. In the CitySelectionScreen class, complete the TODO step titled Create Menu Item.private MenuItem _viewItem = new MenuItem("View Details", 110, 10) {public void run() { pushDetailsScreen();}}

2. Add the menu item to the CitySelectionScreen. In the CitySelectionScreen() construc-tor, complete the TODO step titled Add Menu Item.

addMenuItem(_viewItem);

In this exercise, you will create a MenuItem subclass that displays a CityDetailsScreen. Create an anonymous inner class that extends MenuItem with the label View Details, an ordinal of 110, and a priority of 10. The run() method should invoke the pushDetailsScreen() method you implemented in exercise 4.4.

Page 15: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

50 © 2009 Research In Motion Limited

Notes

Page 16: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 51

4.12Add a FieldChangeListener

1. In the CitySelectionScreen() constructor, complete the TODO step titled Add Listener._citiesChoiceField.setChangeListener(this);

In this exercise, you will implement a FieldChangeListener to update the details when the user selects a city from the list. You have implemented the FieldChangeListener interface in the CitySelectionScreen class. Next, call a method on the ObjectChoiceField to identify the class as a change listener.

Page 17: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

52 © 2009 Research In Motion Limited

Notes

Page 18: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 53

4.13Build and run the user interface project

1. In the Package Explorer view, right click the Lab_02_UserInterface project.

2. Click Activate for BlackBerry. The project folder icon changes to indicate that the project is activated.

3. In the Package Explorer view, right click on the Lab_02_UserInterface project.

4. Click Run BlackBerry Simulator.

5. When the BlackBerry Smartphone Simulator home screen appears, click Menu to view all appli-cations and folders.

6. Use the arrow keys on your keyboard to navigate to the Downloads folder.

7. Enter the folder by pressing the Enter key on your keyboard.

8. Use the arrow keys on your keyboard to navigate to the generic application icon called User Interface Lab.

9. Press the Enter key on your keyboard to invoke the application.

In this exercise you will save your changes from exercises 4.1 through 4.5 and run the application on the BlackBerry Smartphone Simulator.

Page 19: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

54 © 2009 Research In Motion Limited

Notes

Page 20: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 55

4.14Create a border and background for a screen

1. Create a RichTextField and assign it a custom border and a custom background. Specify the field text as "Solid rounded border, solid background". In the DecorDemo-Screen constructor, complete the TODO step titled Create RichTextField.

simpleField = new RichTextField("Solid rounded border, solid background");

2. Use the appropriate static method in the BorderFactory class to create a rounded border for use with the RichTextField. Use the predefined "thickPadding"; XYEdges object for the first parameter, and then use a constant in the Border class representing the solid style for the second parameter. In the DecorDemoScreen constructor, complete the TODO step titled Create Rounded Border.

roundedBorder = BorderFactory.createRoundedBorder(thickPadding, Border.STYLE_SOLID);

3. Use the appropriate static method in the BackgroundFactory class to create a Background object. To set a color, pick a static field in the Color class. In the DecorDemo-Screen constructor, complete the TODO step titled Create Solid Background.

solidBackground = BackgroundFactory.createSolidBackground(Color.LIGHTSTEELBLUE);

4. Set the RichTextField border and background to the Border and Background objects we created in steps 4 and 5. In the DecorDemoScreen constructor, complete the TODO step titled Set Border and Background.

simpleField.setBorder(roundedBorder);simpleField.setBackground(solidBackground);

5. Now that the RichTextField is initialized, you can add it to the screen. In the DecorDemo-Screen constructor, complete the TODO step titled Add RichTextField.

dd(simpleField);

In this exercise, you will add a field with simple borders and backgrounds to the screen. Complete exercises 4.7 through 4.11. You will need the Lab_12_Decor.zip.

Page 21: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

56 © 2009 Research In Motion Limited

Notes

Page 22: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 57

4.15Create XY edges

1. Following the format of the already created XYEdges objects, create two XYEdges objects: one to represent horizontal-only padding and one for vertical-only padding. In the DecorDemo-Screen constructor, complete the TODO step titled Create Padding XYEdges.

verticalPadding = new XYEdges(10, 0, 10, 0); horizontalPadding = new XYEdges(0, 10, 0, 10);

2. XYEdges objects are also used to define border colours. You can assign a different colour to each edge of a border. Create an XYEdges object where each edge of the border is a different color. In the DecorDemoScreen constructor, complete the TODO step titled Create Colour XYEdges.

multiColours = new XYEdges(Color.BLUEVIOLET, Color.AZURE, Color.DARKRED, Color.KHAKI);

In this exercise, you will work with the XYEdges class.

YEdges objects have two purposes in this application. First, they are used to define how much padding is given for a border. The four int parameters of the XYEdges objects represent the amount of space between the box and border of a field for each side, clockwise from the top.

Page 23: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

58 © 2009 Research In Motion Limited

Notes

Page 24: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 59

4.16Create borders

1. In the DecorDemoScreen constructor, complete the TODO step titled Create Simple Border.dashedBorder = BorderFactory.createSimpleBorder(verticalPadding, blueColours, Border.STYLE_DASHED);

2. Bevel borders emulate the look of a 3-D border. Bevel borders require two sets of colors - one set for raised lines and the other for the shaded areas between them. Use the appropriate static method in the BorderFactory class to create a bevel border with thick padding, multicolour shading, and single-colour lines. In the DecorDemoScreen constructor, complete the TODO step titled Create Bevel Border.

bevelBorder = BorderFactory.createBevelBorder(thickPadding, multiColours, pinkColours);

In this exercise, you will explore some of the options available with the BorderFactory class.

You can manipulate both simple and rounded borders in various ways, depending on what parameters you use. Create a vertical, blue, and dashed border using the appropriate static method in the BorderFactory class. Use the XYEdges objects (defined in exercise 4.8) and static constants in the Border class as parameters.

Page 25: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

60 © 2009 Research In Motion Limited

Notes

Page 26: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 61

4.17Create backgrounds

1. In the DecorDemoScreen constructor, complete the TODO step titled Create Gradient Back-ground.

gradientBackground = BackgroundFactory.createLinearGradientBackground(Color.RED, Color.GREEN, Color.BLUE, Color.WHITE);

2. Included in this project is a bitmap file named Smiley. Use the appropriate static method in the BackgroundFactory class to create a bitmap background that uses the bitmap, repeating on both axes for tiling.Hint: Use a static method in net.rim.device.api.system.Bitmap to create a Bitmap object.

3. In the DecorDemoScreen constructor, complete the TODO step titled Create Bitmap Back-ground.

bitmapBackground = BackgroundFactory.createBitmapBackground(Bitmap.getBitmapResource("smiley.bmp",Background.POSITION_X_CENTER, Background.POSITION_Y_CENTER, Background.REPEAT_BOTH);

In this exercise, you will explore some of the options available with the BorderFactory class.

Use gradient backgrounds to create a gradient of four colors, with each color stronger in one corner. Use the appropriate static method in the BackgroundFactory class to create a gradient background with four different colors.

Page 27: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

62 © 2009 Research In Motion Limited

Notes

Page 28: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 63

4.18Build and run the borders and backgrounds project

1. In the Package Explorer view, right click the Lab_12_Decor project.

2. Click Activate for BlackBerry. The project folder icon changes to indicate that the project is activated.

3. In the Package Explorer view, right click on the Lab_12_Decor project.

4. Click Run BlackBerry Simulator.

5. When the BlackBerry Smartphone Simulator home screen appears, click Menu to view all appli-cations and folders.

6. Use the arrow keys on your keyboard to navigate to the Downloads folder.

7. Enter the folder by pressing the Enter key on your keyboard.

8. Use the arrow keys on your keyboard to navigate to the generic application icon called Decor Lab.

9. Press the Enter key on your keyboard to invoke the application.

In this exercise you will save your changes from exercises 4.7 through 4.10 and run the application on the BlackBerry Smartphone Simulator.

Page 29: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

64 © 2009 Research In Motion Limited

Notes

Page 30: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 65

4.19Create a custom UI component using managers

1. Download and double-click CustomUserInterfaces_Lab 4.12.zip.

2. Open custom_manager_incomplete.zip.

3. In the IDE, open the custom_manager.jdw workspace.

4. Open the DiagonalApp.java source file.

5. Open the DiagonalManager.java source file.

6. From the DiagonalManager, implement the getPreferredWidth and getPreferred-Height methods so that they define the size of the manager.

7. Fill in the loop of DiagonalManager sublayout method so that each controlled field is laid out and arranged.

8. Complete the DiagonalManager nextFocus method so that focus does not leave the manager.

In this exercise, you will learn how to implement an effective user interface for BlackBerry smartphones. This lab uses the built-in APIs as well as demonstrates how to extend existing interface elements to create a new, custom look and feel for your application.

In this exercise, you will create an application that uses a custom UI manager. This manager will lay out its fields on a diagonal and manipulate the natural focus order. In this exercise you will discover how to create a custom UI component and how UI managers control field layout and handle focus events.

Page 31: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

66 © 2009 Research In Motion Limited

Notes

Page 32: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 67

4.20Create an SVG animation

1. Install the sample application.

1. Download the sample application svganimatordemo_4.13.zip.

2. Double-click the svganimatordemo_4.13.zip file.

3. In Eclipse®, on the File menu, click Import.

4. In the Import dialog box, expand the BlackBerry folder.

5. Click Existing BlackBerry Projects into Workspace.

6. Click Next.

7. Click Browse.

8. In the Open dialog box, navigate to the folder where you extracted the sample application.

9. Click the SVGAnimatorDemo.jdp file.

10. Click Open.

11. Click Finish.

2. Run the sample application.

1. In Eclipse, in the Navigator window, right-click the HelloWorldDemo folder.

2. Click Activate for BlackBerry.

3. Right-click the HelloWorldDemo folder again.

4. Click Run As > BlackBerry Simulator.

5. On the Home screen of the BlackBerry® Smartphone Simulator, click the Downloads folder.

6. Click the Hello World Demo icon.

In this exercise you will learn how to display an animated SVG on the BlackBerry® smartphone. This exercise uses APIs implemented using the JSR 226 standard for interactive and animated 2-D graphics on the Java® ME platform.

This exercise contains an SVG file, which includes the definitions for three distinct animations: a bouncing ball, a running stick figure, and an orbiting solar system. The exercise allows you to change which of the three animations you want to display at any time and provides a play control for starting each animation.

Page 33: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

68 © 2009 Research In Motion Limited

3. The javax.microedition.m2g.SVGImage class represents an SVG image that conforms to the W3C® SVG Tiny 1.2 profile. Observe how the private method loadSVGimage() in the SVGScreen class demonstrates how to create an SVGImage object from a file.

4. The javax.microedition.m2g.SVGAnimator class provides methods that you can use to load an animation from an SVGImage object and to control the animation. Observe how the application uses the SVGAnimator to switch between the three distinct animations that are defined in the sample.svg file using the createAnimator() method.

5. Start the animation by clicking a button on the screen.

Page 34: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 69

Notes

Page 35: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

70 © 2009 Research In Motion Limited

4.21Create an SVG Map application

1. Load the SVG image from the sample.svg file.

2. An InputStream object has been created to access this file. Use the InputStream object to create an SVGImage by calling a method inherited from ScalableImage and casting the returned object to an SVGImage.

3. The method asks for an ExternalResourceHandler as a parameter. Use null instead of supplying an object for this parameter. In the SVGMapScreen constructor, complete the TODO step titled Load SVGImage.

_image = (SVGImage)SVGImage.createImage(is, null);

4. With an SVGImage, you can get the Document associated with this image to interact with the content. In the SVGMapScreen constructor, complete the TODO step titled Obtain Document.

_document = _image.getDocument();

5. The SVGAnimator renders updates and animations for the SVGImage Use a static method in the SVGAnimator class to associate this animator with the net.rim.device.api.ui.Field component. In the SVGMapScreen constructor, complete the TODO step titled Create Animator.

_animator = SVGAnimator.createAnimator(_image net.rim.device.api.ui.Field

In this exercise you will initialize the SVG variables needed to create the SVG Map application. Complete exercises 4.14 through 4.17. You will need Lab_18_SVG.zip.

Page 36: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 71

Notes

Page 37: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

72 © 2009 Research In Motion Limited

4.22Create SVG Elements and Fields

1. Retrieve the field that displays the SVG Map.

2. Use a method in SVGAnimator to get the proper component, and then cast the method to the Field type. In the initializeUI() method of the SVGMapScreen class, complete the TODO step titled Get SVG Field.

_svgField = (Field)_animator.getTargetComponent();

3. Add the SVG Field you retrieved in step 1 to the SVGMapManager. In the initializeUI() method of the SVGMapScreen class, complete the TODO step titled Add SVG Field.

_mapManager.add(_svgField);

4. Use the document variable to get the root SVGElement, and then cast the root SVGElement to the SVGSVGElement type. In the initializeUI() method of the SVGMapScreen class, complete the TODO step titled Get Root SVG Element.

_svg = (SVGSVGElement)_document.getDocumentElement();

5. Use the root element to get the view box. Use a method inherited from SVGElement to retrieve the viewBox SVGRect trait. In the initializeUI() method of the SVGMapScreen class, complete the TODO step titled Get View Box.

_svgViewBox = _svg.getRectTrait("viewBox");

6. You can use the viewport SVGElement for selection and panning purposes. Use the Document object to retrieve the SVGElement named viewport, Cast to the appropriate type. In the ini-tializeUI() method of the SVGMapScreen class, complete the TODO step titled Get ViewPort.

_viewportElement = ( SVGElement)_document.getElementById("viewport");

7. To facilitate panning, the viewport SVGElement needs an event listener. Add the SVGMap-Screen class as an eventListener to listen for the DOMActivate type. In the initial-izeUI() method of the SVGMapScreen class, complete the TODO step titled Add Event Listener.

_viewportElement = ( SVGElement)_document.getElementById("viewport");

8. Add the SVGMapScreen class as an eventListener to listen for the DOMActivate type. In the initializeUI() method of the SVGMapScreen class, complete the TODO step titled Add Event Listener.

_viewportElement.addEventListener("DOMActivate", this, false);

In this exercise you will create SVGElements and Fields.

Page 38: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 73

Notes

Page 39: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

74 © 2009 Research In Motion Limited

4.23Edit SVG traits

1. Select the map in the application.

2. Extend the size of the border to give a visual cue to the user that the field is activated for panning.

3. The EventListener implementation can handle the DOMActivate event for the view-portElement variable. If the map is ready for panning, change the stroke-width trait of the SVGElement to 12 (represented as a String) so that the border becomes thicker. In the han-dleEvent() method of the SVGMapScreen class, complete the TODO step titled Select Map.

_viewportElement.setTrait("stroke-width", "12");_viewportElement.setTrait

4. When the map is panned, update the location by updating the viewport SVGElements x and y float traits to their new positions. In the update() method of the SVGMapScreen class, complete the TODO step titled Update Positions.

_viewportElement.setFloatTrait("x", _positionX);_viewportElement.setFloatTrait("y", _positionY);

In this exercise you will edit SVG traits to change SVG elements.

Page 40: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 75

Notes

Page 41: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

76 © 2009 Research In Motion Limited

4.24Build and run the SVG project

1. In the Package Explorer view, right click the Lab_18_SVG project.

2. Click Activate for BlackBerry. The project folder icon changes to indicate that the project is activated.

3. In the Package Explorer view, right click on the Lab_18_SVG project.

4. Click Run BlackBerry Simulator.

5. When the BlackBerry Smartphone Simulator home screen appears, click Menu to view all appli-cations and folders.

6. Use the arrow keys on your keyboard to navigate to the Downloads folder.

7. Enter the folder by pressing the Enter key on your keyboard.

8. Use the arrow keys on your keyboard to navigate to the generic application icon called SVG Lab.

9. Press the Enter key on your keyboard to invoke the application.

In this exercise you will save your changes from exercises 4.14 through 4.16 and run the application on the BlackBerry Smartphone Simulator.

Page 42: Advanced Java Application Development for the BlackBerry Smartphone

Chapter 4: Advanced BlackBerry user interface development

© 2009 Research In Motion Limited 77

Notes