• Save
Mastering Java Layouts: Fields, Managers, and Screens
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Mastering Java Layouts: Fields, Managers, and Screens



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.



Total Views
Views on SlideShare
Embed Views



5 Embeds 32

http://blackberry.github.com 26
http://localhost 3
http://pelegri.github.com 1
http://blackberry-community.github.com 1
http://blackberry.github.io 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Mastering Java Layouts: Fields, Managers, and Screens Presentation Transcript

  • 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 http://github.com/blackberry/Samples-for-Java/ “Advanced UI” Please download it, use it, and contribute back! 105
  • 106. THANK YOUMichael BrownDEV345February 2012