Changes after TouchedSignal changes
[platform/core/uifw/dali-demo.git] / examples / image-scaling-irregular-grid / image-scaling-irregular-grid-example.cpp
index 6d77a2e..cb41669 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2020 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.
@@ -24,7 +24,7 @@
  * reduce the image to save memory, improve performance, and potentially display
  * a better small version of the image than if the default size were loaded.
  *
- * The functions CreateImage and CreateImageActor below show how to build an
+ * The functions CreateImage and CreateImageView below show how to build an
  * image using a scaling mode to have %Dali resize it during loading.
  *
  * This demo defaults to the SCALE_TO_FILL mode of ImageAttributes which makes
@@ -38,7 +38,7 @@
  * grid  using the button in the top-right of the toolbar.
  * A single image can be cycled by clicking the image directly.
  *
- * @see CreateImage CreateImageActor
+ * @see CreateImage CreateImageView
  */
 
 // EXTERNAL INCLUDES
 #include <map>
 #include <dali-toolkit/dali-toolkit.h>
 #include <iostream>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/controls/scroll-bar/scroll-bar.h>
+#include <random>       // std::default_random_engine
+#include <chrono>       // std::chrono::system_clock
 
 // INTERNAL INCLUDES
 #include "grid-flags.h"
@@ -61,10 +65,11 @@ namespace
 /** Controls the output of application logging. */
 //#define DEBUG_PRINT_DIAGNOSTICS;
 
-const char* BACKGROUND_IMAGE( DALI_IMAGE_DIR "background-gradient.jpg" );
-const char* TOOLBAR_IMAGE( DALI_IMAGE_DIR "top-bar.png" );
+const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-gradient.jpg" );
+const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
 const char* APPLICATION_TITLE( "Image Scaling Modes" );
-const char* TOGGLE_SCALING_IMAGE( DALI_IMAGE_DIR "icon-change.png" );
+const char* TOGGLE_SCALING_IMAGE( DEMO_IMAGE_DIR "icon-change.png" );
+const char* TOGGLE_SCALING_IMAGE_SELECTED( DEMO_IMAGE_DIR "icon-change-selected.png" );
 
 /** The width of the grid in whole grid cells. */
 const unsigned GRID_WIDTH = 9;
