Getting Started

  Using the Project Designer

Table of Contents
Getting StartedPrint||
Using the Project Designer

The Project Designer allows customizing the pages and data controllers of the web application.

To activate the Project Designer, click on a project name on the start page of the application generator.

Clicking on the name of a project on the Start page of Code On Time web application generator.

Then, click on the Design button.

Design option on the Project Action page of the web application generator.

The Project Designer will open.

On the left side of the screen is the Project Browser. The right side contains the Project Explorer.

Project Designer window opened. On the left side is the Project Browser. The right side contains the Project Explorer.

Project Browser

The Project Browser allows navigating the project configuration elements. The tabs display lists of pages, data controllers, user controls, commands, fields, views, and data fields.

Navigate to the properties page of an element by clicking on the link in the first column or using the context menu option Open.

Open context menu option for 'Home' page in the list of pages of the Project Designer.

The properties page of the project configuration element will open. The breadcrumbs in the path area above the Project Browser show the location of the object. The tabs at the top of the page will change to reflect project configuration elements that belong to the currently selected element.

'Home' page project configuration element properties page is open. The tabs have changed to allow access to child elements.

Quickly access the Learning System article for the selected project configuration element by clicking on the question mark icon in the top right corner.

Help icon will access the relevant learn article for the selected project configuration element.

The Project Explorer can be synchronized with the current Project Browser element by using the Sync command on the action bar or pressing Ctrl+Period keyboard shortcut (“Ctrl” key and “.” key).

Sync button on the action bar.     Home page node selected in the list of pages in the Project Explorer.

Project Explorer

The Project Explorer displays a logical hierarchy of project configuration elements separated into three tabs: Pages, Controllers, and User Controls.

Code On Time web application generator's Project Explorer displays a logical tree of project configuration elements separated into three tabs.

Double-click on a node in the Project Explorer or use the Open context menu option to display the properties page for the relevant element.

Open context menu on 'container2' node under Home page.     Container properties page open in the Project Browser.

Drag project elements to change the application configuration. As an alternative, you can use Cut/Copy/Paste options in the context menu of project configuration element nodes. These operations can be performed on multiple selected elements of the same type.

Dropping 'container2' node on the left side of 'container1'.     Node 'container2' has been placed before 'container1' node.

Node names of project configuration elements can be changed using the Rename context menu option.

Rename context menu option for 'container2' node in the Project Explorer.      'Container2' node is in Rename mode.

Navigate To

The Navigate To window will search for project configuration elements by property values as soon as you type a sample search criteria.

The window can be activated by clicking on the Navigate To icon on the Project Explorer toolbar or pressing the Ctrl+Comma keyboard shortcut (“Ctrl” key and “,” key).

Navigate To icon on the Project Browser toolbar.

The Navigate To window will open. Start typing search terms. Matching entries will appear as soon as you stop typing.

Navigate To window with the search terms 'products grid1'. Multiple results have been found.

Highlight a result and press OK or press Enter on the keyboard to open the properties page of the element in the Project Browser and have it highlighted in the Project Explorer.

View 'grid1' of Products controller selected in the Project Explorer.