Professional ASP.NET 1.0 Special Edition- P40 pps

</go> </do> Alternatively, and particularly on the Openwave Simulator, a <select> list may be generated with an <option> element allowing the command to be called, in much the same way as we saw for <mobile:Link>. Note that the ImageUrl property, which determines an image to display on a device if that device supports graphics, works in the same way as the equivalent property of the <mobile:Image> control, with device-specific rendering supported in the same way. Example Usage The following code contains some text that changes when the Press button is pressed: <mobile:Form runat="server" id="first" Title="First"> <mobile:Label runat="server" id="result"> Button not pressed. </mobile:Label> <mobile:Command runat="server" id="button1" Text="Press" SoftkeyLabel="Press" OnClick="button1_OnClick"/> </mobile:Form> <script runat="server" Language="VB"> Sub button1_OnClick(sender As Object, e As System.EventArgs) result.Text = "Button pressed!" End Sub </script> The button appears on various devices as follows: Pocket PC: Nokia 7110 (also accessible through the Options softkey): Openwave Simulator (softkey also generated): <mobile:TextBox> This control enables user input. The output in all cases will be a text box, although the functionality of the WML rendition of this varies significantly between browsers (see below). It is possible to change the type of textbox displayed using the Numeric and Password attributes. If both of these are false we get a plain text box, setting Numeric to true gives a number only textbox, and setting Password to True renders a password mode text box, where asterisks are written to the screen to prevent unwanted reading of passwords. However, I personally think that the Password type only causes confusion on mobile devices, as it makes the already awkward text input even harder (it's easy to lose your place) and- to be honest- who's likely to read your password over your shoulder on a tiny LCD screen? Attributes Attribute Description MaxLength The maximum number of characters allowed in the text box. Numeric true or false. Whether the text box is numeric. Password true or false. Whether the text box acts in password mode. Size The size of the control in characters. Text The text to output to the browser. Events Event Description OnTextChanged Occurs when the user modifies the text in the text box (and a post back is triggered). Code Generated For HTML and WML browsers (again, the syntax is identical): <input name="id" [type="password"]/> Example Usage The following code uses text input for a simple login page: <mobile:Form runat="server" id="first"> Enter name <mobile:TextBox runat="server" id="name"/> Enter password: <mobile:TextBox runat="server" id="password" Password="true"/> <mobile:Link runat="server" NavigateUrl="#second" Text="Login" SoftkeyLabel="Login"/> </mobile:Form> <mobile:Form runat="server" id="second" OnActivate="second_OnActivate"> <mobile:Label runat="server" id="result"/> </mobile:Form> <script runat="server" Language="VB"> Sub second_OnActivate(sender As Object, e As System.EventArgs) if ((name.Text = "Karli") AND (password.Text = "Cheese")) then result.Text = "Welcome Karli!" Else result.Text = "Sorry, " & name.Text & ", your password is not " _ & "recognized." End If End Sub </script> The first form takes a name and password; the second displays the login result. This result is calculated by frmSecond_OnActivate(), which is called when the name and password are submitted (or, more accurately, when frmSecond is activated). The simple algorithm used simply checks if the name is "Karli" and the password is "Cheese", else it displays a failure message. It is worth noting another fairly major difference between browsers here. Although the code generated for different WAP devices is very similar the user experience can vary a great deal. The Nokia 7110 browser looks similar to the Pocket PC interface: Here, selecting a field in the Nokia simulator takes you to a separate data entry screen, and when you return the fields are updated. However, the Openwave Simulator interface only allows a single input field to be displayed at a time: When text is entered and the OK softkey is selected the display moves on to the password entry field, and finally to the Login link. The end effect is the same, but the routes there can vary. <mobile:List> This control allows for simple non-interactive lists of items in plain text, a list of commands, or a list of links. Whatever you want to do with this control you can specify the items it contains using <Item> elements within the control, or programmatically (using the exposed Items collection). A very simple list, used for display only, might therefore look like this: <mobile:List runat="server"> <Item Text="Richard Anderson"/> <Item Text="Brian Francis"/> <Item Text="Alex Homer"/> <Item Text="Dave Sussman"/> <Item Text="Karli Watson"/> </mobile:List> Each of the <Item> elements may also have a Value property, which specifies a destination when link lists are used. To obtain a link list we simply set the ItemsAsLinks property to true: <mobile:List runat="server" ItemsAsLinks="true"> <Item Text="Richard Anderson" Value="http://www.richardanderson.com/"/> <Item Text="Brian Francis" Value="http://www.brianfrancis.com/"/> <Item Text="Alex Homer" Value="http://www.alexhomer.com/"/> <Item Text="Dave Sussman" Value="http://www.davesussman.com/"/> <Item Text="Karli Watson" Value="http://www.karliwatson.com/"/> </mobile:List> Alternatively, we can specify an event handler to execute when an item is selected using OnItemCommand, although this won't work properly if ItemsAsLinks is true. The control also supports standard ASP.NET data binding. Attributes Attribute Description DataMember When databinding, this attribute specifies the table of a DataSet to use. DataSource When databinding, this attribute specifies the data source to use. DataTextField When databinding, this attribute specifies the field to use for item text values. DataValueField When databinding, this attribute specifies the field to use for item-value values. Decoration None, Bulleted, or Numbered- allows for extra formatting of item text by adding bullet marks or numbering items. ItemCount The amount of items to display when using pagination, where a value of 0 means to choose this value automatically. ItemsAsLinks True or False. Whether to render items as links. ItemsPerPage The number of items to display per page when using pagination, where a value of 0 means to use the default value. Events Event Description OnItemCommand Occurs when an individual list item generates a command event. Note that this won't work if ItemsAsLinks is true. OnItemDataBind Occurs when an item is databound. OnLoadItems Occurs when pagination is being used and the items to display are requested. Code Generated Obviously, this control can generate varied code. For simple lists the output will be plain text, with appropriate line breaks, or formatted as a table. Link lists will generate code appropriate to the device, such as <select> fields or anchors. For example, the code above generates the following HTML on a Pocket PC: <table> <tr> <td> <a href="http://www.richardanderson.com/">Richard Anderson</a> </td> </tr> <tr> <td> <a href="http://www.brianfrancis.com/">Brian Francis</a> </td> </tr> <tr> <td> <a href="http://www.alexhomer.com/">Alex Homer</a> </td> </tr> <tr> <td> <a href="http://www.davesussman.com/">Dave Sussman</a> </td> </tr> <tr> <td> <a href="http://www.karliwatson.com/">Karli Watson</a> </td> </tr> </table> The WML generated on a Nokia 7110 is as follows: <a href="http://www.richardanderson.com/">Richard Anderson</a> <a href="http://www.brianfrancis.com/">Brian Francis</a> <a href="http://www.alexhomer.com/">Alex Homer</a> <a href="http://www.davesussman.com/">Dave Sussman</a> <a href="http://www.karliwatson.com/">Karli Watson</a> and the WML generated on Openwave browsers is along the lines of: <do type="accept" label="Go"> <go href="example.aspx?__ufps=631274647595414160" method="post"> <postfield name="__VIEWSTATE" value="aDxfX1A7QDw7MmI1YjhiMTgtYWROGExOTg1LDA7Pjs+" /> <postfield name="__EVENTTARGET" value="ctrl0" /> <postfield name="__EVENTARGUMENT" value="$(ctrl0)" /> </go> </do> <select name="ctrl0"> <option onpick="http://www.richardanderson.com/">Richard Anderson</option> <option onpick="http://www.brianfrancis.com/">Brian Francis</option> <option onpick="http://www.alexhomer.com/">Alex Homer</option> <option onpick="http://www.davesussman.com/">Dave Sussman</option> <option onpick="http://www.karliwatson.com/">Karli Watson</option> </select> Each of these pieces of code is entirely appropriate for the target device. If we are generating a list of commands then appropriate post back code will also be generated. Example Usage As a quick example of a command list, consider the following modified code: <mobile:Form runat="server" id="first"> <mobile:List runat="server" id="List1" [...]... manually, following the suggested format of MM/DD/YYYY, or choose one by selecting a month, a week, and a day (although not a year for some reason.) All of the attributes associated with the standard ASP.NET Calendar control are also available, although not declaratively We can gain access to these using the WebCalendar property of this control, which returns a web forms calendar control that we can . href="example.aspx?__ufps=6 312 74647595 414 1 60& quot; method="post"> <postfield name="__VIEWSTATE" value="aDxfX1A7QDw7MmI1YjhiMTgtYWROGExOTg1LDA7Pjs+". for different WAP devices is very similar the user experience can vary a great deal. The Nokia 711 0 browser looks similar to the Pocket PC interface: Here, selecting a field in the Nokia. Watson</a> </td> </tr> </table> The WML generated on a Nokia 711 0 is as follows: <a href="http://www.richardanderson.com/">Richard Anderson</a>