@@ -103,104 +108,95 @@ const unsigned NUM_IMAGE_SIZES = sizeof(IMAGE_SIZES) / sizeof(IMAGE_SIZES[0]);
  *  show the scaling. */
 const char* IMAGE_PATHS[] = {
 
-  DALI_IMAGE_DIR "dali-logo.png",
-  DALI_IMAGE_DIR "com.samsung.dali-demo.ico",
-  DALI_IMAGE_DIR "square_primitive_shapes.bmp",
-  DALI_IMAGE_DIR "gallery-large-14.wbmp",
+  DEMO_IMAGE_DIR "dali-logo.png",
+  DEMO_IMAGE_DIR "com.samsung.dali-demo.ico",
+  DEMO_IMAGE_DIR "square_primitive_shapes.bmp",
+  DEMO_IMAGE_DIR "gallery-large-14.wbmp",
 
   // Images that show aspect ratio changes clearly in primitive shapes:
 
-  DALI_IMAGE_DIR "portrait_screen_primitive_shapes.gif",
-  DALI_IMAGE_DIR "landscape_screen_primitive_shapes.gif",
+  DEMO_IMAGE_DIR "portrait_screen_primitive_shapes.gif",
+  DEMO_IMAGE_DIR "landscape_screen_primitive_shapes.gif",
 
   // Images from other demos that are tall, wide or just large:
 
-  DALI_IMAGE_DIR "gallery-large-1.jpg",
-  DALI_IMAGE_DIR "gallery-large-2.jpg",
-  DALI_IMAGE_DIR "gallery-large-3.jpg",
-  DALI_IMAGE_DIR "gallery-large-4.jpg",
-  DALI_IMAGE_DIR "gallery-large-5.jpg",
-  DALI_IMAGE_DIR "gallery-large-6.jpg",
-  DALI_IMAGE_DIR "gallery-large-7.jpg",
-  DALI_IMAGE_DIR "gallery-large-8.jpg",
-  DALI_IMAGE_DIR "gallery-large-9.jpg",
-  DALI_IMAGE_DIR "gallery-large-10.jpg",
-  DALI_IMAGE_DIR "gallery-large-11.jpg",
-  DALI_IMAGE_DIR "gallery-large-12.jpg",
-  DALI_IMAGE_DIR "gallery-large-13.jpg",
-  DALI_IMAGE_DIR "gallery-large-14.jpg",
-  DALI_IMAGE_DIR "gallery-large-15.jpg",
-  DALI_IMAGE_DIR "gallery-large-16.jpg",
-  DALI_IMAGE_DIR "gallery-large-17.jpg",
-  DALI_IMAGE_DIR "gallery-large-18.jpg",
-  DALI_IMAGE_DIR "gallery-large-19.jpg",
-  DALI_IMAGE_DIR "gallery-large-20.jpg",
-  DALI_IMAGE_DIR "gallery-large-21.jpg",
-
-  DALI_IMAGE_DIR "background-1.jpg",
-  DALI_IMAGE_DIR "background-2.jpg",
-  DALI_IMAGE_DIR "background-3.jpg",
-  DALI_IMAGE_DIR "background-4.jpg",
-  DALI_IMAGE_DIR "background-5.jpg",
-  DALI_IMAGE_DIR "background-blocks.jpg",
-  DALI_IMAGE_DIR "background-magnifier.jpg",
-
-  DALI_IMAGE_DIR "background-1.jpg",
-  DALI_IMAGE_DIR "background-2.jpg",
-  DALI_IMAGE_DIR "background-3.jpg",
-  DALI_IMAGE_DIR "background-4.jpg",
-  DALI_IMAGE_DIR "background-5.jpg",
-  DALI_IMAGE_DIR "background-blocks.jpg",
-  DALI_IMAGE_DIR "background-magnifier.jpg",
-
-  DALI_IMAGE_DIR "book-landscape-cover-back.jpg",
-  DALI_IMAGE_DIR "book-landscape-cover.jpg",
-  DALI_IMAGE_DIR "book-landscape-p1.jpg",
-  DALI_IMAGE_DIR "book-landscape-p2.jpg",
-
-  DALI_IMAGE_DIR "book-portrait-cover.jpg",
-  DALI_IMAGE_DIR "book-portrait-p1.jpg",
-  DALI_IMAGE_DIR "book-portrait-p2.jpg",
+  DEMO_IMAGE_DIR "gallery-large-1.jpg",
+  DEMO_IMAGE_DIR "gallery-large-2.jpg",
+  DEMO_IMAGE_DIR "gallery-large-3.jpg",
+  DEMO_IMAGE_DIR "gallery-large-4.jpg",
+  DEMO_IMAGE_DIR "gallery-large-5.jpg",
+  DEMO_IMAGE_DIR "gallery-large-6.jpg",
+  DEMO_IMAGE_DIR "gallery-large-7.jpg",
+  DEMO_IMAGE_DIR "gallery-large-8.jpg",
+  DEMO_IMAGE_DIR "gallery-large-9.jpg",
+  DEMO_IMAGE_DIR "gallery-large-10.jpg",
+  DEMO_IMAGE_DIR "gallery-large-11.jpg",
+  DEMO_IMAGE_DIR "gallery-large-12.jpg",
+  DEMO_IMAGE_DIR "gallery-large-13.jpg",
+  DEMO_IMAGE_DIR "gallery-large-14.jpg",
+  DEMO_IMAGE_DIR "gallery-large-15.jpg",
+  DEMO_IMAGE_DIR "gallery-large-16.jpg",
+  DEMO_IMAGE_DIR "gallery-large-17.jpg",
+  DEMO_IMAGE_DIR "gallery-large-18.jpg",
+  DEMO_IMAGE_DIR "gallery-large-19.jpg",
+  DEMO_IMAGE_DIR "gallery-large-20.jpg",
+  DEMO_IMAGE_DIR "gallery-large-21.jpg",
+
+  DEMO_IMAGE_DIR "background-1.jpg",
+  DEMO_IMAGE_DIR "background-2.jpg",
+  DEMO_IMAGE_DIR "background-3.jpg",
+  DEMO_IMAGE_DIR "background-4.jpg",
+  DEMO_IMAGE_DIR "background-5.jpg",
+  DEMO_IMAGE_DIR "background-blocks.jpg",
+  DEMO_IMAGE_DIR "background-magnifier.jpg",
+
+  DEMO_IMAGE_DIR "background-1.jpg",
+  DEMO_IMAGE_DIR "background-2.jpg",
+  DEMO_IMAGE_DIR "background-3.jpg",
+  DEMO_IMAGE_DIR "background-4.jpg",
+  DEMO_IMAGE_DIR "background-5.jpg",
+  DEMO_IMAGE_DIR "background-blocks.jpg",
+  DEMO_IMAGE_DIR "background-magnifier.jpg",
+
+  DEMO_IMAGE_DIR "book-landscape-cover-back.jpg",
+  DEMO_IMAGE_DIR "book-landscape-cover.jpg",
+  DEMO_IMAGE_DIR "book-landscape-p1.jpg",
+  DEMO_IMAGE_DIR "book-landscape-p2.jpg",
+
+  DEMO_IMAGE_DIR "book-portrait-cover.jpg",
+  DEMO_IMAGE_DIR "book-portrait-p1.jpg",
+  DEMO_IMAGE_DIR "book-portrait-p2.jpg",
   NULL
 };
 const unsigned NUM_IMAGE_PATHS = sizeof(IMAGE_PATHS) / sizeof(IMAGE_PATHS[0]) - 1u;
