Fix a popup position error caused by SetInheritPosition() change
[platform/core/uifw/dali-toolkit.git] / dali-toolkit / internal / controls / popup / popup-impl.cpp
old mode 100755 (executable)
new mode 100644 (file)
index 031f0fa..c7dd2e4
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2015 Samsung Electronics Co., Ltd.
+ * 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.
 // EXTERNAL INCLUDES
 #include <cstring> // for strcmp
 #include <dali/devel-api/adaptor-framework/physical-keyboard.h>
-#include <dali/devel-api/object/type-registry-helper.h>
+#include <dali/public-api/object/type-registry-helper.h>
 #include <dali/integration-api/debug.h>
 #include <dali/public-api/adaptor-framework/key.h>
 #include <dali/public-api/animation/constraints.h>
 #include <dali/public-api/common/stage.h>
 #include <dali/public-api/events/key-event.h>
-#include <dali/public-api/events/touch-event.h>
-#include <dali/public-api/images/resource-image.h>
+#include <dali/public-api/events/touch-data.h>
 #include <dali/public-api/object/type-registry.h>
 #include <dali/devel-api/scripting/scripting.h>
+#include <dali/devel-api/actors/actor-devel.h>
 #include <dali/public-api/size-negotiation/relayout-container.h>
 
 // INTERNAL INCLUDES
 #include <dali-toolkit/internal/focus-manager/keyboard-focus-manager-impl.h>
 #include <dali-toolkit/public-api/controls/control-impl.h>
-#include <dali-toolkit/public-api/controls/default-controls/solid-color-actor.h>
+#include <dali-toolkit/public-api/controls/image-view/image-view.h>
 #include <dali-toolkit/public-api/accessibility-manager/accessibility-manager.h>
+#include <dali-toolkit/public-api/visuals/color-visual-properties.h>
+#include <dali-toolkit/public-api/visuals/visual-properties.h>
 #include <dali-toolkit/internal/focus-manager/keyboard-focus-manager-impl.h>
 
 using namespace Dali;
@@ -108,39 +110,40 @@ BaseHandle CreateToast()
 DALI_TYPE_REGISTRATION_BEGIN( Toolkit::Popup, Toolkit::Control, Create )
 
 // Main content related properties.
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "title",                             MAP,              TITLE                  )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "content",                           MAP,              CONTENT                )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "footer",                            MAP,              FOOTER                 )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "displayState",                      STRING,           DISPLAY_STATE          )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "touchTransparent",                  BOOLEAN,          TOUCH_TRANSPARENT      )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "title",                             MAP,              TITLE                   )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "content",                           MAP,              CONTENT                 )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "footer",                            MAP,              FOOTER                  )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "displayState",                      STRING,           DISPLAY_STATE           )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "touchTransparent",                  BOOLEAN,          TOUCH_TRANSPARENT       )
 
 // Contextual related properties.
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailVisibility",                    BOOLEAN,          TAIL_VISIBILITY        )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailPosition",                      VECTOR3,          TAIL_POSITION          )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "contextualMode",                    STRING,           CONTEXTUAL_MODE        )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailVisibility",                    BOOLEAN,          TAIL_VISIBILITY         )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailPosition",                      VECTOR3,          TAIL_POSITION           )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "contextualMode",                    STRING,           CONTEXTUAL_MODE         )
 
 // Animation related properties.
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "animationDuration",                 FLOAT,            ANIMATION_DURATION     )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "animationMode",                     STRING,           ANIMATION_MODE         )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "entryAnimation",                    MAP,              ENTRY_ANIMATION        )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "exitAnimation",                     MAP,              EXIT_ANIMATION         )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "autoHideDelay",                     INTEGER,          AUTO_HIDE_DELAY        )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "animationDuration",                 FLOAT,            ANIMATION_DURATION      )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "animationMode",                     STRING,           ANIMATION_MODE          )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "entryAnimation",                    MAP,              ENTRY_ANIMATION         )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "exitAnimation",                     MAP,              EXIT_ANIMATION          )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "autoHideDelay",                     INTEGER,          AUTO_HIDE_DELAY         )
 
 // Style related properties.
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "backingEnabled",                    BOOLEAN,          BACKING_ENABLED        )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "backingColor",                      VECTOR4,          BACKING_COLOR          )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "popupBackgroundImage",              STRING,           POPUP_BACKGROUND_IMAGE )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailUpImage",                       STRING,           TAIL_UP_IMAGE          )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailDownImage",                     STRING,           TAIL_DOWN_IMAGE        )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailLeftImage",                     STRING,           TAIL_LEFT_IMAGE        )
-DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailRightImage",                    STRING,           TAIL_RIGHT_IMAGE       )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "backingEnabled",                    BOOLEAN,          BACKING_ENABLED         )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "backingColor",                      VECTOR4,          BACKING_COLOR           )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "popupBackgroundImage",              STRING,           POPUP_BACKGROUND_IMAGE  )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "popupBackgroundBorder",             RECTANGLE,        POPUP_BACKGROUND_BORDER )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailUpImage",                       STRING,           TAIL_UP_IMAGE           )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailDownImage",                     STRING,           TAIL_DOWN_IMAGE         )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailLeftImage",                     STRING,           TAIL_LEFT_IMAGE         )
+DALI_PROPERTY_REGISTRATION( Toolkit, Popup, "tailRightImage",                    STRING,           TAIL_RIGHT_IMAGE        )
 
 // Signals.
-DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "touchedOutside",                                      SIGNAL_TOUCHED_OUTSIDE )
-DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "showing",                                             SIGNAL_SHOWING         )
-DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "shown",                                               SIGNAL_SHOWN           )
-DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "hiding",                                              SIGNAL_HIDING          )
-DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "hidden",                                              SIGNAL_HIDDEN          )
+DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "touchedOutside",                                      SIGNAL_TOUCHED_OUTSIDE  )
+DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "showing",                                             SIGNAL_SHOWING          )
+DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "shown",                                               SIGNAL_SHOWN            )
+DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "hiding",                                              SIGNAL_HIDING           )
+DALI_SIGNAL_REGISTRATION(   Toolkit, Popup, "hidden",                                              SIGNAL_HIDDEN           )
 
 DALI_TYPE_REGISTRATION_END()
 
@@ -192,7 +195,7 @@ const char*   DEFAULT_TAIL_LEFT_IMAGE_PATH =      DALI_IMAGE_DIR "popup_tail_lef
 const char*   DEFAULT_TAIL_RIGHT_IMAGE_PATH =     DALI_IMAGE_DIR "popup_tail_right.png";    ///< Tail right image.
 
 const Vector4 DEFAULT_BACKING_COLOR( 0.0f, 0.0f, 0.0f, 0.5f );                              ///< Color of the dimmed backing.
-const Vector3 BACKGROUND_OUTER_BORDER( 40.0f, 30.0f, 0.0f );                                ///< External border.
+const Rect<int> DEFAULT_BACKGROUND_BORDER( 17, 17, 13, 13 );                                ///< Default border of the background.
 const Rect<float>  DEFAULT_TITLE_PADDING( 20.0f, 20.0f, 20.0f, 20.0f );                     ///< Title padding used on popups with content and/or controls (from Tizen GUI UX).
 const Rect<float>  DEFAULT_TITLE_ONLY_PADDING( 8.0f, 8.0f, 8.0f, 8.0f );                    ///< Title padding used on popups with a title only (like toast popups).
 const Vector3 FOOTER_SIZE( 620.0f, 96.0f,0.0f );                                            ///< Default size of the bottom control area.
@@ -220,22 +223,40 @@ Dali::Toolkit::Popup Popup::New()
 }
 
 Popup::Popup()
-: Control( ControlBehaviour( REQUIRES_TOUCH_EVENTS | REQUIRES_STYLE_CHANGE_SIGNALS ) ),
-  // Main variables:
+: Control( ControlBehaviour( CONTROL_BEHAVIOUR_DEFAULT ) ),
+  mTouchedOutsideSignal(),
+  mShowingSignal(),
+  mShownSignal(),
+  mHidingSignal(),
+  mHiddenSignal(),
+  mLayer(),
+  mPopupLayout(),
+  mBacking(),
+  mPreviousFocusedActor(),
+  mTailImage(),
+  mPopupContainer(),
+  mAnimation(),
   mAlterAddedChild( false ),
   mLayoutDirty( true ),
