[Wap] 制作自定义WmlListAdapter来实现Mobile.List控件的各种效果-阿里云开发者社区

开发者社区> 郑昀> 正文

[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, nullfalsefalse, item.Text,true);,最后一个参数就是是否在本Item渲染后输出换行标记

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

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

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

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

总的效果如下图所示:

demolist.JPG

Device Adapter
概念

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

所有的ASP.NET mobile device adapter都是通过text writerrender的。这些text writer均继承自MobileTextWriter它提供了WriteWriteLine以及WriteBeginTag等方法。对于WML来说,这个Text WriterSystem.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

        {

            getreturn this._img; }

            setthis._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的名字作为本ItemCustomAttributes

                 因为好像和原先的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, nullfalsefalse, 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:CommandClick事件,添加如下代码:

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”,controlname属性指的是“你重载的哪一个mobile控件”,然后adapter属性指出如何渲染

 

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

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

 

编写者

日期

关键词

郑昀@ultrapower

2005-8-19

Wap ASP.NET Mobile control device adapter

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Mybatis为实体类定义别名typeAliases
Mybatis为实体类定义别名typeAliases   首先为大家科普一下,Mybatis事实上就是Ibatis。它是由Ibatis更名而来。 最近在学Mybatis的知识,在讲到为实体类定义别名是有两个小知识与大家共勉。
1096 0
Android中自定义属性(attrs.xml,TypedArray的使用)
做Android布局是件很享受的事,这得益于他良好的xml方式。使用xml可以快速有效的为软件定义界面。可是有时候我们总感觉官方定义的一些基本组件不够用,自定义组件就不可避免了。那么如何才能做到像官方提供的那些组件一样用xml来定义他的属性呢?现在我们就来讨论一下他的用法。
809 0
CV:基于Keras利用cv2+自定义(加载人脸识别xml文件)+keras的load_model(加载表情hdf5、性别hdf5)实现标注脸部表情和性别label
CV:基于Keras利用cv2+自定义(加载人脸识别xml文件)+keras的load_model(加载表情hdf5、性别hdf5)实现标注脸部表情和性别label
46 0
JAVA之旅(十)——异常的概述,Try-Catch,异常声明Throws,多异常处理,自定义异常,Throw和Throws的区别
JAVA之旅(十)——异常的概述,Try-Catch,异常声明Throws,多异常处理,自定义异常,Throw和Throws的区别 一.异常的概述 异常算是程序中一个比较重要的环节了,我们首先来看一下异常的体系,我们举一个小例子,定义一个除法方法 //公共的 类 类名 public .
1321 0
3.3 自定义控件基础 之 View的绘制
当测量好了一个View之后,我们就可以简单地重写onDraw()方法,并在Canvas对象上来绘制所需要的图形。首先我们来了解一下利用系统2D绘图API所必须要使用到的Canvas对象。
554 0
自定义控件基础 之 3.4 ViewGroup的测量 & 3.5 ViewGroup的绘制
ViewGroup的测量 之前分析中说了,ViewGroup会去管理其子View,其中一个管理项目就是负责子View的显示大小。当ViewGroup的大小为wrap_content时,ViewGroup就需要对子View进行遍历,以便获得所有子View的大小,从而来决定自己的大小。
474 0
+关注
郑昀
☑移动数据业务&times;6年 ☑语义聚合&times;4年 ☑O2O&times;5年的一个老兵。
222
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载