+const unsigned int INITIAL_IMAGES_TO_LOAD = 10;
 
 
 /**
- * Creates an Image
+ * Creates an ImageView
  *
  * @param[in] filename The path of the image.
  * @param[in] width The width of the image in pixels.
  * @param[in] height The height of the image in pixels.
  * @param[in] fittingMode The mode to use when scaling the image to fit the desired dimensions.
  */
-Image CreateImage(const std::string& filename, unsigned int width, unsigned int height, Dali::FittingMode::Type fittingMode )
+ImageView CreateImageView(const std::string& filename, int width, int height, Dali::FittingMode::Type fittingMode )
 {
-#ifdef DEBUG_PRINT_DIAGNOSTICS
-    fprintf( stderr, "CreateImage(%s, %u, %u, fittingMode=%u)\n", filename.c_str(), width, height, unsigned( fittingMode ) );
-#endif
-  Image image = ResourceImage::New( filename, ImageDimensions( width, height ), fittingMode, Dali::SamplingMode::BOX_THEN_LINEAR );
 
-  return image;
-}
+  ImageView imageView = ImageView::New();
 
-/**
- * Creates an ImageActor
- *
- * @param[in] filename The path of the image.
- * @param[in] width The width of the image in pixels.
- * @param[in] height The height of the image in pixels.
- * @param[in] fittingMode The mode to use when scaling the image to fit the desired dimensions.
- */
-ImageActor CreateImageActor(const std::string& filename, unsigned int width, unsigned int height, Dali::FittingMode::Type fittingMode )
-{
-  Image img = CreateImage( filename, width, height, fittingMode );
-  ImageActor actor = ImageActor::New( img );
-  actor.SetName( filename );
-  actor.SetParentOrigin(ParentOrigin::CENTER);
-  actor.SetAnchorPoint(AnchorPoint::CENTER);
+  Property::Map map;
+  map[Toolkit::ImageVisual::Property::URL] = filename;
+  map[Toolkit::ImageVisual::Property::DESIRED_WIDTH] = width;
+  map[Toolkit::ImageVisual::Property::DESIRED_HEIGHT] = height;
+  map[Toolkit::ImageVisual::Property::FITTING_MODE] = fittingMode;
+  imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, map );
+
+  imageView.SetProperty( Dali::Actor::Property::NAME, filename );
+  imageView.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::CENTER);
+  imageView.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::CENTER);
 
