examples/popup/popup-example.cpp

   1 /*
   2  * Copyright (c) 2020 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17
  18 #include "shared/view.h"
  19 #include <dali/dali.h>
  20 #include <dali-toolkit/dali-toolkit.h>
  21 #include <dali-toolkit/devel-api/controls/popup/popup.h>
  22 #include <dali-toolkit/devel-api/controls/table-view/table-view.h>
  23
  24 using namespace Dali;
  25
  26 using Dali::Toolkit::TextLabel;
  27
  28 struct ButtonItem
  29 {
  30   const char* name;
  31   const char* text;
  32 };
  33
  34 namespace
  35 {
  36
  37 const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "background-gradient.jpg";
  38 const char* const TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png";
  39
  40 const char* const TOOLBAR_TITLE = "Popup";
  41
  42 const char* CONTEXT_DISABLED_ICON_IMAGE = DEMO_IMAGE_DIR "icon-scroll-view-carousel.png";
  43 const char* CONTEXT_ENABLED_ICON_IMAGE = DEMO_IMAGE_DIR "icon-scroll-view-spiral.png";
  44 const char* ANIMATION_FADE_ICON_IMAGE = DEMO_IMAGE_DIR "icon-effects-off.png";
  45 const char* ANIMATION_ZOOM_ICON_IMAGE = DEMO_IMAGE_DIR "icon-effects-on.png";
  46
  47 const char* const POPUP_BUTTON_TITLE_ID = "POPUP_BUTTON_TITLE";
  48 const char* const POPUP_BUTTON_BUTTONS_1_ID = "POPUP_BUTTON_BUTTONS_1";
  49 const char* const POPUP_BUTTON_BUTTONS_2_ID = "POPUP_BUTTON_BUTTONS_2";
  50 const char* const POPUP_BUTTON_TOAST_ID = "POPUP_BUTTON_TOAST";
  51 const char* const POPUP_BUTTON_TITLE_CONTENT_BUTTONS_ID = "POPUP_BUTTON_TITLE_CONTENT_BUTTONS";
  52 const char* const POPUP_BUTTON_CONTENT_TEXT_ID = "POPUP_BUTTON_CONTENT_TEXT";
  53 const char* const POPUP_BUTTON_CONTENT_IMAGE_ID = "POPUP_BUTTON_CONTENT_IMAGE";
  54 const char* const POPUP_BUTTON_TITLE_CONTENT_TEXT_ID = "POPUP_BUTTON_TITLE_CONTENT_TEXT";
  55 const char* const POPUP_BUTTON_TITLE_LARGE_CONTENT_BUTTONS_ID = "POPUP_BUTTON_TITLE_LARGE_CONTENT_BUTTONS";
  56 const char* const POPUP_BUTTON_FIXED_SIZE_ID = "POPUP_BUTTON_FIXED_SIZE_ID";
  57 const char* const POPUP_BUTTON_COMPLEX_ID = "POPUP_BUTTON_COMPLEX";
  58 const char* const POPUP_BUTTON_CUSTOM_STYLE = "POPUP_BUTTON_CUSTOM_STYLE";
  59
  60 // Names to give Popup PushButton controls.
  61 const char* const POPUP_CONTROL_OK_NAME = "controlOk";
  62 const char* const POPUP_CONTROL_CANCEL_NAME = "controlCancel";
  63
  64 const char* const CONTENT_TEXT = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
  65 const char* const IMAGE1 = DEMO_IMAGE_DIR "gallery-medium-5.jpg";
  66 const char* const IMAGE2 = DEMO_IMAGE_DIR "background-magnifier.jpg";
  67
  68 // Control area image.
  69 const char*   DEFAULT_CONTROL_AREA_IMAGE_PATH = DEMO_IMAGE_DIR "popup_button_background.9.png"; ///< Control area image for the popup.
  70
  71 const ButtonItem POPUP_BUTTON_ITEMS[] = {
  72     { POPUP_BUTTON_COMPLEX_ID,                     "Complex" },
  73     { POPUP_BUTTON_TOAST_ID,                       "Toast Popup" },
  74     { POPUP_BUTTON_TITLE_ID,                       "Title" },
  75     { POPUP_BUTTON_BUTTONS_1_ID,                   "1 Button" },
  76     { POPUP_BUTTON_BUTTONS_2_ID,                   "2 Buttons" },
  77     { POPUP_BUTTON_FIXED_SIZE_ID,                  "Fixed Size" },
  78     { POPUP_BUTTON_TITLE_CONTENT_BUTTONS_ID,       "Title + Content + Buttons" },
  79     { POPUP_BUTTON_CONTENT_TEXT_ID,                "Content Text" },
  80     { POPUP_BUTTON_CONTENT_IMAGE_ID,               "Content Image" },
  81     { POPUP_BUTTON_TITLE_CONTENT_TEXT_ID,          "Title + Content" },
  82     { POPUP_BUTTON_TITLE_LARGE_CONTENT_BUTTONS_ID, "Title + Large Content + Buttons" },
  83     { POPUP_BUTTON_CUSTOM_STYLE,                   "Custom Styled Popup" }
  84 };
  85
  86 const int POPUP_BUTTON_ITEMS_COUNT = sizeof( POPUP_BUTTON_ITEMS ) / sizeof( POPUP_BUTTON_ITEMS[0] );
  87
  88 const char * const CUSTOM_POPUP_STYLE_NAME = "CustomPopupStyle"; ///< Custom popup style name
  89 }  // anonymous namespace
  90
  91
  92 /**
  93  * This example shows the usage of the Popup class.
  94  */
  95 class PopupExample: public ConnectionTracker, public Toolkit::ItemFactory
  96 {
  97 public:
  98
  99   PopupExample( Application& application )
 100     : mApplication( application ),
 101       mContextual( false ),
 102       mAnimationFade( true )
 103   {
 104     // Connect to the Application's Init signal
 105     mApplication.InitSignal().Connect( this, &PopupExample::Create );
 106   }
 107
 108   ~PopupExample()
 109   {
 110     // Nothing to do here
 111   }
 112
 113   void Create( Application& application )
 114   {
 115     // The Init signal is received once (only) during the Application lifetime
 116     Window window = application.GetWindow();
 117
 118     // Respond to key events if not handled
 119     window.KeyEventSignal().Connect( this, &PopupExample::OnKeyEvent );
 120
 121     // Creates a default view with a default tool bar.
 122     // The view is added to the window.
 123     mContentLayer = DemoHelper::CreateView( application,
 124                                             mView,
 125                                             mToolBar,
 126                                             BACKGROUND_IMAGE,
 127                                             TOOLBAR_IMAGE,
 128                                             std::string("") );
 129
 130     mTitleActor = DemoHelper::CreateToolBarLabel( "CUSTOM_TOOLBAR_TITLE" );
 131     mTitleActor.SetProperty( Toolkit::TextLabel::Property::TEXT, TOOLBAR_TITLE );
 132
 133     // Add title to the tool bar.
 134     const float padding( DemoHelper::DEFAULT_VIEW_STYLE.mToolBarPadding );
 135     mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Toolkit::Alignment::HorizontalCenter, Toolkit::Alignment::Padding( padding, padding, padding, padding ) );
 136
 137     // Create animation button.
 138     mAnimationButton = Toolkit::PushButton::New();
 139     mAnimationButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, ANIMATION_FADE_ICON_IMAGE );
 140     mAnimationButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, ANIMATION_ZOOM_ICON_IMAGE );
 141     mAnimationButton.SetProperty( Toolkit::Button::Property::TOGGLABLE, true );
 142     mAnimationButton.ClickedSignal().Connect( this, &PopupExample::OnAnimationClicked );
 143     mToolBar.AddControl( mAnimationButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 144
 145     // Create context button.
 146     mContextButton = Toolkit::PushButton::New();
 147     mContextButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, CONTEXT_DISABLED_ICON_IMAGE );
 148     mContextButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, CONTEXT_ENABLED_ICON_IMAGE );
 149     mContextButton.SetProperty( Toolkit::Button::Property::TOGGLABLE, true );
 150     mContextButton.ClickedSignal().Connect( this, &PopupExample::OnContextClicked );
 151     mToolBar.AddControl( mContextButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 152
 153     // Add title to the tool bar.
 154     mItemView = Toolkit::ItemView::New( *this );
 155     mItemView.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 156     mItemView.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 157     mItemView.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 158
 159     // Use a grid layout for tests
 160     Vector2 windowSize = window.GetSize();
 161     Toolkit::ItemLayoutPtr gridLayout = Toolkit::DefaultItemLayout::New( Toolkit::DefaultItemLayout::LIST );
 162     Vector3 itemSize;
 163     gridLayout->GetItemSize( 0, Vector3( windowSize ), itemSize );
 164     itemSize.height = windowSize.y / 10;
 165     gridLayout->SetItemSize( itemSize );
 166     mItemView.AddLayout( *gridLayout );
 167
 168     mItemView.ActivateLayout( 0, Vector3(windowSize.x, windowSize.y, windowSize.x), 0.0f );
 169
 170     mContentLayer.Add( mItemView );
 171   }
 172
 173   bool OnContextClicked( Toolkit::Button button )
 174   {
 175     mContextual = button.GetProperty( Toolkit::Button::Property::SELECTED ).Get<bool>();
 176     return true;
 177   }
 178
 179   bool OnAnimationClicked( Toolkit::Button button )
 180   {
 181     mAnimationFade = ! ( button.GetProperty( Toolkit::Button::Property::SELECTED ).Get<bool>() );
 182     return true;
 183   }
 184
 185   /**
 186    * This function is designed as a shortcut to convert any resize policies set for a popup to
 187    * ones that will work for contextual mode (for demo purposes).
 188    * Note that in a real-use case example the policies would be set to something appropriate
 189    * manually, but in the case of this demo, the popup is parented from the popup-opening buttons
 190    * and (incorrectly) have their policies as "SIZE_RELATIVE_TO_PARENT". This would create a tiny
 191    * popup that would not be able to contain it's contents, so to illustrate contextual behaviour
 192    * this function converts the old policies and size to new ones that would give the popup the
 193    * same visual appearance.
 194    * @param[in] popup The popup whose policies should be modified.
 195    */
 196   void SetupContextualResizePolicy( Toolkit::Popup& popup )
 197   {
 198     Vector2 windowSize = mApplication.GetWindow().GetSize();
 199     // Some defaults when creating a new fixed size.
 200     // This is NOT a Vector2 so we can modify each dimension in a for-loop.
 201     float newSize[ Dimension::DIMENSION_COUNT ] = { windowSize.x * 0.75f, windowSize.y * 0.75f };
 202     bool modifySize = false;
 203
 204     // Loop through each of two dimensions to process them.
 205     for( unsigned int dimension = 0; dimension < 2; ++dimension )
 206     {
 207       float windowDimensionSize, sizeModeFactor;
 208       Dimension::Type policyDimension = dimension == 0 ? Dimension::WIDTH : Dimension::HEIGHT;
 209
 210       // Setup information related to the current dimension we are processing.
 211       if( policyDimension == Dimension::WIDTH )
 212       {
 213         windowDimensionSize = windowSize.x;
 214         sizeModeFactor = popup.GetProperty< Vector3 >( Actor::Property::SIZE_MODE_FACTOR ).x;
 215       }
 216       else
 217       {
 218         windowDimensionSize = windowSize.y;
 219         sizeModeFactor = popup.GetProperty< Vector3 >( Actor::Property::SIZE_MODE_FACTOR ).y;
 220       }
 221
 222       bool modifyPolicy = false;
 223       ResizePolicy::Type policy = popup.GetResizePolicy( policyDimension );
 224       ResizePolicy::Type newPolicy( policy );
 225
 226       // Switch on each policy type to determine the new behaviour.
 227       switch( policy )
 228       {
 229         case ResizePolicy::FIXED:
 230         case ResizePolicy::USE_ASSIGNED_SIZE:
 231         {
 232           break;
 233         }
 234
 235         case ResizePolicy::USE_NATURAL_SIZE:
 236         case ResizePolicy::FIT_TO_CHILDREN:
 237         case ResizePolicy::DIMENSION_DEPENDENCY:
 238         {
 239           // Set size to 0 so the policy determines size.
 240           // If a non-zero size is set, policy is converted to fixed.
 241           newSize[ dimension ] = 0.0f;
 242           modifySize = true;
 243           break;
 244         }
 245
 246         // The following cases emulate the three size-mode related resize policies.
 247         case ResizePolicy::FILL_TO_PARENT:
 248         {
 249           newPolicy = ResizePolicy::FIXED;
 250           newSize[ dimension ] = windowDimensionSize;
 251           modifyPolicy = true;
 252           break;
 253         }
 254
 255         case ResizePolicy::SIZE_RELATIVE_TO_PARENT:
 256         {
 257           newPolicy = ResizePolicy::FIXED;
 258           newSize[ dimension ] = windowDimensionSize * sizeModeFactor;
 259           modifyPolicy = true;
 260           break;
 261         }
 262
 263         case ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT:
 264         {
 265           newPolicy = ResizePolicy::FIXED;
 266           newSize[ dimension ] = windowDimensionSize + sizeModeFactor;
 267           modifyPolicy = true;
 268           break;
 269         }
 270       }
 271
 272       if( modifyPolicy )
 273       {
 274         // Set the new policy for this dimension, if it has been modified.
 275         popup.SetResizePolicy( newPolicy, policyDimension );
 276         modifySize = true;
 277       }
 278     }
 279
 280     if( modifySize )
 281     {
 282       // The size is set once at the end.
 283       popup.SetProperty( Actor::Property::SIZE, Vector2( newSize[ 0 ], newSize[ 1 ] ) );
 284     }
 285   }
 286
 287   void SetupPopup( Toolkit::Popup popup, Actor parent )
 288   {
 289     if( mAnimationFade )
 290     {
 291       popup.SetProperty( Toolkit::Popup::Property::ANIMATION_MODE, "FADE" );
 292     }
 293     else
 294     {
 295       popup.SetProperty( Toolkit::Popup::Property::ANIMATION_MODE, "ZOOM" );
 296     }
 297
 298     if( mContextual )
 299     {
 300       popup.SetProperty( Toolkit::Popup::Property::CONTEXTUAL_MODE, "BELOW" );
 301
 302       // Modify the preset demo resize policies (and size) to contextual ones.
 303       SetupContextualResizePolicy( popup );
 304
 305       parent.Add( popup );
 306     }
 307     else
 308     {
 309       mApplication.GetWindow().Add( popup );
 310     }
 311
 312     mPopup.SetDisplayState( Toolkit::Popup::SHOWN );
 313   }
 314
 315   void HidePopup()
 316   {
 317     if( mPopup )
 318     {
 319       mPopup.SetDisplayState( Toolkit::Popup::HIDDEN );
 320     }
 321   }
 322
 323   void PopupHidden()
 324   {
 325     if( mPopup )
 326     {
 327       mPopup.Unparent();
 328       mPopup.Reset();
 329     }
 330   }
 331
 332   Toolkit::Popup CreatePopup()
 333   {
 334     Window window = mApplication.GetWindow();
 335     const float POPUP_WIDTH_DP = window.GetSize().GetWidth() * 0.75f;
 336
 337     Toolkit::Popup popup = Toolkit::Popup::New();
 338     popup.SetProperty( Dali::Actor::Property::NAME, "popup" );
 339     popup.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 340     popup.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 341     popup.SetProperty( Actor::Property::SIZE, Vector2( POPUP_WIDTH_DP, 0.0f ) );
 342     popup.SetProperty( Toolkit::Popup::Property::TAIL_VISIBILITY, false );
 343
 344     popup.OutsideTouchedSignal().Connect( this, &PopupExample::HidePopup );
 345     popup.HiddenSignal().Connect( this, &PopupExample::PopupHidden );
 346
 347     return popup;
 348   }
 349
 350   Toolkit::Popup CreateConfirmationPopup( int numberOfButtons )
 351   {
 352     Toolkit::Popup confirmationPopup = Toolkit::Popup::New();
 353     confirmationPopup.SetProperty( Dali::Actor::Property::NAME, "MAIN-POPUP-SELF" );
 354
 355     if( numberOfButtons > 0 )
 356     {
 357       // Start with a control area image.
 358       Toolkit::ImageView footer = Toolkit::ImageView::New( DEFAULT_CONTROL_AREA_IMAGE_PATH );
 359       footer.SetProperty( Dali::Actor::Property::NAME, "controlAreaImage" );
 360       // Set up the container's layout.
 361       footer.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 362       footer.SetResizePolicy( ResizePolicy::FIXED, Dimension::HEIGHT );
 363       footer.SetProperty( Actor::Property::SIZE, Vector2( 0.0f, 130.0f ) );
 364       footer.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 365       footer.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 366
 367       Actor okButton = CreateOKButton();
 368       okButton.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 369       okButton.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 370       okButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
 371       okButton.SetProperty( Actor::Property::SIZE_MODE_FACTOR, Vector3( -20.0f, -20.0f, 0.0 ) );
 372
 373       if( numberOfButtons > 1 )
 374       {
 375         Toolkit::TableView controlLayout = Toolkit::TableView::New( 1, 2 );
 376         controlLayout.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 377         controlLayout.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 378         controlLayout.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 379
 380         Actor cancelButton = CreateCancelButton();
 381         cancelButton.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 382         cancelButton.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 383         cancelButton.SetResizePolicy( ResizePolicy::SIZE_FIXED_OFFSET_FROM_PARENT, Dimension::ALL_DIMENSIONS );
 384         cancelButton.SetProperty( Actor::Property::SIZE_MODE_FACTOR, Vector3( -20.0f, -20.0f, 0.0 ) );
 385
 386         controlLayout.SetCellPadding( Size( 10.0f, 10.0f ) );
 387
 388         controlLayout.SetRelativeWidth( 0, 0.5f );
 389         controlLayout.SetRelativeWidth( 1, 0.5f );
 390
 391         controlLayout.SetCellAlignment( Toolkit::TableView::CellPosition( 0, 0 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
 392         controlLayout.SetCellAlignment( Toolkit::TableView::CellPosition( 0, 1 ), HorizontalAlignment::CENTER, VerticalAlignment::CENTER );
 393         controlLayout.AddChild( okButton, Toolkit::TableView::CellPosition( 0, 0 ) );
 394         controlLayout.AddChild( cancelButton, Toolkit::TableView::CellPosition( 0, 1 ) );
 395
 396         footer.Add( controlLayout );
 397       }
 398       else
 399       {
 400         footer.Add( okButton );
 401       }
 402
 403       confirmationPopup.SetFooter( footer );
 404     }
 405
 406     confirmationPopup.OutsideTouchedSignal().Connect( this, &PopupExample::HidePopup );
 407
 408     return confirmationPopup;
 409   }
 410
 411   Actor CreateTitle( std::string title )
 412   {
 413     Toolkit::TextLabel titleActor = Toolkit::TextLabel::New( title );
 414     titleActor.SetProperty( Dali::Actor::Property::NAME, "titleActor" );
 415     titleActor.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 416     titleActor.SetProperty( Toolkit::TextLabel::Property::MULTI_LINE, true );
 417     titleActor.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
 418
 419     return titleActor;
 420   }
 421
 422   Toolkit::PushButton CreateOKButton()
 423   {
 424     Toolkit::PushButton okayButton = Toolkit::PushButton::New();
 425     okayButton.SetProperty( Dali::Actor::Property::NAME, POPUP_CONTROL_OK_NAME );
 426     okayButton.SetProperty( Toolkit::Button::Property::LABEL, "OK!" );
 427
 428     okayButton.ClickedSignal().Connect( this, &PopupExample::OnPopupButtonClicked );
 429
 430     return okayButton;
 431   }
 432
 433   Toolkit::PushButton CreateCancelButton()
 434   {
 435     Toolkit::PushButton cancelButton = Toolkit::PushButton::New();
 436     cancelButton.SetProperty( Dali::Actor::Property::NAME, POPUP_CONTROL_CANCEL_NAME );
 437     cancelButton.SetProperty( Toolkit::Button::Property::LABEL, "Cancel" );
 438
 439     cancelButton.ClickedSignal().Connect( this, &PopupExample::OnPopupButtonClicked );
 440
 441     return cancelButton;
 442   }
 443
 444   bool OnPopupButtonClicked( Toolkit::Button button )
 445   {
 446     // Handle Popup pushbuttons being clicked.
 447     HidePopup();
 448     return true;
 449   }
 450
 451   bool OnButtonClicked( Toolkit::Button button )
 452   {
 453     // Handle menu items that create popups.
 454     if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_TITLE_ID )
 455     {
 456       mPopup = CreatePopup();
 457       mPopup.SetTitle( CreateTitle( "Popup!" ) );
 458
 459       SetupPopup( mPopup, button );
 460     }
 461     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_BUTTONS_1_ID )
 462     {
 463       mPopup = CreateConfirmationPopup( 1 );
 464       mPopup.SetTitle( CreateTitle( "Title" ) );
 465
 466       SetupPopup( mPopup, button );
 467     }
 468     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_BUTTONS_2_ID )
 469     {
 470       mPopup = CreateConfirmationPopup( 2 );
 471       mPopup.SetTitle( CreateTitle( "Title" ) );
 472
 473       SetupPopup( mPopup, button );
 474     }
 475     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_TOAST_ID )
 476     {
 477       // Create a toast popup via the type registry (as it is a named-type).
 478       TypeInfo typeInfo = TypeRegistry::Get().GetTypeInfo( "PopupToast" );
 479       if( typeInfo )
 480       {
 481         BaseHandle baseHandle = typeInfo.CreateInstance();
 482         if( baseHandle )
 483         {
 484           mPopup = Toolkit::Popup::DownCast( baseHandle );
 485           mPopup.SetTitle( CreateTitle( "This is a Toast Popup.\nIt will auto-hide itself" ) );
 486
 487           mApplication.GetWindow().Add( mPopup );
 488           mPopup.SetDisplayState( Toolkit::Popup::SHOWN );
 489         }
 490       }
 491     }
 492     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_TITLE_CONTENT_BUTTONS_ID )
 493     {
 494       mPopup = CreateConfirmationPopup( 2 );
 495       mPopup.SetTitle( CreateTitle( "Erase image" ) );
 496
 497       Toolkit::TextLabel text = Toolkit::TextLabel::New( "This will erase the image permanently. Are you sure?" );
 498       text.SetProperty( Dali::Actor::Property::NAME, "POPUP_CONTENT_TEXT" );
 499       text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 500       text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 501       text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 502       text.SetProperty( TextLabel::Property::MULTI_LINE, true );
 503       text.SetProperty( Actor::Property::PADDING, Padding( 10.0f, 10.0f, 20.0f, 0.0f ) );
 504       mPopup.SetContent( text );
 505
 506       SetupPopup( mPopup, button );
 507     }
 508     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_CONTENT_TEXT_ID )
 509     {
 510       mPopup = CreatePopup();
 511
 512       TextLabel text = TextLabel::New( CONTENT_TEXT );
 513       text.SetProperty( Dali::Actor::Property::NAME, "POPUP_CONTENT_TEXT" );
 514       text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 515       text.SetProperty( TextLabel::Property::MULTI_LINE, true );
 516       text.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
 517       text.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
 518       text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 519       text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 520       text.SetProperty( Actor::Property::PADDING, Padding( 20.0f, 20.0f, 20.0f, 20.0f ) );
 521
 522       mPopup.Add( text );
 523
 524       SetupPopup( mPopup, button );
 525     }
 526     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_CONTENT_IMAGE_ID )
 527     {
 528       mPopup = CreatePopup();
 529       Toolkit::ImageView image = Toolkit::ImageView::New( IMAGE2 );
 530       image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 531       image.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 532       image.SetProperty( Actor::Property::PADDING, Padding( 20.0f, 20.0f, 20.0f, 20.0f ) );
 533
 534       mPopup.Add( image );
 535
 536       SetupPopup( mPopup, button );
 537     }
 538     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_TITLE_CONTENT_TEXT_ID )
 539     {
 540       mPopup = CreatePopup();
 541       mPopup.SetTitle( CreateTitle( "Popup!" ) );
 542
 543       Toolkit::TextLabel text = Toolkit::TextLabel::New( CONTENT_TEXT );
 544       text.SetProperty( Dali::Actor::Property::NAME, "POPUP_CONTENT_TEXT" );
 545       text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 546       text.SetProperty( TextLabel::Property::MULTI_LINE, true );
 547       text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 548       text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 549       text.SetProperty( Actor::Property::PADDING, Padding( 20.0f, 20.0f, 20.0f, 20.0f ) );
 550
 551       mPopup.Add( text );
 552
 553       SetupPopup( mPopup, button );
 554     }
 555     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_FIXED_SIZE_ID )
 556     {
 557       mPopup = CreatePopup();
 558       mPopup.SetTitle( CreateTitle( "Popup!" ) );
 559
 560       Toolkit::TextLabel text = Toolkit::TextLabel::New( "Fixed size popup" );
 561       text.SetProperty( Dali::Actor::Property::NAME, "POPUP_CONTENT_TEXT" );
 562       text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 563       text.SetProperty( TextLabel::Property::MULTI_LINE, true );
 564       text.SetProperty( Actor::Property::PADDING, Padding( 20.0f, 20.0f, 20.0f, 20.0f ) );
 565
 566       mPopup.Add( text );
 567
 568       // Fix the popup's size.
 569       mPopup.SetProperty( Actor::Property::SIZE, Vector2( 240.0f, 400.0f ) );
 570       mPopup.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
 571
 572       SetupPopup( mPopup, button );
 573     }
 574     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_TITLE_LARGE_CONTENT_BUTTONS_ID )
 575     {
 576       mPopup = CreateConfirmationPopup( 2 );
 577       mPopup.SetTitle( CreateTitle( "Popup!" ) );
 578
 579       Toolkit::TextLabel text = Toolkit::TextLabel::New( CONTENT_TEXT );
 580       text.SetProperty( Dali::Actor::Property::NAME, "POPUP_CONTENT_TEXT" );
 581       text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 582       text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 583       text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 584       text.SetProperty( TextLabel::Property::MULTI_LINE, true );
 585       text.SetProperty( Actor::Property::PADDING, Padding( 10.0f, 10.0f, 20.0f, 0.0f ) );
 586
 587       mPopup.Add( text );
 588
 589       SetupPopup( mPopup, button );
 590     }
 591     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_COMPLEX_ID )
 592     {
 593       mPopup = CreateConfirmationPopup( 2 );
 594       mPopup.SetTitle( CreateTitle( "Warning" ) );
 595
 596       // Content
 597       Toolkit::TableView content = Toolkit::TableView::New( 2, 2 );
 598       content.SetProperty( Dali::Actor::Property::NAME, "COMPLEX_TABLEVIEW" );
 599       content.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 600       content.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
 601       content.SetFitHeight( 0 );
 602       content.SetFitHeight( 1 );
 603       content.SetProperty( Actor::Property::PADDING, Padding( 20.0f, 20.0f, 20.0f, 0.0f ) );
 604
 605       // Text
 606       {
 607         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Do you really want to quit?" );
 608         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 609         text.SetProperty( Toolkit::TextLabel::Property::MULTI_LINE, true );
 610         text.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 611         text.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 612
 613         content.AddChild( text, Toolkit::TableView::CellPosition( 0, 0 ) );
 614       }
 615
 616       // Image
 617       {
 618         Toolkit::ImageView image = Toolkit::ImageView::New( IMAGE1 );
 619         image.SetProperty( Dali::Actor::Property::NAME, "COMPLEX_IMAGE" );
 620         image.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 621         image.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::HEIGHT );
 622         image.SetProperty( Actor::Property::PADDING, Padding( 20.0f, 0.0f, 0.0f, 0.0f ) );
 623         content.AddChild( image, Toolkit::TableView::CellPosition( 0, 1 ) );
 624       }
 625
 626       // Text 2
 627       {
 628         Toolkit::TableView root = Toolkit::TableView::New( 1, 2 );
 629         root.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
 630         root.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
 631         root.SetFitHeight( 0 );
 632         root.SetFitWidth( 0 );
 633         root.SetProperty( Actor::Property::PADDING, Padding( 0.0f, 0.0f, 0.0f, 20.0f ) );
 634
 635         Toolkit::CheckBoxButton checkBox = Toolkit::CheckBoxButton::New();
 636         checkBox.SetProperty( Actor::Property::SIZE, Vector2( 48, 48 ) );
 637         root.AddChild( checkBox, Toolkit::TableView::CellPosition( 0, 0 ) );
 638
 639         Toolkit::TextLabel text = Toolkit::TextLabel::New( "Don't show again" );
 640         text.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::WHITE );
 641         Actor textActor = text;
 642         textActor.SetProperty( Actor::Property::PADDING, Padding( 20.0f, 0.0f, 0.0f, 10.0f ) );
 643
 644         root.AddChild( text, Toolkit::TableView::CellPosition( 0, 1 ) );
 645
 646         content.AddChild( root, Toolkit::TableView::CellPosition( 1, 0 ) );
 647       }
 648
 649       mPopup.SetContent( content );
 650
 651       SetupPopup( mPopup, button );
 652     }
 653     else if( button.GetProperty< std::string >( Dali::Actor::Property::NAME ) == POPUP_BUTTON_CUSTOM_STYLE )
 654     {
 655       mPopup = CreateConfirmationPopup( 2 );
 656
 657       Toolkit::TextLabel titleActor = Toolkit::TextLabel::New( "Styled Popup" );
 658       titleActor.SetProperty( Dali::Actor::Property::NAME, "titleActor" );
 659       titleActor.SetProperty( Toolkit::TextLabel::Property::TEXT_COLOR, Color::RED );
 660       titleActor.SetProperty( Toolkit::TextLabel::Property::MULTI_LINE, true );
 661       titleActor.SetProperty( Toolkit::TextLabel::Property::HORIZONTAL_ALIGNMENT, "CENTER" );
 662       mPopup.SetTitle( titleActor );
 663
 664       SetupPopup( mPopup, button );
 665
 666       mPopup.SetStyleName( CUSTOM_POPUP_STYLE_NAME );
 667     }
 668
 669     return true;
 670   }
 671
 672   void OnKeyEvent( const KeyEvent& event )
 673   {
 674     if( event.GetState() == KeyEvent::DOWN )
 675     {
 676       if( IsKey( event, Dali::DALI_KEY_ESCAPE ) || IsKey( event, Dali::DALI_KEY_BACK ) )
 677       {
 678         // Exit application when click back or escape.
 679         mApplication.Quit();
 680       }
 681     }
 682   }
 683
 684 public: // From ItemFactory
 685
 686   /**
 687    * @brief Return the number of items to display in the item view
 688    *
 689    * @return Return the number of items to display
 690    */
 691   virtual unsigned int GetNumberOfItems()
 692   {
 693     return POPUP_BUTTON_ITEMS_COUNT;
 694   }
 695
 696   /**
 697    * @brief Create a new item to populate the item view with
 698    *
 699    * @param[in] itemId The index of the item to create
 700    * @return Return the created actor for the given ID
 701    */
 702   virtual Actor NewItem(unsigned int itemId)
 703   {
 704     Toolkit::PushButton popupButton = Toolkit::PushButton::New();
 705     popupButton.SetProperty( Dali::Actor::Property::NAME, POPUP_BUTTON_ITEMS[ itemId ].name );
 706     popupButton.SetProperty( Toolkit::Button::Property::LABEL, POPUP_BUTTON_ITEMS[ itemId ].text );
 707     popupButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );
 708
 709     popupButton.ClickedSignal().Connect( this, &PopupExample::OnButtonClicked );
 710
 711     return popupButton;
 712   }
 713
 714 private:
 715
 716
 717   Application&        mApplication;
 718   Toolkit::Control    mView;                       ///< The View instance.
 719   Toolkit::ToolBar    mToolBar;                    ///< The View's Toolbar.
 720   Toolkit::PushButton mContextButton;              ///< For toggling contextual mode.
 721   Toolkit::PushButton mAnimationButton;            ///< For toggling the fade animation.
 722   Layer               mContentLayer;               ///< Content layer
 723
 724   Toolkit::TextLabel  mTitleActor;                 ///< Title text
 725
 726   bool                mContextual;                 ///< True if currently using the contextual popup mode.
 727   bool                mAnimationFade;              ///< True if currently using the fade animation.
 728
 729   Toolkit::Popup      mPopup;                       ///< The current example popup.
 730
 731   Toolkit::ItemView   mItemView;                    ///< ItemView to hold test images
 732
 733 };
 734
 735 int DALI_EXPORT_API main( int argc, char **argv )
 736 {
 737   Application application = Application::New( &argc, &argv, DEMO_THEME_PATH );
 738   PopupExample test( application );
 739   application.MainLoop();
 740   return 0;
 741 }