Updates following Visual Property Changes

Change-Id: Ie5d0a5aa32a0fcee1448f4fb69277d4476048fdd

Updates following Visual Property Changes
Change-Id: Ie5d0a5aa32a0fcee1448f4fb69277d4476048fdd
Adeel Kazmi
1 parent dc63a4c9
Showing 20 changed files with 196 additions and 213 deletions
com.samsung.dali-demo.xml
demo/dali-demo.cpp
examples/dissolve-effect/dissolve-effect-example.cpp
examples/gradients/gradients-example.cpp
examples/image-scaling-and-filtering/image-scaling-and-filtering-example.cpp
examples/item-view/item-view-example.cpp
examples/mesh-renderer/mesh-renderer-example.cpp → examples/mesh-visual/mesh-visual-example.cpp
examples/motion-blur/motion-blur-example.cpp
examples/primitive-shapes/primitive-shapes-example.cpp
examples/scroll-view/scroll-view-example.cpp
examples/text-scrolling/text-scrolling-example.cpp
examples/video-view/video-view-example.cpp
resources/scripts/animated-colors.json
resources/scripts/background.json
resources/scripts/clock.json
resources/scripts/table-view.json
resources/style/demo-theme.json.in
resources/style/mobile/demo-theme.json.in
shared/dali-demo-strings.h
shared/view.h
@@ -163,8 +163,8 @@
 	<ui-application appid="video-view.example" exec="/usr/apps/com.samsung.dali-demo/bin/video-view.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Video View</label>
 	</ui-application>
-	<ui-application appid="mesh-renderer.example" exec="/usr/apps/com.samsung.dali-demo/bin/mesh-renderer.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
-		<label>Mesh Renderer</label>
+	<ui-application appid="mesh-visual.example" exec="/usr/apps/com.samsung.dali-demo/bin/mesh-visual.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Mesh Visual</label>
 	</ui-application>
 	<ui-application appid="primitive-shapes.example" exec="/usr/apps/com.samsung.dali-demo/bin/primitive-shapes.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Primitive Shapes</label>
@@ -78,7 +78,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("tilt.example", DALI_DEMO_STR_TITLE_TILT_SENSOR));
   demo.AddExample(Example("effects-view.example", DALI_DEMO_STR_TITLE_EFFECTS_VIEW));
   demo.AddExample(Example("native-image-source.example", DALI_DEMO_STR_TITLE_NATIVE_IMAGE_SOURCE));
-  demo.AddExample(Example("mesh-renderer.example", DALI_DEMO_STR_TITLE_MESH_RENDERER));
+  demo.AddExample(Example("mesh-visual.example", DALI_DEMO_STR_TITLE_MESH_VISUAL));
   demo.AddExample(Example("primitive-shapes.example", DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES));
   demo.SortAlphabetically( true );
@@ -91,13 +91,13 @@ Toolkit::ImageView CreateStageFillingImageView( const char * const imagePath )
   Size stageSize = Stage::GetCurrent().GetSize();
   Toolkit::ImageView imageView = Toolkit::ImageView::New();
   Property::Map map;
-  map["rendererType"] = "IMAGE";
-  map["url"] = imagePath;
-  map["desiredWidth"] = stageSize.x;
-  map["desiredHeight"] = stageSize.y;
-  map["fittingMode"] = "SCALE_TO_FILL";
-  map["samplingMode"] = "BOX_THEN_LINEAR";
-  map["synchronousLoading"] = true;
+  map[Toolkit::Visual::Property::TYPE] = Toolkit::Visual::IMAGE;
+  map[Toolkit::ImageVisual::Property::URL] = imagePath;
+  map[Toolkit::ImageVisual::Property::DESIRED_WIDTH] = stageSize.x;
+  map[Toolkit::ImageVisual::Property::DESIRED_HEIGHT] = stageSize.y;
+  map[Toolkit::ImageVisual::Property::FITTING_MODE] = FittingMode::SCALE_TO_FILL;
+  map[Toolkit::ImageVisual::Property::SAMPLING_MODE] = SamplingMode::BOX_THEN_LINEAR;
+  map[Toolkit::ImageVisual::Property::SYNCHRONOUS_LOADING] = true;
   imageView.SetProperty( Toolkit::ImageView::Property::IMAGE, map );
   return imageView;
@@ -77,7 +77,7 @@ public:
 // ---- Gradient for background
-    mGradientMap.Insert("rendererType",  "GRADIENT");
+    mGradientMap.Insert( Visual::Property::TYPE,  Visual::GRADIENT );
     Property::Array stopOffsets;
     stopOffsets.PushBack( 0.0f );
@@ -85,7 +85,7 @@ public:
     stopOffsets.PushBack( 0.6f );
     stopOffsets.PushBack( 0.8f );
     stopOffsets.PushBack( 1.0f );
-    mGradientMap.Insert("stopOffset", stopOffsets );
+    mGradientMap.Insert( GradientVisual::Property::STOP_OFFSET, stopOffsets );
     Property::Array stopColors;
     stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 255.f )/255.f );
@@ -93,7 +93,7 @@ public:
     stopColors.PushBack( Vector4( 214.f, 37.f, 139.f, 191.f )/255.f );
     stopColors.PushBack( Vector4( 129.f, 198.f, 193.f, 150.f )/255.f );
     stopColors.PushBack( Color::YELLOW );
-    mGradientMap.Insert("stopColor",   stopColors);
+    mGradientMap.Insert( GradientVisual::Property::STOP_COLOR, stopColors );
     OnChangeIconClicked( changeButton );
   }
