2 * Copyright (c) 2020 Samsung Electronics Co., Ltd.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
18 #include <dali-toolkit/dali-toolkit.h>
19 #include <dali-toolkit/devel-api/controls/table-view/table-view.h>
20 #include <dali/dali.h>
21 #include "shared/view.h"
25 // Define this so that it is interchangeable
26 // "DP" stands for Device independent Pixels
31 const char* const BACKGROUND_IMAGE = DEMO_IMAGE_DIR "background-gradient.jpg";
32 const char* const TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png";
34 const char* const TOOLBAR_TITLE = "Buttons";
36 const char* const SMALL_IMAGE_1 = DEMO_IMAGE_DIR "gallery-small-14.jpg";
37 const char* const BIG_IMAGE_1 = DEMO_IMAGE_DIR "gallery-large-4.jpg";
39 const char* const SMALL_IMAGE_2 = DEMO_IMAGE_DIR "gallery-small-20.jpg";
40 const char* const BIG_IMAGE_2 = DEMO_IMAGE_DIR "gallery-large-11.jpg";
42 const char* const SMALL_IMAGE_3 = DEMO_IMAGE_DIR "gallery-small-25.jpg";
43 const char* const BIG_IMAGE_3 = DEMO_IMAGE_DIR "gallery-large-13.jpg";
45 const char* const ENABLED_IMAGE = DEMO_IMAGE_DIR "item-select-check.png";
47 const Vector4 BACKGROUND_COLOUR(1.0f, 1.0f, 1.0f, 0.15f);
50 const int RADIO_LABEL_THUMBNAIL_SIZE = 60;
51 const int RADIO_LABEL_THUMBNAIL_SIZE_SMALL = 40;
52 const int RADIO_IMAGE_SPACING = 8;
53 const int BUTTON_HEIGHT = 48;
55 const int MARGIN_SIZE = 10;
56 const int TOP_MARGIN = 85;
57 const int GROUP2_HEIGHT = 238;
58 const int GROUP1_HEIGHT = 120;
59 const int GROUP3_HEIGHT = 190;
60 const int GROUP4_HEIGHT = BUTTON_HEIGHT + MARGIN_SIZE * 2;
64 /** This example shows how to create and use different buttons.
66 * 1. First group of radio buttons with image actor labels selects an image to load
67 * 2. A push button loads the selected thumbnail image into the larger image pane
68 * 3. Second group of radio buttons with a table view label containing a text view and image view, and a normal text view.
69 * Selecting one of these will enable/disable the image loading push button
70 * 4. A group of check boxes
72 class ButtonsController : public ConnectionTracker
75 ButtonsController(Application& application)
76 : mApplication(application)
78 // Connect to the Application's Init signal
79 mApplication.InitSignal().Connect(this, &ButtonsController::Create);
87 void Create(Application& application)
89 // The Init signal is received once (only) during the Application lifetime
91 // Respond to key events
92 application.GetWindow().KeyEventSignal().Connect(this, &ButtonsController::OnKeyEvent);
94 // Creates a default view with a default tool bar.
95 // The view is added to the window.
96 mContentLayer = DemoHelper::CreateView(application,
103 Toolkit::TableView contentTable = Toolkit::TableView::New(4, 1);
104 contentTable.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
105 contentTable.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
106 contentTable.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
107 contentTable.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
108 contentTable.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE * 0.5f));
110 for(unsigned int i = 0; i < contentTable.GetRows(); ++i)
112 contentTable.SetFitHeight(i);
115 contentTable.SetProperty(Actor::Property::POSITION, Vector2(0.0f, TOP_MARGIN));
117 mContentLayer.Add(contentTable);
119 // Image selector radio group
120 Toolkit::TableView radioGroup2Background = Toolkit::TableView::New(2, 2);
121 radioGroup2Background.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
122 radioGroup2Background.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
123 radioGroup2Background.SetBackgroundColor(BACKGROUND_COLOUR);
124 radioGroup2Background.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE));
125 radioGroup2Background.SetFitHeight(0);
126 radioGroup2Background.SetFitHeight(1);
127 radioGroup2Background.SetFitWidth(0);
129 contentTable.Add(radioGroup2Background);
131 Toolkit::TableView radioButtonsGroup2 = Toolkit::TableView::New(3, 1);
132 radioButtonsGroup2.SetCellPadding(Size(0.0f, MARGIN_SIZE * 0.5f));
133 radioButtonsGroup2.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
134 for(unsigned int i = 0; i < radioButtonsGroup2.GetRows(); ++i)
136 radioButtonsGroup2.SetFitHeight(i);
138 radioButtonsGroup2.SetFitWidth(0);
140 radioGroup2Background.AddChild(radioButtonsGroup2, Toolkit::TableView::CellPosition(0, 0));
142 // TableView to lay out 3x Radio buttons on the left, and 3x Image thumbnails on the right.
143 Toolkit::TableView imageSelectTableView = Toolkit::TableView::New(3, 2);
144 imageSelectTableView.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
145 imageSelectTableView.SetFitHeight(0);
146 imageSelectTableView.SetFitHeight(1);
147 imageSelectTableView.SetFitHeight(2);
148 imageSelectTableView.SetFitWidth(0);
149 imageSelectTableView.SetFitWidth(1);
150 imageSelectTableView.SetCellPadding(Vector2(6.0f, 0.0f));
152 radioButtonsGroup2.Add(imageSelectTableView);
158 Toolkit::ImageView image = Toolkit::ImageView::New(SMALL_IMAGE_1);
159 image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
161 mRadioButtonImage1 = Dali::Toolkit::RadioButton::New("1");
162 mRadioButtonImage1.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
163 mRadioButtonImage1.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
164 mRadioButtonImage1.SetProperty(Actor::Property::POSITION, Vector2(0, DP(radioY)));
165 mRadioButtonImage1.SetProperty(Toolkit::Button::Property::SELECTED, true);
167 imageSelectTableView.AddChild(mRadioButtonImage1, Toolkit::TableView::CellPosition(0, 0));
168 imageSelectTableView.AddChild(image, Toolkit::TableView::CellPosition(0, 1));
173 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
175 Toolkit::ImageView image = Toolkit::ImageView::New(SMALL_IMAGE_2);
176 image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
178 mRadioButtonImage2 = Dali::Toolkit::RadioButton::New("2");
179 mRadioButtonImage2.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
180 mRadioButtonImage2.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
181 mRadioButtonImage2.SetProperty(Actor::Property::POSITION, Vector2(0, DP(radioY)));
183 imageSelectTableView.AddChild(mRadioButtonImage2, Toolkit::TableView::CellPosition(1, 0));
184 imageSelectTableView.AddChild(image, Toolkit::TableView::CellPosition(1, 1));
189 radioY += RADIO_LABEL_THUMBNAIL_SIZE + RADIO_IMAGE_SPACING;
191 Toolkit::ImageView image = Toolkit::ImageView::New(SMALL_IMAGE_3);
192 image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
194 mRadioButtonImage3 = Dali::Toolkit::RadioButton::New("3");
195 mRadioButtonImage3.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
196 mRadioButtonImage3.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
197 mRadioButtonImage3.SetProperty(Actor::Property::POSITION, Vector2(0, DP(radioY)));
199 imageSelectTableView.AddChild(mRadioButtonImage3, Toolkit::TableView::CellPosition(2, 0));
200 imageSelectTableView.AddChild(image, Toolkit::TableView::CellPosition(2, 1));
203 // Create select button
204 mUpdateButton = Toolkit::PushButton::New();
205 mUpdateButton.SetProperty(Toolkit::Button::Property::LABEL, "Select");
206 mUpdateButton.SetProperty(Dali::Actor::Property::NAME, "selectButton");
207 mUpdateButton.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
209 mUpdateButton.ClickedSignal().Connect(this, &ButtonsController::OnButtonClicked);
211 radioGroup2Background.AddChild(mUpdateButton, Toolkit::TableView::CellPosition(1, 0));
213 // ImageView to display selected image
214 mImage = Toolkit::ImageView::New(BIG_IMAGE_1);
215 mImage.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::ALL_DIMENSIONS);
216 mImage.SetProperty(Actor::Property::SIZE_SCALE_POLICY, SizeScalePolicy::FIT_WITH_ASPECT_RATIO);
217 radioGroup2Background.AddChild(mImage, Toolkit::TableView::CellPosition(0, 1, 2, 1));
219 // The enable/disable radio group
220 Toolkit::TableView radioGroup1Background = Toolkit::TableView::New(1, 1);
221 radioGroup1Background.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
222 radioGroup1Background.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
223 radioGroup1Background.SetBackgroundColor(BACKGROUND_COLOUR);
224 radioGroup1Background.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE));
225 radioGroup1Background.SetFitHeight(0);
227 contentTable.Add(radioGroup1Background);
230 Toolkit::TableView radioButtonsGroup1 = Toolkit::TableView::New(2, 1);
231 radioButtonsGroup1.SetCellPadding(Size(0.0f, MARGIN_SIZE * 0.5f));
232 radioButtonsGroup1.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
233 for(unsigned int i = 0; i < radioButtonsGroup1.GetRows(); ++i)
235 radioButtonsGroup1.SetFitHeight(i);
237 radioButtonsGroup1.SetFitWidth(0);
239 radioGroup1Background.Add(radioButtonsGroup1);
241 // TableView to lay out 2x Radio buttons on the left, and 1x Tick image on the right.
242 Toolkit::TableView tableView = Toolkit::TableView::New(2, 2);
243 tableView.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS);
244 tableView.SetFitHeight(0);
245 tableView.SetFitHeight(1);
246 tableView.SetFitWidth(0);
247 tableView.SetFitWidth(1);
249 Toolkit::TextLabel textLabel = Toolkit::TextLabel::New("Select enabled");
250 textLabel.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH);
251 textLabel.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT);
252 textLabel.SetProperty(Toolkit::TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER");
254 Toolkit::ImageView image = Toolkit::ImageView::New(ENABLED_IMAGE);
255 image.SetProperty(Actor::Property::SIZE, Vector2(DP(RADIO_LABEL_THUMBNAIL_SIZE), DP(RADIO_LABEL_THUMBNAIL_SIZE)));
256 image.SetProperty(Actor::Property::PADDING, Padding(DP(20.0f), 0.0f, 0.0f, 0.0f));
257 tableView.AddChild(image, Toolkit::TableView::CellPosition(0, 1));
259 radioButtonsGroup1.Add(tableView);
261 // First radio button
263 Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New("Select enabled");
264 radioButton.SetProperty(Dali::Actor::Property::NAME, "radioSelectEnable");
265 radioButton.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
266 radioButton.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
267 radioButton.SetProperty(Actor::Property::POSITION, Vector2(0, 0));
268 radioButton.SetProperty(Toolkit::Button::Property::SELECTED, true);
270 radioButton.StateChangedSignal().Connect(this, &ButtonsController::EnableSelectButton);
272 tableView.AddChild(radioButton, Toolkit::TableView::CellPosition(0, 0));
275 // Second radio button
277 Toolkit::RadioButton radioButton = Dali::Toolkit::RadioButton::New("Select disabled");
278 radioButton.SetProperty(Dali::Actor::Property::NAME, "radioSelectDisable");
279 radioButton.SetProperty(Actor::Property::PARENT_ORIGIN, ParentOrigin::TOP_LEFT);
280 radioButton.SetProperty(Actor::Property::ANCHOR_POINT, AnchorPoint::TOP_LEFT);
281 radioButton.SetProperty(Actor::Property::POSITION, Vector2(0, DP(50)));
283 radioButton.StateChangedSignal().Connect(this, &ButtonsController::EnableSelectButton);
285 tableView.AddChild(radioButton, Toolkit::TableView::CellPosition(1, 0));
289 Toolkit::TableView checkBoxBackground = Toolkit::TableView::New(3, 1);
290 checkBoxBackground.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
291 checkBoxBackground.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
292 checkBoxBackground.SetBackgroundColor(BACKGROUND_COLOUR);
293 checkBoxBackground.SetCellPadding(Size(MARGIN_SIZE / 2.0f, MARGIN_SIZE / 2.0f));
295 for(unsigned int i = 0; i < checkBoxBackground.GetRows(); ++i)
297 checkBoxBackground.SetFitHeight(i);
300 contentTable.Add(checkBoxBackground);
303 mCheckboxButton1 = Toolkit::CheckBoxButton::New();
304 mCheckboxButton1.SetProperty(Dali::Actor::Property::NAME, "checkbox1");
305 mCheckboxButton1.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox1 is unselected");
306 mCheckboxButton1.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
307 mCheckboxButton1.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
309 checkBoxBackground.Add(mCheckboxButton1);
313 mCheckboxButton2 = Toolkit::CheckBoxButton::New();
314 mCheckboxButton2.SetProperty(Dali::Actor::Property::NAME, "checkbox2");
315 mCheckboxButton2.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox2 is selected");
316 mCheckboxButton2.SetProperty(Toolkit::Button::Property::SELECTED, true);
317 mCheckboxButton2.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
318 mCheckboxButton2.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
320 checkBoxBackground.Add(mCheckboxButton2);
324 mCheckboxButton3 = Toolkit::CheckBoxButton::New();
325 mCheckboxButton3.SetProperty(Dali::Actor::Property::NAME, "checkbox3");
326 mCheckboxButton3.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox3 is unselected");
327 mCheckboxButton3.StateChangedSignal().Connect(this, &ButtonsController::OnCheckBoxesSelected);
328 mCheckboxButton3.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
330 checkBoxBackground.Add(mCheckboxButton3);
333 // Create togglabe button
334 Toolkit::TableView toggleBackground = Toolkit::TableView::New(3, 1);
335 toggleBackground.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
336 toggleBackground.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
337 toggleBackground.SetBackgroundColor(BACKGROUND_COLOUR);
338 toggleBackground.SetCellPadding(Size(MARGIN_SIZE, MARGIN_SIZE));
340 for(unsigned int i = 0; i < toggleBackground.GetRows(); ++i)
342 toggleBackground.SetFitHeight(i);
345 contentTable.Add(toggleBackground);
347 mToggleButton = Toolkit::PushButton::New();
348 mToggleButton.SetProperty(Toolkit::Button::Property::TOGGLABLE, true);
349 mToggleButton.SetProperty(Toolkit::Button::Property::LABEL, "Unselected");
350 mToggleButton.SetResizePolicy(ResizePolicy::FILL_TO_PARENT, Dimension::WIDTH);
351 mToggleButton.SetResizePolicy(ResizePolicy::USE_NATURAL_SIZE, Dimension::HEIGHT);
352 mToggleButton.StateChangedSignal().Connect(this, &ButtonsController::OnButtonSelected);
354 toggleBackground.Add(mToggleButton);
357 void OnKeyEvent(const KeyEvent& event)
359 if(event.GetState() == KeyEvent::DOWN)
361 if(IsKey(event, Dali::DALI_KEY_ESCAPE) || IsKey(event, Dali::DALI_KEY_BACK))
363 // Exit application when click back or escape.
369 bool OnButtonSelected(Toolkit::Button button)
371 Toolkit::PushButton pushButton = Toolkit::PushButton::DownCast(button);
374 bool isSelected = button.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>();
377 pushButton.SetProperty(Toolkit::Button::Property::LABEL, "Selected");
381 pushButton.SetProperty(Toolkit::Button::Property::LABEL, "Unselected");
388 bool EnableSelectButton(Toolkit::Button button)
390 bool isSelected = button.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>();
396 if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "radioSelectEnable")
398 mUpdateButton.SetProperty(Toolkit::Button::Property::DISABLED, false);
400 mRadioButtonImage1.SetProperty(Toolkit::Button::Property::DISABLED, false);
401 mRadioButtonImage2.SetProperty(Toolkit::Button::Property::DISABLED, false);
402 mRadioButtonImage3.SetProperty(Toolkit::Button::Property::DISABLED, false);
404 mCheckboxButton1.SetProperty(Toolkit::Button::Property::DISABLED, false);
405 mCheckboxButton2.SetProperty(Toolkit::Button::Property::DISABLED, false);
406 mCheckboxButton3.SetProperty(Toolkit::Button::Property::DISABLED, false);
408 mToggleButton.SetProperty(Toolkit::Button::Property::DISABLED, false);
410 else if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "radioSelectDisable")
412 mUpdateButton.SetProperty(Toolkit::Button::Property::DISABLED, true);
414 mRadioButtonImage1.SetProperty(Toolkit::Button::Property::DISABLED, true);
415 mRadioButtonImage2.SetProperty(Toolkit::Button::Property::DISABLED, true);
416 mRadioButtonImage3.SetProperty(Toolkit::Button::Property::DISABLED, true);
418 mCheckboxButton1.SetProperty(Toolkit::Button::Property::DISABLED, true);
419 mCheckboxButton2.SetProperty(Toolkit::Button::Property::DISABLED, true);
420 mCheckboxButton3.SetProperty(Toolkit::Button::Property::DISABLED, true);
422 mToggleButton.SetProperty(Toolkit::Button::Property::DISABLED, true);
428 bool OnButtonClicked(Toolkit::Button button)
430 if(mRadioButtonImage1.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>())
432 mImage.SetImage(BIG_IMAGE_1);
434 else if(mRadioButtonImage2.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>())
436 mImage.SetImage(BIG_IMAGE_2);
438 else if(mRadioButtonImage3.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>())
440 mImage.SetImage(BIG_IMAGE_3);
445 bool OnCheckBoxesSelected(Toolkit::Button button)
447 bool isSelected = button.GetProperty(Toolkit::Button::Property::SELECTED).Get<bool>();
448 if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "checkbox1")
452 button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox1 is selected");
456 button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox1 is unselected");
460 if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "checkbox2")
464 button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox2 is selected");
468 button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox2 is unselected");
472 if(button.GetProperty<std::string>(Dali::Actor::Property::NAME) == "checkbox3")
476 button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox3 is selected");
480 button.SetProperty(Toolkit::Button::Property::LABEL, "CheckBox3 is unselected");
488 Application& mApplication;
489 Toolkit::Control mView; ///< The View instance.
490 Toolkit::ToolBar mToolBar; ///< The View's Toolbar.
491 Layer mContentLayer; ///< Content layer
493 Toolkit::RadioButton mRadioButtonImage1;
494 Toolkit::RadioButton mRadioButtonImage2;
495 Toolkit::RadioButton mRadioButtonImage3;
497 Toolkit::PushButton mUpdateButton;
498 Toolkit::PushButton mToggleButton;
500 Toolkit::CheckBoxButton mCheckboxButton1;
501 Toolkit::CheckBoxButton mCheckboxButton2;
502 Toolkit::CheckBoxButton mCheckboxButton3;
504 Animation mAnimation;
506 Toolkit::ImageView mImage;
509 int DALI_EXPORT_API main(int argc, char** argv)
511 Application application = Application::New(&argc, &argv, DEMO_THEME_PATH);
512 ButtonsController test(application);
513 application.MainLoop();