Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition [Electronic resources] نسخه متنی

The MobileMultiLineInput Control

The MobileMultiLineInput control, written by Bogdan Popp of Microsoft, derives from the standard mobile TextBox control and implements multiline input functionality on mobile browsers. Applications that require large amounts of text input, such as mobile chat and message boards, can benefit from this control. In WML and cHTML, the MobileMultiLineInput control will be rendered as a text box using the <input> tag; in HTML, it will be rendered as a multiline text box using the <textarea> tag. Figure 7-5 shows the control rendered on an HTML browser and a WML browser.

Figure 7-5: The MobileMultiLineInput control shown on an HTML browser and a WML browser

The MobileMultiLineInput control provides a good demonstration of how to take advantage of the ASP.NET mobile controls extensibility model. The download for the MobileMultiLineInput control includes full source code that shows how to author a new device adapter and associate it with a control. A device adapter is a class that works in tandem with a control class, which is responsible for the rendering of the control on a particular class of mobile device, such as WML browsers. See Chapter 22 for more about device adapters and the authoring of custom controls.

Currently there is no Visual Studio .NET design support for this sample, so if for example you set the Rows property to a new value, the visualization of the control in the Mobile Internet Designer display doesn't resize to reflect this.

Installation

The MobileMultiLineInput control is supplied uncompiled. You must unzip the files and then execute the supplied Make.bat file to build the control. You must include the directory in which the C# compiler is located in your path environment variable—the easiest way to achieve this is to run the Visual Studio .NET Command Prompt from the Visual Studio .NET program group on your Start menu.

Copy the compiled executable MLIC.dll to the directory where you keep your ASP.NET custom controls, as explained in "Using the Custom Controls" earlier in this chapter.

If you're using Visual Studio .NET, you can add the new control to the Toolbox, as described in "Adding the Controls to the Toolbox" earlier in this chapter.

Configuring Your Application

You must configure your application to use the new device adapter for the MobileMultiLineInput control, as described in the section "Configuring Your Application to Use Custom Controls" earlier in this chapter. Add the following <assembly> and <device> configuration XML inside an application configuration file:

<configuration>
<system.web>
<compilation debug="true">
<assemblies>
<add assembly="MLIC" />
</assemblies>
</compilation>
<mobileControls>
<device name="MMITTextInputHtmlDeviceAdapter" 
inheritsFrom="HtmlDeviceAdapters">
<control name="MMIT_Sample.MultiLineInput,MLIC"
adapter="MMIT_Sample.HtmlMultiLineInputAdapter,MLIC"/>
</device>
</mobileControls>
</system.web>
</configuration>

Syntax

The MobileMultiLineInput control includes many properties inherited from the standard mobile TextBox control, with the addition of the Rows and Cols properties, as shown here:

<%@ Register TagPrefix="mobMLI" Namespace="MMIT_Sample"
Assembly="MLIC" %>
<mobMLI:MultiLineInput
runat="server"
id="id"
Alignment="{NotSet|Left|Center|Right}"
BackColor="backgroundColor"
Font-Bold="{NotSet|False|True}"
Font-Italic="{NotSet|False|True}"
Font-Name="fontName"
Font-Size="{NotSet|Normal|Small|Large}"
ForeColor="foregroundColor"
StyleReference="StyleReference"
Wrapping="{NotSet|Wrap|NoWrap}"
MaxLength="maxlength"
Numeric="{True|False}"
Password="{True|False}"
OnTextChanged="textChangedEventHandler"
Size="textBoxLength"
Text="Text"
Title="Text"
Rows="{number of rows}"
Cols="{number of columns}" >
</mobMLI:MultiLineInput>

Properties

Table 4-10 for a description of the properties inherited from the TextBox control.

Using the MobileMultiLineInput Control

The sample application shown in Listings 7-3 and 7-4 allows input of five lines of 25 characters on HTML browsers. The application's output was shown earlier, in Figure 7-5. On WML and cHTML browsers, multiple lines of input are allowed, but you can't limit the line length or number of lines as you can on an HTML browser. Use the MaxLength property (supported by all browsers) to limit the total length of the input.

Listing 7-3: Source for default.aspx in MultiLineInputExample

<%@ Register TagPrefix="cc1" Namespace="MMIT_Sample" Assembly="MLIC" %>
<%@ Page language="c#" Codebehind="default.aspx.cs"
Inherits="MSPress.MobWeb.MLICExample._default" 
AutoEventWireup="false" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile " %>
<mobile:Form id="Form1" runat="server" BackColor="PaleTurquoise">
<mobile:Label id="l" runat="server" 
text="Multiline Text Input Sample"></mobile:Label>
<cc1:MultiLineInput id="MultiLineInput1" runat="server" 
Cols="25" Rows="5" MaxLength="125"></cc1:MultiLineInput>
<mobile:Label id="Result" runat="server" 
Text="Input text is: <empty>"></mobile:Label>
<mobile:Command id="Command1" runat="server" 
Text="Get the text!"></mobile:Command>
</mobile:Form>

Listing 7-4: Code-behind module default.aspx.cs in MultiLineInputExample

using System;
using System.Web.UI.MobileControls;
namespace MSPress.MobWeb.MLICExample
{
public class _default : System.Web.UI.MobileControls.MobilePage
{
protected MMIT_Sample.MultiLineInput MultiLineInput1;
protected System.Web.UI.MobileControls.Label Result;
protected System.Web.UI.MobileControls.Command Command1;
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{    
this.Command1.Click += 
new System.EventHandler(this.Command1_Click);
}
private void Command1_Click(object sender, System.EventArgs e)
{
Result.Text = "Input text is: "+ MultiLineInput1.Text;    
}
}
}