Absolute layout demo

Change-Id: I5b722e7aadcbbd4b308d07b61d19e78891f5eddd

Absolute layout demo
Change-Id: I5b722e7aadcbbd4b308d07b61d19e78891f5eddd
Agnelo Vaz
1 parent 94209fff
Showing 5 changed files with 240 additions and 7 deletions
examples/layouting/absolute-example.cpp
examples/layouting/absolute-example.h
examples/layouting/layouting-examples.cpp
examples/layouting/linear-example.cpp
examples/layouting/padding-example.cpp
+/*
+ * 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.
+ * 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 <string>
+#include "absolute-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/absolute-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+
+namespace
+{
+
+struct ImageDetails
+{
+  const char * name;
+  Vector2 position;
+  Size size;
+};
+
+ImageDetails IMAGES[] =
+{
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 0.0f,   0.0f ), Size( 100.0f, 100.0f ) },
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 100.0f,   0.0f ), Size( 100.0f, 100.0f ) },
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 0.0f, 100.0f ), Size( 100.0f, 100.0f ) },
+  { DEMO_IMAGE_DIR "gallery-small-23.jpg", Vector2( 200.0f, 200.0f ), Size( 100.0f, 100.0f ) },
+};
+unsigned int IMAGE_COUNT=sizeof(IMAGES)/sizeof(IMAGES[0]);
+
+// Helper function to create ImageViews with given filename and size.
+void CreateChildImageView( ImageView& imageView, unsigned imageIndex )
+{
+  imageView = ImageView::New();
+  Property::Map imagePropertyMap;
+  imagePropertyMap[ Visual::Property::TYPE ] = Toolkit::Visual::IMAGE;
+  imagePropertyMap[ ImageVisual::Property::URL ] = IMAGES[imageIndex].name;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_WIDTH ] = IMAGES[imageIndex].size.width ;
+  imagePropertyMap[ ImageVisual::Property::DESIRED_HEIGHT ] = IMAGES[imageIndex].size.height;
+  imageView.SetProperty( ImageView::Property::IMAGE , imagePropertyMap );
+  imageView.SetName("ImageView");
+  imageView.SetAnchorPoint( AnchorPoint::TOP_LEFT );
+  imageView.SetResizePolicy( ResizePolicy::FIXED, Dimension::ALL_DIMENSIONS );
+  imageView.SetProperty( Dali::Actor::Property::POSITION, Vector3( IMAGES[imageIndex].position ) );
+}
+
+} // namespace
+
+namespace Demo
+{
+
+AbsoluteExample::AbsoluteExample()
+: mRootLayoutControl(),
+  mAbsoluteLayoutContainer(),
+  mLayoutSizeToggleStatus( true ),
+  mToggleButton()
+{
+
+}
+
+void AbsoluteExample::Create()
+{
+  // Create a root layout, ideally Dali would have a default layout in the root layer.
+  // Without this root layer the mAbsoluteLayout (or any other layout) will not
+  // honour WIDTH_SPECIFICATION or HEIGHT_SPECIFICATION settings.
+  // It uses the default stage size and ideally should have a layout added to it.
+  auto stage = Stage::GetCurrent();
+  mRootLayoutControl = Control::New();
+  auto rootLayout = AbsoluteLayout::New();
+  DevelControl::SetLayout( mRootLayoutControl, rootLayout );
+  mRootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER );
+  mRootLayoutControl.SetParentOrigin( ParentOrigin::CENTER );
+  stage.Add( mRootLayoutControl );
+
+  // Create an Absolute Layout to show ImageViews at explictly provided positions.
+  mAbsoluteLayoutContainer = Control::New();
+  mAbsoluteLayoutContainer.SetBackgroundColor( Color::WHITE );
+  auto absoluteLayout = AbsoluteLayout::New();
+  DevelControl::SetLayout( mAbsoluteLayoutContainer, absoluteLayout );
+  mAbsoluteLayoutContainer.SetName("AbsoluteLayout");
+
+  mAbsoluteLayoutContainer.SetAnchorPoint( AnchorPoint::CENTER );
+  mAbsoluteLayoutContainer.SetParentOrigin( ParentOrigin::CENTER );
+
+  // Initially absolute layout to use these specifications, toggle button will alter them.
+  mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+  mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
+
+  mRootLayoutControl.Add( mAbsoluteLayoutContainer );
+
+  for( unsigned int x = 0; x < NUMBER_OF_IMAGE_VIEWS; x++ )
+  {
+    CreateChildImageView( mImageViews[x], x%IMAGE_COUNT );
+    mAbsoluteLayoutContainer.Add( mImageViews[x] );
+  }
+
+  // Button toggles the size of the layout
+  mToggleButton = PushButton::New();
+  mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Change layout size" );
+  mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+  mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+  mToggleButton.ClickedSignal().Connect( this, &Demo::AbsoluteExample::ChangeSizeClicked );
+  mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+  mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+
+  stage.Add( mToggleButton );
+
+}
+
+void AbsoluteExample::Remove()
+{
+  UnparentAndReset( mAbsoluteLayoutContainer );
+  UnparentAndReset( mToggleButton );
+  UnparentAndReset( mRootLayoutControl );
+}
+
+bool AbsoluteExample::ChangeSizeClicked( Toolkit::Button button )
+{
+  if ( true == mLayoutSizeToggleStatus )
+  {
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, 480 );
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  700 );
+    mLayoutSizeToggleStatus = false;
+  }
+  else
+  {
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+    mAbsoluteLayoutContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  ChildLayoutData::WRAP_CONTENT );
+    mLayoutSizeToggleStatus = true;
+  }
+
+  return true;
+}
+
+} // namespace Demo
 \ No newline at end of file
+#ifndef DALI_DEMO_ABSOLUTE_EXAMPLE_H
+#define DALI_DEMO_ABSOLUTE_EXAMPLE_H
+
+/*
+ * 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.
+ * 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 <string>
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+#include "example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @file absolute-example.hcpp
+ * @brief Example of a Linear Layout with padding applied, enables updating of padding values for
+ * one of the children.
+ */
+class AbsoluteExample: public ConnectionTracker, public Example
+{
+public:
+  static const unsigned int NUMBER_OF_IMAGE_VIEWS = 4;
+
+  AbsoluteExample();
+
+  // Creates a Absolute Layout Example and displays it.
+  virtual void Create() override;
+
+  // Remove and destroy this layout
+  virtual void Remove() override;
+
+private:
+
+
+  // Callback when change size button is pressed
+  bool ChangeSizeClicked( Toolkit::Button button );
+
+private:
+
+  Toolkit::Control           mRootLayoutControl;
+  Toolkit::Control           mAbsoluteLayoutContainer;
+  Toolkit::ImageView         mImageViews[ NUMBER_OF_IMAGE_VIEWS ];
+  bool                       mLayoutSizeToggleStatus;
+  Toolkit::PushButton        mToggleButton;
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_ABSOLUTE_EXAMPLE_H
@@ -27,6 +27,7 @@
 #include "linear-example.h"
 #include "padding-example.h"
 #include "example.h"
+#include "absolute-example.h"
 using namespace Dali;
 using namespace Dali::Toolkit;
@@ -47,6 +48,7 @@ void CreateExamples( ExampleContainer&amp; container )
 {
   container.push_back( ExamplePointer( new Demo::LinearExample ) );
   container.push_back( ExamplePointer( new Demo::PaddingExample ) );
+  container.push_back( ExamplePointer( new Demo::AbsoluteExample ) );
 }
 } // anonymous namespace
