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

Figure 9.24 Lists.aspx Membership Types The control provides the ability to display lists of items either as a static list or interactive selection.The page in Figure 9.24 caus

<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

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.

Figure 9.25 Viewing the List on the Pocket PC

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

Figure 9.26 Viewing the List on the UP.SDK

Continued

<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"

Figure 9.27 Continued

Figure 9.28 List Items Are Selectable

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

Figure 9.29 Displaying the List Item Selected

Continued

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()

Figure 9.30 Continued

Continued

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.

Figure 9.30 Continued

Figure 9.31 Data Binding a List

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).

N OTE

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"/>

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)

Continued

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.

Figure 9.32 Continued

Figure 9.33 Demonstrating the Sequence of Events