Core

Description

~~Here,~~The ~~provide~~Core anControls ~~explanation~~are a set of Controls, designed following the ~~purpose~~minimal viable product approach. The Core Controls aim to reduce their sizes and increasing their performance, by limiting its feature set and reducing the set of used behaviors.

The Core Controls are designed for

Low-End Platforms: low memory footprint and increased performance by reduced feature set Basis for custom Controls: as the Core Controls cover basic features, it is easy possible to extend them for custom behavior (e.g. a specific custom behavior for a custom button) instead of stripping down a full features Control

Please note, that the not all Controls have a Core Control ~~(compared to standard controls).~~

~~For example:~~

~~What kind of use cases are envisioned?~~ ~~Differences from standard controls,~~variant, as ~~well~~it asis ~~Core~~not ~~Control~~suitable ~~advantages~~for ~~and~~all ~~disadvantages.~~available Controls.

If a page is created for extended usage of Core Control, a link to that page will be added. (Workitem CGI1-76201 - Doc: Core Controls Advanced usage)

Explanation

CoreButton

The Button Control offers an easy way to define all different states of a button and an action that is performed when clicking it. The visual appearance can be configured with three images depending on the button's state and a hovered color that can be defined including an alpha value. Additionally the Button offers an Anchor to attach content. Therefore you can also set the padding of the Button and its content.

Properties

Property Name	Type	Description
Enabled	bool	If true, the control is enabled. Otherwise the visual representation of the control will be changed to the disabled colors. Also disable the focus to avoid receiving input.
Normal Image	9 Patch Image	The image which is used as Button Image for the color multiplication of other states like Hovered.
Pressed Image	9 Patch Image	The image which is used as Button Image if the pressed state applies.
Disabled Image		The image to set on the effect.
Padding	Candera::Margin	Padding of the Button. Used when a content is attached.
Identifier		Identifier which is used when emitting an Event (e.g. Click Event).

CoreDigitalClock

Represents a digital clock, whereas the time-values (hours, minutes, seconds) are rendered as text. A data-bound value from the Player can be used to represent the current time. The control offers properties to customize the clock , like showing the hours in 12h or 24h. To see how to use the data-binding in combination with the clock please see GettingStartedControls Part 4

The remaining properties are there to customize the visual representation of the digital clock. For every text-node a color and text-style can be set.

Properties

Property Name	Type	Description
Time	Variant	Specifies the type and the value to pass onto Process Value Behavior.
AM Text	String	The string of the AM label.
PM Text	String	The string of the PM label.
Show Seconds	bool	If true, seconds will be shown.
Show AM PM		If ture, shows AM or PM depending on time.
Hours Text Style	Candera::TextRendering::Style	The Style that will be set to the Text Node.
Minutes Colon Text Style	Candera::TextRendering::Style	The Style that will be set to the Text Node.
Minutes Text Style	Candera::TextRendering::Style	The Style that will be set to the Text Node.
Seconds Text Style	Candera::TextRendering::Style	The Style that will be set to the Text Node.
AM PM Text Style	Candera::TextRendering::Style	The Style that will be set to the Text Node.
Hours Color	Candera::Color	The color to set on the effect.
Minutes Color	Candera::Color	The color to set on the effect.
Seconds Color	Candera::Color	The color to set on the effect.
AM PM Color	Candera::Color	The color to set on the effect.

CoreTextButton

The TextButton Control offers an easy way to define all different states of a button and an action that is performed when clicking it. As for the simple Button Control the visual appearance of the TextButton can also be configured with three images depending on the button's state and a hovered color that can be defined including an alpha value. Additionally the TextButton offers a predefined TextNode which can be modified via the Text and the Text Style properties. The action that is performed when pressing the TextButton can easily be defined in the EventHandler Tab. The functionality of the TextButton is similar to the Button. An example configuration of the Event Handler is given in the Button section.

Properties

