设计师模块开发手册

设计师模块开发手册1/15变更版本号日期变更类型修改人摘要备注1.02013-11-25新增赵宏波设计师模块开发手册2/15概述1模块管理在sdk首页菜单中点击”我的模块”菜单项，进入模块列表页面，该页面中显示了设计师开发的所有模块列表，并分页显示，每页显示10个模块，在该页面中，可以创建新的模块，或打开模块回收站显示已经被删除的模块。1.1创建模块点击”创建新模块”按钮，将打开创建模块页面，如图所示：输入以下信息：输入项名称作用填写规范模块标识为模块的英文名称，用于生成存储模块基本信息的文件夹以大小写英文字母开头，可以包含：数字、减号和下划线，标识不能重复，最多输入20个字符，建议输入有意义的标识名称，如：ImgBanner模块名称模块的中文名称，用于模块列表在SDK和Jshop平台的显示最多20个字，输入类型不限，建议输入简单明了的名称，如：图片轮播模块缩略图用于模块列表在SDK和Jshop平台的显示支持png、jpg、jpeg、gif格式，尺寸为宽度80px，高度80px，图片不大于300K模块备注用于对模块的简要描述最多200个字符，输入类型不限模块详情用于在Jshop中显示模块详细信息，最好包括模块配置的详细说明信息最多输入32K信息，输入类型不限最后，点击保存按钮，即创建了一个新的模块。1.2修改模块在”我的模块”列表中，将鼠标悬停至任意模块的图标上，将弹出工具栏，如图所示：设计师模块开发手册3/15点击工具栏上的”编辑”按钮，打开模块编辑页面，在该页面中可以编辑模块的基本信息，模块标识则不能被修改。1.3删除模块在”我的模块”列表中，将鼠标悬停至任意模块的图标上，将弹出工具栏，如图所示：点击工具栏上的”删除”按钮删除该模块，注意：被删除的模块并未真正被删除，可以点击”回收站”找回被删除的模块。2模块开发2.1模块目录结构说明当创建一个模块后，系统会自动生成一系列文件夹，模块的基本信息会按规则保存在通过模块标识指定文件夹下，一个模块对应一个唯一的文件夹。该文件夹结构如下：文件夹说明：Jshop-NewBanner，为当前模块的根文件夹，NewBanner为模块的标识images，用于存放当前模块和模块模板的缩略图themes，用于存放模板的样式，默认样式文件为default.cssview，用于存放模块的数据展示模板，默认模板名称为default.vm生成的默认文件的名称和扩展名均不能手动修改。设计师模块开发手册4/152.2模块配置描述文件在模块根文件夹下存在一个：module.xml文件，该文件用于描述当前模块的参数配置信息，是模块配置页面生成的重要依据，文件示例内容如下：?xmlversion=1.0encoding=UTF-8standalone=yes?modulexmlns==:schemaLocation=图片轮播/nameparametersgrouptitle=默认paramname=namelabel=图片地址ptype=textformType=textdescription=//group/parameters/moduleXML节点说明如下：节点名称作用属性列表module根节点，无需编辑无flag模块参数唯一标识，无需编辑无name用于显示模块名称，无需编辑无parameters用于描述模块配置参数，无需编辑无group描述参数分组，可以增加或减少，至少一个grouptitle,loop,listparam描述参数项，可以增加或减少，至少一个paramname,label,ptype,formType,descriptiongroup节点属性说明：名称作用规则title设置分组标题必填list设置循环变量的名称非必填param节点属性说明：名称作用规则name参数名称必填，只能以英文开头，不能包含空格，可以有数字或下划线，满足变量命名要求label表单项前面的文字说明必填ptype描述输入数据的类型必填formType表单项的类型必填description表单项后面的文字说明非必填设计师模块开发手册5/15value表单项的默认值非必填，设置了value将在该模块的配置页面的表单项中显示value指定的值ptype属性取值说明名称说明text文本数据，最多256个字符number数值类型，可以是整性、浮点型image图片域类型，输入项可以双击弹出图片选择框url链接类型formType属性取值说明名称说明text描述生成inputtype=”text”/textarea描述生成textarea/textareaselect描述生成select/select可以直接通过Dreamweaver、Notepad++、EditPlus等文本编辑工具对其进行编辑，您可以通过添加一个group来增加一个参数分组，也可以添加一个param节点来增加一个参数，如下：parametersgrouptitle=第一组paramname=title1label=标题1ptype=textformType=textdescription=/paramname=content2label=内容1ptype=textformType=textdescription=//groupgrouptitle=第二组paramname=title2label=标题2ptype=textformType=textdescription=/paramname=content2label=内容2ptype=textformType=textdescription=//groupgrouptitle=第三组paramname=linklabel=友情链接ptype=textformType=selectdescription=optionvalue=首页/optionoptionvalue=服装城/optionoptionvalue=超市/option/param/group/parameters另外一种情况是，针对某些特殊模块，设计师需要提供一组可供用户动态添加或删除的参数组，如：开发友情链接模块，该个模块的输入项有：链接地址、链接标题和链接打开方式，为满足不同的用户可以设置个数不定的友情连接项，需要对参数的group组进行特殊标识。以下描述一组动态的输入项：parameters设计师模块开发手册6/15grouptitle=导航list=navListparamname=linklabel=链接ptype=textformType=textdescription=链接地址/paramname=titlelabel=标题ptype=textformType=textdescription=链接标题/paramname=openTypelabel=打开方式ptype=textformType=selectdescription=链接打开方式optionvalue=_self当前窗口/optionoptionvalue=_blank新窗口/option/param/group/parameters该配置将生成以下模块配置页面，如图：设置list属性表示模块展示页面用于遍历列表的velocity变量名称，同是表示当前group可以动态添加或者删除如：ulclass=nav#foreach($navin$navList)liahref=$!{nav.link}target=$nav.openType$!{nav.title}/a/li#end/ul让我们通过一张图片来描述module.xml和模板二者的关系，如下：模板内容：grouptitle=导航list=navListparamname=linklabel=链接ptype=textformType=textdescription=链接地址/paramname=titlelabel=标题ptype=textformType=textdescription=链接标题/paramname=openTypelabel=打开方式ptype=textformType=selectdescription=链接打开方式optionvalue=_self当前窗口/optionoptionvalue=_blank新窗口/option/param/group设计师模块开发手册7/15相同颜色字体的一一对应。module.xml文件编写注意事项：1、XML节点或属性是大小写敏感的，编写时需要注意大小写2、每个节点必须要有结束符，如param……/或param……/param3、属性值中不能包含空格4、XML节点或属性的值，尽量不要包括：&”之类的特殊字符，只能使用其对应的转义出字符。如下表格：原字符转义字符<>&&“"©'2.3模块开发流程及示例模块开发流程如下：2.4模块页面开发一套模块板，由数据展示页面和样式文件组成，当创建一个模块后，系统会自动创建一套默•添加基本信息•编辑基本信息创建模块•设计模块模板•设计模板样式•编辑配置描述•验证模块设计•装修店铺模板•置入模块•预览效果调试•验证模块•打包发布打包ulclass=nav#foreach($navin$navList)liahref=$!{nav.link}target=$nav.openType$!{nav.title}/a/li#end/ul设计师模块开发手册8/15认的模板，包括：default.vm模块数据展示页面，通过文本编辑器打开编辑。default.css数据展示页面样式文件。default.jpg模板缩略图文件。三个文件，分别位于：/模块根目录/view//模块根目录/themes//模块根目录/images/2.5模块页面编写规范模块模板的编写需要遵循velocity规范，什么velocity?，以下是velocity简单入门。2.5.1变量变量的简略标记是有一个前导$字符后跟一个标识符（Identifier.）组成。变量必须以一个字母开始(a..z或A..Z)。剩下的字符将由以下类型的字符组成：变量字母(a..z,A..Z)数字(0..9)下划线(_)必须以一个字母开始(a..z或A..Z)。剩下的字符将由以下类型的字符组成下面是一些正确的变量引用：$foo$mudSlinger$mud-slinger$mud_slinger$mudSlinger1${foo}${mudslinger}${mud-slinger}${mud_slinger}${mudSlinger1}2.5.2指令velocity指令以#开头#set指令用来为引用设置相应的值。值可以被值派给变量引用或者是属性引用，而且赋值要在括号里括起来。#set($string=“Helloworld”)#set($string1=$string)#set($string2=$string+$string1)#set($num=1)#set($total=$num*2)#set($array=[“Hello”,“world”])#if/else/elseif/end指令，条件指令，必须以#end指令结束设计师模块开发手册9/1