Export (0) Print
Expand All

Walkthrough: Creating Web Pages for Mobile Devices 

Visual Studio 2005

Mobile development in ASP.NET does not differ much from traditional ASP.NET browser-based Web development. ASP.NET exposes a System.Web.Mobile namespace devoted specifically to Web development. You can create a Web page from the MobilePage base class and add controls from the System.Web.Mobile namespace.

Mobile development follows the standard .NET Framework event-driven model in which your application responds to user requests, button clicks, and so on.

In this walkthrough, you will create two Web pages that inherit from the MobilePage class and that are designed for a mobile device. The first page will have a mortgage calculator that you can use to determine loan information. The second page displays data in a format that is easy to page through on a small device. Tasks illustrated in this walkthrough include:

  • Creating an ASP.NET Web page that displays output on a device such as a mobile phone.

  • Adding paging so that users with small devices can move effectively through long lists.

  • Testing pages with a device emulator.

To complete this walkthrough, you will need:

  • Ability to run the page on a device such as a mobile phone. Alternatively, you can use one of a number of emulators. In this walkthrough, it is assumed that you have an emulator and that it is available on the same computer as your Web server.

    NoteNote

    You can run this walkthrough even if you have only a desktop browser. However, an emulator will more directly allow you to see the functionality of the controls you will use in this walkthrough.

  • Access to Microsoft Internet Information Services (IIS) and permission to create a new application in IIS. It is recommended that you use a local copy of IIS for the pages in the application, which makes it easiest to test the application with your emulator. However, if you cannot create an application using IIS, you might still be able to use an emulator with the Microsoft Visual Web Developer Web server. For details, see the "Next Steps" section at the end of this walkthrough.

If you have already created a Web site in Visual Web Developer (for example, by following the steps in Walkthrough: Creating a Basic Web Page in Visual Web Developer), you can use that Web site and skip to the next section, "Creating the Mortgage Calculator." Otherwise, create a new Web site and page by following these steps.

To create a new local IIS Web site under the IIS root

  1. Open Visual Web Developer.

  2. On the File menu, choose New, and then choose Web Site.

    The New Web Site dialog box appears.

  3. Under Visual Studio installed templates, select ASP.NET Web Site.

  4. Click Browse.

    The Choose Location dialog box appears.

  5. Click the Local IIS tab.

  6. Select Default Web Site.

  7. Click the Create New Web Application button.

    A new application is added under Default Web Site.

  8. In the box for the new Web site, type DeviceWalkthrough and then click Open.

    You are returned to the New Web Site dialog box with the Location box filled in with http://localhost/DeviceWalkthrough.

  9. In the Language list, select the programming language you prefer to work in.

    The programming language you choose will be the default for your Web site. However, you can use multiple languages in the same Web application by creating pages and components in different programming languages.

  10. Click OK.

    Visual Web Developer creates the new Web site and opens a new page named Default.aspx.

For the walkthrough, you will create a page that inherits from the MobilePage class and that contains a simple mortgage calculator. The calculator prompts the user to enter a loan amount, a loan term in years, and the interest rate. The calculator can determine the monthly payment for that loan.

In this walkthrough, you will use controls from the System.Web.Mobile namespace that are specifically designed for devices that cannot display as much information as a desktop browser. Instead, the controls present information in separate views that users can switch between.

To begin, you will delete the Default.aspx page and create a mobile page in its place.

To add a mobile page

  1. Right-click the Default.aspx page in Solution Explorer and choose Delete.

  2. Click OK in the dialog box.

  3. Right-click the application in Solution Explorer and choose Add New Item.

  4. Choose Mobile Web Form under Visual Studio installed templates.

  5. Name the mobile Web page MobileCalculator.aspx and then click Add.

    A Web page that inherits from the MobilePage class is created and added to your Web site.

Now that you have a mobile page, you will add controls that allow users to enter mortgage information.

To add controls for entering mortgage information

  1. In the MobileCalculator.aspx page you created in the last procedure, make sure you are in Design view.

    You will see a Form control with the default name of form1.

  2. From the Mobile Web Forms folder of the Toolbox, drag controls onto form1 and set their properties as noted in the following table.

    Control Property settings

    Label

    ID = HeadingLabel

    Text = Loan Calculator

    TextBox

    ID = PrincipalText

    Text = Principal

    TextBox

    ID = TermText

    Text = Term in Years

    TextBox

    ID = RateText

    Text = Annual Rate

    Command

    ID = Calculate

    Text = Calculate

After you have created the Form where users enter their loan information, you will create another Form that will show the results.

To create a form to display mortgage calculation results

  1. From the Mobile Web Forms folder of the Toolbox, drag a Form control to the design surface.

    The Form control is assigned the default ID of Form2.

  2. From the Mobile Web Forms folder of the Toolbox, drag controls onto Form2 and set their properties as noted in the following table.

    Control Property settings

    Label

    ID = LoanDetailsLabel

    Text = Loan Details

    Label

    ID = PaymentLabel

    Text = Payment

    Command

    ID = ReturnToCalculator

    Text = Return to Calculator

You can now create the code that will calculate the loan information and display it.

