Balckberry component UI java developpement

Creating Compelling User Interfaces for Mobile Devices

Terrill DentSoftware Developer, Research In Motion

February 16, 2010

Web

Code

Design

Give you

tools to createwonderful things

Schedule

• Design Principles

• Sample Interface Library

• Master the Layout Engine

Design Principles

• Repetition

• Contrast

• Info Density

• Dominance

• Whitespace

• Unity

Repetition

Contrast

Contrast Tips

• Minimum 50% contrast between foreground text andbackground color

• Use gradients behind text sparingly

• Less important text has less contrast

• Separators should not compete with content

• Changing one attribute of text is enough to showhierarchy (no need to bold, underline, and italic)

Information Density

* From Tufte’s “Visual Confections” 1997

Tufte example

82% of screen is administrativedebris

53 Characters

Real books havethousands of characters

Case Study 1 – Options

Very dense screen

Can we apply some design principles without compromising information density?

Case Study 1 – Options – Whitespace

Text touches screen edges

Padding lets the eye identify letterforms

All elements look equally important

Case Study 1 – Options – Dominance

Chevrons denote importance and hierarchy

One set of Options

Case Study 1 – Options – Unity

Highlights option groups further (at a cost)

Case Study 2 – Facebook Header

The toolbar that appears on top of the Facebook® app

Case Study 2 – Facebook toolbar


Gradient is dramatic, and decreases effective space around letters

Bold font competes for attention. Titlebars are generally background noise

No separator betweenthe toolbar and contentbelow

Faux button bordertouches side of icon


Solid background is fast to draw, and doesn’t interfere with toolbar shape

1px bevels give the toolbar depth

Border does not touchicons, aiding shape identification

Plain font is readable, and stroke width matches the surroundings

Schedule


• Sample Interface Controls


Core Fields

ButtonField

ChoiceField

RadioButton

Checkbox

BitmapField

List and TextFields

GaugeField

Creating Custom Button Fields

Normal

Focus

Active

Disabled

Disabled Focused

BaseButtonField is an abstract class you can extend to create full featured button fields with all five states.

Plus three example implementations:

• BitmapButtonField

• HyperlinkButtonField

• EmbossedButtonField

ListStyleButtonField

Creating lists can be painful when you have a small fixed number of elements.

BitmapGaugeField

The core GaugeField is plain. There are times when more rich presentation is called for.

SliderField

Similar to the BitmapGaugeField, but with a thumb that can be dragged to adjust a setting.

SwitchField

The SwitchField and LabeledSwitch offer an alternative to checkboxes. They also provide larger touch targets.

Schedule


• Sample Interface Library


Slide Title

The best layout for your app

is the one that makes the most sense for your content

Slide Title

The two keys to successful layout

1) Padding and Margins2) A good set of Managers

The Box Model

The Box Model acts much like HTML

Padding and Margin

Balance information density and whitespace. Too much or too little can both have negative consequences

Padding and Margin

• Which control doesthe hint text belong to?

• Spatial proximitybetween elements cancreate logical groups orunfortunate think points

Slide Title

Storm: 360x480

Curve / Tour / Bold / Storm: 480x360

Bold: 480x320

Flip: 240x320

Curve / 8800: 320x240

Pearl: 240x260

High Resolution Low Resolution

Determining Resolution

boolean lowRes = Display.getWidth() <= 320;

if( lowRes ) {// Pearl, Flip, Curve, 8800

} else {// Bold, Tour, Curve 2, Storm

}

boolean lowRes = Display.getWidth() <= 320;

if( lowRes ) {// Pearl, Flip, Curve, 8800

} else {// Bold, Tour, Curve 2, Storm

}

Padding and Margin

Similarly for Margins

The best way to separate contentfrom the elements around it.Don’t use spacer fields!

Field.setPadding( top, right, bottom, left );

Field.getPaddingTop();Field.getPaddingRight();Field.getPaddingBottom();Field.getPaddingLeft();

Field.setPadding( top, right, bottom, left );

Field.getPaddingTop();Field.getPaddingRight();Field.getPaddingBottom();Field.getPaddingLeft();

4.2+Codelines

4.2+Codelines

Slide Title

The two keys to successful layout

1) Padding and Margins2) A good set of Managers

Core Managers

VerticalFieldManagerRespects Horizontal style bits

HorizontalFieldManagerRespects Vertical style bits

FlowFieldManager

Slide Title

VerticalFieldManager

VFM Box Model Bug

VerticalFieldManager hasa long standing bug with padding. If the child node consumes all width it canbe pushed off the edge ofthe screen.

Results in extra nestingor margins on every child

VFM Negative Margins

VerticalFieldManager does not support negative margins.

So advanced borders like speech bubbles take up a lot of vertical space.

New VFM!

Sample VFM implements negative margins, fixes thebox model bug, and workson old code lines.

A new HFM is also included, which supports negative margins.

Slide Title

HorizontalFieldManager

Positioning - Horizontal

What happens when you put two thingsin a HFM and the first one uses USE_ALL_WIDTH?

Search1 2

Positioning - Horizontal

JustifiedHorizontalFieldManager lets you specify which field gets first choice at space.

Search2 1

Positioning - Vertical

Similarly for vertical alignment, the JustifiedVFM lets you specify which section is layed out first.

Useful for IM style screens

2

1

Alignment

Core Managers

VerticalFieldManagerRespects Horizontal style bits

HorizontalFieldManagerRespects Vertical style bits

FlowFieldManager

Alignment

Centering both vertically and horizontally can be a challenge.

AlignmentStyleBit-FieldManager is a new manager that supports all style bits.

Alignment

Useful for:• Login screens• Splash pages• Immersive screens

Child node with FIELD_HCENTER & FIELD_VCENTER

Child node with FIELD_HCENTER & FIELD_VCENTER

Field Sets

ListStyleButtonField Sets

Vertical Button Sets

Default Behaviour Desired Behaviour

ButtonField Sets

Solution: Custom Button Managers

Horizontal ButtonField Sets

Horizontal ButtonField Sets

Large touch targetsNicely aligned grids

Toolbars

Toolbars

EquallySpacedHorizontalFieldManager

JustifiedEquallySpacedHorizontalFieldManager

Toolbars

JustifiedEquallySpacedHorizontalFieldManager

EquallySpacedHorizontalFieldManager

PillButtonSet

Supplemental Material

• Titlebar: Using the stock titlebar; pass in a Field and add your own padding

• Borders and Backgrounds aren’t available pre 4.6 – what can we do?

• Foreground color and text colour– it’s easy change the background color, what about the foreground?

Borders and Backgrounds pre 4.6

Apply padding to the field or manager and draw inside the padding area using the paintBackground() function.

Graphics.fillRoundRect()Graphics.drawRoundRect()

Graphics.tileRop()

Foreground Color

public void paint( Graphics g ){

int oldColor = g.getColor();try {

g.setColor( 0xFF0000 ); //redsuper.paint( g );

} finally {g.setColor( oldColor );

}}

public void paint( Graphics g ){

int oldColor = g.getColor();try {

g.setColor( 0xFF0000 ); //redsuper.paint( g );

} finally {g.setColor( oldColor );

}}

Balckberry component UI java developpement

Documents

Transcript of Balckberry component UI java developpement