Building the Mobile Application

The next step is to build the mobile application. One of the best parts about the Mobile Internet Toolkit is that you don't have to learn all the nuances of WAP and WML, because the server controls will determine what type of device is viewing the page and generate the appropriate code. You simply have to worry about what you want the application to do. While there isn't space to cover everything in the Mobile Internet Toolkit, you'll at least get an idea of how the pages function and how they make building mobile applications significantly easier than doing it by hand.

Creating the Main Menu

After you have the Mobile Internet Toolkit installed, you'll get a new type of project that you can create—the Mobile Web Application. It appears in the New Project dialog, as shown in Figure 14.1.

Figure 14.1. The new project dialog box.


The sample code's project name is WS_Ch14Mobile, but you can name yours whatever you want. When you click OK, Visual Studio .NET will create the project in your Web server and present you with a blank .aspx page. The first page you'll be building is a menu to the customer and product viewers. The order viewer will be accessible from a customer viewer. This page will have two links on it, as well as a title on the page created using a label control. To build the page, perform the following steps:

1.
Set the ID property of the form to frmMenu.

2.
Add a Label control to the form and give it the ID value of lblTitle. Set the Text property to Northwind Traders, and you may want to change the font to bold.

3.
Add a Link control to the form. Give it the ID property of lnkCustomers. Set the Text property to Customer Viewer and set the NavigateURL property to customers.aspx.

4.
Add a second Link control to the form. Give it an ID property of lnkProducts. Set the Text property to Product Catalog and set the NavigateURL property to products.aspx.

When you're done adding the controls, the page will look like Figure 14.2 in design view.

Figure 14.2. The main menu of the mobile application.


The link controls will let the user go to each of the other viewers. No back-end code is required for this page to work properly, so you're done coding the page. Be sure to save your work to prevent any unexpected problems.

You can test this page in a regular Web browser; however, to fully test it, it should be run in the simulator. Depending on the simulator you use, the steps to select the URL may be different. Using the Openwave 5.0 simulator, this page looks like Figure 14.3 when it is running. You should also remember that the links you built in this page are pointing to pages that don't exist yet.

Figure 14.3. The main menu as seen in the OpenWave simulator.


The user can navigate to the links using either the up/down buttons or the number keys on the phone. Of course, clicking any of the links at this point will earn you an error because the pages don't exist yet.

Creating the Customer Viewer

The next page you need to build is the customer list page. Because of the inherent limits in the mobile device, there will only be room for the company name, and even that may wrap onto more than one line. The first page will show a list of links to each of the customer records, and the user's device will allow him or her to scroll through the data. Selecting an item will bring up the contact name, phone, and fax number for the customer. The user will also be able to link to the orders placed by the customer from the customer details viewer.

For this portion of the application, you'll need two forms—one for the customer list, and one for the customer detail page. The order viewer will be taken care of using a separate .aspx page. To build this page, do the following:

1.
Create a new Mobile Web Form in your project and name it customers.aspx.

2.
Change the ID property of the form to frmList.

3.
Add a Label control to the form and give it the ID value of lblTitle. Set the Text property to Customer List, and you may want to change the font to bold.

4.
Add a List control to the form and give it the ID value of lstCustomers. Set the DataTextField value to CompanyName, and set the DataValueField value to CustomerLink. These two fields will let the list control read the fields from the DataSet that you'll bind to the control. You should also set the ItemsAsLinks property to True. This will make the List control use the value for each item as a URL, and the text for each item will be the text shown to the user.

5.
Add a second form to the .aspx file and set its ID property to frmDetails. This form will be placed just below the first one you created. Don't worry, you'll only see one at a time when the page is running.

6.
Add four Label controls and a Link control to the form. These controls will be used to show the customer details. The Text property of each should be deleted. The names are as follows:

  • lblCompanyName (the example uses a bold font for this)

  • lblContactName

  • lblPhone

  • lblFax

The Link control should be named lnkOrders and its Text property should be set to View Orders. You will populate the NavigateURL property at runtime.

When you are done adding the controls, the .aspx page will look like Figure 14.4 in design view.

Figure 14.4. The customer viewer menu.


The next step is to add the code behind the page. The code for this page is shown in Listing 14.5.

Listing 14.5. customers.aspx
Public Class pgCustomers
  Inherits System.Web.UI.MobileControls.MobilePage
  Protected WithEvents lblTitle As System.Web.UI.MobileControls.Label
  Protected WithEvents frmList As System.Web.UI.MobileControls.Form
  Protected WithEvents lstCustomers As System.Web.UI.MobileControls.List
  Protected WithEvents lblPhone As System.Web.UI.MobileControls.Label
  Protected WithEvents lblContactName As System.Web.UI.MobileControls.Label
  Protected WithEvents lblCompanyName As System.Web.UI.MobileControls.Label
  Protected WithEvents frmDetails As System.Web.UI.MobileControls.Form
  Protected WithEvents lblFax As System.Web.UI.MobileControls.Label
  Protected WithEvents lnkOrders As System.Web.UI.MobileControls.Link
  Private C As New NTCustomers.NorthwindCustomers()


