Merge "Added a simple application for testing Styling" into devel/master

Adeel Kazmi · Gerrit Code Review
2 parents 3daf6de3 0a28d644
Showing 42 changed files with 1824 additions and 9 deletions
build/tizen/CMakeLists.txt
com.samsung.dali-demo.xml
demo/dali-demo.cpp
examples/line-mesh/line-mesh-example.cpp
examples/styling/image-channel-control-impl.cpp
examples/styling/image-channel-control-impl.h
examples/styling/image-channel-control.cpp
examples/styling/image-channel-control.h
examples/styling/style-example.cpp
examples/styling/styling-application.cpp
examples/styling/styling-application.h
packaging/com.samsung.dali-demo.spec
resources/po/as.po
resources/po/de.po
resources/po/en_GB.po
resources/po/en_US.po
resources/po/es.po
resources/po/ko.po
resources/po/ml.po
resources/po/ur.po
@@ -35,7 +35,7 @@ SET(IMAGES_DIR ${APP_DATA_DIR}/images/)
 SET(VIDEOS_DIR ${APP_DATA_DIR}/videos/)
 SET(MODELS_DIR ${APP_DATA_DIR}/models/)
 SET(SCRIPTS_DIR ${APP_DATA_DIR}/scripts/)
-SET(STYLE_DIR ${APP_DATA_DIR}/style/)
+SET(STYLE_DIR ${APP_DATA_DIR}style/)
 IF(NOT DEFINED LOCALE_DIR)
         SET(LOCALE_DIR ${PREFIX}/share/locale)
@@ -46,11 +46,13 @@ SET(DEMO_VIDEO_DIR \\&quot;${VIDEOS_DIR}\\&quot;)
 SET(DEMO_MODEL_DIR \\"${MODELS_DIR}\\")
 SET(DEMO_SCRIPT_DIR \\"${SCRIPTS_DIR}\\")
 SET(DEMO_STYLE_DIR \\"${STYLE_DIR}\\")