-  return actor;
+  return imageView;
 }
 
 /** Cycle the scaling mode options. */
@@ -267,7 +263,8 @@ public:
 
   ImageScalingIrregularGridController( Application& application )
   : mApplication( application ),
-    mScrolling( false )
+    mScrolling( false ),
+    mImagesLoaded( 0 )
   {
     std::cout << "ImageScalingIrregularGridController::ImageScalingIrregularGridController" << std::endl;
 
@@ -281,20 +278,32 @@ public:
   }
 
   /**
+   * Called everytime an ImageView has loaded it's image
+   */
+  void ResourceReadySignal( Toolkit::Control control )
+  {
+    mImagesLoaded++;
+    // To allow fast startup, we only place a small number of ImageViews on window first
+    if ( mImagesLoaded == INITIAL_IMAGES_TO_LOAD )
+    {
+      // Adding the ImageViews to the window will trigger loading of the Images
+      mGridActor.Add( mOffWindowImageViews );
+    }
+  }
+
+
+  /**
    * One-time setup in response to Application InitSignal.
    */
   void Create( Application& application )
   {
     std::cout << "ImageScalingIrregularGridController::Create" << std::endl;
 
-    // Get a handle to the stage:
-    Stage stage = Stage::GetCurrent();
+    // Get a handle to the window:
+    Window window = application.GetWindow();
 
     // Connect to input event signals:
-    stage.KeyEventSignal().Connect(this, &ImageScalingIrregularGridController::OnKeyEvent);
-
-    // Hide the indicator bar
-    mApplication.GetWindow().ShowIndicator(Dali::Window::INVISIBLE);
+    window.KeyEventSignal().Connect(this, &ImageScalingIrregularGridController::OnKeyEvent);
 
     // Create a default view with a default tool bar:
     mContentLayer = DemoHelper::CreateView( mApplication,
@@ -305,14 +314,19 @@ public:
                                             "" );
 
     // Create an image scaling toggle button. (right of toolbar)
-    Image toggleScalingImage = ResourceImage::New( TOGGLE_SCALING_IMAGE );
     Toolkit::PushButton toggleScalingButton = Toolkit::PushButton::New();
-    toggleScalingButton.SetBackgroundImage( toggleScalingImage );
+    toggleScalingButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, TOGGLE_SCALING_IMAGE );
+    toggleScalingButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, TOGGLE_SCALING_IMAGE_SELECTED );
     toggleScalingButton.ClickedSignal().Connect( this, &ImageScalingIrregularGridController::OnToggleScalingTouched );
-    mToolBar.AddControl( toggleScalingButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
+    mToolBar.AddControl( toggleScalingButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HORIZONTAL_RIGHT, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 
     SetTitle( APPLICATION_TITLE );
 
+    mOffWindowImageViews = Actor::New();
+    mOffWindowImageViews.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
+    mOffWindowImageViews.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::CENTER);
+    mOffWindowImageViews.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+
     // Build the main content of the widow:
     PopulateContentLayer( DEFAULT_SCALING_MODE );
   }
