From: Adeel Kazmi <adeel.kazmi@samsung.com>
Date: Wed, 3 Jun 2015 20:05:41 +0000 (+0100)
Subject: (Programming Guide) ItemView
X-Git-Tag: accepted/tizen/3.0.2015.q2/common/20150615.091817~2
X-Git-Url: http://review.tizen.org/git/?p=platform%2Fcore%2Fuifw%2Fdali-toolkit.git;a=commitdiff_plain;h=9fd31f8fd85f4d97b78bafb8dd255607f3d8b761

(Programming Guide) ItemView

Change-Id: If9480c78a19bf9b5f47e56f1dba8d77eac373781
---

diff --git a/build/tizen/docs/dali_doxygen.css b/build/tizen/docs/dali_doxygen.css
index 4b68ddf..223b8ef 100644
--- a/build/tizen/docs/dali_doxygen.css
+++ b/build/tizen/docs/dali_doxygen.css
@@ -1,7 +1,8 @@
 .image
 {
    text-align: left;
-   margin-left: 50px;
+   margin-left: 20px;
+   margin-right: 20px;
 }
 
 div.image img {
diff --git a/docs/content/images/item-view/depth.png b/docs/content/images/item-view/depth.png
new file mode 100644
index 0000000..86c879d
Binary files /dev/null and b/docs/content/images/item-view/depth.png differ
diff --git a/docs/content/images/item-view/grid.png b/docs/content/images/item-view/grid.png
new file mode 100644
index 0000000..398da01
Binary files /dev/null and b/docs/content/images/item-view/grid.png differ
diff --git a/docs/content/images/item-view/spiral.png b/docs/content/images/item-view/spiral.png
new file mode 100644
index 0000000..1825a11
Binary files /dev/null and b/docs/content/images/item-view/spiral.png differ
diff --git a/docs/content/main.md b/docs/content/main.md
index 27937d2..c34c256 100644
--- a/docs/content/main.md
+++ b/docs/content/main.md
@@ -56,7 +56,7 @@
  + Buttons
  + TableView
  + [Scroll View](@ref scroll-view)
- + ItemView
+ + [ItemView](@ref item-view)
 
 ### RenderTasks
 
diff --git a/docs/content/programming-guide/item-view.h b/docs/content/programming-guide/item-view.h
deleted file mode 100644
index 43cd656..0000000
--- a/docs/content/programming-guide/item-view.h
+++ /dev/null
@@ -1,7 +0,0 @@
-/*! \page item-view Item View
- * Your text here
- *
- * References to Dali::Toolkit::ItemView will work...
- *
- */
-
diff --git a/docs/content/shared-javascript-and-cpp-documentation/item-view.md b/docs/content/shared-javascript-and-cpp-documentation/item-view.md
new file mode 100644
index 0000000..1313253
--- /dev/null
+++ b/docs/content/shared-javascript-and-cpp-documentation/item-view.md
@@ -0,0 +1,73 @@
+<!--
+/**-->
+
+# Item View {#item-view}
+
+An Item view is a scrollable container that contains several items.
+It can have several layouts.
+There are a few built-in layouts that the application writer can use:
+
+|GRID                    |SPIRAL                    |DEPTH                    |
+|:----------------------:|:------------------------:|:-----------------------:|
+|![ ](item-view/grid.png)|![ ](item-view/spiral.png)|![ ](item-view/depth.png)|
+
+The application writer can also create their own custom layout by inheriting from Dali::Toolkit::ItemLayout.
+
+## Item Factory
+
+To create an item-view, the application writer has to provide an item-factory.
+An ItemFactory provides methods to create items and how many items there are among other things.
+
+~~~{.cpp}
+class MyFactory : public Dali::Toolkit::ItemFactory
+{
+public:
+  virtual unsigned int GetNumberOfItems()
+  {
+    // Should return the number of items
+    return MY_ITEM_COUNT;
+  }
+
+  virtual Actor NewItem( unsigned int itemId )
+  {
+    // We should create the actor here that represents our item based on the itemId given.
+
+    // Here we'll create an ImageActor which uses the the itemId to parse the image in a particular directory.
+    std::ostringstream imageName;
+    imageName << "my-image-folder/" << itemId << ".png"; // If item was 10, then this would result in my-image-folder/10.png
+    Dali::ResourceImage image = Dali::ResourceImage::New( imageName.str() );
+
+    // Create an Image Actor from the image and return
+    return Dali::ImageActor::New( image );
+  }
+};
+~~~
+These overridden methods in our factory will be called by the Item View.
+
+## Creating an ItemView
+
+~~~{.cpp}
+MyFactory factory; // Should store this as a member variable
+Dali::Toolkit::ItemView itemView = Dali::Toolkit::ItemView::New( factory ); // Pass in our factory
+itemView.SetParentOrigin( ParentOrigin::CENTER );
+itemView.SetAnchorPoint( AnchorPoint::CENTER );
+
+// Now create a layout
+Dali::Toolkit::ItemLayoutPtr spiralLayout = Dali::Toolkit::DefaultItemLayout::New( Dali::Toolkit::DefaultItemLayout::SPIRAL );
+
+// ... and add the layout to the item view
+itemView.AddLayout( spiralLayout );
+
+// More layouts can be created and added to the item-view
+
+// Activate the layout
+itemView.ActivateLayout(
+  0,                                   // The layout ID matches the order in which layouts are added
+  Dali::Stage::GetCurrent().GetSize(), // Use the stage's size as our item-view size
+  0 );                                 // We want the item-view to appear straight away
+
+// And add to the stage
+Dali::Stage::GetCurrent().Add( itemView );
+~~~
+
+*/
\ No newline at end of file