Basic User Interface Controls of Mobile Internet in VB.NET

Here we discuss the basic user interface (UI) controls of Label, TextBox, and Command-the three most commonly used controls.
 
 Label: We saw that the Label class is used for displaying static text on the screen. You can set the text you want to display through this control's Text property. The control's syntax looks like the following:
 
 <mobile:Label id="label1" runat="server" Text="Good Morning">
 </mobile:Label>
 
 TextBox
 
 The TextBox control is used to take a single-line input from the user. This control also has a Text property, in which the input is stored. When you want to retrieve the input, you use the ID to reference that TextBox and its Text property. You can restrict input to numeric and masked values by setting the Numeric or Password properties to true.
 
 <mobile:TextBox runat="server" id="TextBox1" />
 
 You can set a TextBox to take only numeric input.
 
 <mobile:TextBox runat="server" id="TextBox1" Numeric="true"/>
 
 Or for password input, set the corresponding property to true.
 
 <mobile:TextBox runat="server" id="TextBox1" password="true"/>
 
 Command
 
 With the Command control you can invoke an event from the user interface. This will make user input post back to the server and makes use of the Click event.
 
 <mobile:Command runat="server" id="Command1" OnClick="Command1_OnClick">
 GET IN
 </mobile:Command>
 
 For a complete picture of what is happening, let's look at an example that uses these three basic controls (see Listing 24.3).
 
 Listing 24.3: Example Using Basic UI Controls
 
 <%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="vb" %>
 <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
 
 <script language="vb" runat="server">
     Public Sub Command1_OnClick(ByVal sender As [Object], ByVal e As EventArgs)
     Label2.Text = "Good Morning" + TextBox1.Text
     Me.ActiveForm = Form2
   End Sub
 </script>
 <mobile:form id="Form1" runat="server">
 <mobile:Label id="Label1" runat="server">
 Enter Your Name
 </mobile:Label>
 <mobile:TextBox runat="server" id="TextBox1"/>
 <mobile:Command runat="server" id="Command1" OnClick="Command1_OnClick">
 GET IN
 </mobile:Command>
 </mobile:form>
 <mobile:form runat="server" id="Form2">
 <mobile:Label runat="server" id="Label2"/>
 </mobile:form>
 
 Notice that in the Command_OnClick method the ActiveForm property of the MobilePage class is set to Form2. This is one way to traverse to a specified form programmatically. When the page is loaded, the first form is automatically made active, and the Label control asks the user to enter his name. The entered name is stored in the Text property of TextBox1, and when the user submits the form clicking on Command Button, the Command function concatenates the static text and TextBox1 value. The ActiveForm property will make Form2 active, and you will see another screen displaying the concatenated text.
 
 The output for the two screens is shown in Figures 24.3 and 24.4.
 
 Figure 24.3: Screen Taking Input from User

 
 
 Figure 24.4: Screen Displaying Output on an OnClick Event

 
 
 Conclusion
 
 Hope this article would have helped you in understanding Basic User Interface Controls of Mobile Internet in VB.NET.