Blog: Posts from May, 2012

Database web applications may contain multiple pages with a complex navigation hierarchy. Traditional multi-level menus do a good a job of presenting such hierarchies. 

Consider the following web app created from Adventure Works database with Code On Time. The navigation menu has multiple levels reflecting the relationships between database tables. Developers will likely want to change the automatically configured menu structure but will still be forced to create multiple levels of navigation menu options.

A web application can be configured to use an advanced two-level menu.

Start the web application generator, select the project name, choose Settings option, and proceed to alter the layout of application pages under Layouts section.

Choose Advanced Two-Level menu presentation style and click Finish.

Generate the app and inspect the new look of the navigation menu in the browser. The second level of the menu is rendered flat with indentation reflecting the hierarchy. All navigation menu levels are visible and accessible immediately.

The accessibility of menu options can be further improved by breaking them into multiple columns.

Start Project Designer and select Pages tab. Select New | New Page option on the action bar. Enter the following properties and click OK to save the page.

Select  Home link in designer bread crumbs and create another page configured with these properties.

These is the partial hierarchy of the pages in Project Explorer with some of the child nodes under Production page collapsed for clarity.

The highlighted page properties affect the menu presentation.

• If about:blank is found in the External Url property, then the corresponding physical page is not created by the application generator. The menu option will be rendered as a static text.
• It is mandatory to enter “*” in the Roles property. Otherwise the security trimming mechanism will remove the option from the menu at runtime.
• If the CSS class with the name menu-new-column is entered in Custom Styles, then a new column of options is started in the second level of the advanced two-level menu.

The indexes of new pages were selected so that they would precede pages Production | Product and Production | Location.

Here is the effect of the changes. All navigation menu options under Production are rendered in two columns.

If an option of any sub-level is selected, then the user interface of the main menu reflects that.

The second level of advanced two-level menu can be further enhanced with the custom CSS style sheets. Create a custom CSS stylesheet in the project and enter following rules.

div.two-level div.production-menu
{
    background-image: url(../_Shared/Page_Categories.png);
    background-repeat: no-repeat;
    background-position: 110% top;
}

div.two-level div.human-resources-menu
{
    background-image: url(../_Shared/Page_Announce.png);
    background-repeat: no-repeat;
    background-position: 130% top;
    padding-right:70px!important;
}

Start Project Designer and modifying the following pages.

Generate the app, refresh the browser page, and inspect Human Resources and Production options on the top level of the main menu.

These are the examples of advanced two-level menu with other available themes.

Code On Time web applications use Cascading Style Sheets (CSS) to theme the application elements, including colors, fonts, backgrounds, borders, paddings, margins, and other embellishments.

The screen below shows the Employees page of a web application generated using Social theme.

Most modern browsers have built-in page inspection capabilities. For example, if you are using Internet Explorer 9, you will need to press F12 to bring up Developer Tools. On the menu, click on Disable / CSS menu option.

The page style sheet will be disabled, and the page will look like the screenshot below. You can see that it is now “black on white” - just black text and blue links. If you want to completely revamp the page, it may be best to start from here.

Alternatively, you can add incremental enhancements to existing themes. Let’s make a cosmetic enhancement to the Social theme.

On the Developer Tools menu bar, click on Disable / CSS menu option again to enable the site styling. Click on the Arrow icon on the toolbar to activate Inspection mode. In this mode, when you mouse over an element in the page, it will be surrounded by a blue border.

Click on the first cell underneath the Address column. The Developer Tools window will find the HTML corresponding to the selected element. Three CSS classes Cell, Address, and StringType are currently assigned to the table cell. Let’s create a CSS class that will add a gray background to the Address column.

Start Code On Time web application generator, click on the project name, and press Develop to open the project in Visual Studio. In the Solution Explorer, right-click on the ~/App_Themes/MyCompany folder and click on Add New Item option. If you changed the namespace of your application, then choose the corresponding folder.

In the window that opens, select your programming language, and then choose Style Sheet. Optionally rename the file, and then press Add.

Replace the default text in the style sheet with the following rule.

.Cell.Address
{
    background-color:#F2F2F2!important;
    border-bottom-color:#F2F2F2!important;
}

Note the use of the !important suffix. This suffix needs to be used when your custom CSS rules come into conflict with the core theme, and you would like your own rule to prevail.

Save the file, and refresh the web page. You will see that the Address column now has a gray background.

Cascading style sheets offer an infinite number of options to affect the presentation of pages without changing a single line in the web application itself. Applications created with Code On Time do not explicitly specify colors or fonts anywhere in the source code. You can alter your application to your exact specifications.