Core

The Core Controls are a set of Controls, designed to provide a minimal core set of functionality. Therefore, the Core Controls also reduce their size and provide increased performance, by limiting its feature set and reducing the number 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 featured Control 

Please note, that the not all Controls have a Core Control variant, as it is not suitable for all available Controls.

IfCoreText

A simple UI element that displays specified text as a pagelabel. isThe createddisplayed forcontent extendedcan usagebe ofset using the Text property, and the font style can be adjusted using the Text Style property.

In the Core Control,version, aonly linkbasic totext formatting features and data binding are supported, while advanced functionalities such as multi-line display and text trimming settings are not included.

Properties

Property Name
Type
Description
Text String The Text that page will be added.set (Workitemto the Text Node. Text Color CGI1-76201Candera::Color -The Doc:color Coreof Controlsthe Advancedtext. usage) Text Style Candera::TextRendering::Style The Text that will be set to the Text Node.

 

CoreButton

TheDefines Buttonthe Control offers an easy way to define all differentbasic states of a button and anthe actionactions thatexecuted when clicked. The button's appearance is performeddetermined whenby clickingsetting it.different Theimages visualfor appearanceeach state. Additionally, text, icons, and other content can be configuredplaced with three images depending oninside the button's statebutton, and aspacing hoveredbetween colorthe thatcontent and the button can be definedadjusted. including an alpha value. AdditionallyHowever, the ButtonCore offersversion andoes Anchornot toinclude attachadvanced content.visual Thereforeeffects youor canfocus-related also set the padding of the Button and its content.features.

Properties

Property Name	Type	Description
Enabled	bool	If true,this option is set to false, the control is enabled. Otherwise the visual representation of the controlbutton will be changed to the disabled colors.and Alsowill disableno thelonger focusaccept to avoid receiving input.clicks.
Normal Image	9 Patch Image	The image which is used as Button Image for the colorbutton multiplication of other states like Hovered.image.
Pressed Image	9 Patch Image	The image which is used as Buttonthe Imagebutton ifimage when the pressed state applies.is applied.
Disabled Image	TBC	The button image todisplayed set onwhen the effect.button is disabled.
Padding	Candera::Margin	PaddingThe padding (margin) of the Button.button. Used when a content is attached.
Identifier	TBC	IdentifierThe which isidentifier used when emittingan anevent such as Click Event (e.g. Click Event).occurs.

CoreDigitalClock

Represents a digital clock, whereasdisplaying thetime time-values (hours, minutes, seconds) are rendered as text. AThe data-current time can be displayed using values bound value from the playerCGI canPanel. be used to represent the current time. The control offers properties to customize the clock, like showing the hours in 12h.

Represents a digital clock, whereas the time-values (hours, minutes, seconds)Properties are renderedalso as text. A data-bound value from the Player can be used to represent the current time. The control offers propertiesprovided to customize the clock ,display, likesuch showingas theswitching hoursbetween 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 color12-hour and text-style24-hour can be set.formats.

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	bool	If ture, shows AM or PM depending on time.
Hours Text Style	Candera::TextRendering::Style	The Style that will bestyle set tofor the Text“hour” Node.text.
Minutes Colon Text Style	Candera::TextRendering::Style	The Stylestyle that will be setapplied to the Textseparator Node.between the “hour” and “minute” text.
Minutes Text Style	Candera::TextRendering::Style	The Style that will bestyle set tofor the Text“minute” Node.text.
Seconds Text Style	Candera::TextRendering::Style	The Style that will bestyle set tofor the Text“second” Node.text.
AM PM Text Style	Candera::TextRendering::Style	The Style that will bestyle set tofor the TextAM/PM Node.text.
Hours Color	Candera::Color	The color to set onfor the effect.“hour” text.
Minutes Color	Candera::Color	The color to set onfor the effect.“minute” text.
Seconds Color	Candera::Color	The color to set onfor the effect.“second” text.
AM PM Color	Candera::Color	The color to set onfor the effect.AM/PM text.

CoreTextButton

TheDefines TextButtonthe Controlbasic offers an easy way to define all different statesbehavior of a button and anthe actionactions that is performedexecuted when clickingclicked. it. As forIn the simpleCore Button Control theversion, visual appearancecustomization offeatures theare TextButtonlimited, can also be configured with three images depending onand the button's stateappearance is determined by the specified image and atext. hoveredProperties colorare thatprovided to adjust the display and style of the text. The button's behavior when pressed can be definedeasily includingconfigured an alpha value. Additionallyusing 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.
EventHandler.

Properties

Property Name	Type	Description
Enabled	bool	If this option is set to falsefalse, itthe button will notbe react on focus eventsdisabled and doeswill notno havelonger toaccept support different visualizations for the different states.clicks.
Normal Image	Candera::Image2D	The image whichdisplayed when the button is usedin asits Buttonnormal Imagestate. for the color multiplication of other states like Hovered.
Pressed Image	Candera::Image2D	The image whichdisplayed when the button is used as Button Image if the pressed state applies.pressed.
Disabled Image	TBC	The image todisplayed set onwhen the effect.button is disabled.
Text	String	The Text that willto be setdisplayed toin the Text Node.button.
Text Style	Candera::TextRendering::Style	TheSet Stylethe thatstyle willof bethe used.text.
Text Color	Candera::Color	TheText colorto ofbe set in the text.text node.
Disabled Text Color	Candera::Color	TheText color towhen set on the effect of the Text.disabled.

CoreCheckBox

TheA CoreCheckBoxsimple providesUI differentelement that indicates the selection status. In the Core version, the normal and selected states (Enabled,can Disabled)be configured using a combination of text and theimages. currentThe value (true/false).

Use the Event Handler with a Value Changed Event to trigger an actionbehavior when the valuestate of this control changes can be set using the EventHandler.
Note that features related to Focus and Blend effects are not included.

Properties

Property Name
Type
Description Enabled
bool

If this option is set to false, the checkbox will not respond to clicks.

Value
bool/Variant
Specifies the initial selection state of the CheckBoxcheckbox changed to (true or= toselected, false.false = not selected). Text
String
The text of the checkbox. Text Style
Candera::TextRendering::Style The style set for the text node. Normal Image
Candera::Image2D The checkbox image displayed when in the normal state. Selected Image
Candera::Image2D The checkbox image displayed when in the selected state. Normal Disabled Image
Candera::Image2D

The CheckBoxcheckbox Controlimage candisplayed easilywhen bein configuredthe withinvalid astate.

text, images foraSelected normalDisabled andImage
aCandera::Image2D pressedThe stateimage as well as forof a selected andcheckbox ain selectedthe pressedinvalid state. Text Enabled Color Candera::Image2D The text color when in the valid state. Text Disabled Color Candera::Image2D The text color when in the invalid state.

CoreToggleButton

A simple UI element that toggles the button state. AdditionallyIt ais focusedtypically imageused to enable or disable specific functions. The structure is simple, allowing you to configure two images corresponding to the ON/OFF states of the toggle and their associated text. The behavior when the button is clicked can be defined. The action that is performed when the value changed can easily be definedset in the EventHandler Tab.tab. 
Note that features related to Focus and Blend effects are not included.

Properties

Property Name	Type	Description
Enabled	bool	If this option is set to falsedisabled, itthe toggle button will notbe react on focus eventsdisabled and doeswill notno havelonger toaccept supportclick different visualizations for the different states.operations.
Value	bool/Variant	SelectedSpecify orthe notinitial state of the toggle (true/false)true = enabled, false = disabled).
First Text	String	TextThe oftext that will be displayed when the CheckBox.toggle is set to On (the first toggle image).
Second Text Style	Candera::TextRendering::StyleString	The Styletext that will be displayed when the toggle is set to Off (the Textsecond Node.toggle image).
NormalFirst Image	Candera::Image2D	The image whichthat will be displayed when the toggle is usedset asto CheckBoxOn Image if (the normalfirst statetoggle applies.image).
SelectedSecond Image	Candera::Image2D	The image whichdisplayed when the toggle is used as CheckBox Image ifin the selectedOff state applies.(second toggle image).
Normal Disabled Image

Candera::Image2D

The image to set on the effect.

SelectedFirst Disabled Image
Candera::Image2D The image todisplayed set onwhen the effect.toggle is in the On state when it is disabled. Second Disabled Image
Candera::Image2D The image displayed when the toggle is in the Off state when it is disabled. Text Enabled Color Candera::Image2D The Colortext tocolor set.when it is enabled. Text Disabled Color Candera::Image2D The Colortext tocolor set.when it is disabled.

 

