Creating a Project using _Layout_"Screen"

This tutorial will show you how to set up a project that will use the same layout throughout the whole project regarding the information and navigation buttons around the peripheral of the main context in the selected screen. This not only allows the designer to only have to modify the information in one screen that will update all screens at once, but will also speed up screen loading time.    

For example, the above pictures show each of the screens have the exact same layout around the border of the main context screen. By selecting the appropriate screen in the New Screen Creation, the created screens will automatically be placed on the screens throughout the project.

1. Create a new screen in the project properties tree.
2. In the ‘Name’ drop-down, select the desired _Layout_*Location* from the choices.

*Do not change the name of the layout screen. The program is designed to look for this predefined layout name!

Depending on the screen size you are developing for, you will want to match the corresponding width/height (Layout_Top/Bottom, Layout_Right/Left) with the desired screen size. Go to the Properties menu when you have the screen selected to adjust these settings (1).

Add any objects or text fields that you wish to display throughout the project to the Layout window. In this example, I used the System Variables ActiveScreen and CurrentLongDate in the Layout_Top screen.

This will show the current screen that the user is on, and will also update the current date and time based on the system clock. 

Using the predefined Layout screens, your project will be easier to navigate and more efficient to update. If an object or graphic needs to be changed, you need to only go to one screen to update instead off every screen in your project.

****See also the tutorial on how to use the EmbeddedTabScreen object as an alternative and additional tool to customize your screen and reuse the same object throughout your project.