@@ -322,19 +336,19 @@ public:
    */
   void PopulateContentLayer( const Dali::FittingMode::Type fittingMode )
   {
-    Stage stage = Stage::GetCurrent();
-    Vector2 stageSize = stage.GetSize();
+    Window window = mApplication.GetWindow();
+    Vector2 windowSize = window.GetSize();
 
     float fieldHeight;
-    Actor imageField = BuildImageField( stageSize.x, GRID_WIDTH, GRID_MAX_HEIGHT, fittingMode, fieldHeight );
+    Actor imageField = BuildImageField( windowSize.x, GRID_WIDTH, GRID_MAX_HEIGHT, fittingMode, fieldHeight );
 
     mScrollView = ScrollView::New();
 
     mScrollView.ScrollStartedSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollStarted );
     mScrollView.ScrollCompletedSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollCompleted );
 
-    mScrollView.SetAnchorPoint(AnchorPoint::CENTER);
-    mScrollView.SetParentOrigin(ParentOrigin::CENTER);
+    mScrollView.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::CENTER);
+    mScrollView.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::CENTER);
 
     mScrollView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 
@@ -343,12 +357,12 @@ public:
 
     // Restrict scrolling to mostly vertical only, but with some horizontal wiggle-room:
 
-    RulerPtr rulerX = new FixedRuler( stageSize.width ); //< Pull the view back to the grid's centre-line when touch is release using a snapping ruler.
-    rulerX->SetDomain( RulerDomain( stageSize.width * -0.125f, stageSize.width * 1.125f ) ); //< Scroll slightly left/right of image field.
+    RulerPtr rulerX = new FixedRuler( windowSize.width ); //< Pull the view back to the grid's centre-line when touch is release using a snapping ruler.
+    rulerX->SetDomain( RulerDomain( windowSize.width * -0.125f, windowSize.width * 1.125f ) ); //< Scroll slightly left/right of image field.
     mScrollView.SetRulerX ( rulerX );
 
-    RulerPtr rulerY = new DefaultRuler(); //< Snap in multiples of a screen / stage height
-    rulerY->SetDomain( RulerDomain( - fieldHeight * 0.5f + stageSize.height * 0.5f - GRID_CELL_PADDING, fieldHeight * 0.5f + stageSize.height * 0.5f + GRID_CELL_PADDING ) );
+    RulerPtr rulerY = new DefaultRuler(); //< Snap in multiples of a screen / window height
+    rulerY->SetDomain( RulerDomain( - fieldHeight * 0.5f + windowSize.height * 0.5f - GRID_CELL_PADDING, fieldHeight * 0.5f + windowSize.height * 0.5f + GRID_CELL_PADDING ) );
     mScrollView.SetRulerY ( rulerY );
 
     mContentLayer.Add( mScrollView );
@@ -356,18 +370,18 @@ public:
     mGridActor = imageField;
 
     // Create the scroll bar
-    mScrollBarVertical = ScrollBar::New(Toolkit::ScrollBar::Vertical);
-    mScrollBarVertical.SetParentOrigin(ParentOrigin::TOP_RIGHT);
-    mScrollBarVertical.SetAnchorPoint(AnchorPoint::TOP_RIGHT);
+    mScrollBarVertical = ScrollBar::New(Toolkit::ScrollBar::VERTICAL);
+    mScrollBarVertical.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::TOP_RIGHT);
+    mScrollBarVertical.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::TOP_RIGHT);
     mScrollBarVertical.SetResizePolicy(Dali::ResizePolicy::FILL_TO_PARENT, Dali::Dimension::HEIGHT);
     mScrollBarVertical.SetResizePolicy(Dali::ResizePolicy::FIT_TO_CHILDREN, Dali::Dimension::WIDTH);
     mScrollView.Add(mScrollBarVertical);
 
-    mScrollBarHorizontal = ScrollBar::New(Toolkit::ScrollBar::Horizontal);
-    mScrollBarHorizontal.SetParentOrigin(ParentOrigin::BOTTOM_LEFT);
-    mScrollBarHorizontal.SetAnchorPoint(AnchorPoint::TOP_LEFT);
+    mScrollBarHorizontal = ScrollBar::New(Toolkit::ScrollBar::HORIZONTAL);
+    mScrollBarHorizontal.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::BOTTOM_LEFT);
+    mScrollBarHorizontal.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::TOP_LEFT);
     mScrollBarHorizontal.SetResizePolicy(Dali::ResizePolicy::FIT_TO_CHILDREN, Dali::Dimension::WIDTH);
