#include <string>
#include "absolute-example.h"
+#include "layout-utilities.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>
namespace
{
+const char* const TITLE = "Absolute Example";
struct ImageDetails
{
{
AbsoluteExample::AbsoluteExample()
-: mRootLayoutControl(),
+: Example( TITLE ),
+ 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 );
+ // This layout will be the size of the stage but allows subsequent layouts to be any size.
+ mRootLayoutControl = LayoutUtilities::CreateRootContainer();
stage.Add( mRootLayoutControl );
// Create an Absolute Layout to show ImageViews at explictly provided positions.
* @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
+class AbsoluteExample final: public ConnectionTracker, public Example
{
public:
static const unsigned int NUMBER_OF_IMAGE_VIEWS = 4;
+ // Constructor
AbsoluteExample();
// Creates a Absolute Layout Example and displays it.
private:
-
// Callback when change size button is pressed
bool ChangeSizeClicked( Toolkit::Button button );
*
*/
+// EXTERNAL INCLUDES
+#include <string>
+
namespace Demo
{
/// Virtual destructor
virtual ~Example() = default;
+
+ /**
+ * Gets the title set for this example
+ * @return title
+ */
+ const std::string& GetExampleTitle() const
+ {
+ return mTitle;
+ }
+
+protected:
+ /**
+ * Constructor for Example
+ * @param[in] title Title to be used for the example
+ */
+ Example( const std::string& title )
+ : mTitle( title )
+ {
+ }
+
+private:
+ const std::string mTitle;
};
} // namespace Demo
namespace
{
+const char* const TITLE = "Flex Example";
// Button file names
const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
{
FlexExample::FlexExample()
-: mLTRDirection(true)
+: Example( TITLE ),
+ mLTRDirection(true)
{
}
class FlexExample final: public ConnectionTracker, public Example
{
public:
+
+ // Constructor
FlexExample();
// Creates a Flex Layout Example and displays it.
--- /dev/null
+/*
+ * 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 <string>
+#include "grid-example.h"
+#include "layout-utilities.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>
+#include <dali-toolkit/devel-api/layouting/grid.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace
+{
+const char* const TITLE = "Grid Example";
+
+// 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 );
+}
+
+enum CurrentExample
+{
+ GRID_EXACT_WIDTH = 0,
+ ITEMS_WITH_MARGINS,
+ GRID_MATCH_PARENT,
+ GRID_WRAP_CONTENT,
+ ADD_ITEMS,
+ CHANGE_TO_3_COLUMNS
+};
+
+}
+
+namespace Demo
+{
+
+GridExample::GridExample()
+: Example( TITLE )
+{
+}
+
+void GridExample::Create()
+{
+ // The Init signal is received once (only) during the Application lifetime
+ mToggleStatus = 0;
+ auto stage = Stage::GetCurrent();
+
+ // This layout will be the size of the stage but allow the Grid layout to be any size.
+ mRootLayoutControl = LayoutUtilities::CreateRootContainer();
+ stage.Add( mRootLayoutControl );
+
+ // Create a table view to show a pair of buttons above each image.
+ mGridContainer = Control::New();
+
+ // Create LinearLayout for this control.
+ auto gridLayout = Grid::New();
+ gridLayout.SetAnimateLayout(true);
+ gridLayout.SetNumberOfColumns( 2 );
+ DevelControl::SetLayout( mGridContainer, gridLayout );
+ mGridContainer.SetName("GridContainer");
+ mGridContainer.SetBackgroundColor( Color::WHITE );
+ mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+ mGridContainer.SetProperty( LayoutItem::ChildProperty::HEIGHT_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+ mGridContainer.SetProperty( Toolkit::Control::Property::PADDING, Extents( 20,20,20,20 ) );
+ mGridContainer.SetParentOrigin( ParentOrigin::CENTER );
+
+ mRootLayoutControl.Add( mGridContainer );
+
+ for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
+ {
+ ImageView imageView;
+ CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
+ mImageViews.push_back( imageView );
+ mGridContainer.Add( mImageViews[x] );
+ }
+
+ // Button toggles the size of the layout
+ mToggleButton = PushButton::New();
+ mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Width 300" );
+ mToggleButton.SetParentOrigin( ParentOrigin::BOTTOM_CENTER );
+ mToggleButton.SetAnchorPoint( AnchorPoint::BOTTOM_CENTER );
+ mToggleButton.ClickedSignal().Connect( this, &Demo::GridExample::ToggleButtonClicked );
+ mToggleButton.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH );
+ mToggleButton.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT );
+
+ stage.Add( mToggleButton );
+}
+
+void GridExample::Remove()
+{
+ mImageViews.clear();
+ UnparentAndReset( mGridContainer );
+ UnparentAndReset( mRootLayoutControl );
+ UnparentAndReset( mToggleButton );
+}
+
+void GridExample::ChangeTo3Columns()
+{
+ Grid gridLayout = Grid::DownCast( DevelControl::GetLayout(mGridContainer) );
+ if ( gridLayout )
+ {
+ gridLayout.SetNumberOfColumns( 3 );
+ }
+}
+
+void GridExample::AddItemsInteractively()
+{
+ if( mImageViews.size() < MAX_NUMBER_OF_IMAGE_VIEWS )
+ {
+ ImageView imageView;
+ CreateChildImageView( imageView, DEMO_IMAGE_DIR "gallery-small-23.jpg" , Size(100.0f, 100.0f) );
+ mImageViews.push_back( imageView );
+ mGridContainer.Add( imageView);
+
+ // Add item button shows how many items left to add.
+ unsigned int numberOfAdditonalImageViews = MAX_NUMBER_OF_IMAGE_VIEWS-INITIAL_NUMBER_OF_IMAGE_VIEWS;
+ unsigned int remainingImageViews = numberOfAdditonalImageViews - ( ( mImageViews.size() - INITIAL_NUMBER_OF_IMAGE_VIEWS) );
+ std::string buttonLabel( "Add item["+ std::to_string( numberOfAdditonalImageViews-remainingImageViews ) +"/"+
+ std::to_string( numberOfAdditonalImageViews)+"]" );
+ mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, buttonLabel );
+ }
+}
+
+void GridExample::AddMarginToItems()
+{
+ for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
+ {
+ mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents( 20,20,20,10));
+ }
+}
+
+void GridExample::RemoveMarginsFromItems()
+{
+ for( unsigned int x = 0; x < INITIAL_NUMBER_OF_IMAGE_VIEWS; x++ )
+ {
+ mImageViews[x].SetProperty(Toolkit::Control::Property::MARGIN, Extents());
+ }
+}
+
+void GridExample::MatchParentOnWidth()
+{
+ mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION,ChildLayoutData::MATCH_PARENT );
+}
+
+void GridExample::WrapContentOnWidth()
+{
+ mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, ChildLayoutData::WRAP_CONTENT );
+}
+
+void GridExample::SetExactWidth()
+{
+ mGridContainer.SetProperty( LayoutItem::ChildProperty::WIDTH_SPECIFICATION, 300 );
+}
+
+bool GridExample::ToggleButtonClicked( Toolkit::Button button )
+{
+ switch( mToggleStatus )
+ {
+ case GRID_EXACT_WIDTH :
+ {
+ SetExactWidth();
+ mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set Child Margin" );
+ mToggleStatus = ITEMS_WITH_MARGINS;
+ break;
+ }
+ case ITEMS_WITH_MARGINS :
+ {
+ AddMarginToItems();
+ mToggleStatus = GRID_MATCH_PARENT;
+ mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width MATCH_PARENT" );
+ break;
+ }
+ case GRID_MATCH_PARENT :
+ {
+ RemoveMarginsFromItems();
+ MatchParentOnWidth();
+ mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Set width WRAP_CONTENT" );
+ mToggleStatus = GRID_WRAP_CONTENT;
+ break;
+ }
+ case GRID_WRAP_CONTENT :
+ {
+ WrapContentOnWidth();
+ mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Add item" );
+ mToggleStatus = ADD_ITEMS;
+ break;
+ }
+ case ADD_ITEMS :
+ {
+ if( mGridContainer.GetChildCount() < MAX_NUMBER_OF_IMAGE_VIEWS )
+ {
+ AddItemsInteractively();
+ }
+
+ if( mGridContainer.GetChildCount() == MAX_NUMBER_OF_IMAGE_VIEWS )
+ {
+ // Remove button when no more items to add
+ mToggleStatus= CHANGE_TO_3_COLUMNS;
+ mToggleButton.SetProperty( Toolkit::Button::Property::LABEL, "Change Columns" );
+ }
+ break;
+ }
+ case CHANGE_TO_3_COLUMNS :
+ {
+ ChangeTo3Columns();
+ mToggleStatus = GRID_EXACT_WIDTH;
+ UnparentAndReset( mToggleButton );
+ break;
+ }
+ default :
+ {
+ mToggleStatus = GRID_EXACT_WIDTH;
+ }
+ }
+ return true;
+}
+
+} // namespace Demo
--- /dev/null
+#ifndef DALI_DEMO_GRID_EXAMPLE_H
+#define DALI_DEMO_GRID_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 <string>
+#include <dali/dali.h>
+#include <dali-toolkit/dali-toolkit.h>
+
+#include "example.h"
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace Demo
+{
+
+/**
+ * @file grid-example.hcpp
+ * @brief Example of a Grid Layout
+ */
+class GridExample final: public ConnectionTracker, public Example
+{
+public:
+
+ // Constructor
+ GridExample();
+
+ static const unsigned int MAX_NUMBER_OF_IMAGE_VIEWS = 9;
+ static const unsigned int INITIAL_NUMBER_OF_IMAGE_VIEWS = 5;
+
+ // Create a Grid layout of ImagesViews
+ void Create() override;
+
+ // Remove created Layout
+ void Remove() override;
+
+private:
+
+ // Callback for button pressed
+ bool ToggleButtonClicked( Toolkit::Button button );
+
+ // Actions to perform in this example
+ void ChangeTo3Columns();
+ void AddItemsInteractively();
+ void AddMarginToItems();
+ void RemoveMarginsFromItems();
+ void MatchParentOnWidth();
+ void WrapContentOnWidth();
+ void SetExactWidth();
+
+private:
+
+ Toolkit::Control mRootLayoutControl;
+ Toolkit::Control mGridContainer;
+ std::vector<Toolkit::ImageView> mImageViews;
+ Toolkit::PushButton mToggleButton;
+ unsigned int mToggleStatus;
+};
+
+} // namespace Demo
+
+#endif // DALI_DEMO_GRID_EXAMPLE_H
--- /dev/null
+/*
+ * 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-toolkit/devel-api/controls/control-devel.h>
+#include <dali-toolkit/devel-api/layouting/absolute-layout.h>
+
+using namespace Dali;
+using namespace Dali::Toolkit;
+
+namespace LayoutUtilities
+{
+Toolkit::Control CreateRootContainer()
+{
+ Control rootLayoutControl = Control::New();
+ rootLayoutControl.SetName( "AbsoluteLayout");
+ auto rootLayout = AbsoluteLayout::New();
+ DevelControl::SetLayout( rootLayoutControl, rootLayout );
+ rootLayoutControl.SetAnchorPoint( AnchorPoint::CENTER );
+ rootLayoutControl.SetParentOrigin( ParentOrigin::CENTER );
+
+ return rootLayoutControl;
+}
+
+} // namespace LayoutUtilities
\ No newline at end of file
--- /dev/null
+/*
+ * 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.
+ *
+ */
+
+#ifndef DALI_DEMO_LAYOUT_UTILITIES_H
+#define DALI_DEMO_LAYOUT_UTILITIES_H
+
+#include <dali-toolkit/public-api/controls/control.h>
+
+namespace LayoutUtilities
+{
+/**
+ * @brief
+ * 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.
+ * @return resulting root layout
+ */
+Dali::Toolkit::Control CreateRootContainer();
+} // namespace LayoutUtilities
+
+#endif // DALI_DEMO_LAYOUT_UTILITIES_H
\ No newline at end of file
#include "linear-example.h"
#include "padding-example.h"
#include "flex-example.h"
+#include "grid-example.h"
#include "example.h"
#include "absolute-example.h"
const char* BACKGROUND_IMAGE( DEMO_IMAGE_DIR "lake_front.jpg" );
const char* TOOLBAR_IMAGE( DEMO_IMAGE_DIR "top-bar.png" );
-const char* APPLICATION_TITLE( "Layout Tester" );
-
typedef std::unique_ptr< Demo::Example > ExamplePointer;
+
typedef std::vector< ExamplePointer > ExampleContainer;
/// All layouting examples to be shown should be added to this method
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 ) );
+ 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) ) ;
+ container.push_back( ExamplePointer(new Demo::GridExample) ) ;
}
} // anonymous namespace
stage.Add( toolbar );
- auto title = TextLabel::New( APPLICATION_TITLE );
- title.SetParentOrigin( ParentOrigin::CENTER );
- title.SetAnchorPoint( AnchorPoint::CENTER );
- title.SetProperty( TextLabel::Property::TEXT_COLOR, Color::BLUE );
- title.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::LEFT );
- toolbar.Add( title );
+ mToolbarTitle = TextLabel::New( "");
+ mToolbarTitle.SetParentOrigin( ParentOrigin::CENTER );
+ mToolbarTitle.SetAnchorPoint( AnchorPoint::CENTER );
+ mToolbarTitle.SetProperty( TextLabel::Property::TEXT_COLOR, Color::BLUE );
+ mToolbarTitle.SetProperty( TextLabel::Property::HORIZONTAL_ALIGNMENT, HorizontalAlignment::LEFT );
+ toolbar.Add( mToolbarTitle );
mNextLayout = PushButton::New();
mNextLayout.SetProperty( Toolkit::Button::Property::LABEL, "change layout");
if( ! mLayoutingExamples.empty() )
{
mLayoutingExamples[ mLayoutIndex ]->Create();
+ mToolbarTitle.SetProperty(Toolkit::TextLabel::Property::TEXT, mLayoutingExamples[ mLayoutIndex ]->GetExampleTitle() );
}
}
mLayoutingExamples[ mLayoutIndex ]->Remove();
mLayoutIndex = ( mLayoutIndex + 1 ) % mLayoutingExamples.size();
mLayoutingExamples[ mLayoutIndex ]->Create();
+ mToolbarTitle.SetProperty(Toolkit::TextLabel::Property::TEXT, mLayoutingExamples[ mLayoutIndex ]->Example::GetExampleTitle() );
}
return true;
}
ExampleContainer mLayoutingExamples;
PushButton mNextLayout;
unsigned int mLayoutIndex;
+ TextLabel mToolbarTitle;
};
int DALI_EXPORT_API main( int argc, char **argv )
namespace
{
+const char* const TITLE = "Linear Example";
// Button file names
const char* LTR_IMAGE( DEMO_IMAGE_DIR "icon-play.png" );
{
LinearExample::LinearExample()
-: mLTRDirection(true)
+: Example( TITLE ),
+ mLTRDirection(true)
{
}
#include <string>
#include "padding-example.h"
+#include "layout-utilities.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>
namespace
{
+const char* const TITLE = "Padding Example";
// Helper function to create ImageViews with given filename and size.
void CreateChildImageView( ImageView& imageView, const char* filename, Size size )
namespace Demo
{
+PaddingExample::PaddingExample()
+: Example( TITLE )
+{}
+
void PaddingExample::Create()
{
// The Init signal is received once (only) during the Application lifetime
- // 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 );
+
+ Control rootLayoutControl = LayoutUtilities::CreateRootContainer();
stage.Add( rootLayoutControl );
// Create a table view to show a pair of buttons above each image.
static const unsigned int NUMBER_OF_IMAGE_VIEWS = 3;
+ // Constructor
+ PaddingExample();
+
// Create a Linear layout of ImagesViews, one with a Margin, One with padding.
void Create() override;
projects / platform / core / uifw / dali-demo.git / commitdiff