-SET(DEMO_THEME_PATH \\"${STYLE_DIR}/demo-theme.json\")
+SET(DEMO_THEME_PATH \\"${STYLE_DIR}demo-theme.json\")
 SET(DEMO_EXAMPLE_BIN \\"${BINDIR}/\\")
 SET(DEMO_LOCALE_DIR \\"${LOCALE_DIR}\\")
 SET(DEMO_LANG \\"${LANG}\\")
+SET(DEMO_STYLE_IMAGE_DIR ${STYLE_DIR}images)
+
 FILE(GLOB LOCAL_IMAGES_PNG RELATIVE  "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.png")
 FILE(GLOB LOCAL_IMAGES_JPG RELATIVE  "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.jpg")
 FILE(GLOB LOCAL_IMAGES_GIF RELATIVE  "${LOCAL_IMAGES_DIR}" "${LOCAL_IMAGES_DIR}/*.gif")
@@ -82,11 +84,23 @@ FOREACH(flag ${LOCAL_SCRIPTS_LIST})
 ENDFOREACH(flag)
 #Replace @DEMO_STYLE_IMAGE_DIR@ in following files
-SET(DEMO_STYLE_IMAGE_DIR ${IMAGES_DIR})
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/demo-theme.json.in ${LOCAL_STYLE_DIR}/demo-theme.json )
-INSTALL(FILES ${LOCAL_STYLE_DIR}/demo-theme.json DESTINATION ${STYLE_DIR})
-CONFIGURE_FILE( ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js.in ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js )
-INSTALL(FILES ${LOCAL_SCRIPTS_DIR}/simple-image-wall.js DESTINATION ${SCRIPTS_DIR})
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-one.json.in ${LOCAL_STYLE_DIR}/style-example-theme-one.json )
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-two.json.in ${LOCAL_STYLE_DIR}/style-example-theme-two.json )
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/style-example-theme-three.json.in ${LOCAL_STYLE_DIR}/style-example-theme-three.json )
+MESSAGE("Configured ${LOCAL_STYLE_DIR}/style-example-theme<>.json files")
+
+FILE(GLOB LOCAL_STYLES_LIST "${LOCAL_STYLE_DIR}/*.json")
+FOREACH(flag ${LOCAL_STYLES_LIST})
+  INSTALL(FILES ${flag} DESTINATION ${STYLE_DIR})
+ENDFOREACH(flag)
+MESSAGE("Installed ${LOCAL_STYLES_LIST} to ${STYLE_DIR}")
+
+FILE(GLOB LOCAL_STYLE_IMAGES_LIST "${LOCAL_STYLE_DIR}/images/*.png")
+FOREACH(flag ${LOCAL_STYLE_IMAGES_LIST})
+  INSTALL(FILES ${flag} DESTINATION ${STYLE_DIR}/images)
+ENDFOREACH(flag)
+MESSAGE("Installed style resources ${LOCAL_STYLE_IMAGES_LIST} to ${STYLE_DIR}/images")
 SET(PKG_LIST dali-core
              dali-adaptor
@@ -99,7 +113,7 @@ FOREACH(flag ${REQUIRED_PKGS_CFLAGS})
         SET(REQUIRED_CFLAGS "${REQUIRED_CFLAGS} ${flag}")
 ENDFOREACH(flag)
-SET(DALI_DEMO_CFLAGS "-DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_VIDEO_DIR=${DEMO_VIDEO_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
+SET(DALI_DEMO_CFLAGS "-DDEMO_IMAGE_DIR=${DEMO_IMAGE_DIR} -DDEMO_VIDEO_DIR=${DEMO_VIDEO_DIR} -DDEMO_MODEL_DIR=${DEMO_MODEL_DIR} -DDEMO_SCRIPT_DIR=${DEMO_SCRIPT_DIR} -DDEMO_STYLE_DIR=${DEMO_STYLE_DIR} -DDEMO_THEME_PATH=${DEMO_THEME_PATH} -DDEMO_EXAMPLE_BIN=${DEMO_EXAMPLE_BIN} -DDEMO_LOCALE_DIR=${DEMO_LOCALE_DIR} -fvisibility=hidden -DHIDE_DALI_INTERNALS -DDEMO_LANG=${DEMO_LANG}")
 ###########################################################################
 # Internationalization
@@ -169,4 +169,7 @@
 	<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>
 	</ui-application>
+	<ui-application appid="styling.example" exec="/usr/apps/com.samsung.dali-demo/bin/styling.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Styling</label>
+	</ui-application>
 </manifest>
@@ -80,6 +80,7 @@ int DALI_EXPORT_API main(int argc, char **argv)
   demo.AddExample(Example("native-image-source.example", DALI_DEMO_STR_TITLE_NATIVE_IMAGE_SOURCE));
   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.AddExample(Example("styling.example", DALI_DEMO_STR_TITLE_STYLING));
   demo.SortAlphabetically( true );
@@ -234,7 +234,7 @@ public:
       Dali::Toolkit::RadioButton radio = Dali::Toolkit::RadioButton::New();
-      radio.SetProperty( Dali::Toolkit::RadioButton::Property::LABEL, labelMap );
+      radio.SetProperty( Dali::Toolkit::Button::Property::LABEL, labelMap );
       radio.SetParentOrigin( ParentOrigin::TOP_LEFT );
       radio.SetAnchorPoint( AnchorPoint::TOP_LEFT );
       radio.SetSelected( i == 0 );
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "image-channel-control-impl.h"
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali/public-api/object/type-registry-helper.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+
+using namespace Dali; // Needed for macros
+
+namespace Demo
+{
+namespace Internal
+{
+
+namespace
+{
+
+const char* FRAGMENT_SHADER = DALI_COMPOSE_SHADER(
+  varying mediump vec2 vTexCoord;\n
+  uniform sampler2D sTexture;\n
+  uniform mediump vec4 uColor;\n
+  uniform mediump vec3 uChannels;\n
+  \n
+  void main()\n
+  {\n
+    gl_FragColor = texture2D( sTexture, vTexCoord ) * uColor * vec4(uChannels, 1.0) ;\n
+  }\n
+);
+
+Dali::BaseHandle Create()
+{
+  return Demo::ImageChannelControl::New();
+}
+
+DALI_TYPE_REGISTRATION_BEGIN( ImageChannelControl, Dali::Toolkit::Control, Create );
+
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "url", STRING, RESOURCE_URL );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "redChannel", FLOAT, RED_CHANNEL );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "greenChannel", FLOAT, GREEN_CHANNEL );
+DALI_PROPERTY_REGISTRATION( Demo, ImageChannelControl, "blueChannel", FLOAT, BLUE_CHANNEL );
+
+DALI_TYPE_REGISTRATION_END();
+
+} // anonymous namespace
+
+
+Internal::ImageChannelControl::ImageChannelControl()
+: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) ),
+  mChannels( 1.0f, 1.0f, 1.0f )
+{
+}
+
+Internal::ImageChannelControl::~ImageChannelControl()
+{
+}
+
+Demo::ImageChannelControl Internal::ImageChannelControl::New()
+{
+  IntrusivePtr<Internal::ImageChannelControl> impl = new Internal::ImageChannelControl();
+  Demo::ImageChannelControl handle = Demo::ImageChannelControl( *impl );
+  impl->Initialize();
+  return handle;
+}
+
+void ImageChannelControl::SetImage( const std::string& url )
+{
+  mUrl = url;
+
+  Actor self = Self();
+
+  Property::Map properties;
+  Property::Map shader;
+  shader[Dali::Toolkit::Visual::Shader::Property::FRAGMENT_SHADER] = FRAGMENT_SHADER;
+  properties[Dali::Toolkit::Visual::Property::TYPE] = Dali::Toolkit::Visual::IMAGE;
+  properties[Dali::Toolkit::Visual::Property::SHADER]=shader;
+  properties[Dali::Toolkit::ImageVisual::Property::URL] = url;
+
+  Dali::Toolkit::InitializeVisual( self, mVisual, properties );
+
+  RelayoutRequest();
+}
+
+void ImageChannelControl::OnInitialize()
+{
+  Actor self = Self();
+  mChannelIndex = self.RegisterProperty( "uChannels", Vector3(1.0f, 1.0f, 1.0f) );
+}
+
+void ImageChannelControl::OnStageConnection( int depth )
+{
+  Control::OnStageConnection( depth );
+
+  if( mVisual )
+  {
+    CustomActor self = Self();
+    mVisual.SetOnStage( self );
+  }
+}
+
+void ImageChannelControl::OnStageDisconnection()
+{
+  if( mVisual )
+  {
+    CustomActor self = Self();
+    mVisual.SetOffStage( self );
+  }
+
+  Control::OnStageDisconnection();
+}
+
+void ImageChannelControl::OnSizeSet( const Vector3& targetSize )
+{
+  Control::OnSizeSet( targetSize );
+
+  if( mVisual )
+  {
+    Vector2 size( targetSize );
+    mVisual.SetSize( size );
+  }
+}
+
+Vector3 ImageChannelControl::GetNaturalSize()
+{
+  if( mVisual )
+  {
+    Vector2 naturalSize;
+    mVisual.GetNaturalSize(naturalSize);
+    return Vector3(naturalSize);
+  }
+  return Vector3::ZERO;
+}
+
+
+///////////////////////////////////////////////////////////
+//
+// Properties
+//
+
+void ImageChannelControl::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value )
+{
+  Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) );
+
+  if ( imageChannelControl )
+  {
+    ImageChannelControl& impl = GetImpl( imageChannelControl );
+    Actor self = impl.Self();
+    switch ( index )
+    {
+      case Demo::ImageChannelControl::Property::RED_CHANNEL:
+      {
+        impl.mChannels[0] = value.Get<float>();
+        self.SetProperty( impl.mChannelIndex, impl.mChannels );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::GREEN_CHANNEL:
+      {
+        impl.mChannels[1] = value.Get<float>();
+        self.SetProperty( impl.mChannelIndex, impl.mChannels );
+        break;
+      }
+      case Demo::ImageChannelControl::Property::BLUE_CHANNEL:
+      {
+        impl.mChannels[2] = value.Get<float>();
+        self.SetProperty( impl.mChannelIndex, impl.mChannels );
+        break;
+      }
+    }
+  }
+}
+
+Property::Value ImageChannelControl::GetProperty( BaseObject* object, Property::Index propertyIndex )
+{
+  Property::Value value;
+
+  Demo::ImageChannelControl imageChannelControl = Demo::ImageChannelControl::DownCast( Dali::BaseHandle( object ) );
+
+  if ( imageChannelControl )
+  {
+    ImageChannelControl& impl = GetImpl( imageChannelControl );
+    switch ( propertyIndex )
+    {
+      case Demo::ImageChannelControl::Property::RED_CHANNEL:
+      {
+        value = impl.mChannels[0];
+        break;
+      }
+      case Demo::ImageChannelControl::Property::GREEN_CHANNEL:
+      {
+        value = impl.mChannels[1];
+        break;
+      }
+      case Demo::ImageChannelControl::Property::BLUE_CHANNEL:
+      {
+        value = impl.mChannels[2];
+        break;
+      }
+    }
+  }
+
+  return value;
+}
+
+} // Internal
+} // Demo
+#ifndef DALI_DEMO_INTERNAL_IMAGE_CHANNEL_CONTROL_IMPL_H
+#define DALI_DEMO_INTERNAL_IMAGE_CHANNEL_CONTROL_IMPL_H
+
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "image-channel-control.h"
+#include <dali-toolkit/public-api/controls/control-impl.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-base.h>
+
+namespace Demo
+{
+
+namespace Internal // To use TypeRegistry, handle and body classes need the same name
+{
+
+class ImageChannelControl : public Dali::Toolkit::Internal::Control
+{
+public:
+  /**
+   * Instantiate a new ImageChannelControl object
+   */
+  static Demo::ImageChannelControl New();
+  ImageChannelControl();
+  ~ImageChannelControl();
+
+public: // API
+  /**
+   * @copydoc ImageChannelControl::SetImage
+   */
+  void SetImage( const std::string& url );
+
+public:  // Properties
+  /**
+   * Called when a property of an object of this type is set.
+   * @param[in] object The object whose property is set.
+   * @param[in] index The property index.
+   * @param[in] value The new property value.
+   */
+  static void SetProperty( Dali::BaseObject* object, Dali::Property::Index index, const Dali::Property::Value& value );
+
+  /**
+   * Called to retrieve a property of an object of this type.
+   * @param[in] object The object whose property is to be retrieved.
+   * @param[in] index The property index.
+   * @return The current value of the property.
+   */
+  static Dali::Property::Value GetProperty( Dali::BaseObject* object, Dali::Property::Index propertyIndex );
+
+private: // From Control
+  /**
+   * @copydoc Toolkit::Control::OnInitialize()
+   */
+  virtual void OnInitialize();
+
+  /**
+   * @copydoc Toolkit::Control::OnStageConnect()
+   */
+  virtual void OnStageConnection( int depth );
+
+  /**
+   * @copydoc Toolkit::Control::OnStageDisconnection()
+   */
+  virtual void OnStageDisconnection();
+
+  /**
+   * @copydoc Toolkit::Control::OnSizeSet()
+   */
+  virtual void OnSizeSet( const Dali::Vector3& targetSize );
+
+  /**
+   * @copydoc Toolkit::Control::GetNaturalSize
+   */
+  virtual Dali::Vector3 GetNaturalSize();
+
+private:
+  //undefined
+  ImageChannelControl( const ImageChannelControl& );
+  ImageChannelControl& operator=( const ImageChannelControl& );
+
+private:
+  // Implementation details
+  std::string mUrl;
+  Dali::Toolkit::Visual::Base mVisual;
+  Dali::Vector3 mChannels;
+  Dali::Property::Index mChannelIndex;
+};
+
+} // Internal
+
+inline Internal::ImageChannelControl& GetImpl( Demo::ImageChannelControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<Internal::ImageChannelControl&>(object);
+}
+
+inline const Internal::ImageChannelControl& GetImpl( const Demo::ImageChannelControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  const Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<const Internal::ImageChannelControl&>(object);
+}
+
+} // Demo
+
+#endif //  DALI_DEMO_IMAGE_CHANNEL_CONTROL_IMPL_H
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "image-channel-control.h"
+#include "image-channel-control-impl.h"
+
+namespace Demo
+{
+
+ImageChannelControl::ImageChannelControl()
+{
+}
+
+ImageChannelControl::ImageChannelControl( const ImageChannelControl& imageChannelControl )
+: Control( imageChannelControl )
+{
+}
+
+ImageChannelControl& ImageChannelControl::operator= ( const ImageChannelControl& rhs )
+{
+  if( &rhs != this )
+  {
+    Control::operator=( rhs );
+  }
+  return *this;
+}
+
+ImageChannelControl::~ImageChannelControl()
+{
+}
+
+ImageChannelControl ImageChannelControl::New()
+{
+  ImageChannelControl imageChannelControl = Internal::ImageChannelControl::New();
+  return imageChannelControl;
+}
+
+ImageChannelControl ImageChannelControl::New( const std::string& url )
+{
+  ImageChannelControl imageChannelControl = Internal::ImageChannelControl::New();
+  imageChannelControl.SetImage( url );
+  return imageChannelControl;
+}
+
+ImageChannelControl ImageChannelControl::DownCast( BaseHandle handle )
+{
+  return Control::DownCast< ImageChannelControl, Internal::ImageChannelControl > ( handle );
+}
+
+void ImageChannelControl::SetImage( const std::string& url )
+{
+  GetImpl( *this ).SetImage( url );
+}
+
+ImageChannelControl::ImageChannelControl( Internal::ImageChannelControl& implementation )
+: Control( implementation )
+{
+}
+
+ImageChannelControl::ImageChannelControl( Dali::Internal::CustomActor* internal )
+: Control( internal )
+{
+  VerifyCustomActorPointer< Internal::ImageChannelControl >( internal ) ;
+}
+
+
+} //namespace Demo
+#ifndef DALI_DEMO_IMAGE_CHANNEL_CONTROL_H
+#define DALI_DEMO_IMAGE_CHANNEL_CONTROL_H
+
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include <dali-toolkit/dali-toolkit.h>
+#include <string>
+
+namespace Demo
+{
+
+namespace Internal
+{
+// All type registered types need to have the same name for the body and the handle
+class ImageChannelControl;
+}
+
+/**
+ * Control that allows the RGB channels of an image to be altered.
+ */
+class ImageChannelControl : public Dali::Toolkit::Control
+{
+public:
+  /**
+   * The start and end property ranges for this control
+   */
+  enum PropertyRange
+  {
+    PROPERTY_START_INDEX = Dali::Toolkit::Control::CONTROL_PROPERTY_END_INDEX + 1,
+    PROPERTY_END_INDEX   = PROPERTY_START_INDEX + 1000,
+
+    ANIMATABLE_PROPERTY_START_INDEX = Dali::ANIMATABLE_PROPERTY_REGISTRATION_START_INDEX,
+    ANIMATABLE_PROPERTY_END_INDEX = ANIMATABLE_PROPERTY_START_INDEX+1000
+  };
+
+  struct Property
+  {
+    enum
+    {
+
+      RESOURCE_URL = PROPERTY_START_INDEX,
+      RED_CHANNEL,
+      GREEN_CHANNEL,
+      BLUE_CHANNEL
+    };
+  };
+
+public: // Construction / destruction
+
+  /**
+   * Create an uninitialized handle
+   */
+  ImageChannelControl();
+
+  /**
+   * Create a new image channel control without an image. Use
+   * SetImage to give this control an image
+   */
+  static ImageChannelControl New();
+
+  /**
+   * Create a new image channel control from a given URL
+   */
+  static ImageChannelControl New( const std::string& url );
+
+  /**
+   * Destructor. This is non-virtual since derived Handle types must not
+   * contain data or virtual methods
+   */
+  ~ImageChannelControl();
+
+  /**
+   * Copy Constructor
+   */
+  ImageChannelControl( const ImageChannelControl& imageChannelControl );
+
+  /**
+   * Assignment Operator
+   */
+  ImageChannelControl& operator=( const ImageChannelControl& imageChannelControl );
+
+  /**
+   * Downcast
+   */
+  static ImageChannelControl DownCast( BaseHandle handle );
+
+public: // API
+
+  /**
+   * Set the image for this ImageChannelControl
+   * @param[in] url The url of the image resource
+   */
+  void SetImage( const std::string& url );
+
+public: // Not for public use
+  /**
+   * Create a handle from an implementation
+   */
+  ImageChannelControl( Internal::ImageChannelControl& implementation );
+
+  /**
+   * Allow the creation of an ImageChannelControl handle from an internal CustomActor pointer
+   */
+  ImageChannelControl( Dali::Internal::CustomActor* internal );
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_IMAGE_CHANNEL_CONTROL_H
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @file style-example.cpp
+ * @brief Example of styling Toolkit controls.
+ */
+
+// External includes
+#include <dali/dali.h>
+
+// Internal includes
+#include "styling-application.h"
+
+
+/// Entry point for applications
+int DALI_EXPORT_API main( int argc, char** argv )
+{
+  const char* themeName = Demo::StylingApplication::DEMO_THEME_ONE_PATH;
+
+  if( argc > 1 )
+  {
+    int theme = atoi(argv[1]);
+    if( theme == 2 )
+    {
+      themeName = Demo::StylingApplication::DEMO_THEME_TWO_PATH;
+    }
+    else if( theme == 3 )
+    {
+      themeName = Demo::StylingApplication::DEMO_THEME_THREE_PATH;
+    }
+  }
+
+  Application application = Application::New( &argc, &argv, themeName );
+  {
+    Demo::StylingApplication stylingApplication( application );
+    application.MainLoop();
+  }
+  return 0;
+}
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @file style-example.cpp
+ * @brief Example of styling Toolkit controls.
+ */
+
+// Class include
+#include "styling-application.h"
+
+// External includes
+#include <dali-toolkit/dali-toolkit.h>
+//#include <dali-toolkit/devel-api/controls/slider/slider.h>
+#include <dali-toolkit/devel-api/controls/popup/popup.h>
+#include "image-channel-control.h"
+#include <cstdio>
+#include <sstream>
+
+// Internal includes
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+const char* StylingApplication::DEMO_THEME_ONE_PATH( DEMO_STYLE_DIR "style-example-theme-one.json" );
+const char* StylingApplication::DEMO_THEME_TWO_PATH( DEMO_STYLE_DIR "style-example-theme-two.json" );
+const char* StylingApplication::DEMO_THEME_THREE_PATH( DEMO_STYLE_DIR "style-example-theme-three.json" );
+
+namespace
+{
+#define DP(x) x
+
+const char* DEFAULT_CONTROL_AREA_IMAGE_PATH( DEMO_IMAGE_DIR "popup_button_background.9.png" );
+
+const char* POPUP_CONTROL_OK_NAME( "PopupControlOk" );
+const char* POPUP_CONTROL_CANCEL_NAME( "PopupControlCancel" );
+const char* BORDER_IMAGE( DEMO_IMAGE_DIR "border-4px.9.png" );
+const char* RESIZE_HANDLE_IMAGE( DEMO_IMAGE_DIR "resize-handle.png" );
+
+const int NUMBER_OF_THEMES(3); // The default theme is considered.
+
+const Vector4 BACKGROUND_COLOUR( 1.0f, 1.0f, 1.0f, 0.15f );
+const int BORDER_WIDTH( 4 );
+
+const char* const SMALL_IMAGE_1 = DEMO_IMAGE_DIR "gallery-small-14.jpg";
+const char* const BIG_IMAGE_1   = DEMO_IMAGE_DIR "gallery-large-4.jpg";
+
+const char* const SMALL_IMAGE_2 = DEMO_IMAGE_DIR "gallery-small-39.jpg";
+const char* const BIG_IMAGE_2   = DEMO_IMAGE_DIR "gallery-large-7.jpg";
+
+const char* const SMALL_IMAGE_3 = DEMO_IMAGE_DIR "gallery-small-20.jpg";
+const char* const BIG_IMAGE_3   = DEMO_IMAGE_DIR "gallery-large-11.jpg";
+
+// Layout
+const int MARGIN_SIZE = 10;
+
+const int RADIO_LABEL_THUMBNAIL_SIZE = 60;
+const int RADIO_LABEL_THUMBNAIL_SIZE_SMALL = 40;
+const int RADIO_IMAGE_SPACING = 8;
+const int BUTTON_HEIGHT = 48;
+
+Property::Index GetChannelProperty( int index )
+{
+  Property::Index channelIndex = Property::INVALID_INDEX;
+  switch(index)
+  {
+    case 0: { channelIndex = ImageChannelControl::Property::RED_CHANNEL; break; }
+    case 1: { channelIndex = ImageChannelControl::Property::GREEN_CHANNEL; break; }
+    case 2: { channelIndex = ImageChannelControl::Property::BLUE_CHANNEL; break; }
+  }
+  return channelIndex;
+}
+
+} // anonymous namespace
+
+
+
+StylingApplication::StylingApplication( Application& application )
+: mApplication( application )
+{
+  application.InitSignal().Connect( this, &StylingApplication::Create );
+}
+
+StylingApplication::~StylingApplication()
+{
+}
+
+void StylingApplication::Create( Application& application )
+{
+  Stage stage = Stage::GetCurrent();
+  stage.KeyEventSignal().Connect(this, &StylingApplication::OnKeyEvent);
+  stage.SetBackgroundColor( Vector4( 0.1f, 0.1f, 0.1f, 1.0f ) );
+
+  // Hide the indicator bar
+  application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+  mContentPane = CreateContentPane();
+  stage.Add( mContentPane );
+  mContentPane.SetSize( stage.GetSize() );
+
+  // Content panes:
+  TableView contentLayout = TableView::New( 5, 1 );
+  contentLayout.SetName("ContentLayout");
+  contentLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  contentLayout.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  contentLayout.SetParentOrigin( ParentOrigin::TOP_LEFT );
+  contentLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+
+  // Assign all rows the size negotiation property of fitting to children
+  for( unsigned int i = 0; i < contentLayout.GetRows(); ++i )
+  {
+    if( i != 1 )
+    {
+      contentLayout.SetFitHeight(i); // Row 1 should fill
+    }
+  }
+
+  mContentPane.Add( contentLayout );
+
+  mTitle = TextLabel::New( "Styling Example" );
+  mTitle.SetName( "Title" );
+  mTitle.SetStyleName("title");
+  mTitle.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+  mTitle.SetParentOrigin( ParentOrigin::TOP_CENTER );
+  mTitle.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mTitle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+  mTitle.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+  contentLayout.Add( mTitle );
+
+  // Buttons:
+
+  TableView imageSelectLayout = TableView::New( 1, 2 );
+  imageSelectLayout.SetName("ImageSelectLayout");
+
+  imageSelectLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  imageSelectLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
+  imageSelectLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  imageSelectLayout.SetParentOrigin( ParentOrigin::CENTER );
+  imageSelectLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+
+  // Fit radio button column to child width, leave image to fill remainder
+  imageSelectLayout.SetFitWidth( 0 );
+
+  contentLayout.Add( imageSelectLayout );
+
+  TableView radioButtonsLayout = TableView::New( 3, 2 );
+  radioButtonsLayout.SetName("RadioButtonsLayout");
+  radioButtonsLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
+  // Leave each row to fill to parent height
+  // Set each column to fit to child width
+  radioButtonsLayout.SetFitWidth(0);
+  radioButtonsLayout.SetFitWidth(1);
+  radioButtonsLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) );
+
+  imageSelectLayout.AddChild( radioButtonsLayout, TableView::CellPosition(0, 0) );
+  imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER );
+
+  const char* images[] = { SMALL_IMAGE_1, SMALL_IMAGE_2, SMALL_IMAGE_3 };
+
+  for( int i=0; i<3; ++i )
+  {
+    std::ostringstream thumbnailName; thumbnailName << "thumbnail" << i+1;
+    ImageView image = ImageView::New( ResourceImage::New( images[i] ) );
+    image.SetName( thumbnailName.str() );
+    image.SetSize( DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE) );
+
+    std::ostringstream label; label << (i+1);
+    std::ostringstream radioButtonStyleName;
+    radioButtonStyleName << "imageSelectButton" << i+1;
+    mRadioButtons[i] = RadioButton::New( label.str() );
+    mRadioButtons[i].SetName( radioButtonStyleName.str() );
+    mRadioButtons[i].SetParentOrigin( ParentOrigin::TOP_LEFT );
+    mRadioButtons[i].SetAnchorPoint( AnchorPoint::TOP_LEFT );
+    mRadioButtons[i].SetSelected( false );
+    mRadioButtons[i].StateChangedSignal().Connect( this, &StylingApplication::OnButtonStateChange );
+
+    radioButtonsLayout.AddChild( mRadioButtons[i], TableView::CellPosition( i, 0 ) );
+    radioButtonsLayout.AddChild( image, TableView::CellPosition( i, 1 ) );
+    radioButtonsLayout.SetCellAlignment( TableView::CellPosition( i, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+    radioButtonsLayout.SetCellAlignment( TableView::CellPosition( i, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+  }
+
+  mRadioButtons[0].SetSelected( true );
+
+  mImageChannelControl = ImageChannelControl::New( BIG_IMAGE_1 );
+  mImageChannelControl.SetName("ImageChannelControl");
+  mImageChannelControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT , Dimension::ALL_DIMENSIONS );
+  mImageChannelControl.SetSizeScalePolicy( SizeScalePolicy::FIT_WITH_ASPECT_RATIO );
+  imageSelectLayout.AddChild( mImageChannelControl, TableView::CellPosition( 0, 1 ) );
+
+  imageSelectLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER );
+
+
+  TableView channelSliderLayout = TableView::New( 3, 3 );
+  channelSliderLayout.SetName("ChannelSliderLayout");
+
+  // Contains a column of check buttons and a column of sliders for R/G/B
+  channelSliderLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  channelSliderLayout.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+  channelSliderLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  channelSliderLayout.SetParentOrigin( ParentOrigin::CENTER );
+  channelSliderLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+
+  // Set each row to fit to child height
+  channelSliderLayout.SetFitHeight( 0 );
+  channelSliderLayout.SetFitHeight( 1 );
+  channelSliderLayout.SetFitHeight( 2 );
+
+  // Set each column to fit to child width
+  channelSliderLayout.SetFitWidth( 0 );
+  channelSliderLayout.SetFitWidth( 1 );
+
+  contentLayout.Add( channelSliderLayout );
+  const char *checkboxLabels[3] = {"R", "G", "B"};
+
+  for( int i=0; i<3; ++i )
+  {
+    std::ostringstream checkBoxStyleName;
+    checkBoxStyleName << "channelActiveCheckBox" << i+1;
+    mCheckButtons[i] = CheckBoxButton::New();
+    mCheckButtons[i].SetName( checkBoxStyleName.str() );
+    mCheckButtons[i].SetParentOrigin( ParentOrigin::CENTER );
+    mCheckButtons[i].SetAnchorPoint( AnchorPoint::CENTER );
+    mCheckButtons[i].SetSelected( true );
+
+    mCheckButtons[i].StateChangedSignal().Connect( this, &StylingApplication::OnCheckButtonChange );
+    mCheckButtons[i].RegisterProperty( "channel", i, Property::READ_WRITE );
+
+    channelSliderLayout.AddChild( mCheckButtons[i], TableView::CellPosition( i, 0 ) );
+    channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+
+    TextLabel label = TextLabel::New( checkboxLabels[i] );
+    std::ostringstream labelStyleName; labelStyleName << "colorLabel" << i+1;
+    label.SetName( labelStyleName.str() );
+    label.SetStyleName( labelStyleName.str() );
+    label.SetParentOrigin( ParentOrigin::CENTER );
+    label.SetAnchorPoint ( AnchorPoint::CENTER );
+    label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
+    label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+
+    channelSliderLayout.AddChild( label, TableView::CellPosition( i, 1 ) );
+    channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+
+    mChannelSliders[i] = Slider::New();
+    std::ostringstream sliderStyleName; sliderStyleName << "colorSlider" << i+1;
+    mChannelSliders[i].SetName( sliderStyleName.str() );
+    mChannelSliders[i].SetStyleName( sliderStyleName.str() );
+    mChannelSliders[i].SetParentOrigin( ParentOrigin::CENTER );
+    mChannelSliders[i].SetAnchorPoint ( AnchorPoint::CENTER );
+    mChannelSliders[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mChannelSliders[i].SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN , Dimension::HEIGHT );
+    mChannelSliders[i].SetProperty( Slider::Property::LOWER_BOUND, 0.0f );
+    mChannelSliders[i].SetProperty( Slider::Property::UPPER_BOUND, 100.0f );
+    mChannelSliders[i].SetProperty( Slider::Property::VALUE_PRECISION, 0 );
+    mChannelSliders[i].SetProperty( Slider::Property::VALUE, 100.0f );
+    mChannelSliders[i].SetProperty( Slider::Property::SHOW_POPUP, true );
+    mChannelSliders[i].SetProperty( Slider::Property::SHOW_VALUE, true );
+
+    mChannelSliders[i].RegisterProperty( "channel", i, Property::READ_WRITE );
+
+    channelSliderLayout.AddChild( mChannelSliders[i], TableView::CellPosition( i, 2 ) );
+    channelSliderLayout.SetCellAlignment( TableView::CellPosition( i, 2 ), HorizontalAlignment::RIGHT, VerticalAlignment::CENTER );
+
+    mChannelSliders[i].ValueChangedSignal().Connect( this, &StylingApplication::OnSliderChanged );
+  }
+
+  mResetButton = PushButton::New();
+  mResetButton.SetLabelText( "Reset" );
+  mResetButton.SetName("ResetButton");
+  mResetButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+  mResetButton.ClickedSignal().Connect( this, &StylingApplication::OnResetClicked );
+
+  contentLayout.Add( mResetButton );
+  contentLayout.SetCellAlignment( TableView::CellPosition( 3, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+
+  TableView themeButtonLayout = TableView::New( 1, 4 );
+  themeButtonLayout.SetName("ThemeButtonsLayout");
+  themeButtonLayout.SetCellPadding( Vector2( 6.0f, 0.0f ) );
+
+  themeButtonLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  themeButtonLayout.SetParentOrigin( ParentOrigin::CENTER );
+  themeButtonLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  themeButtonLayout.SetResizePolicy( ResizePolicy::FIT_TO_CHILDREN, Dimension::HEIGHT );
+  themeButtonLayout.SetCellPadding( Size( MARGIN_SIZE, MARGIN_SIZE ) );
+  themeButtonLayout.SetFitHeight( 0 );
+
+  TextLabel label = TextLabel::New( "Theme: ");
+  label.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+  label.SetStyleName("themelabel");
+  label.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+  label.SetParentOrigin( ParentOrigin::TOP_CENTER );
+  themeButtonLayout.AddChild( label, TableView::CellPosition( 0, 0 ) );
+  themeButtonLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::LEFT, VerticalAlignment::CENTER );
+
+  for( int i=0; i<3; ++i )
+  {
+    mThemeButtons[i] = PushButton::New();
+    mThemeButtons[i].SetName("ThemeButton");
+    mThemeButtons[i].SetStyleName("ThemeButton");
+    mThemeButtons[i].SetParentOrigin( ParentOrigin::CENTER );
+    mThemeButtons[i].SetAnchorPoint( ParentOrigin::CENTER );
+    mThemeButtons[i].SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+    mThemeButtons[i].SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+    mThemeButtons[i].RegisterProperty( "theme", i, Property::READ_WRITE );
+    mThemeButtons[i].ClickedSignal().Connect( this, &StylingApplication::OnThemeButtonClicked );
+    themeButtonLayout.AddChild( mThemeButtons[i], TableView::CellPosition( 0, 1+i ) );
+  }
+  mThemeButtons[0].SetLabelText( "Lite" ); // Lightweight changes on top of Dali
+  mThemeButtons[1].SetLabelText( "App1" ); // Different application style
+  mThemeButtons[2].SetLabelText( "App2" );
+
+  contentLayout.Add( themeButtonLayout );
+}
+
+Actor StylingApplication::CreateContentPane()
+{
+  Toolkit::ImageView contentPane = Toolkit::ImageView::New( BORDER_IMAGE );
+  contentPane.SetName("ContentPane");
+  contentPane.SetParentOrigin( ParentOrigin::CENTER );
+  contentPane.SetAnchorPoint( AnchorPoint::CENTER );
+  contentPane.SetPadding( Padding( BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH ) );
+  return contentPane;
+}
+
+Actor StylingApplication::CreateResizableContentPane()
+{
+  Toolkit::ImageView contentPane = Toolkit::ImageView::New( BORDER_IMAGE );
+  contentPane.SetName("ContentPane");
+  contentPane.SetParentOrigin( ParentOrigin::CENTER );
+  contentPane.SetAnchorPoint( AnchorPoint::CENTER );
+  contentPane.SetPadding( Padding( BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH, BORDER_WIDTH ) );
+
+  Toolkit::ImageView grabHandle = Toolkit::ImageView::New( RESIZE_HANDLE_IMAGE );
+  grabHandle.SetName("GrabHandle");
+  grabHandle.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
+  grabHandle.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
+  grabHandle.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
+  grabHandle.SetPosition( -BORDER_WIDTH, -BORDER_WIDTH );
+  grabHandle.SetOpacity( 0.6f );
+
+  Layer grabCornerLayer = Layer::New();
+  grabCornerLayer.SetName("GrabCornerLayer");
+  grabCornerLayer.SetParentOrigin( ParentOrigin::BOTTOM_RIGHT );
+  grabCornerLayer.SetAnchorPoint( AnchorPoint::BOTTOM_RIGHT );
+  grabCornerLayer.Add( grabHandle );
+  contentPane.Add( grabCornerLayer );
+
+  mPanGestureDetector = PanGestureDetector::New();
+  mPanGestureDetector.Attach( grabHandle );
+  mPanGestureDetector.DetectedSignal().Connect( this, &StylingApplication::OnPan );
+
+  return contentPane;
+}
+
+Popup StylingApplication::CreateResetPopup()
+{
+  Stage stage = Stage::GetCurrent();
+
+  Popup popup= Popup::New();
+  popup.SetName("ResetPopup");
+  popup.SetStyleName("ResetPopup");
+  popup.SetParentOrigin( ParentOrigin::CENTER );
+  popup.SetAnchorPoint( AnchorPoint::CENTER );
+  popup.SetSize( stage.GetSize().width * 0.75f, 0.0f );
+  popup.SetProperty( Popup::Property::TAIL_VISIBILITY, false );
+  popup.OutsideTouchedSignal().Connect( this, &StylingApplication::HidePopup );
+  popup.HiddenSignal().Connect( this, &StylingApplication::PopupHidden );
+
+  popup.SetTitle( CreateTitle( "Reset channels" ) );
+
+  TextLabel text = TextLabel::New( "This will reset the channel data to full value. Are you sure?" );
+  text.SetName( "PopupContentText" );
+  text.SetStyleName( "popupBody" );
+  text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
+  text.SetProperty( TextLabel::Property::MULTI_LINE, true );
+  text.SetPadding( Padding( 10.0f, 10.0f, 20.0f, 0.0f ) );
+  popup.SetContent( text );
+
+  ImageView footer = ImageView::New( DEFAULT_CONTROL_AREA_IMAGE_PATH );
+  footer.SetName( "PopupFooter" );
+  footer.SetStyleName( "PopupFooter" );
+  footer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  footer.SetResizePolicy( ResizePolicy::FIXED, Dimension::HEIGHT );
+  footer.SetSize( 0.0f, 80.0f );
+  footer.SetAnchorPoint( AnchorPoint::CENTER );
+  footer.SetParentOrigin( ParentOrigin::CENTER );
+
+  TableView footerLayout = TableView::New( 1, 2 );
+  footerLayout.SetParentOrigin( ParentOrigin::CENTER );
+  footerLayout.SetAnchorPoint ( AnchorPoint::CENTER );
+  footerLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+
+  PushButton okayButton = PushButton::New();
+  okayButton.SetName( POPUP_CONTROL_OK_NAME );
+  okayButton.SetStyleName( POPUP_CONTROL_OK_NAME );
+  okayButton.SetLabelText( "Ok!" );
+  okayButton.ClickedSignal().Connect( this, &StylingApplication::OnReset );
+  okayButton.SetParentOrigin( ParentOrigin::CENTER );
+  okayButton.SetAnchorPoint( AnchorPoint::CENTER );
+  okayButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
+  okayButton.SetSizeModeFactor( Vector3( -20.0f, -20.0f, 0.0f ) );
+
+  PushButton cancelButton = PushButton::New();
+  cancelButton.SetName( POPUP_CONTROL_CANCEL_NAME );
+  cancelButton.SetStyleName( POPUP_CONTROL_CANCEL_NAME );
+  cancelButton.SetLabelText( "Cancel" );
+  cancelButton.ClickedSignal().Connect( this, &StylingApplication::OnResetCancelled );
+  cancelButton.SetParentOrigin( ParentOrigin::CENTER );
+  cancelButton.SetAnchorPoint( AnchorPoint::CENTER );
+  cancelButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
+  cancelButton.SetSizeModeFactor( Vector3( -20.0f, -20.0f, 0.0f ) );
+
+  footerLayout.SetCellAlignment( TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+  footerLayout.SetCellAlignment( TableView::CellPosition( 0, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
+  footerLayout.AddChild( okayButton, TableView::CellPosition( 0, 0 ) );
+  footerLayout.AddChild( cancelButton, TableView::CellPosition( 0, 1 ) );
+  footerLayout.SetCellPadding( Size( 10.f, 10.f ) );
+  footer.Add( footerLayout );
+
+  popup.SetFooter( footer );
+  return popup;
+}
+
+TextLabel StylingApplication::CreateTitle( std::string title )
+{
+  TextLabel titleActor = TextLabel::New( title );
+  titleActor.SetName( "titleActor" );
+  titleActor.SetStyleName( "popupTitle" );
+  titleActor.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
+  titleActor.SetProperty( TextLabel::Property::MULTI_LINE, false );
+
+  return titleActor;
+}
+
+bool StylingApplication::OnButtonStateChange( Button button )
+{
+  // Todo: save / restore slider states per image
+
+  if( mImageChannelControl )
+  {
+    if( mRadioButtons[0].IsSelected() )
+    {
+      mImageChannelControl.SetImage( BIG_IMAGE_1 );
+    }
+    else if( mRadioButtons[1].IsSelected() )
+    {
+      mImageChannelControl.SetImage( BIG_IMAGE_2 );
+    }
+    else if( mRadioButtons[2].IsSelected() )
+    {
+      mImageChannelControl.SetImage( BIG_IMAGE_3 );
+    }
+  }
+  return true;
+}
+
+bool StylingApplication::OnCheckButtonChange( Button button )
+{
+  Property::Index index = button.GetPropertyIndex("channel");
+  if( index != Property::INVALID_INDEX )
+  {
+    int channel = button.GetProperty<int>( index );
+    float value = mChannelSliders[channel].GetProperty<float>( Slider::Property::VALUE );
+    if( !button.IsSelected() )
+    {
+      // "Turn off" the channel's contribution
+      value = 0.0f;
+    }
+    Property::Index channelIndex = GetChannelProperty( channel );
+    mImageChannelControl.SetProperty(channelIndex, value/100.0f);
+  }
+  return true;
+}
+
+bool StylingApplication::OnThemeButtonClicked( Button button )
+{
+  int theme = button.GetProperty<int>(button.GetPropertyIndex("theme"));
+  const char* themePath=NULL;
+
+  switch( theme )
+  {
+    case 0:
+    {
+      themePath = DEMO_THEME_ONE_PATH;
+      break;
+    }
+    case 1:
+    {
+      themePath = DEMO_THEME_TWO_PATH;
+      break;
+    }
+    case 2:
+    {
+      themePath = DEMO_THEME_THREE_PATH;
+      break;
+    }
+  }
+  StyleManager::Get().ApplyTheme( themePath );
+
+  return true;
+}
+
+bool StylingApplication::OnResetClicked( Button button )
+{
+  if( ! mResetPopup )
+  {
+    mResetPopup = CreateResetPopup ();
+  }
+
+  Stage::GetCurrent().Add( mResetPopup );
+
+  mResetPopup.SetDisplayState( Popup::SHOWN );
+  return true;
+}
+
+bool StylingApplication::OnReset( Button button )
+{
+  // todo: Reset the sliders for this image
+  for( int i=0; i<3; ++i )
+  {
+    mChannelSliders[i].SetProperty( Slider::Property::VALUE, 100.0f );
+  }
+  HidePopup();
+  return true;
+}
+
+bool StylingApplication::OnResetCancelled( Button button )
+{
+  HidePopup();
+  return true;
+}
+
+bool StylingApplication::OnSliderChanged( Slider slider, float value )
+{
+  // todo - change color channel's saturation
+  Property::Index index = slider.GetPropertyIndex("channel");
+  if( index != Property::INVALID_INDEX )
+  {
+    int channel = slider.GetProperty<int>( index );
+    if( mCheckButtons[channel].IsSelected() )
+    {
+      Property::Index channelIndex = GetChannelProperty( channel );
+      mImageChannelControl.SetProperty(channelIndex, value/100.0f);
+    }
+  }
+  return true;
+}
+
+void StylingApplication::HidePopup()
+{
+  if( mResetPopup )
+  {
+    mResetPopup.SetDisplayState( Popup::HIDDEN );
+  }
+}
+
+void StylingApplication::PopupHidden()
+{
+  if( mResetPopup )
+  {
+    // Clear down resources
+    mResetPopup.Unparent();
+    mResetPopup.Reset();
+  }
+}
+
+void StylingApplication::OnPan( Actor actor, const PanGesture& gesture )
+{
+  Vector3 size = mContentPane.GetTargetSize();
+  mContentPane.SetSize( size.GetVectorXY() + gesture.displacement * 2.0f );
+}
+
+void StylingApplication::OnKeyEvent( const KeyEvent& keyEvent )
+{
+  static int keyPressed = 0;
+
+  if( keyEvent.state == KeyEvent::Down)
+  {
+    if( keyPressed == 0 ) // Is this the first down event?
+    {
+      printf("Key pressed: %s %d\n", keyEvent.keyPressedName.c_str(), keyEvent.keyCode );
+
+      if( IsKey( keyEvent, DALI_KEY_ESCAPE) || IsKey( keyEvent, DALI_KEY_BACK ) )
+      {
+        mApplication.Quit();
+      }
+      else if( keyEvent.keyPressedName.compare("Return") == 0 )
+      {
+        mCurrentTheme++;
+        mCurrentTheme %= NUMBER_OF_THEMES;
+
+        StyleManager styleManager = StyleManager::Get();
+        switch( mCurrentTheme )
+        {
+          case 0:
+          {
+            styleManager.ApplyTheme( DEMO_THEME_ONE_PATH );
+            printf("Changing to theme One\n");
+            break;
+          }
+          case 1:
+          {
+            styleManager.ApplyTheme( DEMO_THEME_TWO_PATH );
+            printf("Changing to theme Two\n");
+            break;
+          }
+          case 2:
+          {
+            styleManager.ApplyDefaultTheme();
+            printf("Changing to Toolkit theme\n");
+            break;
+          }
+        }
+      }
+    }
+    keyPressed = 1;
+  }
+  else if( keyEvent.state == KeyEvent::Up )
+  {
+    keyPressed = 0;
+  }
+}
+
+} // namespace Demo
+#ifndef DALI_DEMO_STYLING_APPLICATION_H
+#define DALI_DEMO_STYLING_APPLICATION_H
+
+/*
+ * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// External includes
+#include <dali-toolkit/dali-toolkit.h>
+//#include <dali-toolkit/devel-api/controls/slider/slider.h>
+#include <dali-toolkit/devel-api/controls/popup/popup.h>
+#include "image-channel-control.h"
+#include <cstdio>
+#include <sstream>
+
+// Internal includes
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+class StylingApplication : public ConnectionTracker
+{
+public:
+  // Constructor
+  StylingApplication( Application& application );
+
+  // Destructor
+  ~StylingApplication();
+
+  // Init signal handler
+  void Create( Application& application );
+
+  // Create the GUI components
+  Actor CreateContentPane();
+  Actor CreateResizableContentPane();
+  Toolkit::Popup CreateResetPopup();
+  Toolkit::TextLabel CreateTitle( std::string title );
+
+  // Key event handler
+  void OnKeyEvent( const KeyEvent& event );
+
+  // Button event handlers
+  bool OnButtonStateChange( Toolkit::Button button );
+  bool OnCheckButtonChange( Toolkit::Button button );
+  bool OnResetClicked( Toolkit::Button button );
+  bool OnThemeButtonClicked( Toolkit::Button button );
+
+  // Slider event handler
+  bool OnSliderChanged( Toolkit::Slider slider, float value );
+
+  // Popup event handlers
+  void HidePopup();
+  void PopupHidden();
+  bool OnReset(Button button);
+  bool OnResetCancelled(Button button);
+
+  // Grab handle handler
+  void OnPan( Actor actor, const PanGesture& gesture );
+
+  static const char* DEMO_THEME_ONE_PATH;
+  static const char* DEMO_THEME_TWO_PATH;
+  static const char* DEMO_THEME_THREE_PATH;
+
+private:
+  Application& mApplication;
+  int mCurrentTheme;
+  Actor mContentPane;
+  TextLabel mTitle;
+  RadioButton mRadioButtons[3]; // 3 demo images
+  CheckBoxButton mCheckButtons[3]; // rgb buttons
+  Slider mChannelSliders[3]; // rgb sliders
+  PushButton mThemeButtons[3];
+  PushButton mResetButton;
+  ImageChannelControl mImageChannelControl;
+  Popup mResetPopup;
+  PanGestureDetector mPanGestureDetector;
+};
+
+} // Namespace Demo
+
+
+#endif // DALI_DEMO_STYLING_APPLICATION_H
@@ -138,6 +138,7 @@ exit 0
 %{dali_app_ro_dir}/models/*
 %{dali_app_ro_dir}/scripts/*
 %{dali_app_ro_dir}/style/*
+%{dali_app_ro_dir}/style/images/*
 %{dali_xml_file_dir}/%{name}.xml
 %{dali_icon_dir}/*
 %{locale_dir}/*
@@ -106,6 +106,9 @@ msgstr &quot;লিপি&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "স্ক্ৰ'ল কৰক"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "শৈলী"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "অস্পষ্টকৈ অপুষ্পক"
@@ -128,4 +131,4 @@ msgid &quot;DALI_DEMO_STR_TITLE_TEXT_SCROLLING&quot;
 msgstr "অকনিষ্ঠ অৰ্জুন বঁটা"
 msgid "DALI_DEMO_STR_TITLE_TILT_SENSOR"
-msgstr "টিল্ট অনুভূতি"
 \ No newline at end of file
+msgstr "টিল্ট অনুভূতি"
@@ -106,6 +106,9 @@ msgstr &quot;Scripting&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll-Ansicht"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Styling"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Unschärfe und blühen"
@@ -106,6 +106,9 @@ msgstr &quot;Script-based UI&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll View"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Styling"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Super Blur and Bloom"
@@ -106,6 +106,9 @@ msgstr &quot;Script-based UI&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Scroll View"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Styling"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Super Blur and Bloom"
@@ -106,6 +106,9 @@ msgstr &quot;Interfaz definida por Script&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "Vista de desplazamiento"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "Estilo"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "Efecto blur y bloom"
@@ -106,6 +106,9 @@ msgstr &quot;스크립팅&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "스크롤 뷰"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr ""
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr ""
@@ -106,6 +106,9 @@ msgstr &quot;സ്ക്രിപ്റ്റ്&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "സ്ക്രോള്ചെയ്യുക കാഴ്ച"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "ശൈലി"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "മങ്ങൽ പൂക്കൽ"
@@ -106,6 +106,9 @@ msgstr &quot;سکرپٹ&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "سکرول ویو"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "سٹائل"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "دھندلاپن اور بلوم"
@@ -106,6 +106,9 @@ msgstr &quot;脚本用户界面&quot;
 msgid "DALI_DEMO_STR_TITLE_SCROLL_VIEW"
 msgstr "滚动视图"
+msgid "DALI_DEMO_STR_TITLE_STYLING"
+msgstr "样式"
+
 msgid "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM"
 msgstr "模糊及泛光"
+demo-theme.json
+style-example-theme-three.json
+style-example-theme-two.json
+style-example-theme-one.json
+*.xcf
+{
+  "styles":
+  {
+    "title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "tableview":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "flexcontainer":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.1 ]
+      }
+    },
+    "radiobutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "textlabel":{
+      "textColor":[0,0,0,1]
+    },
+    "colorSlider1":{
+      "styles":["slider"]
+    },
+    "colorSlider2":{
+      "styles":["slider"]
+    },
+    "colorSlider3":{
+      "styles":["slider"]
+    }
+  }
+}
+{
+  "styles":
+  {
+    "title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "rendererType":"color",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "tableview":{
+      "background":
+      {
+        "rendererType":"color",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "radiobutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "textlabel":{
+      "textColor":[0,0,0,1]
+    }
+  }
+}
+{
+  "constants":
+  {
+    "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@"
+  },
+  "styles":
+  {
+    "title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "tableview":{
+      "background":
+      {
+        "visualType":"GRADIENT",
+        "startPosition": [0,-1],
+        "endPosition": [0,1],
+        "stopColor": [ [ 1.0, 0.0, 1.0, 0.03 ], [1.0,0.0,1.0,0.15] ]
+      }
+    },
+
+    // Change an icon size, see if it gets properly re-sized
+    "radiobutton":{
+      "unselectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected.png",
+      "selectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-selected.png",
+      "disabledStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected-disabled.png",
+      "imageLabelGap":10,
+      "label":{
+        "textColor": [0.1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+
+    // Note, this overrides any non-renamed label styles, e.g. those in a button.
+    "textlabel":{
+      //"textColor":[0,0,0,1]
+    },
+
+    "thinslider":{
+      "styles": ["slider"],
+      "showPopup":true,
+      "showValue":false,
+      "valuePrecision":0,
+      "handleVisual":{
+        "size":[48,48]
+      },
+      "trackVisual":{
+        "size":[10, 10]
+      },
+      "enabled":true
+    },
+    "colorSlider1":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-red.9.png"
+      }
+    },
+    "colorSlider2":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-green.9.png"
+      }
+    },
+    "colorSlider3":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-blue.9.png"
+      }
+    }
+  }
+}
+{
+  "styles":
+  {
+    "title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "tableview":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "flexcontainer":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.1 ]
+      }
+    },
+    "radiobutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "textlabel":{
+      "textColor":[0,0,0,1]
+    },
+    "colorSlider1":{
+      "styles":["slider"]
+    },
+    "colorSlider2":{
+      "styles":["slider"]
+    },
+    "colorSlider3":{
+      "styles":["slider"]
+    }
+  }
+}
+{
+  "styles":
+  {
+    "title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "tableview":{
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 0.03 ]
+      }
+    },
+    "radiobutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+    "textlabel":{
+      "textColor":[0,0,0,1]
+    }
+  }
+}
+{
+  "constants":
+  {
+    "DEMO_IMAGE_DIR":"@DEMO_STYLE_IMAGE_DIR@"
+  },
+  "styles":
+  {
+    "title":{
+      "textColor":"#0000ff",
+      "background":
+      {
+        "visualType":"COLOR",
+        "mixColor": [ 1.0, 1.0, 1.0, 1.0 ]
+      }
+    },
+    "tableview":{
+      "background":
+      {
+        "visualType":"GRADIENT",
+        "startPosition": [0,-1],
+        "endPosition": [0,1],
+        "stopColor": [ [ 1.0, 0.0, 1.0, 0.03 ], [1.0,0.0,1.0,0.15] ]
+      }
+    },
+
+    // Change an icon size, see if it gets properly re-sized
+    "radiobutton":{
+      "unselectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected.png",
+      "selectedStateImage":"{DEMO_IMAGE_DIR}/radio-button-selected.png",
+      "disabledStateImage":"{DEMO_IMAGE_DIR}/radio-button-unselected-disabled.png",
+      "imageLabelGap":10,
+      "label":{
+        "textColor": [0.1,1,1,1]
+      }
+    },
+    "checkboxbutton":{
+      "label":{
+        "textColor": [1,1,1,1]
+      }
+    },
+    "colorLabel1":{
+      "textColor": [1,0,0,1]
+    },
+    "colorLabel2":{
+      "textColor": [0,1,0,1]
+    },
+    "colorLabel3":{
+      "textColor": [0.3,0.3,1,1]
+    },
+    "themelabel":{
+      "textColor":[0,1,1,1]
+    },
+    "popupTitle":{
+      "textColor":[1,1,1,1]
+    },
+    "popupBody":{
+      "textColor":[1,1,0,1]
+    },
+
+    // Note, this overrides any non-renamed label styles, e.g. those in a button.
+    "textlabel":{
+      //"textColor":[0,0,0,1]
+    },
+
+    "thinslider":{
+      "styles": ["slider"],
+      "showPopup":true,
+      "showValue":false,
+      "valuePrecision":0,
+      "handleVisual":{
+        "size":[48,48]
+      },
+      "trackVisual":{
+        "size":[10, 10]
+      },
+      "enabled":true
+    },
+    "colorSlider1":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-red.9.png"
+      }
+    },
+    "colorSlider2":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-green.9.png"
+      }
+    },
+    "colorSlider3":{
+      "styles":["thinslider"],
+      "progressVisual":{
+        "url":"{DEMO_IMAGE_DIR}/slider-skin-progress-blue.9.png"
+      }
+    }
+  }
+}
@@ -68,6 +68,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL")
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI")
 #define DALI_DEMO_STR_TITLE_SCROLL_VIEW                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SCROLL_VIEW")
+#define DALI_DEMO_STR_TITLE_STYLING                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_STYLING")
 #define DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM")
 #define DALI_DEMO_STR_TITLE_TEXTURED_MESH               dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXTURED_MESH")
 #define DALI_DEMO_STR_TITLE_TEXT_EDITOR                 dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_TEXT_EDITOR")
@@ -115,6 +116,7 @@ extern &quot;C&quot;
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            "Renderer Stencils"
 #define DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI             "Script Based UI"
 #define DALI_DEMO_STR_TITLE_SCROLL_VIEW                 "Scroll View"
+#define DALI_DEMO_STR_TITLE_STYLING                     "Styling"
 #define DALI_DEMO_STR_TITLE_SUPER_BLUR_BLOOM            "Super Blur and Bloom"
 #define DALI_DEMO_STR_TITLE_TEXTURED_MESH               "Mesh Texture"
 #define DALI_DEMO_STR_TITLE_TEXT_EDITOR                 "Text Editor"