@@ -106,30 +106,30 @@ public:
     {
       case 0: // linear gradient with units as objectBoundingBox
       {
-        gradientMap.Insert("startPosition",   Vector2( 0.5f, 0.5f ));
-        gradientMap.Insert("endPosition",    Vector2( -0.5f, -0.5f ));
+        gradientMap.Insert( GradientVisual::Property::START_POSITION,   Vector2(  0.5f,  0.5f ) );
+        gradientMap.Insert( GradientVisual::Property::END_POSITION,     Vector2( -0.5f, -0.5f ) );
         break;
       }
       case 1: // linear gradient with units as userSpaceOnUse
       {
         Vector2 halfStageSize = Stage::GetCurrent().GetSize()*0.5f;
-        gradientMap.Insert("startPosition",   halfStageSize);
-        gradientMap.Insert("endPosition",    -halfStageSize );
-        gradientMap.Insert("units",  "USER_SPACE");
+        gradientMap.Insert( GradientVisual::Property::START_POSITION,  halfStageSize );
+        gradientMap.Insert( GradientVisual::Property::END_POSITION,   -halfStageSize );
+        gradientMap.Insert( GradientVisual::Property::UNITS, GradientVisual::Units::USER_SPACE );
         break;
       }
       case 2: // radial gradient with units as objectBoundingBox
       {
-        gradientMap.Insert("center",  Vector2(0.5f, 0.5f));
-        gradientMap.Insert("radius",  1.414f);
+        gradientMap.Insert( GradientVisual::Property::CENTER, Vector2( 0.5f, 0.5f ) );
+        gradientMap.Insert( GradientVisual::Property::RADIUS, 1.414f );
         break;
       }
       default: // radial gradient with units as userSpaceOnUse
       {
         Vector2 stageSize = Stage::GetCurrent().GetSize();
-        gradientMap.Insert("center",  stageSize*0.5f);
-        gradientMap.Insert("radius",  stageSize.Length());
-        gradientMap.Insert("units",  "USER_SPACE");
+        gradientMap.Insert( GradientVisual::Property::CENTER, stageSize * 0.5f );
+        gradientMap.Insert( GradientVisual::Property::RADIUS, stageSize.Length());
+        gradientMap.Insert( GradientVisual::Property::UNITS,  GradientVisual::Units::USER_SPACE );
         break;
       }
     }
@@ -177,12 +177,12 @@ public:
     // Background image:
     Dali::Property::Map backgroundImage;
-    backgroundImage.Insert( "rendererType",  "IMAGE" );
-    backgroundImage.Insert( "url",  BACKGROUND_IMAGE );
-    backgroundImage.Insert( "desiredWidth",   stage.GetSize().width );
-    backgroundImage.Insert( "desiredHeight",   stage.GetSize().height );
-    backgroundImage.Insert( "fittingMode",   "SCALE_TO_FILL" );
-    backgroundImage.Insert( "samplingMode",   "BOX_THEN_NEAREST" );
+    backgroundImage.Insert( Toolkit::Visual::Property::TYPE,  Toolkit::Visual::IMAGE );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::URL,  BACKGROUND_IMAGE );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::DESIRED_WIDTH, stage.GetSize().width );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::DESIRED_HEIGHT, stage.GetSize().height );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::FITTING_MODE,   FittingMode::SCALE_TO_FILL );
+    backgroundImage.Insert( Toolkit::ImageVisual::Property::SAMPLING_MODE,   SamplingMode::BOX_THEN_NEAREST );
     Toolkit::ImageView background = Toolkit::ImageView::New();
     background.SetProperty( Toolkit::ImageView::Property::IMAGE, backgroundImage );
@@ -878,10 +878,10 @@ public: // From ItemFactory
     borderActor.SetColorMode( USE_PARENT_COLOR );
     Property::Map borderProperty;
-    borderProperty.Insert( "rendererType", "BORDER" );
-    borderProperty.Insert( "borderColor", Color::WHITE );
-    borderProperty.Insert( "borderSize", ITEM_BORDER_SIZE );
-    borderProperty.Insert( "antiAliasing", true );
+    borderProperty.Insert( Visual::Property::TYPE, Visual::BORDER );
+    borderProperty.Insert( BorderVisual::Property::COLOR, Color::WHITE );
+    borderProperty.Insert( BorderVisual::Property::SIZE, ITEM_BORDER_SIZE );
+    borderProperty.Insert( BorderVisual::Property::ANTI_ALIASING, true );
     borderActor.SetProperty( ImageView::Property::IMAGE, borderProperty );
     actor.Add(borderActor);
@@ -902,8 +902,8 @@ public: // From ItemFactory
     checkbox.SetZ( 0.1f );
     Property::Map solidColorProperty;
-    solidColorProperty.Insert( "rendererType", "COLOR" );
-    solidColorProperty.Insert( "mixColor", Vector4(0.f, 0.f, 0.f, 0.6f) );
+    solidColorProperty.Insert( Visual::Property::TYPE, Visual::COLOR );
+    solidColorProperty.Insert( ColorVisual::Property::MIX_COLOR, Vector4(0.f, 0.f, 0.f, 0.6f) );
     checkbox.SetProperty( ImageView::Property::IMAGE, solidColorProperty );
     if( MODE_REMOVE_MANY  != mMode &&
@@ -9,7 +9,7 @@ namespace
   //Keeps information about each model for access.
   struct Model
   {
-    Control control; // Control housing the mesh renderer of the model.
+    Control control; // Control housing the mesh visual of the model.
     Vector2 rotation; // Keeps track of rotation about x and y axis for manual rotation.
     Animation rotationAnimation; // Automatically rotates when left alone.
   };
@@ -31,12 +31,12 @@ namespace
   const char * const TEXTURES_PATH( DEMO_IMAGE_DIR "" );
-  //Possible shader options.
-  const char * const SHADER_TYPE[] =
+  //Possible shading modes.
+  MeshVisual::ShadingMode::Value SHADING_MODE_TABLE[] =
   {
-    "ALL_TEXTURES",
-    "DIFFUSE_TEXTURE",
-    "TEXTURELESS"
+    MeshVisual::ShadingMode::TEXTURED_WITH_DETAILED_SPECULAR_LIGHTING,
+    MeshVisual::ShadingMode::TEXTURED_WITH_SPECULAR_LIGHTING,
+    MeshVisual::ShadingMode::TEXTURELESS_WITH_DIFFUSE_LIGHTING
   };
   //Files for background and toolbar
@@ -54,23 +54,23 @@ namespace
 } //End namespace
-class MeshRendererController : public ConnectionTracker
+class MeshVisualController : public ConnectionTracker
 {
 public:
-  MeshRendererController( Application& application )
+  MeshVisualController( Application& application )
   : mApplication( application ),   //Store handle to the application.
     mModelIndex( 1 ),              //Start with metal robot.
-    mShaderIndex( 0 ),             //Start with all textures.
+    mShadingModeIndex( 0 ),        //Start with textured with detailed specular lighting.
     mTag( -1 ),                    //Non-valid default, which will get set to a correct value when used.
     mSelectedModelIndex( -1 ),     //Non-valid default, which will get set to a correct value when used.
     mPaused( false )               //Animations play by default.
   {
     // Connect to the Application's Init signal
-    mApplication.InitSignal().Connect( this, &MeshRendererController::Create );
+    mApplication.InitSignal().Connect( this, &MeshVisualController::Create );
   }
-  ~MeshRendererController()
+  ~MeshVisualController()
   {
   }
@@ -89,7 +89,7 @@ public:
     LoadScene();
     //Allow for exiting of the application via key presses.
-    stage.KeyEventSignal().Connect( this, &MeshRendererController::OnKeyEvent );
+    stage.KeyEventSignal().Connect( this, &MeshVisualController::OnKeyEvent );
   }
   //Sets up the on-screen elements.
