GettingStartedControls Part 3

be

---

shown. 

(Phone Connection) Options Scene

As basis for step 3 of our GettingStartedControls tutorial, please use your own created solution from the previous "GettingStartedControls" tutorial.

OurAnd this is what the final scene will look like this:like:

Our

---

goal

Preparing is to create a Phone Connectionthe Options scene

with

A ascene Dialwill Controlbe created and athe List with a Sub-List Control, thatcamera will appearbe and disappear when an itemconfigured in the ListRender isTargets clicked.panel.

Create a new scene usingvia the Scenemenu menu's"Scene" - "New 2D Scene…Scene" or press < Ctrl+2 > on your keyboard

The "Add menuNew item.Scene

Name

In the newfirst scenerow select "/Scenes" from the drop-down menu. Enter "SceneOptions" as name and press [ OK ]. We always use the prefix "Scene" to have all scenes listed nearnext to each other in the Solution Explorer view.panel.

A new scene "SceneOptions" is created and visible in the Solution Explorer panel in folder "Scenes". The new scene is opened in the Scene Editor and in the Scene Tree panel. In the Scene Tree panel you can see that the scene already has a camera. In the Render Targets panel you can see that the camera is already added to the RenderTarget. In the Render Targets panel check the checkbox of "SceneOptions\Camera" in order to enable rendering.

Rendering of the scene is enabled. In the Render Targets panel select the SceneOptions\Camera. In the Properties panel's [ Camera ] section change the sequence number to 2.

The camera's sequence number is set to 2. In the Scene Tree panel the red Information/Warning/Error square disappears.

Importing Images

This scene uses the built-in Scene Composer controls but they will be customized with new images. Therefore these images have to be imported into the Scene Composer solution.

Configuring the Background

TheThis scene is nowcomposed createdof two parts: Connection and alreadyDevices. openedFor insideeach of these parts a 2D Group node will be created. To position the background image a BimapNode will be configured with one of the images imported in the previous section.

From the Toolbox panel's [ Node 2D ] section drag a 2D Group node into the Scene Tree panel.directly Itonto alreadythe containsnode "SceneOptions".

In the Scene Tree panel you can see a standard2D camera.Group Thenode. Viewport size From the Toolbox panel's [ Node 2D ] section drag a BitmapNodes onto the 2D Group node.

In the Scene Tree panel you can see that a BitmapNodes has been created. In the Scene Tree panel select the 2D Group and create a copy either via the context menu entries "Copy" and "Paste" or via the keyboard <Ctrl>+C and <Ctrl>+V.

A copy of the camera2D followsGroup with its BitmapNode has been created. In Scene Tree panel the sizename of the Rendercopy is "Group_1". In the Scene Tree panel select the nodes added in the steps before one after the other and rename them either via the context menu entry "Rename" or by pressing <F2> on your keyboard. Apply the names provided in the table below.

In the Scene Tree panel you can see that the nodes have been renamed. Target (1024x768)Item Name
Group
Connection   BitmapNode Background Group_1
Devices   BitmapNode Background In the Scene Tree panel select both BitmapNodes called "Background". TheThis new scene's camera should automaticallycan be connectedachieved by selecting one BitmapNode, holding down the <Ctrl> key and keeping it pressed while clicking on the second BitmapNode. In Scene Tree panel's right side select the "BitmapBrushBlend" effect. In the Properties panel's [ Effect ] section click on the magnifying glass icon next to the RenderImage Target.property. If

itIn isn't,the pleaseProperties panel you can now edit the BitmapBrushBlend effect for both BitmapNodes. The "Choose Item" dialog will be opened.
In the "Choose Item" dialog select the image as in the table below and click [ OK ].

The Choose Item dialog will be closed. In the Scene Editor a background image is visible displaying a vertical grey-black gradient. Property
Path
Image
/Resources/Options/ConnectionOptionsENBOSBmp

In the Scene Tree panel select the "Connection" group. In the Properties panel's [ Transformations ] section adjust the "Position" property according to the table below. Repeat this step with the "Devices" group.

In Scene Editor two rectangles with a gradient background are visible. Target Name
Position X
Position Y

Connection

78.00
58.00

Devices

551.00
58.00

Configuration of the "Connection" Nodes

The left side of the scene offers the possibility to choose the connection type. The Scene Composer's built-in Dial control will be customized with new images that fit to the scene's design. TextNodes will be added as labels.

Creation and Positioning of the Dial Control

From the Toolbox panel's [ Controls ] section under Touchable drag a Dial control into the CameraScene Tree panel directly onto the default"Connection" RenderTargetgroup.