@@ -71,7 +71,6 @@ namespace Demo
 void LinearExample::Create()
 {
-  // The Init signal is received once (only) during the Application lifetime
   auto stage = Stage::GetCurrent();
   mDirectionButton = PushButton::New();
@@ -21,6 +21,7 @@
 #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/hbox-layout.h>
+#include <dali-toolkit/devel-api/layouting/absolute-layout.h>
 using namespace Dali;
 using namespace Dali::Toolkit;
@@ -53,9 +54,19 @@ void PaddingExample::Create()
 {
   // The Init signal is received once (only) during the Application lifetime
-  // Creates a default view with a default tool bar.
-  // The view is added to the stage.
+  // Create a root layout, ideally Dali would have a default layout in the root layer.
+  // Without this root layer the mAbsoluteLayout (or any other layout) will not
+  // honour WIDTH_SPECIFICATION or HEIGHT_SPECIFICATION settings.
+  // It uses the default stage size and ideally should have a layout added to it.
   auto stage = Stage::GetCurrent();
+  auto rootLayoutControl = Control::New();
+  rootLayoutControl.SetName( "AbsoluteLayout");
+  auto rootLayout = AbsoluteLayout::New();
+  DevelControl::SetLayout( rootLayoutControl, rootLayout );
+  rootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER );
+  rootLayoutControl.SetParentOrigin( ParentOrigin::CENTER );
+  stage.Add( rootLayoutControl );
+
   // Create a table view to show a pair of buttons above each image.
   mHorizontalBox = Control::New();
@@ -63,11 +74,13 @@ void PaddingExample::Create()
   auto hboxLayout = HboxLayout::New();
   DevelControl::SetLayout( mHorizontalBox, hboxLayout );
   mHorizontalBox.SetName("HBox");
-
+  mHorizontalBox.SetBackgroundColor( Color::WHITE );
+  mHorizontalBox.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, 480 );
+  mHorizontalBox.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION,  700 );
   mHorizontalBox.SetAnchorPoint( AnchorPoint::CENTER );
   mHorizontalBox.SetParentOrigin( ParentOrigin::CENTER );
-  stage.Add( mHorizontalBox );
+  rootLayoutControl.Add( mHorizontalBox );
   mToggleButton = Toolkit::PushButton::New();
   mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Toggle Padding on #2" );
@@ -86,13 +99,13 @@ void PaddingExample::Create()
     // Set Padding for second ImageView
     if( 1 == x )
     {
-      mImageViews[x].SetProperty(Toolkit::Control::Property::PADDING, Extents(10.0f,10.0f,5.0f, 5.0f));
+      mImageViews[x].SetProperty(Toolkit::Control::Property::PADDING, Extents( 10.0f,10.0f,5.0f, 5.0f));
     }
     // Set margin for first ImageView
     if( 0 == x )
     {
-      mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents(10.0f,10.0f,0.0f, 0.0f));
+      mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents( 10.0f,10.0f,0.0f, 0.0f));
     }
     mHorizontalBox.Add( mImageViews[x] );