@@ -105,10 +105,10 @@ public:
     baseLayer.SetBehavior( Layer::LAYER_2D ); //We use a 2D layer as this is closer to UI work than full 3D scene creation.
     baseLayer.SetDepthTestDisabled( false ); //Enable depth testing, as otherwise the 2D layer would not do so.
     baseLayer.RegisterProperty( "Tag", LAYER_TAG ); //Used to differentiate between different kinds of actor.
-    baseLayer.TouchedSignal().Connect( this, &MeshRendererController::OnTouch );
+    baseLayer.TouchedSignal().Connect( this, &MeshVisualController::OnTouch );
     stage.Add( baseLayer );
-    //Add containers to house each renderer-holding-actor.
+    //Add containers to house each visual-holding-actor.
     for( int i = 0; i < NUM_MESHES; i++ )
     {
       mContainers[i] = Actor::New();
@@ -139,7 +139,7 @@ public:
         mContainers[i].SetAnchorPoint( AnchorPoint::TOP_RIGHT );
       }
-      mContainers[i].TouchedSignal().Connect( this, &MeshRendererController::OnTouch );
+      mContainers[i].TouchedSignal().Connect( this, &MeshVisualController::OnTouch );
       baseLayer.Add( mContainers[i] );
     }
@@ -174,7 +174,7 @@ public:
     //Create button for model changing
     Toolkit::PushButton modelButton = Toolkit::PushButton::New();
     modelButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-    modelButton.ClickedSignal().Connect( this, &MeshRendererController::OnChangeModelClicked );
+    modelButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeModelClicked );
     modelButton.SetParentOrigin( Vector3( 0.05, 0.95, 0.5 ) ); //Offset from bottom left
     modelButton.SetAnchorPoint( AnchorPoint::BOTTOM_LEFT );
     modelButton.SetLabelText( "Change Model" );
@@ -183,7 +183,7 @@ public:
     //Create button for shader changing
     Toolkit::PushButton shaderButton = Toolkit::PushButton::New();
     shaderButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-    shaderButton.ClickedSignal().Connect( this, &MeshRendererController::OnChangeShaderClicked );
+    shaderButton.ClickedSignal().Connect( this, &MeshVisualController::OnChangeShaderClicked );
     shaderButton.SetParentOrigin( Vector3( 0.95, 0.95, 0.5 ) ); //Offset from bottom right
     shaderButton.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
     shaderButton.SetLabelText( "Change Shader" );
@@ -192,7 +192,7 @@ public:
     //Create button for pausing animations
     Toolkit::PushButton pauseButton = Toolkit::PushButton::New();
     pauseButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
-    pauseButton.ClickedSignal().Connect( this, &MeshRendererController::OnPauseClicked );
+    pauseButton.ClickedSignal().Connect( this, &MeshVisualController::OnPauseClicked );
     pauseButton.SetParentOrigin( Vector3( 0.5, 0.95, 0.5 ) ); //Offset from bottom center
     pauseButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
     pauseButton.SetLabelText( " || " );
@@ -211,8 +211,8 @@ public:
     //Make white background.
     Property::Map lightMap;
-    lightMap.Insert( "rendererType", "COLOR" );
-    lightMap.Insert( "mixColor", Color::WHITE );
+    lightMap.Insert( Visual::Property::TYPE,  Visual::COLOR );
+    lightMap.Insert( ColorVisual::Property::MIX_COLOR, Color::WHITE );
     mLightSource.SetProperty( Control::Property::BACKGROUND, Property::Value( lightMap ) );
     //Label to show what this actor is for the user.
@@ -225,7 +225,7 @@ public:
     mLightSource.Add( lightLabel );
     //Connect to touch signal for dragging.
-    mLightSource.TouchedSignal().Connect( this, &MeshRendererController::OnTouch );
+    mLightSource.TouchedSignal().Connect( this, &MeshVisualController::OnTouch );
     //Place the light source on a layer above the base, so that it is rendered above everything else.
     Layer upperLayer = Layer::New();