To calculate the mortgage information and display results

  1. If you are using C#, add a reference to the Microsoft.VisualBasic namespace so you can use the Pmt method to calculate the payment information. Follow these steps:

    1. In Solution Explorer, right-click the Web site name and choose Property Pages.

    2. Click Add Reference.

    3. In the .NET tab, select Microsoft.VisualBasic.dll and then click OK.

    4. In the Property Pages dialog box, click OK.

  2. In the form1 control, double-click the Calculate button to create a Click event handler, and then add the following code.

    protected void Calculate_Click(object sender, EventArgs e)
    {
        // Get values from the form
        Double principal = Convert.ToDouble(PrincipalText.Text);
        Double apr = Convert.ToDouble(RateText.Text);
        Double monthlyInterest = (Double)(apr / (12 * 100));
        Double termInMonths = Convert.ToDouble(TermText.Text) * 12;
        Double monthlyPayment;
    
        // Calculate the monthly payment
        monthlyPayment = Microsoft.VisualBasic.Financial.Pmt(
           monthlyInterest, termInMonths, -principal, 0,
           Microsoft.VisualBasic.DueDate.BegOfPeriod);
    
        // Change to the other form
        this.ActiveForm = this.form2;
    
        // Display the resulting details
        string detailsSpec = "{0} @ {1}% for {2} years";
        LoanDetailsLabel.Text = String.Format(detailsSpec,
            principal.ToString("C0"), apr.ToString(), TermText.Text);
        PaymentLabel.Text = "Payment: " + monthlyPayment.ToString("C");
    }
    
    

    The code gathers the values from the text boxes, converts them to appropriate data types, and then uses them as parameters for the Visual Basic Pmt function to calculate the monthly cost of the mortgage. (You can use the Visual Basic function in any language as long as you fully qualify the function call with the namespace.) After calculating the monthly amount, the code switches to the second Form control and displays the results in the respective Label controls.

  3. In the Form2 control, double-click the Command control to create a Click event handler, and then add the following highlighted code.

    protected void ReturnToCalculator_Click(object sender, EventArgs e)
    {
        this.ActiveForm = this.form1;
    }
    
    

Testing the Calculator

You are now ready to test the calculator. You can test the calculator in a desktop browser. However, a more interesting test is to use your device emulator.

To test the calculator

  1. Press CTRL+F5 to see your page in the default browser, and to get the exact URL.

    The first form appears on the page.

  2. Start your emulator and connect to the URL for your page.

  3. When the page appears in the emulator, enter a loan amount of 100000, the number of years as 30, and a percentage rate of 5, and then click Calculate.

    The calculator is replaced by the results view, with the result 534.59.

Many devices have small display areas, making it impractical to display long lists. ASP.NET provides an ObjectList control designed for mobile devices that can automatically display an entire screen of information at one time and provide links so that users can move forward and backward in the list.

In this section of the walkthrough, you will create a data listing that displays more information than can be shown on one screen of even a desktop browser. By adding an ObjectList control, you will automatically add paging capability to the output, appropriately sized to the browser the user has.

The first thing you need to do is create a mobile Web Forms page and add an ObjectList control to it.

To add a mobile Web Forms page and create an ObjectList control on it

  1. Right-click the application in Solution Explorer and choose Add New Item.

  2. Choose Mobile Web Form under Visual Studio installed templates.

  3. Name the page MobilePaging.aspx and then click Add.

    A Web page that inherits from the MobilePage class is created and added to your project. The page includes a Form control named form1 on it. You can only use controls in the System.Web.Mobile namespace on a page that inherits from the MobilePage class.

  4. From the Mobile Web Forms folder of the Toolbox, drag an ObjectList control to the design surface and place it on form1.

    An ObjectList control is added to your page. It shows a generic set of data that gives you an idea of what the control will look like when it is rendered on the client.

After the ObjectList control is created, you need to create data that will populate the control.

To create the data

  1. In the MobilePaging.aspx page, switch to Design view and double-click the empty design surface to create an empty event handler for the page Load event.

  2. In the empty handler, add the following code.

    protected void Page_Load(object sender, EventArgs e)
    {
        // Create and fill an array of strings
        string[] listItems = new string[25];
        for (int i = 0; i < 25; i++)
            listItems[i] = 
                String.Format("This is item {0}.", i);
    
        // Bind the ObjectList to the Items
        this.ObjectList1.DataSource = listItems;
        this.ObjectList1.DataBind();
    }
    
    

    The code creates an array of string objects and populates it with strings. It then binds that array to the ObjectList control.

You can now test the page.

To test the page

  1. Press CTRL+F5 to run the page.

    The page is displayed with a long list of numbered items.

  2. Start your device emulator and type in the URL of the page (http://localhost/DeviceWalkthrough/paging.aspx).

    Notice that the data is displayed in a long list.

Adding Paging

Now that you have a page that displays data, you can add paging so that the display is automatically sized to the size of the screen in the device.

To add paging

  1. In the MobilePaging.aspx page, switch to Design view and then select form1.

  2. In the Properties window, set the Paginate property to true.

  3. Select the ObjectList control and, in the Properties window, set the ItemsPerPage property to 5.

You can now test paging.

To test paging

  1. Press CTRL+F5 to run the page in Internet Explorer.

    The page is displayed with a page of data and a navigation control.

  2. Use the Next and Previous links to move through the data.

  3. In your device emulator, enter the URL of the page.

    The emulator displays a page of data (five items). If necessary, you can scroll the page up or down.

  4. Use the links to move to other pages showing more items.

In this walkthrough, you have created a page that is tailored to devices by taking advantage of controls that are designed for devices with limited display areas. ASP.NET and Visual Web Developer include facilities for creating applications for a wide range of devices and browsers.

You also might want to explore the following aspects of devices:

  • Depending on what emulator you use, you might be able to integrate the emulator into Visual Web Developer. In Solution Explorer, right-click the mortgage calculator page and choose Browse With. Click Add and type the information for your emulator to add it to the list of browsers. You can then use the Browse With command to view a page in the emulator. Note that not all emulators are supported.

Community Additions

ADD
Show:
© 2014 Microsoft