Webmaster''''s Guide to the Wireless Internet part 43 doc

392 Chapter 9 • Microsoft Mobile Internet Toolkit <Mobile:Command runat="server" onClick="ComparePassword">Register</Mobile:Command> The onClick attribute indicates the subroutine to call when the user clicks on it. In this case, the subroutine to be invoked is ComparePassword. Sub ComparePassword(sender as Object, e as EventArgs) if Password1.Text.Length <8 then message.Text = "Password must have at least 8 characters" Exit sub end if if Password1.Text <> Password2.Text then message.Text = "Your passwords do not match." else welcomeMessage.Text += UserName.Text ActiveForm = Welcome end if End sub Within the subroutine, you can simply reference the controls using their IDs. For example, if you want to check for the length of the password that the user has entered, you can simply reference the control using: Password1.Text.Length If the length of the password is less than eight, we set the Text property of the Label control named message to contain the error message: message.Text = "Password must have at least 8 characters" We also check to see if the two passwords entered are the same. If they are, we print a welcome message on the second form: welcomeMessage.Text += UserName.Text The second form is invoked by using the ActiveForm property: ActiveForm = Welcome www.syngress.com 159_wg_wi_09 10/22/01 5:29 PM Page 392 Microsoft Mobile Internet Toolkit • Chapter 9 393 List Selection Another form of user input is via a selection list. Consider the example in Figure 9.24. Figure 9.24 Lists.aspx <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" %> <%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <Mobile:Form runat="server"> <Mobile:Label runat="server">Membership Types</Mobile:Label> <Mobile:List runat="server" id="Membership"> <Item value="STU" text="Students"/> <Item value="PRO" text="Professionals"/> <Item value="LIB" text="Libraries"/> </Mobile:List> </Mobile:Form> The <Mobile:List> control provides the ability to display lists of items either as a static list or interactive selection.The page in Figure 9.24 causes the screens on the Pocket PC and the UP.SDK (see Figure 9.25 and Figure 9.26, respec- tively) to be displayed. www.syngress.com Figure 9.25 Viewing the List on the Pocket PC 159_wg_wi_09 10/22/01 5:29 PM Page 393 394 Chapter 9 • Microsoft Mobile Internet Toolkit Selecting from a List A static list is not very exciting, not to mention not very useful.A list is useful only if the user can choose from it. In the example in Figure 9.27, we have mod- ified the previous program to make the list item selectable. Figure 9.27 Selectlists.aspx <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" %> <%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <script runat="server" language="vb"> Sub Select_Item(sender as Object, e as ListCommandEventArgs) Dim Fees as integer Dim MembershipType as String = e.ListItem.Value Select Case MembershipType Case "STU" Fees = 38 Case "PRO" Fees = 95 Case "LIB" Fees = 1995 End Select FeesPayable.Text = "The fees payable for " & e.ListItem.Text & " is $" & Fees ActiveForm = FormTwo End Sub www.syngress.com Figure 9.26 Viewing the List on the UP.SDK Continued 159_wg_wi_09 10/22/01 5:29 PM Page 394 Microsoft Mobile Internet Toolkit • Chapter 9 395 </script> <Mobile:Form runat="server" id="FormOne"> <Mobile:Label runat="server">Membership Types</Mobile:Label> <Mobile:List runat="server" id="Membership" OnItemCommand="Select_Item"> <Item value="STU" text="Students"/> <Item value="PRO" text="Professionals"/> <Item value="LIB" text="Libraries"/> </Mobile:List> </Mobile:Form> <Mobile:Form runat="server" id="FormTwo"> <Mobile:Label runat="server" id="FeesPayable" /> </Mobile:Form> Note that we have added another attribute, OnItemCommand, to the <Mobile:List> control.This attribute contains the name of the subroutine to be invoked when the list item is selected (see Figure 9.28). Sub Select_Item(sender as Object, e as ListCommandEventArgs) Dim Fees as integer Dim MembershipType as String = e.ListItem.Value Select Case MembershipType Case "STU" Fees = 38 Case "PRO" www.syngress.com Figure 9.27 Continued Figure 9.28 List Items Are Selectable 159_wg_wi_09 10/22/01 5:29 PM Page 395 396 Chapter 9 • Microsoft Mobile Internet Toolkit Fees = 95 Case "LIB" Fees = 1995 End Select FeesPayable.Text = "The fees payable for " & e.ListItem.Text & " is $" & Fees ActiveForm = FormTwo End Sub Within the subroutine, we use a Select-Case statement to find the fees payable; the results are shown in Figure 9.29. Data Binding List Items A list is much more useful if you can dynamically bind it to a list of items.The code in Figure 9.30 illustrates how you can bind a list of items using the ArrayList class in VB.NET. Figure 9.30 Databind.aspx <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" %> <%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <script runat="server" language="vb"> Sub Menu_Item(sender as Object, e as ListCommandEventArgs) message.Text = "Fees for " & e.ListItem.Text & " membership is $" & e.ListItem.Value ActiveForm = FormTwo www.syngress.com Figure 9.29 Displaying the List Item Selected Continued 159_wg_wi_09 10/22/01 5:29 PM Page 396 Microsoft Mobile Internet Toolkit • Chapter 9 397 End Sub Private Class Member Dim mType as String Dim mFees as Single Public Sub New(t as String, f as Single) mType = t mFees = f End Sub Public Property Type Get Type = mType End Get Set mType = Value end Set End Property Public Property Fees Get Fees = mFees End Get Set mFees = Value end Set End Property End Class Sub Page_Load (send as Object, e as EventArgs) if not (IsPostBack) then Dim array as new ArrayList() www.syngress.com Figure 9.30 Continued Continued 159_wg_wi_09 10/22/01 5:29 PM Page 397 398 Chapter 9 • Microsoft Mobile Internet Toolkit array.Add(new Member("Students", 38)) array.Add(new Member("Professionals", 95)) array.Add(new Member("Libraries", 1995)) Menu.DataSource = array Menu.DataBind() end if End Sub </script> <Mobile:Form runat="server" id="FormOne"> <Mobile:Label runat="server" id="test">Membership Types</Mobile:Label> <Mobile:List runat="server" id="Menu" DataTextField="Type" DataValueField="Fees" onItemCommand="Menu_Item"/> </Mobile:Form> <Mobile:Form runat="server" id="FormTwo"> <Mobile:Label runat="server" id="message"/> <Mobile:Link runat="server" navigateURL="#FormOne">Back</Mobile:Link> </Mobile:Form> When the page is loaded, the result is the screen shown in Figure 9.31. www.syngress.com Figure 9.30 Continued Figure 9.31 Data Binding a List 159_wg_wi_09 10/22/01 5:29 PM Page 398 Microsoft Mobile Internet Toolkit • Chapter 9 399 Dissecting the Codes We first create an array (using the ArrayList class) when the page is loaded.An ArrayList class is a single dimensional array that can grow dynamically when elements are added to it. Sub Page_Load (send as Object, e as EventArgs) if not (IsPostBack) then Dim array as new ArrayList() array.Add(new Member("Students", 38)) array.Add(new Member("Professionals", 95)) array.Add(new Member("Libraries", 1995)) In our case, we have added three Member objects to the array. Once the objects are added to the array, we bind the array to the list: Menu.DataSource = array Menu.DataBind() You may have noticed that we have this line: if not (IsPostBack) then The IsPostBack property contains a Boolean value that indicates whether the page is loaded in response to the client’s postback, or if the page is loaded for the first time.The IsPostBack property will be true if the user clicks on the Back link to return to the main page.We want to make sure that the array is not recreated when the user posts back the page (though it is harmless in this case to recreate the array). NOTE The .NET framework automatically sets the IsPostBack property. There is no need for the programmer to set it. The <Mobile:List> control also contains two additional attributes— DataTextField and DataValueField. <Mobile:List runat="server" id="Menu" DataTextField="Type" DataValueField="Fees" onItemCommand="Menu_Item"/> www.syngress.com 159_wg_wi_09 10/22/01 5:29 PM Page 399 400 Chapter 9 • Microsoft Mobile Internet Toolkit The DataTextField attribute binds the Type property of the Member class to the List item’s Text property.The DataValueField attribute binds the Value property of the Member class to the List item’s Value property.This is evident from the following line: message.Text = "Fees for " & e.ListItem.Text & " membership is $" & e.ListItem.Value Events Mobile controls (like any other ASP.NET server controls) respond to events.You have seen the various events associated with the controls shown in the earlier examples, for example the following: <Mobile:Command runat="server" onClick="ComparePassword">Register</Mobile:Command> In this example, the onClick attribute represents the onClick event.The ComparePassword subroutine is invoked when the command button is clicked. In this case, the event is related to the control. Page-level events are also available. Look at this next line as an example: Sub Page_Load(sender as Object, e as System.EventArgs) In this case, the event (Page_Load) is fired when the page is loaded. Form-level events are also possible using the OnActivate attribute of the <Mobile:Form> control. To see the sequence in which these two events are fired, consider Figure 9.32. Figure 9.32 OnActivate.aspx <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="VB" %> <%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %> <script runat="server" language="vb"> Sub Page_Load(sender as Object, e as System.EventArgs) message.Text += "Page Loaded. " End Sub Sub Form_Activate(sender as Object, e as EventArgs) www.syngress.com Continued 159_wg_wi_09 10/22/01 5:29 PM Page 400 Microsoft Mobile Internet Toolkit • Chapter 9 401 message.Text += "Form Activated. " End Sub </script> <Mobile:Form id="FormOne" runat="server" onActivate="Form_Activate"> <Mobile:Label runat="server" id="message"/> </Mobile:Form> When the page in Figure 9.32 is loaded, the screen shown in Figure 9.33 is displayed. It thus can be seen that the Page_Load event is fired first, followed by the OnActivate event of the <Mobile:Form> control. Displaying Images To display images, you can use the <Mobile:Image> control. Because various mobile devices display images of differing format, it is important to send the cor- rect image type to the right device.To solve this problem, you can use the <DeviceSpecific> control as shown in Figure 9.34. www.syngress.com Figure 9.32 Continued Figure 9.33 Demonstrating the Sequence of Events 159_wg_wi_09 10/22/01 5:29 PM Page 401 . true if the user clicks on the Back link to return to the main page.We want to make sure that the array is not recreated when the user posts back the page (though it is harmless in this case to recreate the. Mobile Internet Toolkit The DataTextField attribute binds the Type property of the Member class to the List item’s Text property .The DataValueField attribute binds the Value property of the Member. (IsPostBack) then The IsPostBack property contains a Boolean value that indicates whether the page is loaded in response to the client’s postback, or if the page is loaded for the first time .The IsPostBack