Organizing Content with Containers
ASP.NET mobile controls use two container controls to organize the contents of an ASP.NET mobile Web page: the Form control and the Panel control. These containers create logical groupings of controls. They also assist in applying styles to specific areas of a page. In addition, they help ASP.NET render the pages.
.gif) Note |
|---|
Visual Studio sets the initial size of all the container controls to a default setting. The size expands as controls are added to the container; you cannot change the size of a container using resize handles. |
Mobile Web Page
Containers, content, and controls for mobile devices reside in mobile Web pages derived from the MobilePage class. You can have mobile Web pages in any ASP.NET Web site alongside ASP.NET Web pages. A mobile Web page is associated with a URL that points to a Web server. Each MobilePage instance must contain at least one Form control, which in turn contains the page's text and controls. Unlike ASP.NET Web pages, a mobile Web page can contain more than one Form control. All controls except the StyleSheet control must reside in a Form control.
When you create a new mobile Web page in Visual Studio, the first form is added to the page by default.
Control Placement
Controls are placed on a MobilePage in sequential order. This is different from ASP.NET Web pages, which support side-by-side controls and absolute positioning of controls. Because of the wide range of hardware devices that ASP.NET mobile controls support, applications cannot guarantee the side-by-side layout of controls. This is particularly true on WML devices. However, many of the ASP.NET mobile controls expose a BreakAfter property. For most devices, especially those supporting HTML, setting this property to false causes the next control to start on the same line.
| Note |
|---|
Design view in Visual Studio does not display controls side by side, even if BreakAfter is set to false. |
ASP.NET mobile controls do not support absolute positioning of controls. In Design view, you can add controls to a form or panel in the order that you want them to appear to the user, but you cannot define their absolute placement when they are rendered on the screen of a mobile device.
Visual Studio enables you to customize the appearance of mobile Web pages and controls for specific devices. This flexibility enables you to ensure that your application has a functional and attractive appearance on the devices on which it will be viewed. For more information, see Customizing ASP.NET Mobile Web Controls for Specific Devices.
When dragging a control from the Toolbox onto a form or panel, make sure that you drop the control at the proper location in the page to position it correctly.
Form
Mobile Web pages display all their content and controls in Form controls. Every page must have at least one form, and at run time the page displays one form at a time. The form being displayed is the active form. When a page loads, by default the application uses the first form defined on the page as the active form. The application can programmatically set the active form using the ActiveForm property, either when the page is loaded or in response to a user selection.
A mobile page has a limited ability to preserve state information. Organizing pages into forms enables you to pass richer state information from one form to the next, instead of passing it between pages. This helps reduce the amount of data that the application must exchange with the server.
In addition, the devices on which ASP.NET mobile Web pages display usually have smaller screen areas than browsers for desktop applications. Without forms, you would need to create a larger number of pages in an application to display the equivalent amount of information. Rather than break applications into more pages, you can break pages into forms and display the forms one at a time. This capability assists you in maintaining a one-to-one relationship between the number of pages in the desktop and mobile versions of your applications.
All the forms on a page share the same page code. Therefore, multiple forms can use the same properties and methods.
You must make certain trade-offs when deciding whether to insert a group of controls into a form on an existing page, or to put them on a new page. Some of the factors to consider are:
Load time. When a page is loaded, all the forms on the page are instantiated. Pages with many forms take longer to load than pages with few forms.
Navigation time. Moving from form to form on a single page is faster than loading a new page. This is true even if the new page contains few controls.
State information. Richer state information is preserved from form to form than from page to page.
Addressability. All pages in an application have a distinct URL. Only the first form on a page is addressable from another page.
When you create a new mobile Web page in Visual Studio, the page contains one empty form. You can add additional forms from the Toolbox. You also use the Toolbox to add controls to individual forms. To add textual content, type the text directly into the form.
Panel
Use the Panel control to group controls together within a form. This enables you to apply a StyleSheet object to the group as a whole. For more information, seeIntroduction to the StyleSheet Control.
Panels also assist applications in determining pagination. ASP.NET attempts to keep all the controls in a panel on the screen at the same time.
To add panels to an application, drag them from the Toolbox. All controls in a panel inherit the panel's styles. You can insert panels into forms or into other panels. When an application hides or displays a panel, it applies the same actions to the panel's controls. In addition, applications can use panel controls as containers for dynamically created controls.
See Also
Concepts
Introduction to the Form Control
Introduction to the Panel Control