《(smt表面组装技术)SMT开发框架上手指南精品》由会员分享，可在线阅读，更多相关《(smt表面组装技术)SMT开发框架上手指南精品（98页珍藏版）》请在金锄头文库上搜索。
1、 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总体结构
2、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传递简单对象到服务端，并返回简单对
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审核控
4、件编码规范505后台开发指南516前后台通讯开发指南527数据访问开发指南528公共服务使用指南529部署指南52 1 概述1.1 目的SMT开发框架上手指南，面前开发人员，提供详细的按步骤使用框架各方面技术的指南。1.2 预期读者开发（设计）人员，其他授权人员。1.3 术语和缩写术语、缩略语解释SMT深圳市神州通投资(集团)有限公司WP工作计划项目（本文以此项目作为示范）1.4 参考资料文档名称版本号日期12 前台上手指南2.1 练习1：建立前台解决方案该练习示范如何建立基于SMT开发框架的前台解决方案，其中包括工程的引入、组件的引用及Area的创建等等，在实际的开发过程中，本练习所进行的动
5、作应该由项目管理人员统一进行创建。1. 创建空的解决方案在VisualStuidio中，点击创建工程，打开新工程对话框：选择创建一个空的解决方案，以项目名称作为解决方案名称，本例我们以工作计划（WP）来作为示例：2. 加入框架Shell工程将框架提供的Shell工程加入到解决方案中（Shell工程请参考使用手册3.1.2.1：前台主工程）。在解决翻案管理器中右键，选择添加存在的工程：添加Shell工程（由框架人员提供）：引入后，可以根据本项目的需要进行重命名，如命名为：SMT.WP.Client.UI:Web.config中的标准配置请咨询框架人员。3. 创建业务工程新增一个类库工程，作为前台
6、的业务层：业务工程需要引用以下组件：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作为第一个
7、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文件，打开ht
8、ml编辑器，删除全部内容，任意输入一段字符，如下：3. 运行点击F5运行程序，登录后，点击菜单，选择Default1（菜单的配置请咨询框架管理员），将会展现如下界面：所有的业务窗体均基于此模式，所不同的是在index页面中编辑不同的html代码和脚本而已。2.3 练习3：组织架构对话框调用（1）该练习演示如何调用公司选择对话框，并演示如何获取选择值、如何多选等等。以下代码均添加到需要调用对话框的chtml页面上。1. 添加html代码新增一个文本框，用来显示选择的公司；新增一个按钮，用于弹出公司选择对话框，如下：选择公司: 2. 添加按钮事件调用脚本$(function() /弹出公司选择对话
9、框 $(#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,4
10、employee) /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
11、(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)
