A simple control using visuals

Example code for creating a control using visuals with states defined in the stylesheet

Change-Id: Ief41cfad7c3eeb8d78bd6540db36e4b761b28e5f

16 files changed, 867 insertions, 0 deletions

diff --git a/build/tizen/CMakeLists.txt b/build/tizen/CMakeLists.txt
index 5a394e3b..8894f151 100644
--- a/build/tizen/CMakeLists.txt
+++ b/build/tizen/CMakeLists.txt
@@ -103,6 +103,7 @@ CONFIGURE_FILE( resources-location.in ${DEMO_SHARED}/resources-location.cpp )
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/demo-theme.json.in ${LOCAL_STYLE_DIR}/demo-theme.json )
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/contact-cards-example-theme.json.in ${LOCAL_STYLE_DIR}/contact-cards-example-theme.json )
 CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/progress-bar-example-theme.json.in ${LOCAL_STYLE_DIR}/progress-bar-example-theme.json )
+CONFIGURE_FILE( ${LOCAL_STYLE_DIR}/simple-example-theme.json.in ${LOCAL_STYLE_DIR}/simple-example-theme.json )
 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 )
diff --git a/com.samsung.dali-demo.xml b/com.samsung.dali-demo.xml
index ba612908..8a205b49 100644
--- a/com.samsung.dali-demo.xml
+++ b/com.samsung.dali-demo.xml
@@ -32,6 +32,9 @@
 	<ui-application appid="cube-transition-effect.example" exec="/usr/apps/com.samsung.dali-demo/bin/cube-transition-effect.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Cube transition effect</label>
 	</ui-application>
+	<ui-application appid="simple-visuals-control.example" exec="/usr/apps/com.samsung.dali-demo/bin/simple-visuals-control.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
+		<label>Simple Control</label>
+	</ui-application>
 	<ui-application appid="dissolve-effect.example" exec="/usr/apps/com.samsung.dali-demo/bin/dissolve-effect.example" nodisplay="true" multiple="false" type="c++app" taskmanage="true">
 		<label>Dissolve effect</label>
 	</ui-application>
