[dali_1.3.8] Merge branch 'devel/master'

Change-Id: I7ea90c88287fa7b78dcb58b974c7cd5600757875

[dali_1.3.8] Merge branch 'devel/master'
Change-Id: I7ea90c88287fa7b78dcb58b974c7cd5600757875
Victor Cebollada
2 parents 317401ef d486a8ad
Showing 8 changed files with 320 additions and 267 deletions
examples/animated-gradient-card-active/animated-gradient-card-active.cpp
examples/animated-images/animated-images-example.cpp
examples/blocks/blocks-example.cpp
examples/clipping/clipping-item-factory.cpp
examples/image-view-alpha-blending/image-view-alpha-blending-example.cpp
examples/item-view/item-view-example.cpp
examples/perf-scroll/perf-scroll.cpp
packaging/com.samsung.dali-demo.spec
 /*
-* Copyright (c) 2017 Samsung Electronics Co., Ltd.
+* Copyright (c) 2018 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.
@@ -141,8 +141,16 @@ public:
       mImageUrl[k] = CARD_IMAGE_LIST[k];
+      // Create an image view for this item
       mCard[k] = ImageView::New();
-      mCard[k].SetImage( mImageUrl[k] );
+      {
+        Property::Map propertyMap;
+        propertyMap.Insert(Visual::Property::TYPE, Visual::IMAGE);
+        propertyMap.Insert(ImageVisual::Property::URL, mImageUrl[k]);
+        propertyMap.Insert(DevelVisual::Property::VISUAL_FITTING_MODE, DevelVisual::FILL);
+        mCard[k].SetProperty(Toolkit::ImageView::Property::IMAGE, propertyMap);
+      }
+
       mCard[k].SetParentOrigin( ParentOrigin::CENTER );
       mCard[k].SetAnchorPoint( AnchorPoint::CENTER );
       mCard[k].SetSize( mSize.x, mSize.y );
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -17,260 +17,278 @@
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali-toolkit/devel-api/controls/buttons/button-devel.h>
-#include "shared/utility.h"
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/visuals/animated-image-visual-actions-devel.h>
 using namespace Dali;
 using namespace Dali::Toolkit;
 namespace
 {
-const char * const PLAY_ICON( DEMO_IMAGE_DIR "icon-play.png" );
+const char * const PLAY_ICON_UNSELECTED( DEMO_IMAGE_DIR "icon-play.png" );
 const char * const PLAY_ICON_SELECTED( DEMO_IMAGE_DIR "icon-play-selected.png" );
-const char* const STATIC_GIF_DOG( DEMO_IMAGE_DIR "dog-static.gif" );
-const char* const ANIMATE_GIF_DOG( DEMO_IMAGE_DIR "dog-anim.gif" );
+const unsigned int ANIMATED_IMAGE_COUNT = 2;
-const char* const STATIC_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-static.gif" );
-const char* const ANIMATE_GIF_LOGO( DEMO_IMAGE_DIR "dali-logo-anim.gif" );
+const char * ANIMATED_GIF_URLS[ ANIMATED_IMAGE_COUNT ] =
+{
+  DEMO_IMAGE_DIR "dog-anim.gif",
+  DEMO_IMAGE_DIR "dali-logo-anim.gif"
+};
+
+const char * ANIMATED_ARRAY_URL_FORMATS[ ANIMATED_IMAGE_COUNT ] =
+{
+  DEMO_IMAGE_DIR "dog-anim-%03d.png",       // Images are named dog-anim-001.png, dog-anim-002.png, etc.
+  DEMO_IMAGE_DIR "dali-logo-anim-%03d.png"  // Images are named dali-logo-anim-001.png, dali-logo-anim-002.png, etc.
+};
-const char* const ANIMATE_PIXEL_AREA( "Animate PixelArea" );
-const char* const ANIMATE_PIXEL_AREA_AND_SCALE( "Animate PixelArea & Scale" );
+int ANIMATED_ARRAY_NUMBER_OF_FRAMES[ ANIMATED_IMAGE_COUNT ] =
+{
+  8,
+  15
+};
-const char* const STATIC_IMAGE_ARRAY_DOG( DEMO_IMAGE_DIR "dog-anim-001.png" );
-const char* const ANIMATE_IMAGE_ARRAY_DOG( DEMO_IMAGE_DIR "dog-anim-%03d.png" );
+const char * GIF_RADIO_BUTTON_NAME( "Gif" );
+const char * ARRAY_RADIO_BUTTON_NAME( "Array" );
-const char* const STATIC_IMAGE_ARRAY_LOGO( DEMO_IMAGE_DIR "dali-logo-anim-001.png" );
-const char* const ANIMATE_IMAGE_ARRAY_LOGO( DEMO_IMAGE_DIR "dali-logo-anim-%03d.png" );
+/// Structure to specify the layout information for the animated images views.
+struct ImageLayoutInfo
+{
+  Vector3 anchorPoint;
+  Vector3 parentOrigin;
+  float yPosition;
+};
+ImageLayoutInfo IMAGE_LAYOUT_INFO[ ANIMATED_IMAGE_COUNT ] =
+{
+  { AnchorPoint::BOTTOM_CENTER, ParentOrigin::CENTER, -80.0f },
+  { AnchorPoint::TOP_CENTER,    ParentOrigin::CENTER,  80.0f }
+};
-const Vector4 DIM_COLOR( 0.85f, 0.85f, 0.85f, 0.85f );
-}
+} // unnamed namespace
-/* This example shows how to display a GIF image.
- * First a static GIF image is loaded and then when the user presses on the "Play" icon,
- * the static image is replaced by an animated one
+/**
+ * @brief This demonstrates how to display and control Animated Images.
+ *
+ * - It displays two animated images, an animated dog and an animated DALi logo.
+ * - The images are loaded paused, a play button is overlayed on top of the images to play the animated image.
+ * - Radio buttons at the bottom allow the user to change between Animated GIFs and a collection of Image Arrays.
  */