@@ -241,12 +241,12 @@ public:
   {
     //Create mesh property map
     Property::Map map;
-    map.Insert( "rendererType", "MESH" );
-    map.Insert( "objectUrl", MODEL_FILE[mModelIndex] );
-    map.Insert( "materialUrl", MATERIAL_FILE[mModelIndex] );
-    map.Insert( "texturesPath", TEXTURES_PATH );
-    map.Insert( "shaderType", SHADER_TYPE[mShaderIndex] );
-    map.Insert( "useSoftNormals", false );
+    map.Insert( Visual::Property::TYPE,  Visual::MESH );
+    map.Insert( MeshVisual::Property::OBJECT_URL, MODEL_FILE[mModelIndex] );
+    map.Insert( MeshVisual::Property::MATERIAL_URL, MATERIAL_FILE[mModelIndex] );
+    map.Insert( MeshVisual::Property::TEXTURES_PATH, TEXTURES_PATH );
+    map.Insert( MeshVisual::Property::SHADING_MODE, SHADING_MODE_TABLE[mShadingModeIndex] );
+    map.Insert( MeshVisual::Property::USE_SOFT_NORMALS, false );
     //Set the two controls to use the mesh
     for( int i = 0; i < NUM_MESHES; i++ )
@@ -365,7 +365,7 @@ public:
   //Cycle through the list of shaders.
   bool OnChangeShaderClicked( Toolkit::Button button )
   {
-    ++mShaderIndex %= 3;
+    ++mShadingModeIndex %= 3;
     ReloadModel();
@@ -429,26 +429,18 @@ private:
   Vector2 mRotationStart;
   int mModelIndex; //Index of model to load.
-  int mShaderIndex; //Index of shader type to use.
+  int mShadingModeIndex; //Index of shader type to use.
   int mTag; //Identifies what kind of actor has been selected in OnTouch.
   int mSelectedModelIndex; //Index of model selected on screen.
   bool mPaused; //If true, all animations are paused and should stay so.
 };
-void RunTest( Application& application )
-{
-  MeshRendererController test( application );
-
-  application.MainLoop();
-}
-
 // Entry point for Linux & Tizen applications
 //
 int main( int argc, char **argv )
 {
   Application application = Application::New( &argc, &argv );
-
-  RunTest( application );
-
+  MeshVisualController test( application );
+  application.MainLoop();
   return 0;
 }
@@ -103,13 +103,13 @@ const float ORIENTATION_DURATION = 0.5f;                  ///&lt; Time to rotate to
 void SetImageFittedInBox( ImageView& imageView, Property::Map& shaderEffect, const char * const imagePath, int maxWidth, int maxHeight )
 {
   Property::Map map;
-  map["rendererType"] = "IMAGE";
-  map["url"] = imagePath;
+  map[Visual::Property::TYPE] = Visual::IMAGE;
+  map[ImageVisual::Property::URL] = imagePath;
   // Load the image nicely scaled-down to fit within the specified max width and height:
-  map["desiredWidth"] = maxWidth;
-  map["desiredHeight"] = maxHeight;
-  map["fittingMode"] = "SHRINK_TO_FIT";
-  map["samplingMode"] = "BOX_THEN_LINEAR";
+  map[ImageVisual::Property::DESIRED_WIDTH] = maxWidth;
+  map[ImageVisual::Property::DESIRED_HEIGHT] = maxHeight;
+  map[ImageVisual::Property::FITTING_MODE] = FittingMode::SHRINK_TO_FIT;
+  map[ImageVisual::Property::SAMPLING_MODE] = SamplingMode::BOX_THEN_LINEAR;
   map.Merge( shaderEffect );
   imageView.SetProperty( ImageView::Property::IMAGE, map );
@@ -19,15 +19,6 @@ namespace
     DEMO_IMAGE_DIR "octahedron-button.png"
   };
-  //Shape names
-  const char * const SHAPE_SPHERE = "SPHERE";
-  const char * const SHAPE_CONE = "CONE";
-  const char * const SHAPE_CONICAL_FRUSTRUM = "CONICAL_FRUSTRUM";
-  const char * const SHAPE_CYLINDER = "CYLINDER";
-  const char * const SHAPE_CUBE = "CUBE";
-  const char * const SHAPE_BEVELLED_CUBE = "BEVELLED_CUBE";
-  const char * const SHAPE_OCTAHEDRON = "OCTAHEDRON";
-
   //Shape property defaults
   const int DEFAULT_SLICES = 32;
   const int DEFAULT_STACKS = 32;
@@ -278,7 +269,7 @@ public:
   //
   void SetupModel( Layer layer )
   {
-    //Create a container to house the renderer-holding actor, to provide a constant hitbox.
+    //Create a container to house the visual-holding actor, to provide a constant hitbox.
     Actor container = Actor::New();
     container.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
     container.SetSizeModeFactor( Vector3( 0.9, 0.3, 0.0 ) );  //90% of width, 30% of height.
@@ -309,7 +300,7 @@ public:
     mPanGestureDetector.DetectedSignal().Connect( this, &PrimitiveShapesController::OnPan );
   }
-  //Clears all sliders and resets the primitive renderer property map.
+  //Clears all sliders and resets the primitive visual property map.
   void InitialiseSlidersAndModel()
   {
     //Sliders
@@ -321,10 +312,10 @@ public:
       mSliderLabels.at( i ).SetVisible( false );
     }
-    //Renderer map for model
-    mRendererMap.Clear();
-    mRendererMap[ "rendererType" ] = "PRIMITIVE";
-    mRendererMap[ "shapeColor"   ] = mColor;
+    //Visual map for model
+    mVisualMap.Clear();
+    mVisualMap[ Visual::Property::TYPE           ] = Visual::PRIMITIVE;
+    mVisualMap[ PrimitiveVisual::Property::COLOR ] = mColor;
   }
   //Sets the 3D model to a sphere and modifies the sliders appropriately.
@@ -332,19 +323,19 @@ public:
   {
     InitialiseSlidersAndModel();
-    //Set up specific renderer properties.
-    mRendererMap[ "shape"        ] = SHAPE_SPHERE;
-    mRendererMap[ "slices"       ] = DEFAULT_SLICES;
-    mRendererMap[ "stacks"       ] = DEFAULT_STACKS;
+    //Set up specific visual properties.
+    mVisualMap[ PrimitiveVisual::Property::SHAPE  ] = PrimitiveVisual::Shape::SPHERE;
+    mVisualMap[ PrimitiveVisual::Property::SLICES ] = DEFAULT_SLICES;
+    mVisualMap[ PrimitiveVisual::Property::STACKS ] = DEFAULT_STACKS;
     //Set up sliders.
-    SetupSlider( 0, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, "slices" );
+    SetupSlider( 0, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::SLICES, "slices" );
     SetupMarks( mSliders.at( 0 ), SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
-    SetupSlider( 1, STACKS_LOWER_BOUND, STACKS_UPPER_BOUND, DEFAULT_STACKS, "stacks" );
+    SetupSlider( 1, STACKS_LOWER_BOUND, STACKS_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::STACKS, "stacks" );
     SetupMarks( mSliders.at( 1 ), STACKS_LOWER_BOUND, STACKS_UPPER_BOUND );
     //Set model in control.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
   }
   //Sets the 3D model to a cone and modifies the sliders appropriately.
@@ -352,20 +343,20 @@ public:
   {
     InitialiseSlidersAndModel();
-    //Set up specific renderer properties.
-    mRendererMap[ "shape"             ] = SHAPE_CONE;
-    mRendererMap[ "scaleHeight"       ] = DEFAULT_SCALE_HEIGHT;
-    mRendererMap[ "scaleBottomRadius" ] = DEFAULT_SCALE_BOTTOM_RADIUS;
-    mRendererMap[ "slices"            ] = DEFAULT_SLICES;
+    //Set up specific visual properties.
+    mVisualMap[ PrimitiveVisual::Property::SHAPE               ] = PrimitiveVisual::Shape::CONE;
+    mVisualMap[ PrimitiveVisual::Property::SCALE_HEIGHT        ] = DEFAULT_SCALE_HEIGHT;
+    mVisualMap[ PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS ] = DEFAULT_SCALE_BOTTOM_RADIUS;
+    mVisualMap[ PrimitiveVisual::Property::SLICES              ] = DEFAULT_SLICES;
     //Set up sliders.
-    SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, "scaleHeight" );
-    SetupSlider( 1, 1.0f, 32.0f, DEFAULT_SCALE_BOTTOM_RADIUS, "scaleBottomRadius" );
-    SetupSlider( 2, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, "slices" );
+    SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, PrimitiveVisual::Property::SCALE_HEIGHT, "scaleHeight" );
+    SetupSlider( 1, 1.0f, 32.0f, DEFAULT_SCALE_BOTTOM_RADIUS, PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS, "scaleBottomRadius" );
+    SetupSlider( 2, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::SLICES, "slices" );
     SetupMarks( mSliders.at( 2 ), SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
     //Set model in control.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
   }
   //Sets the 3D model to a conical frustrum and modifies the sliders appropriately.