In the Scene Tree panel a Dial control has been added into the "Connection" group. In the Scene Editor the Dial control is visible in the Rendertop Targetsleft panel.corner Changeof the Sequenceleft Numbergradient image. In the Scene Tree panel select the Dial control. In the Properties panel's [ Transformation ] section adjust its position according to the table below.

In the Scene Editor the Dial control is positioned in the lower center of the gradient image. Target Name
Position X
Position Y

Dial

72.00
163.00

Configuration of the Dial Control

The following steps show how to configure the Dial control with new images.

In the Properties panel's [ Control ] section click on the magnifying glass icon next to property "Knob Image".

The "Choose Item" dialog will be opened. In the "Choose Item" dialog select the image as in the table below and click [ OK ].

The Choose Item dialog will be closed. In the Scene Editor an orange ring will become visible. Property
Path
Knob Image
/Resources/Options/NewDial_arrow_middleBmp In the Properties panel's [ Control ] section click on the the "BackgroundImages" section.

In the Properties panel the "BackgroundImages" section will be expanded. In the Properties panel click on the magnifying glass next to "BackgroundImages 0".

The "Choose Item" dialog will be opened. In the Choose Item dialog navigate to "/Resources/Options/NewDial_background_leftBmp", select this image and click [ OK ].

In the Properties panel the first BackgroundImage has been configured. Repeat steps 4 and 5 to configure the remaining BackgroundImages as in the table below.

In Properties panel all BackgroundImages are configured. In Scene Editor you can see the newly configured images.

If the new images are not visible try refreshing the screen by pressing the <F5> key on your keyboard.

StateImages
Image Path
BackgroundImages 0 /Resources/Options/NewDial_background_leftBmp BackgroundImages 1
/Resources/Options/NewDial_background_middleBmp BackgroundImages 2
/Resources/Options/NewDial_background_rightBmp In the Solution Explorer panel select the new Knob Image "/Resources/Options/NewDial_arrow_middleBmp". In the Properties panel's [ Bitmap ] section enable "Pivot Hint" by checking the respective checkbox.

A new property "Pivot Hint" becomes visible. Configure the "Pivot Hint" as in the table below.

The Pivot Hint for the Knob Image is configured correctly. In the Solution Explorer select the three images that were configured as BackgroundImages. In the Properties panel proceed similar to steps 10 and 11, enabling and configuring the Pivot Hint of these three images according to the table below.

The Pivot Hint is configured correctly. In Scene Editor the Dial's images are neatly aligned. The images have a common center.

If the the images are still not aligned correctly try refreshing the screen by pressing the <F5> key on your keyboard.

Target Name
Enable Pivot Hint Pivot Hint X
Pivot Hint Y
NewDial_arrow_middleBmp true 84,50

88,00

NewDial_background_leftBmp true
130,50
130,50 NewDial_background_middleBmp true
130,50 130,50 NewDial_Background_rightBmp true
130,50 130,50

Adding TextNodes as Connection Labels

TextNodes will be configured with an attractive font and positioned as labels for choosing the connection type.

From the Toolbox panel's [ Nodes 2D ] drag and drop a TextNode into the Scene Tree panel directly onto the "Connection" group node.

In the Scene Tree panel a TextNode will become visible. In the Scene Editor the text "Text" will appear.

If the text does not appear in Scene Editor, the BitmapNode "Background" might be covering the TextNode. Make sure that "Background" is the first (top) item inside the "Connection" group. Nodes can be re-arranged in the Scene Tree panel via drag&drop.

In the Scene Tree panel select the new TextNode. In the Properties panel's [ 2D Text Node ] section click on the magnifying glass icon next to property "Style".

The "Text Style Palette" dialog will be opened. In the "Text Style Palette" dialog select "OpenSans25" and click [ OK ].

In Scene Editor the Text Style of the TextNode will change. In the Scene Tree panel right click onto Connection and select "Clone..." from the context menu.

The "Clone Item" dialog will be opened. In the "Clone Item" dialog change to the "Multiple Clone" tab. Configure "Number of Copies" to "3" and click [ OK ].

In the Scene Tree panel 4 TextNodes are now available inside the "Connection" group.
In the Scene Tree panel select the newly created TextNodes one after the other and configure their names in the Scene Tree panel and the remaining properties in the Properties panel soas that this scene will be rendered abovein the SceneClimate.table below.

Before

anything else, let's import a few images for the Options scene by clicking (Import > Import Resources) and selecting the files in /cgi_studio_content/Resources/GettingStartedControls/Options:

First, drag two Group Nodes from the Toolbox into the Scene Tree.

The firstTextNodes groupare willfully representconfigured. theThe "Connection"final Dial and the second group will be for the "Devices" List. Rename the first Group Node to "Connection" and the second Group Node to "Devices". Under each group, add a Bitmap Node from the Toolbox and rename it to "Background".

Select oneresult of the BitmapConnection Nodepart can be seen in the Scene Tree Panel. Then, select the BitmapBrushBlend Effect and set the Image property to the recently imported background image as shown below: And do the same for the other Bitmap Node.

Change the Position property of "Connection" to X: 78 and Y: 58. Change the Position property of "Devices" to X: 551 and Y: 58. Now we have two background images for Connection group and Devices group.

Setting up the "Connection" Nodes

Drag a Dial Control to the "Connection" Group Node. Set the Position property to X: 72.00 and Y: 163.00.

Replace the default background images to images from recent import, as follows:

In order to arrange the images of the Dial correctly, the "Pivot Hint" property of each image should be set. This step is necessary for images like the Dial image, which need to rotate. To do this, go to the Solution Explorer panel, and select each of the following images:

For the knob image "NewDial_arrow_middleBmp", enable the "Pivot Hint" property and set the values as follows:

As you can see the knob needs to be repositioned to be in the center of the Dial.

Select the three other background images (multiple selection), enable the "Pivot Hint" property and set the pivot hint as follows:

Add 4 Text Nodes to "Connection" Group Node and move them below Background Node with Ctrl key dragging. Rename them as follows:

Configure the Text Nodes with the following values: Text Style should be OpenSans25.

In the Scene Editor another Textnode with "Connection" is visible. In the Scene Tree panel select the new TextNode_Connection from the Devices group and rename it to TextNode_Devices either via the context menu "rename" or via the keyboard shortcut <F2>.

In the Scene Tree panel you can see a TextNode called TextNode_Devices inside of the Devices Group2D. In the Scene Tree panel select TextNode_Devices. In the Properties panel's [ 2D Text Node ] section change the TextNode's Text property and in the [ Transformation ] section adapt its Position according to the table below.

Text and position of the TextNode are configured. In the Scene Editor you can see that the devices part has got a headline. TextNode Name 2D Text Node Transformations Text Position X Position Y TextNode_Devices Devices 145 61 From the Toolbox panel's [ Control ] section under "Touchable" drag a List Control into the Scene Tree panel directly onto the "Devices" group node.

In the Scene Tree panel a "List" node is visible directly under the "Background" node. This list node contains a "ListContentGroupAnchor", that is visible in Scene Tree panel by expanding the List node via a click on the triangle on its left. In the Scene Tree panel right-click on the newly created List node and choose [ Expand Control Node ] from the context menumenu. of

ListIn inthe Scene Tree panel.panel the

Openexpanded List now shows a "ListContentGroup" and selecta "Scrollbar".

In the Scene Tree panel right-click on the "Scrollbar" and once again choose [ Expand Control Node ] from the context menumenu. of

In the Scrollbar.Scene Tree panel the expanded Scrollbar shows 6 sub-nodes. the

SelectScene Tree panel right-click on the List in Scene Treenode and choose [ Save as Control... ] from Listthe context menu. Then

• The "Add New TemplatesTemplates" dialog will appearbe opened.

In the "Add New Templates" dialog select the "/Controls" folder to store the new control in, enter "MyList" as name and pressclick [ OK ]. button. As

A new customizable control "MyList" has been created. It is visible in the resultSolution Explorer panel in the Controls folder and in the Toolbox panel's [ Controls ] section as last item of that,the youlist. can add

The Scene Editor doesn't display SceneOptions any more, it displays the control asMyList. a

customizable control in Solution Explorer's Solution > Controls. After confirming this addition, delete List group node in

The Scene Tree panel shows the structure of MyList.

The Properties panel shows the properties of "MyList (Control)".

Configure MyList Control

Expose MyList's ScrollBarVisibility

Scene Composer's List internally holds a property for the scrollbar's visibility, which is not shown in the Properties panel by default. The following steps show how to access a list of hidden properties. For this sample solution we will make the scrollbar's visibility property publicly editable in the Properties panel.

right-click

Youon havethe nownewly created acontrol customizable"MyList" Listand control.

Selectchoose [ Control Properties... ] from Listthe context menumenu. of

