资源预览内容
第1页 / 共98页
第2页 / 共98页
第3页 / 共98页
第4页 / 共98页
第5页 / 共98页
第6页 / 共98页
第7页 / 共98页
第8页 / 共98页
第9页 / 共98页
第10页 / 共98页
亲,该文档总共98页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
SMT开发框架使用手册 SMT开发框架上手指南SMT Framework Hands-On Training项目名称:SMT开发框架项目编号:SMTO_SFV1.0文档编号:SMTO_PL_ODV1.0 产品版本号:V1.0编制单位:神州通在线科技有限公司编制日期:2012年4月6日编制审核批准生效日期宋涛在线科技机密,未经许可不得扩散 第98页, 共98页版本修订批准记录【 历次版本修订记录,版本修订描述重要说明】提交日期版本号版本修订描述作者批准人2012/4/101.0初始版本宋涛目 录1概述71.1目的71.2预期读者71.3术语和缩写71.4参考资料72总体设计概览82.1总体结构82.1.1总体示意图82.1.2层次结构82.2开发框架组件结构112.2.1工程结构113代码结构组织123.1前台代码结构123.1.1示意图123.1.2工程命名123.2后台代码结构133.2.1示意图133.2.2工程命名134前台开发指南154.1前台主工程154.1.1工程结构154.1.2业务划分164.2前台业务工程184.2.1工程结构184.2.2业务划分184.3UI模式194.3.1AJAX异步通讯194.3.2Grid-Detail模式194.4异步通讯编码规范224.4.1JSON数据格式224.4.2标准通讯模式234.4.3传递简单对象到服务端,并返回简单对象254.4.4传递两个简单对象到服务端,并返回简单对象264.4.5传递对象列表到服务端,并返回对象列表274.4.6传递一个对象及一个对象列表到服务端,并返回对象列表294.5公共控件324.5.1公司选择对话框324.5.2部门选择对话框344.5.3员工选择对话框364.5.4日期控件384.6模式/非模式对话框编码规范394.6.1函数定义394.6.2典型UI404.6.3HTML代码414.6.4JS代码414.6.5C#代码434.7Grid编码规范444.7.1函数定义444.7.2典型UI464.7.3HTML代码464.7.4JS代码464.7.5C#代码484.8审核控件编码规范505后台开发指南516前后台通讯开发指南527数据访问开发指南528公共服务使用指南529部署指南52 1 概述1.1 目的SMT开发框架上手指南,面前开发人员,提供详细的按步骤使用框架各方面技术的指南。1.2 预期读者开发(设计)人员,其他授权人员。1.3 术语和缩写术语、缩略语解释SMT深圳市神州通投资(集团)有限公司WP工作计划项目(本文以此项目作为示范)1.4 参考资料文档名称版本号日期12 前台上手指南2.1 练习1:建立前台解决方案该练习示范如何建立基于SMT开发框架的前台解决方案,其中包括工程的引入、组件的引用及Area的创建等等,在实际的开发过程中,本练习所进行的动作应该由项目管理人员统一进行创建。1. 创建空的解决方案在VisualStuidio中,点击创建工程,打开新工程对话框:选择创建一个空的解决方案,以项目名称作为解决方案名称,本例我们以工作计划(WP)来作为示例:2. 加入框架Shell工程将框架提供的Shell工程加入到解决方案中(Shell工程请参考使用手册3.1.2.1:前台主工程)。在解决翻案管理器中右键,选择添加存在的工程:添加Shell工程(由框架人员提供):引入后,可以根据本项目的需要进行重命名,如命名为:SMT.WP.Client.UI:Web.config中的标准配置请咨询框架人员。3. 创建业务工程新增一个类库工程,作为前台的业务层:业务工程需要引用以下组件:4. 创建工作区域在UI工程中,找到Areas文件夹:在Areas文件夹上点击右键,选择增加Area:填入项目名称:所有的UI编码都将在Areas/WP下完成,UI代码不应该写在Areas的外面。5. 运行程序客户端工程是一个ASP.Net MVC的工程,直接点击运行,应该出现如下的起始界面:2.2 练习2:建立基本的MVC窗体该练习示范建议一个最基础的基于SMT开发框架的MVC窗体,窗体简单的显示一行字符串。1. 新建Controller在Areas/Wp/Controllers上点击右键,新建Controller:我们使用默认的Default1作为第一个Controller:生成文件如下:点击,打开代码编辑窗口,将继承的父类由Controller改为BaseController,并添加HttpPost特性: public class Default1Controller : BaseController HttpPost public ActionResult Index() return View(); 2. 新建View在代码编辑器中的”return View();”上面点击右键,选择增加View:之后会在Areas/WP/Views下面生成一个Default1的目录,并产生一个Index的文件:点击Index.cshtml文件,打开html编辑器,删除全部内容,任意输入一段字符,如下:3. 运行点击F5运行程序,登录后,点击菜单,选择Default1(菜单的配置请咨询框架管理员),将会展现如下界面:所有的业务窗体均基于此模式,所不同的是在index页面中编辑不同的html代码和脚本而已。2.3 练习3:组织架构对话框调用(1)该练习演示如何调用公司选择对话框,并演示如何获取选择值、如何多选等等。以下代码均添加到需要调用对话框的chtml页面上。1. 添加html代码新增一个文本框,用来显示选择的公司;新增一个按钮,用于弹出公司选择对话框,如下:选择公司: 2. 添加按钮事件调用脚本$(function() /弹出公司选择对话框 $(#btn4_showcompany).click(function() /true为多选,false为单选 $smt.showCompanyDialog(true, showCompanyCallback); );showCompanyCallback为回调,具体参数请参考使用手册4.5.13. 添加回调脚本/公司对话框的回调 function showCompanyCallback(data) if (data = null) return; /单选时返回的data为单个对象 /属性为id,name,pId(父id),type(1company,2department,3post,4employee) /var str = data.id + + data.name + + data.type + + data.pId; /多选时返回的data为对象数组 var str = ; for (var i = 0; i data.length; i+) var cnode = new Object(); cnode.id = datai.id; cnode.name = datai.name; cnode.type = datai.type; cnode.pId = datai.pId; str += cnode.name + ; $(#txt_showcompany).val(str); 4. 运行程序点击按钮,弹出公司选择对话框:选择一家公司,点击确定:所选择的公司名称显示在文本框中。2.4 练习4:组织架构对话框调用(2)该练习演示如何调用部门选择对话框,并演示如何获取选择值、如何多选等等。以下代码均添加到需要调用对话框的chtml页面上。1. 添加html代码新增一个文本框,用来显示选择的部门;新增一个按钮,用于弹出部门选择对话框,如下:选择部门: 2. 添加按钮事件调用脚本$(function() /弹出部门选择对话框 $(#btn4_showdept).click(function() /true为多选,false为单选 $smt.showDepartmentDialog(false, showDepartmentCallback); );showDepartmentCallback为回调,具体参数请参考使用手册4.5.23. 添加回调脚本 /部门对话框的回调 function showDepartmentCallback(data)
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号