Screen Layout Configuration

Setting Up Your Screen

One of the first items to configure using the Application Starter Framework is the way your application screen is set up and the parts of the screen your end users will see and interact with. This includes whether and where sections appear on the screen – header, main screen, side panel, footer – and if the system displays additional information using pop-up screens.

With the framework, you define the parts of your screen – the basic screen layout – and how the system reacts when users interact with items in different sections on the screen. You then assign styles using layout templates and cascading stylesheets (css), which allow you to control the look and feel of each part of your application at a very granular level and ensure that all parts in the same category or class get updated at once. This document does not go into detail on using cascading stylesheets, but there are many good sites online for details on using css.

Screen Layout and Structure

The first set of configuration options are related to the screen layout/structure of your application. This is much more than the colors and fonts to use on the site: it is the working parts of the screen – the top bar, the side bar, the main part of the screen – and the options they provide users. It is also the controls in those sections and how those controls respond as the user makes selections on the screen.

The Application Starter Framework allows you to quickly set up a multi-section layout like the one shown below:

The screen layout is divided into sections that include a top bar, which is often the location for navigation options; the main part of the screen; and an optional side panel, footer, and popup window.

To begin setting up the structure of your application you enter the names of the logicnets that will control each section:

1. In the Designer, click the name of your project in the Project pane.
2. Click Modify.
3. Click the Framework tab at the top of the Viewer pane. This is where you will set up the primary structure of your application.

4. Leave Custom topbar set to default of "no" for now. The system will enter the preset top bar.
5. Enter the name of your application. This is the name users will see at the top of the screen.

6. Enter the logo you want to display on the screen. You can leave this blank for now if you want.
7. Enter the name of the logicnets that will control the main section of your application. Add the name of logicnet that renders the UI of the main section and the name of the one that processes selections made on the main part of the screen. You will build these logicnets shortly and can rename them if you want, but for now you might want to use main_ui and main_process.

You do not have to create two separate logicnets, but doing so allows you greater control over the way the application functions, and it is a good design principle to separate presenting from processing. If you combine the display and action functions in the same logicnet enter the logicnet name in the Main UI net (logicnet) field.

8. To select the sections to include click the checkbox next to an option; for example, to include a side panel in your layout click the checkbox next to Show side. The side and footer sections are optional. You add pop-up windows from within your application application flows, so you do not configure them in the project settings.

9. Enter the name of the logicnet that will control the section of the application you want to display in the related field for that section.

The Application Starter Framework includes a default layout template, JavaScripts, and associated css classes. As necessary, you can redefine the .css classes used for the standard styling in a custom .css file that will overwrite the standard styling with your custom styles. You can also include a custom .js file containing JavaScript functions that that system should invoke on the client side.