Form Layout Policy

The MIDP 2.0 Specification [19] provides rules for form layout. For example, it states that forms are organized in rows, and that each row is the same width, generally the width of the screen. (Forms are not expected to scroll horizontally. Devices are typically vertically oriented, and horizontal scrolling can be more confusing to users of small devices. However, horizontal scrolling is not prohibited.) Working within the rules of the MIDP 2.0 Specification, MIDP implementors control the layout of forms on their devices. It is possible that different devices will lay out forms differently. Factors that affect form layout include the placement of item labels, the sizes of the items, the layout directives requested by the app, and so on. app developers use sizes, layout directives, and new lines to control the layout of the items on a form.

MIDP Implementors

Recommend: Java graphics bulb2_icon.gif Have a consistent, predictable layout policy that conforms to the MIDP 2.0 Specification, and publish the policy for developers.

Label Sizes

MIDP implementors decide how much space to give a label on their device. For example, some might decide that a label can be at most two lines long. Some might restrict a label to a single line. If a label is too long for a device, the MIDP implementor might have to clip the label.

MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gif Determine and publish the maximum size label your forms can accommodate.

Strongly Recommend: Java graphics bulb1_icon.gif Coordinate label size with the minimum and default preferred sizes of your form items. In some cases, label size is included in the size of the item. See "Item Sizes" on page 76 for more information.

Strongly Recommend: Java graphics bulb1_icon.gif If you must clip labels due to device or maximum size restrictions, indicate to the user that the label has been shortened. A common way to indicate clipping is by using an ellipsis.

Recommend: Java graphics bulb2_icon.gif If you allow multiline labels, wrap text on word boundaries, wrap words longer than one line on character boundaries, and honor white space.

Text is most readable if it breaks on word boundaries. For example, users find titles such as the one in Screenshot, which do not wrap on word boundaries, much harder to read. app developers can use white space to improve readability; apps will be more usable if the device honors this white space.

Screenshot Not Recommended: Label Does Not Wrap on Word Boundaries

Java graphics 07fig03.gif


Label Visibility

It should be easy for users to associate a label with its item, because labels can act as prompts or headings for their items. For the same reason, it should be easy for a user to distinguish an item's label from its content.

MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gif Keep a label near its component, either in the same row as the item or directly above it.

Strongly Recommend: Java graphics bulb1_icon.gif Coordinate the placement of the item label with the language of the device. For example, if your device can use a language that reads right to left or a language that reads left to right, position the label to accommodate the language the device is using.

Recommend: Java graphics bulb2_icon.gif Keep an item's label visible when its item is visible, even when you are scrolling the screen. (See "Scrolling" on page 84 for more information.)

Strongly Recommend: Java graphics bulb1_icon.gif Differentiate a label from its item by using techniques, such as putting the label on a line by itself; ending the label with a special character, such as a colon (:); or using a different font for the label.

Screenshot shows a MIDP implementation that starts each label on a new line, places it flush left, just above its item's content, and uses a bold font.

Screenshot Differentiating Labels and Their Items on a Mobile Phone

Java graphics 07fig04.gif


Item Sizes

Items have a minimum size, a preferred size, and a maximum size. The MIDP implementor sets the minimum and maximum sizes. The preferred size (height, width, or both) can be set by the app developer. An item's size refers only to the space that is significant to laying out the form. For example, if the MIDP implementation places item labels in a margin area reserved exclusively for labels, the space occupied by the label would not be considered part of the item's size. However, if item labels do not have a dedicated area, and other items have to move (in order to make room for the labels), then the space occupied by the labels is counted as part of the item's size.

MIDP Implementors

Recommend: Java graphics bulb2_icon.gif Determine whether the label will be included in the item's size, and publish your decision for developers.

Strongly Recommend: Java graphics bulb1_icon.gif Publish your minimum and maximum sizes for developers. You should also have a default preferred size that is known to developers.

The minimum size of a form item is the smallest size at which it can function and display its contents (though perhaps not optimally) on your device.

Recommend: Java graphics bulb2_icon.gif When you determine the minimum size of an item, consider issues such as choice-group elements, which must display some of their text to be usable.

Strongly Recommend: Java graphics bulb1_icon.gif Ensure that form items are usable at your minimum sizes.

The maximum size is the largest size that the device allows. The maximum width is typically based on the available screen width, fonts being used, and so on.

Java graphics bulb2_icon.gif Recommend: Determine the maximum height of an item based on the display height and the nature of the item. For example, a choice group that is longer than one screen will probably still be usable, but the same is not true for a gauge.

The preferred size is the smallest size at which no information is clipped and text wrapping (if any) is kept to a tolerable minimum. When an app sets a preferred height or width, it is called locking that value.

app Developers

Strongly Recommend: Java graphics bulb1_icon.gif If you want an item to have a particular size, set its preferred size. The MIDP implementation will use your preferred size instead of its preferred or minimum size if possible. For example, if you do not want a picture to be clipped on the left or right, you could set the preferred width of the graphic item to the width of the image.

Recommend: Java graphics bulb2_icon.gif Allow the device to set the preferred height and width of items containing text, since you cannot know exactly what fonts it will be using.

MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gif If an app locks both the preferred width and height, truncate or pad the item as necessary to honor the request. If you cannot honor the request because of device restrictions, you may disregard the requested value and instead use your minimum or maximum value. If the locked size is smaller than your minimum size, use your minimum; if the locked size is larger than your maximum size, use your maximum.