@@ -373,20 +364,20 @@ public:
   {
     InitialiseSlidersAndModel();
-    //Set up specific renderer properties.
-    mRendererMap[ "shape"             ] = SHAPE_CONICAL_FRUSTRUM;
-    mRendererMap[ "scaleTopRadius"    ] = DEFAULT_SCALE_TOP_RADIUS;
-    mRendererMap[ "scaleBottomRadius" ] = DEFAULT_SCALE_BOTTOM_RADIUS;
-    mRendererMap[ "scaleHeight"       ] = DEFAULT_SCALE_HEIGHT;
-    mRendererMap[ "slices"            ] = DEFAULT_SLICES;
+    //Set up specific visual properties.
+    mVisualMap[ PrimitiveVisual::Property::SHAPE               ] = PrimitiveVisual::Shape::CONICAL_FRUSTRUM;
+    mVisualMap[ PrimitiveVisual::Property::SCALE_TOP_RADIUS    ] = DEFAULT_SCALE_TOP_RADIUS;
+    mVisualMap[ PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS ] = DEFAULT_SCALE_BOTTOM_RADIUS;
+    mVisualMap[ PrimitiveVisual::Property::SCALE_HEIGHT        ] = DEFAULT_SCALE_HEIGHT;
+    mVisualMap[ PrimitiveVisual::Property::SLICES              ] = DEFAULT_SLICES;
     //Set up used sliders.
-    SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, "scaleHeight" );
-    SetupSlider( 1, 0.0f, 32.0f, DEFAULT_SCALE_BOTTOM_RADIUS, "scaleBottomRadius" );
-    SetupSlider( 2, 0.0f, 32.0f, DEFAULT_SCALE_TOP_RADIUS, "scaleTopRadius" );
+    SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, PrimitiveVisual::Property::SCALE_HEIGHT, "scaleHeight" );
+    SetupSlider( 1, 0.0f, 32.0f, DEFAULT_SCALE_BOTTOM_RADIUS, PrimitiveVisual::Property::SCALE_BOTTOM_RADIUS, "scaleBottomRadius" );
+    SetupSlider( 2, 0.0f, 32.0f, DEFAULT_SCALE_TOP_RADIUS, PrimitiveVisual::Property::SCALE_TOP_RADIUS, "scaleTopRadius" );
     //Set model in control.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
   }
   //Sets the 3D model to a cylinder and modifies the sliders appropriately.
@@ -394,20 +385,20 @@ public:
   {
     InitialiseSlidersAndModel();
-    //Set up specific renderer properties.
-    mRendererMap[ "shape"        ] = SHAPE_CYLINDER;
-    mRendererMap[ "scaleHeight"  ] = DEFAULT_SCALE_HEIGHT;
-    mRendererMap[ "scaleRadius"  ] = DEFAULT_SCALE_RADIUS;
-    mRendererMap[ "slices"       ] = DEFAULT_SLICES;
+    //Set up specific visual properties.
+    mVisualMap[ PrimitiveVisual::Property::SHAPE        ] = PrimitiveVisual::Shape::CYLINDER;
+    mVisualMap[ PrimitiveVisual::Property::SCALE_HEIGHT ] = DEFAULT_SCALE_HEIGHT;
+    mVisualMap[ PrimitiveVisual::Property::SCALE_RADIUS ] = DEFAULT_SCALE_RADIUS;
+    mVisualMap[ PrimitiveVisual::Property::SLICES       ] = DEFAULT_SLICES;
     //Set up used sliders.
-    SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, "scaleHeight" );
-    SetupSlider( 1, 1.0f, 32.0f, DEFAULT_SCALE_RADIUS, "scaleRadius" );
-    SetupSlider( 2, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, "slices" );
+    SetupSlider( 0, 1.0f, 32.0f, DEFAULT_SCALE_HEIGHT, PrimitiveVisual::Property::SCALE_HEIGHT, "scaleHeight" );
+    SetupSlider( 1, 1.0f, 32.0f, DEFAULT_SCALE_RADIUS, PrimitiveVisual::Property::SCALE_RADIUS, "scaleRadius" );
+    SetupSlider( 2, SLICES_LOWER_BOUND, SLICES_UPPER_BOUND, DEFAULT_STACKS, PrimitiveVisual::Property::SLICES, "slices" );
     SetupMarks( mSliders.at( 2 ), SLICES_LOWER_BOUND, SLICES_UPPER_BOUND );
     //Set model in control.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
   }
   //Sets the 3D model to a cube and modifies the sliders appropriately.
@@ -415,11 +406,11 @@ public:
   {
     InitialiseSlidersAndModel();
-    //Set up specific renderer properties.
-    mRendererMap[ "shape" ] = SHAPE_CUBE;
+    //Set up specific visual properties.
+    mVisualMap[ PrimitiveVisual::Property::SHAPE ] = PrimitiveVisual::Shape::CUBE;
     //Set model in control.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
   }
   //Sets the 3D model to a bevelled cube and modifies the sliders appropriately.
@@ -427,17 +418,17 @@ public:
   {
     InitialiseSlidersAndModel();
-    //Set up specific renderer properties.
-    mRendererMap[ "shape"           ] = SHAPE_BEVELLED_CUBE;
-    mRendererMap[ "bevelPercentage" ] = DEFAULT_BEVEL_PERCENTAGE;
-    mRendererMap[ "bevelSmoothness" ] = DEFAULT_BEVEL_SMOOTHNESS;
+    //Set up specific visual properties.
+    mVisualMap[ PrimitiveVisual::Property::SHAPE            ] = PrimitiveVisual::Shape::BEVELLED_CUBE;
+    mVisualMap[ PrimitiveVisual::Property::BEVEL_PERCENTAGE ] = DEFAULT_BEVEL_PERCENTAGE;
+    mVisualMap[ PrimitiveVisual::Property::BEVEL_SMOOTHNESS ] = DEFAULT_BEVEL_SMOOTHNESS;
     //Set up used sliders.
-    SetupSlider( 0, 0.0f, 1.0f, DEFAULT_BEVEL_PERCENTAGE, "bevelPercentage" );
-    SetupSlider( 1, 0.0f, 1.0f, DEFAULT_BEVEL_SMOOTHNESS, "bevelSmoothness" );
+    SetupSlider( 0, 0.0f, 1.0f, DEFAULT_BEVEL_PERCENTAGE, PrimitiveVisual::Property::BEVEL_PERCENTAGE, "bevelPercentage" );
+    SetupSlider( 1, 0.0f, 1.0f, DEFAULT_BEVEL_SMOOTHNESS, PrimitiveVisual::Property::BEVEL_SMOOTHNESS, "bevelSmoothness" );
     //Set model in control.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
   }
   //Sets the 3D model to an octahedron and modifies the sliders appropriately.
