Mastering Java Layouts:Fields, Managers, and ScreensMichael BrownDEV345February 2012
About Me Technical Manager, Applied Innovation Started at Research In Motion® (RIM®) in 1995 as a  student, and never le...
First Things First! The BlackBerry® 7 Platform is extremely powerful     Writing attractive apps for BlackBerry® require...
The Box ModelUnderstanding the basics
Content          5
Content                        BorderBorder: Outline around Content                                          6
Content                             PaddingPadding: Space between Content and Border                                      ...
Margin                ContentMargin: Space outside Border (between this Field and others)
Margin              Border    Padding         Content
MarginsField 1     overlap  Field 2
MarginsField 1     overlap  Field 2
Padding            does notField 1      overlap  Field 2
Bitmap Border The Bitmap Border divides a small image into 9 parts If applied to a Field with no Background, the middle ...
Bitmap Border                BorderFactory.createBitmapBorder(                    new XYEdges(top, right, bottom, left),  ...
Bitmap Border                     BorderFactory.createBitmapBorder(                         new XYEdges(10, 8, 8, 8),     ...
Bitmap Border Bitmap Borders can create a variety of different effects                                                   ...
Bitmap Border With a little imagination, they  can become almost magical! Here an “H” shaped image  will ultimately crea...
18
Custom Fields and Managers There are several Fields and Managers in the core  BlackBerry UI packages     Often they do “...
Custom Field: Slider
Fields only care about content! Writing a custom field consists of only two tasks  1. Layout     Implement layout() to s...
What is a Slider? A cursor that slides along a track A finite number of “notches” that the ball can occupy Different vi...
Pieces of a Slider      Progress         Base        Thumb
Pieces of a Slider      Progress       • Condense the graphics,                       leaving enough content in         Ba...
Slider Layout                We’re given the dimensions                  of the available space                layout( int...
Slider Layout           We want to use all available width
Slider Layout            We want to use the max height of         The Thumb, the Progress, and the Base
Slider Layout Be careful not to use more width/height than we are given    protected void layout( int width, int height )...
Slider Paint Calculate the position of the Thumb from the current  Slider value     Graphics.drawBitmap()               G...
Slider Paintpublic void paint( Graphics g ){    // Draw the left cap, and tile the progress region    g.drawBitmap( . . . ...
Slider
A few notes about Painting
(0,0) The origin for   Border.draw()                               Margin                          Border                 ...
(0,0) The origin for                          Border.draw()                                                      Margin   ...
(0,0) The origin for                               Border.draw()                                                          ...
Field Optimizations Happens Once    Constructor                     Cache bitmaps, strings, and other static content   Fie...
A few notes about Layout
Typical Layout Depth First Traversal • Screen    Starts at the Screen  level,      • Main Manager      descends to the l...
Typical Layout A Manager lays out its                 Field 1 • Screen   children using the      • Main Manager          ...
MainScreen Layout MainScreen is a manager     Banner • Screen5 sections   with       • Main Manager           Title  1.  ...
MainScreen The order of layout is                1. Banner • Screen   important!      • Main Manager                     ...
Managers only care about space! Writing a custom Manager consists of only two tasks     Both are performed by the sublay...
Typical Manager layout Determine how much space the child can use Call layoutChild(), passing in the maximum size     l...
Custom Manager: Two Column Layout
Basic Strategy1. Layout the “left half” of each row2. Figure out how wide to make the left column based on   the size each...
Before
Layout the Left Fields         Widest Left Field
Layout Everything
After
Two Columns: The Result
Form Factorshow to deal with the explosion
BlackBerry Screen Sizes                          52
Truly Dynamic Layouts Layouts that depend on absolute positioning are a  nightmare to maintain across so many form factor...
Determining Screen Familyint width = Display.getWidth();int height = Display.getHeight();if( width <= 320 ) {    // Low Re...
Determining Screen Family This can help you select assets and pixel values  “dynamically” without a lot of math     Shou...
Fields can be smart Many Fields in the core BlackBerry UI packages  automatically adjust for screen dimensions     A Lab...
Bitmaps Various BlackBerry form factors and screen resolutions  make it hard to reuse bitmaps
AutoScaleImageField Why not have the image field do this  work for you? If the image doesn’t fit in the space its  manag...
Caveat Whether a scaled image will look good depends on a lot  of different factors     Depending on the scenario, this ...
Managers can be smart too It’s not just Fields that have to adapt     Manager layout is dependent on screen size as well...
Expanding our Manager Setmore flexibility and power
Standard Managers            VFM                         HFM    LEFT                             TOP           HCENTER    ...
Sometimes not good enough! What happens when you put two things in a HFM and  the first one consumes all width?          ...
Basic Managers     VFM          HFM 1              1      2                   2          3                        3       ...
Basic Managers +     VFM          HFM       Justified 1              1      2                   2        1   3   2        ...
Justified Managers Justified HFM lets you layout the right field before the left                  2                      ...
Justified Managersan in-depth look
Basic Idea Many managers lay their fields out “in order”, left-to-right  or top-to-bottom     But a manager is in comple...
Justified HFM Layout 3 Fields: Left, Centre, and Right Each Field is optional     These could be managers     Allows f...
Justified HFM Layout Respects margins on the Fields
Justified HFM Layout Call layoutChild() on the left child     Subtract the width it uses from the available width remain...
Justified HFM layout Now that we know how big each child will be, position them     Respect the vertical alignment bits ...
The Many Faces of JHFM     1                   3   2     1                       2                   3         2
Case Study: Instant Messengerusing justified managers in practice
Instant Messenger
Instant Messenger       1       3            JVFM       2
Instant Messenger  1    3     2      JHFM
Instant Messenger      3      2      JHFM
Instant Messenger                    VFM
Instant Messenger                    LabelField                    FIELD_RIGHT                    LabelField
Basic Managers +     VFM          HFM       Justified 1              1      2                   2        1   3   2        ...
Basic Managers ++     VFM          HFM       Justified   Equal   Even 1              1      2                   2        1...
Case Study: Media Playergetting more complicated
Media Player
Media Player       1       3       JVFM       2
Media Player               VFM
Media Player     1       2       JHFM 1       3       2   JHFM
Media Player               VFM
Media Player               JHFM               Equal
Media Player               Slider
Media Player       1       3       JVFM       2
Case Study: News Feeda river of information
News Feed
News Feed            VFM
News Feed 1          2   JHFM                Even                LabelField
News Feed            VFM            VERTICAL_SCROLL            VERTICAL_SCROLLBAR            USE_ALL_WIDTH            USE_...
News Feed      ?      ?      ?
News Feed: Detail We could try to nest Managers  to get the desired layout     Tricky since fields have to occupy      a...
News Feed: Detail        Name & Message        RichTextField A RichTextField can draw Bold and  underlined text, with act...
News Feed: DetailImage   Name & Message Use Graphics.drawBitmap() to draw  the image inside the  paintBackground() method
News Feed: DetailImage   Name & Message                         Time Use Graphics.drawText() to draw the  time inside pai...
News Feed: Detail Possibly even better to use a  ListField and draw rows as  requested in the drawListRow()  callback   ...
Parting Thoughtswrapping things up
Flexible and Powerful The BlackBerry Java® platform is a very capable platform  for all kinds of development Understandi...
Source Code The source code for all of the custom Fields and  Managers in this presentation (and many more) is  available...
THANK YOUMichael BrownDEV345February 2012
Upcoming SlideShare
Loading in …5
×

Mastering Java Layouts: Fields, Managers, and Screens

2,747 views
2,543 views

Published on

This presentation gives an overview of mastering Java layouts for BlackBerry 7 devices. Fields, managers, and screens are explored in further detail, with several case studies provided for further explanation.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,747
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mastering Java Layouts: Fields, Managers, and Screens

  1. 1. Mastering Java Layouts:Fields, Managers, and ScreensMichael BrownDEV345February 2012
  2. 2. About Me Technical Manager, Applied Innovation Started at Research In Motion® (RIM®) in 1995 as a student, and never left! Facebook® BlackBerry® Bridge Flickr™ Photo Uploader BBM™ Groups Browser / MDSS/MIME, PGP, Cryptographic API BlackBerry® Enterprise Server AutoText BlackBerry Desktop Manager 2
  3. 3. First Things First! The BlackBerry® 7 Platform is extremely powerful  Writing attractive apps for BlackBerry® requires some investment… …but it’s worth it! BlackBerry 7 devices are in the market today  Existing BlackBerry applications for will run on BlackBerry 7 3
  4. 4. The Box ModelUnderstanding the basics
  5. 5. Content 5
  6. 6. Content BorderBorder: Outline around Content 6
  7. 7. Content PaddingPadding: Space between Content and Border 7
  8. 8. Margin ContentMargin: Space outside Border (between this Field and others)
  9. 9. Margin Border Padding Content
  10. 10. MarginsField 1 overlap Field 2
  11. 11. MarginsField 1 overlap Field 2
  12. 12. Padding does notField 1 overlap Field 2
  13. 13. Bitmap Border The Bitmap Border divides a small image into 9 parts If applied to a Field with no Background, the middle tile will become a Background Content
  14. 14. Bitmap Border BorderFactory.createBitmapBorder( new XYEdges(top, right, bottom, left), Bitmap.getBitmapResource(“border_find.png”)); 14
  15. 15. Bitmap Border BorderFactory.createBitmapBorder( new XYEdges(10, 8, 8, 8), 10 Bitmap.getBitmapResource(“border_find.png”)); 8 8 8 15
  16. 16. Bitmap Border Bitmap Borders can create a variety of different effects 16
  17. 17. Bitmap Border With a little imagination, they can become almost magical! Here an “H” shaped image will ultimately create a rich perforated ticket border 17
  18. 18. 18
  19. 19. Custom Fields and Managers There are several Fields and Managers in the core BlackBerry UI packages  Often they do “almost” what you want them to  You may not be able to customize them enough to meet your needs In these cases, you may want (or need!) to write your own Field or Manager  This can seem like a daunting task  Like most things, once you have tried it, it’s not so bad 19
  20. 20. Custom Field: Slider
  21. 21. Fields only care about content! Writing a custom field consists of only two tasks 1. Layout  Implement layout() to set the size of the field’s content region by calling setExtent() 2. Paint  Implement paint() to draw the content of the field  Coordinates are relative to the top left corner of the content area  Draw text, images, lines, boxes, … 21
  22. 22. What is a Slider? A cursor that slides along a track A finite number of “notches” that the ball can occupy Different visual appearance based on state  Unfocused  Focused  Pressed / Active
  23. 23. Pieces of a Slider Progress Base Thumb
  24. 24. Pieces of a Slider Progress • Condense the graphics, leaving enough content in Base the middle to tile Thumb  We also need two more full image sets for the Focused and Pressed states…
  25. 25. Slider Layout We’re given the dimensions of the available space layout( int width, int height )
  26. 26. Slider Layout We want to use all available width
  27. 27. Slider Layout We want to use the max height of The Thumb, the Progress, and the Base
  28. 28. Slider Layout Be careful not to use more width/height than we are given protected void layout( int width, int height ) { int preferredHeight = Math.max( _thumbHeight, Math.max( _progressHeight, _baseHeight ) ); setExtent( width, Math.min( height, preferredHeight ) ); } 28
  29. 29. Slider Paint Calculate the position of the Thumb from the current Slider value Graphics.drawBitmap() Graphics.tileRop() for end caps and thumb for the rest of the tracks
  30. 30. Slider Paintpublic void paint( Graphics g ){ // Draw the left cap, and tile the progress region g.drawBitmap( . . . ); g.tileRop( Graphics.ROP_SRC_COPY, . . . ); // Draw the right cap, and tile the base region g.drawBitmap( . . . ); g.tileRop( Graphics.ROP_SRC_COPY, . . . ); // Draw the thumb on top g.drawBitmap( . . . );} See the source code for all the gory details 30
  31. 31. Slider
  32. 32. A few notes about Painting
  33. 33. (0,0) The origin for Border.draw() Margin Border Padding Content
  34. 34. (0,0) The origin for Border.draw() Margin Border Padding(0,0) The origin forpaintBackground() Content
  35. 35. (0,0) The origin for Border.draw() Margin Border Padding(0,0) The origin forpaintBackground() Content (0,0) The origin for paint()
  36. 36. Field Optimizations Happens Once Constructor Cache bitmaps, strings, and other static content Field Created applyFont() Derive fonts User Changes Font Measure text layout() Field Added / Removed Cache dimensions Calculate internal positioning Device Rotated paint() Screen Scrolls Manipulate Graphics object Use cached values to paint content Focus Changes Happens Often
  37. 37. A few notes about Layout
  38. 38. Typical Layout Depth First Traversal • Screen  Starts at the Screen level, • Main Manager descends to the leaf nodes Available space at the start is the physical dimensions 480 × 800 of the screen  e.g. 480 × 800
  39. 39. Typical Layout A Manager lays out its Field 1 • Screen children using the • Main Manager Manager sublayout() method Field 2 As layout proceeds, the Field 3 space available for remaining fields decreases Available Space Remaining
  40. 40. MainScreen Layout MainScreen is a manager Banner • Screen5 sections with • Main Manager Title 1. Banner 2. Title 3. Main Content Main Content 4. Status 5. Toolbar Status Toolbar
  41. 41. MainScreen The order of layout is 1. Banner • Screen important! • Main Manager 2. Title  Banner, Title, Toolbar, and Status are given height first  Main Content area gets 5. Main Content whatever height happens to be left over Not all areas are useful due 4. Status to restrictions on field types and unpredictable theming 3. Toolbar
  42. 42. Managers only care about space! Writing a custom Manager consists of only two tasks  Both are performed by the sublayout() method 1. Allocate space for the children 2. Position the children Typically, we keep track of remaining space as we iterate through our children and lay them out  Each child is only allowed to use the space its older siblings have not yet consumed
  43. 43. Typical Manager layout Determine how much space the child can use Call layoutChild(), passing in the maximum size  layoutChild() looks after handling border and padding for us Call child.getWidth() and child.getHeight() to determine how much space the child actually used Determine where the child belongs relative to the others and position it using setPositionChild()  Be careful about margins when positioning children!
  44. 44. Custom Manager: Two Column Layout
  45. 45. Basic Strategy1. Layout the “left half” of each row2. Figure out how wide to make the left column based on the size each left half requires  May set a maximum width so the left half doesn’t get too greedy3. Go back and lay out the rows again  Limit the width of the left column to the width determined above  Account for the alignment of each field
  46. 46. Before
  47. 47. Layout the Left Fields Widest Left Field
  48. 48. Layout Everything
  49. 49. After
  50. 50. Two Columns: The Result
  51. 51. Form Factorshow to deal with the explosion
  52. 52. BlackBerry Screen Sizes 52
  53. 53. Truly Dynamic Layouts Layouts that depend on absolute positioning are a nightmare to maintain across so many form factors  10 pixels on a BlackBerry® Pearl™ Flip != 10 pixels on a BlackBerry® Bold™ 9900… Goal: develop a set of flexible managers that can adapt to many different form factors and achieve similar results 53
  54. 54. Determining Screen Familyint width = Display.getWidth();int height = Display.getHeight();if( width <= 320 ) { // Low Resolution} else if( width > 480 || height > 480 ) { // High Resolution} else { // Medium Resolution} 54
  55. 55. Determining Screen Family This can help you select assets and pixel values “dynamically” without a lot of math  Should I choose the 24×24, 32×32, or 48×48 icon?  Should my margin be 5px, 10px, or 15px? 55
  56. 56. Fields can be smart Many Fields in the core BlackBerry UI packages automatically adjust for screen dimensions  A LabelField will wrap its content as required  A ChoiceField looks roughly the same on any two devices Ideally, any new Fields we write would be designed to work in a similar fashion 56
  57. 57. Bitmaps Various BlackBerry form factors and screen resolutions make it hard to reuse bitmaps
  58. 58. AutoScaleImageField Why not have the image field do this work for you? If the image doesn’t fit in the space its manager provides, the field can scale the image to a size that does fit  Reduce to width  Reduce to height  Or both (i.e. Reduce to fit)
  59. 59. Caveat Whether a scaled image will look good depends on a lot of different factors  Depending on the scenario, this particular Field may not be appropriate  Of course, you need to use your judgment 59
  60. 60. Managers can be smart too It’s not just Fields that have to adapt  Manager layout is dependent on screen size as well The more flexible our Managers are, the less custom work we have to do on each and every screen 60
  61. 61. Expanding our Manager Setmore flexibility and power
  62. 62. Standard Managers VFM HFM LEFT TOP HCENTER RIGHT VCENTER LEADING BOTTOM TRAILING 62
  63. 63. Sometimes not good enough! What happens when you put two things in a HFM and the first one consumes all width? 1 2 Search
  64. 64. Basic Managers VFM HFM 1 1 2 2 3 3 64
  65. 65. Basic Managers + VFM HFM Justified 1 1 2 2 1 3 2 3 3 65
  66. 66. Justified Managers Justified HFM lets you layout the right field before the left 2 1 Search
  67. 67. Justified Managersan in-depth look
  68. 68. Basic Idea Many managers lay their fields out “in order”, left-to-right or top-to-bottom  But a manager is in complete control of which children go where, and how much space each one is allowed to occupy Justified managers lay out their two “outer” fields first, and only then allow the centre field to take over the remaining space Very flexible and powerful managers that enable a huge number of layout possibilities!
  69. 69. Justified HFM Layout 3 Fields: Left, Centre, and Right Each Field is optional  These could be managers  Allows for some complicated nested structures 1 3 2 69
  70. 70. Justified HFM Layout Respects margins on the Fields
  71. 71. Justified HFM Layout Call layoutChild() on the left child  Subtract the width it uses from the available width remaining Call layoutChild() on the right child  Subtract the width it uses from the available width remaining Finally, call layoutChild() on the center child  Account for its margins
  72. 72. Justified HFM layout Now that we know how big each child will be, position them  Respect the vertical alignment bits of all fields  Also respect the horizontal alignment bits of the center field (possibly irrelevant if it consumes all of the width it was given) Justified VFM is very similar
  73. 73. The Many Faces of JHFM 1 3 2 1 2 3 2
  74. 74. Case Study: Instant Messengerusing justified managers in practice
  75. 75. Instant Messenger
  76. 76. Instant Messenger 1 3 JVFM 2
  77. 77. Instant Messenger 1 3 2 JHFM
  78. 78. Instant Messenger 3 2 JHFM
  79. 79. Instant Messenger VFM
  80. 80. Instant Messenger LabelField FIELD_RIGHT LabelField
  81. 81. Basic Managers + VFM HFM Justified 1 1 2 2 1 3 2 3 3 81
  82. 82. Basic Managers ++ VFM HFM Justified Equal Even 1 1 2 2 1 3 2 3 3 82
  83. 83. Case Study: Media Playergetting more complicated
  84. 84. Media Player
  85. 85. Media Player 1 3 JVFM 2
  86. 86. Media Player VFM
  87. 87. Media Player 1 2 JHFM 1 3 2 JHFM
  88. 88. Media Player VFM
  89. 89. Media Player JHFM Equal
  90. 90. Media Player Slider
  91. 91. Media Player 1 3 JVFM 2
  92. 92. Case Study: News Feeda river of information
  93. 93. News Feed
  94. 94. News Feed VFM
  95. 95. News Feed 1 2 JHFM Even LabelField
  96. 96. News Feed VFM VERTICAL_SCROLL VERTICAL_SCROLLBAR USE_ALL_WIDTH USE_ALL_HEIGHT
  97. 97. News Feed ? ? ?
  98. 98. News Feed: Detail We could try to nest Managers to get the desired layout  Tricky since fields have to occupy a rectangular area  Too many Managers and Fields results in poor performance Better to implement each row as a single field
  99. 99. News Feed: Detail Name & Message RichTextField A RichTextField can draw Bold and underlined text, with active regions Add Padding to the RichTextField
  100. 100. News Feed: DetailImage Name & Message Use Graphics.drawBitmap() to draw the image inside the paintBackground() method
  101. 101. News Feed: DetailImage Name & Message Time Use Graphics.drawText() to draw the time inside paint()
  102. 102. News Feed: Detail Possibly even better to use a ListField and draw rows as requested in the drawListRow() callback  Better option for large data sets  Only the visible rows need to be drawn at any one time  Possibly at the expense of variable- height rows and active regions…
  103. 103. Parting Thoughtswrapping things up
  104. 104. Flexible and Powerful The BlackBerry Java® platform is a very capable platform for all kinds of development Understanding the basic tools in the UI toolbox is critical Writing custom components is not as hard as you might think, and can result in more attractive interfaces that perform better 104
  105. 105. Source Code The source code for all of the custom Fields and Managers in this presentation (and many more) is available as open source at http://github.com/blackberry/Samples-for-Java/ “Advanced UI” Please download it, use it, and contribute back! 105
  106. 106. THANK YOUMichael BrownDEV345February 2012

×