Strongly Recommend: Java graphics bulb1_icon.gif For items containing text, wrap the text to the specified width, and, if you must clip, do so only at the end of the text. (As with other text, if you must clip, give users a visual indication, such as an ellipsis.)

Item Padding

In addition to the size of an item, a MIDP implementation must account for item padding when it lays out a form. Items are typically padded so that there is some vertical and horizontal space between them. It not only makes the display easier to read, but also provides room for any traversal highlight. (See "Traversal and Selection Highlighting" on page 85 for more information.) When present, the padding is used for all items, independent of whether an item is displayed using its minimum or its preferred size.

MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gif Determine the amount of padding that you will use. Ensure that the additional space is enough to accommodate traversal highlighting, if your device uses it.

Layout Directives

Layout directives are constants that inform the MIDP implementation about the way the app developer wants the item to be placed in the form. The LAYOUT_DEFAULT directive gives the MIDP implementation permission to lay out the item in whatever way is likely to be best for the device.

app Developers

Java graphics bulb2_icon.gif Recommend: Use the LAYOUT_DEFAULT directive if you do not have any requirements for the way the form should be presented to the user.

The LAYOUT_2 directive has the MIDP implementation use the layout rules specified in the MIDP 2.0 Specification [19]. If this directive is not present, the MIDP implementation uses the layout rules specified in the MIDP 1.0 Specification [19]. The directive affects the handling of string and image items, as well as the placement of interactive items. The MIDP 1.0 Specification requires string and image items that have labels to start a new row, while the MIDP 2.0 Specification does not. Similarly, the MIDP 1.0 Specification requires that an interactive item (such as a text field or an interactive gauge) start a new row, but this is not required by the MIDP 2.0 Specification. The LAYOUT_2 directive, therefore, can allow forms to be packed more tightly because string, image, and interactive items with the directive are permitted to share rows with other items.

Consider: If you want a string with a label, an image item with a label, or an interactive item to be on its own row, do not provide the LAYOUT_2 directive. On the other hand, if the item could share a row with surrounding items and still be understandable, use the LAYOUT_2 directive.

Consider: Many MIDP devices have relatively narrow screens. Even if you specify the LAYOUT_2 directive, the items may be on separate lines.

MIDP Implementors

Consider: An item with a LAYOUT_2 directive is permitted to share a row with other items, but it is not required to. Lay out the form in a way that is consistent with the native apps on your device.

The directives LAYOUT_SHRINK, LAYOUT_VSHRINK, LAYOUT_EXPAND, and LAYOUT_VEXPAND interact with item sizes. They inform the MIDP implementation that it can shrink or expand the item, as necessary, to lay out the form.

app Developers

Consider: Use the LAYOUT_SHRINK and LAYOUT_VSHRINK directives if the MIDP implementation can decrease the item to its minimum width or height, respectively. For example, if you put a text field with a PASSWORD modifier on a form, you might not mind if it were shown at its minimum size: the contents of the item would be obscured anyway.

Consider: Use the LAYOUT_EXPAND, and LAYOUT_VEXPAND directives if the MIDP implementation can increase the item's width or height, respectively, to fill the available space. For example, if the most important item on your form is a gauge, you might not mind if its size were increased. The larger size would just help to capture the user's attention.

Other layout directives affect how an item is placed in its row. The directives LAYOUT_LEFT, LAYOUT_RIGHT, and LAYOUT_CENTER affect horizontal placement. The directives that affect vertical placement of an item are LAYOUT_TOP, LAYOUT_BOTTOM, and LAYOUT_VCENTER.

Strongly Recommend: Java graphics bulb1_icon.gif Do not use more than one horizontal placement directive and one vertical placement directive for each item. The directives that affect horizontal placement are mutually exclusive, as are the directives that affect vertical placement.

MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gifYou can put items with different vertical placement directives on the same row. For example, one item can be aligned with the top of the row while another item in the row can be aligned with the bottom. You cannot put items with different horizontal placement directives on the same row, however. If two items have different horizontal placement directives, you must start a new row for the second item, even if it would fit on the previous line.

Screenshot shows forms with different vertical placement directives (the items are on the same line) and different horizontal placement directives (the items are on different lines).

Screenshot Vertical and Horizontal Placement Directives in a Form

Java graphics 07fig05.gif


Still other directives determine whether an item will start or end a row. The directive LAYOUT_NEWLINE_BEFORE ensures that an item will start a new row, while the directive LAYOUT_NEWLINE_AFTER ensures that an item will end a row. These directives cause only one row break, however. That is, if an item with a LAYOUT_NEWLINE_AFTER directive is followed by an item with a LAYOUT_NEWLINE_BEFORE directive, there will be only one row break.

New Lines in String Items

A string item can contain newline characters (\n) to request a new line. A MIDP implementation must provide one new row for each newline character in the string.

app Developers

Recommend: Java graphics bulb1_icon.gifIf you want multiple row breaks in a form (that is, if you want empty rows), put multiple \n characters sequentially in string items instead of using layout directives. Screenshot shows a form with the string item, "The first row\n\nThe third row."

Screenshot Effect of Multiple New Lines in a String Item

Java graphics 07fig06.gif


MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gif When you create empty rows because an app has used multiple sequential newline characters, make the height of each empty row the height of a line of text in the current font.

Screenshot


   
Comments