#Region " Web Form Designer Generated Code "

  'This call is required by the Web Form Designer.
  <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

  End Sub

  Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Handles MyBase.Init
      'CODEGEN: This method call is required by the Web Form Designer
      'Do not modify it using the code editor.
      InitializeComponent()
  End Sub
#End Region

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Handles MyBase.Load
    If Request.QueryString("ID") <> "" Then
      Dim ds As DataSet = C.GetDetails(Request.QueryString("ID"))
      Dim dr As DataRow = ds.Tables(0).Rows(0)
      lblCompanyName.Text = dr("CompanyName")
      lblContactName.Text = dr("ContactName")
      lblPhone.Text = "Phone: " & dr("Phone")
      lblFax.Text = "Fax: " & dr("Fax")
      lnkOrders.NavigateUrl = "orders.aspx?id=" & Request.QueryString("ID")
      Me.ActiveForm = frmDetails
    Else
      Dim ds As DataSet = C.GetList
      lstCustomers.DataSource = ds
      lstCustomers.DataBind()
    End If
  End Sub

End Class

If this page is called with no value in the query string variable named ID, the page assumes it is being asked to list the customer data using the frmList page. For this, it uses the GetList method of the NorthwindCustomers service and binds this data to the List control.

After the user selects an item from the list, the link will contain a value for the ID and the other part of the Page_Load routine will run, filling the Label controls with the details for the customer. The NavigateURL property of the Link control will become

orders.aspx?id=#

The # will be replaced by the customer ID being viewed.

With the code complete, it's time to test this page in the simulator. When you select Customer Viewer from the main menu, you'll see the customer list, as shown in Figure 14.5. Remember that the links on the page are still pointing to other pages you haven't created yet.

Figure 14.5. The customer list, as seen in the simulator.


The limitations of the mobile device are evident here because of the long company names being used. However, you can scroll through the list and select a customer to view. When you do so, the page shown in Figure 14.6 will appear.

Figure 14.6. The customer details, as seen in the simulator.


If everything worked fine, you can move on to the next step—the order list and detail page.

Creating the Order Viewer

The next page is only accessible from the customer detail page, because it's necessary to have a customer ID to select an order. You could modify this page to list orders by date, regardless of customer, but considering the large number of orders in the sample database, this might not be the best approach.

The order viewer initially lists the orders, sorted by date, for a selected customer. The order date is shown, but you could show the order number if that was more useful for your business application. Selecting an order brings up information on when that order was placed and when it was shipped. A logical extension would be to show the line items for the order, but this would be difficult, given the page size restrictions on most mobile devices.

This page is similar in structure to the Customer Viewer, with some naming changes and a few less controls on the detail view. Perform the following steps to create the Order Viewer:

1.
Create a new Mobile Web Form in your project and name it orders.aspx.

2.
Change the ID property of the form to frmList.

3.
Add a Label control to the form and give it the ID value of lblTitle. Set the Text property to Order List, and you may want to change the font to bold.

4.
Add a List control to the form and give it the ID value of lstOrders. Set the DataTextField value to OrderDateConverted, and set the DataValueField value to OrderLink. These two fields will let the list control read the fields from the DataSet that you'll bind to the control. You should also set the ItemsAsLinks property to True. This will make the List control use the value for each item as a URL, and the text for each item will be the text shown to the user.

5.
Add a second form to the .aspx file and set its ID property to frmDetails. This form will be placed just below the first one you created. Don't worry, you'll only see one at a time when the page is running.

6.
Add three Label controls to the form. These controls will be used to show the order details. The Text property of each should be deleted. The names are as follows:

  • lblDetailsTitle (set the Text to Order Details)

  • lblOrderDate

  • lblShippedDate

When you are done adding the controls, the .aspx page will look like Figure 14.7 in design view.

Figure 14.7. Order viewer in design mode.


The next step is to add the code behind the page. The code for this page is shown in Listing 14.6.

Listing 14.6. orders.aspx
Public Class pgOrders
  Inherits System.Web.UI.MobileControls.MobilePage
  Protected WithEvents lstOrders As System.Web.UI.MobileControls.List
  Protected WithEvents lblTitle As System.Web.UI.MobileControls.Label
  Protected WithEvents frmList As System.Web.UI.MobileControls.Form
  Protected WithEvents lblShippedDate As System.Web.UI.MobileControls.Label
  Protected WithEvents lblOrderDate As System.Web.UI.MobileControls.Label
  Protected WithEvents lblDetailTitle As System.Web.UI.MobileControls.Label
  Protected WithEvents frmDetails As System.Web.UI.MobileControls.Form
  Private O As New NTOrders.NorthwindOrders()

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Handles MyBase.Load
    If Request.QueryString("oID") <> "" Then
      Dim ds As DataSet = O.GetDetails(CInt(Request.QueryString("oID")))
      Dim dr As DataRow = ds.Tables(0).Rows(0)
      lblOrderDate.Text = "Ordered: " & dr("OrderDateConverted")
      lblShippedDate.Text = "Shipped: " & dr("ShippedDateConverted")
      Me.ActiveForm = frmDetails
    Else
      Dim ds As DataSet = O.GetList(Request.QueryString("ID").ToUpper())
      lstOrders.DataSource = ds
      lstOrders.DataBind()
    End If
  End Sub