+  mAutoHideTimer(),
   mTouchTransparent( false ),
-
-  // Property variables:
+  mTitle(),
+  mContent(),
+  mFooter(),
   mDisplayState( Toolkit::Popup::HIDDEN ), // Hidden until shown with SetDisplayState()
   mTailVisible( false ),
   mTailPosition( DEFAULT_TAIL_POSITION ),
   mContextualMode( Toolkit::Popup::NON_CONTEXTUAL ),
   mAnimationDuration( DEFAULT_POPUP_ANIMATION_DURATION ),
   mAnimationMode( Toolkit::Popup::FADE ),
+  mEntryAnimationData(),
+  mExitAnimationData(),
   mAutoHideDelay( 0 ),
   mBackingEnabled( true ),
   mBackingColor( DEFAULT_BACKING_COLOR ),
+  mPopupBackgroundImage(),
+  mBackgroundBorder( DEFAULT_BACKGROUND_BORDER ),
+  mMargin(),
   mTailUpImage( DEFAULT_TAIL_UP_IMAGE_PATH ),
   mTailDownImage( DEFAULT_TAIL_DOWN_IMAGE_PATH ),
   mTailLeftImage( DEFAULT_TAIL_LEFT_IMAGE_PATH ),
@@ -287,7 +308,7 @@ void Popup::OnInitialize()
   mPopupLayout = Toolkit::TableView::New( 3, 1 );
 
   // Adds the default background image.
-  SetPopupBackgroundImage( ImageActor::New( ResourceImage::New( DEFAULT_BACKGROUND_IMAGE_PATH ) ) );
+  SetPopupBackgroundImage( Toolkit::ImageView::New( DEFAULT_BACKGROUND_IMAGE_PATH ) );
 
   mPopupLayout.SetName( "popupLayoutTable" );
   mPopupLayout.SetParentOrigin( ParentOrigin::CENTER );
@@ -300,15 +321,13 @@ void Popup::OnInitialize()
   mPopupLayout.SetFitHeight( 0 ); // Set row to fit.
   mPopupLayout.SetFitHeight( 1 ); // Set row to fit.
 
-  mPopupLayout.TouchedSignal().Connect( this, &Popup::OnDialogTouched );
+  mPopupLayout.TouchSignal().Connect( this, &Popup::OnDialogTouched );
 
   mPopupContainer.Add( mPopupLayout );
 
   // Any content after this point which is added to Self() will be re-parented to mContent.
   mAlterAddedChild = true;
 
-  // Make self keyboard focusable and a focus group.
-  self.SetKeyboardFocusable( true );
   SetAsKeyboardFocusGroup( true );
 }
 
@@ -552,7 +571,11 @@ void Popup::SetPopupBackgroundImage( Actor image )
   // Removes any previous background.
   if( mPopupBackgroundImage )
   {
-    mPopupContainer.Remove( mPopupBackgroundImage );
+    mPopupBackgroundImage.Unparent();
+    if( mTailImage )
+    {
+      mTailImage.Unparent();
+    }
   }
 
   // Adds new background to the dialog.
@@ -562,17 +585,22 @@ void Popup::SetPopupBackgroundImage( Actor image )
   mPopupBackgroundImage.SetParentOrigin( ParentOrigin::CENTER );
 
   // OnDialogTouched only consumes the event. It prevents the touch event to be caught by the backing.
-  mPopupBackgroundImage.TouchedSignal().Connect( this, &Popup::OnDialogTouched );
+  mPopupBackgroundImage.TouchSignal().Connect( this, &Popup::OnDialogTouched );
 
   // Set the popup border to be slightly larger than the layout contents.
-  mPopupBackgroundImage.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
-  mPopupBackgroundImage.SetSizeModeFactor( BACKGROUND_OUTER_BORDER );
+  UpdateBackgroundPositionAndSize();
 
   const bool prevAlter = mAlterAddedChild;
   mAlterAddedChild = false;
   mPopupContainer.Add( mPopupBackgroundImage );
+  DevelActor::LowerToBottom(mPopupBackgroundImage);
   mAlterAddedChild = prevAlter;
 
+  if( mTailImage )
+  {
+    mPopupBackgroundImage.Add( mTailImage );
+  }
+
   mLayoutDirty = true;
 }
 
@@ -687,6 +715,9 @@ void Popup::SetDisplayState( Toolkit::Popup::DisplayState displayState )
     // Update the state to indicate the current intent.
     mDisplayState = Toolkit::Popup::SHOWING;
 
+    // We want the popup to have key input focus when it is displayed
+    SetKeyInputFocus();
+
     // We are displaying so bring the popup layer to the front, and set it visible so it is rendered.
     mLayer.RaiseToTop();
     mLayer.SetVisible( true );
@@ -700,7 +731,6 @@ void Popup::SetDisplayState( Toolkit::Popup::DisplayState displayState )
 
     // Allow the popup to catch events.
     mPopupLayout.SetSensitive( true );
-    SetKeyInputFocus();
 
     // Handle the keyboard focus when popup is shown.
     Dali::Toolkit::KeyboardFocusManager keyboardFocusManager = Dali::Toolkit::KeyboardFocusManager::Get();
@@ -708,14 +738,29 @@ void Popup::SetDisplayState( Toolkit::Popup::DisplayState displayState )
     {
       mPreviousFocusedActor = keyboardFocusManager.GetCurrentFocusActor();
 
-      if( mContent && mContent.IsKeyboardFocusable() )
+      if( Self().IsKeyboardFocusable() )
       {
-        // If content is focusable, move the focus to content.
-        keyboardFocusManager.SetCurrentFocusActor( mContent );
-      }
-      else
-      {
-        DALI_LOG_WARNING( "There is no focusable in popup\n" );
+        // Setup the actgor to start focus from.
+        Actor focusActor;
+        if( mContent && mContent.IsKeyboardFocusable() )
+        {
+          // If the content is focusable, move the focus to the content.
+          focusActor = mContent;
+        }
+        else if( mFooter && mFooter.IsKeyboardFocusable() )
+        {
+          // If the footer is focusable, move the focus to the footer.
+          focusActor = mFooter;
+        }
+        else
+        {
+          DALI_LOG_WARNING( "There is no focusable in popup\n" );
+        }
+
+        if( focusActor )
+        {
+          keyboardFocusManager.SetCurrentFocusActor( focusActor );
+        }
       }
     }
   }
@@ -806,38 +851,50 @@ void Popup::LayoutTail()
     return;
   }
 
-  const Vector3& position = GetTailPosition();
+  const Vector3& parentOrigin = GetTailPosition();
+  Vector3 position;
   std::string image;
+  Vector3 anchorPoint;
 
   // depending on position of tail around ParentOrigin, a different tail image is used...
-  if( position.y < Math::MACHINE_EPSILON_1 )
+  if( parentOrigin.y < Math::MACHINE_EPSILON_1 )
   {
     image = mTailUpImage;
+    anchorPoint = AnchorPoint::BOTTOM_CENTER;
+    position.y = mBackgroundBorder.top;
   }
-  else if( position.y > 1.0f - Math::MACHINE_EPSILON_1 )
+  else if( parentOrigin.y > ( 1.0f - Math::MACHINE_EPSILON_1 ) )
   {
     image = mTailDownImage;
+    anchorPoint = AnchorPoint::TOP_CENTER;
+    position.y = - mBackgroundBorder.bottom;
   }
-  else if( position.x < Math::MACHINE_EPSILON_1 )
+  else if( parentOrigin.x < Math::MACHINE_EPSILON_1 )
   {
     image = mTailLeftImage;
+    anchorPoint = AnchorPoint::CENTER_RIGHT;
+    position.x = mBackgroundBorder.left;
   }