Solution Explorer's Solution > Controls. The "Configure Public Control PropertiesProperties" dialog will appear,be opened. In the "Configure Public Control Properties" dialog's tree on the left side select the following item MyList > List > Scrollbar > Behaviors > ScrollbarBehavior. In the dialog's centered panel "Internal properties" find property "ScrollbarVisibility", check the "Is Public" checkbox and click [ OK ].

The "Configure Public forControl ScrollbarVisibilityProperties" underdialog Internalwill properties,be closed. For every instance of the MyList control, there will be a property available to configure the visibility of the scrollbar.
In the Scene Tree navigate back to SceneOptions by pressing the arrow in the top left corner.

The Scene Tree panel navigates back to SceneOptions and displays SceneOptions and its nodes. The Scene Editor displays SceneOptions.
In the Scene Tree delete the List node.

The "Delete Item" dialog will be opened. In the "Delete Item" dialog press [ OK ]. button.

The List

Delete

From the expandedToolbox Listpanel's [ Control from] SceneOptionssection indrag and drop a MyList control into the Scene Tree Panel.panel Dragdirectly and droponto the newlyDevices createdgroup. List

fromIn Solution Explorer's Solution > Controls tothe Scene Tree panel, a new MyList node will be visible. In the Scene Tree panel select "MyList". In the Properties panel's SceneOptions[ >Control Devices.]

Set Scrollbal Visibility (Properties > Control) of ListVisibility" to "Visible."Visible".

In the Scene Editor a small blue scrollbar becomes visible.

Customize MyList's Scrollbar

Scene Composer's default scrollbar has a blue base color. For our orange based design the scrollbar will be customized in the steps below.

Double-double-click on the ListMyList innode.

Scene Tree panel will switch from displaying SceneOptions to displaying the DevicesMyList grouptemplate. to customize itIn onthe Scene Tree.Tree

Selectselect the "Thumb" button node. In the Properties panel change the button's image properties according to the table below by clicking the magnifying glass icon and replaceselecting itsthe appropriate image in the "Select Item" dialog.

New images asfor follows:the scrollbar's In the Scene Tree navigate back to SceneOptions by pressing the arrow in the top left corner.

The Scene Tree displays SceneOptions. In the Scene Editor the scroll bar is clicked.now rendered with the new images in orange color.
To do that, first we need

Configure MyList's Main Item

Our MyList control will be composed of MainItems. Whenever a Groupcertain NodeMainItem withgets selected, the appropriate Sub-List will be displayed. The following steps explain how to build up a MainItem.

In the Scene Tree panel double-click on the MyList node.

Scene Tree panel switches from SceneOptions to MyList. You are now able to edit the MyList template. From the Toolbar's [ 2D Nodes ] section drag an OverlayLayout into the Scene Tree panel directly onto the List's "ListContentGroup" (MyList > List > ListContentGroup).

In the Scene Tree panel there is an OverlayLayout whichinside willof contain"ListContentGroup". From the deviceToolbar's entry[ name2D andNodes the] focus image. Therefore,section drag a RenderRenderNode Nodeand a TextNode into the Scene Tree panel directly onto the OverlayLayout that was created in the previous step.

In the Scene Tree panel there are a RenderNode and a TextNode frominside the ToolBoxOverlayLayout that was created in the previous step. In the Scene Editor the TextNode is visible displaying the TextNode's default text "NodesText". 2D" In the Scene Tree panel select the nodes created in the previous steps and rename them either via the context menu entry "Rename" or by pressing <F2> on your keyboard according to the table below.

In the Scene Tree panel the nodes are renamed according to the following table.    Initial Name
New Name
OverlayLayout MainItem TextNode EntryName RenderNode FocusImage In the Scene Tree panel select the List (Group2D). In the Properties panel's  [ Transformation ] section configure the position and size according to the following table.

In Scene Editor the Position and size of the selected rectangle is adjusted according to the new settings.

Size X and Size Y properties are initially set to "Automatic" and greyed out. Clicking onto the "A" next to the greyed-out input field allows you to edit these properties.

      Target Item
Transformation
Layout
Position X Position Y Size X Size Y List (Group2D)
58
134
300
300
In the Scene Tree panel select the TextNode2D (MainItem > EntryName). In the Properties panel's [ TextNode2D ] section click on the magnifying glass icon to the right of the Style property.

The Text Style Palette dialog will be opened. In the Text Style Palette dialog select "OpenSans25" and click [ OK ].

The Text Style Palette will be closed. In the Scene Editor the EntryName's text will be displayed in a smaller font. Target Item
Style
MainItem > EntryName OpenSans25

Configure MyList's Highlight for Selected Item

