制作自定义WmlListAdapter来实现Mobile.List控件的各种效果

自定义的mobile.List的横排效果
[align=left]现有的mobile.List输出效果，每一个Item之间一定会换行，如果你看了WmlListAdapter的源代码就知道了，这是因为他们在输出每一个Item渲染时调用了RenderLink(writer, item.Value, null, false, false, item.Text, true);，最后一个参数就是是否在本Item渲染后输出换行标记。[/align]
[align=left]我们可以改变这种渲染方式，从而让mobile.List变成横排效果。[/align]
自定义的mobile.List的图片效果
[align=left]现有的mobile.List输出效果，每一个Item前后无法插入一张image。[/align]
[align=left]我们可以改变这种渲染方式，从而让mobile.List变成可以自定义每一行的插入图片效果。[/align]
[align=center]总的效果如下图所示：[/align]



Device Adapter概念
[align=left]可以参考我的上一篇文章《[Wap]编译Adapter来自定义mobile control》,http://www.cnblogs.com/zhengyun_ustc/archive/2005/07/28/customcuildyourmobilecontrol.html。[/align]
[align=left]所有的ASP.NET mobile device adapter都是通过text writer做render的。这些text writer均继承自MobileTextWriter。它提供了Write, WriteLine, 以及WriteBeginTag等方法。对于WML来说，这个Text Writer是System.Web.UI.MobileControls.Adapters.WmlMobileTextWriter。[/align]
[align=left] [/align]
下面，我们来介绍一下步骤：
自定义一个Adapter类
在这里我们新建一个类库项目，叫做“ListAdapter”，它将生成一个ListAdapter.Dll，我们的自定义控件以及Adapter就在这个Dll中。
在这个项目中，我们将定义一个继承自
System.Web.UI.MobileControls.Adapters.WmlListAdapter
的Adapter，来准备改写mobile:list控件的输出方式。
将下面的代码保存为ListAdapter.cs：

ListAdapter.cs