@@ -445,20 +436,20 @@ public:
   {
     InitialiseSlidersAndModel();
-    //Set up specific renderer properties.
-    mRendererMap[ "shape" ] = SHAPE_OCTAHEDRON;
+    //Set up specific visual properties.
+    mVisualMap[ PrimitiveVisual::Property::SHAPE ] = PrimitiveVisual::Shape::OCTAHEDRON;
     //Set model in control.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
   }
   //Sets up the slider at the given index for the supplied property, and labels it appropriately.
-  // rendererPropertyLabel is the property that will be set by this slider.
+  // visualProperty is the property that will be set by this slider.
   void SetupSlider( int sliderIndex, float lowerBound, float upperBound, float startPoint,
-                    std::string rendererPropertyLabel )
+                    Property::Index visualProperty, std::string visualPropertyLabel )
   {
     //Set up the slider itself.
-    mSliders.at( sliderIndex ).RegisterProperty( "rendererProperty", Property::Value( rendererPropertyLabel ), Property::READ_WRITE );
+    mSliders.at( sliderIndex ).RegisterProperty( "visualProperty", Property::Value( visualProperty ), Property::READ_WRITE );
     mSliders.at( sliderIndex ).SetProperty( Slider::Property::LOWER_BOUND, Property::Value( lowerBound ) );
     mSliders.at( sliderIndex ).SetProperty( Slider::Property::UPPER_BOUND, Property::Value( upperBound ) );
     mSliders.at( sliderIndex ).SetProperty( Slider::Property::VALUE, Property::Value( startPoint ) );
@@ -468,7 +459,7 @@ public:
     //We reset the TextLabel to force a relayout of the table.
     mSliderTable.RemoveChildAt( TableView::CellPosition(sliderIndex, 0) );
-    TextLabel sliderLabel = TextLabel::New( rendererPropertyLabel );
+    TextLabel sliderLabel = TextLabel::New( visualPropertyLabel );
     sliderLabel.SetParentOrigin( ParentOrigin::CENTER );
     sliderLabel.SetAnchorPoint( AnchorPoint::CENTER );
     sliderLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
@@ -547,13 +538,13 @@ public:
   //When the slider is adjusted, change the corresponding shape property accordingly.
   bool OnSliderValueChanged( Slider slider, float value )
   {
-    //Update property map to reflect the change to the specific renderer property.
-    std::string rendererPropertyLabel;
-    slider.GetProperty( slider.GetPropertyIndex( "rendererProperty" ) ).Get( rendererPropertyLabel );
-    mRendererMap[ rendererPropertyLabel ] = value;
+    //Update property map to reflect the change to the specific visual property.
+    int visualProperty;
+    slider.GetProperty( slider.GetPropertyIndex( "visualProperty" ) ).Get( visualProperty );
+    mVisualMap[ visualProperty ] = value;
     //Reload the model to display the change.
-    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mRendererMap ) );
+    mModel.SetProperty( Control::Property::BACKGROUND, Property::Value( mVisualMap ) );
     return true;
   }
@@ -622,8 +613,8 @@ private:
   std::vector<TextLabel> mSliderLabels; ///< Holds the labels to each slider.
   TableView mSliderTable; ///< A table to layout the sliders next to their labels.
-  Property::Map mRendererMap; ///< Property map to create a primitive renderer.
-  Control mModel; ///< Control to house the primitive renderer.
+  Property::Map mVisualMap; ///< Property map to create a primitive visual.
+  Control mModel; ///< Control to house the primitive visual.
   PanGestureDetector mPanGestureDetector; ///< Detects pan gestures for rotation of the model.
   Animation mRotationAnimation; ///< Automatically rotates the model, unless it is being panned.
@@ -454,12 +454,12 @@ private:
   {
     ImageView actor = ImageView::New();
     Property::Map map;
-    map["rendererType"] = "IMAGE";
-    map["url"] = filename;
-    map["desiredWidth"] = width;
-    map["desiredHeight"] = height;
-    map["fittingMode"] = "SCALE_TO_FILL";
-    map["samplingMode"] = "BOX_THEN_LINEAR";
+    map[Visual::Property::TYPE] = Visual::IMAGE;
+    map[ImageVisual::Property::URL] = filename;
+    map[ImageVisual::Property::DESIRED_WIDTH] = width;
+    map[ImageVisual::Property::DESIRED_HEIGHT] = height;
+    map[ImageVisual::Property::FITTING_MODE] = FittingMode::SCALE_TO_FILL;
+    map[ImageVisual::Property::SAMPLING_MODE] = SamplingMode::BOX_THEN_LINEAR;
     actor.SetProperty( ImageView::Property::IMAGE, map );
     actor.SetName( filename );
@@ -77,9 +77,9 @@ public:
     parent.Add( box );
     Dali::Property::Map border;
-    border.Insert( "rendererType",  "BORDER" );
-    border.Insert( "borderColor",  Color::WHITE );
-    border.Insert( "borderSize",  1.f );
+    border.Insert( Visual::Property::TYPE,  Visual::BORDER );
+    border.Insert( BorderVisual::Property::COLOR,  Color::WHITE );
+    border.Insert( BorderVisual::Property::SIZE,  1.f );
     box.SetProperty( Control::Property::BACKGROUND, border );
   }
@@ -210,14 +210,14 @@ class VideoViewController: public ConnectionTracker
     Stage::GetCurrent().KeyEventSignal().Connect( this, &VideoViewController::OnKeyEvent );
     Property::Map customShader;
-    customShader.Insert( "fragmentShader", FRAGMENT_SHADER );
-    mCustomShader.Insert( "rendererType", "IMAGE" );
-    mCustomShader.Insert( "shader", customShader );
+    customShader.Insert( Visual::Shader::Property::FRAGMENT_SHADER, FRAGMENT_SHADER );
+    mCustomShader.Insert( Visual::Property::TYPE, Visual::IMAGE );
+    mCustomShader.Insert( Visual::Property::SHADER, customShader );
     Property::Map defaultShader;
-    customShader.Insert( "fragmentShader", DEFAULT_FRAGMENT_SHADER );
-    mDefaultShader.Insert( "rendererType", "IMAGE" );
-    mDefaultShader.Insert( "shader", defaultShader );
+    customShader.Insert( Visual::Shader::Property::FRAGMENT_SHADER, DEFAULT_FRAGMENT_SHADER );
+    mDefaultShader.Insert( Visual::Property::TYPE, Visual::IMAGE );
+    mDefaultShader.Insert( Visual::Property::SHADER, customShader );
     mWindowSurfaceTarget.Insert( "RENDERING_TARGET", "windowSurfaceTarget" );
     mNativeImageTarget.Insert( "RENDERING_TARGET", "nativeImageTarget" );
@@ -42,7 +42,7 @@
           "heightResizePolicy":"FILL_TO_PARENT",
           "sizeAspectRatio": false,
           "background": {
-            "rendererType": "COLOR",
+            "visualType": "COLOR",
             "mixColor": [1,1,1,1]
           },
           "color": [
@@ -78,7 +78,7 @@
               "heightResizePolicy":"FILL_TO_PARENT",
               "sizeAspectRatio": false,
               "background": {
-                "rendererType": "COLOR",
+                "visualType": "COLOR",
                 "mixColor": [1,1,1,1]
               },
               "color": [
@@ -114,7 +114,7 @@
                   "heightResizePolicy":"FILL_TO_PARENT",
                   "sizeAspectRatio": false,
                   "background": {
-                    "rendererType": "COLOR",
+                    "visualType": "COLOR",
                     "mixColor": [1,1,1,1]
                   },
                   "color": [
@@ -146,7 +146,7 @@
               "heightResizePolicy":"FILL_TO_PARENT",
               "sizeAspectRatio": false,
               "background": {
-                "rendererType": "COLOR",
+                "visualType": "COLOR",
                 "mixColor": [1,1,1,1]
               },
               "color": [
@@ -182,7 +182,7 @@
                   "heightResizePolicy":"FILL_TO_PARENT",
                   "sizeAspectRatio": false,
                   "background": {
-                    "rendererType": "COLOR",
+                    "visualType": "COLOR",
                     "mixColor": [1,1,1,1]
                   },
                   "color": [
@@ -218,7 +218,7 @@
                       "heightResizePolicy":"FILL_TO_PARENT",
                       "sizeAspectRatio": false,
                       "background": {
-                        "rendererType": "COLOR",
+                        "visualType": "COLOR",
                         "mixColor": [1,1,1,1]
                       },
                       "color": [
@@ -250,7 +250,7 @@
                   "heightResizePolicy":"FILL_TO_PARENT",
                   "sizeAspectRatio": false,
                   "background": {
-                    "rendererType": "COLOR",
+                    "visualType": "COLOR",
                     "mixColor": [1,1,1,1]
                   },
                   "color": [
@@ -286,7 +286,7 @@
                       "heightResizePolicy":"FILL_TO_PARENT",
                       "sizeAspectRatio": false,
                       "background": {
-                        "rendererType": "COLOR",
+                        "visualType": "COLOR",
                         "mixColor": [1,1,1,1]
                       },
                       "color": [
@@ -322,7 +322,7 @@
                           "heightResizePolicy":"FILL_TO_PARENT",
                           "sizeAspectRatio": false,
                           "background": {
-                            "rendererType": "COLOR",
+                            "visualType": "COLOR",
                             "mixColor": [1,1,1,1]
                           },
                           "color": [
@@ -354,7 +354,7 @@
                       "heightResizePolicy":"FILL_TO_PARENT",
                       "sizeAspectRatio": false,
                       "background": {
-                        "rendererType": "COLOR",
+                        "visualType": "COLOR",
                         "mixColor": [1,1,1,1]
                       },
                       "color": [
@@ -386,7 +386,7 @@
                   "heightResizePolicy":"FILL_TO_PARENT",
                   "sizeAspectRatio": false,
                   "background": {
-                    "rendererType": "COLOR",
+                    "visualType": "COLOR",
                     "mixColor": [1,1,1,1]
                   },
                   "color": [
@@ -418,7 +418,7 @@
               "heightResizePolicy":"FILL_TO_PARENT",
               "sizeAspectRatio": false,
               "background": {
-                "rendererType": "COLOR",
+                "visualType": "COLOR",
                 "mixColor": [1,1,1,1]
               },
               "color": [
@@ -450,7 +450,7 @@
           "heightResizePolicy":"FILL_TO_PARENT",
           "sizeAspectRatio": false,
           "background": {
-            "rendererType": "COLOR",
+            "visualType": "COLOR",
             "mixColor": [1,1,1,1]
           },
           "color": [
@@ -486,7 +486,7 @@
               "heightResizePolicy":"FILL_TO_PARENT",
               "sizeAspectRatio": false,
               "background": {
-                "rendererType": "COLOR",
+                "visualType": "COLOR",
                 "mixColor": [1,1,1,1]
               },
               "color": [
@@ -518,7 +518,7 @@
           "heightResizePolicy":"FILL_TO_PARENT",
           "sizeAspectRatio": false,
           "background": {
-            "rendererType": "COLOR",
+            "visualType": "COLOR",
             "mixColor": [1,1,1,1]
           },
           "color": [
@@ -557,7 +557,7 @@
                   "heightResizePolicy":"FILL_TO_PARENT",
                   "sizeAspectRatio": false,
                   "background": {
-                    "rendererType": "COLOR",
+                    "visualType": "COLOR",
                     "mixColor": [1,1,1,1]
                   },
                   "color": [
@@ -589,7 +589,7 @@
               "heightResizePolicy":"FILL_TO_PARENT",
               "sizeAspectRatio": false,
               "background": {
-                "rendererType": "COLOR",
+                "visualType": "COLOR",
                 "mixColor": [1,1,1,1]
               },
               "color": [
@@ -622,7 +622,7 @@
               "heightResizePolicy":"FILL_TO_PARENT",
               "sizeAspectRatio": false,
               "background": {
-                "rendererType": "COLOR",
+                "visualType": "COLOR",
                 "mixColor": [1,1,1,1]
               },
               "color": [
@@ -661,7 +661,7 @@
                       "heightResizePolicy":"FILL_TO_PARENT",
                       "sizeAspectRatio": false,
                       "background": {
-                        "rendererType": "COLOR",
+                        "visualType": "COLOR",
                         "mixColor": [1,1,1,1]
                       },
                       "color": [
@@ -693,7 +693,7 @@
                   "heightResizePolicy":"FILL_TO_PARENT",
                   "sizeAspectRatio": false,
                   "background": {
-                    "rendererType": "COLOR",
+                    "visualType": "COLOR",
                     "mixColor": [1,1,1,1]
                   },
                   "color": [
@@ -726,7 +726,7 @@
                   "heightResizePolicy":"FILL_TO_PARENT",
                   "sizeAspectRatio": false,
                   "background": {
-                    "rendererType": "COLOR",
+                    "visualType": "COLOR",
                     "mixColor": [1,1,1,1]
                   },
                   "color": [
@@ -758,7 +758,7 @@
               "heightResizePolicy":"FILL_TO_PARENT",
               "sizeAspectRatio": false,
               "background": {
-                "rendererType": "COLOR",
+                "visualType": "COLOR",
                 "mixColor": [1,1,1,1]
               },
               "color": [
@@ -790,7 +790,7 @@
           "heightResizePolicy":"FILL_TO_PARENT",
           "sizeAspectRatio": false,
           "background": {
-            "rendererType": "COLOR",
+            "visualType": "COLOR",
             "mixColor": [1,1,1,1]
           },
           "color": [
@@ -823,7 +823,7 @@
       "sizeModeFactor": [0.25,0.166667,1],
       "sizeAspectRatio": false,
       "background": {
-        "rendererType": "COLOR",
+        "visualType": "COLOR",
         "mixColor": [1,1,1,1]
       },
       "color": [
@@ -30,7 +30,7 @@
       "heightResizePolicy":"SIZE_RELATIVE_TO_PARENT",
       "sizeModeFactor": [ 0.5, 0.333333333333, 1 ],
       "background":{
-        "rendererType": "COLOR",
+        "visualType": "COLOR",
         "mixColor": [ 0.8, 0, 0.2, 1 ]
        }
     },
@@ -45,7 +45,7 @@
       "heightResizePolicy":"SIZE_RELATIVE_TO_PARENT",
       "sizeModeFactor": [ 0.5, 0.333333333333, 1 ],
       "background": {
-        "rendererType": "IMAGE",
+        "visualType": "IMAGE",
         "url": "{DEMO_IMAGE_DIR}Kid1.svg"
       }
     },
@@ -60,7 +60,7 @@
       "heightResizePolicy":"SIZE_RELATIVE_TO_PARENT",
       "sizeModeFactor": [ 0.5, 0.333333333333, 1 ],
       "background": {
-        "rendererType" : "BORDER",
+        "visualType" : "BORDER",
         "borderColor" : [ 0.5, 0.5, 0.5, 1 ],
         "borderSize" : 15.0
       }
@@ -76,7 +76,7 @@
       "heightResizePolicy":"SIZE_RELATIVE_TO_PARENT",
       "sizeModeFactor": [ 0.5, 0.333333333333, 1 ],
       "background": {
-        "rendererType": "IMAGE",
+        "visualType": "IMAGE",
         "url": "{DEMO_IMAGE_DIR}gallery-large-9.jpg"
       }
     },
@@ -91,7 +91,7 @@
       "heightResizePolicy":"SIZE_RELATIVE_TO_PARENT",
       "sizeModeFactor": [ 0.5, 0.333333333333, 1 ],
       "background":{
-        "rendererType": "COLOR",
+        "visualType": "COLOR",
         "mixColor": [ 1, 1, 0, 1 ]
       }
     },
@@ -106,7 +106,7 @@
       "heightResizePolicy":"SIZE_RELATIVE_TO_PARENT",
       "sizeModeFactor": [ 0.5, 0.333333333333, 1 ],
       "background": {
-        "rendererType" : "GRADIENT",
+        "visualType" : "GRADIENT",
         "startPosition" : [ -0.5, -0.5 ],
         "endPosition": [ 0.5, 0.5 ],
         "stopColor" : [
@@ -8,7 +8,7 @@
       "parentOrigin": [0.5, 0.5, 0.5],
       "anchorPoint": [0.5, 1, 0.5],
       "background": {
-        "rendererType": "COLOR",
+        "visualType": "COLOR",
         "mixColor": [0.71, 0, 0, 1]
       },
       "selected": false,
@@ -27,7 +27,7 @@
       "parentOrigin": [0.5, 0.5, 0.5],
       "anchorPoint": [0.5, 1, 0.5],
       "background": {
-        "rendererType": "COLOR",
+        "visualType": "COLOR",
         "mixColor": [0, 0.14200000000000013, 0.71, 0.7]
       },
       "signals": [
@@ -45,7 +45,7 @@
       "parentOrigin": [0.5, 0.5, 0.5],
       "anchorPoint": [0.5, 1, 0.5],
       "background": {
-        "rendererType": "COLOR",
+        "visualType": "COLOR",
         "mixColor": [0.057450000000000064, 0.3, 0.0030000000000000027, 0.7]
       },
       "signals": [
@@ -43,7 +43,7 @@
       "name":"simpleTable",
       "type":"TableView",
       "background":{
-        "rendererType": "COLOR",
+        "visualType": "COLOR",
         "mixColor": [0.5,0.5,0,1]
         },
       "parentOrigin": "CENTER",
@@ -69,7 +69,7 @@
     {
       "background":
       {
-        "rendererType": "GRADIENT",
+        "visualType": "GRADIENT",
         "center": [240, 400],
         "radius": 932,
         "units": "USER_SPACE",
@@ -82,7 +82,7 @@
     {
       "background":
       {
-        "rendererType": "GRADIENT",
+        "visualType": "GRADIENT",
         "center": [360, 640],
         "radius": 1468,
         "units": "USER_SPACE",
@@ -109,7 +109,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM          "Super Blur and Bloom"
 #define DALI_DEMO_STR_TITLE_EFFECTS_VIEW              "Effects View"
 #define DALI_DEMO_STR_TITLE_NATIVE_IMAGE_SOURCE       "Native Image Source"
-#define DALI_DEMO_STR_TITLE_MESH_RENDERER             "Mesh Renderer"
+#define DALI_DEMO_STR_TITLE_MESH_VISUAL               "Mesh Visual"
 #define DALI_DEMO_STR_TITLE_PRIMITIVE_SHAPES          "Primitive Shapes"
 #endif
@@ -131,13 +131,13 @@ Dali::Layer CreateView( Dali::Application&amp; application,
   if ( !backgroundImagePath.empty() )
   {
     Dali::Property::Map map;
-    map["rendererType"] = "IMAGE";
-    map["url"] = backgroundImagePath;
-    map["desiredWidth"] = stage.GetSize().x;
-    map["desiredHeight"] = stage.GetSize().y;
-    map["fittingMode"] = "SCALE_TO_FILL";
-    map["samplingMode"] = "BOX_THEN_LINEAR";
-    map["synchronousLoading"] = true;
+    map[Dali::Toolkit::Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
+    map[Dali::Toolkit::ImageVisual::Property::URL] = backgroundImagePath;
+    map[Dali::Toolkit::ImageVisual::Property::DESIRED_WIDTH] = stage.GetSize().x;
+    map[Dali::Toolkit::ImageVisual::Property::DESIRED_HEIGHT] = stage.GetSize().y;
+    map[Dali::Toolkit::ImageVisual::Property::FITTING_MODE] = Dali::FittingMode::SCALE_TO_FILL;
+    map[Dali::Toolkit::ImageVisual::Property::SAMPLING_MODE] = Dali::SamplingMode::BOX_THEN_LINEAR;
+    map[Dali::Toolkit::ImageVisual::Property::SYNCHRONOUS_LOADING] = true;
     view.SetProperty( Dali::Toolkit::Control::Property::BACKGROUND, map );
   }