We7可拖部件开发说明.docVIP

We7部件开发说明 概述 在We7CMS的可视化编辑中，模板由布局、部件、样式三部份组成。布局用于控制页面内容排版，部件为页面提供输出内容，样式用于控制页面的表现样式，三者相辅相成缺一不可。在制作模板过程中，布局由可视化编辑器默认提供，部件与样式可以选用官方或第三方提供的部件包，当然也可以自定义开发。如果要自己开发部件，需要遵守一定的规则。下面我们就来学习部件的开发流程吧。 开发流程 文件存放结构 首先让我们来了解一下可视化模板中相关文件的存放位置。 可视化的模板是放在_Skins文件夹下的模板组中的。如您有一个trunk的模板组。则文件的存放结构如下图所示： （图一）模板的存放目录结果 _skins是模板的根目录，Trunk是模板组的根目录，所有的以.ascx结尾的文件都是模板文件，以.xml结尾的文件是模板描述文件。 部件存放在Widgets目录下，如下图所示： （图二）部件、主题、脚本 其中Widgets是部件的根目录，Themes目录下是站点风格样式；Scripts是可视化的公用脚本；WidgetCollection是部件文件夹，其下按照部件的功能进行分类，如导航类、文章列表类等，在分类文件夹，才是单个部件文件夹的集合。 部件文件夹的组成结构如下： （图三）部件的组成结构 一个部件主要是由一个数据提供程序.cs文件与一个部件.ascx展示外观组成，可以有一个css文件，和图片若干。部件文件的命名应和部件文件夹、部件css文件是统一的，规则是：部件文件夹下存在一个同名的.ascx(部件页面)和.cs(部件数据提供程序)，Style文件下应该有一个同名的.css文件。 主题文件夹的组成结构如下： （图四）主题文件夹 Themes是主题的根目录，在根目录下有不同的主题文件夹。在制作模板过程中所选择的主题就是与这儿的主题文件夹内的Style.css相对应的。如上图所示, Theme1与theme2是具体某种样式的风格主题，其下包括一个图片文件夹images，一个face.jpg是选择主题时所见的主题外观缩略图，和一个主题样式文件Style.css。 主题css文件必须提供一个标头，这样才能在“编辑模板”中的“重建主题索引”时，能够被索引到，从而达到灵活添加主题的目的。标头格式为： /************************************************************* * name:theme1 * img:/widgets/Themes/theme1/face.jpg * label:风格样式一 *************************************************************/ “重建主题索引”后，主题文件夹内的Themes.xml将检索到新的主题，生成如下格式的xml： 有了它，就能在可视化编辑时，选择新建的主题了。 制作一个部件 了解了部件与样式的组成结构后，我们就开始动手制作一个部件吧。 第一步：创建部件文件夹 在Widgets\WidgetCollection\其他类\ 目录下新建部件目录DemoWidget （图五）新建部件目录 第二步：添加数据提供者和外观文件 在DemoWidget目录下新建一个类DemoWidget.cs 和一个外观文件DemoWidget.ascx （图六）新建部件数据提供者DemoWidget.cs 和 外观文件DemoWidget.ascx 第四步：为数据提供者添加业务代码 假定数据提供者需要根据栏目ID来获取数据，并根据设置的列表条目数来设定信息的显示条数。在DemoWidget.css中编写代码如下： [ControlGroupDescription(Label = Demo部件, Icon = Demo部件, Description = Demo部件, DefaultType = DemoWidget)] [ControlDescription(Desc = Demo部件)] public partial class DemoWidget : BaseControl { private Liststring items; /// summary /// 列表显示记录条数 /// /summary [Parameter(Title = 控件每页记录, Type = Number,DefaultValue=10)] public int PageSize = 10; pub