Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Mobile-enable Your Existing Web Apps with ASP.NET 2.0 : Page 3

Besides adding a multitude of new features and more than 30+ new controls, Microsoft also made every control in ASP.NET 2.0 mobile aware. Learn how to leverage these new mobile capabilities and what bugs to avoid while mobile-enabling your Web-based applications.


advertisement
Pagination
How do you handle 100 controls generated through code in a page? Add a new page called PaginatingContent.aspx to your project. Add two controls to the page, a Panel and a ContentPager. Set the ContentPager's ControltoPaginate property as Panel1 and specify ItemsPerPage property = 4. Paste the following code in the code view. This code adds 100 buttons on the page in the panel during the PageLoad event:

Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load ' Add 100 labels to the a panel on the page so that ' several pages are required to display all the content. Dim i As Integer For i = 0 To 100 Dim tempLabel As New Label tempLabel.Text = "Label " & i & "</br>" Panel1.Controls.Add(tempLabel) Next i End Sub

Figure 4. Paginating Content: Use the ContentPager control to display a few label controls per page, as well as the option to browse all available labels.



100 controls on a page is a bit too much content for mobile devices. That's where ContentPager control comes handy. Specify the control(Panel) to paginate via the ControltoPaginate property and it paginates the data depending on the temsperPage property specified. In this case, I've specified four items per page. Browse this page to see how it displays in the browser. The page displays four label controls per page with a navigation option to browse the 100 labels (as shown in Figure 4).

Most other controls know how to paginate themselves. For example, the GridView has a property called AllowPaging, which, if set to True, causes the GridView to paginate it's content depending on the PageSize property you set. Using the in-built properties of controls and the ContentPager control, you are be able to manage the limited screen real estate on mobile devices.

Customizing Content for Specific Devices
You often need to customize content based on the device which is accessing your application. ASP.NET 2.0 really simplifies this by providing you with some simple filters. Add a new page called contentfilter.aspx to your project. Switch to HTML Source View by clicking on the tab below and paste the following code on one line:

<asp:Label ID="Label1" Runat="server" UP:Text="Welcome Mobile Browser" IE:Text="Hello Internet Explorer" Netscape6to9:Text="Hello Netscape user"< </asp:Label<

Now browse the page in the following browsers: a mobile WAP browser, Internet Explorer, and Netscape. In each browser, the Label displays a different text based on the requesting device. UP, IE, and Netscape6to9, are browser ids stored on each Web server machine, in the following directory: %windir%\Microsoft.NET\Framework\v2.0.40607\CONFIG\Browsers.

There are various ie.browser, netscape.browser, openwave.browser, etc. Each of these .browser files describes the characteristic of various devices and the browsers thereby enabling you to filter and target a particular device or browser. The Framework generates HttpBrowserCapabilities from a compiled object that is based on the .browser files. Filters can be used programmatically by accessing strongly-typed capabilities through Request.Browser as shown in the example below:

If Request.Browser.IsMobileDevice Then 'Do something for mobile devices ElseIf Request.Browser.IsColor Then 'do something for Color devices ElseIf Request.Browser.PreferredRenderingType = "wml11" Then ' Render WML content End If

Familiarize yourself with these .browser files to understand the various properties of the exposed devices. Microsoft will be constantly updating them to ensure easy support for the latest devices and browsers. However the good part is that if there is a device missing which you want to target, you need only create your own custom .browser file.

Mobile-enabled!
The ASP.NET 2.0 environment is a complete mobile Web application environment that has made mobile-enabling of Web applications considerably easier. But that's not all. It is also extremely extensible, allowing you to extend the environment and target even custom devices or devices which are not yet supported directly by Microsoft. If you're considering building mobile Web applications, this is a platform that you surely cannot ignore.



Sanjay Shetty is the CEO of Wireless Strategist & Consultants, a consultancy for mobility, design, architecture, and Microsoft.NET. He is the Microsoft Regional Director in Mumbai, India.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date