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

部件开发说明概?述在We7C?MS的可视化编辑?中，模板由布局、?部件、样式三部份?组成。布局用于控?制页面内容排版，?部件为页面提供输?出内容，样式用于?控制页面的表现样?式，三者相辅相成?缺一不可。在制作?模板过程中，布局?由可视化编辑器默?认提供，部件与样?式可以选用官方或?第三方提供的部件?包，当然也可以自?定义开发。如果要?自己开发部件，需?要遵守一定的规则?。下面我们就来学?习部件的开发流程?吧。开发流程?文件存放结构?首先让我们来了解?一下可视化模板中?相关文件的存放位?置。可视化的?模板是放在_Sk?ins文件夹下的?模板组中的。如您?有一个trunk?的模板组。则文件?的存放结构如下图?所示：（图?一）模板的存放目?录结果_sk?ins是模板的根?目录，Trunk?是模板组的根目录?，所有的以.as?cx结尾的文件都?是模板文件，以.?xml结尾的文件?是模板描述文件。?部件存放?在Widgets?根目录下，如下图?所示：（图?二）部件与风格?其中Widge?ts是部件的根目?录，Skin目录?下是风格样式与部?件会用到的资源文?件；Layout?sIndex.x?ml是不同风格样?式的索引文件，W?idgetsIn?dex.xml是?部件索引文件，除?些之外的其它文件?夹都是部件文件夹?，如Announ?ce是公告布件，?ArticleL?ist是文章列表?部件。部?件文件夹的组成结?构如下：（?图三）部件的组成?结构一个部件?主要是由一个数据?提供程序Prov?ider.cs文?件与若干个（大于?1）部件展示外观?组成。其意义在于?对于相同的数据可?以拥有不同的展现?形式。如对于一个?列表数据，可以用?”ulli? //ul?”来展现输出结果?，也可以用”d?ldd /?/dl”来展?现输出结果。?风格文件夹的组?成结构如下：?（图四）风格样?式文件夹Sk?in是风格的根目?录，在根目录下有?不同的风格文件夹?与部件会用到的资?源文件夹。在制作?模板过程中所选择?的风格就是与这儿?的风格文件夹相对?应的。如上图所示?,js,swf是?部件会用到的资源?文件夹。Them?e1与theme?2是具体某种样式?的风格。在具体的?风格样式文件夹中?必须包含的文件是?Style.cs?s. 当选中某个?风格时调用的样式?文件就是这个St?yle文件。制?作一个部件了解?了部件与样式的组?成结构后，我们就?开始动手制作一个?部件吧。第一?步：创建部件文件?夹在Widg?ets目录下新建?部件目录Demo?Widget?（图五）新建?部件目录第二?步：添加数据提供?者在Dem?oWidget目?录下新建一个类P?rovider.?cs（图六?）新建部件数据提?供者Provid?er.cs第?三步：添加一个外?观文件在D?emoWidge?t目录下新建一部?件外观文件Dem?oWidget.?Default.?ascx（?图七）新建部件外?观文件DemoW?idget.De?fault.as?cx第四步?：为数据提供者添?加业务代码假?定数据提供者需要?根据栏目ID来获?取数据，并根据设?置的列表条目数来?设定信息的显示条?数。在Provi?der.css中?编写代码如下：?public p?artial c?lass Hea?der : Ba?seContro?l {? ?private ?Liststr?ing ite?ms; ? ///? summar?y ? /// 列?表显示记录条数? ?/// /su?mmary ? p?ublic in?t PageSi?ze = 10;? ? public? Listst?ring It?ems ? { ? ? get ? ? { ? ? if(i?tems==nu?ll) ? ? { ? ? ? items=?new List?string?(); ? ? ?for(int ?i=0;i10?0;i++) ?//填充测试数据? ? ? { ? ? ? i?tems.Add?(测试数据)?; ? ? }? ? ? item?s=items.?GetRange?(0,PageS?ize); //?根据设置的显示记?录条数截取需要的?数据。 ? ? } ? ? re?turn ite?ms; ? ?} ? }}?开发的任何一个部?件都要继承于Ba?seWebCon?trol或它的子?类。如果不用Ba?seWebCon?trol，部件在?编辑器中就不能提?供部件顶部的工具?条以及拖拽功能。?第六步：在部?件外观中展示列表?数据在Dem?oWidget.?Default.?ascx编写代码?如下：%@ ?Control ?Language?=C# Au?toEventW?ire