-
 class AnimatedImageController : public ConnectionTracker
 {
 public:
-  enum ImageType
-  {
-    GIF,
-    IMAGE_ARRAY
-  };
-  enum StateType
-  {
-    STATIC,
-    ANIMATED
-  };
+  /**
+   * @brief Constructor.
+   * @param[in]  application  A reference to the Application class
+   */
   AnimatedImageController( Application& application )
   : mApplication( application ),
-    mImageType(GIF)
+    mImageType( ImageType::GIF )
   {
     // Connect to the Application's Init signal
     mApplication.InitSignal().Connect( this, &AnimatedImageController::Create );
   }
-  ~AnimatedImageController()
+private:
+
+  /**
+   * @brief The image types supported by the application.
+   */
+  enum class ImageType
   {
-    // Nothing to do here;
-  }
+    GIF,          ///< Displays Animated GIF Files.
+    IMAGE_ARRAY   ///< Displays an array of URLs that are used as an animated image.
+  };
-  // The Init signal is received once (only) during the Application lifetime
+  /**
+   * @brief Called to initialise the application content.
+   * @param[in]  application  A reference to the Application class
+   */
   void Create( Application& application )
   {
-    // Get a handle to the stage
+    // Set the stage background color and connect to the stage's key signal to allow Back and Escape to exit.
     Stage stage = Stage::GetCurrent();
     stage.SetBackgroundColor( Color::WHITE );
-    // Tie-in input event handlers:
     stage.KeyEventSignal().Connect( this, &AnimatedImageController::OnKeyEvent );
-    CreateStaticImageView( 0 );
-    CreateStaticImageView( 1 );
+    // Create the animated image-views
+    CreateAnimatedImageViews();
+
+    // Create radio buttons to change between GIF images and Image Arrays
+    CreateRadioButtonLayout();
+
+    // Create a tap gesture detector to use to pause the animated images
+    mTapDetector = TapGestureDetector::New();
+    mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap );
+  }
-    mGifButton = Toolkit::RadioButton::New("Gif");
-    mGifButton.SetProperty( Button::Property::SELECTED, true );
-    mArrayButton = Toolkit::RadioButton::New("Array");
-    mGifButton.ClickedSignal().Connect( this, &AnimatedImageController::OnTypeButtonClicked );
-    mArrayButton.ClickedSignal().Connect( this, &AnimatedImageController::OnTypeButtonClicked );
+  /**
+   * @brief Creates and lays out radio buttons to allow changing between the different image types.
+   */
+  void CreateRadioButtonLayout()
+  {
+    mGifButton = CreateRadioButton( GIF_RADIO_BUTTON_NAME, true );
+    mArrayButton = CreateRadioButton( ARRAY_RADIO_BUTTON_NAME, false );
-    Toolkit::TableView radioButtonLayout = Toolkit::TableView::New(1, 2);
-    radioButtonLayout.SetName("RadioButtonsLayout");
+    Toolkit::TableView radioButtonLayout = Toolkit::TableView::New( 1, 2 );
+    radioButtonLayout.SetName( "RadioButtonsLayout" );
     radioButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
     radioButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
     radioButtonLayout.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
     radioButtonLayout.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
-    radioButtonLayout.SetFitHeight(0);
-    radioButtonLayout.AddChild( mGifButton, TableView::CellPosition(0,0) );
-    radioButtonLayout.AddChild( mArrayButton, TableView::CellPosition(0,1) );
-    radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
-    radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+    radioButtonLayout.SetFitHeight( 0 );
+    radioButtonLayout.AddChild( mGifButton, TableView::CellPosition( 0, 0 ) );
+    radioButtonLayout.AddChild( mArrayButton, TableView::CellPosition( 0, 1 ) );
+    radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ),
+                                        HorizontalAlignment::CENTER,
+                                        VerticalAlignment::CENTER );
+    radioButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ),
+                                        HorizontalAlignment::CENTER,
+                                        VerticalAlignment::CENTER );
     radioButtonLayout.SetY( -10.0f );
-    stage.Add( radioButtonLayout );
-
-    mTapDetector = TapGestureDetector::New();
-    mTapDetector.DetectedSignal().Connect( this, &AnimatedImageController::OnTap );
+    Stage::GetCurrent().Add( radioButtonLayout );
   }
-  void CreateStaticImageView( int index )
+  /**
+   * @brief Creates a radio button.
+   * @param[in]  name      The name of the button
+   * @param[in]  selected  Whether the button is selected
+   * @return The created radio-button
+   */
+  RadioButton CreateRadioButton( const char * const name, bool selected )
   {
-    Actor& actor = (index==0) ? mActorDog : mActorLogo;
-
-    Stage stage = Stage::GetCurrent();
-    if( actor )
-    {
-      stage.Remove( actor );
-    }
-
-    Property::Value viewSetup = SetupViewProperties( mImageType, STATIC, index, false );
-    actor = CreateImageViewWithPlayButton( viewSetup );
-    SetLayout(actor, index);
-    stage.Add( actor );
+    RadioButton radioButton = Toolkit::RadioButton::New( name );
+    radioButton.SetProperty( Button::Property::SELECTED, selected );
+    radioButton.ClickedSignal().Connect( this, &AnimatedImageController::OnRadioButtonClicked );
+    return radioButton;
   }
-
-  void CreateAnimImageView( int index )
+  /**
+   * @brief Creates the required animated image views.
+   */
+  void CreateAnimatedImageViews()
   {
-    Actor& actor = (index==0) ? mActorDog : mActorLogo;
-
-    Stage stage = Stage::GetCurrent();
-    if( actor )
+    for( unsigned int index = 0; index < ANIMATED_IMAGE_COUNT; ++index )
     {
-      stage.Remove( actor );
-    }
+      Stage stage = Stage::GetCurrent();
-    const char* label = (index==0) ? ANIMATE_PIXEL_AREA_AND_SCALE : ANIMATE_PIXEL_AREA;
+      Control& control = ( index == 0 ) ? mActorDog : mActorLogo;
+      if( control )
+      {
+        // Remove the previous control from the stage, it's resources (and children) will be deleted automatically
+        control.Unparent();
+      }
-    Property::Value viewSetup = SetupViewProperties( mImageType, ANIMATED, index, true );
-    actor = CreateImageViewWithAnimatePixelAreaButton( viewSetup, label);
-    SetLayout(actor, index);
+      // Create and lay out the image view according to the index
+      control = Toolkit::ImageView::New();
+      control.SetProperty( Toolkit::ImageView::Property::IMAGE, SetupViewProperties( mImageType, index ) );
+      control.SetAnchorPoint( IMAGE_LAYOUT_INFO[ index ].anchorPoint );
+      control.SetParentOrigin( IMAGE_LAYOUT_INFO[ index ].parentOrigin );
+      control.SetY( IMAGE_LAYOUT_INFO[ index ].yPosition );
-    stage.Add( actor );
+      // We do not want the animated image playing when it's added to the stage.
+      PauseAnimatedImage( control );
+
+      stage.Add( control );
+    }
   }
