GettingStartedControls Part 3

(Phone Connection) Options Scene

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

Our final scene will look like this:

Our goal is to create a Phone Connection Options scene with a Dial Control and a List with a Sub-List Control, that will appear and disappear when an item in the List is clicked.

Create a new scene using the Scene menu's "New 2D Scene…" menu item.

Name the new scene "SceneOptions". We always use the prefix "Scene" to have all scenes listed near to each other in the Solution Explorer view.

The scene is now created and already opened inside the Scene Tree panel. It already contains a standard camera. The Viewport size of the camera follows the size of the Render Target (1024x768). The new scene's camera should automatically be connected to the Render Target. If it isn't, please drag the Camera onto the default RenderTarget in the Render Targets panel. Change the Sequence Number to 2 in the Properties panel so that this scene will be rendered above the SceneClimate.

Before anything else, let's import a few images for the Options scene by clicking (Import > Import Images)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 first group will represent the "Connection" 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 one of the Bitmap Node 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:

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 [ 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.

Drag and drop 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 List 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 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) for to 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.

And set the "ChangeTo" property of "Set Control State" to false (unchecked).

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.