[align=left]using System.Web.UI;[/align] [align=left]using System.Web.UI.MobileControls.Adapters;[/align] [align=left]using System.Web.UI.MobileControls;[/align] [align=left] [/align] [align=left]namespace ultraWmlAdapter[/align] [align=left]{[/align] [align=left] public class ImageList : System.Web.UI.MobileControls.List[/align] [align=left] {[/align] [align=left] private string _img="";[/align] [align=left] public string Image[/align] [align=left] {[/align] [align=left] get{ return this._img; }[/align] [align=left] set{ this._img=value; }[/align] [align=left] }[/align] } [align=left] public class WmlImgListAdapter :System.Web.UI.MobileControls.Adapters.WmlListAdapter [/align] [align=left] { [/align] [align=left] protected new ImageList Control[/align] [align=left] {[/align] [align=left] get[/align] [align=left] {[/align] [align=left] return (ImageList)base.Control;[/align] [align=left] }[/align] [align=left] }[/align] [align=left] [/align] [align=left] public override void Render([/align] [align=left] WmlMobileTextWriter writer) [/align] [align=left] {[/align] [align=left] log.DebugTrace("ImgListAdapter Render Begin:"[/align] [align=left] + this.Control.UniqueID);[/align] [align=left] [/align] [align=left] if(Control.HasControls())[/align] [align=left] {[/align] [align=left] writer.BeginCustomMarkup();[/align] [align=left] RenderChildren(writer);[/align] [align=left] writer.EndCustomMarkup();[/align] [align=left] return;[/align] [align=left] }[/align] [align=left] [/align] [align=left] int pageStart = Control.FirstVisibleItemIndex;[/align] [align=left] int pageSize = Control.VisibleItemCount;[/align] [align=left] if (pageSize == 0)[/align] [align=left] {[/align] [align=left] return;[/align] [align=left] }[/align] [align=left] [/align] [align=left] /*[/align] [align=left] * 我们在上面自定义了Image属性，那么这里我们可以通过Control.Image来获取它,[/align] [align=left] * 在aspx页面上，它可能是这么定义的，<cc1:ImageList Image="Images/5.gif" ></cc1:ImageList>；[/align] [align=left] * 这样，我们就可以直接通过Control.Image获取字符串"Images/5.gif"。[/align] [align=left] * zhengyun_ustc 20050819[/align] [align=left] * [/align] [align=left] */[/align] [align=left] String strListImageUrl = (String)Control.Image;[/align] [align=left] if(strListImageUrl != null[/align] [align=left] && strListImageUrl.Length > 0)[/align] [align=left] {[/align] [align=left] writer.WriteBeginTag("img"); [/align] [align=left] writer.WriteAttribute("src", strListImageUrl);[/align] [align=left] writer.WriteLine(" />");[/align] [align=left] }[/align] [align=left] [/align] [align=left] System.Web.UI.MobileControls.MobileListItemCollection items = Control.Items;[/align] [align=left] if (items.Count == 0)[/align] [align=left] {[/align] [align=left] return;[/align] [align=left] }[/align] [align=left] [/align] [align=left] bool itemsAsLinks = Control.ItemsAsLinks;[/align] [align=left] bool hasCmdHandler = Control.HasItemCommandHandler;[/align] [align=left] [/align] [align=left] writer.EnterStyle(Style);[/align] [align=left] for (int i = 0; i < pageSize; i++)[/align] [align=left] {[/align] [align=left] System.Web.UI.MobileControls.MobileListItem item = items[pageStart + i];[/align] [align=left] [/align] [align=left] /*[/align] [align=left] * 请注意这里不能用BreakAfter的名字作为本Item的CustomAttributes，[/align] [align=left] * 因为好像和原先的BreakAfter冲突；所以这里的CustomAttributes名字最好都起一个[/align] [align=left] * 比较特殊的，不与原先mobile:List的属性们冲突![/align] [align=left] * zhengyun_ustc 20050819[/align] [align=left] */[/align] [align=left] String strBreakAfter = (String)item.CustomAttributes["BreakAfterItem"];[/align] [align=left] // 默认都换行![/align] [align=left] bool bBreakAfterItem = true;[/align] [align=left] if(strBreakAfter != null[/align] [align=left] && strBreakAfter.Length > 0)[/align] [align=left] {[/align] [align=left] strBreakAfter = strBreakAfter.ToLower();[/align] [align=left] switch(strBreakAfter)[/align] [align=left] {[/align] [align=left] case "false":[/align] [align=left] // 要求渲染时不换行[/align] [align=left] bBreakAfterItem = false;[/align] [align=left] break;[/align] [align=left] default:[/align] [align=left] break;[/align] [align=left] }[/align] [align=left] }[/align] [align=left] [/align] [align=left] if (itemsAsLinks)[/align] [align=left] {[/align] [align=left] RenderLink(writer, item.Value, null, false, false, item.Text, bBreakAfterItem);[/align] [align=left] }[/align] [align=left] else if (hasCmdHandler)[/align] [align=left] {[/align] [align=left] RenderPostBackEvent(writer, item.Index.ToString(), null, true, item.Text, bBreakAfterItem); [/align] [align=left] }[/align] [align=left] else[/align] [align=left] {[/align] [align=left] writer.RenderText(item.Text, bBreakAfterItem);[/align] [align=left] }[/align] [align=left] [/align] [align=left] /*[/align] [align=left] * 我们知道MobileListItem有一个CustomAttributes成员,它[/align] [align=left] * “Returns the set of custom attributes defined for the control.”[/align] [align=left] * 也就是说我们通过"item.CustomAttributes",可以得到当前这个Control的自定义属性的集合；[/align] [align=left] * 这样如果我们这样定义List的某一个Item：[/align] [align=left] * <ITEM Text="1" Value="1" Image="Images/2.png" BreakAfterItem="True"></ITEM>[/align] [align=left] * 那么可以通过item.CustomAttributes["Image"]获取Image属性的值；[/align] [align=left] * zhengyun_ustc 20050819[/align] [align=left] * [/align] [align=left] */[/align] [align=left] String strCurrentListItemImageUrl = (String)item.CustomAttributes["Image"];[/align] [align=left] if(strCurrentListItemImageUrl != null[/align] [align=left] && strCurrentListItemImageUrl.Length > 0)[/align] [align=left] {[/align] [align=left] writer.WriteBeginTag("img"); [/align] [align=left] writer.WriteAttribute("src", strCurrentListItemImageUrl);[/align] [align=left] writer.WriteLine(" />");[/align] [align=left] }[/align] [align=left] }[/align] [align=left] writer.ExitStyle(Style);[/align] [align=left] [/align] [align=left] log.DebugTrace("ImgListAdapter Render End");[/align] [align=left] } [/align] }

做一个说明，我们的ImageList类是从System.Web.UI.MobileControls.List继承下来的，增加了一个Image属性作准备。
另外，自定义的WmlImgListAdapter就是继承了
System.Web.UI.MobileControls.Adapters.WmlListAdapter，所以我们要重写
Render(WmlMobileTextWriter writer)函数，从而让它做到下面两件事情：
通过

Web.config中的system.web节点下

[align=left] String strListImageUrl = (String)Control.Image;[/align] [align=left] if(strListImageUrl != null[/align] [align=left] && strListImageUrl.Length > 0)[/align] [align=left] {[/align] [align=left] writer.WriteBeginTag("img"); [/align] [align=left] writer.WriteAttribute("src", strListImageUrl);[/align] [align=left] writer.WriteLine(" />");[/align] }

来获取在aspx页面上定义的List自定义属性。这里的知识点就是，你可以在aspx中这么定义<cc1:ImageList id="NewList1" runat="server" Image="Images/5.gif" >，那么直接就可以通过Control.Image来获取这个“Images/5.gif”字符串。这是当前List控件总的Image图片显示。
我们还可以通过在每一个Item商定以自定义属性Image来在List的每一项后面都输出一张图片。

Web.config中的system.web节点下

[align=left]String strCurrentListItemImageUrl = (String)item.CustomAttributes["Image"];[/align] [align=left] if(strCurrentListItemImageUrl != null[/align] [align=left] && strCurrentListItemImageUrl.Length > 0)[/align] [align=left] {[/align] [align=left] writer.WriteBeginTag("img"); [/align] [align=left] writer.WriteAttribute("src", strCurrentListItemImageUrl);[/align] [align=left] writer.WriteLine(" />");[/align] [align=left] }[/align]

这里的知识点是，MobileListItem有一个CustomAttributes成员,它代表“Returns the set of custom attributes defined for the control.”。也就是说我们通过"item.CustomAttributes",可以得到当前这个Control的自定义属性的集合。
所以，如果我们这样定义List的某一个Item：
<ITEM Text="1" Value="1" Image="Images/2.png" BreakAfterItem="True"></ITEM>
那么可以通过item.CustomAttributes["Image"]获取Image属性的值了。
编译ListAdapter
编译出一个ListAdapter.dll，并设置输出路径为你的WAP应用程序bin目录下。
添加对ListAdapter.Dll的引用
在你的Wap项目中，添加对LisAdapter.dll的引用。
或者你也可以修改web.config，添加如下配置，也能起到相同的作用：

Web.config中的system.web节点下

[align=left]<!-- 动态调试编译[/align] [align=left] 设置 compilation debug="true" 以启用 ASPX 调试。否则，将此值设置为[/align] [align=left] false 将提高此应用程序的运行时性能。[/align] [align=left] 设置 compilation debug="true" 以将调试符号(.pdb 信息)[/align] [align=left] 插入到编译页中。因为这将创建执行起来[/align] [align=left] 较慢的大文件，所以应该只在调试时将此值设置为 true，而在所有其他时候都设置为[/align] [align=left] false。有关更多信息，请参考有关[/align] [align=left] 调试 ASP.NET 文件的文档。[/align] [align=left] -->[/align] [align=left] <compilationdefaultLanguage="c#"debug="true">[/align] [align=left] <assemblies>[/align] [align=left] [/align] [align=left] <addassembly="ListAdapter"/>[/align] [align=left] <addassembly="MultiLineInput"/>[/align] [align=left] [/align] [align=left] </assemblies>[/align] [align=left] </compilation>[/align]

试用新控件
现在你已经修改了mobile:List控件的最终渲染方式，让我们试试看吧。
新建一个移动Web窗体页面“ImgList.aspx”，填写如下：

Web.config中的system.web节点下

[align=left]<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>[/align] [align=left]<%@ Page language="c#" Codebehind="ImgList.aspx.cs" [/align] [align=left]Inherits="iPower.ImgList" AutoEventWireup="false" %>[/align] [align=left]<%@ Register TagPrefix="cc1" Namespace="ultraWmlAdapter" Assembly="ListAdapter" %>[/align] [align=left]<HEAD>[/align] [align=left] <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">[/align] [align=left] <meta content="C#" name="CODE_LANGUAGE">[/align] [align=left] <meta content="http://schemas.microsoft.com/Mobile/Page" name="vs_targetSchema">[/align] [align=left]</HEAD>[/align] [align=left]<body Xmlns:mobile="http://schemas.microsoft.com/Mobile/WebForm">[/align] [align=left] <mobile:form id="Form1" title="WAP测试ImageList控件" runat="server">[/align] [align=left] [/align] [align=left] <cc1:ImageList id="NewList1" runat="server" ItemsPerPage="0" ItemsAsLinks="True" BreakAfter="False"[/align] [align=left] StyleReference="title" EnableViewState="False" Image="Images/5.gif" >[/align] [align=left] <ITEM Text="1" Value="1" Image="Images/1.png" BreakAfterItem="True"></ITEM>[/align] [align=left] <ITEM Text="2" Value="2" Image="Images/2.png" BreakAfterItem="False"></ITEM>[/align] [align=left] <ITEM Text="3" Value="3" Image="Images/3.png" BreakAfterItem="False"></ITEM>[/align] [align=left] <ITEM Text="4" Value="4" Image="Images/5.gif" BreakAfterItem="False"></ITEM>[/align] [align=left] <ITEM Text="5" Value="5" Image="Images/1.png" BreakAfterItem="True"></ITEM>[/align] [align=left] </cc1:ImageList>[/align] [align=left] <mobile:TextBox id="input1" runat="server" name="TI" rows="5" cols="25"></mobile:TextBox>[/align] [align=left] <mobile:Command id="cmdAddItem" runat="server">添加一个Item</mobile:Command>[/align] [align=left] </mobile:form>[/align] [align=left]</body>[/align]

记得在你的Wap项目下，建立一个Images目录，并放置图片。
编辑mobile:Command的Click事件，添加如下代码：
[align=left]NewList1.Items.Add(input1.Text);[/align]
NewList1.Items[5].CustomAttributes["Image"] = "Images//additem.PNG";

这时候，程序依然无法运行，我们必须修改web.config来告知如何应用我们的自定义ImageList以及Adapter。
修改web.config来提供control mapping
在你的web.config文件中找到mobileControls节点，修改为以下：

Web.config中的system.web节点下

[align=left]<!-- 指定没有 COOKIE 的数据字典类型[/align] [align=left] 这将使字典的内容出现在本地请求 URL 查询字符串中。[/align] [align=left] 这是在没有 Cookie 的设备上进行窗体身份验证所必需的。[/align] [align=left] -->[/align] [align=left] <!--在您使用像 useRandomID 这样的自定义属性时，必须在您的移动 Web 应用程序中启用自定义属性allowCustomAttributes。[/align] [align=left] -->[/align] [align=left] <mobileControlsallowCustomAttributes="true"cookielessDataDictionaryType="System.Web.Mobile.CookielessData">[/align] [align=left] <devicename="ultraWmlDeviceAdapters"inheritsFrom="WmlDeviceAdapters">[/align] [align=left] [/align] [align=left] <controlname="ultraWmlAdapter.ImageList,ListAdapter"[/align] [align=left]adapter="ultraWmlAdapter.WmlImgListAdapter,ListAdapter"/>[/align] </device> </mobileControls>

device节点就声明了一个新的Adapter，名为“ultraWmlDeviceAdapters”，这个名字是可以随便定义的。
以后你每增加一个自定义Adapter，都必须在这个device节点之下加入一个Control，你必须通过name属性提供控件的fully qualified control class name：“ultraWmlAdapter.ImageList,ListAdapter”，control的name属性指的是“你重载的哪一个mobile控件”，然后adapter属性指出如何渲染。

这样，重新编译你的工程后，新的渲染方式就生效了。
你可以在M3gate模拟器/Opera7.6上试验。