Ericsson R380 - Manuals

4 GENERAL USABILITY ASPECTS When it comes to designing any kind of electronic service, simplicity is the key to gainingacceptance and appreciation from users. Simplicity is even more important in a mobileenvironment since the user often needs to concentrate on other things as well as using thetermin...

5 USER INTERFACE ISSUES The Browser Display The Ericsson R380 display is a grey scale black and white touchscreen with a resolution of360x120 pixels with 0.23 pitch. This means an active screen size of almost 83x28mm. The browser display has three sections: the Browser Area, the Card Title bar at th...

6 Toolbar The Toolbar is an area containing buttons required by the browser. The On-screen Keyboard Text input is done with on-screen keyboards or a character recognition screen. Three differentkeyboard layouts are available: an alpha layout, a numeric layout and a layout with nationalcharacters. To...

7 DESIGN COMPONENTS This chapter gives an overview of the graphical user interface components and a description oftheir corresponding WML elements. These items are then used when designing WAP services. The “Look and Feel” of the components is described and guidelines are made on componentusage. The...

8 A text formatting example <wml> <card id="first" title="Pizza Penguin" newcontext="true"> <p align="center"> <br/> <b><big><a href="#second">Welcome</a></big></b><br/> to<br/> The Mobile...

9 Paragraphs Text on a WML card comprises one or more paragraphs. A paragraph always starts on a new line and is preceded by an extra line space of 3 pixels. Text within a paragraph is by default displayed left aligned. However, it can optionally bedisplayed right aligned or centered. WML Paragraphs...

10 Indented Paragraphs Related text and other components can be grouped together to increase usability. Such groupscan be nested. Each group is indented 20 additional pixels and preceded by an extra line space of 3 pixels. A header in bold font can optionally precede a group. In such a case a so-cal...

11 The Card Title Bar See Card Title Bar on page 5. WML The title in the Card Title bar is defined by using the title attribute in the card element. Using Select Lists A select list is an input component that specifies a list of options for the user to choose from.Single and multiple choice lists ar...

12 The option element Text in the option element content is used in the drop-down list. The title attribute is not supported. An example of a single choice list <p> <b>Select Pizza</b> <select> <option>Cappriciosa</option> <option>Quatro Staggioni</option...

13 The select element Attribute Description multiple The multiple attribute can take the following values: Yes and No . The default value is No . To create a multiple choice list, this attribute is set to Yes . The option element Text in the option element content is displayed to the right of the ch...

14 WML Buttons are defined by using the do element. Pressing the button invokes the action defined in the do element. The R380 supports the following attributes: Attribute Description label The value of the label attribute is used as text on the button. The text is not truncated. type If no label is...

15 Touching the screen anywhere in an input field makes the keyboard, or character recognitionscreen, appear (see The On-screen Keyboard above). WML Input fields are defined by using the input element. The following attributes are supported: Attribute Description type The type attribute can take the...

17 An image example <p align="center"> <img alt="baker"src="baker.gif" vspace="5" width="40" height="30"/><br/> <b>The oven is turned on, and your pizza will be delivered just in time.</b><br/> </p> Using Hyper...

18 Using Images as Hyperlinks An image can also serve as a link. By default, there are no differences in image layout if theimage serves as a link or not. However, the R380 browser can be set to show image links with aframe of 1 black and 1 white pixel. This affects the card layout. WML An image hyp...

19 In addition to text and images, tables can also contain hyperlinks and images used as hyperlinks. WML The table element is used together with tr and td to create a set of aligned columns of text and images. The tr element is used as a container to hold a single table row. The td element is used a...

21 THE PIZZA PENGUIN EXAMPLE Below is a complete WML code listing from a WAP demonstration application. The examplesin the previous chapters were mainly selected from this application. <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www....