Advanced Controls of Mobile Internet

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

In the earlier article we have used very common controls. Now we will look at somewhat more complex controls.

TextView

At some point you may find the need to display an arbitrary amount of text and even some markup tags. The TextView control takes care of this for you. To handle large amounts of text, a form's Pagination property may come in handy. What is Pagination? There are many times when the size of a client's screen is unknown. Using the Pagination property allows a developer to partition the display of data across a number of pages. The TextView control supports both custom and internal pagination. You turn on pagination by setting the form's Pagination property to true.

<mobile:textview runat="server" id="TextView1" alignment="Center" forecolor="Blue"
    font-bold="true">

This is the basic entry gateway
for Mobile Programming!!!! Have Fun
</mobile:textview>

Link

The Link control creates a hyperlink in a mobile form. When the user invokes the Link control, a browser traverses to the URL provided in the NavigateURL property.

<mobile:link runat="server" id="Link1" text="Goto Link" navigateurl="#Form1">
</mobile:link>

If the NavigateURL property's value begins with a number sign (#), the browser searches the current mobile page for a form tag with the corresponding ID. Otherwise it is assumed to be a valid URL.

Image

Graphics can be an important part of any application, and that includes wireless devices. The Image control displays images, which the developer specifies by setting the ImageURL property. It also has a NavigateURL property, which adds a clickable area to the image, allowing a client to navigate to another destination.

<mobile:image runat="server" id="image1" alternatetext="Image is unvisible" imageurl="image1.gif">
</mobile:image>

List

The List control provides you with the power to show a list of items in a static as well as an interactive manner. This is an important control if you want to provide the user with choices or if you want to bind data to a control.

<mobile:list runat="server" id="List1" onitemcommand="List1_Click">
<item Text="Shivani" Value="Shivani"/>
<item Text="Shilpa" Value="Shilpa"/>
</mobile:list>

An example of advanced user controls is shown in Listing 24.4.

Listing 24.4: Example of Advanced 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 List1_Click(Object source, ListCommandEventArgs e)
    {
        Label1.Text = "Hi " + e.ListItem.Text;
        ActiveForm = Form2;
    }
</script>
<mobile:form id="Form1" runat="server" backcolor="Blue">
<mobile:TextView runat="server" id="TextView1">

Here you are going to select one Name!!

</mobile:TextView>
<mobile:List runat="server" id="List1" OnItemCommand="List1_Click">
<item Text="Shivani" Value="Shivani" />
<item Text="Shilpa" Value="Shilpa" />
</mobile:List>
</mobile:form>
<mobile:form id="Form2" runat="server">
<mobile:Label id="Label1" runat="server"/>
<mobile:Image runat="server" id="Image1" ImageURL="Congrats.wbmp"
AlternateText="Hey no Image for you">
</mobile:Image>
</mobile:form>

The output of the code in Listing 24.4 is shown in Figures 24.5 and 24.6.



Figure 24.5: Screen Displaying a List of Names with a Link



Figure 24.6: Screen Showing Selected Output from the List

Here is an important point to note. In the example, the ImageURL is in the .wbmp format. The image format supported on WAP devices is wbmp format. These images tend to be small and relatively simple, given the constraint of the devices' size. Thus, those devices that do not support the .wbmp format would display the AlternateText value rather than the image. For this problem we have the DeviceSpecific class, which gives you the power to provide the specific content. The following example shows how to use device-specific content:

<DeviceSpecific>
<Choice Filter="IsHtml" ImageURL="Congrats.gif"/>
<Choice Filter="IsWbmp" ImageURL="Congrats.wbmp"/>
<Choice ImageURL="Congrats.bmp"/>
</DeviceSpecific>

The DeviceSpecific class affords a means to specify device-dependent content. If a device supports a .gif image, then the Congrats.gif will be displayed, while devices supporting an image/vnd.wap.wbmp will output Congrats.wbmp. The default behavior will display the Congrats.bmp.

Conclusion

Hope this article would have helped you in understanding Advanced 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.