Add flex example

Change-Id: I3b508a4c3fbb83d20ac1635561aed89262fc6c1e

diff --git a/examples/layouting/flex-example.cpp b/examples/layouting/flex-example.cpp
new file mode 100644 (file)
index 0000000..5778cf0
--- /dev/null
+++ b/examples/layouting/flex-example.cpp
@@ -0,0 +1,244 @@
+/*
+ * Copyright (c) 2018 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#include "flex-example.h"
+#include <dali-toolkit/devel-api/visuals/image-visual-properties-devel.h>
+#include <dali-toolkit/devel-api/visual-factory/visual-factory.h>
+#include <dali-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/layouting/flex-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+
+// Button file names
+const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
+const char* LTR_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-play-selected.png" );
+
+const char* RTL_IMAGE( DEMO_IMAGE_DIR "icon-reverse.png" );
+const char* RTL_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reverse-selected.png" );
+
+const char* ROTATE_CLOCKWISE_IMAGE( DEMO_IMAGE_DIR "icon-reset.png" );
+const char* ROTATE_CLOCKWISE_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-reset-selected.png" );
+
+const char* WRAP_IMAGE( DEMO_IMAGE_DIR "icon-replace.png" );
+const char* WRAP_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-replace-selected.png" );
+
+const char* JUSTIFY_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid.png" );
+const char* JUSTIFY_SELECTED_IMAGE( DEMO_IMAGE_DIR "icon-item-view-layout-grid-selected.png" );
+
+// Child image filenames
+const char* IMAGE_PATH[] = {
+  DEMO_IMAGE_DIR "application-icon-101.png",
+  DEMO_IMAGE_DIR "application-icon-102.png",
+  DEMO_IMAGE_DIR "application-icon-103.png",
+  DEMO_IMAGE_DIR "application-icon-104.png",
+  DEMO_IMAGE_DIR "application-icon-105.png",
+  DEMO_IMAGE_DIR "application-icon-106.png",
+  DEMO_IMAGE_DIR "application-icon-107.png",
+  DEMO_IMAGE_DIR "application-icon-108.png",
+  DEMO_IMAGE_DIR "application-icon-109.png",
+  DEMO_IMAGE_DIR "application-icon-110.png"
+
+};
+
+const unsigned int NUMBER_OF_RESOURCES = sizeof(IMAGE_PATH) / sizeof(char*);
+
+// Helper function to create ImageViews with given filename and size.
+void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
+{
+  imageView = ImageView::New();
+  Property::Map imagePropertyMap;
+  imagePropertyMap[ Toolkit::Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
+  imagePropertyMap[ Toolkit::ImageVisual::Property::URL ] = filename;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = size.width;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = size.height;
+  imageView.SetProperty( Toolkit::ImageView::Property::IMAGE , imagePropertyMap );
+  imageView.SetName("ImageView");
+  imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+}
+
+}  // namespace
+
+namespace Demo
+{
+
+FlexExample::FlexExample()
+: mLTRDirection(true)
+{
+
+}
+
+void FlexExample::Create()
+{
+  // The Init signal is received once (only) during the Application lifetime
+  auto stage = Stage::GetCurrent();
+
+  mDirectionButton = PushButton::New();
+  mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
+  mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
+  mDirectionButton.ClickedSignal().Connect( this, &FlexExample::OnDirectionClicked );
+  mDirectionButton.SetParentOrigin( Vector3(0.2f, 1.0f, 0.5f ) );
+  mDirectionButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mDirectionButton.SetSize(75, 75);
+  stage.Add( mDirectionButton );
+
+  mWrapButton = Toolkit::PushButton::New();
+  mWrapButton.SetProperty( PushButton::Property::UNSELECTED_ICON, WRAP_IMAGE );
+  mWrapButton.SetProperty( PushButton::Property::SELECTED_ICON, WRAP_SELECTED_IMAGE );
+  mWrapButton.ClickedSignal().Connect( this, &FlexExample::OnWrapClicked );
+  mWrapButton.SetParentOrigin( Vector3(0.4f, 1.0f, 0.5f ));
+  mWrapButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mWrapButton.SetSize(75, 75);
+  stage.Add( mWrapButton );
+
+  mJustifyButton = Toolkit::PushButton::New();
+  mJustifyButton.SetProperty( PushButton::Property::UNSELECTED_ICON, JUSTIFY_IMAGE );
+  mJustifyButton.SetProperty( PushButton::Property::SELECTED_ICON, JUSTIFY_SELECTED_IMAGE );
+  mJustifyButton.ClickedSignal().Connect( this, &FlexExample::OnJustifyClicked );
+  mJustifyButton.SetParentOrigin( Vector3(0.6f, 1.0f, 0.5f ));
+  mJustifyButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mJustifyButton.SetSize(75, 75);
+  stage.Add( mJustifyButton );
+
+  mRotateButton = PushButton::New();
+  mRotateButton.SetProperty( PushButton::Property::UNSELECTED_ICON, ROTATE_CLOCKWISE_IMAGE );
+  mRotateButton.SetProperty( PushButton::Property::SELECTED_ICON, ROTATE_CLOCKWISE_SELECTED_IMAGE );
+  mRotateButton.ClickedSignal().Connect( this, &FlexExample::OnRotateClicked );
+  mRotateButton.SetParentOrigin( Vector3(0.8f, 1.0f, 0.5f ));
+  mRotateButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mRotateButton.SetSize(75, 75);
+  stage.Add( mRotateButton );
+
+  // Create a flex container
+  mFlexContainer = Control::New();
+
+  auto layout = FlexLayout::New();
+  layout.SetAnimateLayout( true );
+  layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
+  layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
+  layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
+  layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
+
+  DevelControl::SetLayout( mFlexContainer, layout );
+
+  mFlexContainer.SetParentOrigin( ParentOrigin::CENTER );
+  mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
+  mFlexContainer.SetName( "FlexExample" );
+  mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
+  mFlexContainer.SetProperty( Toolkit::LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::MATCH_PARENT );
+  mFlexContainer.SetAnchorPoint( AnchorPoint::CENTER );
+  mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
+
+  for( unsigned int x = 0; x < NUMBER_OF_RESOURCES; ++x )
+  {
+    Toolkit::ImageView imageView;
+    CreateChildImageView( imageView, IMAGE_PATH[ x ], Size(100.0f, 100.0f) );
+    imageView.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.f, 0.f, 0.f, 0.f) );
+    imageView.SetProperty( Toolkit::Control::Property::MARGIN, Extents(2.0f, 2.0f, 2.0f, 2.0f) );
+    imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::ALIGN_SELF, Toolkit::FlexLayout::Alignment::CENTER );
+    imageView.SetProperty( Toolkit::FlexLayout::ChildProperty::FLEX, 0.f );
+    mFlexContainer.Add( imageView );
+  }
+  stage.Add( mFlexContainer );
+}
+
+// Remove controls added by this example from stage
+void FlexExample::Remove()
+{
+  if ( mFlexContainer )
+  {
+    UnparentAndReset( mDirectionButton );
+    UnparentAndReset( mWrapButton );
+    UnparentAndReset( mJustifyButton );
+    UnparentAndReset( mRotateButton );
+    UnparentAndReset( mFlexContainer);
+  }
+}
+
+// Mirror items in layout
+bool FlexExample::OnDirectionClicked( Button button )
+{
+  mLTRDirection = !mLTRDirection;
+  if( mLTRDirection )
+  {
+    mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, LTR_IMAGE );
+    mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, LTR_SELECTED_IMAGE );
+    mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::LEFT_TO_RIGHT );
+  }
+  else
+  {
+    mDirectionButton.SetProperty( PushButton::Property::UNSELECTED_ICON, RTL_IMAGE );
+    mDirectionButton.SetProperty( PushButton::Property::SELECTED_ICON, RTL_SELECTED_IMAGE );
+    mFlexContainer.SetProperty( Actor::Property::LAYOUT_DIRECTION, LayoutDirection::RIGHT_TO_LEFT );
+  }
+  return true;
+}
+
+// Rotate layout by changing layout
+bool FlexExample::OnRotateClicked( Button button )
+{
+  auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
+  if( layout.GetFlexDirection() == Toolkit::FlexLayout::FlexDirection::COLUMN )
+  {
+    layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::ROW );
+  }
+  else
+  {
+    layout.SetFlexDirection( Toolkit::FlexLayout::FlexDirection::COLUMN );
+  }
+  return true;
+}
+
+// Alternates the layout wrapping from wrapping to none
+bool FlexExample::OnWrapClicked( Button button )
+{
+  auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
+  if ( layout.GetFlexWrap() == Toolkit::FlexLayout::WrapType::NO_WRAP )
+  {
+    layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::WRAP );
+    layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::CENTER );
+    mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 45.0f, 75.0f) );
+  }
+  else
+  {
+    layout.SetFlexWrap( Toolkit::FlexLayout::WrapType::NO_WRAP );
+    layout.SetFlexAlignment( Toolkit::FlexLayout::Alignment::FLEX_START );
+    mFlexContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents(0.0f, 0.0f, 0.0f, 0.0f) );
+  }
+  return true;
+}
+
+// Alternates the layout to justify space between items or not
+bool FlexExample::OnJustifyClicked( Button button )
+{
+   auto layout = FlexLayout::DownCast(DevelControl::GetLayout( mFlexContainer ));
+   if ( layout.GetFlexJustification() == Toolkit::FlexLayout::Justification::FLEX_START )
+   {
+     layout.SetFlexJustification( Toolkit::FlexLayout::Justification::SPACE_BETWEEN);
+   }
+   else
+   {
+     layout.SetFlexJustification( Toolkit::FlexLayout::Justification::FLEX_START );
+   }
+   return true;
+}
+
+} // namespace Demo

diff --git a/examples/layouting/flex-example.h b/examples/layouting/flex-example.h
new file mode 100644 (file)
index 0000000..0049404
--- /dev/null
+++ b/examples/layouting/flex-example.h
@@ -0,0 +1,73 @@
+#ifndef DALI_DEMO_FLEX_EXAMPLE_H
+#define DALI_DEMO_FLEX_EXAMPLE_H
+
+/*
+ * Copyright (c) 2018 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+
+#include "example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @file flex-example.hcpp
+ * @brief Example of a Flex Layout with mirror feature and
+ * transition from horizontal to vertical.
+ */
+class FlexExample final: public ConnectionTracker, public Example
+{
+public:
+  FlexExample();
+
+  // Creates a Flex Layout Example and displays it.
+  virtual void Create() override;
+
+  // Remove and destroy this layout
+  virtual void Remove() override;
+
+private:
+
+  // Changes the direction of the items.
+  bool OnDirectionClicked( Button button );
+
+  // Alternates the layout from horizontal to vertical
+  bool OnRotateClicked( Button button );
+
+  // Alternates the layout wrapping from wrapping to none
+  bool OnWrapClicked( Button button );
+
+  // Alternates the layout to justify space between items or not
+  bool OnJustifyClicked( Button button );
+
+private:
+  PushButton mDirectionButton;
+  PushButton mRotateButton;
+  PushButton mWrapButton;
+  PushButton mJustifyButton;
+  Control mFlexContainer;
+  bool mLTRDirection;
+}; // class FlexExample
+
+} // namespace Demo
+
+#endif //DALI_DEMO_FLEX_EXAMPLE_H

diff --git a/examples/layouting/layouting-examples.cpp b/examples/layouting/layouting-examples.cpp
index d677b41..a1f342e 100644 (file)
--- a/examples/layouting/layouting-examples.cpp
+++ b/examples/layouting/layouting-examples.cpp
@@ -26,6 +26,7 @@
 #include "shared/view.h"
 #include "linear-example.h"
 #include "padding-example.h"
+#include "flex-example.h"
 #include "example.h"
 #include "absolute-example.h"
 
@@ -49,6 +50,7 @@ void CreateExamples( ExampleContainer& container )
   container.push_back( ExamplePointer( new Demo::LinearExample ) );
   container.push_back( ExamplePointer( new Demo::PaddingExample ) );
   container.push_back( ExamplePointer( new Demo::AbsoluteExample ) );
+  container.push_back( ExamplePointer( new Demo::FlexExample ) );
 }
 
 } // anonymous namespace