End Class

This page is called using a particular customer ID, sent via the query string variable called ID. When the page views order details, that order ID will be sent via the oID variable.

If this page is called with no value in the query string variable named oID, the page assumes it is being asked to list the customer data using the frmList page. For this, it uses the GetList method of the NorthwindOrders service and binds this data to the List control.

After the user selects an item from the list, the link will contain a value for the ID and the other part of the Page_Load routine will run, filling the Label controls with the details for the customer. The NavigateURL property of the Link control will become

orders.aspx?oid=#

The # will be replaced by the order ID being viewed.

With the code complete, it's time to test this page in the simulator. When you select View Orders from the details view of a customer, you'll see the order list, as shown in Figure 14.8.

Figure 14.8. The order list, as seen in the simulator.


The user can scroll up and down the list to see the orders placed by this customer. Selecting an order transfers the user to the order detail view, which is shown in Figure 14.9.

Figure 14.9. Order details, as seen in the simulator.


The last part of the application is to build the product catalog viewer, which is accessed from the main menu of the application.

Creating the Product Catalog

The last step in this application is to build the product catalog viewer. This page follows the same design pattern as the customer viewer that you did earlier. Initially, you'll see a list of products. Clicking on a product will bring up some of the important details of that product. Perform the following steps to create the product catalog:

1.
Create a new Mobile Web Form in your project and name it products.aspx.

2.
Change the ID property of the form to frmList.

3.
Add a Label control to the form and give it the ID value of lblTitle. Set the Text property to Product List, and you may want to change the font to bold.

4.
Add a List control to the form and give it the ID value of lstProducts. Set the DataTextField value to ProductName, and set the DataValueField value to ProductID. These two fields will let the list control read the fields from the DataSet that you'll bind to the control.

5.
Add a second form to the .aspx file and set its ID property to frmDetails.

6.
Add four Label controls to the form. These controls will be used to show the product details. The Text property of each should be deleted. The names are as follows:

  • lblProductName (set font to bold)

  • lblPrice

  • lblQuantityPerUnit

  • lblUnitsInStock

When you are done adding the controls, the .aspx page will look like Figure 14.10 in design view.

Figure 14.10. The product viewer in design mode.


The next step is to add the code behind the page. The code for this page is shown in Listing 14.7.

Listing 14.7. products.aspx
Imports System.Data

Public Class pgProducts
  Inherits System.Web.UI.MobileControls.MobilePage
  Protected WithEvents frmList As System.Web.UI.MobileControls.Form
  Protected WithEvents lstProducts As System.Web.UI.MobileControls.List
  Protected WithEvents lblTitle As System.Web.UI.MobileControls.Label
  Protected WithEvents frmDetails As System.Web.UI.MobileControls.Form
  Protected WithEvents lblProductName As System.Web.UI.MobileControls.Label
  Protected WithEvents lblPrice As System.Web.UI.MobileControls.Label
  Protected WithEvents lblQuantityPerUnit As System.Web.UI.MobileControls.Label
  Protected WithEvents lblUnitsInStock As System.Web.UI.MobileControls.Label
  Private S As New NTProducts.NorthwindProducts()
#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()>
    Private Sub InitializeComponent()
    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

  Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
 Handles MyBase.Load
    Dim ds As DataSet = S.GetList
    lstProducts.DataSource = ds
    lstProducts.DataBind()
  End Sub

  Protected Sub lstProducts_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI
.MobileControls.ListCommandEventArgs) Handles lstProducts.ItemCommand

    Dim ds As DataSet = S.GetDetails(CInt(e.ListItem.Value)) 
    Dim dr As DataRow = ds.Tables(0).Rows(0)
    lblProductName.Text = dr("ProductName").ToString()
    lblPrice.Text = "Price: " & CDbl(dr("UnitPrice")).ToString("C")
    lblQuantityPerUnit.Text = "Qty: " & dr("QuantityPerUnit").ToString()
    If dr("UnitsInStock") > 0 Then
      lblUnitsInStock.Text = "Stock: " & dr("UnitsInStock").ToString() & " units"
    Else
      lblUnitsInStock.Text = "Out of Stock"
    End If
    Me.ActiveForm = frmDetails
  End Sub
End Class

This page is initially called with no parameters on the query string, and the Page_Load event fills the List control with the records sent back from the NorthwindProducts service. Because the products' ID values match with the order, they are placed into the list.

After the user selects an item, the ItemCommand event is triggered, and the value of the product is passed through the e variable. This code then creates a new DataSet using the GetDetails method of the NorthwindProducts service.

With the code complete, it's time to test this page in the simulator. When you select View Orders from the details view of a customer, you'll see the product list, as shown in Figure 14.11.

Figure 14.11. The product list, as seen in the simulator.


The user can scroll up and down the list to see the products in the catalog. Selecting a product opens the product detail view, shown in Figure 14.12.

Figure 14.12. Product details, as seen in the simulator.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset