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