examples/layouting/flex-example.cpp

   1 /*
   2  * Copyright (c) 2018 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 "flex-example.h"
  19 #include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
  20 #include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
  21 #include <dali-toolkit/devel-api/controls/control-devel.h>
  22 #include <dali-toolkit/devel-api/layouting/flex-layout.h>
  23
  24 using namespace Dali;
  25 using namespace Dali::Toolkit;
  26
  27 namespace
  28 {
  29 const char* const TITLE = "Flex Example";
  30
  31 // Button file names
  32 const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
  33 const char* LTR_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-play-selected.png" );
  34
  35 const char* RTL_IMAGE( DEMO_IMAGE_DIR "icon-reverse.png" );
  36 const char* RTL_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reverse-selected.png" );
  37
  38 const char* ROTATE_CLOCKWISE_IMAGE( DEMO_IMAGE_DIR "icon-reset.png" );
  39 const char* ROTATE_CLOCKWISE_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reset-selected.png" );
  40
  41 const char* WRAP_IMAGE( DEMO_IMAGE_DIR "icon-replace.png" );
  42 const char* WRAP_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-replace-selected.png" );
  43
  44 const char* JUSTIFY_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid.png" );
  45 const char* JUSTIFY_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid-selected.png" );
  46
  47 // Child image filenames
  48 const char* IMAGE_PATH[] = {
  49   DEMO_IMAGE_DIR "application-icon-101.png",
  50   DEMO_IMAGE_DIR "application-icon-102.png",
  51   DEMO_IMAGE_DIR "application-icon-103.png",
  52   DEMO_IMAGE_DIR "application-icon-104.png",
  53   DEMO_IMAGE_DIR "application-icon-105.png",
  54   DEMO_IMAGE_DIR "application-icon-106.png",
  55   DEMO_IMAGE_DIR "application-icon-107.png",
  56   DEMO_IMAGE_DIR "application-icon-108.png",
  57   DEMO_IMAGE_DIR "application-icon-109.png",
  58   DEMO_IMAGE_DIR "application-icon-110.png"
  59
  60 };
  61
  62 const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
  63
  64 // Helper function to create ImageViews with given filename and size.
  65 void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
  66 {
  67   imageView = ImageView::New();
  68   Property::Map imagePropertyMap;
  69   imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
  70   imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
  71   imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
  72   imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
  73   imageView.SetProperty( Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
  74   imageView.SetName("ImageView");
  75   imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
  76   imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
  77 }
  78
  79 }  // namespace
  80
  81 namespace Demo
  82 {
  83
  84 FlexExample::FlexExample()
  85 : Example( TITLE ),
  86   mLTRDirection(true)
  87 {
  88
  89 }
  90
  91 void FlexExample::Create()
  92 {
  93   // The Init signal is received once (only) during the Application lifetime
  94   auto stage = Stage::GetCurrent();
  95
  96   mDirectionButton = PushButton::New();
  97   mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
  98   mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
  99   mDirectionButton.ClickedSignal().Connect( this, &FlexExample::OnDirectionClicked );
 100   mDirectionButton.SetParentOrigin( Vector3(0.2f, 1.0f, 0.5f ) );
 101   mDirectionButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 102   mDirectionButton.SetSize(75, 75);
 103   stage.Add( mDirectionButton );
 104
 105   mWrapButton = Toolkit::PushButton::New();
 106   mWrapButton.SetProperty( PushButton::Property::UNSELECTED_ICON, WRAP_IMAGE );
 107   mWrapButton.SetProperty( PushButton::Property::SELECTED_ICON, WRAP_SELECTED_IMAGE );
 108   mWrapButton.ClickedSignal().Connect( this, &FlexExample::OnWrapClicked );
 109   mWrapButton.SetParentOrigin( Vector3(0.4f, 1.0f, 0.5f ));
 110   mWrapButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 111   mWrapButton.SetSize(75, 75);
 112   stage.Add( mWrapButton );
 113
 114   mJustifyButton = Toolkit::PushButton::New();
 115   mJustifyButton.SetProperty( PushButton::Property::UNSELECTED_ICON, JUSTIFY_IMAGE );
 116   mJustifyButton.SetProperty( PushButton::Property::SELECTED_ICON, JUSTIFY_SELECTED_IMAGE );
 117   mJustifyButton.ClickedSignal().Connect( this, &FlexExample::OnJustifyClicked );
 118   mJustifyButton.SetParentOrigin( Vector3(0.6f, 1.0f, 0.5f ));
 119   mJustifyButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 120   mJustifyButton.SetSize(75, 75);
 121   stage.Add( mJustifyButton );
 122
 123   mRotateButton = PushButton::New();
 124   mRotateButton.SetProperty( PushButton::Property::UNSELECTED_ICON, ROTATE_CLOCKWISE_IMAGE );
 125   mRotateButton.SetProperty( PushButton::Property::SELECTED_ICON, ROTATE_CLOCKWISE_SELECTED_IMAGE );
 126   mRotateButton.ClickedSignal().Connect( this, &FlexExample::OnRotateClicked );
 127   mRotateButton.SetParentOrigin( Vector3(0.8f, 1.0f, 0.5f ));
 128   mRotateButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
 129   mRotateButton.SetSize(75, 75);
 130   stage.Add( mRotateButton );
 131
 132   // Create a flex container
 133   mFlexContainer = Control::New();
 134
 135   auto layout = FlexLayout::New();
 136   layout.SetAnimateLayout( true );
 137   layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
 138   layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
 139   layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
 140   layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
 141
 142   DevelControl::SetLayout( mFlexContainer, layout );
 143
 144   mFlexContainer.SetParentOrigin( ParentOrigin::CENTER );
 145   mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
 146   mFlexContainer.SetName( "FlexExample" );
 147   mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
 148   mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
 149   mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
 150   mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
 151
 152   for( unsigned int x = 0; x < NUMBER_OF_RESOURCES; ++x )
 153   {
 154     Toolkit::ImageView imageView;
 155     CreateChildImageView( imageView, IMAGE_PATH[ x ], Size(100.0f, 100.0f) );
 156     imageView.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.f, 0.f, 0.f, 0.f) );
 157     imageView.SetProperty( Toolkit::Control::Property::MARGIN, Extents(2.0f, 2.0f, 2.0f, 2.0f) );
 158     imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::ALIGN_SELF, Toolkit::FlexLayout::Alignment::CENTER );
 159     imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::FLEX, 0.f );
 160     mFlexContainer.Add( imageView );
 161   }
 162   stage.Add( mFlexContainer );
 163 }
 164
 165 // Remove controls added by this example from stage
 166 void FlexExample::Remove()
 167 {
 168   if ( mFlexContainer )
 169   {
 170     UnparentAndReset( mDirectionButton );
 171     UnparentAndReset( mWrapButton );
 172     UnparentAndReset( mJustifyButton );
 173     UnparentAndReset( mRotateButton );
 174     UnparentAndReset( mFlexContainer);
 175   }
 176 }
 177
 178 // Mirror items in layout
 179 bool FlexExample::OnDirectionClicked( Button button )
 180 {
 181   mLTRDirection = !mLTRDirection;
 182   if( mLTRDirection )
 183   {
 184     mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, LTR_IMAGE );
 185     mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, LTR_SELECTED_IMAGE );
 186     mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
 187   }
 188   else
 189   {
 190     mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
 191     mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
 192     mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::RIGHT_TO_LEFT );
 193   }
 194   return true;
 195 }
 196
 197 // Rotate layout by changing layout
 198 bool FlexExample::OnRotateClicked( Button button )
 199 {
 200   auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
 201   if( layout.GetFlexDirection() == Toolkit::FlexLayout::FlexDirection::COLUMN )
 202   {
 203     layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
 204   }
 205   else
 206   {
 207     layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::COLUMN );
 208   }
 209   return true;
 210 }
 211
 212 // Alternates the layout wrapping from wrapping to none
 213 bool FlexExample::OnWrapClicked( Button button )
 214 {
 215   auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
 216   if ( layout.GetFlexWrap() == Toolkit::FlexLayout::WrapType::NO_WRAP )
 217   {
 218     layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::WRAP );
 219     layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::CENTER );
 220     mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 45.0f, 75.0f) );
 221   }
 222   else
 223   {
 224     layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
 225     layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
 226     mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 0.0f, 0.0f) );
 227   }
 228   return true;
 229 }
 230
 231 // Alternates the layout to justify space between items or not
 232 bool FlexExample::OnJustifyClicked( Button button )
 233 {
 234    auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
 235    if ( layout.GetFlexJustification() == Toolkit::FlexLayout::Justification::FLEX_START )
 236    {
 237      layout.SetFlexJustification( Toolkit::FlexLayout::Justification::SPACE_BETWEEN);
 238    }
 239    else
 240    {
 241      layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
 242    }
 243    return true;
 244 }
 245
 246 } // namespace Demo