-  void SetLayout( Actor actor, int index )
+  /**
+   * @brief Plays the passed in animated image.
+   * @details Also sets up the control so it can be paused when tapped.
+   * @param[in]  control  The animated image to play
+   */
+  void PlayAnimatedImage( Control& control )
   {
-    if( index == 0 )
-    {
-      actor.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
-      actor.SetY( -80.f );
-    }
-    else
+    DevelControl::DoAction( control,
+                            ImageView::Property::IMAGE,
+                            DevelAnimatedImageVisual::Action::PLAY,
+                            Property::Value() );
+
+    if( mTapDetector )
     {
-      actor.SetAnchorPoint( AnchorPoint::TOP_CENTER );
-      actor.SetY( 80.f );
+      mTapDetector.Attach( control );
     }
   }
   /**
-   * Create the gif image view with an overlay play button.
+   * @brief Pauses the animated image.
+   * @details Adds a Play button to the control and sets both up so that the animated image can be played again when
+   *          the button is tapped.
+   * @param[in]  control  The animated image to pause
    */
-  Toolkit::ImageView CreateImageViewWithPlayButton( Property::Value& viewSetup )
+  void PauseAnimatedImage( Control& control )
   {
-    Toolkit::ImageView imageView = Toolkit::ImageView::New();
-    imageView.SetProperty( ImageView::Property::IMAGE, viewSetup );
-    imageView.SetParentOrigin( ParentOrigin::CENTER );
+    DevelControl::DoAction( control,
+                            ImageView::Property::IMAGE,
+                            DevelAnimatedImageVisual::Action::PAUSE,
+                            Property::Value() );
-    // Create a push button, and add it as child of the image view
+    // Create a push button, and add it as child of the control
     Toolkit::PushButton animateButton = Toolkit::PushButton::New();
-    animateButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON );
+    animateButton.SetProperty( Toolkit::DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, PLAY_ICON_UNSELECTED );
     animateButton.SetProperty( Toolkit::DevelButton::Property::SELECTED_BACKGROUND_VISUAL, PLAY_ICON_SELECTED );
     animateButton.SetParentOrigin( ParentOrigin::CENTER );
     animateButton.SetAnchorPoint( AnchorPoint::CENTER );
     animateButton.ClickedSignal().Connect( this, &AnimatedImageController::OnPlayButtonClicked );
-    imageView.Add( animateButton );
+    control.Add( animateButton );
-    // Apply dim color on the gif view and the play button
-    imageView.SetColor( DIM_COLOR );
-
-    return imageView;
-  }
-
-  Toolkit::ImageView CreateImageViewWithAnimatePixelAreaButton( Property::Value& viewSetup, const std::string& buttonLabel )
-  {
-    Toolkit::ImageView imageView = Toolkit::ImageView::New();
-    imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, viewSetup );
-    imageView.SetParentOrigin( ParentOrigin::CENTER );
-
-    // Create a push button, and add it as child of the image view
-    Toolkit::PushButton animateButton = Toolkit::PushButton::New();
-    animateButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel );
-    animateButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
-    animateButton.SetAnchorPoint( AnchorPoint::TOP_CENTER );
-    animateButton.SetY( 20.f );
-
-    animateButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-    animateButton.SetProperty( Actor::Property::INHERIT_SCALE, false );
-    imageView.Add( animateButton );
-
-    mTapDetector.Attach( animateButton );
-    mTapDetector.Attach( imageView );
-
-    return imageView;
+    if( mTapDetector )
+    {
+      mTapDetector.Detach( control );
+    }
   }
+  /**
+   * @brief Called when the play button is clicked.
+   * @details This method is used to start playing the parent image-view of the clicked button.
+   * @param[in]  button  The button that has been clicked
+   * @return We return true to state that we handled the event
+   */
   bool OnPlayButtonClicked( Toolkit::Button button )
   {
-    Stage stage = Stage::GetCurrent();
+    Control control = ( button.GetParent() == mActorDog ) ? mActorDog : mActorLogo;
+    PlayAnimatedImage( control );
+
+    button.Unparent();
-    // With play button clicked, the static gif is replaced with animated gif.
-    if( button.GetParent() ==  mActorDog )
-    {
-      // remove the static gif view, the play button is also removed as its child.
-      CreateAnimImageView( 0 );
-    }
-    else // button.GetParent() ==  mActorLogo
-    {
-      // remove the static gif view, the play button is also removed as its child.
-      CreateAnimImageView( 1 );
-    }
     return true;
   }
