docs/content/shared-javascript-and-cpp-documentation/item-view.md

   1 <!--
   2 /**-->
   3
   4 # Item View {#item-view}
   5
   6 An Item view is a scrollable container that contains several items.
   7 It can have several layouts.
   8 There are a few built-in layouts that the application writer can use:
   9
  10 |GRID                    |SPIRAL                    |DEPTH                    |
  11 |:----------------------:|:------------------------:|:-----------------------:|
  12 |![ ](item-view/grid.png)|![ ](item-view/spiral.png)|![ ](item-view/depth.png)|
  13
  14 The application writer can also create their own custom layout by inheriting from Dali::Toolkit::ItemLayout.
  15
  16 ## Item Factory
  17
  18 To create an item-view, the application writer has to provide an item-factory.
  19 An ItemFactory provides methods to create items and how many items there are among other things.
  20
  21 ~~~{.cpp}
  22 class MyFactory : public Dali::Toolkit::ItemFactory
  23 {
  24 public:
  25   virtual unsigned int GetNumberOfItems()
  26   {
  27     // Should return the number of items
  28     return MY_ITEM_COUNT;
  29   }
  30
  31   virtual Actor NewItem( unsigned int itemId )
  32   {
  33     // We should create the actor here that represents our item based on the itemId given.
  34
  35     // Here we'll create an ImageView which uses the the itemId to parse the image in a particular directory.
  36     std::ostringstream imageName;
  37     imageName << "my-image-folder/" << itemId << ".png"; // If item was 10, then this would result in my-image-folder/10.png
  38
  39     // Create the Image View from the image and return
  40     return Dali::Toolkit::ImageView::New( imageName.str() );
  41   }
  42 };
  43 ~~~
  44 These overridden methods in our factory will be called by the Item View.
  45
  46 ## Creating an ItemView
  47
  48 ~~~{.cpp}
  49 MyFactory factory; // Should store this as a member variable
  50 Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New( factory ); // Pass in our factory
  51 itemView.SetParentOrigin( ParentOrigin::CENTER );
  52 itemView.SetAnchorPoint( AnchorPoint::CENTER );
  53
  54 // Now create a layout
  55 Dali::Toolkit::ItemLayoutPtr spiralLayout = Dali::Toolkit::DefaultItemLayout::New( Dali::Toolkit::DefaultItemLayout::SPIRAL );
  56
  57 // ... and add the layout to the item view
  58 itemView.AddLayout( spiralLayout );
  59
  60 // More layouts can be created and added to the item-view
  61
  62 // Activate the layout
  63 itemView.ActivateLayout(
  64   0,                                   // The layout ID matches the order in which layouts are added
  65   Dali::Stage::GetCurrent().GetSize(), // Use the stage's size as our item-view size
  66   0 );                                 // We want the item-view to appear straight away
  67
  68 // And add to the stage
  69 Dali::Stage::GetCurrent().Add( itemView );
  70 ~~~
  71
  72 ## Actions
  73 The item-view provides an action to stop the scroll animation if desired.
  74
  75 ~~~{.cpp}
  76 Property::Map attributes;
  77 itemView.DoAction( "stopScrolling", attributes );
  78 ~~~
  79
  80
  81 */