可视化模板控件开发说明.docxVIP

部件开发说明概述在We7CMS的可视化编辑中，模板由布局、部件、样式三部份组成。布局用于控制页面内容排版，部件为页面提供输出内容，样式用于控制页面的表现样式，三者相辅相成缺一不可。在制作模板过程中，布局由可视化编辑器默认提供，部件与样式可以选用官方或第三方提供的部件包，当然也可以自定义开发。如果要自己开发部件，需要遵守一定的规则。下面我们就来学习部件的开发流程吧。开发流程文件存放结构首先让我们来了解一下可视化模板中相关文件的存放位置。可视化的模板是放在_Skins文件夹下的模板组中的。如您有一个trunk的模板组。则文件的存放结构如下图所示：（图一）模板的存放目录结果_skins是模板的根目录，Trunk是模板组的根目录，所有的以.ascx结尾的文件都是模板文件，以.xml结尾的文件是模板描述文件。部件存放在Widgets根目录下，如下图所示：（图二）部件与风格其中Widgets是部件的根目录，Skin目录下是风格样式与部件会用到的资源文件；LayoutsIndex.xml是不同风格样式的索引文件，WidgetsIndex.xml是部件索引文件，除些之外的其它文件夹都是部件文件夹，如Announce是公告布件，ArticleList是文章列表部件。部件文件夹的组成结构如下：（图三）部件的组成结构一个部件主要是由一个数据提供程序Provider.cs文件与若干个（大于1）部件展示外观组成。其意义在于对于相同的数据可以拥有不同的展现形式。如对于一个列表数据，可以用”ulli //ul”来展现输出结果，也可以用”dldd //dl”来展现输出结果。风格文件夹的组成结构如下：（图四）风格样式文件夹Skin是风格的根目录，在根目录下有不同的风格文件夹与部件会用到的资源文件夹。在制作模板过程中所选择的风格就是与这儿的风格文件夹相对应的。如上图所示,js,swf是部件会用到的资源文件夹。Theme1与theme2是具体某种样式的风格。在具体的风格样式文件夹中必须包含的文件是Style.css. 当选中某个风格时调用的样式文件就是这个Style文件。制作一个部件了解了部件与样式的组成结构后，我们就开始动手制作一个部件吧。第一步：创建部件文件夹在Widgets目录下新建部件目录DemoWidget（图五）新建部件目录第二步：添加数据提供者在DemoWidget目录下新建一个类Provider.cs（图六）新建部件数据提供者Provider.cs第三步：添加一个外观文件在DemoWidget目录下新建一部件外观文件DemoWidget.Default.ascx（图七）新建部件外观文件DemoWidget.Default.ascx第四步：为数据提供者添加业务代码假定数据提供者需要根据栏目ID来获取数据，并根据设置的列表条目数来设定信息的显示条数。在Provider.css中编写代码如下：publicpartialclassHeader : BaseControl {privateListstring items;///summary/// 列表显示记录条数////summarypublicint PageSize = 10;publicListstring Items {get {if(items==null) { items=newListstring();for(int i=0;i100;i++) //填充测试数据 { items.Add(测试数据); } items=items.GetRange(0,PageSize); //根据设置的显示记录条数截取需要的数据。 }return items; } }}开发的任何一个部件都要继承于BaseWebControl或它的子类。如果不用BaseWebControl，部件在编辑器中就不能提供部件顶部的工具条以及拖拽功能。第六步：在部件外观中展示列表数据在DemoWidget.Default.ascx编写代码如下：%@ControlLanguage=C#AutoEventWireup=trueCodeFile=Provider.csInherits=We7.CMS.Web.Widgets.DemoWidget%!--Inherits代表继承于那一个类,这儿写的是Provider类的完整名称：We7.CMS.Web.Widgets.DemoWidget--ul%foreach