asp:Feature
LANGUAGES: HTML
TECHNOLOGIES: ASP.NET Mobile Controls
Add HTML Markup to Mobile Controls Output
Avoid clunky interfaces by using the Panel control's Content Template.
By Andy Wigley
When you build mobile Web applications with the ASP.NET Mobile Controls (formerly called the Mobile Internet Toolkit), controls render by default in a top-down list, one on top of another. That's fine for small-screen devices such as a mobile phone, but it doesn't make the most of larger screen devices, such as a Pocket PC or Smartphone.
Take the example of a simple login form with two Label controls providing prompts and two Textbox controls to accept input. If rendered as a top-down list, this doesn't look good on a large-screen device. If you set the BreakAfter property of the label controls to False, at least the prompt and the Textbox appear on the same line. The BreakAfter property, like all style properties in ASP.NET Mobile Controls, is advisory, and setting it to False won't alter the layout on small-screen devices because the runtime won't insert a line break if it's not appropriate for the requesting device. This improves the layout but it still doesn't look too pretty (see Figure 1).
Figure 1. By default, Mobile
Controls appear in a top-down list. Even after setting the label controls'
BreakAfter property to false, pages do not look well formatted.
To make your output look great, use the Panel control's Content Template. You can use this template to inject markup into the output stream, and in this case, you can use it to format this page as an HTML Table.
First, drag Panel controls onto the form, positioning one panel between every control, one at the top, and another at the bottom of the form. Next, drag a DeviceSpecific control onto each Panel. Then switch to HTML View in Visual Studio .NET and enter a Choice filter statement in each Panel to select only HTML clients, with the appropriate markup inside a Content Template to inject markup for an HTML Table in the appropriate places:
|
User ID:
|
|
|
... (continues for other controls)
The Choice filter ensures that the HTML markup is injected only when the client device requires HTML markup, so this new code does not affect the way the page works on other browsers such as mobile phone WML browsers. The end result is a page that looks great on HTML browsers (see Figure 2).
Andy Wigley is the principal technologist at Content Master, which focuses on mobile technologies. He has particular expertise with the Microsoft ASP.NET Mobile Controls and the .NET Compact Framework. Andy is author of Microsoft .NET Compact Framework (Microsoft Press). E-mail Andy at mailto:[email protected].
0 comments
Hide comments
|