In a list it is useful to highlight the selected item. This will be done using a FocusImage drawing a border around the focused MainItem.

From the Toolbox panel's [Effects] section drag a BitmapBrushColorBlend effect into the OverlayLayout.Scene
RenameTree panel directly onto the OverlayLayoutMainItem's FocusImage.

In the Scene Tree panel's right side you can see BitmapBrushColorBlend effect under "Effects" when FocusImage is selected. In the Scene Tree panel select FocusImage. In the Scene Tree panel's right side select the BitmapBrushColorBlend effect. In the Properties panel click on the magnifying glass icon next to "MainItem".
Rename the RenderNode"Image" toproperty. "FocusImage".
Rename

the TextNode to "EntryName".

The "MainItem"Choose youItem" have now assembleddialog will be opened. In the main"Choose listItem" itemdialog thatselect the image as in the table below and click [ OK ]. 

The "Choose Item" dialog will be closed. Target Item
Image
MyList > List > >ListContentGroup > MainItem > FocusImage > BitmapBrushColorBlend //ConstructionKit/ConstructionKit/Controls/Images/Common/BorderFocusedBmp In the Properties panel change the Color property by entering new values for "Red", "Green" and "Blue" according to the table below.

In the Properties panel the configured orange color will be visible.

SetThe Color property can also be edited in the positionColor ofPalette window, which can be opened by clicking on the GroupNodecolor preview rectangle next to the Color property.

Target Item
Color

Red
Green
Blue
MyList > List to> X:58>ListContentGroup and> Y:134MainItem and> configureFocusImage its> sizeBitmapBrushColorBlend 1.0
0.62
0.00
In the Scene Tree panel select the FocusImage node. In the Properties panel's [ Layout ] section set the StretchBehavior to X:300"Fill" andaccording Y:300.

In our listto the currentlytable selectedbelow.
main

listIn itemthe shallScene beEditor the FocusImage RenderNode will appear highlighted with an orange outline. Target Item
Therefore Layout > StretchBehavior
MyList > List > >ListContentGroup > MainItem > FocusImage 
Fill

Create MyList's Sub-List

A Sub-List will be used to display 2 TextButtons to "Connect" or "Unpair" the associated device. The TextButtons will be positioned by a StackLayout. New images for normal, pressed and focused image will be defined.

From the Toolbox panel's [ Controls ] section under "Touchable" drag a BitmapBrushColorBlendSub-List effect from the ToolBox onto the FocusImage node. Now select the BitmapBrushColorBlend Effect on the right side ofinto the Scene Tree Panelpanel anddirectly set its Image to the BorderFocusedBmp image (which is part of the ConstructionKit) and its Color properties as follows:

Now, select the FocusImage node and change its layout properties: Set the StretchBehavior to "Fill".

In the following steps we will create a sub-list. Drag a Sub-List control from the Toolbox toonto the List's ListContentGroup.

ListContentGroup

panel

the Sub-List node is positioned inside of ListContentGroup just below the MainItem.

The Sub-List control has a SublistAnchor. Drag a StackLayout onto this SubListAnchor. Now, drag a TextButton into the StackLayout and change its name to "TextButton_Connect".
The resulting structure should look like this:

The next step is to configure the TextButton:

Margin Left: 12 Text: "Connect".
From the

TheToolbox TextButton'panel's images[ (NormalNode2D Image,] Pressedsection Imagedrag anda FocusedStackLayout Image)into needthe toScene beTree adjusted:

panel Scene

CopyTree andpanel pastethe StackLayout appears beneath the Sub-List's SubListAnchor.

From the Toolbox panel's [ Controls ] section under "Touchable" drag a TextButton Into the Scene Tree panel directly onto the StackLayout you added in the step before.

In the Scene Tree panel the TextButton appears beneath the StackLayout. In the Scene Tree panel select the StackLayout. In the Properties panel's [ Transformation ] and [ Layout ] section configure the properties as in the table below.

In the Scene Editor the dashed line of the TextButton's boundings will decrease.
Target Item
Transformations
Layout
Scale X
Scale Y
Margin Left
TextButton
0,75
0,75
12
In the Properties panel's [ Control ] section click on the magnifying glass icon next to makethe anotherTextButton's copy."Normal RenameImage" property.

The "Choose Item" dialog will be opened. In the "Choose Item" dialog select the image according to the table below and click [ OK ].

A new image for "Normal Image" has been configured. Repeat steps 5 and 6 for the TextButton's "Pressed Image" and "Focused Image".

