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

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

编写者	日期	关键词
郑昀@ultrapower	2005-8-18	Wap ASP.NET Mobile control device adapter

自定义的mobile.List的横排效果

现有的mobile.List输出效果，每一个Item之间一定会换行，如果你看了WmlListAdapter的源代码就知道了，这是因为他们在输出每一个Item渲染时调用了RenderLink(writer, item.Value, null, false, false, item.Text, true);，最后一个参数就是是否在本Item渲染后输出换行标记。

我们可以改变这种渲染方式，从而让mobile.List变成横排效果。

自定义的mobile.List的图片效果

现有的mobile.List输出效果，每一个Item前后无法插入一张image。

我们可以改变这种渲染方式，从而让mobile.List变成可以自定义每一行的插入图片效果。

总的效果如下图所示：

Device Adapter概念

可以参考我的上一篇文章《[Wap]编译Adapter来自定义mobile control》,http://www.cnblogs.com/zhengyun_ustc/archive/2005/07/28/customcuildyourmobilecontrol.html。

所有的[/i]ASP.NET mobile dev[/i]ice adapter[/i]都是通过[/i]text writer[/i]做[/i]render[/i]的。这些[/i]text writer[/i]均继承自[/i]MobileTextWriter[/i]。[/i]它提供了[/i]Write, WriteLine, [/i]以及[/i]WriteBeginTag[/i]等方法。[/i]对于[/i]WML[/i]来说，这个[/i]Text Writer[/i]是[/i]System.Web.UI.MobileControls.Adapters.WmlMobileTextWriter[/i]。[/i]

[/i]

下面，我们来介绍一下步骤：

自定义一个Adapter类

在这里我们新建一个类库项目，叫做“ListAdapter”，它将生成一个ListAdapter.Dll，我们的自定义控件以及Adapter就在这个Dll中。

在这个项目中，我们将定义一个继承自

System.Web.UI.MobileControls.Adapters.WmlListAdapter

的Adapter，来准备改写mobile:list控件的输出方式。

将下面的代码保存为ListAdapter.cs：

ListAdapter.cs[/b] [/b]

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

做一个说明，我们的ImageList类是从System.Web.UI.MobileControls.List继承下来的，增加了一个Image属性作准备。

另外，自定义的WmlImgListAdapter就是继承了

System.Web.UI.MobileControls.Adapters.WmlListAdapter，所以我们要重写

Render(WmlMobileTextWriter writer)函数，从而让它做到下面两件事情：

通过

Web.config[/b]中的[/b]system.web[/b]节点下[/b] [/b]

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

来获取在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[/b]中的[/b]system.web[/b]节点下[/b] [/b]

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

这里的知识点是，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[/b]中的[/b]system.web[/b]节点下[/b] [/b]

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

试用新控件

现在你已经修改了mobile:List控件的最终渲染方式，让我们试试看吧。

新建一个移动Web窗体页面“ImgList.aspx”，填写如下：

Web.config[/b]中的[/b]system.web[/b]节点下[/b] [/b]

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

记得在你的Wap项目下，建立一个Images目录，并放置图片。

编辑mobile:Command的Click事件，添加如下代码：

NewList1.Items.Add(input1.Text);

NewList1.Items[5].CustomAttributes["Image"] = "Images//additem.PNG";

这时候，程序依然无法运行，我们必须修改web.config来告知如何应用我们的自定义ImageList以及Adapter。

修改web.config来提供control mapping

在你的web.config文件中找到mobileControls节点，修改为以下：

Web.config[/b]中的[/b]system.web[/b]节点下[/b] [/b]

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

device节点就声明了一个新的Adapter，名为“ultraWmlDeviceAdapters”，这个名字是可以随便定义的。

以后你每增加一个自定义Adapter，都必须在这个device节点之下加入一个Control，你必须通过name属性提供控件的fully qualified control class name：“ultraWmlAdapter.ImageList,ListAdapter[/b]”，control的name属性指的是“你重载的哪一个mobile控件”，然后adapter[/b]属性指出如何渲染。

这样，重新编译你的工程后，新的渲染方式就生效了。

你可以在M3gate模拟器/Opera7.6上试验。

编写者	日期	关键词
郑昀@ultrapower	2005-8-19	Wap ASP.NET Mobile control device adapter

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=459385