-  else if( position.x > 1.0f - Math::MACHINE_EPSILON_1 )
+  else if( parentOrigin.x > ( 1.0f - Math::MACHINE_EPSILON_1 ) )
   {
     image = mTailRightImage;
+    anchorPoint = AnchorPoint::CENTER_LEFT;
+    position.x = - mBackgroundBorder.right;
   }
 
   if( !image.empty() )
   {
     // Adds the tail actor.
-    Image tail = ResourceImage::New( image );
-    mTailImage = ImageActor::New( tail );
+    mTailImage = Toolkit::ImageView::New( image );
     mTailImage.SetName( "tailImage" );
-    const Vector3 anchorPoint = AnchorPoint::BOTTOM_RIGHT - position;
-    mTailImage.SetParentOrigin( position );
+    mTailImage.SetParentOrigin( parentOrigin );
     mTailImage.SetAnchorPoint( anchorPoint );
+    mTailImage.SetPosition( position );
 
-    mPopupContainer.Add( mTailImage );
+    if( mPopupBackgroundImage )
+    {
+      mPopupBackgroundImage.Add( mTailImage );
+    }
   }
 }
 
@@ -855,12 +912,13 @@ Toolkit::Popup::ContextualMode Popup::GetContextualMode() const
 Toolkit::Control Popup::CreateBacking()
 {
   Toolkit::Control backing = Control::New();
-  backing.SetBackgroundColor( Vector4( mBackingColor.r, mBackingColor.g, mBackingColor.b, 1.0f ) );
+  backing.SetProperty( Toolkit::Control::Property::BACKGROUND,
+                       Property::Map().Add( Toolkit::Visual::Property::TYPE, Toolkit::Visual::COLOR )
+                                      .Add( Toolkit::ColorVisual::Property::MIX_COLOR, Vector4( mBackingColor.r, mBackingColor.g, mBackingColor.b, 1.0f ) ) );
   backing.SetName( "popupBacking" );
 
   // Must always be positioned top-left of stage, regardless of parent.
-  backing.SetPositionInheritanceMode( DONT_INHERIT_POSITION );
-  backing.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  backing.SetInheritPosition(false);
 
   // Always the full size of the stage.
   backing.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
@@ -871,7 +929,7 @@ Toolkit::Control Popup::CreateBacking()
 
   // Default to being transparent.
   backing.SetProperty( Actor::Property::COLOR_ALPHA, 0.0f );
-  backing.TouchedSignal().Connect( this, &Popup::OnBackingTouched );
+  backing.TouchSignal().Connect( this, &Popup::OnBackingTouched );
   backing.WheelEventSignal().Connect( this, &Popup::OnBackingWheelEvent );
   return backing;
 }
@@ -957,6 +1015,18 @@ void Popup::SetExitAnimationData( const Property::Map& map )
   Scripting::NewAnimation( map, mExitAnimationData );
 }
 
