Application Factory

The picture below shows the standard page layout of a Web Site Factory application. The page features a membership bar at the top, followed by a page header and logo, a bar with application menu system, a page title, and page path. The is also a side bar on the left side of the page.

What if you want to maximize the real estate of the page and eliminate some of the standard page elements?

Using Custom CSS Classes

Start the Project Designer. In the Project Explorer, double-click on the Employees page node. Assign the following value:

On the toolbar, press Browse. Class Tall hides the menu bar at the top of the page, class Wide hides the side bar and class HomePage replaces the yellow background with the standard home page background. These classes can be used in any combination.

Maximize Real Estate of The Page

If the Tall and Wide custom classes are not small enough for the requirements, the page may be reduced even further with a user control.

In the Project Explorer, right-click on Employees / container1 node, and press New Control.

Next to the User Control lookup, click on New User Control icon.

Assign the user control a name:

Press OK to create the user control. Press OK again to instantiate the user control on the Employees page.

On the toolbar, press Browse to generate the user control file. When complete, right-click on Employees / container1 / control1 – Maximizer and press Edit in Visual Studio.

The user control file will open in Visual Studio. Replace the existing code with the following:

C#:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Maximizer.ascx.cs" Inherits="Controls_Maximizer" %>
<script type="text/C#" runat="server">
    protected void Page_Init(object sender, EventArgs e)
    {
        Page.Header.Controls.Add(new LiteralControl(
            "<style type=\"text/css\">" +
            "body {padding:0px!important;}" +
            // hide the membership bar
            "div.MembershipBar, div.MembershipBarPlaceholder {display:none!important;}" +
            // hide the page header and logo
            "div#PageHeader{display:none!important;}" +
            // hide the page title
            "#PageHeaderLeftSide,#PageHeaderContent," +
            "#PageHeaderRightSide{background-image:none!important}" +
            "#PageHeaderContent div.Title {display:none!important;}" +
            // hide the page path
           "#PageHeaderContent .SiteMapPath {display:none!important;}" +
            "</style>"));
    }
</script>

Visual Basic:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Maximizer.ascx.vb" Inherits="Controls_Maximizer" %>
<script type="text/VB" runat="server">
    Protected Shadows Sub OnInit(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
        Page.Header.Controls.Add(New LiteralControl(
            "<style type=""text/css"">" +
            "body {padding:0px!important;}" +
            "div.MembershipBar, div.MembershipBarPlaceholder {display:none!important;}" +
            "div#PageHeader{display:none!important;}" +
            "#PageHeaderLeftSide,#PageHeaderContent," +
            "#PageHeaderRightSide{background-image:none!important}" +
            "#PageHeaderContent div.Title {display:none!important;}" +
           "#PageHeaderContent .SiteMapPath {display:none!important;}" +
            "</style>"))
    End Sub
</script>

Switch back to the browser, and refresh the Employees page. Note that all page elements except the views and any page body styles have been hidden.

Code On Time application generator includes a Project Designer that allows drag & drop modification of project configuration elements. Project configuration is composed of pages, containers, data views, user controls, controls, controllers, commands, fields, views, categories, data fields, action groups, actions, business rules, styles, items, and field outputs.

Code On Time Tools for Excel is a Microsoft Excel add-in designed to provide a bird-eye view of project configuration element properties with the ability to make rapid and massive changes when needed. Users can change element properties, add, rearrange, and delete elements. A dedicated ribbon tab allows synchronizing changes with the project, modifying project settings, and generating entire applications straight from Microsoft Excel. Code On Time developers can switch between Project Designer and Tools for Excel, whichever tool is better for the task.

Getting Started

First, download and install both Code On Time application generator and Tools for Excel.

Start Microsoft Excel and open a blank workbook. On the ribbon, select Code On Time tab. Click on New button to create a new web app.

The application generator will start and display a list of project types. Proceed to create a sample Web Site Factory project named “Northwind” based on a sample Microsoft SQL Server database by following these instructions.

When application generation is complete, the web site will open in the default browser. Navigate to the Customers page. Let’s use Tools for Excel to make the following changes marked in the picture below:

1. Change the title of the page to “Current Customer List”.
2. Change “Company Name” column label to “Business”.
3. Remove “Region” column.

Using Tools for Excel

Switch back to Microsoft Excel. On the ribbon, select Open to see a list of existing projects. Select Northwind / Web Site Factory project from the list.

A new sheet will be added, displaying instructions. The ribbon will display the project control buttons.

The table below shows descriptions of controls on the ribbon.

Click Pages configuration shortcut on the ribbon. A new sheet will be added to the workbook containing all pages and their properties. Make the following change:

Next, click on Data Fields configuration shortcut on the ribbon. Then, set a filter by pressing Filter | Customers.

Set the Header Text of CompanyName data field in view grid1.

Right-click on the leftmost column of Region data field row of view grid1, and press Delete Row.

The changes are not yet integrated into the project.  Press the large Sync button to synchronize all workbook sheets with the project. Alternatively, activate the dropdown and select a specific element type to synchronize.

Tools for Excel will validate the data entered in the workbook. If any errors are found, the invalid data will be highlighted and synchronization will be canceled.

If the data is valid, Tools for Excel will save the workbook and submit data sheets to the application generator one-by-one.

Application generator will detect changes and modify project configuration elements accordingly. The updated project configuration data will be returned to Tools for Excel.

Tools for Excel will delete processed data sheets and replace them with fresh data received from the application generator. The workbook will be saved.

On the ribbon, press Browse to regenerate and open the web app in the default browser. Navigate to Customers page. Note that the title of the page has been changed, the second column has been renamed to “Business”, and Region column is no longer present.