GettingStartedControls Part 3

In Part 3 of the GettingStartedControls Sample we will create a (Phone Connection) Options scene. This scene offers the possibility to choose the connection type (Cable, Bluetooth and other) from a Dial Control on the left side. On the right side is a List with Sub-List Controls. The Sub-List Control will appear depending on the item selected in the List.

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

And this is what the final scene will look like:

Preparing the Options scene

1. Create a new scene via the menu "Scene" - "New 2D Scene" or press < Ctrl+2 > on your keyboard
   
   • The "Add New Scene 2D" dialog will be opened.
     
2. In the first row select "/Scenes" from the drop-down menu. Enter "SceneOptions" as name and press [ OK ]. We use the prefix "Scene" to have all scenes listed next to each other in the Solution Explorer 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.
     
3. In the Render Targets panel check the checkbox of "SceneOptions\Camera" in order to enable rendering.
4. 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

1. From the Toolbox panel's [ Node 2D ] section drag a 2D Group nodes into the Scene Tree directly onto the node "SceneOptions".
   • In the Scene Tree panel you can see a 2D Group node.
2. 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.
3. 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 2D Group with its BitmapNode has been created.
   • In Scene Tree panel the name of the copy is "Group_1".
4. 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 Item		Name
     Group		Connection
     	BitmapNode	Background
     Group_1		Devices
     	BitmapNode	Background

     
5. In the Scene Tree panel select both BitmapNodes called "Background". This can be achieved 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 Image property.
   • In the Properties panel you can now edit the BitmapBrushBlend effect for both BitmapNodes.
   • The "Choose Item" dialog will be opened.
     
     
6. 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

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

Creation and Positioning of the Dial Control

1. From the Toolbox panel's [ Controls ] section under Touchable drag a Dial control into the Scene Tree panel directly onto the "Connection" group.
   • 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 top left corner of the left gradient image.
2. 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

1. 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.
2. 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

3. In the Properties panel's [ Control ] section click on the the "BackgroundImages" section.
   • In the Properties panel the "BackgroundImages" section will be expanded.
4. In the Properties panel click on the magnifying glass next to "BackgroundImages 0".
   • The "Choose Item" dialog will be opened.
5. 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.
6. 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

     
7. 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.
8. Configure the "Pivot Hint" as in the table below.
   • The Pivot Hint for the Knob Image is configured correctly.
9. 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

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

2. 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.
3. In the "Text Style Palette" dialog select "OpenSans25" and click [ OK ].
   • In Scene Editor the Text Style of the TextNode will change.
4. In the Scene Tree panel right click onto Connection and select "Clone..." from the context menu.
   • The "Clone Item" dialog will be opened.
5. 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.
     
     
6. 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 as in the table below.
   • The TextNodes are fully configured.
   • The final result of the Connection part can be seen in the images below.

     TextNode Name	2D Text Node	Transformations
     	Text	Position X	Position Y
     TextNode_Connection	Connection	141	61
     TextNode_Bluetooth	Bluetooth	149	134
     TextNode_Cable	Cable	20	200
     TextNode_Other	Other	315	200

     

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.