Extending the QNX TileList component to create a liquid layout


/ Published in: ActionScript 3
Save to your folder(s)



Copy this code and paste it in your HTML
  1. public class LiquidTileList extends TileList {
  2. /**
  3. * if true, when changing the size of the tiles
  4. * scrolls the list so the first tile from the previous
  5. * state is still visible
  6. */
  7. public var keepVisibleItem:Boolean;
  8.  
  9. public function LiquidTileList() {
  10. super();
  11. setSkin(PictureCellRenderer);
  12. }
  13. /**
  14. * Overriding the draw method to inject
  15. * our method of calculating the number of
  16. * tiles that fit the screen
  17. * This method is called every time the width/height
  18. * is changed
  19. */
  20. override protected function draw():void {
  21. var i:int;
  22. if (keepVisibleItem && firstVisibleItem)
  23. i = firstVisibleItem.index;
  24. scrollIndexVisible(0, 0);
  25. calculateColumns();
  26. super.draw();
  27. if (keepVisibleItem && i)
  28. scrollIndexVisible(i, 0);
  29. }
  30. /**
  31. * Calculates the number of tiles that fit
  32. * the width
  33. */
  34. private function calculateColumns():void {
  35. var columnNumber:int = Math.floor( (width - (cellPadding * columnCount -1) )
  36. / columnWidth);
  37. if (columnNumber != columnCount)
  38. columnCount = columnNumber;
  39. }
  40. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.