Tutorials

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.

Then, click on the Design button.

The Project Designer will open.

On the left side of the screen 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.

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.

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

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

Project Explorer

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

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.

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.

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

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

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

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.

Let’s create a new Web Site Factory project.

Start Code On Time web application generator and select Web Site Factory under New Project.

The next page will prompt to specify a name and programming language of the project.

Select the programming language of your choice and specify the following name:

Press Create button to create the project.

The next page allows changing the Namespace and the version of Microsoft .NET Framework. Leave the default values and press Next.

This page allows specifying the Data Provider and Connection String. Select your data provider from the list.

This tutorial uses Microsoft SQL Server database engine. If you do not have a database server, consider installing Microsoft SQL Server 2012 Express.

Click on the button to the right of the Connection String field to open the Connection String Configuration page.

If you have SQL Server Express edition, specify the following:

To the right of Database field, click on the Create button and confirm to create the database.

To the right of the Sample Tables dropdown, press Install and confirm to populate the project database with the Northwind dataset.

Code On Time does not offer tools to design databases. Use your favorite database management tools, such as Microsoft SQL Server Management Studio, to work with the database schema.

Our application will have built-in user and role management system. Code On Time applications rely on the security infrastructure available in ASP.NET.

Under Membership section, press Add and confirm to add ASP.NET Membership to the database.

You will see a confirmation when the membership has been configured.

Press OK to finish configuration of the database connection string.

If you are using a trial version of the application generator, the project size is limited to 10 tables or views. To select a subset of tables for the project, click the Change button next to “All database tables and views are included in this project”. Include the following tables: Categories, Customers, Employees, EmployeeTerritories, Order Details, Orders, Products, Shippers, Suppliers, and Territories.

Press Next twice to reach the Reporting configuration page. Enable dynamic and static reports in the application.

Hold down Shift key and press Next – this will skip directly to the Summary page. Press the Generate button to start creation of the web application.

When generation is complete, the web site will open in your default browser.