Your SlideShare is downloading. ×
Mastering Java Layouts: Fields, Managers, and Screens
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mastering Java Layouts: Fields, Managers, and Screens


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 …

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

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Mastering Java Layouts:Fields, Managers, and ScreensMichael BrownDEV345February 2012
  • 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. 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. The Box ModelUnderstanding the basics
  • 5. Content 5
  • 6. Content BorderBorder: Outline around Content 6
  • 7. Content PaddingPadding: Space between Content and Border 7
  • 8. Margin ContentMargin: Space outside Border (between this Field and others)
  • 9. Margin Border Padding Content
  • 10. MarginsField 1 overlap Field 2
  • 11. MarginsField 1 overlap Field 2
  • 12. Padding does notField 1 overlap Field 2
  • 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. Bitmap Border BorderFactory.createBitmapBorder( new XYEdges(top, right, bottom, left), Bitmap.getBitmapResource(“border_find.png”)); 14
  • 15. Bitmap Border BorderFactory.createBitmapBorder( new XYEdges(10, 8, 8, 8), 10 Bitmap.getBitmapResource(“border_find.png”)); 8 8 8 15
  • 16. Bitmap Border Bitmap Borders can create a variety of different effects 16
  • 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
  • 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. Custom Field: Slider
  • 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. 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. Pieces of a Slider Progress Base Thumb
  • 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. Slider Layout We’re given the dimensions of the available space layout( int width, int height )
  • 26. Slider Layout We want to use all available width
  • 27. Slider Layout We want to use the max height of The Thumb, the Progress, and the Base
  • 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. 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. 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. Slider
  • 32. A few notes about Painting
  • 33. (0,0) The origin for Border.draw() Margin Border Padding Content
  • 34. (0,0) The origin for Border.draw() Margin Border Padding(0,0) The origin forpaintBackground() Content
  • 35. (0,0) The origin for Border.draw() Margin Border Padding(0,0) The origin forpaintBackground() Content (0,0) The origin for paint()
  • 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. A few notes about Layout
  • 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. 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. 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. 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. 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. 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. Custom Manager: Two Column Layout
  • 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. Before
  • 47. Layout the Left Fields Widest Left Field
  • 48. Layout Everything
  • 49. After
  • 50. Two Columns: The Result
  • 51. Form Factorshow to deal with the explosion
  • 52. BlackBerry Screen Sizes 52
  • 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. 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. 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. 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. Bitmaps Various BlackBerry form factors and screen resolutions make it hard to reuse bitmaps
  • 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. 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. 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. Expanding our Manager Setmore flexibility and power
  • 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. Basic Managers VFM HFM 1 1 2 2 3 3 64
  • 65. Basic Managers + VFM HFM Justified 1 1 2 2 1 3 2 3 3 65
  • 66. Justified Managers Justified HFM lets you layout the right field before the left 2 1 Search
  • 67. Justified Managersan in-depth look
  • 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. 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. Justified HFM Layout Respects margins on the Fields
  • 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. 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. The Many Faces of JHFM 1 3 2 1 2 3 2
  • 74. Case Study: Instant Messengerusing justified managers in practice
  • 75. Instant Messenger
  • 76. Instant Messenger 1 3 JVFM 2
  • 77. Instant Messenger 1 3 2 JHFM
  • 78. Instant Messenger 3 2 JHFM
  • 79. Instant Messenger VFM
  • 80. Instant Messenger LabelField FIELD_RIGHT LabelField
  • 81. Basic Managers + VFM HFM Justified 1 1 2 2 1 3 2 3 3 81
  • 82. Basic Managers ++ VFM HFM Justified Equal Even 1 1 2 2 1 3 2 3 3 82
  • 83. Case Study: Media Playergetting more complicated
  • 84. Media Player
  • 85. Media Player 1 3 JVFM 2
  • 86. Media Player VFM
  • 87. Media Player 1 2 JHFM 1 3 2 JHFM
  • 88. Media Player VFM
  • 89. Media Player JHFM Equal
  • 90. Media Player Slider
  • 91. Media Player 1 3 JVFM 2
  • 92. Case Study: News Feeda river of information
  • 93. News Feed
  • 94. News Feed VFM
  • 95. News Feed 1 2 JHFM Even LabelField
  • 97. News Feed ? ? ?
  • 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. News Feed: Detail Name & Message RichTextField A RichTextField can draw Bold and underlined text, with active regions Add Padding to the RichTextField
  • 100. News Feed: DetailImage Name & Message Use Graphics.drawBitmap() to draw the image inside the paintBackground() method
  • 101. News Feed: DetailImage Name & Message Time Use Graphics.drawText() to draw the time inside paint()
  • 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. Parting Thoughtswrapping things up
  • 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. 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 “Advanced UI” Please download it, use it, and contribute back! 105
  • 106. THANK YOUMichael BrownDEV345February 2012