WebForm Design Guidelines

This section discusses the recommended WebForm design guidelines for developing applications that hosted inside DesktopManager.

Use HTML 4.0 DTD

By default, new WebForm in Visual Studio 2005 will automatically include the XHTML 1.1 DTD type. Please remove it and change to HTML 4.0 DTD as shown in the following syntax:

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

Although Intersoft's components are generating XHTML compliant output, the layout rendering and behaviors in XHTML 1.1 are slightly different with expected result. The difference includes the way XHTML treats on dimension and boxes, as well as its inability to support 100% width for certain tags in more advanced scenarios. XHTML Strict is recommended for building basic, static website which needs to be viewable on mobile devices. It is however not recommended for dynamic, rich and advanced interactions website.

Use IFrame content mode when applicable

For greater reusability of a module in your web application, it's recommended that you use IFrame content mode whenever applicable so that the Form can be reused in the entire application.

All container controls in WebDesktop.NET, such as WebDesktopManager, WebPaneManager, WebTab and WebNavPane supports both InlineContent and IFrame mode. To use IFrame mode, simply set the ContentMode to UseIFrame.
WebForm style guideline

Unlike developing traditional style web form, there are several points and techniques that need to be taken care while developing using WebDesktop.NET especially when you are developing WebForms that hosted inside DesktopManager. Since DesktopManager is using the desktop-style of User Interface concepts, you would need to put attention on some of the form design aspects such as the body's spacing and margin, the scrollbars, width and height of the page, and more.

In this section, provided are several style and design guidelines for designing WebForm targetted for DesktopManager.

Remove spacing and padding in Page. By default, a Page will have a margin of 15px. This can be achieved by using one of the following techniques:
- Set four of the margin to 0 in BODY tag. Example:
  
  <
  body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
- Define the margin in global css class. Example:
  
  BODY
  {
  margin: 0px;
  padding: 0px;
  }

Disable Page's scrolling. In most cases, you would use WebPaneManager to create a Layout. For instance, a Page with "Header, Side and Footer" Layout. The Layout should be then responding to browser's resized and perform resizing automatically. In this scenario, the Page's scrollbar is better made disabled. To disable page scrolling, please see the following guides:

Set the scroll attribute to "no" value in BODY tag. Example:

<body scroll="no" >
In Mozilla-based browsers, you would need to set the overflow style to hidden. Example:

<body style="overflow:hidden" >

In case that you would need to scroll the Page at designtime, you can add the overflow style programmatically in code behind instead of using above techniques. Example:

protected

void Page_Load(object sender, EventArgs e)

{

body.Style.Add(

"overflow", "hidden");

}

The above last technique requires you to add runat=server attribute to the body tag. For instance, <body id="body" runat="server">