diff --git a/examples/simple-visuals-control/my-control-impl.cpp b/examples/simple-visuals-control/my-control-impl.cpp
new file mode 100644
index 00000000..7c8a602c
--- /dev/null
+++ b/examples/simple-visuals-control/my-control-impl.cpp
@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// CLASS HEADER
+
+#include "my-control-impl.h"
+
+// EXTERNAL INCLUDES
+
+#include <dali/public-api/object/type-registry-helper.h>
+#include <dali/devel-api/scripting/enum-helper.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/focus-manager/keyinput-focus-manager.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+namespace Internal
+{
+
+namespace
+{
+
+
+Dali::BaseHandle Create()
+{
+  return Demo::MyControl::New();
+}
+
+// Required code for Property set up.
+
+DALI_TYPE_REGISTRATION_BEGIN( MyControl, Dali::Toolkit::Control, Create );
+
+DALI_PROPERTY_REGISTRATION( Demo, MyControl, "iconVisual", MAP, ICON_VISUAL )
+
+DALI_TYPE_REGISTRATION_END();
+
+// Add an enum to string conversion entry for the control's visuals.  In this case just the icon visual.
+// Enables Setting of the property using enums or strings.
+DALI_ENUM_TO_STRING_TABLE_BEGIN( VISUAL_PROPERTIES )
+{ "iconVisual", Demo::MyControl::Property::ICON_VISUAL },
+DALI_ENUM_TO_STRING_TABLE_END( VISUAL_PROPERTIES )
+
+
+} // anonymous namespace
+
+
+Internal::MyControl::MyControl()
+: Control( ControlBehaviour( REQUIRES_STYLE_CHANGE_SIGNALS ) )
+{
+}
+
+Demo::MyControl Internal::MyControl::New()
+{
+  IntrusivePtr<Internal::MyControl> impl = new Internal::MyControl();
+  Demo::MyControl handle = Demo::MyControl( *impl );
+  impl->Initialize();
+  return handle;
+}
+
+void MyControl::OnInitialize()
+{
+  Dali::Actor self = Self();
+  self.SetKeyboardFocusable( true );
+}
+
+void MyControl::SetProperty( BaseObject* object, Property::Index index, const Property::Value& value )
+{
+  Demo::MyControl myControl = Demo::MyControl::DownCast( Dali::BaseHandle( object ) );
+
+  if( myControl )
+  {
+    MyControl& impl = GetImpl( myControl );
+    switch ( index )
+    {
+      case Demo::MyControl::Property::ICON_VISUAL:
+      {
+        Toolkit::Visual::Base iconVisual;
+        Toolkit::VisualFactory visualFactory = Toolkit::VisualFactory::Get();
+        Property::Map *map = value.GetMap();
+        if( map && !map->Empty() )
+        {
+          iconVisual = visualFactory.CreateVisual( *map );
+        }
+
+        if ( iconVisual )
+        {
+          impl.RegisterVisual( index, iconVisual );
+        }
+        break;
+      }
+    }
+  }
+}
+
+Property::Value MyControl::GetProperty( BaseObject* object, Property::Index propertyIndex )
+{
+  Property::Value value;
+
+  Demo::MyControl myControl = Demo::MyControl::DownCast( Dali::BaseHandle( object ) );
+
+  if ( myControl )
+  {
+    switch ( propertyIndex )
+    {
+      case Demo::MyControl::Property::ICON_VISUAL:
+      {
+        Property::Map map;
+        Toolkit::Visual::Base visual =  GetImpl( myControl ).GetVisual( propertyIndex );
+        if ( visual )
+        {
+          visual.CreatePropertyMap( map ); // Creates a Property map containing the Visual that ICON_VISUAL currently is. Can change if state changes.
+          value = map;
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  return value;
+}
+
+} // Internal
+} // Demo
diff --git a/examples/simple-visuals-control/my-control-impl.h b/examples/simple-visuals-control/my-control-impl.h
new file mode 100644
index 00000000..76d84284
--- /dev/null
+++ b/examples/simple-visuals-control/my-control-impl.h
@@ -0,0 +1,103 @@
+#ifndef DALI_DEMO_INTERNAL_MY_CONTROL_IMPL_H
+#define DALI_DEMO_INTERNAL_MY_CONTROL_IMPL_H
+
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// CLASS HEADER
+#include "my-control.h"
+
+// EXTERNAL INCLUDES
+#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
+{
+
+/**
+ * @brief A Simple Control to show use of visuals with a style sheet and changing visuals with a state change
+ */
+
+class MyControl : public Dali::Toolkit::Internal::Control
+{
+public:
+  /**
+   * @brief Instantiate a new ContentView object
+   */
+  static Demo::MyControl New();
+
+  /**
+   * @brief Default constructor
+   */
+  MyControl();
+
+public:  // Properties
+  /**
+   * @brief 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 );
+
+  /**
+   * @brief 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();
+
+private:
+  /**
+   *  undefined constructor and operator=
+   */
+  MyControl( const MyControl& );
+  MyControl& operator=( const MyControl& );
+
+private:
+};
+
+} // Internal
+
+inline Internal::MyControl& GetImpl( Demo::MyControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<Internal::MyControl&>(object);
+}
+
+inline const Internal::MyControl& GetImpl( const Demo::MyControl& handle )
+{
+  DALI_ASSERT_ALWAYS( handle );
+  const Dali::RefObject& object = handle.GetImplementation();
+  return static_cast<const Internal::MyControl&>(object);
+}
+
+} // Demo
+
+#endif //  DALI_DEMO_INTERNAL_MY_CONTROL_IMPL_H
diff --git a/examples/simple-visuals-control/my-control.cpp b/examples/simple-visuals-control/my-control.cpp
new file mode 100644
index 00000000..65f5c282
--- /dev/null
+++ b/examples/simple-visuals-control/my-control.cpp
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// CLASS HEADER
+#include "my-control.h"
+
+// INTERNAL INCLUDES
+#include "my-control-impl.h"
+
+namespace Demo
+{
+
+MyControl::MyControl()
+{
+}
+
+MyControl::MyControl( const MyControl& control )
+: Control( control )
+{
+}
+
+MyControl& MyControl::operator= ( const MyControl& rhs )
+{
+  if( &rhs != this )
+  {
+    Control::operator=( rhs );
+  }
+  return *this;
+}
+
+MyControl::~MyControl()
+{
+}
+
+MyControl MyControl::New()
+{
+  MyControl control = Internal::MyControl::New();
+  return control;
+}
+
+MyControl MyControl::DownCast( BaseHandle handle )
+{
+  return Control::DownCast< MyControl, Internal::MyControl > ( handle );
+}
+
+MyControl::MyControl( Internal::MyControl& implementation )
+: Control( implementation )
+{
+}
+
+MyControl::MyControl( Dali::Internal::CustomActor* internal )
+: Control( internal )
+{
+  VerifyCustomActorPointer< Internal::MyControl >( internal ) ;
+}
+
+
+} //namespace Demo
diff --git a/examples/simple-visuals-control/my-control.h b/examples/simple-visuals-control/my-control.h
new file mode 100644
index 00000000..3517b818
--- /dev/null
+++ b/examples/simple-visuals-control/my-control.h
@@ -0,0 +1,135 @@
+#ifndef DALI_DEMO_MY_CONTROL_H
+#define DALI_DEMO_MY_CONTROL_H
+
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include <dali-toolkit/dali-toolkit.h>
+#include <string>
+
+namespace Demo
+{
+
+namespace Internal
+{
+class MyControl;
+}
+
+/**
+ * @brief MyControl is an example control,
+ *
+ * @details It's purpose is to show how to create a simple control to work with the style sheet and state changes.
+ * States changes includes Normal, Focused and Disabled, this example uses the style sheet to set visuals for Normal and Focused states.
+ * When the Focus manager changes the control to be focused the visual displayed is changed and vice versa.
+ *
+ * The visual has the property name ICON_VISUAL with the style sheet string equivalent of "iconVisual"
+ *
+ */
+
+class MyControl : public Dali::Toolkit::Control
+{
+public:
+
+  /**
+   * The start and end property ranges for this Control
+   * My control can use properties from Toolkit::Control as it is derived from it. As control is derived from Actor, MyControl can also use Dali::Actor Properties.
+   *
+   * To ensure that the Property indexes from MyControl do not shadow any from Control we start it's index from the end of Toolkit::Control's indexes.
+   *
+   * Toolkit::Control would have done the same with Actor.
+   *
+   * The end index for this control is set to the start index + 1000 hence MyControl can have 1000 property indexes.
+   *
+   * PROPERTY_END_INDEX for MyControl is public, if another control is derived from it then if can specify MyControl::PROPERTY_END_INDEX+1 to start it's
+   * indexing after MyControls last index.
+   */
+  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
+    {
+      /**
+       * @brief name "iconVisual", type string if it is a url, map otherwise
+       * @details Sets the icon visual to be displayed by the control
+       */
+      ICON_VISUAL = PROPERTY_START_INDEX
+    };
+  };
+
+public: // Construction / destruction
+
+  /**
+   * @brief Create an uninitialized handle
+   */
+  MyControl();
+
+  /**
+   * @brief Create a new MyControl
+   */
+  static MyControl New();
+
+  /**
+   * @brief Destructor. This is non-virtual since derived Handle types must not contain data or virtual methods
+   */
+  ~MyControl();
+
+  /**
+   * @brief Copy Constructor
+   *
+   * @param[in] shadowButton the handle of the control to copy
+   */
+  MyControl( const MyControl& shadowButton );
+
+  /**
+   * @brief Assignment Operator
+   *
+   * @param[in] shadowButton the source of the assignment
+   */
+  MyControl& operator=( const MyControl& shadowButton );
+
+  /**
+   * @brief Downcast
+   *
+   * @param[in] shadowButton the handle of control to downcast to MyControl
+   */
+  static MyControl DownCast( BaseHandle handle );
+
+
+public: //  // Not intended for application developers
+
+  /// @cond internal
+  /**
+   * @brief Create a handle from an implementation
+   */
+  MyControl( Internal::MyControl& implementation );
+
+  /**
+   * @brief Allow the creation of an ShadowButton handle from an internal CustomActor pointer
+   */
+  MyControl( Dali::Internal::CustomActor* internal );
+  /// @endcond
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_MY_CONTROL_H
diff --git a/examples/simple-visuals-control/simple-visuals-application.cpp b/examples/simple-visuals-control/simple-visuals-application.cpp
new file mode 100644
index 00000000..a698f170
--- /dev/null
+++ b/examples/simple-visuals-control/simple-visuals-application.cpp
@@ -0,0 +1,143 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// CLASS HEADER
+#include "my-control.h"
+
+// EXTERNAL INCLUDES
+#include <dali-toolkit/dali-toolkit.h>
+#include <dali-toolkit/devel-api/visuals/visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visuals/text-visual-properties.h>
+#include <dali-toolkit/devel-api/focus-manager/keyinput-focus-manager.h>
+#include <dali/integration-api/events/touch-event-integ.h>
+#include <cstdio>
+#include <sstream>
+
+// INTERNAL INCLUDES
+#include "simple-visuals-application.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+}
+
+namespace Demo
+{
+
+const char* ICON_IMAGE( DEMO_IMAGE_DIR  "application-icon-13.png" );
+
+SimpleVisualsApplication::SimpleVisualsApplication( Application& application )
+: mApplication( application ),
+  mMyControl()
+{
+  application.InitSignal().Connect( this, &SimpleVisualsApplication::Create );
+}
+
+Dali::Actor SimpleVisualsApplication::OnKeyboardPreFocusChange( Dali::Actor current, Dali::Actor proposed, Dali::Toolkit::Control::KeyboardFocus::Direction direction )
+{
+  Actor nextFocusActor = proposed;
+
+  if( !current && !proposed  )
+  {
+    // Set the initial focus to the first tile in the current page should be focused.
+    nextFocusActor = mMyControl;
+  }
+  else
+  {
+    if ( current == mMyControl )
+    {
+      nextFocusActor = mMyControl2;
+    }
+    else
+    {
+      nextFocusActor = mMyControl;
+    }
+  }
+
+  return nextFocusActor;
+}
+
+
+void SimpleVisualsApplication::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 )
+      {
+      }
+    }
+    keyPressed = 1;
+  }
+  else if( keyEvent.state == KeyEvent::Up )
+  {
+    keyPressed = 0;
+  }
+}
+
+void SimpleVisualsApplication::Create( Application& application )
+{
+  Stage stage = Stage::GetCurrent();
+  stage.SetBackgroundColor( Vector4( 0.1f, 0.1f, 0.1f, 1.0f ) );
+
+  // Connect to key events so can quit application
+  stage.KeyEventSignal().Connect(this, &SimpleVisualsApplication::OnKeyEvent);
+
+  // Hide the indicator bar
+  application.GetWindow().ShowIndicator( Dali::Window::INVISIBLE );
+
+  // Create a table view to parent the 2 MyControls
+  TableView contentLayout = TableView::New( 2, 2 );
+  contentLayout.SetName("ContentLayout");
+  contentLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  contentLayout.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT );
+  contentLayout.SetSizeModeFactor( Vector3( 1.0f, .5f, 1.0f ) );
+  contentLayout.SetAnchorPoint( AnchorPoint::CENTER );
+  contentLayout.SetParentOrigin( ParentOrigin::CENTER );
+  contentLayout.SetCellPadding( Vector2( 50.0f, 15.0f ) );
+  contentLayout.SetBackgroundColor( Vector4(0.949, 0.949, 0.949, 1.0) );
+
+  // Listen to focus change so can see Visual change from NORMAL to FOCUSED state
+  KeyboardFocusManager::Get().PreFocusChangeSignal().Connect( this, &SimpleVisualsApplication::OnKeyboardPreFocusChange );
+
+  stage.Add( contentLayout );
+
+  // Create 2 MyControls and add to table view.
+  mMyControl = MyControl::New();
+  mMyControl.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  mMyControl.SetParentOrigin(ParentOrigin::TOP_LEFT);
+
+  mMyControl2 = MyControl::New();
+  mMyControl2.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
+  mMyControl2.SetParentOrigin(ParentOrigin::CENTER);
+
+  contentLayout.AddChild( mMyControl2, TableView::CellPosition(0, 0) );
+  contentLayout.AddChild( mMyControl, TableView::CellPosition(0, 1) );
+}
+
+} // namespace Demo
diff --git a/examples/simple-visuals-control/simple-visuals-application.h b/examples/simple-visuals-control/simple-visuals-application.h
new file mode 100644
index 00000000..b0e59822
--- /dev/null
+++ b/examples/simple-visuals-control/simple-visuals-application.h
@@ -0,0 +1,89 @@
+#ifndef DALI_DEMO_SIMPLE_VISUALS_APPLICATION_H
+#define DALI_DEMO_SIMPLE_VISUALS_APPLICATION_H
+
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// EXTERNAL INCLUDES
+#include <dali-toolkit/dali-toolkit.h>
+#include <cstdio>
+#include <sstream>
+
+// INTERNAL INCLUDES
+#include "my-control.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @brief An application that uses the my-control to display 2 icons, if focus is allowed ( by using a keyboard or remote ) then the icons will change
+ * depending on which one is focused.
+ *
+ * Inherits from connection tracker to manage connection and disconnection of signals,  In this case PreFocusChangeSignal
+ */
+class SimpleVisualsApplication : public ConnectionTracker
+{
+
+public:
+
+  /**
+   * @brief Constructor.
+   *
+   * @param[in]  application A reference to the Application class.
+   */
+  SimpleVisualsApplication( Application& application );
+
+
+private:
+  /**
+   *  @brief Listen to Focus change signal
+   *  @param[in] current  Current focused Actor
+   *  @param[in] proposed New actor that is requesting to be focused
+   *  @param[in] direction The direction of the focus event from current actor
+   */
+  Dali::Actor OnKeyboardPreFocusChange( Dali::Actor current, Dali::Actor proposed, Dali::Toolkit::Control::KeyboardFocus::Direction direction );
+
+  /**
+   * @brief Derived from control, enables capture of key presses
+   *
+   * @param[in] event In incoming key event
+   */
+  void OnKeyEvent( const KeyEvent& event );
+
+  /**
+   * @brief Called to initialise the application content
+   *
+   * @param[in] application A reference to the Application class.
+   */
+  void Create( Application& application );
+
+
+private:
+
+  Application& mApplication;  // Handle to the application that is created and passed in.
+
+  MyControl mMyControl;  //  Handle to first instance of MyControl
+  MyControl mMyControl2; //  Handle to second instance of MyControl
+
+};
+
+} // Namespace Demo
+
+
+#endif // DALI_DEMO_SIMPLE_VISUALS_APPLICATION_H
diff --git a/examples/simple-visuals-control/simple-visuals-example.cpp b/examples/simple-visuals-control/simple-visuals-example.cpp
new file mode 100644
index 00000000..1011243c
--- /dev/null
+++ b/examples/simple-visuals-control/simple-visuals-example.cpp
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @file transition-example.cpp
+ * @brief Example of a control built with visuals
+ */
+
+// EXTERNAL INCLUDES
+#include <dali/dali.h>
+
+// INTERNAL INCLUDES
+#include "simple-visuals-application.h"
+
+namespace
+{
+// Style sheet to be used by this application
+const char* SIMPLE_DEMO_THEME( DEMO_STYLE_DIR "simple-example-theme.json" );
+}
+
+/// Entry point for applications
+int DALI_EXPORT_API main( int argc, char** argv )
+{
+  Application application = Application::New( &argc, &argv, SIMPLE_DEMO_THEME ); // Use the above defined style sheet for this application.
+  Demo::SimpleVisualsApplication simpleVisualsApplication( application );
+  application.MainLoop();
+  return 0;
+}
diff --git a/resources/po/en_GB.po b/resources/po/en_GB.po
index 5054071d..f73484a4 100755
--- a/resources/po/en_GB.po
+++ b/resources/po/en_GB.po
@@ -109,6 +109,9 @@ msgstr "Refraction"
 msgid "DALI_DEMO_STR_TITLE_RENDERER_STENCIL"
 msgstr "Renderer Stencil"
 
