[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。

所有的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 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节点下

<!--  动态调试编译

          设置 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中的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>

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

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

    -->

    <mobileControls allowCustomAttributes="true" cookielessDataDictionaryType="System.Web.Mobile.CookielessData" >

        <device name="ultraWmlDeviceAdapters" inheritsFrom="WmlDeviceAdapters">

           

            <control name="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上试验。

 

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