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

来源：互联网发布：霍华德生涯总数据编辑：程序博客网时间：2024/09/21 09:18

自定义的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。

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

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

自定义一个Adapter类

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

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

System.Web.UI.MobileControls.Adapters.WmlListAdapter

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

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

ListAdapter.cs

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中的system.web节点下

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中的system.web节点下

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.CustomAttributes["Image"]获取Image属性的值了。

编译ListAdapter

编译出一个ListAdapter.dll，并设置输出路径为你的WAP应用程序bin目录下。

添加对ListAdapter.Dll的引用

在你的Wap项目中，添加对LisAdapter.dll的引用。

或者你也可以修改web.config，添加如下配置，也能起到相同的作用：

Web.config中的system.web节点下

<!-- 动态调试编译

设置 compilation debug="true" 以启用 ASPX 调试。否则，将此值设置为

false 将提高此应用程序的运行时性能。

设置 compilation debug="true" 以将调试符号(.pdb 信息)

插入到编译页中。因为这将创建执行起来

较慢的大文件，所以应该只在调试时将此值设置为 true，而在所有其他时候都设置为

false。有关更多信息，请参考有关

调试 ASP.NET 文件的文档。

-->

<compilationdefaultLanguage="c#"debug="true">

<addassembly="ListAdapter"/>

<addassembly="MultiLineInput"/>

</assemblies>

</compilation>

试用新控件

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

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

Web.config中的system.web节点下

<%@ 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>

</HEAD>

<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" >

</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中的system.web节点下

<!-- 指定没有 COOKIE 的数据字典类型

这将使字典的内容出现在本地请求 URL 查询字符串中。

这是在没有 Cookie 的设备上进行窗体身份验证所必需的。

-->

<!--在您使用像 useRandomID 这样的自定义属性时，必须在您的移动 Web 应用程序中启用自定义属性allowCustomAttributes。

-->

<mobileControlsallowCustomAttributes="true"cookielessDataDictionaryType="System.Web.Mobile.CookielessData">

<devicename="ultraWmlDeviceAdapters"inheritsFrom="WmlDeviceAdapters">

<controlname="ultraWmlAdapter.ImageList,ListAdapter"

adapter="ultraWmlAdapter.WmlImgListAdapter,ListAdapter"/>

</device>

</mobileControls>

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

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

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

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