plugins/dali-script-v8/docs/content/item-view.js

   1 /**
   2  *
   3 ## ItemView API
   4
   5  ItemView is a scrollable layout container with built-in layouts to determine
   6  the logical position of each item in a layout.
   7
   8  Actors are provided from an external {{#crossLink "ItemFactory"}}ItemFactory{{/crossLink}},
   9  to display the currently visible items. ItemFactory is for storing the data of ItemView and
  10  creating actors for ItemView on request. Each item in ItemView is identified by a unique ID,
  11  and has a linear order from 0.
  12
  13  ### Example of creating an ItemView (see {{#crossLink "ItemFactory"}}ItemFactory{{/crossLink}} API for a full example)
  14
  15 ```
  16   // Define the data of 100 items
  17   var itemViewData = [];
  18   for (var itemId = 0; itemId < 100; itemId++)
  19   {
  20     var itemData = {};
  21     itemData["template"] = "template-item";
  22     itemData["title_text"] = "Item " + itemId;
  23     itemViewData[itemId] = itemData;
  24   }
  25
  26   // Create an item factory and set the JSON template file and item view data
  27   var itemFactory = new dali.ItemFactory();
  28   itemFactory.jsonTemplateFile = "./item-template.json"; // Set the JSON template file
  29   itemFactory.data = itemViewData; // Set the ItemView data
  30
  31   // Create the item view with the given item factory
  32   var itemView = new dali.Control("ItemView", itemFactory);
  33   itemView.size = [stageSize.x, stageSize.y, 0.0];
  34   itemView.parentOrigin = dali.CENTER_LEFT;
  35   itemView.anchorPoint = dali.CENTER_LEFT;
  36   dali.stage.add( itemView );
  37
  38   // Add a scroll bar to ItemView (optional)
  39   var scrollBar = new dali.Control("ScrollBar");
  40   scrollBar.parentOrigin = dali.TOP_RIGHT;
  41   scrollBar.anchorPoint = dali.TOP_RIGHT;
  42   scrollBar.widthResizePolicy = "FIT_TO_CHILDREN";
  43   scrollBar.heightResizePolicy = "FILL_TO_PARENT";
  44   scrollBar.indicatorHeightPolicy = "Fixed";
  45   scrollBar.indicatorFixedHeight = 60.0;
  46   itemView.add(scrollBar);
  47
  48   // Add a list layout to ItemView (multiple layouts can be added to the same ItemView)
  49   itemView.addLayout(dali.ITEM_LAYOUT_LIST);
  50
  51   // Set custom item size for the list layout
  52   // If set, this will overide the predefined item size in the list layout
  53   itemView.setItemSize(0, [350, 100, 0]); // 0 means the first layout added to ItemView
  54
  55   // Acticate the list layout (which will layout the items as a list)
  56   itemView.activateLayout(0, itemView.size); // 0 means the first layout added to ItemView
  57 ```
  58
  59  @class ItemView
  60  @extends Actor
  61
  62 */