examples/scroll-view/scroll-view-example.cpp

   1 /*
   2  * Copyright (c) 2019 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 // EXTERNAL INCLUDES
  19 #include <sstream>
  20
  21 // INTERNAL INCLUDES
  22 #include "shared/view.h"
  23 #include <dali/dali.h>
  24 #include <dali-toolkit/dali-toolkit.h>
  25
  26 using namespace Dali;
  27 using namespace Dali::Toolkit;
  28
  29 namespace
  30 {
  31 const char * const BACKGROUND_IMAGE( DEMO_IMAGE_DIR "background-default.png" );
  32 const char * const TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
  33 const char * const APPLICATION_TITLE( "ScrollView" );
  34 const char * const EFFECT_CAROUSEL_IMAGE( DEMO_IMAGE_DIR "icon-scroll-view-carousel.png" );
  35 const char * const EFFECT_CAROUSEL_IMAGE_SELECTED( DEMO_IMAGE_DIR "icon-scroll-view-carousel-selected.png" );
  36 const char * const EFFECT_CUBE_IMAGE( DEMO_IMAGE_DIR "icon-scroll-view-inner-cube.png" );
  37 const char * const EFFECT_CUBE_IMAGE_SELECTED( DEMO_IMAGE_DIR "icon-scroll-view-inner-cube-selected.png" );
  38 const char * const EFFECT_SPIRAL_IMAGE( DEMO_IMAGE_DIR "icon-scroll-view-spiral.png" );
  39 const char * const EFFECT_SPIRAL_IMAGE_SELECTED( DEMO_IMAGE_DIR "icon-scroll-view-spiral-selected.png" );
  40 const char * const EFFECT_WAVE_IMAGE( DEMO_IMAGE_DIR "icon-effect-wave.png" );
  41 const char * const EFFECT_WAVE_IMAGE_SELECTED( DEMO_IMAGE_DIR "icon-effect-wave-selected.png" );
  42
  43 const Vector3 ICON_SIZE(100.0f, 100.0f, 0.0f);
  44
  45 const char* EFFECT_MODE_NAME[] = {
  46     "PageCarousel",
  47     "PageCube",
  48     "PageSpiral",
  49     "PageWave"
  50 };
  51
  52 const char * const IMAGE_PATHS[] = {
  53     DEMO_IMAGE_DIR "gallery-medium-1.jpg",
  54     DEMO_IMAGE_DIR "gallery-medium-2.jpg",
  55     DEMO_IMAGE_DIR "gallery-medium-3.jpg",
  56     DEMO_IMAGE_DIR "gallery-medium-4.jpg",
  57     DEMO_IMAGE_DIR "gallery-medium-5.jpg",
  58     DEMO_IMAGE_DIR "gallery-medium-6.jpg",
  59     DEMO_IMAGE_DIR "gallery-medium-7.jpg",
  60     DEMO_IMAGE_DIR "gallery-medium-8.jpg",
  61     DEMO_IMAGE_DIR "gallery-medium-9.jpg",
  62     DEMO_IMAGE_DIR "gallery-medium-10.jpg",
  63     DEMO_IMAGE_DIR "gallery-medium-11.jpg",
  64     DEMO_IMAGE_DIR "gallery-medium-12.jpg",
  65     DEMO_IMAGE_DIR "gallery-medium-13.jpg",
  66     DEMO_IMAGE_DIR "gallery-medium-14.jpg",
  67     DEMO_IMAGE_DIR "gallery-medium-15.jpg",
  68     DEMO_IMAGE_DIR "gallery-medium-16.jpg",
  69     DEMO_IMAGE_DIR "gallery-medium-17.jpg",
  70     DEMO_IMAGE_DIR "gallery-medium-18.jpg",
  71     DEMO_IMAGE_DIR "gallery-medium-19.jpg",
  72     DEMO_IMAGE_DIR "gallery-medium-20.jpg",
  73     DEMO_IMAGE_DIR "gallery-medium-21.jpg",
  74     DEMO_IMAGE_DIR "gallery-medium-22.jpg",
  75     DEMO_IMAGE_DIR "gallery-medium-23.jpg",
  76     DEMO_IMAGE_DIR "gallery-medium-24.jpg",
  77     DEMO_IMAGE_DIR "gallery-medium-25.jpg",
  78     DEMO_IMAGE_DIR "gallery-medium-26.jpg",
  79     DEMO_IMAGE_DIR "gallery-medium-27.jpg",
  80     DEMO_IMAGE_DIR "gallery-medium-28.jpg",
  81     DEMO_IMAGE_DIR "gallery-medium-29.jpg",
  82     DEMO_IMAGE_DIR "gallery-medium-30.jpg",
  83     DEMO_IMAGE_DIR "gallery-medium-31.jpg",
  84     DEMO_IMAGE_DIR "gallery-medium-32.jpg",
  85     DEMO_IMAGE_DIR "gallery-medium-33.jpg",
  86     DEMO_IMAGE_DIR "gallery-medium-34.jpg",
  87     DEMO_IMAGE_DIR "gallery-medium-35.jpg",
  88     DEMO_IMAGE_DIR "gallery-medium-36.jpg",
  89     DEMO_IMAGE_DIR "gallery-medium-37.jpg",
  90     DEMO_IMAGE_DIR "gallery-medium-38.jpg",
  91     DEMO_IMAGE_DIR "gallery-medium-39.jpg",
  92     DEMO_IMAGE_DIR "gallery-medium-40.jpg",
  93     DEMO_IMAGE_DIR "gallery-medium-41.jpg",
  94     DEMO_IMAGE_DIR "gallery-medium-42.jpg",
  95     DEMO_IMAGE_DIR "gallery-medium-43.jpg",
  96     DEMO_IMAGE_DIR "gallery-medium-44.jpg",
  97     DEMO_IMAGE_DIR "gallery-medium-45.jpg",
  98     DEMO_IMAGE_DIR "gallery-medium-46.jpg",
  99     DEMO_IMAGE_DIR "gallery-medium-47.jpg",
 100     DEMO_IMAGE_DIR "gallery-medium-48.jpg",
 101     DEMO_IMAGE_DIR "gallery-medium-49.jpg",
 102     DEMO_IMAGE_DIR "gallery-medium-50.jpg",
 103     DEMO_IMAGE_DIR "gallery-medium-51.jpg",
 104     DEMO_IMAGE_DIR "gallery-medium-52.jpg",
 105     DEMO_IMAGE_DIR "gallery-medium-53.jpg",
 106
 107     NULL
 108 };
 109
 110 const char * const GetNextImagePath()
 111 {
 112   static const char * const * imagePtr = &IMAGE_PATHS[0];
 113
 114   if ( *(++imagePtr) == NULL )
 115   {
 116     imagePtr = &IMAGE_PATHS[0];
 117   }
 118
 119   return *imagePtr;
 120 }
 121
 122 const int PAGE_COLUMNS = 10;                                                ///< Number of Pages going across (columns)
 123 const int PAGE_ROWS = 1;                                                    ///< Number of Pages going down (rows)
 124 const int IMAGE_ROWS = 5;                                                   ///< Number of Images going down (rows) with a Page
 125
 126 const unsigned int IMAGE_THUMBNAIL_WIDTH  = 256;                            ///< Width of Thumbnail Image in texels
 127 const unsigned int IMAGE_THUMBNAIL_HEIGHT = 256;                            ///< Height of Thumbnail Image in texels
 128
 129 const float SPIN_DURATION = 1.0f;                                           ///< Times to spin an Image by upon touching, each spin taking a second.
 130
 131 const float EFFECT_SNAP_DURATION(0.66f);                                    ///< Scroll Snap Duration for Effects
 132 const float EFFECT_FLICK_DURATION(0.5f);                                    ///< Scroll Flick Duration for Effects
 133
 134 } // unnamed namespace
 135
 136 /**
 137  * This example shows how to do custom Scroll Effects
 138  */
 139 class ExampleController : public ConnectionTracker
 140 {
 141 public:
 142
 143   /**
 144    * Constructor
 145    * @param application class, stored as reference
 146    */
 147   ExampleController( Application& application )
 148   : mApplication( application ),
 149     mView(),
 150     mScrolling(false),
 151     mEffectMode(PageCarouselEffect)
 152   {
 153     // Connect to the Application's Init and orientation changed signal
 154     mApplication.InitSignal().Connect(this, &ExampleController::OnInit);
 155   }
 156
 157   ~ExampleController()
 158   {
 159     // Nothing to do here; everything gets deleted automatically
 160   }
 161
 162   /**
 163    * This method gets called once the main loop of application is up and running
 164    */
 165   void OnInit(Application& app)
 166   {
 167     Stage stage = Dali::Stage::GetCurrent();
 168     stage.KeyEventSignal().Connect(this, &ExampleController::OnKeyEvent);
 169
 170     // Hide the indicator bar
 171     mApplication.GetWindow().ShowIndicator(Dali::Window::INVISIBLE);
 172
 173     // Creates a default view with a default tool bar.
 174     // The view is added to the stage.
 175     mContentLayer = DemoHelper::CreateView( app,
 176                                             mView,
 177                                             mToolBar,
 178                                             BACKGROUND_IMAGE,
 179                                             TOOLBAR_IMAGE,
 180                                             "" );
 181
 182     mEffectIcon[ PageCarouselEffect ] = EFFECT_CAROUSEL_IMAGE;
 183     mEffectIconSelected[ PageCarouselEffect ] = EFFECT_CAROUSEL_IMAGE_SELECTED;
 184     mEffectIcon[ PageCubeEffect ]     = EFFECT_CUBE_IMAGE;
 185     mEffectIconSelected[ PageCubeEffect ]     = EFFECT_CUBE_IMAGE_SELECTED;
 186     mEffectIcon[ PageSpiralEffect ]   = EFFECT_SPIRAL_IMAGE;
 187     mEffectIconSelected[ PageSpiralEffect ]   = EFFECT_SPIRAL_IMAGE_SELECTED;
 188     mEffectIcon[ PageWaveEffect ]     = EFFECT_WAVE_IMAGE;
 189     mEffectIconSelected[ PageWaveEffect ]     = EFFECT_WAVE_IMAGE_SELECTED;
 190
 191     // Create a effect change button. (right of toolbar)
 192     mEffectChangeButton = Toolkit::PushButton::New();
 193     mEffectChangeButton.ClickedSignal().Connect( this, &ExampleController::OnEffectTouched );
 194     mToolBar.AddControl( mEffectChangeButton, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalRight, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
 195
 196     // Create the content layer.
 197     AddContentLayer();
 198
 199     // Hack to force screen refresh.
 200     Animation animation = Animation::New(1.0f);
 201     animation.AnimateTo(Property(mContentLayer, Actor::Property::POSITION), Vector3::ZERO );
 202     animation.Play();
 203   }
 204
 205 private:
 206
 207   /**
 208    * Adds content to the ContentLayer. This is everything we see
 209    * excluding the toolbar at the top.
 210    */
 211   void AddContentLayer()
 212   {
 213     Stage stage = Stage::GetCurrent();
 214     Vector2 stageSize = stage.GetSize();
 215
 216     mScrollView = ScrollView::New();
 217     mScrollView.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::CENTER);
 218     mScrollView.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::CENTER);
 219     mContentLayer.Add( mScrollView );
 220     mScrollView.SetSize( stageSize );
 221     mScrollView.SetAxisAutoLock( true );
 222     mScrollView.SetAxisAutoLockGradient( 1.0f );
 223
 224     mScrollView.ScrollStartedSignal().Connect( this, &ExampleController::OnScrollStarted );
 225     mScrollView.ScrollCompletedSignal().Connect( this, &ExampleController::OnScrollCompleted );
 226
 227     for(int row = 0;row<PAGE_ROWS;row++)
 228     {
 229       for(int column = 0;column<PAGE_COLUMNS;column++)
 230       {
 231         Actor page = CreatePage();
 232
 233         page.SetPosition( column * stageSize.x, row * stageSize.y );
 234         mScrollView.Add( page );
 235
 236         mPages.push_back(page);
 237       }
 238     }
 239
 240     Update();
 241   }
 242
 243   /**
 244    * Updates the ScrollView and it's children based
 245    * on the current effect.
 246    */
 247   void Update()
 248   {
 249     std::stringstream ss(APPLICATION_TITLE);
 250     ss << APPLICATION_TITLE << ": " << EFFECT_MODE_NAME[mEffectMode];
 251     SetTitle(ss.str());
 252
 253     mEffectChangeButton.SetProperty( Toolkit::Button::Property::UNSELECTED_BACKGROUND_VISUAL, mEffectIcon[ mEffectMode ] );
 254     mEffectChangeButton.SetProperty( Toolkit::Button::Property::SELECTED_BACKGROUND_VISUAL, mEffectIconSelected[ mEffectMode ] );
 255
 256     // remove old Effect if exists.
 257     if(mScrollViewEffect)
 258     {
 259       mScrollView.RemoveEffect(mScrollViewEffect);
 260     }
 261
 262     // apply new Effect to ScrollView
 263     ApplyEffectToScrollView();
 264     unsigned int pageCount(0);
 265     for( std::vector< Actor >::iterator pageIter = mPages.begin(); pageIter != mPages.end(); ++pageIter)
 266     {
 267       Actor page = *pageIter;
 268       ApplyEffectToPage( page, pageCount++ );
 269     }
 270   }
 271
 272   /**
 273    * Creates a page using a source of images.
 274    */
 275   Actor CreatePage()
 276   {
 277     Actor page = Actor::New();
 278     page.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 279     page.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 280     page.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 281
 282     Stage stage = Stage::GetCurrent();
 283     Vector2 stageSize = stage.GetSize();
 284
 285     const float margin = 10.0f;
 286
 287     // Calculate the number of images going across (columns) within a page, according to the screen resolution and dpi.
 288     int imageColumns = round(IMAGE_ROWS * (stageSize.x / stage.GetDpi().x) / (stageSize.y / stage.GetDpi().y));
 289     const Vector3 imageSize((stageSize.x / imageColumns) - margin, (stageSize.y / IMAGE_ROWS) - margin, 0.0f);
 290
 291     for(int row = 0;row<IMAGE_ROWS;row++)
 292     {
 293       for(int column = 0;column<imageColumns;column++)
 294       {
 295         ImageView image = CreateImage( GetNextImagePath(), imageSize.x, imageSize.y );
 296
 297         image.SetProperty( Actor::Property::PARENT_ORIGIN, ParentOrigin::CENTER );
 298         image.SetProperty( Actor::Property::ANCHOR_POINT, AnchorPoint::CENTER );
 299
 300         Vector3 position( margin * 0.5f + (imageSize.x + margin) * column - stageSize.width * 0.5f,
 301                          margin * 0.5f + (imageSize.y + margin) * row - stageSize.height * 0.5f,
 302                           0.0f);
 303         image.SetPosition( position + imageSize * 0.5f );
 304         image.SetSize( imageSize );
 305         page.Add(image);
 306       }
 307     }
 308
 309     return page;
 310   }
 311
 312   /**
 313    * [ScrollView]
 314    * Applies effect to scrollView
 315    */
 316   void ApplyEffectToScrollView()
 317   {
 318     bool snap(true);
 319
 320     Stage stage = Stage::GetCurrent();
 321     Vector2 stageSize = stage.GetSize();
 322
 323     RulerPtr rulerX = CreateRuler(snap ? stageSize.width : 0.0f);
 324     RulerPtr rulerY = new DefaultRuler;
 325     rulerX->SetDomain(RulerDomain(0.0f, stageSize.x * PAGE_COLUMNS, false));
 326     rulerY->Disable();
 327
 328     Dali::Path path = Dali::Path::New();
 329     Dali::Property::Array points;
 330         points.Resize(3);
 331     Dali::Property::Array controlPoints;
 332         controlPoints.Resize(4);
 333     Vector3 forward;
 334     if( mEffectMode == PageCarouselEffect)
 335     {
 336
 337       points[0] = Vector3( stageSize.x*0.75, 0.0f,  -stageSize.x*0.75f);
 338       points[1] = Vector3( 0.0f, 0.0f, 0.0f );
 339       points[2] = Vector3( -stageSize.x*0.75f, 0.0f,  -stageSize.x*0.75f);
 340       path.SetProperty( Path::Property::POINTS, points );
 341
 342       controlPoints[0] = Vector3( stageSize.x*0.5f, 0.0f, 0.0f );
 343       controlPoints[1] = Vector3( stageSize.x*0.5f, 0.0f, 0.0f );
 344       controlPoints[2] = Vector3(-stageSize.x*0.5f, 0.0f, 0.0f );
 345       controlPoints[3] = Vector3(-stageSize.x*0.5f, 0.0f, 0.0f );
 346       path.SetProperty( Path::Property::CONTROL_POINTS, controlPoints );
 347
 348       forward = Vector3::ZERO;
 349     }
 350     else if( mEffectMode == PageCubeEffect)
 351     {
 352       points[0] = Vector3( stageSize.x*0.5, 0.0f,  stageSize.x*0.5f);
 353       points[1] = Vector3( 0.0f, 0.0f, 0.0f );
 354       points[2] = Vector3( -stageSize.x*0.5f, 0.0f, stageSize.x*0.5f);
 355       path.SetProperty( Path::Property::POINTS, points );
 356
 357       controlPoints[0] = Vector3( stageSize.x*0.5f, 0.0f, stageSize.x*0.3f );
 358       controlPoints[1] = Vector3( stageSize.x*0.3f, 0.0f, 0.0f );
 359       controlPoints[2] = Vector3(-stageSize.x*0.3f, 0.0f, 0.0f );
 360       controlPoints[3] = Vector3(-stageSize.x*0.5f, 0.0f,  stageSize.x*0.3f );
 361       path.SetProperty( Path::Property::CONTROL_POINTS, controlPoints );
 362
 363       forward = Vector3(-1.0f,0.0f,0.0f);
 364     }
 365     else if( mEffectMode == PageSpiralEffect)
 366     {
 367       points[0] = Vector3( stageSize.x*0.5, 0.0f,  -stageSize.x*0.5f);
 368       points[1] = Vector3( 0.0f, 0.0f, 0.0f );
 369       points[2] = Vector3( -stageSize.x*0.5f, 0.0f, -stageSize.x*0.5f);
 370       path.SetProperty( Path::Property::POINTS, points );
 371
 372       controlPoints[0] = Vector3( stageSize.x*0.5f, 0.0f, 0.0f );
 373       controlPoints[1] = Vector3( stageSize.x*0.5f, 0.0f, 0.0f );
 374       controlPoints[2] = Vector3(-stageSize.x*0.5f, 0.0f, 0.0f );
 375       controlPoints[3] = Vector3(-stageSize.x*0.5f, 0.0f, 0.0f );
 376       path.SetProperty( Path::Property::CONTROL_POINTS, controlPoints );
 377
 378       forward = Vector3(-1.0f,0.0f,0.0f);
 379     }
 380     else if( mEffectMode == PageWaveEffect)
 381     {
 382       points[0] = Vector3( stageSize.x, 0.0f,  -stageSize.x);
 383       points[1] = Vector3( 0.0f, 0.0f, 0.0f );
 384       points[2] = Vector3( -stageSize.x, 0.0f, -stageSize.x);
 385       path.SetProperty( Path::Property::POINTS, points );
 386
 387       controlPoints[0] = Vector3( 0.0f, 0.0f, -stageSize.x );
 388       controlPoints[1] = Vector3( stageSize.x*0.5f, 0.0f, 0.0f );
 389       controlPoints[2] = Vector3( -stageSize.x*0.5f, 0.0f, 0.0f);
 390       controlPoints[3] = Vector3(0.0f, 0.0f,-stageSize.x  );
 391       path.SetProperty( Path::Property::CONTROL_POINTS, controlPoints );
 392
 393       forward = Vector3(-1.0f,0.0f,0.0f);
 394     }
 395
 396     mScrollViewEffect = ScrollViewPagePathEffect::New(path, forward,Toolkit::ScrollView::Property::SCROLL_FINAL_X, Vector3(stageSize.x,stageSize.y,0.0f),PAGE_COLUMNS);
 397     mScrollView.SetScrollSnapDuration(EFFECT_SNAP_DURATION);
 398     mScrollView.SetScrollFlickDuration(EFFECT_FLICK_DURATION);
 399     mScrollView.SetScrollSnapAlphaFunction(AlphaFunction::EASE_OUT);
 400     mScrollView.SetScrollFlickAlphaFunction(AlphaFunction::EASE_OUT);
 401     mScrollView.RemoveConstraintsFromChildren();
 402
 403     rulerX = CreateRuler(snap ? stageSize.width * 0.5f : 0.0f);
 404     rulerX->SetDomain( RulerDomain( 0.0f, stageSize.x * 0.5f * PAGE_COLUMNS, false ) );
 405
 406     unsigned int currentPage = mScrollView.GetCurrentPage();
 407     if( mScrollViewEffect )
 408     {
 409       mScrollView.ApplyEffect(mScrollViewEffect);
 410     }
 411
 412     mScrollView.SetWrapMode( true );
 413     mScrollView.SetRulerX( rulerX );
 414     mScrollView.SetRulerY( rulerY );
 415
 416     mScrollView.ScrollTo( currentPage, 0.0f );
 417   }
 418
 419   /**
 420    * Creates a Ruler that snaps to a specified grid size.
 421    * If that grid size is 0.0 then this ruler does not
 422    * snap.
 423    *
 424    * @param[in] gridSize (optional) The grid size for the ruler,
 425    * (Default = 0.0 i.e. no snapping)
 426    * @return The ruler is returned.
 427    */
 428   RulerPtr CreateRuler(float gridSize = 0.0f)
 429   {
 430     if(gridSize <= Math::MACHINE_EPSILON_0)
 431     {
 432         return new DefaultRuler();
 433     }
 434     return new FixedRuler(gridSize);
 435   }
 436   // end switch
 437   /**
 438     * [Page]
 439     * Applies effect to the pages within scroll view.
 440     *
 441     * @param[in] page The page Actor to apply effect to.
 442     */
 443    void ApplyEffectToPage(Actor page, unsigned int pageOrder )
 444    {
 445      page.RemoveConstraints();
 446      page.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS );
 447
 448      ScrollViewPagePathEffect effect = ScrollViewPagePathEffect::DownCast( mScrollViewEffect );
 449      effect.ApplyToPage( page, pageOrder );
 450    }
 451
 452   /**
 453    * Creates an Image (Helper)
 454    *
 455    * @param[in] filename the path of the image.
 456    * @param[in] width the width of the image in texels
 457    * @param[in] height the height of the image in texels.
 458    */
 459   ImageView CreateImage( const std::string& filename, int width = IMAGE_THUMBNAIL_WIDTH, int height = IMAGE_THUMBNAIL_HEIGHT )
 460   {
 461     ImageView actor = ImageView::New();
 462     Property::Map map;
 463     map[Visual::Property::TYPE] = Visual::IMAGE;
 464     map[ImageVisual::Property::URL] = filename;
 465     map[ImageVisual::Property::DESIRED_WIDTH] = width;
 466     map[ImageVisual::Property::DESIRED_HEIGHT] = height;
 467     map[ImageVisual::Property::FITTING_MODE] = FittingMode::SCALE_TO_FILL;
 468     map[ImageVisual::Property::SAMPLING_MODE] = SamplingMode::BOX_THEN_LINEAR;
 469     actor.SetProperty( ImageView::Property::IMAGE, map );
 470
 471     actor.SetProperty( Dali::Actor::Property::NAME, filename );
 472     actor.SetProperty( Actor::Property::PARENT_ORIGIN,ParentOrigin::CENTER);
 473     actor.SetProperty( Actor::Property::ANCHOR_POINT,AnchorPoint::CENTER);
 474
 475     actor.TouchSignal().Connect( this, &ExampleController::OnTouchImage );
 476     return actor;
 477   }
 478
 479   /**
 480    * When scroll starts (i.e. user starts to drag scrollview),
 481    * note this state (mScrolling = true)
 482    * @param[in] position Current Scroll Position
 483    */
 484   void OnScrollStarted( const Vector2& position )
 485   {
 486     mScrolling = true;
 487   }
 488
 489   /**
 490    * When scroll starts (i.e. user stops dragging scrollview, and scrollview has snapped to destination),
 491    * note this state (mScrolling = false)
 492    * @param[in] position Current Scroll Position
 493    */
 494   void OnScrollCompleted( const Vector2& position )
 495   {
 496     mScrolling = false;
 497   }
 498
 499   /**
 500    * Upon Touching an image (Release), make it spin
 501    * (provided we're not scrolling).
 502    * @param[in] actor The actor touched
 503    * @param[in] event The touch information.
 504    */
 505   bool OnTouchImage( Actor actor, const TouchData& event )
 506   {
 507     if( (event.GetPointCount() > 0) && (!mScrolling) )
 508     {
 509       if( event.GetState( 0 ) == PointState::UP )
 510       {
 511         // Spin the Image a few times.
 512         Animation animation = Animation::New(SPIN_DURATION);
 513         animation.AnimateBy( Property( actor, Actor::Property::ORIENTATION ), Quaternion( Radian( Degree(360.0f * SPIN_DURATION) ), Vector3::XAXIS ), AlphaFunction::EASE_OUT );
 514         animation.Play();
 515       }
 516     }
 517     return false;
 518   }
 519
 520   /**
 521    * Signal handler, called when the 'Effect' button has been touched.
 522    *
 523    * @param[in] button The button that was pressed.
 524    */
 525   bool OnEffectTouched(Button button)
 526   {
 527     mEffectMode = static_cast<EffectMode>((static_cast<int>(mEffectMode) + 1) % static_cast<int>(Total));
 528     Update();
 529     return true;
 530   }
 531
 532   /**
 533    * Sets/Updates the title of the View
 534    * @param[in] title The new title for the view.
 535    */
 536   void SetTitle(const std::string& title)
 537   {
 538     if(!mTitleActor)
 539     {
 540       mTitleActor = DemoHelper::CreateToolBarLabel( "" );
 541       // Add title to the tool bar.
 542       mToolBar.AddControl( mTitleActor, DemoHelper::DEFAULT_VIEW_STYLE.mToolBarTitlePercentage, Alignment::HorizontalCenter );
 543     }
 544
 545     mTitleActor.SetProperty( Toolkit::TextLabel::Property::TEXT, title );
 546   }
 547
 548   /**
 549    * Main key event handler
 550    */
 551   void OnKeyEvent(const KeyEvent& event)
 552   {
 553     if(event.state == KeyEvent::Down)
 554     {
 555       if( IsKey( event, Dali::DALI_KEY_ESCAPE) || IsKey( event, Dali::DALI_KEY_BACK) )
 556       {
 557         mApplication.Quit();
 558       }
 559     }
 560   }
 561
 562 private:
 563
 564   Application& mApplication;                            ///< Application instance
 565   Toolkit::Control mView;                               ///< The View instance.
 566   Toolkit::ToolBar mToolBar;                            ///< The View's Toolbar.
 567   TextLabel mTitleActor;                                ///< The Toolbar's Title.
 568   Layer mContentLayer;                                  ///< The content layer (contains game actors)
 569   ScrollView mScrollView;                               ///< ScrollView UI Component
 570   bool mScrolling;                                      ///< ScrollView scrolling state (true = scrolling, false = stationary)
 571   ScrollViewEffect mScrollViewEffect;                   ///< ScrollView Effect instance.
 572   std::vector< Actor > mPages;                          ///< Keeps track of all the pages for applying effects.
 573
 574   /**
 575    * Enumeration of different effects this scrollview can operate under.
 576    */
 577   enum EffectMode
 578   {
 579     PageCarouselEffect,                                 ///< Page carousel effect
 580     PageCubeEffect,                                     ///< Page cube effect
 581     PageSpiralEffect,                                   ///< Page spiral effect
 582     PageWaveEffect,                                     ///< Page wave effect
 583
 584     Total
 585   };
 586
 587   EffectMode mEffectMode;                               ///< Current Effect mode
 588
 589   std::string mEffectIcon[Total];                       ///< Icons for the effect button
 590   std::string mEffectIconSelected[Total];               ///< Icons for the effect button when its selected
 591   Toolkit::PushButton mEffectChangeButton;              ///< Effect Change Button
 592 };
 593
 594 int DALI_EXPORT_API main(int argc, char **argv)
 595 {
 596   Application app = Application::New(&argc, &argv, DEMO_THEME_PATH);
 597   ExampleController test(app);
 598   app.MainLoop();
 599   return 0;
 600 }