Browse DevX
Sign up for e-mail newsletters from DevX


Build Your Own Mobile Controls : Page 3

The mobile controls provided with ASP.NET are often insufficient. When that happens, a custom, from-scratch direct control is what you need. This article explains the ASP.NET mobile rendering model and guides you through the process of building your own custom mobile control.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Creating the Control Adapter
There are two different control adapter classes, HTMLControlAdapter and WMLControlAdapter. They contain the basic adapter functionality. You need to create one control adapter per adapter family. Here you are going to create an HTML control adapter for the MultiLineTextBox control. You need to create a class library project (alternatively define the class in the same file) and inherit from the HTMLControlAdapter class.

You have to override the render method and put in your custom rendering code. To simplify things here, I've added the control adapter code to the same file (MultiLineTextBox.vb) just after the class definition of the MultiLineTextBox control, but within the same namespace (see Listing 2).

First you need to get a reference to the instance of the mobile control, which is done via the helper property "Control" which shadows the base control property. You need to overload and override the Render method and provide the output implementation. The reason one doesn't just override but also overloads is because the Render method in the base class is overloaded.

You use an HTMLMobileTextWriter to write your text output. Start off with the EnterStyle method and then use the Write method. In HTML, a TextArea tag is similar to a MultiLineTextBox, hence within the Render method you need to write the output starting with a TextArea tag as it allows multiple lines of text to be written. Then specify the row and column for the TextArea and finally write the Text. Once that is done you close the TextArea tag. The ">" tag in the middle is to close the initial TextArea tag once the row and cols have been specified.

Mapping the Control and Adapter
The final step is to provide the control mapping. At the top level, Machine.Config contains the various mappings between devices and controls and is the place where you put global mappings. The Web.Config file does it at an application level.

You need to edit the Web.Config file in the "ASP.NET Mobile Controls" project and replace the default <mobileControls> section with the code below:

<mobileControls cookielessDataDictionaryType="System.Web.Mobile.CookielessData"> <device name="exHTMLDeviceAdapters" inheritsFrom="HtmlDeviceAdapters"> <control name="DirectMobileClassLibrary.myMobileControls.MultiLineTextBox, DirectMobileClassLibrary" adapter="DirectMobileClassLibrary.myMobileControls.HTMLMultiLineTextBoxAdapter, DirectMobileClassLibrary"/> </device> </mobileControls>

Author's Note: As a best practice you should always use Web.Config to create device and adapter mappings, and test them there before editing the Machine.Config. Changes made to Machine.Config affect the entire .NET framework and any application you have installed on the machine; it's like the Windows registry for the .NET world.

The device tag is used to specify a new adapter called exHTMLDeviceAdapters(this could be any name you choose), this inherits from the base HTMLDeviceAdapters. You specify the fully qualified control class name followed by the control namespace. Lastly, specify the control adapter you've just created. Once again you specify the adapter's fully qualified class name and the Namespace. This completes the mapping.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date