+void Popup::UpdateBackgroundPositionAndSize()
+{
+  if( mPopupBackgroundImage )
+  {
+    mPopupBackgroundImage.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
+    mPopupBackgroundImage.SetSizeModeFactor( Vector3( mBackgroundBorder.left + mBackgroundBorder.right, mBackgroundBorder.top + mBackgroundBorder.bottom, 0.0f ) );
+
+    // Adjust the position of the background so the transparent areas are set appropriately
+    mPopupBackgroundImage.SetPosition( ( mBackgroundBorder.right - mBackgroundBorder.left ) * 0.5f, ( mBackgroundBorder.bottom - mBackgroundBorder.top ) * 0.5f );
+  }
+}
+
 void Popup::SetAutoHideDelay( int delay )
 {
   mAutoHideDelay = delay;
@@ -994,6 +1064,7 @@ void Popup::SetTailUpImage( std::string image )
 {
   mTailUpImage = image;
   mLayoutDirty = true;
+  LayoutTail();
 }
 
 const std::string& Popup::GetTailUpImage() const
@@ -1005,6 +1076,7 @@ void Popup::SetTailDownImage( std::string image )
 {
   mTailDownImage = image;
   mLayoutDirty = true;
+  LayoutTail();
 }
 
 const std::string& Popup::GetTailDownImage() const
@@ -1016,6 +1088,7 @@ void Popup::SetTailLeftImage( std::string image )
 {
   mTailLeftImage = image;
   mLayoutDirty = true;
+  LayoutTail();
 }
 
 const std::string& Popup::GetTailLeftImage() const
@@ -1027,6 +1100,7 @@ void Popup::SetTailRightImage( std::string image )
 {
   mTailRightImage = image;
   mLayoutDirty = true;
+  LayoutTail();
 }
 
 const std::string& Popup::GetTailRightImage() const
@@ -1206,12 +1280,33 @@ void Popup::SetProperty( BaseObject* object, Property::Index propertyIndex, cons
         std::string valueString;
         if( value.Get( valueString ) )
         {
-          Image image = ResourceImage::New( valueString );
-          if( image )
-          {
-            ImageActor actor = ImageActor::New( image );
-            popupImpl.SetPopupBackgroundImage( actor );
-          }
+          Toolkit::ImageView actor = Toolkit::ImageView::New( valueString );
+          popupImpl.SetPopupBackgroundImage( actor );
+        }
+        break;
+      }
+      case Toolkit::Popup::Property::POPUP_BACKGROUND_BORDER:
+      {
+        bool valueUpdated = false;
+
+        Vector4 valueVector4;
+        if( value.Get( popupImpl.mBackgroundBorder ) )
+        {
+          valueUpdated = true;
+        }
+        else if( value.Get( valueVector4 ) )
+        {
+          popupImpl.mBackgroundBorder.left   = valueVector4.x;
+          popupImpl.mBackgroundBorder.right  = valueVector4.y;
+          popupImpl.mBackgroundBorder.bottom = valueVector4.z;
+          popupImpl.mBackgroundBorder.top    = valueVector4.w;
+          valueUpdated = true;
+        }
+
+        if( valueUpdated )
+        {
+          popupImpl.LayoutTail(); // Update the tail if required
+          popupImpl.UpdateBackgroundPositionAndSize(); // Update the background's size and position
         }
         break;
       }
@@ -1354,13 +1449,18 @@ Property::Value Popup::GetProperty( BaseObject* object, Property::Index property
       }
       case Toolkit::Popup::Property::POPUP_BACKGROUND_IMAGE:
       {
-        ResourceImage image = ResourceImage::DownCast( popupImpl.GetPopupBackgroundImage() );
-        if( image )
+        Toolkit::ImageView imageView = Toolkit::ImageView::DownCast( popupImpl.GetPopupBackgroundImage() );
+        if( imageView )
         {
-          value = image.GetUrl();
+          value = imageView.GetProperty( Toolkit::ImageView::Property::IMAGE );
         }
         break;
       }
+      case Toolkit::Popup::Property::POPUP_BACKGROUND_BORDER:
+      {
+        value = popupImpl.mBackgroundBorder;
+        break;
+      }
       case Toolkit::Popup::Property::TAIL_UP_IMAGE:
       {
         value = popupImpl.GetTailUpImage();
@@ -1423,7 +1523,7 @@ bool Popup::DoConnectSignal( BaseObject* object, ConnectionTrackerInterface* tra
   return connected;
 }
 
-bool Popup::OnBackingTouched( Actor actor, const TouchEvent& event )
+bool Popup::OnBackingTouched( Actor actor, const TouchData& touch )
 {
   // Allow events to pass through if touch transparency is enabled.
   if( mTouchTransparent )
@@ -1431,11 +1531,9 @@ bool Popup::OnBackingTouched( Actor actor, const TouchEvent& event )
     return false;
   }
 
-  if( event.GetPointCount() > 0 )
+  if( touch.GetPointCount() > 0 )
   {
-    const TouchPoint& point = event.GetPoint( 0 );
-
-    if( point.state == TouchPoint::Down )
+    if( touch.GetState( 0 ) == PointState::DOWN )
     {
       // Guard against destruction during signal emission.
       Toolkit::Popup handle( GetOwner() );
@@ -1462,7 +1560,7 @@ bool Popup::OnBackingWheelEvent( Actor actor, const WheelEvent& event )
   return true;
 }
 
-bool Popup::OnDialogTouched(Actor actor, const TouchEvent& event)
+bool Popup::OnDialogTouched( Actor actor, const TouchData& touch )
 {
   // Allow events to pass through if touch transparency is enabled.
   if( mTouchTransparent )
@@ -1475,13 +1573,15 @@ bool Popup::OnDialogTouched(Actor actor, const TouchEvent& event)
   return true;
 }
 
-void Popup::OnControlStageConnection()
+void Popup::OnStageConnection( int depth )
 {
   mLayoutDirty = true;
   RelayoutRequest();
+
+  Control::OnStageConnection( depth );
 }
 
-void Popup::OnControlChildAdd( Actor& child )
+void Popup::OnChildAdd( Actor& child )
 {
   // Re-parent any children added by user to the body layer.
   if( mAlterAddedChild )
@@ -1493,6 +1593,8 @@ void Popup::OnControlChildAdd( Actor& child )
     mLayoutDirty = true;
     RelayoutRequest();
   }
+
+  Control::OnChildAdd( child );
 }
 
 void Popup::LayoutContext( const Vector2& size )
@@ -1713,114 +1815,150 @@ bool Popup::OnKeyEvent( const KeyEvent& event )
   return consumed;
 }
 
+void Popup::AddFocusableChildrenRecursive( Actor parent, std::vector< Actor >& focusableActors )
+{
+  if( parent )
+  {
+    Toolkit::Control control = Toolkit::Control::DownCast( parent );
+    bool layoutControl = control && GetImplementation( control ).IsKeyboardNavigationSupported();
+
+    if( parent.IsKeyboardFocusable() || layoutControl )
+    {
+      focusableActors.push_back( parent );
+
+      if( !layoutControl )
+      {
+        for( unsigned int i = 0, numberChildren = parent.GetChildCount(); i < numberChildren; ++i )
+        {
+          Actor child( parent.GetChildAt( i ) );
+          AddFocusableChildrenRecursive( child, focusableActors );
+        }
+      }
+    }
+  }
+}
+
+void Popup::AddFocusableChildren( Actor parent, std::vector< Actor >& focusableActors )
+{
+  if( parent )
+  {
+    Toolkit::Control control = Toolkit::Control::DownCast( parent );
+    if( !GetImplementation( control ).IsKeyboardNavigationSupported() )
+    {
+      for( unsigned int i = 0, numberChildren = parent.GetChildCount(); i < numberChildren; ++i )
+      {
+        Actor child( parent.GetChildAt( i ) );
+        AddFocusableChildrenRecursive( child, focusableActors );
+      }
+    }
+    else
+    {
+      focusableActors.push_back( parent );
+    }
+  }
+}
+
 Actor Popup::GetNextKeyboardFocusableActor( Actor currentFocusedActor, Toolkit::Control::KeyboardFocus::Direction direction, bool loopEnabled )
 {
+  std::string currentStr;
+  if( currentFocusedActor )
+  {
+    currentStr = currentFocusedActor.GetName();
+  }
+
   Actor nextFocusableActor( currentFocusedActor );
+  Actor currentFocusGroup;
+  if( currentFocusedActor )
+  {
+    currentFocusGroup = KeyboardFocusManager::Get().GetFocusGroup( currentFocusedActor );
+  }
 
   // TODO: Needs to be optimised
-  if( !currentFocusedActor || ( currentFocusedActor && KeyboardFocusManager::Get().GetFocusGroup( currentFocusedActor ) != Self() ) )
+  // The following statement checks that if we have a current focused actor, then the current focus group is not the popup content or footer.
+  // This is to detect if the focus is currently outside the popup, and if so, move it inside.
+  if( !currentFocusedActor ||
+    ( currentFocusedActor && ( ( !mContent || ( currentFocusGroup != mContent ) ) && ( !mFooter || ( currentFocusGroup != mFooter ) ) ) ) )
   {
-    // The current focused actor is not within popup
+    // The current focused actor is not within popup.
     if( mContent && mContent.IsKeyboardFocusable() )
     {
-      // If content is focusable, move the focus to content
+      // If the content is focusable, move the focus to the content.
       nextFocusableActor = mContent;
     }
+    else if( mFooter && mFooter.IsKeyboardFocusable() )
+    {
+      // If the footer is focusable, move the focus to the footer.
+      nextFocusableActor = mFooter;
+    }
   }
   else
   {
     // Rebuild the focus chain because controls or content can be added or removed dynamically
     std::vector< Actor > focusableActors;
-    if( mContent && mContent.IsKeyboardFocusable() )
+
+    AddFocusableChildren( mContent, focusableActors );
+    AddFocusableChildren( mFooter, focusableActors );
+
+    std::vector< Actor >::iterator endIterator = focusableActors.end();
+    std::vector< Actor >::iterator currentIterator = focusableActors.begin();
+    for( std::vector< Actor >::iterator iterator = focusableActors.begin(); iterator != endIterator; ++iterator )
     {
-      focusableActors.push_back( mContent );
+      if( currentFocusedActor == *iterator )
+      {
+        currentIterator = iterator;
+      }
     }
 
-    for( std::vector< Actor >::iterator iter = focusableActors.begin(), end = focusableActors.end(); iter != end; ++iter )
+    if( currentIterator != endIterator )
     {
-      if( currentFocusedActor == *iter )
+      switch( direction )
       {
-        switch( direction )
+        case Toolkit::Control::KeyboardFocus::LEFT:
         {
-          case Toolkit::Control::KeyboardFocus::LEFT:
+          if( currentIterator == focusableActors.begin() )
           {
-            if( iter == focusableActors.begin() )
-            {
-              nextFocusableActor = *( focusableActors.end() - 1 );
-            }
-            else
-            {
-              nextFocusableActor = *( iter - 1 );
-            }
-            break;
+            nextFocusableActor = *( endIterator - 1 );
           }
-          case Toolkit::Control::KeyboardFocus::RIGHT:
+          else
           {
-            if( iter == focusableActors.end() - 1 )
-            {
-              nextFocusableActor = *( focusableActors.begin() );
-            }
-            else
-            {
-              nextFocusableActor = *( iter + 1 );
-            }
-            break;
+            nextFocusableActor = *( currentIterator - 1 );
           }
-
-          case Toolkit::Control::KeyboardFocus::UP:
+          break;
+        }
+        case Toolkit::Control::KeyboardFocus::RIGHT:
+        {
+          if( currentIterator == endIterator - 1 )
           {
-            if( mContent && *iter == mContent )
-            {
-              nextFocusableActor = *( focusableActors.end() - 1 );
-            }
-            else
-            {
-              if( mContent && mContent.IsKeyboardFocusable() )
-              {
-                nextFocusableActor = mContent;
-              }
-              else
-              {
-                if ( iter == focusableActors.begin() )
-                {
-                  nextFocusableActor = *( focusableActors.end() - 1 );
-                }
-                else
-                {
-                  nextFocusableActor = *( iter - 1 );
-                }
-              }
-            }
-            break;
+            nextFocusableActor = *( focusableActors.begin() );
           }
-
-          case Toolkit::Control::KeyboardFocus::DOWN:
+          else
           {
-            if( mContent && mContent.IsKeyboardFocusable() )
-            {
-              nextFocusableActor = mContent;
-            }
-            else
-            {
-              if( iter == focusableActors.end() - 1 )
-              {
-                nextFocusableActor = *( focusableActors.begin() );
-              }
-              else
-              {
-                nextFocusableActor = *( iter + 1 );
-              }
-            }
-            break;
+            nextFocusableActor = *( currentIterator + 1 );
           }
+          break;
         }
 
-        if( !nextFocusableActor )
+        case Toolkit::Control::KeyboardFocus::UP:
         {
-          DALI_LOG_WARNING( "Can not decide next focusable actor\n" );
+          nextFocusableActor = *(  focusableActors.begin() );
+          break;
         }
 
-        break;
+        case Toolkit::Control::KeyboardFocus::DOWN:
+        {
+          nextFocusableActor = *( endIterator - 1 );
+          break;
+        }
+
+        default:
+        {
+          break;
+        }
+      }
+
+      if( !nextFocusableActor )
+      {
+        DALI_LOG_WARNING( "Can not decide next focusable actor\n" );
       }
     }
   }
@@ -1828,6 +1966,7 @@ Actor Popup::GetNextKeyboardFocusableActor( Actor currentFocusedActor, Toolkit::
   return nextFocusableActor;
 }
 
+
 } // namespace Internal
 
 } // namespace Toolkit