New images are configured for the TextButton.
Target Item
Image Path
Normal Image
/Resources/Options/ButtonNorma_BkBmp
Pressed Image
/Resources/Options/ButtonNorma_Prss_OreBmp Focused Image
/Resources/Options/NOTBorderFocusedBmp In the Scene Tree panel select the TextButton and create a copy either via the context menu entries "Copy" and "Paste" or via the keyboard <Ctrl>+C and <Ctrl>+V.

A copy of the TextButton has been created. In Scene Tree panel the name of the copy is "TextButton_1". In Scene Tree panel rename the TextButtons according to the table below. Renaming can be done either via the context menu "Rename" or pressing <F2> on your keyboard.

In Scene Tree panel the TextButtons are renamed. In Scene Tree panel select the TextButtons individually and change the text they are displaying in the Properties panel's [ Control ] section according to the table below.

The texts of the TextButtons have been changed.
Target Item
New Name
Control - Text
TextButton TextButton_Connect Connect TextButton_1 TextButton_Unpair Unpair

Configure Behaviors for the Focus Handling of MyList's MainItem

Whenever MyList's MainItem gets focused, an orange border shall be displayed. Focus and FocusLeave behaviors are used to enable or disable the rendering of the FocusImage.

In the Scene Tree panel select the MainItem's FocusImage. In the Properties panel's [ Item ] section uncheck "Enable Rendering".

In the Scene Editor FocusImage (the orange rectangle) is not visible any more. In the Scene Tree panel an icon indicates the FocusImage node's disabled rendering. From the Toolbox panel's [ Behaviors ] section under "Control - Internal" drag a "Handle Control State" behavior into the Scene Tree panel directly onto the MainItem GroupNode.

In the Scene Tree panel an orange square appears indicating that this node has a behavior attached. In the Scene Tree panel's right side the attached behavior HandleControlState is visible. From the Toolbox panel's [ Behaviors ] section under "Control" drag a Focus behavior and a FocusLeave behavior into the Scene Tree panel directly onto the MainItem GroupNode.

In the Scene Tree panel's right side the attached behaviors Focus and FocusLeave are visible. Both, Focus and FocusLeave offer the possibility to configure an Action, which will be executed when a Focus or a FocusLeave event occurs. From the Toolbox panel's [ Behaviors ] section under "Action - Property" drag an EnableRendering behavior into the Scene Tree panel's right side directly onto the Action entries of the Focus and FocusLeave behavior.

In the Scene Tree panel's right side it is visible that for each of Focus and FocusLeave behavior an EnableRendering behavior is configured as action. In the Scene Tree panel's right side select the EnableRendering behaviors individually. In the Properties panel apply the settings for the property "Visible" as in the table below.

The property "Visible" for both EnableRendering behaviors are configured. In the Properties panel click on the padlock icon in the top right corner, while the EnableRendering behavior is selected.

The Properties panel is locked.
From the Scene Tree panel drag the FocusImage into the Properties panel directly onto the inputfield of the "TargetNode" property.

In the Properties panel FocusImage is configured as the EnableRendering behavior's TargetNode. In the Properties panel click on the padlock icon in the top right corner a second time.

The Properties panel is unlocked again.
Repeat steps 6 to 8 for the other asEnableRendering "TextButton_Unpair",behavior andto setconfigure its TextTargetNode. property

to "Unpair". Resulting structure should look like this:

---

Setting up the "Devices" List behaviors

Focus Handling behaviors

For the Devices entry items, we need to set the

MyList's behaviors for focus handling.handling Weare wantconfigured. the item to be highlighted only when it is focused. So first, we need to disable Rendering of the FocusImage by default. In the FocusImage properties, uncheck "Enable Rendering":

Next, in order for the "MainItem" Group Node to send events such as Focus Event when clicked, we have to add a "Handle Control State" behavior (Behaviors > Control > Internal) to MainItem Group Node.

Then, to handle these events received, add a "Focus" and "FocusLeave" Event Handler from the Toolbox under Behaviors > Control onto the MainItem Group Node.

Under each "Actions" of each Focus Event Handler, add an "Enable Rendering" behavior from the Toolbox under Behaviors > Action > Property.

This is what the configured Behaviors look like now:

As soon as

Whenever the MainItem gets the focus, the FocusImage shallwill beget visible. Therefore you have to configure the "EnableRendering" behavior of the "Focus" Event Handler as follows: Set the "Visible" property to TRUE and configure the scene's "FocusImage" as TargetNode. To do this, click the magnifying glass icon and selecting the "FocusImage" in the Choose Item dialog.

As soon as

