Add HTML Markup to Mobile Controls Output

Avoid clunky interfaces by using the Panel control’s Content Template.

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).

 


Figure 2. By using the Panel control's Content Template, you can inject markup into the output stream, letting you create better looking pages.

 

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].

 

 

 

Hide comments

Comments

  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Publish