GettingStartedControls Part 3

Setting up the "Connection" Nodes

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.

Make sure that the "Background" is the first (top) item in the "Connection" group in order to appear in the background and not cover other nodes.

At this point, you will now have created the Connection options Dial:

Setting up the "Devices" nodes

First, add a TextNode to the GroupNode "Devices" for the "Devices" label.

Rename it to TextNode_Devices and set its text to "Devices" and set its position to X:145 Y: 61.

Next step is to customize an existing List control and set its color of the Scrollbar to orange (original color is blue). At first, drag and drop List Control from ConstructionKit > Controls in Solution Explorer onto SceneOptions in Scene Tree panel.

Select [ Expand Control Node ] from the context menu of List in Scene Tree panel.

Open List and select [ Expand Control Node ] from the context menu of the Scrollbar.

Select the List in Scene Tree and choose [ Save as Control... ] from List context menu. Then Add New Templates dialog will appear and press [ OK ] button. As the result of that, you can add the control as a customizable control in Solution Explorer's Solution > Controls. After confirming this addition, delete List group node in Scene Tree panel.

You have now created a customizable List control.

Select [ Control Properties... ] from List context menu of Solution Explorer's Solution > Controls. The Configure Public Control Properties dialog will appear, check Is Public for ScrollbarVisibility under Internal properties, and press [ OK ] button.

Delete the expanded List Control from SceneOptions in the Scene Tree Panel. Drag and drop the newly created List from Solution Explorer's Solution > Controls to Scene Tree panel's SceneOptions > Devices.

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

Double-click on the List in the Devices group to customize it on Scene Tree.

Select the "Thumb" button and replace its images as follows:

Then select the "VerticalPrevItem" button from inside the PrevItem group node and replace the images as follows:

Lastly, select the "VerticalNextItem" button from inside the NextItem group node and replace the images as follows:

We want a main list with a sub-list that will expand when an item in the main list is clicked.
To do that, first we need a Group Node with an OverlayLayout which will contain the device entry name and the focus image. Therefore, drag a Render Node and a TextNode from the ToolBox "Nodes 2D" into the OverlayLayout.
Rename the OverlayLayout to "MainItem".
Rename the RenderNode to "FocusImage".
Rename the TextNode to "EntryName".

The "MainItem" you have now assembled will be the main list item that will be visible.

Set the position of the GroupNode List to X:58 and Y:134 and configure its size to X:300 and Y:300.

In our list the currently selected main list item shall be highlighted with an orange outline.
Therefore drag a BitmapBrushColorBlend effect from the ToolBox onto the FocusImage node. Now select the BitmapBrushColorBlend Effect on the right side of the Scene Tree Panel and 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 to the List's ListContentGroup.

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:

The TextButton's images (Normal Image, Pressed Image and Focused Image) need to be adjusted:

Copy and paste the TextButton to make another copy. Rename the other as "TextButton_Unpair", and set its Text 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 behaviors for focus handling. We want 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 the MainItem gets the focus, the FocusImage shall be 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 the MainItem loses the focus, the FocusImage shall be made invisible again. Therefore you have to configure 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 a 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 buttons will be visible. These buttons are for connecting/disconnecting the phone device to another.

Drag an "Event Handler" behavior (under Behaviors > Control) onto the "MainItem" Group Node. Then, add a "Check Logic Condition" to the Condition of this Event Handler since we want to put 2 conditions together. Under the "Check Logic Condition" add a "Check Click" condition and another "Check Key Input" condition.

The "Check Key Input" condition, checks if the enter key is pressed. Therefore the KeyCode property will be set to "Key_Enter".

Add a "Send Value as Event" behavior to the "Actions" section of the "Event Handler".

For this action behavior, we want to send 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 control will be of type "Bool", so the Variant type of the Value behavior has to be changed to "Bool" as well:

To configure the action that is performed when the visibility of the Sub-List is toggled, we have to add an "Action on Value" behavior to the Value behavior's receivers.

Only if the value received from "MainItem/Send Value as Event" is TRUE, an action (which will be defined in later steps) shall be performed. Therefore, we will add a "Check processed Value" condition and configure its properties as follows.

The action that shall be performed is a "Set Control State" behavior, which will actually enable the Sub-List when the condition above is met. Please drag it onto the Actions part of the "Action on Value" behavior and configure it as depicted below.

Try to run your solution in the CGI Player. When you click a main item in the list, the sub-list should appear. When clicking it a second time, it will disappear again.

Copy and paste the "MainItem" Group nodes and Sub-List nodes onto the ListContentGroup to create 4 more instances.

Make sure to update the "Send Value as Event" behavior's "TargetNode" property for each MainItem so that it will enable/disable the appropriate sub-lists.

As final step, set the Text of the first 2 list items as "Phone(Private)" and "Phone(Work)" and the last 3 items as "New Device".

You have finished the (Phone Connection) Options Scene tutorial. Generate an asset file as described at the end of Step 1. Load the generated asset into the Player and select the Options scene. You can now play around with the controls. Turn the Dial to select the type of Connection. Click on an item in the Devices list to make the sub-list buttons appear and disappear.