CoreToggleButtonCoreRadioButton

ToggleButtonA providessimple UI element that allows the currentuser valueto (true/false)select one option from multiple choices. In the Core version, the normal and interchangesselected itsstates bitmapscan be configured using a combination of text and textimages. dependingThe onbehavior when the value.

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 appearancestate of the ToggleButtonCoreRadioButton cancontrol also be configured with four images depending on the button's state and a hovered color thatchanges can be definedset including an alpha value. Additionallyusing the ToggleButtonEventHandler.

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 ToggleButtonCoreRadioButton is similar to the Button (when reacting on mouse clicks) or to the CheckBox (when reacting on a value change). Corresponding sample configurationthat of the EventCoreCheckBox, Handlerbut areit givenis indesigned theto Buttonallow sectiononly andone inselection theamong CheckBoxmultiple section.
options.

Properties

Property Name	Type	Description
Enabled	bool	If you set this option to falsedisabled, itthe radio buttons 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

Used in combination with other CoreRadioButtons within a GroupBox (RadioButtons have to be attached to the Anchor of the GroupBox). When a RadioButton gets selected the RadioButtons in the same GroupBox get deselected.

The RadioButton Control can easily be configured with a text, images for a normalwork 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 reactaccept on focus events and does not have to support different visualizations for the different states.clicks. Text
String
TextThe text of the RadioButton.radio buttons. TextStyle
Candera::TextRendering::Style The Style that will be set toSet the Textstyle Node.of the text. Normal Image
Candera::Image2D The image whichof isthe usedradio asbuttons RadioButtondisplayed Image ifin the normal state applies.state. Selected Image
Candera::Image2D The image which is used as RadioButton Image ifof the selectedradio statebuttons applies.displayed when selected. Normal Disabled Image
Candera::Image2D

The image to set onof the effect.normal radio buttons in the disabled state.

Selected Disabled Image
Candera::Image2D The image to set onof the effect.selected radio buttons in the disabled state. Text Enabled Color Candera::Image2D The Colorcolor toof set.the text in the enabled state. Text Disabled Color Candera::Image2D The Colorcolor toof set.the text in the disabled state. Selected
bool/Variant
SpecifiesSpecify the type and the value to pass ontoto the Process Value Behavior.behavior.

CoreTextValue

UsesGenerates a formatted string by combining Value and aFormat TextText. asIt formatsupports string.formatting Resultnumbers isand thetext 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.

Usesin a Valuemanner andsimilar a Text as format string. Result isto the formatted string. See C++ printf() function. The value can be set directly or bymodified anthrough event.events. EventEvents input can beare provided bythrough e.g.behaviors thethat Send Value as Event Behaviorsend or thetransfer Forward Value Behavior.values.

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 Stylestyle thatof willthe text to be used.
Text Color	Candera::Color	TheSpecify the color whichof canthe be used from other Behaviors.text.

CoreMultiStateButton

TheA MultiStateButtonUI provideselement athat valueallows for the numbereasy definition of buttons with multiple states. Each click increases this value (value cycles when reachingchanges the maximum).state, Thisand once the maximum value is alsoreached, responsibleit forloops which of the attached images is currently representing the Button.

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. Similarback to the TextButtoninitial alsostate. The corresponding image is selected based on the MultistateButtonbutton's offersstate, aand TextNodethe whichdisplayed text can also be modified viausing the Text and the Text Style properties.property. The functionalitybehavior of the MultiStateButton can be editedset in the BehaviorsEventHandler, paneland or in the EventHandler Tab (see also chapter EventHandler Tab). An EventHandler that checks for the Value Changed Event will perform the user defined actionactions corresponding to the current value.state Thiscan functionalitybe isexecuted similar tousing the CheckBoxProcess (whenValue reacting on a value change). A corresponding sample configuration of theChanged Event Handler is given in the CheckBox section.behavior.

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

The CoreScrollView defines an area that allows to place arbitrary content in it. The main functionality of the ScrollView is to clip this content if it is outside of the layout-size of the control. Additionally a ScrollBar will appear for each axis where the content is too large for the size that it got by the layout.

There are properties available for the ScrollBars that can change this visibility behavior.

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.