From: Kimmo Hoikka <kimmo.hoikka@samsung.com>
Date: Wed, 11 Jan 2017 13:53:42 +0000 (-0800)
Subject: Merge "Keep c++ flags from environment." into devel/master
X-Git-Tag: dali_1.2.22~3
X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=7a4fb5b4bf9bf0c73761939bde321c48958a9117;hp=d16fbfebdbacb759e3dbf79344acb02c973a1619;p=platform%2Fcore%2Fuifw%2Fdali-demo.git

Merge "Keep c++ flags from environment." into devel/master
---

diff --git a/build/tizen/builder/CMakeLists.txt b/build/tizen/builder/CMakeLists.txt
index d7d72e9..5cbdfa6 100644
--- a/build/tizen/builder/CMakeLists.txt
+++ b/build/tizen/builder/CMakeLists.txt
@@ -1,6 +1,7 @@
 SET(BUILDER_SRC_DIR ${ROOT_SRC_DIR}/builder)
 
 SET(DALI_BUILDER_SRCS ${BUILDER_SRC_DIR}/dali-builder.cpp)
+SET(DALI_BUILDER_SRCS ${DALI_BUILDER_SRCS} "${ROOT_SRC_DIR}/shared/resources-location.cpp")
 ADD_EXECUTABLE(dali-builder ${DALI_BUILDER_SRCS})
 TARGET_LINK_LIBRARIES(dali-builder ${REQUIRED_PKGS_LDFLAGS})
 INSTALL(TARGETS dali-builder DESTINATION ${BINDIR})
diff --git a/build/tizen/demo/CMakeLists.txt b/build/tizen/demo/CMakeLists.txt
index 6aaf032..205f3a1 100644
--- a/build/tizen/demo/CMakeLists.txt
+++ b/build/tizen/demo/CMakeLists.txt
@@ -2,11 +2,7 @@ SET(DEMO_SRC_DIR ${ROOT_SRC_DIR}/demo)
 
 AUX_SOURCE_DIRECTORY(${DEMO_SRC_DIR} DEMO_SRCS)
 
-
-IF(NOT DEFINED DALI_APP_RES_DIR)
-  message([STATUS] "Setting application resource path from resource-location file")
-  SET( DEMO_SRCS ${DEMO_SRCS} "${ROOT_SRC_DIR}/shared/resources-location.cpp")
-ENDIF()
+SET(DEMO_SRCS ${DEMO_SRCS} "${ROOT_SRC_DIR}/shared/resources-location.cpp")
 
 ADD_EXECUTABLE(${PROJECT_NAME} ${DEMO_SRCS})
 TARGET_LINK_LIBRARIES(${PROJECT_NAME} ${REQUIRED_PKGS_LDFLAGS} -pie)
diff --git a/build/tizen/examples/CMakeLists.txt b/build/tizen/examples/CMakeLists.txt
index d83f427..ee0d04f 100644
--- a/build/tizen/examples/CMakeLists.txt
+++ b/build/tizen/examples/CMakeLists.txt
@@ -15,10 +15,7 @@ SUBDIRLIST(SUBDIRS ${EXAMPLES_SRC_DIR})
 
 FOREACH(EXAMPLE ${SUBDIRS})
   FILE(GLOB SRCS "${EXAMPLES_SRC_DIR}/${EXAMPLE}/*.cpp")
-  IF(NOT DEFINED DALI_APP_RES_DIR)
-    SET( SRCS ${SRCS} "${ROOT_SRC_DIR}/shared/resources-location.cpp")
-
-  ENDIF()
+  SET(SRCS ${SRCS} "${ROOT_SRC_DIR}/shared/resources-location.cpp")
   ADD_EXECUTABLE(${EXAMPLE}.example ${SRCS})
   TARGET_LINK_LIBRARIES(${EXAMPLE}.example ${REQUIRED_PKGS_LDFLAGS} -pie)
   INSTALL(TARGETS ${EXAMPLE}.example DESTINATION ${BINDIR})
diff --git a/build/tizen/resources-location.in b/build/tizen/resources-location.in
index 89b0b87..6474abb 100644
--- a/build/tizen/resources-location.in
+++ b/build/tizen/resources-location.in
@@ -1,6 +1,6 @@
 /**
- * This file defines the location dali-demo resources
-   It is used exclusively for Ubuntu builds where an application resource directory is explicity defined.
+ * This file defines the location dali-demo resources.
+ * It is used for builds where an application resource directory is NOT explicity defined.
  */
 
 #include <cstdlib>
diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml
index 046061d..4b3c4d0 100644
--- a/com.samsung.dali-demo.xml
+++ b/com.samsung.dali-demo.xml
@@ -184,4 +184,7 @@
 	<ui-application appid="tooltip.example" exec="/usr/apps/com.samsung.dali-demo/bin/tooltip.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Tooltip</label>
 	</ui-application>
+	<ui-application appid="clipping.example" exec="/usr/apps/com.samsung.dali-demo/bin/clipping.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Clipping</label>
+	</ui-application>
 </manifest>
diff --git a/demo/dali-demo.cpp b/demo/dali-demo.cpp
index 904e3be..60c8501 100644
--- a/demo/dali-demo.cpp
+++ b/demo/dali-demo.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -89,6 +89,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("flex-container.example", DALI_DEMO_STR_TITLE_FLEXBOX_PLAYGROUND));
   demo.AddExample(Example("fpp-game.example", DALI_DEMO_STR_TITLE_FPP_GAME));
   demo.AddExample(Example("tooltip.example", DALI_DEMO_STR_TITLE_TOOLTIP));
+  demo.AddExample(Example("clipping.example", DALI_DEMO_STR_TITLE_CLIPPING));
 
   demo.SortAlphabetically( true );
 
diff --git a/demo/dali-table-view.cpp b/demo/dali-table-view.cpp
index 09a0343..799304e 100644
--- a/demo/dali-table-view.cpp
+++ b/demo/dali-table-view.cpp
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -82,6 +82,13 @@ const Vector4 BUBBLE_COLOR[] =
 };
 const int NUMBER_OF_BUBBLE_COLOR( sizeof(BUBBLE_COLOR) / sizeof(BUBBLE_COLOR[0]) );
 
+const char * const SHAPE_IMAGE_TABLE[] =
+{
+  DEMO_IMAGE_DIR "shape-circle.png",
+  DEMO_IMAGE_DIR "shape-bubble.png"
+};
+const int NUMBER_OF_SHAPE_IMAGES( sizeof( SHAPE_IMAGE_TABLE ) / sizeof( SHAPE_IMAGE_TABLE[0] ) );
+
 const int NUM_BACKGROUND_IMAGES = 18;
 const float BACKGROUND_SWIPE_SCALE = 0.025f;
 const float BACKGROUND_SPREAD_SCALE = 1.5f;
@@ -732,16 +739,9 @@ void DaliTableView::OnKeyEvent( const KeyEvent& event )
 
 void DaliTableView::SetupBackground( Actor bubbleContainer )
 {
-  // Create distance field shapes.
-  BufferImage distanceFields[2];
-  Size imageSize( 512, 512 );
-
-  CreateShapeImage( CIRCLE, imageSize, distanceFields[0] );
-  CreateShapeImage( BUBBLE, imageSize, distanceFields[1] );
-
   // Add bubbles to the bubbleContainer.
   // Note: The bubbleContainer is parented externally to this function.
-  AddBackgroundActors( bubbleContainer, NUM_BACKGROUND_IMAGES, distanceFields );
+  AddBackgroundActors( bubbleContainer, NUM_BACKGROUND_IMAGES );
 }
 
 void DaliTableView::InitialiseBackgroundActors( Actor actor )
@@ -780,13 +780,13 @@ void DaliTableView::InitialiseBackgroundActors( Actor actor )
   }
 }
 