Property Name	Type	Description
Enabled	bool	If set to false it will not react on focus events and does not have to support different visualizations for the different states.
Normal Image	Candera::Image2D	The image which is used as Button Image for the color multiplication of other states like Hovered.
Pressed Image	Candera::Image2D	The image which is used as Button Image if the pressed state applies.
Disabled Image		The image to set on the effect.
Text	String	The Text that will be set to the Text Node.
Text Style	Candera::TextRendering::Style	The Style that will be used.
Text Color	Candera::Color	The color of the text.
Disabled Text Color	Candera::Color	The color to set on the effect of the Text.

CoreCheckBox

The CheckBox Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state. Additionally a focused image can be defined. The action that is performed when the value changed can easily be defined in the EventHandler Tab.

Properties

Property Name	Type	Description
Enabled	bool	If set to false it will not react on focus events and does not have to support different visualizations for the different states.
Value	bool/Variant	Selected or not (true/false).
Text	String	Text of the CheckBox.
Text Style	Candera::TextRendering::Style	The Style that will be set to the Text Node.
Normal Image	Candera::Image2D	The image which is used as CheckBox Image if the normal state applies.
Selected Image	Candera::Image2D	The image which is used as CheckBox Image if the selected state applies.
Normal Disabled Image	Candera::Image2D	The image to set on the effect.
Selected Disabled Image	Candera::Image2D	The image to set on the effect.
Text Enabled Color	Candera::Image2D	The Color to set.
Text Disabled Color	Candera::Image2D	The Color to set.

CoreToggleButton

The ToggleButton Control offers an easy way to define all different states of a toggle button and an action that is performed when clicking it. It is typically used for activating and deactivating a persisting functionality. As for the simple Button Control the visual appearance of the ToggleButton can also be configured with four images depending on the button's state and a hovered color that can be defined including an alpha value. Additionally the ToggleButton offers two predefined TextNode that can be modified via the First Text and the Second Text properties. The action that is performed when pressing the ToggleButton can easily be defined in the EventHandler Tab. The functionality of the ToggleButton is similar to the Button (when reacting on mouse clicks) or to the CheckBox (when reacting on a value change). Corresponding sample configuration of the Event Handler are given in the Button section and in the CheckBox section.

Properties

Property Name	Type	Description
Enabled	bool	If set to false it will not react on focus events an
Value	bool/Variant	Toggled or not (true/false).
First Text	String	The Text that will be set with the first toggle image.
Second Text	String	The Text that will be set with the second toggle image.
First Image	Candera::Image2D	The image which is used as ToggleButton Image if the first state applies.
Second Image	Candera::Image2D	The image which is used as ToggleButton Image if the second toggle state applies.
First Disabled Image	Candera::Image2D	The image which is used as ToggleButton Image if the first toggle image is pressed.
Second Disabled Image	Candera::Image2D	The image which is used as ToggleButton Image if the second toggle image is pressed.
Text Enabled Color	Candera::Image2D	The Color to set.
Text Disabled Color	Candera::Image2D	The Color to set.

CoreRadioButton

The RadioButton Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state. Additionally a focused image can be defined. The action that is performed when the value changed can easily be defined in the EventHandler Tab.

The functionality of the RadioButton is similar to the CheckBox (when reacting on a value change). A corresponding sample configuration of the Event Handler is given in the CheckBox section.

Properties

Property Name	Type	Description
Enabled	bool	If set to false it will not react on focus events and does not have to support different visualizations for the different states.
Text	String	Text of the RadioButton.
TextStyle	Candera::TextRendering::Style	The Style that will be set to the Text Node.
Normal Image	Candera::Image2D	The image which is used as RadioButton Image if the normal state applies.
Selected Image	Candera::Image2D	The image which is used as RadioButton Image if the selected state applies.
Normal Disabled Image	Candera::Image2D	The image to set on the effect.
Selected Disabled Image	Candera::Image2D	The image to set on the effect.
Text Enabled Color	Candera::Image2D	The Color to set.
Text Disabled Color	Candera::Image2D	The Color to set.
Selected	bool/Variant	Specifies the type and the value to pass onto Process Value Behavior.

CoreTextValue