-    mScrollBarHorizontal.SetOrientation(Quaternion(Radian( 1.5f * Math::PI ), Vector3::ZAXIS));
+    mScrollBarHorizontal.SetProperty( Actor::Property::ORIENTATION, Quaternion( Quaternion( Radian( 1.5f * Math::PI ), Vector3::ZAXIS) ) );
     mScrollView.Add(mScrollBarHorizontal);
 
     mScrollView.OnRelayoutSignal().Connect( this, &ImageScalingIrregularGridController::OnScrollViewRelayout );
@@ -379,7 +393,7 @@ public:
   void OnScrollViewRelayout(Actor actor)
   {
     // Make the height of the horizontal scroll bar to be the same as the width of scroll view.
-    mScrollBarHorizontal.SetSize(Vector2(0.0f, mScrollView.GetRelayoutSize( Dimension::WIDTH) ));
+    mScrollBarHorizontal.SetProperty( Actor::Property::SIZE, Vector2(0.0f, mScrollView.GetRelayoutSize( Dimension::WIDTH) ));
   }
 
   /**
@@ -405,8 +419,10 @@ public:
       }
     }
     // Stir-up the list to get some nice irregularity in the generated field:
-    std::random_shuffle( configurations.begin(), configurations.end() );
-    std::random_shuffle( configurations.begin(), configurations.end() );
+    unsigned int seed = std::chrono::system_clock::now().time_since_epoch().count();
+    std::shuffle( configurations.begin(), configurations.end(), std::default_random_engine(seed) );
+    seed = std::chrono::system_clock::now().time_since_epoch().count();
+    std::shuffle( configurations.begin(), configurations.end(), std::default_random_engine(seed) );
 
     // Place the images in the grid:
 
@@ -439,8 +455,8 @@ public:
 
     Actor gridActor = Actor::New();
     gridActor.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
-    gridActor.SetParentOrigin( ParentOrigin::CENTER );
-    gridActor.SetAnchorPoint( AnchorPoint::CENTER );
+    gridActor.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
+    gridActor.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 
     // Work out the constants of the grid and cell dimensions and positions:
     const float cellWidth = fieldWidth / gridWidth;
@@ -449,22 +465,33 @@ public:
     outFieldHeight = actualGridHeight * cellHeight;
     const Vector2 gridOrigin = Vector2( -fieldWidth * 0.5f, -outFieldHeight * 0.5 );
 
+     unsigned int count = 0;
     // Build the image actors in their right locations in their parent's frame:
-    for( std::vector<PositionedImage>::const_iterator i = placedImages.begin(), end = placedImages.end(); i != end; ++i )
+    for( std::vector<PositionedImage>::const_iterator i = placedImages.begin(), end = placedImages.end(); i != end; ++i, ++count )
     {
       const PositionedImage& imageSource = *i;
       const Vector2 imageSize = imageSource.imageGridDims * cellSize - Vector2( GRID_CELL_PADDING * 2, GRID_CELL_PADDING * 2 );
       const Vector2 imageRegionCorner = gridOrigin + cellSize * Vector2( imageSource.cellX, imageSource.cellY );
       const Vector2 imagePosition = imageRegionCorner + Vector2( GRID_CELL_PADDING , GRID_CELL_PADDING ) + imageSize * 0.5f;
 
-      ImageActor image = CreateImageActor( imageSource.configuration.path, imageSize.x, imageSize.y, fittingMode );
-      image.SetPosition( Vector3( imagePosition.x, imagePosition.y, 0 ) );
-      image.SetSize( imageSize );
+      ImageView image = CreateImageView( imageSource.configuration.path, imageSize.x, imageSize.y, fittingMode );
+      image.SetProperty( Actor::Property::POSITION, Vector3( imagePosition.x, imagePosition.y, 0 ) );
+      image.SetProperty( Actor::Property::SIZE, imageSize );
       image.TouchedSignal().Connect( this, &ImageScalingIrregularGridController::OnTouchImage );
-      mFittingModes[image.GetId()] = fittingMode;
-      mSizes[image.GetId()] = imageSize;
-
-      gridActor.Add( image );
+      image.ResourceReadySignal().Connect( this, &ImageScalingIrregularGridController::ResourceReadySignal );
+      mFittingModes[image.GetProperty< int >( Actor::Property::ID )] = fittingMode;
+      mResourceUrls[image.GetProperty< int >( Actor::Property::ID )] = imageSource.configuration.path;
+      mSizes[image.GetProperty< int >( Actor::Property::ID )] = imageSize;
+      if ( count < INITIAL_IMAGES_TO_LOAD )
+      {
+        gridActor.Add( image );
+      }
+      else
+      {
+        // Store the ImageView in an offwindow actor until the inital batch of ImageViews have finished loading their images
+        // Required
+        mOffWindowImageViews.Add( image );
+      }
     }
 
     return gridActor;
@@ -473,14 +500,13 @@ public:
  /**
   * Upon Touching an image (Release), change its scaling mode and make it spin, provided we're not scrolling.
   * @param[in] actor The actor touched
-  * @param[in] event The TouchEvent.
+  * @param[in] event The Touch information.
   */
   bool OnTouchImage( Actor actor, const TouchEvent& event )
   {
-    if( (event.points.size() > 0) && (!mScrolling) )
+    if( ( event.GetPointCount() > 0 ) && ( !mScrolling ) )
     {
-      TouchPoint point = event.points[0];
-      if(point.state == TouchPoint::Up)
+      if( event.GetState( 0 ) == PointState::UP )
       {
         // Spin the image a few times:
         Animation animation = Animation::New(SPIN_DURATION);
@@ -488,14 +514,22 @@ public:
         animation.Play();
 
         // Change the scaling mode:
-        const unsigned id = actor.GetId();
+        const unsigned id = actor.GetProperty< int >( Actor::Property::ID );
         Dali::FittingMode::Type newMode = NextMode( mFittingModes[id] );
-        const Vector2 imageSize = mSizes[actor.GetId()];
+        const Vector2 imageSize = mSizes[actor.GetProperty< int >( Actor::Property::ID )];
+
+        ImageView imageView = ImageView::DownCast( actor );
+        if( imageView)
+        {
+          Property::Map map;
+          map[Visual::Property::TYPE] = Visual::IMAGE;
+          map[ImageVisual::Property::URL] = mResourceUrls[id];
+          map[ImageVisual::Property::DESIRED_WIDTH] = imageSize.width + 0.5f;
+          map[ImageVisual::Property::DESIRED_HEIGHT] =  imageSize.height + 0.5f;
+          map[ImageVisual::Property::FITTING_MODE] = newMode;
+          imageView.SetProperty( ImageView::Property::IMAGE, map );
+        }
 
-        ImageActor imageActor = ImageActor::DownCast( actor );
-        Image oldImage = imageActor.GetImage();
-        Image newImage = CreateImage( ResourceImage::DownCast(oldImage).GetUrl(), imageSize.width + 0.5f, imageSize.height + 0.5f, newMode );
-        imageActor.SetImage( newImage );
         mFittingModes[id] = newMode;
       }
     }
@@ -508,7 +542,7 @@ public:
   */
   void OnKeyEvent(const KeyEvent& event)
   {
-    if( event.state == KeyEvent::Down )
+    if( event.GetState() == KeyEvent::DOWN )
     {
       if( IsKey( event, Dali::DALI_KEY_ESCAPE )
           || IsKey( event, Dali::DALI_KEY_BACK ) )
@@ -529,17 +563,26 @@ public:
 
     for( unsigned i = 0; i < numChildren; ++i )
     {
-      ImageActor gridImageActor = ImageActor::DownCast( mGridActor.GetChildAt( i ) );
-      if( gridImageActor )
+      ImageView gridImageView = ImageView::DownCast( mGridActor.GetChildAt( i ) );
+      if( gridImageView )
       {
         // Cycle the scaling mode options:
-        const Vector2 imageSize = mSizes[gridImageActor.GetId()];
-        Dali::FittingMode::Type newMode = NextMode( mFittingModes[gridImageActor.GetId()] );
-        Image oldImage = gridImageActor.GetImage();
-        Image newImage = CreateImage(ResourceImage::DownCast(oldImage).GetUrl(), imageSize.width, imageSize.height, newMode );
-        gridImageActor.SetImage( newImage );
+        unsigned int id = gridImageView.GetProperty< int >( Actor::Property::ID );
+
+        const Vector2 imageSize = mSizes[ id ];
+        Dali::FittingMode::Type newMode = NextMode( mFittingModes[ id ] );
 
-        mFittingModes[gridImageActor.GetId()] = newMode;
+        Property::Map map;
+        map[Visual::Property::TYPE] = Visual::IMAGE;
+        map[ImageVisual::Property::URL] = mResourceUrls[id];
+        map[ImageVisual::Property::DESIRED_WIDTH] = imageSize.width;
+        map[ImageVisual::Property::DESIRED_HEIGHT] =  imageSize.height;
+        map[ImageVisual::Property::FITTING_MODE] = newMode;
+        gridImageView.SetProperty( ImageView::Property::IMAGE, map );
+
+
+
+        mFittingModes[ id ] = newMode;
 
         SetTitle( std::string( newMode == FittingMode::SHRINK_TO_FIT ? "SHRINK_TO_FIT" : newMode == FittingMode::SCALE_TO_FILL ?  "SCALE_TO_FILL" : newMode == FittingMode::FIT_WIDTH ? "FIT_WIDTH" : "FIT_HEIGHT" ) );
       }
@@ -557,7 +600,7 @@ public:
     {
       mTitleActor = DemoHelper::CreateToolBarLabel( "" );
       // Add title to the tool bar.
-      mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter );
+      mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Alignment::HORIZONTAL_CENTER );
     }
 
     mTitleActor.SetProperty( TextLabel::Property::TEXT, title );
@@ -591,27 +634,21 @@ private:
   Toolkit::ToolBar mToolBar;          ///< The View's Toolbar.
   TextLabel mTitleActor;               ///< The Toolbar's Title.
   Actor mGridActor;                   ///< The container for the grid of images
+  Actor mOffWindowImageViews;          ///< ImageViews held off window until the inital batch have loaded their images
   ScrollView mScrollView;             ///< ScrollView UI Component
   ScrollBar mScrollBarVertical;
   ScrollBar mScrollBarHorizontal;
   bool mScrolling;                    ///< ScrollView scrolling state (true = scrolling, false = stationary)
   std::map<unsigned, Dali::FittingMode::Type> mFittingModes; ///< Stores the current scaling mode of each image, keyed by image actor id.
+  std::map<unsigned, std::string> mResourceUrls; ///< Stores the url of each image, keyed by image actor id.
   std::map<unsigned, Vector2> mSizes; ///< Stores the current size of each image, keyed by image actor id.
+  unsigned int mImagesLoaded;         ///< How many images have been loaded
 };
 
-void RunTest( Application& application )
+int DALI_EXPORT_API main( int argc, char **argv )
 {
+  Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
   ImageScalingIrregularGridController test( application );
-
   application.MainLoop();
-}
-
-/** Entry point for Linux & Tizen applications */
-int main( int argc, char **argv )
-{
-  Application application = Application::New( &argc, &argv, DALI_DEMO_THEME_PATH );
-
-  RunTest( application );
-
   return 0;
 }