-void DaliTableView::AddBackgroundActors( Actor layer, int count, BufferImage* distanceField )
+void DaliTableView::AddBackgroundActors( Actor layer, int count )
 {
   for( int i = 0; i < count; ++i )
   {
     float randSize = Random::Range( 10.0f, 400.0f );
-    int distanceFieldType = static_cast<int>( Random::Range( 0.0f, 1.0f ) + 0.5f );
-    ImageView dfActor = ImageView::New( distanceField[ distanceFieldType ] );
+    int shapeType = static_cast<int>( Random::Range( 0.0f, NUMBER_OF_SHAPE_IMAGES - 1 ) + 0.5f );
+    ImageView dfActor = ImageView::New( SHAPE_IMAGE_TABLE[ shapeType ] );
     dfActor.SetSize( Vector2( randSize, randSize ) );
     dfActor.SetParentOrigin( ParentOrigin::CENTER );
 
@@ -801,57 +801,6 @@ void DaliTableView::AddBackgroundActors( Actor layer, int count, BufferImage* di
   layer.OnRelayoutSignal().Connect( this, &DaliTableView::InitialiseBackgroundActors );
 }
 
-void DaliTableView::CreateShapeImage( ShapeType shapeType, const Size& size, BufferImage& distanceFieldOut )
-{
-  // this bitmap will hold the alpha map for the distance field shader
-  distanceFieldOut = BufferImage::New( size.width, size.height, Pixel::A8 );
-
-  // Generate bit pattern
-  std::vector< unsigned char > imageDataA8;
-  imageDataA8.reserve( size.width * size.height ); // A8
-
-  switch( shapeType )
-  {
-    case CIRCLE:
-      GenerateCircle( size, imageDataA8 );
-      break;
-    case BUBBLE:
-      GenerateCircle( size, imageDataA8, true );
-      break;
-    default:
-      break;
-  }
-
-  PixelBuffer* buffer = distanceFieldOut.GetBuffer();
-  if( buffer )
-  {
-    GenerateDistanceFieldMap( &imageDataA8[ 0 ], size, buffer, size, 8.0f, size );
-    distanceFieldOut.Update();
-  }
-}
-
-void DaliTableView::GenerateCircle( const Size& size, std::vector< unsigned char >& distanceFieldOut, bool hollow )
-{
-  const float radius = size.width * 0.5f * size.width * 0.5f;
-  Vector2 center( size.width / 2, size.height / 2 );
-
-  for( int h = 0; h < size.height; ++h )
-  {
-    for( int w = 0; w < size.width; ++w )
-    {
-      Vector2 pos( w, h );
-      Vector2 dist = pos - center;
-
-      float distance = ( dist.x * dist.x ) + ( dist.y * dist.y );
-
-      // If hollow, check the distance against a min & max value, otherwise just use the max value.
-      unsigned char fillByte = ( hollow ? ( ( distance <= radius ) && ( distance > ( radius * 0.7f ) ) ) : ( distance <= radius ) ) ? 0xFF : 0x00;
-
-      distanceFieldOut.push_back( fillByte );
-    }
-  }
-}
-
 ImageView DaliTableView::CreateLogo( std::string imagePath )
 {
   ImageView logo = ImageView::New( imagePath );
diff --git a/demo/dali-table-view.h b/demo/dali-table-view.h
index c91f2fc..c7cf0ab 100644
--- a/demo/dali-table-view.h
+++ b/demo/dali-table-view.h
@@ -2,7 +2,7 @@
 #define DALI_DEMO_H
 
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -262,37 +262,8 @@ private: // Application callbacks & implementation
    *
    * @param[in] layer The layer to add the actors to
    * @param[in] count The number of actors to generate
-   * @param[in] distanceField A array (pointer) to 2 distance field types to use
    */
-  void AddBackgroundActors( Dali::Actor layer, int count, Dali::BufferImage* distanceField );
-
-  /**
-   * Create a bitmap with the specified shape and also output a distance field
-   *
-   * @param[in] shapeType The shape to generate
-   * @param[in] size The size of the bitmap to create
-   * @param[out] distanceFieldOut The return depth field alpha map
-   */
-  void CreateShapeImage( ShapeType shapeType, const Dali::Size& size, Dali::BufferImage& distanceFieldOut );
-
-  /**
-   * Generate a square bit pattern and depth field
-   *
-   * @param[in] size The size of the bitmap to create
-   * @param[out] imageOut The return bitmap
-   * @param[out] distanceFieldOut The return depth field alpha map
-   */
-  void GenerateSquare( const Dali::Size& size, std::vector<unsigned char>& distanceFieldOut );
-
-  /**
-   * Generate a circle bit pattern and depth field
-   *
-   * @param[in] size The size of the bitmap to create
-   * @param[out] imageOut The return bitmap
-   * @param[out] distanceFieldOut The return depth field alpha map
-   * @param[in] hollow Optional - Set to true for a thick circle outline without fill
-   */
-  void GenerateCircle( const Dali::Size& size, std::vector<unsigned char>& distanceFieldOut, bool hollow = false );
+  void AddBackgroundActors( Dali::Actor layer, int count );
 
   /**
    * Creates the logo.
diff --git a/examples/clipping/clipping-example.cpp b/examples/clipping/clipping-example.cpp
new file mode 100644
index 0000000..4db5147
--- /dev/null
+++ b/examples/clipping/clipping-example.cpp
@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+// EXTERNAL INCLUDES
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali/devel-api/actors/actor-devel.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
+
+// INTERNAL INCLUDES
+#include "clipping-item-factory.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const char * const APPLICATION_TITLE( "Clipping Controls" );
+const Vector3 APPLICATION_TITLE_PARENT_ORIGIN( 0.5f, 0.03f, 0.5f ); // Set the parent origin to a small percentage below the top (so the demo will scale for different resolutions).
+const Vector3 ITEM_VIEW_LAYOUT_SIZE_SCALE( 0.75f, 0.5f, 0.75f );
+const float ITEM_VIEW_BORDER_SIZE = 2.0f;
+const char * const BUTTON_LABEL( "Toggle Clipping Mode" );
+} // unnamed namespace
+
+/**
+ * @brief Demonstrates the control clipping of a UI Control.
+ *
+ * When an Actor is set to clip its children, the renderers have to be added manually in order to specify what its children
+ * need to clip to. UI Controls automate the creation of the renderers/visuals when they are set to clip their children.
+ *
+ * This example displays an item-view whose clipping mode is toggled without the need for adding any renderers to it.
+ */
+class ClippingExample : public ConnectionTracker
+{
+public:
+
+  /**
+   * @brief Constructor.
+   * @param[in] application A reference to the Application class.
+   */
+  ClippingExample( Application& application )
+  : mApplication( application )
+  {
+    // Connect to the Application's Init signal
+    mApplication.InitSignal().Connect( this, &ClippingExample::Create );
+  }
+
+private:
+
+  /**
+   * @brief Called to initialise the application content.
+   * @param[in] application A reference to the Application class.
+   */
+  void Create( Application& application )
+  {
+    // Hide the indicator bar
+    application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+    // Connect to the stage's key signal to allow Back and Escape to exit.
+    Stage stage = Dali::Stage::GetCurrent();
+    stage.KeyEventSignal().Connect( this, &ClippingExample::OnKeyEvent );
+
+    // Create a TextLabel for the application title.
+    Toolkit::TextLabel label = Toolkit::TextLabel::New( APPLICATION_TITLE );
+    label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    label.SetParentOrigin( APPLICATION_TITLE_PARENT_ORIGIN );
+    label.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+    label.SetProperty( Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
+    label.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
+    stage.Add( label );
+
+    // Create an item-view which clips its children.
+    mItemView = ItemView::New( mClippingItemFactory );
+    mItemView.SetParentOrigin( ParentOrigin::CENTER );
+    mItemView.SetAnchorPoint( AnchorPoint::CENTER );
+    mItemView.SetProperty( Actor::Property::CLIPPING_MODE, ClippingMode::CLIP_CHILDREN ); // Enable clipping. No need to create any renderers.
+    stage.Add( mItemView );
+
+    // Create a Spiral Layout and add it to the Item View.
+    mItemView.AddLayout( * DefaultItemLayout::New( DefaultItemLayout::SPIRAL ) );
+    stage.GetRootLayer().SetBehavior( Layer::LAYER_3D ); // The item-view spiral layout requires Layer 3D behaviour.
+
+    // Calculate the size we would like our item-view layout to be, and then activate the layout.
+    const Vector2 stageSize = stage.GetSize();
+    const Vector3 itemViewLayoutSize( ITEM_VIEW_LAYOUT_SIZE_SCALE.x * stageSize.x, ITEM_VIEW_LAYOUT_SIZE_SCALE.y * stageSize.y, ITEM_VIEW_LAYOUT_SIZE_SCALE.z * stageSize.x );
+    mItemView.ActivateLayout( 0, itemViewLayoutSize, 0.0f );
+
+    // Create a border around item-view (as item-view is clipping its children, we should NOT add this as a child of item-view).
+    Control border = Control::New();
+    border.SetParentOrigin( ParentOrigin::CENTER );
+    border.SetAnchorPoint( AnchorPoint::CENTER );
+    border.SetProperty( Control::Property::BACKGROUND,
+                        Property::Map().Add( Visual::Property::TYPE, Visual::BORDER )
+                                       .Add( BorderVisual::Property::COLOR, Color::WHITE )
+                                       .Add( BorderVisual::Property::SIZE, 2.0f ) );
+    border.SetSize( Vector3( itemViewLayoutSize.x + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.y + ITEM_VIEW_BORDER_SIZE * 2.0f, itemViewLayoutSize.z + ITEM_VIEW_BORDER_SIZE * 2.0f ) );
+    stage.Add( border );
+
+    // Create a button to toggle the clipping mode
+    PushButton button = Toolkit::PushButton::New();
+    button.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+    button.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+    button.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    button.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    button.SetProperty( Actor::Property::DRAW_MODE, DrawMode::OVERLAY_2D );
+    button.SetProperty( Button::Property::LABEL,
+                        Property::Map().Add( Toolkit::Visual::Property::TYPE, Toolkit::DevelVisual::TEXT )
+                                       .Add( Toolkit::TextVisual::Property::TEXT, BUTTON_LABEL ) );
+    button.ClickedSignal().Connect( this, &ClippingExample::OnButtonClicked );
+    stage.Add( button );
+  }
+
+  /**
+   * @brief Called when any key event is received
+   *
+   * Will use this to quit the application if Back or the Escape key is received
+   * @param[in] event The key event information
+   */
+  void OnKeyEvent( const KeyEvent& event )
+  {
+    if( event.state == KeyEvent::Down )
+    {
+      if( IsKey( event, DALI_KEY_ESCAPE) || IsKey( event, DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+    }
+  }
+
+  /**
+   * @brief Called when the button is clicked.
+   *
+   * Will use this to toggle between the clipping modes.
+   * @param[in] button The button that has been clicked.
+   */
+  bool OnButtonClicked( Toolkit::Button button )
+  {
+    if( mItemView )
+    {
+      ClippingMode::Type currentMode = static_cast< ClippingMode::Type >( mItemView.GetProperty( Actor::Property::CLIPPING_MODE ).Get< int >() );
+      mItemView.SetProperty( Actor::Property::CLIPPING_MODE, ( currentMode == ClippingMode::CLIP_CHILDREN ) ? ClippingMode::DISABLED : ClippingMode::CLIP_CHILDREN );
+    }
+    return true;
+  }
+
+  // Data
+
+  Application& mApplication; ///< Reference to the application class.
+  ItemView mItemView; ///< The item view which whose children we would like to clip.
+  ClippingItemFactory mClippingItemFactory; ///< The ItemFactory used to create our items.
+};
+
+int DALI_EXPORT_API main( int argc, char **argv )
+{
+  Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
+  ClippingExample test(app);
+  app.MainLoop();
+  return 0;
+}
diff --git a/examples/clipping/clipping-item-factory.cpp b/examples/clipping/clipping-item-factory.cpp
new file mode 100644
index 0000000..50ec810
--- /dev/null
+++ b/examples/clipping/clipping-item-factory.cpp
@@ -0,0 +1,122 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+// CLASS HEADER
+#include "clipping-item-factory.h"
+
+// EXTERNAL INCLUDES
+#include <dali/public-api/object/property-map.h>
+#include <dali-toolkit/public-api/controls/image-view/image-view.h>
+#include <dali-toolkit/public-api/visuals/border-visual-properties.h>
+#include <dali-toolkit/public-api/visuals/visual-properties.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const char * IMAGE_PATHS[] = {
+  DEMO_IMAGE_DIR "gallery-medium-1.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-2.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-3.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-4.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-5.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-6.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-7.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-8.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-9.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-10.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-11.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-12.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-13.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-14.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-15.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-16.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-17.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-18.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-19.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-20.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-21.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-22.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-23.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-24.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-25.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-26.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-27.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-28.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-29.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-30.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-31.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-32.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-33.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-34.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-35.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-36.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-37.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-38.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-39.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-40.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-41.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-42.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-43.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-44.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-45.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-46.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-47.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-48.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-49.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-50.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-51.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-52.jpg",
+  DEMO_IMAGE_DIR "gallery-medium-53.jpg",
+};
+const unsigned int NUM_IMAGES = sizeof( IMAGE_PATHS ) / sizeof( char * );
+const unsigned int NUM_IMAGES_MULTIPLIER = 10;
+
+const float ITEM_BORDER_SIZE = 2.0f;
+} // unnamed namespace
+
+ClippingItemFactory::ClippingItemFactory()
+{
+}
+
+unsigned int ClippingItemFactory::GetNumberOfItems()
+{
+  return NUM_IMAGES * NUM_IMAGES_MULTIPLIER;
+}
+
+Actor ClippingItemFactory::NewItem( unsigned int itemId )
+{
+  // Create an image view for this item
+  ImageView actor = ImageView::New( IMAGE_PATHS[ itemId % NUM_IMAGES ] );
+
+  // Add a border image child actor
+  ImageView borderActor = ImageView::New();
+  borderActor.SetParentOrigin( ParentOrigin::CENTER );
+  borderActor.SetAnchorPoint( AnchorPoint::CENTER );
+  borderActor.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
+  borderActor.SetSizeModeFactor( Vector3( 2.0f * ITEM_BORDER_SIZE, 2.0f * ITEM_BORDER_SIZE, 0.0f ) );
+  borderActor.SetColorMode( USE_PARENT_COLOR );
+  borderActor.SetProperty( ImageView::Property::IMAGE,
+                           Property::Map().Add( Visual::Property::TYPE, Visual::BORDER )
+                                          .Add( BorderVisual::Property::COLOR, Color::WHITE )
+                                          .Add( BorderVisual::Property::SIZE, ITEM_BORDER_SIZE )
+                                          .Add( BorderVisual::Property::ANTI_ALIASING, true ) );
+  actor.Add(borderActor);
+
+  return actor;
+}
diff --git a/examples/clipping/clipping-item-factory.h b/examples/clipping/clipping-item-factory.h
new file mode 100644
index 0000000..344afea
--- /dev/null
+++ b/examples/clipping/clipping-item-factory.h
@@ -0,0 +1,56 @@
+#ifndef CLIPPING_ITEM_FACTORY_H
+#define CLIPPING_ITEM_FACTORY_H
+
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#include <dali-toolkit/public-api/controls/scrollable/item-view/item-factory.h>
+
+/**
+ * @brief Factory used to create the items required in the item-view used by this example.
+ */
+class ClippingItemFactory : public Dali::Toolkit::ItemFactory
+{
+public:
+
+  /**
+   * @brief Constructor
+   */
+  ClippingItemFactory();
+
+private: // From ItemFactory
+
+  /**
+   * Query the number of items available from the factory.
+   * The maximum available item has an ID of GetNumberOfItems() - 1.
+   */
+  virtual unsigned int GetNumberOfItems();
+
+  /**
+   * Create an Actor to represent a visible item.
+   * @param itemId
+   * @return the created actor.
+   */
+  virtual Dali::Actor NewItem( unsigned int itemId );
+
+private:
+
+  ClippingItemFactory( const ClippingItemFactory& ); ///< Undefined
+  ClippingItemFactory& operator=( const ClippingItemFactory& ); ///< Undefined
+};
+
+#endif // CLIPPING_ITEM_FACTORY_H
diff --git a/packaging/com.samsung.dali-demo.spec b/packaging/com.samsung.dali-demo.spec
index 4a94295..ff82a33 100755
--- a/packaging/com.samsung.dali-demo.spec
+++ b/packaging/com.samsung.dali-demo.spec
@@ -2,7 +2,7 @@
 
 Name:       com.samsung.dali-demo
 Summary:    The OpenGLES Canvas Core Demo
-Version:    1.2.20
+Version:    1.2.21
 Release:    1
 Group:      System/Libraries
 License:    Apache-2.0
diff --git a/resources/images/shape-bubble.png b/resources/images/shape-bubble.png
new file mode 100644
index 0000000..f100b8e
Binary files /dev/null and b/resources/images/shape-bubble.png differ
diff --git a/resources/images/shape-circle.png b/resources/images/shape-circle.png
new file mode 100644
index 0000000..7b72827
Binary files /dev/null and b/resources/images/shape-circle.png differ
diff --git a/resources/po/as.po b/resources/po/as.po
index 5d9f329..a384ac3 100755
--- a/resources/po/as.po
+++ b/resources/po/as.po
@@ -13,6 +13,9 @@ msgstr "বেলুন"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "ক্লিক্"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "ঝুৰ্"
 
diff --git a/resources/po/de.po b/resources/po/de.po
index b76a0f5..ed6593d 100755
--- a/resources/po/de.po
+++ b/resources/po/de.po
@@ -13,6 +13,9 @@ msgstr "Schaumbildung"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "Tasten"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Farbverlauf"
 
diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po
index 2bc0e21..933be8b 100755
--- a/resources/po/en_GB.po
+++ b/resources/po/en_GB.po
@@ -13,6 +13,9 @@ msgstr "Bubbles"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "Buttons"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Colour Gradient"
 
diff --git a/resources/po/en_US.po b/resources/po/en_US.po
index 501c311..c5a288d 100755
--- a/resources/po/en_US.po
+++ b/resources/po/en_US.po
@@ -13,6 +13,9 @@ msgstr "Bubbles"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "Buttons"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Clipping"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Color Gradient"
 
diff --git a/resources/po/es.po b/resources/po/es.po
index 49a7683..2ea1dee 100755
--- a/resources/po/es.po
+++ b/resources/po/es.po
@@ -13,6 +13,9 @@ msgstr "Burbujas"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "Botones"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Recorte"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Gradiente de color"
 
diff --git a/resources/po/fi.po b/resources/po/fi.po
index 7cd5658..476f975 100755
--- a/resources/po/fi.po
+++ b/resources/po/fi.po
@@ -13,6 +13,9 @@ msgstr "Kuplat"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "Painikkeet"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "Leikkaaminen"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "Liukuväri"
 
diff --git a/resources/po/ko.po b/resources/po/ko.po
index e8d35a8..659b301 100755
--- a/resources/po/ko.po
+++ b/resources/po/ko.po
@@ -1,7 +1,6 @@
 msgid "DALI_DEMO_STR_TITLE_ANIMATED_IMAGES"
 msgstr "애니메이션 이미지"
 
-
 msgid "DALI_DEMO_STR_TITLE_ANIMATED_SHAPES"
 msgstr "애니메이션 모양"
 
@@ -14,6 +13,9 @@ msgstr "방울"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "버튼"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "깎는"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "색상 그라디언트"
 
diff --git a/resources/po/ml.po b/resources/po/ml.po
index 525722e..7d37255 100755
--- a/resources/po/ml.po
+++ b/resources/po/ml.po
@@ -13,6 +13,9 @@ msgstr "കുമിള"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "ബട്ടണുകൾ"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "ക്ലിപ്പിംഗ്"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "വർണ്ണ ഗ്രേഡിയന്റ്"
 
diff --git a/resources/po/ur.po b/resources/po/ur.po
index 4dbbf49..cb07dd1 100755
--- a/resources/po/ur.po
+++ b/resources/po/ur.po
@@ -13,6 +13,9 @@ msgstr "بلبلے"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "بٹنوں"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "کاٹنا"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "رنگ میلان"
 
diff --git a/resources/po/zn_CH.po b/resources/po/zn_CH.po
index 035b724..68087e2 100755
--- a/resources/po/zn_CH.po
+++ b/resources/po/zn_CH.po
@@ -13,6 +13,9 @@ msgstr "气泡"
 msgid "DALI_DEMO_STR_TITLE_BUTTONS"
 msgstr "按钮"
 
+msgid "DALI_DEMO_STR_TITLE_CLIPPING"
+msgstr "剪裁"
+
 msgid "DALI_DEMO_STR_TITLE_COLOR_GRADIENT"
 msgstr "颜色梯度"
 
diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h
index c8b3283..47f8f4f 100644
--- a/shared/dali-demo-strings.h
+++ b/shared/dali-demo-strings.h
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -37,6 +37,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_BLOCKS                      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BLOCKS")
 #define DALI_DEMO_STR_TITLE_BUBBLES                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUBBLES")
 #define DALI_DEMO_STR_TITLE_BUTTONS                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_BUTTONS")
+#define DALI_DEMO_STR_TITLE_CLIPPING                    dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CLIPPING")
 #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT              dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_COLOR_GRADIENT")
 #define DALI_DEMO_STR_TITLE_CONTACT_CARDS               dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CONTACT_CARDS")
 #define DALI_DEMO_STR_TITLE_CUBE_TRANSITION             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_CUBE_TRANSITION")
@@ -93,6 +94,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_BLOCKS                      "Blocks"
 #define DALI_DEMO_STR_TITLE_BUBBLES                     "Bubbles"
 #define DALI_DEMO_STR_TITLE_BUTTONS                     "Buttons"
+#define DALI_DEMO_STR_TITLE_CLIPPING                    "Clipping"
 #define DALI_DEMO_STR_TITLE_COLOR_GRADIENT              "Color Gradient"
 #define DALI_DEMO_STR_TITLE_CONTACT_CARDS               "Contact Cards"
 #define DALI_DEMO_STR_TITLE_CUBE_TRANSITION             "Cube Effect"