Whenever the MainItem loseslooses the focus, the FocusImage shallwill beget madeinvisible.
invisibleagain. Therefore youBehavior
haveVisible
toTarget configureNode

Focus - EnableRendering

True MyList > List > ListContentGroup > MainItem > FocusImage

FocusLeave - EnableRendering

False MyList > List > ListContentGroup > MainItem > FocusImage

Configure Behaviors for MyList's MainItem

When an item in the "EnableRendering" behavior of the "FocusLeave" Event Handler as follows: Set the "Visible" property to FALSE. The scene's "FocusImage" has to be configured as TargetNode similar to the steps above.

If you run CGI Player and click on aDevices list item, an orange highlight should indicate that this item is in focus.

Sub-List Handling behaviors

Next, we will set the behaviors so that when a Device entry item ("MainItem") is clicked, a sub-list containing buttonsSub-List will bebecome visible. TheseThis Sub-List contains buttons are for connecting/disconnectingdisconnecting.

From the phoneToolbox devicepanel's to[ another.Behaviors

Drag] section under "Control" drag an "Event Handler" behavior into the Scene Tree panel directly onto the MainItem Group2D node.

In the Scene Tree panel's right side you can see the "Event Handler" behavior (underwith Condition and Actions slots. From the Toolbox panel's [ Behaviors >] Control)section onto theunder "MainItem"Condition Group- Node.Logic" Then, adddrag a "Check Logic Condition"Condition" tointo the ConditionScene ofTree thispanel's right side directly on the Event HandlerHandler's sinceCondition weslot. want

toIn putthe 2Scene conditionsTree together.panel's Underright side you can see the "Check Logic Condition" addbehavior configured as the EventHandler's condition. From the Toolbox panel's [ Behaviors ] section under "Condition - Input" drag a "Check Click"Click" conditionbehavior and anothera "Check Key Input"Input" condition.behavior From the Toolbox panel's [ Behaviors ] section under "Action  - Property" drag a "Send Value As Event" behavior into the Scene Tree panel's right side directly onto the Event Handler's "Actions" slot.

In the Scene Tree panel's right side you can see that "Send Value As Event" is configured as the Event Handler's action In the Scene Tree panel's right side select "Check Logic Condition". In the Properties panel set the Operationproperty "Operation" to "Or", sinceaccording we wantto the conditiontable below.

The Check Logic Condition's Operation is configured to becombine its Conditions with an OR operation. The Check Logic Condition will evaluate to TRUE if either athe clickCheck Click condition or athe keyCheck input.
Key Input condition is

Add aaction "Send Value As Event". In the Properties panel configure the Target Node, Value and Value Change property as Event"in behaviorthe table below.

Send Value As Event is configured according to the "Actions"table. sectionOn ofevery theclick "Eventor Handler".enter

For this action behavior, we want to sendpress a boolean value to the Sub-List as a signal that it should toggle its visibility. So please set the properties of "Send Value as Event" behavior as follows:

The Sub-List control will be the one to receive the boolean value. So let's add a Value behavior to the Sub-List control.

The value that will be sent to the Sub-List controlcontrol. will

To easily set the Target Node lock the Properties panel using the pad lock icon in the top right corner. From the Scene Tree panel drag the Sub-List node into the Properties panel directly onto the input field next to "TargetNode". Finally, don't forget to unlock the Properties panel clicking the pad lock icon once again.

Behavior
Property
Value

Send Value As Event Target Node /Controls/MyList/List/ListContentGroup/Sub-List
Value Bool - TRUE   Change Value
Relative

Configure Behaviors for MyList's Sub-List

The visibility of the Sub-List shall be oftoggled typeby clicking the MainItem. Let's configure the necessary behaviors to the Sub-List.

From the Toolbox panel's [ Behaviors ] section under "Bool",Value soProcessing" drag a Value behavior into the Scene Tree panel directly onto MyList's Sub-List node.

In the Scene Tree panel the Sub-List node got marked a yellow square, indicating that a behavior is attached to it. In the Scene Tree panel's right side you can see the Value behavior. In the Scene Tree panel's right side select the Sub-List node's Value behavior. In the Properties panel change the Variant to "Bool". Don't check the nearby checkbox.

The Value behavior's type has been changed to Bool. From the Toolbox panel's [ Behaviors ] section  under "Value Processing" drag an Action On Value behavior into the Scene Tree's right side directly onto the Value behavior's Receivers slot.

In the Scene Tree panel you can see that an Action On Value behavior is configured as Receiver of the Value behaviorProcessing hasbehavior. Action On Value can now be used to be changed to "Bool" as well:

To configure thean action that iswill performedbe executed when a new value has been received and the visibility of the Sub-List is toggled,toggled.

we have toFrom addthe anToolbox panel's [ Behaviors ] section under "ActionCondition on- Value"Control" drag a Check Processed Value behavior tointo the Scene Tree panel's right side directly onto the Action On Value behavior's receivers.Condition.

panel's

right side you can see that the Check Processed Value behavior is configured as condition for the Action On Value behavior.

In the Scene Tree panel's right side select the Check Processed Value behavior. In the Properties panel configure the properties ConditionOperator and ConditionValue as in the table below.

The Check Processed Value behavior's properties have been configured. Only if the the value received from "MainItem/Send ValueSendValue as Event" is TRUE, an action (which will be defined in later steps) shall be performed. Therefore,we will addBehavior
Property
Value
Check Processed Value
ConditionOperator Equal ConditionValue Bool, TRUE From the Toolbox panel's [ Behaviors ] section under "Action - Control" drag a "Set Control State" behavior into the Scene Tree panel's right side directly onto the Action On Value behavior's Action slot.

In the Scene Tree panel's right side you can see that the Set Control State behavior is configured as the Action On Value behavior's action. In the Scene Tree panel's right side select the Set Control State behavior. In the Properties panel configure the properties State and Change To according to the table below.

The Set Control State behavior is configured as in the table below. The Sub-List will be enabled whenever the condition Check processedProcessed Value"Value evaluates to TRUE. Behavior
Property
Value
Set Control State
State Enabled ChangeTo TRUE Repeat steps 3 to 7: Add a new Action On Value behavior as Value behavior's Receiver, configure another Check Processed Value condition and configureanother its properties as follows. All behaviors for MyList's Sub-List have been configured.
Behavior
Property
Value
Action On Value_1
- - Check Processed Value_1
ConditionOperator Equal ConditionValue Bool, FALSE Set Control State_1
State Enabled ChangeTo
FALSE

Test MyList in the Player

Let's test if the configured behaviors of MyList control are functional.

Save your solution either via the menu "File - Save Solution" or via the keyboard <Ctrl + S>.

The solution has been saved. In the Scene Composer's Toolbar click on "Play selected scenario...".

The resources will be generated and the Player will be started. In the CGI Panel check Scenes#SceneOptions and uncheck SceneHome and SceneClimate

In the Player window SceneOptions will be displayed with the Connection Dial on the left side and the empty Devices List on the right side, displaying the scrollbar. In the Player window click the first item of the Devices List, the text of which is "Text".

In the Player window's Devices List an orange border will actuallybe enabledisplayed indicating the selected MainItem. Additionally, the Sub-List whenwith the conditionTextButtons above"Connect" and "Unpair" will be displayed below the selected MainItem. In the Player window click the selected MainItem again.

The TextButtons of the Sub-List will disappear. In the Scene Composer's Toolbar click the "Close the Player" button.

The Player and CGI Panel window will be closed.

Configure a Devices List using MyList

So far we have been working on our MyList control with only one single list entry. Now that this first list entry is met.fully Pleaseconfigured, we can create more of them.

In the Scene Tree panel select the Main Item and the Sub-List. Copy and paste them to create 4 more instances. This can be done either via the context menu [ Copy ] and [ Paste ] or via the keyboard shortcuts <Ctrl + c> and <Ctrl + v>.

In the Scene Tree panel you can see that MyList's ListContentGroup now contains 5 MainItems and 5 Sub-Lists. In the Scene Tree panel select the MainItems individually. Then, in the Scene Tree panel's right side, select their configured "Send Value As Event" behaviors. In the Properties panel adapt the TargetNodes to their respective MainItems. I.e. MainItem_4 will be configured as the TargetNode of MainItem_4's "Send Value As Event" behavior.

The "Send Value As Event" behaviors' TargetNodes are configured with the respective MainItems.

To easily set the Target Node lock the Properties panel using the pad lock icon in the top right corner. From the Scene Tree panel drag itthe Sub-List node into the Properties panel directly onto the Actionsinput partfield next to "TargetNode". Finally, don't forget to unlock the Properties panel clicking the pad lock icon once again.

SendValueAsEvent of 
TargetNode
MainItem /Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List MainItem_1 /Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_1 MainItem_2 /Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_2 MainItem_3
/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_3 MainItem_4

/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_4

In the Scene Tree panel select MainItem's EntryName. In the Properties panel's [ 2D Render Node ] section change the property "ActionText" onaccording Value"to behaviorthe and configure it as depictedtable below.
the Scene Editor you can