+msgid "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL"
+msgstr "Simple Visuals Control"
+
 msgid "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI"
 msgstr "Script-based UI"
 
diff --git a/resources/po/en_US.po b/resources/po/en_US.po
index 28ed4809..83246ed4 100755
--- a/resources/po/en_US.po
+++ b/resources/po/en_US.po
@@ -109,6 +109,9 @@ msgstr "Refraction"
 msgid "DALI_DEMO_STR_TITLE_RENDERER_STENCIL"
 msgstr "Renderer Stencil"
 
+msgid "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL"
+msgstr "Simple Visuals Control"
+
 msgid "DALI_DEMO_STR_TITLE_SCRIPT_BASED_UI"
 msgstr "Script-based UI"
 
diff --git a/resources/style/.gitignore b/resources/style/.gitignore
index 0e59dee3..0922f841 100644
--- a/resources/style/.gitignore
+++ b/resources/style/.gitignore
@@ -1,6 +1,7 @@
 demo-theme.json
 contact-cards-example-theme.json
 progress-bar-example-theme.json
+simple-example-theme.json
 style-example-theme-three.json
 style-example-theme-two.json
 style-example-theme-one.json
diff --git a/resources/style/demo-theme.json.in b/resources/style/demo-theme.json.in
index d0caa87b..62d717aa 100644
--- a/resources/style/demo-theme.json.in
+++ b/resources/style/demo-theme.json.in
@@ -183,6 +183,35 @@
         "units": "USER_SPACE",
         "stopColor": [[0.247,0.38,0.52,1.0],[0.055,0.18,0.286,1.0]]
       }
