UI Tool User Guide

Revision History
Date Version Changes
05/08/2018 1.0.0 Initial release.
 Table of Contents

Introduction ....................................................................................................................................... 4
Tutorial 1: Hello World ....................................................................................................................... 5
Creating a New Project .............................................................................................................................................................................................. 6
Adding Pages .............................................................................................................................................................................................................. 8
Page Mirroring ........................................................................................................................................................................................................... 9
Page Layers .............................................................................................................................................................................................................. 10
The Main Background .............................................................................................................................................................................................. 11
Adding the Text Field ............................................................................................................................................................................................... 14
Generating the .dat File ........................................................................................................................................................................................... 16

Tutorial 2: Full UI Demo ................................................................................................................... 17

This guide is split up into two tutorials. The first is a very basic tutorial to guide you through the process of creating your very first “Hello World” UI. It is
intended to be used in conjunction with the Tcl Tool User Guide when first getting started with development. The second tutorial will walk you through the
construction of a full UI demo that will showcase nearly all functionality for the available UI widgets.

It should be noted that these tutorials were created solely for the purpose of instructing developers how to use UI Tool. They are not focused on compliance
with our graphical requirements and would therefore not be suitable for URC certification. For details on how to create a module that is compliant with these
guidelines, please refer to the document URC Graphics Guidelines.
Tutorial 1: Hello World
Creating a New Project
In your Tcl Tool software, click on “Tool” at the top and select “UI Tool”:

The UI Tool program will open up in a new window. To create a new project, go to File -> New. You’ll see a window pop up, asking you to choose which client
device you want to make a UI for:

We will be making a Phone UI that will be used for both Phone and Tablet devices. So, select “Phone” and click “OK”.
 Adding Additional Interfaces

To add an additional interface, click the “Add Device” button in the “System Designer” window.

You should now have a blank Phone project:

You should now see a “Page 1” under both Landscape and Portrait. We only need a single page for this project, so you don’t need to add any more. But, let’s
change the name before proceeding. Right-click on “Page 1” and select “Rename”. Call it page_Main. This is the identifier that we’re going to use in our code
when we need to reference this page. Go ahead and do the same thing for Portrait.
Page Mirroring
Click on page_Main under Landscape and take a look at the properties for it in the Properties window. Along with its name, you’ll see an option called
“Mirrored”, which is checked by default:

When this option is checked, it means that for any given page under Landscape, if a page with the same name exists under Portrait, these two pages will
essentially be “linked”. This means that when you change orientation from landscape to portrait or vice versa, the page will always load its linked or
“complementary” page.

If you do not want the same exact page to load upon changing orientation, but instead want a different page, you can uncheck the Mirroring option and
choose the alternative page:
Page Layers
In order to access the background, we need to change layers. Every UI has two layers, a foreground and a background. At the top right corner of the UI
window, there is a button that switches between these two layers when clicked. Click it and notice the background icon on the button becomes highlighted:
The Main Background
Double-click on page_Main under Landscape. It will look like this by default:

The background that you see here is for backward compatibility with TC 1.0. If you were to generate the UI output file as-is and run it in a module on your
phone in TC 1.0, you would see this dark blue, URC-branded image as your background. However, if you use this same UI output file in TC 2.0, the image will
be automatically stripped away and instead, you will see the main custom background used for your Accelerator project file. Keep this is mind while developing
your UIs. For example, text should always be placed on top of a button or image. Otherwise, if the user has a brightly colored custom background in
Accelerator and your text is similarly colored, it will be illegible.
Right-click over the background image and select “Add Object” -> “Image” (Take a moment to note all of the UI widgets available. We will get acquainted with
each one as this guide progresses.):

You will see a little grey square appear on the UI. This is your new Image object. Select it and then, in the Properties window, click on the “Add Image From
Gallery” icon in the “Image” section:
This will open up the URC Tcl Image Gallery. Take a moment to browse through it. There are many images available to you for use in your modules. They were
designed to be as versatile as possible to prevent limitation of their use.

For this demo, although against our graphic guidelines, we will use a static background image for simplicity. As they are ordered first according to their size,
you will find background images (which take up the entire screen) towards the bottom. Find the image COM_1196x0532_0091N_Background, select it and
click “Apply”. You should now see a lightly textured dark grey image as your background:

If you’d like, you can switch back to the foreground and remove the two large buttons on the bottom right and left. They are there by default and will not
serve any purpose for our module.

Now, go ahead and replace the background for Portrait as well. The procedure is the same, except this time, you’ll want to browse for the image
COM_0720x0880_0092N_Background.
Adding the Text Field
We’re almost finished. We just need to add the text field that will display our “Hello World!” message. Double-click on page_Main under Landscape in the
Model Designer. Right-click anywhere on the UI. This will bring up the “widget-adding” context menu we saw earlier when adding the background image.
Highlight “Add Object” and select “Text”. It may seem like nothing happened, but the newly created object may just be hidden. If you Select All (Ctrl+A), you
will see it highlighted with a red box:

Before we do anything with it, let’s first give our text object a name so we can reference it in code. Call it txt_main.
Now, let’s resize and reposition it. Select the text object and under “Position And Size” in the Properties window, enter X and Y coordinates of 350 and 150 and
a width and height of 500 and 150:

Alternatively you can select the text object and drag it to move it around, as well as drag its corners/sides to resize it.
Now, we just need to configure the size and color of the text. Select the “text input” field in the Properties window and add some “test” text:

You should see it appear in the text object. The default color is black, which doesn’t look particularly good with our dark background. So, let’s change it to
something with better contrast. Select the color palette and choose white or another light color:

Increase the font size to 60, which should be the perfect fit for our message. Finally remove the “test” text.

To configure the text object for page_Main under Portrait, simply copy it over from Landscape and reposition it.

We’re now finished creating our Hello World UI and are ready to generate the .dat output file.
Generating the .dat File
Click on “Program” at the top of UI Tool and then click Generate. You’ll be prompted to save the output (.dat) file. Enter a name for the file and click “Save”.
Do not change the save location of the .dat file, as this is where Tcl Tool will look when you import it.
Tutorial 2: Full UI Demo
Coming Soon…