Uses a Value and a Text as format string. Result is the formatted string. See C++ printf() function. The value can be set directly or by an event. Event input can be provided by e.g. the Send Value as Event Behavior or the Forward Value Behavior.

Properties

Property Name	Type	Description
Value	Variant	The value to be formatted
Format Text	String	The format string which includes one format specifier (beginning with %). See C printf() function.
Style	Candera::TextRendering::Style	The Style that will be used.
Text Color	Candera::Color	The color which can be used from other Behaviors.

CoreMultiStateButton

The MultiStateButton Control offers an easy way to define all different states of a button. Additionally the MultiStateButton provides a value for the number of different representations (images). Each click increases this value (value cycles when reaching the maximum). Corresponding to this value the current image of the Button will be chosen out of an array of images. Similar to the TextButton also the MultistateButton offers a TextNode which can be modified via the Text and the Text Style properties. The functionality of the MultiStateButton can be edited in the Behaviors panel or in the EventHandler Tab (see also chapter EventHandler Tab). An EventHandler that checks for the Value Changed Event will perform the user defined action corresponding to the current value. This functionality is similar to the CheckBox (when reacting on a value change). A corresponding sample configuration of the Event Handler is given in the CheckBox section.

Properties

Property Name	Type	Description
Current State	Variant	Current state of the MultiStateButton (starts with 0).
Maximum State	bool/Variant	Maximum value of MultiStateButton (starts with 0).

CoreDial

A dial is used to set a value within a specified range or to select between different options which are represented by the value of the dial. The control knob changes the value when the user touches and turns it. The degree of rotation corresponds to the desired value change. The dial snaps into its predefined positions defined by its step size.

The below figure shows an example using a 3-step rotation, with a Minimum Rotation of -45 degrees, Maximum Rotation of +45 degrees, and Step Size of 45 degrees. In this example, BackgroundImages 0 is displayed corresponding to Current Value = 0. Similarly, Current Value = 1 displays BackgroundImages 1 and Current Value = 2 displays BackgroundImages 2.

For a 5-step rotation with a Minimum Rotation of -90 degrees, Maximum Rotation of +90 degrees, and Step Size of 45 degrees, you will need to set 5 BackgroundImages.

The rotary knob supports events. If it receives an event of value change (ValueChangeEvent), the knob will be set accordingly. When the control is focused it is possible to control it using the keyboard (up/down arrow).

Properties

Property Name	Type	Description
Enabled	bool	If set to false it will not react on focus events and does not have to support different visualizations for the different states.
Current Value	FeatStd::Int32	Current value for the dial.
Step Size	FeatStd::Float	Step size in degrees.
Minimum Rotation	FeatStd::Float	Minimum rotation of the dial.
Maximum Rotation	FeatStd::Float	Maximum rotation of the dial.
Knob Image	Candera::Image2D	The image to set on the effect.
BackgroundImages	Candera::Image2D	A list of images which should be available for selection.
Disabled Color	Candera::Color	The color which can be used from other Behaviors.
Hovered Color	Candera::Color	The color which can be used from other Behaviors.
Increment Key Code	Candera::KeyboardKeyCode::Enum	Check the KeyCode of the pressed key (can also be modifier).
Decrement Key Code	Candera::KeyboardKeyCode::Enum	Check the KeyCode of the pressed key (can also be modifier).

CoreScrollView

Similar to the List the ScrollView offers an Anchor where any node (also Controls) can be attached to.

The size of the ScrollView can be set using the Layout of the Control. If the size of the attached nodes is bigger than the layout size of the ScrollView, Scrollbars will appear. In difference to the List the ScrollView doesn't layout the attached nodes. So Controls and other nodes can be placed at any position. (Also the hierarchy doesn't matter which means that an additional Layouter or GroupBox can be added.)

Properties

Property Name	Type	Description
Vertical Scrollbar Visibility	ScrollbarVisibility::Enum (Automatic, Collapsed, Visible)	Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.
Horizontal Scrollbar Visibility	ScrollbarVisibility::Enum (Automatic, Collapsed, Visible)	Configure the visibility of the scrollbar. By default it is set to Automatic which will determine the visibility based on the actual content.