Browse DevX
Sign up for e-mail newsletters from DevX


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

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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Dynamic Image Control
The Dynamic Image control helps to solve one of the most common problems in mobile development. As you know, different devices support different image types. For instance, the Web supports .jpg or .gif image formats. But on WAP phones, the default image format is .wbmp. PocketPCs, on the other hand, support .jpg. You need to have different images for different formats and you need to write code to determine the device which is accessing the page. The Dynamic Image control solves this problem by retrieving the image type from a variety of sources:

Figure 1. The DynamicImage Control: This control auto-generates different image formats.

  • The System.Drawing.Image object.
  • An array of bytes specified in the ImageBytes property.
  • A file specified in the DyanmicImage.ImageFile property.
  • An image generation service at the URL specified in the ImageGeneratorUrl property.
Set one of the image source properties listed above and the control auto-generates an appropriate image type depending on the requesting browser. Add any .gif or .jpg image file you have on disk to the project you've created. Specify the ImageFile property of the DynamicImage control as the image file. Now run the application. The application loads in Internet Explorer, which is the default browser. Now copy the URL in the browser and paste this into any WAP browser (the resources section directs you to one of the more common WAP browsers). You know that WAP browsers support only .wbmp formats, so typically this page should load up with no image to display. However, the DynamicImage control in ASP.NET 2.0 auto-generates the correct format (shown in Figure 1) to different browsers. It displays the image in the original .jpg format in Internet Explorer and shows it in .wbmp for the Openwave WAP simulator.

ASP.NET 2.0 handles textual representation of information just as smoothly. To demonstrate this, we'll use the Calendar control. Drop a Calendar control onto the same page, and see how it is displayed. As you may have guessed, ASP.NET 2.0 formats the presentation of the control so that it's suitable to the device which is browsing the application. The calendar can't be shown in the full rich format on a WAP phone, so instead it's shown as a series of links with different options to choose a date from. Figure 2 is an example of the page with a Calendar control added to it and displayed in the WAP phone simulator.

Figure 2. The Calendar Control: Here, this control is generated as links on a WAP phone simulator.

Managing Screen Real Estate
Previously, Microsoft had a model where a single ASPX page could contain multiple forms. This paradigm is different than in Web development, where you typically have one form per Web page. In order to unify both the models, ASP.NET 2.0 offers two controls: MultiView and View. These controls help in splitting the page content across multiple views that you control. When the page loads all of the content at the same time, the user is shown snapshots present in different views.

Add a new form to the project, call it Multipg.aspx. On this page, drop a MultiView control from the toolbox. Once you have the MultiView control on the page, drop two View Controls into the MultiView control. Then add a label to each View control. Set the text property of the first label to "You are in View 1" and set the second Label's text property to "You are in View 2." Now drop two Button controls in each view and change the text property to "Take me to View 2" and "Take me to View 1" respectively, as shown in Figure 3.

Switch to code view by right clicking the form and selecting "View Code." Paste the following code in the code view:

Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Me.MultiView1.SetActiveView(View2) End Sub Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Me.MultiView1.SetActiveView(View1) End Sub Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) _ Handles Me.Load Me.MultiView1.SetActiveView(View1) End Sub

Figure 3. Splitting the Page: This image shows how to use the Multiview and View controls.

The code handles three events:

  • The Page Load event where the first View control is set as the ActiveView.
  • Code to handle the button1 click event.
  • The button2 click event where the ActiveView is set to View2 and View1, respectfully.
Right click the page in solution explorer and choose "View in Browser" to see how it displays. One View control and it's contents are displayed. Clicking on the button moves you from one view to the other.

These controls allow you to have similar content on one page but have the flexibility to display parts of the content in small packets to end users.

In addition to using just the one MultiView control, you can also use multiple MultiView controls on a page with a number of View controls within them, and switch between MultiView controls as well. To achieve this, simply make a MultiView control visible and set the ActiveView to a View control in it:

Me.MultiView2.SetActiveView(View3) Me.MultiView2.Visible = True Me.MultiView1.Visible = False

These controls allow you to break content into manageable parts—but only if you know the amount of content you have. Oftentimes, you'll need to paginate data and you won't know how much content there is, since it might be retrieved from some data source or thru code.

Comment and Contribute






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



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