+    },
+//
+// Simple Visuals Application Style section
+//
+    "MyControl":
+    {
+      "states":
+      {
+        "NORMAL":
+        {
+          "visuals":
+          {
+            "iconVisual":
+            {
+              "url":"{APPLICATION_RESOURCE_PATH}/images/application-icon-13.png"
+            }
+          }
+        },
+        "FOCUSED":
+        {
+          "visuals":
+          {
+            "iconVisual":
+            {
+              "url":"{APPLICATION_RESOURCE_PATH}/images/application-icon-83.png"
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/resources/style/mobile/simple-example-theme.json.in b/resources/style/mobile/simple-example-theme.json.in
new file mode 100644
index 00000000..d2b68e5f
--- /dev/null
+++ b/resources/style/mobile/simple-example-theme.json.in
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2000-2017 Samsung Electronics Co., Ltd
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+{
+  "styles":
+  {
+   //
+   // Simple Visuals Application styling
+   //
+    "MyControl":
+    {
+      "states":
+      {
+        "NORMAL":
+        {
+          "visuals":
+          {
+            "iconVisual":
+            {
+              "url":"{APPLICATION_RESOURCE_PATH}/images/application-icon-13.png"
+            }
+          }
+        },
+        "FOCUSED":
+        {
+          "visuals":
+          {
+            "iconVisual":
+            {
+              "url":"{APPLICATION_RESOURCE_PATH}/images/application-icon-83.png"
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/resources/style/simple-example-theme.json.in b/resources/style/simple-example-theme.json.in
new file mode 100644
index 00000000..d2b68e5f
--- /dev/null
+++ b/resources/style/simple-example-theme.json.in
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) 2000-2017 Samsung Electronics Co., Ltd
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+{
+  "styles":
+  {
+   //
+   // Simple Visuals Application styling
+   //
+    "MyControl":
+    {
+      "states":
+      {
+        "NORMAL":
+        {
+          "visuals":
+          {
+            "iconVisual":
+            {
+              "url":"{APPLICATION_RESOURCE_PATH}/images/application-icon-13.png"
+            }
+          }
+        },
+        "FOCUSED":
+        {
+          "visuals":
+          {
+            "iconVisual":
+            {
+              "url":"{APPLICATION_RESOURCE_PATH}/images/application-icon-83.png"
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/shared/dali-demo-strings.h b/shared/dali-demo-strings.h
index 6c6d171c..7c2704e5 100644
--- a/shared/dali-demo-strings.h
+++ b/shared/dali-demo-strings.h
@@ -69,6 +69,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_PROGRESS_BAR                dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_PROGRESS_BAR")
 #define DALI_DEMO_STR_TITLE_REFRACTION                  dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_REFRACTION")
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_RENDERER_STENCIL")
+#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL      dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SIMPLE_VISUALS")
 #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_SPARKLE                     dgettext(DALI_DEMO_DOMAIN_LOCAL, "DALI_DEMO_STR_TITLE_SPARKLE")
@@ -122,6 +123,7 @@ extern "C"
 #define DALI_DEMO_STR_TITLE_PROGRESS_BAR                "Progress Bar"
 #define DALI_DEMO_STR_TITLE_REFRACTION                  "Refract Effect"
 #define DALI_DEMO_STR_TITLE_RENDERER_STENCIL            "Renderer Stencils"
+#define DALI_DEMO_STR_TITLE_SIMPLE_VISUALS_CONTROL      "Simple Visuals Control"
 #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_SPARKLE                     "Sparkle"