Basic User Interface Controls of Mobile Internet

This article has been excerpted from book "The Complete Visual C# Programmer's Guide" from the Authors of C# Corner.

Here we discuss the basic user interface (UI) controls of Label, TextBox, and Command-the three most commonly used controls.

Label

In the very first example (Listing 24.2), 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="C#" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

<script language="c#" runat="server">
    public void Command1_OnClick(Object sender, EventArgs e)
    {
        Label2.Text = "Good Morning" + TextBox1.Text;
        this.ActiveForm = Form2;
    }
</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. See other articles on the website on .NET and C#.

The Complete Visual C# Programmer's Guide covers most of the major components that make up C# and the .net environment. The book is geared toward the intermediate programmer, but contains enough material to satisfy the advanced developer.