-  void OnTap(Dali::Actor actor, const Dali::TapGesture& tap)
+  /**
+   * @brief Called when the animated image views are tapped.
+   * @details This method is used to pause the tapped animated image view.
+   * @param[in]  actor  The actor that's tapped
+   */
+  void OnTap( Dali::Actor actor, const Dali::TapGesture& /* tap */ )
   {
-    if( actor.GetParent() ==  mActorDog ) // "Animate Pixel Area" button is clicked
-    {
-      Animation animation = Animation::New( 3.f );
-      animation.AnimateTo( Property( mActorDog, ImageView::Property::PIXEL_AREA ), Vector4( -1.0, 0.0, 3.f, 1.f ), AlphaFunction::SIN );
-      animation.AnimateTo( Property( mActorDog, Actor::Property::SCALE_X ), 3.f, AlphaFunction::SIN );
-      animation.Play();
-    }
-    else if( actor.GetParent() ==  mActorLogo ) // "Animate Pixel Area" button is clicked
-    {
-      Animation animation = Animation::New( 3.f );
-      animation.AnimateTo( Property( mActorLogo, ImageView::Property::PIXEL_AREA ), Vector4( 0.0, 1.0, 1.f, 1.f ), AlphaFunction::SIN );
-      animation.Play();
-    }
-    else if( actor == mActorDog ) // stop the animated gif, switch to static view
-    {
-      CreateStaticImageView( 0 );
-    }
-    else if( actor == mActorLogo ) // stop the animated gif, switch to static view
-    {
-      CreateStaticImageView( 1 );
-    }
+    Control control = ( actor == mActorDog ) ? mActorDog : mActorLogo;
+    PauseAnimatedImage( control );
   }
-  bool OnTypeButtonClicked( Toolkit::Button button )
+  /**
+   * @brief Called when a radio button is clicked.
+   * @details This method is used to change between the different image types.
+   * @param[in]  button  The clicked radio-button
+   * @return We return true to state that we handled the event.
+   *
+   */
+  bool OnRadioButtonClicked( Toolkit::Button button )
   {
-    if( button == mGifButton )
-    {
-      mImageType = GIF;
-    }
-    else
-    {
-      mImageType = IMAGE_ARRAY;
-    }
-    Stage stage = Stage::GetCurrent();
-    CreateStaticImageView( 0 );
-    CreateStaticImageView( 1 );
+    mImageType = ( button == mGifButton ) ? ImageType::GIF : ImageType::IMAGE_ARRAY;
+
+    CreateAnimatedImageViews();
     return true;
   }
+  /**
+   * @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)
@@ -282,82 +300,60 @@ public:
     }
   }
-  Property::Value SetupViewProperties( ImageType type, StateType state, int index, bool wrap )
+  /**
+   * @brief Sets up the view properties appropriately.
+   * @param[in]  type   The Image type
+   * @param[in]  index  The index
+   * @return The set up property value
+   */
+  Property::Value SetupViewProperties( ImageType type, int index )
   {
     Property::Map map;
-    AddUrl( map, type, state, index );
-    AddWrap( map, wrap && state != 0, index );
+    AddUrl( map, type, index );
     AddCache( map, type, index );
     return Property::Value(map);
   }
-  void AddUrl( Property::Map& map, ImageType type, StateType state, int index )
+  /**
+   * @brief Adds the URL to the given map appropriately.
+   * @param[in/out]  map    The map to add the URL details to
+   * @param[in]      type   The Image type
+   * @param[in]      index  The index
+   */
+  void AddUrl( Property::Map& map, ImageType type, int index )
   {
-    const char* urls[2][2] =
-      { { STATIC_GIF_DOG, STATIC_GIF_LOGO },
-        { ANIMATE_GIF_DOG, ANIMATE_GIF_LOGO }
-      };
-    const char* urlFormats[2][2] =
-      { { STATIC_IMAGE_ARRAY_DOG, STATIC_IMAGE_ARRAY_LOGO } ,
-        { ANIMATE_IMAGE_ARRAY_DOG, ANIMATE_IMAGE_ARRAY_LOGO } };
-
-    int numFrames[2] = { 8, 15 };
-
-    if( type == GIF )
+    if( type == ImageType::GIF )
     {
-      map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( urls[state][index] ) );
+      map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( ANIMATED_GIF_URLS[ index ] ) );
     }
     else
     {
-      if( state == STATIC )
+      Property::Array frameUrls;
+      for( int i = 1; i <= ANIMATED_ARRAY_NUMBER_OF_FRAMES[ index ]; ++i )
       {
-        Property::Array frameUrls;
-        frameUrls.Add(Property::Value( urlFormats[0][index] ));
-        map.Add( Toolkit::ImageVisual::Property::URL, frameUrls );
-      }
-      else
-      {
-        Property::Array frameUrls;
-        for( int i=1; i<= numFrames[index]; ++i )
+        char* buffer;
+        int len = asprintf( &buffer, ANIMATED_ARRAY_URL_FORMATS[ index ], i );
+        if( len > 0 )
         {
-          char* buffer;
-          int len = asprintf( &buffer, urlFormats[1][index], i);
-          if( len > 0 )
-          {
-            std::string frameUrl(buffer);
-            free(buffer);
-            frameUrls.Add( Property::Value( frameUrl ) );
-          }
+          std::string frameUrl( buffer );
+          free( buffer );
+          frameUrls.Add( Property::Value( frameUrl ) );
         }
-        map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( frameUrls ) );
       }
+      map.Add( Toolkit::ImageVisual::Property::URL, Property::Value( frameUrls ) );
     }
   }
-  void AddWrap( Property::Map& map, bool wrap, int index )
-  {
-    WrapMode::Type wrapModes[2][2] = {
-      { WrapMode::REPEAT, WrapMode::DEFAULT  },
-      { WrapMode::DEFAULT, WrapMode::MIRRORED_REPEAT } };
-
-    if( wrap )
-    {
-      map
-        .Add( Toolkit::ImageVisual::Property::WRAP_MODE_U, wrapModes[index][0] )
-        .Add( Toolkit::ImageVisual::Property::WRAP_MODE_V, wrapModes[index][1] );
-    }
-    else
-    {
-      map
-        .Add( Toolkit::ImageVisual::Property::WRAP_MODE_U, WrapMode::DEFAULT )
-        .Add( Toolkit::ImageVisual::Property::WRAP_MODE_V, WrapMode::DEFAULT );
-    }
-  }
-
+  /**
+   * @brief Adds the cache properties, if required to the map.
+   * @param[in/out]  map    The map to add the URL details to
+   * @param[in]      type   The Image type
+   * @param[in]      index  The index
+   */
   void AddCache( Property::Map& map, ImageType type, int index )
   {
-    if( type == IMAGE_ARRAY )
+    if( type == ImageType::IMAGE_ARRAY )
     {
       map
         .Add( Toolkit::ImageVisual::Property::BATCH_SIZE, 4 )
@@ -367,16 +363,19 @@ public:
   }
 private:
-  Application&  mApplication;
-  Toolkit::ImageView mActorDog;
-  Toolkit::ImageView mActorLogo;
-  Toolkit::RadioButton mGifButton;
-  Toolkit::RadioButton mArrayButton;
-  TapGestureDetector mTapDetector;
-  ImageType mImageType;
+  Application&  mApplication; ///< A reference to the application.
+
+  Toolkit::ImageView mActorDog;  ///< The current dog image view.
+  Toolkit::ImageView mActorLogo; ///< The current logo image view.
+
+  Toolkit::RadioButton mGifButton;   ///< The Gif Radio Button.
+  Toolkit::RadioButton mArrayButton; ///< The Array Radio Button.
+
+  TapGestureDetector mTapDetector; ///< The tap detector.
+
+  ImageType mImageType; ///< The current Image type.
 };
-//
 int DALI_EXPORT_API main( int argc, char **argv )
 {
   Application application = Application::New( &argc, &argv );
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -23,6 +23,7 @@
 #include <dali/dali.h>
 #include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include "shared/view.h"
 using namespace Dali;
@@ -586,7 +587,12 @@ private:
    */
   ImageView CreateImage(const std::string& filename)
   {
-    ImageView actor = ImageView::New(filename);
+    Property::Map propertyMap;
+    propertyMap.Insert(Visual::Property::TYPE, Visual::IMAGE);
+    propertyMap.Insert(ImageVisual::Property::URL, filename);
+    propertyMap.Insert(DevelVisual::Property::VISUAL_FITTING_MODE, DevelVisual::FILL);
+    ImageView actor = ImageView::New();
+    actor.SetProperty(Toolkit::ImageView::Property::IMAGE, propertyMap);
     actor.SetParentOrigin(ParentOrigin::TOP_LEFT);
     actor.SetAnchorPoint(AnchorPoint::CENTER);
     return actor;
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -23,6 +23,8 @@
 #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>
+#include <dali-toolkit/public-api/visuals/image-visual-properties.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 using namespace Dali;
 using namespace Dali::Toolkit;
@@ -102,7 +104,12 @@ unsigned int ClippingItemFactory::GetNumberOfItems()
 Actor ClippingItemFactory::NewItem( unsigned int itemId )
 {
   // Create an image view for this item
-  ImageView actor = ImageView::New( IMAGE_PATHS[ itemId % NUM_IMAGES ] );
+  Property::Map propertyMap;
+  propertyMap.Insert(Visual::Property::TYPE,  Visual::IMAGE);
+  propertyMap.Insert(ImageVisual::Property::URL, IMAGE_PATHS[ itemId % NUM_IMAGES ] );
+  propertyMap.Insert(DevelVisual::Property::VISUAL_FITTING_MODE, DevelVisual::FILL);
+  ImageView actor = ImageView::New();
+  actor.SetProperty(Toolkit::ImageView::Property::IMAGE, propertyMap);
   // Add a border image child actor
   ImageView borderActor = ImageView::New();
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -16,6 +16,8 @@
  */
 #include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/image-loader/texture-manager.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 using namespace Dali;
@@ -48,28 +50,28 @@ private:
     Stage stage = Stage::GetCurrent();
     stage.KeyEventSignal().Connect(this, &ImageViewAlphaBlendApp::OnKeyEvent);
-    Vector4 green0 = Vector4( 0.f, 1.f, 0.f, 0.25f );
-    Vector4 green1 = Vector4( 0.f, 0.25f, 0.f, 0.25f );
-    BufferImage redGreen0 = CreateBufferImage( Color::RED, green0 );
-    BufferImage redGreen1 = CreateBufferImage( Color::RED, green1 );
+    auto green0 = Vector4( 0.f, 1.f, 0.f, 0.25f );
+    auto green1 = Vector4( 0.f, 0.25f, 0.f, 0.25f );
+    auto redGreen0 = CreateTexture( Color::RED, green0 );
+    auto redGreen1 = CreateTexture( Color::RED, green1 );
     float imageSize = 512.f;
-    Toolkit::ImageView imageView0 = Toolkit::ImageView::New( IMAGE_PATH );
+    Toolkit::ImageView imageView0 = CreateImageView( IMAGE_PATH );
     imageView0.SetSize(imageSize, imageSize);
     imageView0.SetParentOrigin( ParentOrigin::CENTER );
     imageView0.SetY( -imageSize*0.5f );
     stage.Add(imageView0);
-    Toolkit::ImageView imageView1 = Toolkit::ImageView::New( redGreen0 );
+    Toolkit::ImageView imageView1 = CreateImageView( redGreen0 );
     imageView1.SetParentOrigin( ParentOrigin::CENTER );
     imageView1.SetSize(imageSize, imageSize);
     imageView0.Add(imageView1);
-    Toolkit::ImageView imageView2 = Toolkit::ImageView::New( IMAGE_PATH );
+    Toolkit::ImageView imageView2 = CreateImageView( IMAGE_PATH );
     imageView2.SetSize(imageSize, imageSize);
     imageView2.SetParentOrigin( ParentOrigin::CENTER );
     imageView2.SetY( imageSize*0.5f );
     stage.Add(imageView2);
-    Toolkit::ImageView imageView3 = Toolkit::ImageView::New( redGreen1);
+    Toolkit::ImageView imageView3 = CreateImageView( redGreen1);
     imageView3.SetParentOrigin( ParentOrigin::CENTER );
     imageView3.SetSize(imageSize, imageSize);
     imageView2.Add(imageView3);
@@ -95,22 +97,41 @@ private:
     }
   }
-  BufferImage CreateBufferImage( const Vector4& color1, const Vector4& color2 )
+  std::string CreateTexture( const Vector4& color1, const Vector4& color2 )
   {
-    BufferImage image = BufferImage::New( 2, 1, Pixel::RGBA8888 );
-    PixelBuffer* pixelBuffer = image.GetBuffer();
-    pixelBuffer[0]=0xFF * color1.x;
-    pixelBuffer[1]=0xFF * color1.y;
-    pixelBuffer[2]=0xFF * color1.z;
-    pixelBuffer[3]=0xFF * color1.w;
-    pixelBuffer[4]=0xFF * color2.x;
-    pixelBuffer[5]=0xFF * color2.y;
-    pixelBuffer[6]=0xFF * color2.z;
-    pixelBuffer[7]=0xFF * color2.w;
-    image.Update();
-    return image;
+    const auto width = 2u;
+    const auto height = 1u;
+    auto size = width * height * 4;
+    auto pixelBuffer = new unsigned char[size];
+    pixelBuffer[0] = 0xFF * color1.x;
+    pixelBuffer[1] = 0xFF * color1.y;
+    pixelBuffer[2] = 0xFF * color1.z;
+    pixelBuffer[3] = 0xFF * color1.w;
+    pixelBuffer[4] = 0xFF * color2.x;
+    pixelBuffer[5] = 0xFF * color2.y;
+    pixelBuffer[6] = 0xFF * color2.z;
+    pixelBuffer[7] = 0xFF * color2.w;
+
+    auto pixelData = PixelData::New(pixelBuffer, size, width, height, Pixel::RGBA8888, PixelData::ReleaseFunction::DELETE_ARRAY);
+    auto texture = Texture::New( TextureType::TEXTURE_2D, Pixel::RGBA8888, width, height );
+    texture.Upload(pixelData);
+
+    return Toolkit::TextureManager::AddTexture(texture);
   }
+  template<typename TextT>
+  Toolkit::ImageView CreateImageView(TextT&& filename)
+  {
+    auto imageView = Toolkit::ImageView::New();
+
+    Property::Map propertyMap;
+    propertyMap.Insert(Toolkit::ImageVisual::Property::URL, std::forward<TextT>(filename));
+    propertyMap.Insert(Toolkit::Visual::Property::TYPE, Toolkit::Visual::IMAGE);
+    propertyMap.Insert(Toolkit::DevelVisual::Property::VISUAL_FITTING_MODE, Toolkit::DevelVisual::FILL);
+    imageView.SetProperty(Toolkit::ImageView::Property::IMAGE, propertyMap );
+
+    return imageView;
+  }
 private:
   Application&  mApplication;
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -21,6 +21,7 @@
 #include <dali/dali.h>
 #include <dali-toolkit/dali-toolkit.h>
 #include <dali-toolkit/devel-api/controls/buttons/button-devel.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 using namespace Dali;
 using namespace Dali::Toolkit;
@@ -866,7 +867,12 @@ public: // From ItemFactory
   virtual Actor NewItem(unsigned int itemId)
   {
     // Create an image view for this item
-    ImageView actor = ImageView::New( IMAGE_PATHS[ itemId % NUM_IMAGES ] );
+    Property::Map propertyMap;
+    propertyMap.Insert(Toolkit::Visual::Property::TYPE,  Visual::IMAGE);
+    propertyMap.Insert(ImageVisual::Property::URL, IMAGE_PATHS[ itemId % NUM_IMAGES ] );
+    propertyMap.Insert(DevelVisual::Property::VISUAL_FITTING_MODE, DevelVisual::FILL);
+    ImageView actor = ImageView::New();
+    actor.SetProperty( Toolkit::ImageView::Property::IMAGE, propertyMap );
     actor.SetZ( 0.0f );
     actor.SetPosition( INITIAL_OFFSCREEN_POSITION );
 /*
- * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2018 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.
@@ -16,7 +16,7 @@
  */
 #include <dali-toolkit/dali-toolkit.h>
-
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
 #include "shared/utility.h"
 using namespace Dali;
@@ -278,7 +278,13 @@ public:
     for( size_t i(0); i<actorCount; ++i )
     {
-      mImageView[i] = ImageView::New( ImagePath(i) );
+      mImageView[i] = ImageView::New();
+      Property::Map propertyMap;
+      propertyMap.Insert(Toolkit::ImageVisual::Property::URL, ImagePath(i));
+      propertyMap.Insert(Toolkit::Visual::Property::TYPE, Toolkit::Visual::IMAGE);
+      propertyMap.Insert(Toolkit::DevelVisual::Property::VISUAL_FITTING_MODE, Toolkit::DevelVisual::FILL);
+      mImageView[i].SetProperty(Toolkit::ImageView::Property::IMAGE, propertyMap);
+
       mImageView[i].SetSize( Vector3(0.0f,0.0f,0.0f) );
       mImageView[i].SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
       mParent.Add( mImageView[i] );
@@ -2,7 +2,7 @@
 Name:       com.samsung.dali-demo
 Summary:    The OpenGLES Canvas Core Demo
-Version:    1.3.7
+Version:    1.3.8
 Release:    1
 Group:      System/Libraries
 License:    Apache-2.0