balckberry component ui java developpement
DESCRIPTION
Blackberry UI component developpement,sizing layout,drawing customable fieldsTRANSCRIPT
![Page 1: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/1.jpg)
Creating Compelling User Interfaces for Mobile Devices
Terrill DentSoftware Developer, Research In Motion
February 16, 2010
![Page 2: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/2.jpg)
Web
Code
Design
![Page 3: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/3.jpg)
Give you
tools to createwonderful things
![Page 4: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/4.jpg)
![Page 5: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/5.jpg)
Schedule
• Design Principles
• Sample Interface Library
• Master the Layout Engine
![Page 6: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/6.jpg)
Design Principles
• Repetition
• Contrast
• Info Density
• Dominance
• Whitespace
• Unity
![Page 7: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/7.jpg)
Repetition
![Page 8: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/8.jpg)
Repetition
![Page 9: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/9.jpg)
Contrast
![Page 10: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/10.jpg)
Contrast
![Page 11: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/11.jpg)
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)
![Page 12: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/12.jpg)
Information Density
* From Tufte’s “Visual Confections” 1997
Tufte example
82% of screen is administrativedebris
53 Characters
Real books havethousands of characters
![Page 13: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/13.jpg)
Case Study 1 – Options
Very dense screen
Can we apply some design principles without compromising information density?
![Page 14: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/14.jpg)
Case Study 1 – Options – Whitespace
Text touches screen edges
Padding lets the eye identify letterforms
![Page 15: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/15.jpg)
All elements look equally important
Case Study 1 – Options – Dominance
Chevrons denote importance and hierarchy
![Page 16: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/16.jpg)
One set of Options
Case Study 1 – Options – Unity
Highlights option groups further (at a cost)
![Page 17: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/17.jpg)
Case Study 2 – Facebook Header
The toolbar that appears on top of the Facebook® app
![Page 18: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/18.jpg)
Case Study 2 – Facebook toolbar
![Page 19: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/19.jpg)
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
![Page 20: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/20.jpg)
Case Study 2 – Facebook toolbar
![Page 21: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/21.jpg)
Case Study 2 – Facebook toolbar
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
![Page 22: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/22.jpg)
Schedule
• Design Principles
• Sample Interface Controls
• Master the Layout Engine
![Page 23: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/23.jpg)
Core Fields
ButtonField
ChoiceField
RadioButton
Checkbox
BitmapField
List and TextFields
GaugeField
![Page 24: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/24.jpg)
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
![Page 25: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/25.jpg)
ListStyleButtonField
Creating lists can be painful when you have a small fixed number of elements.
![Page 26: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/26.jpg)
BitmapGaugeField
The core GaugeField is plain. There are times when more rich presentation is called for.
![Page 27: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/27.jpg)
SliderField
Similar to the BitmapGaugeField, but with a thumb that can be dragged to adjust a setting.
![Page 28: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/28.jpg)
SwitchField
The SwitchField and LabeledSwitch offer an alternative to checkboxes. They also provide larger touch targets.
![Page 29: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/29.jpg)
Schedule
• Design Principles
• Sample Interface Library
• Master the Layout Engine
![Page 30: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/30.jpg)
Slide Title
The best layout for your app
is the one that makes the most sense for your content
![Page 31: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/31.jpg)
Slide Title
![Page 32: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/32.jpg)
The two keys to successful layout
1) Padding and Margins2) A good set of Managers
![Page 33: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/33.jpg)
The Box Model
The Box Model acts much like HTML
![Page 34: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/34.jpg)
Padding and Margin
Balance information density and whitespace. Too much or too little can both have negative consequences
![Page 35: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/35.jpg)
Padding and Margin
• Which control doesthe hint text belong to?
• Spatial proximitybetween elements cancreate logical groups orunfortunate think points
![Page 36: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/36.jpg)
Slide Title
Storm: 360x480
Curve / Tour / Bold / Storm: 480x360
Bold: 480x320
Flip: 240x320
Curve / 8800: 320x240
Pearl: 240x260
High Resolution Low Resolution
![Page 37: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/37.jpg)
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
}
![Page 38: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/38.jpg)
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
![Page 39: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/39.jpg)
Slide Title
The two keys to successful layout
1) Padding and Margins2) A good set of Managers
![Page 40: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/40.jpg)
Core Managers
VerticalFieldManagerRespects Horizontal style bits
HorizontalFieldManagerRespects Vertical style bits
FlowFieldManager
![Page 41: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/41.jpg)
Slide Title
VerticalFieldManager
![Page 42: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/42.jpg)
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
![Page 43: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/43.jpg)
VFM Negative Margins
VerticalFieldManager does not support negative margins.
So advanced borders like speech bubbles take up a lot of vertical space.
![Page 44: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/44.jpg)
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.
![Page 45: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/45.jpg)
Slide Title
HorizontalFieldManager
![Page 46: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/46.jpg)
Positioning - Horizontal
What happens when you put two thingsin a HFM and the first one uses USE_ALL_WIDTH?
Search1 2
![Page 47: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/47.jpg)
Positioning - Horizontal
JustifiedHorizontalFieldManager lets you specify which field gets first choice at space.
Search2 1
![Page 48: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/48.jpg)
Positioning - Vertical
Similarly for vertical alignment, the JustifiedVFM lets you specify which section is layed out first.
Useful for IM style screens
2
1
![Page 49: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/49.jpg)
Alignment
![Page 50: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/50.jpg)
Core Managers
VerticalFieldManagerRespects Horizontal style bits
HorizontalFieldManagerRespects Vertical style bits
FlowFieldManager
![Page 51: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/51.jpg)
Alignment
Centering both vertically and horizontally can be a challenge.
AlignmentStyleBit-FieldManager is a new manager that supports all style bits.
![Page 52: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/52.jpg)
Alignment
Useful for:• Login screens• Splash pages• Immersive screens
Child node with FIELD_HCENTER & FIELD_VCENTER
Child node with FIELD_HCENTER & FIELD_VCENTER
![Page 53: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/53.jpg)
Field Sets
![Page 54: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/54.jpg)
ListStyleButtonField Sets
![Page 55: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/55.jpg)
Vertical Button Sets
Default Behaviour Desired Behaviour
![Page 56: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/56.jpg)
ButtonField Sets
Solution: Custom Button Managers
![Page 57: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/57.jpg)
Horizontal ButtonField Sets
![Page 58: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/58.jpg)
Horizontal ButtonField Sets
Large touch targetsNicely aligned grids
![Page 59: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/59.jpg)
Toolbars
![Page 60: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/60.jpg)
Toolbars
EquallySpacedHorizontalFieldManager
JustifiedEquallySpacedHorizontalFieldManager
![Page 61: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/61.jpg)
Toolbars
JustifiedEquallySpacedHorizontalFieldManager
EquallySpacedHorizontalFieldManager
![Page 62: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/62.jpg)
PillButtonSet
![Page 63: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/63.jpg)
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?
![Page 64: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/64.jpg)
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()
![Page 65: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/65.jpg)
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 );
}}
![Page 66: Balckberry component UI java developpement](https://reader033.vdocuments.us/reader033/viewer/2022052605/568c4c9b1a28ab4916a0d22e/html5/thumbnails/66.jpg)