SPA Framework http://js.devexpress.com/Documentation/Howto/SPA_Framework/Application_Design/?version=14_2

应用程序设计(Application Design)

无论你选用什么工具,创建一个移动应用的步骤都类似.比如:视图设计->视图导航设计->视图实现->数据绑定->调试->测试->发布
这篇文章告诉你,当选用devExream spa 框架的时候,如何方便快速地创建应用程序.

目标程序(target application)

首先确认spa是否满足你的需求,这个框架是为了构建以下移动应用程序的.
- 要求支持移动设备的商务程序.
- 移动程序,有一个设备ui导航到目标平台
- 为了实现具体功能,而非单纯为了娱乐
- 有很多包含列表或表单的页面构成
以下应用比较适合用,比如:
- 提供服务或者订单的(如商务支付,地图搜索,订单预订)
- 社交网络,包含数据处理的商业程序(如为房产经纪人,为出租车公司,仪表盘,问卷调查)
- 数据输入分析程序(如购物,待办事项,个人财务管理)
以下应用不适合用,比如:
- 图形绘制的
- 处理二进制数据的.

需要掌握的知识(Prerequisites)

javaScript,html5,css3,knockout,jquery

程序规划(application planning)

你知道了使用目标程序的主要场景,也知道他将解决的的问题,以及操作过程中的行为.你需要确定哪些视图是必须的,他们之间如何表述信息,最终用户在各视图间如何切换 .为了这个达到目的,你需要画一个信息图,该图包含了主要的视图,描述了他们呈现的信息和切换方式.
画图的过程中,你可能觉得需要很多个从应用程序进入的视图,这些被称为根视图(root views),其他的不是根视图(not root views),最终用户只能在特定操作下才能跳转到非根视图,根视图的数量对于决定全局导航很重要.
- 比如1个根视图(不需要当回,建立一系列的视图,用户通过返回按钮切换到上一个视图 ) ;
- 比如2-5个根视图的(用户可以通过一个导航的bar作为全局导航条);
- 很多根视图的(使用一个slide-out滑出式菜单作为导航条)

当决定了所采用的全局导航后,首先考虑框架预定义的布局(包括简单布局,navbar布局,滑出式布局,win8上的pivot布局,split布局),当使用一个预定义的布局时,只有视图的内容可以更改..

当使用了导航控件,你需要考虑怎样导航到子视图,重点是无论用户在哪个视图上,他都能够理解他当前位置,

你要考虑,程序提供的功能,决定每个视图的行为,包含用户在选中一个视图后的上下文,视图行为优先级排序,避免系统命令重复.
注意
- 无论你选用哪种导航,不要混搭使用.
- 如果打算做一个本机程序,参照对应的平台指导方针.
- 最小化视图数量,只有在必须的时候采用,确保它对于获取用户意图是有用且必须的.

程序页面(application page)

当使用的是spa框架(single-page applications),意味着应用程序逻辑和标签是在第一次加载(通过客户端或浏览器)的时候全部加载的.数据(json表单中的数据)可以在request中加载,消除了页面标签的web调用,允许程序响应.

虽然可以在单页面中实现所有应用(包含所有代码),但把代码分放在不同的文件中,在主页面中仅提供链接更好些,为了帮助你实现这点,框架提供了应用程序项目模板,你可以使用.

注意:
- devExtreme的js包(dx.phonejs.js或者是dx.webappjs.js)必须在globalize,jquery,knockout包之后.
- dx-theme(css)链接必须在 devexpress 代码之前.
- 也即按照,先各种css然后globalize,jquery,knockout公用包,然后是dx.phonejs.js,dx.webappjs.js 再之后是用户自定义的js文件

视图实现(Views Implementation)

布局(layouts)
当在花应用程序信息图的时候,你会发现视图拥有一些通用的元素,比如工具条,导航控件,为了帮助你组织视图中相同的结构,帮助你只关心内容的变化,框架提供了预定义布局,每个布局的定义 包含标签,包含更改视图内容的占位符..为了合并布局标签和 视图内容标签 to使用指定的转换显示结果,布局控制类被实现,另外,有一一列的样式表 用来显示布局便签 在不同的平台上使用一致的方式,这些预定义的布局都在lib/layouts下面.所有这些预定义的布局都被用在不同的布局集合中,设置项目的layoutSet属性 为其中之一,那么,所有的视图将会显示 在一个预定义的布局框中,独立视图内容的显示,

注意:
- 如果可能,不用修改那些预定义的布局,如果必须修改,在切换框架版本时 别忘了同步修改..
- 你可以创建或者组织自定义布局集合,这样,记着测试你的代码,并在切换更高版本是自己检查..

视图设计(View Design) 当一个视图集合被指定时,你只需要为视图定义变化的内容.本文档中.变化的内容被叫做视图.
框架遵守mvvm模式(model-view-viewmodel),模型时一个js对象,展示数据或者接收数据(从本地或者服务端).视图是一个包含css样式和bingings的html模板.视图模型时一个js对象,为视图准备数据,添加字段,计算,或者从其他模型抓取数据,下图帮助你想象 mvvm之间的关系[只有model会与后台交互,读取数据来源,只有viewmodel与model进行交互,同时viewmodel控制view展示.]

把视图的实现,分为三步,开始于一个view,准备将要被渲染的标签.不考虑将要显示的结果,主要任务是提供视图所有需要的元素.可以提供给美工,你的工作集中为了这个视图的视图模型和模型上.

小工具(Widgets) dev提供了大量的ui列表和可视化小工具,你可以使用这些在spa框架中.. dev小工具可以使用knockout,jsquery或者angularJs创建,我们建议你使用knockout,因为spa 框架是使用knockout模板创建..

注意:
- 不要混合使用knockout和jquery的处理方式,尤其是不用 在使用jquery创建的组件中 使用knockout 的绑定.

导航(Navigation) 框架运行时,关心视图间的导航,,你只需要在定义路由规则之前,指定要导向到的url 地址,.当视图被导向并被渲染时,它会变动可见使用指定动画或过度..

你可以在任何地方 调用HtmlApplication对象的navigate()方法,导航到视图..另外小工具(widgets)和命令(commands)包含配置对象,拥有一个string或者object对象 定义了要导航到的视图,你也可以了绑定任何html标签到一个导航到指定视图的行为(action)..字符串或者类对象 定义要导航到的视图 必须符合程序路由格式,路由格式必须指定,这样才可以在导航视图的时候传递参数.

当最终用户从一个视图导航到另一个的时候,框架导航管理器 会保存 展示过的视图历史,在移动程序中,导航视图的信息被保存在一个导航栈中..

你可以组织导航到一个 导航栈中底层的视图或者返回上一个,另外你可以组织导航到另一个导航站(基于另一个根视图)

提供一个返回的导航(无论是动态添加的返回按钮或者 硬件的返回键).默认导航到上一个页面.

在网站程序中,浏览器历史 代替了导航栈.

注意:
- 导航被组织,以便用户可以理解他所处的位置,以及如何返回到另一个视图.
- 返回按钮在需要时被自动添加,如果你想隐藏它或在不需要的时候显示它,常会错.
- 不要改变自动添加的返回按钮的转换行为.
- 返回按钮不应该出现在根视图上,因为跟视图是一个导航栈的开始.
- 当使用划出式布局.根视图在工具条上包含一个菜单按钮.这个按钮显示或因此一个导航菜单,子视图有返回按钮,要访问全局导航菜单,使用slide gesture(划出手势).不要更改这个行为.
- 使用dxAction绑定到指定的导航到连接,而不是使用标准的href属性..

工具条按钮(toolbar btttons) 框架提供的布局中包含dxToolbar工具,每一个工具栏,一个命令容器被定义,使用dxCommandContainer的data-options属性.命令容器有一个身份标示,你可以定义一个命令,并将它映射到需要的命令容器中,,所有的被映射到命令容器的命令将会以工具条按钮或者菜单项方式显示,,当点击按钮时,需要指定要调用的方法,按钮文本,按钮图标,指定相应的命令配置项.

注意:
- 不要直接在工具条添加按钮,使用命令方式添加.

图标(icons) 命令按钮和你添加到程序中的工具都可以显示图标,框架自带了一个图标库,包含一些频繁使用的图标,每个图示与对应的风格相匹配的,为了方便你很容易地使用图标库的图标,命令和工具 可通过配置项(配置图标名称)来显示图标.

你可以扩充图标库,另外你可以 通过设置iconSrc属性为一个指定的文件路径,进而使用自定义的图标 ..

视图模型(viewModel) 视图模型是一个js对象,用来准备展示视图所需要的数据,通过添加字段,或从其他模型中计算或者抓取数据. 在dev的程序模板中,视图模型被实现在单独的文件中,在程序主页链接.在这些文件中,有一个方法有跟视图模板一样的名字,这个方法返回一个视图模型)(ViewModel)对象.

视图对像可被用来处理程序视图相关事件. 扩展阅读: 定义一个视图,处理视图事件 注意:
- 不要使用全局绑定, - 不要在视图模型中访问标签 - 当实现视图模型时使用TDD方法

模型(model) 模型时一个js对象,用来表示数据或者接收数据(本地或者远程服务器的).在dev程序中,你可以使用数据源(DataSource)和仓库(Store)对象来读取和写数据 到本地或者远程服务器,数据源(DataSource)是有状态的,可排序,分组,过滤并保持转换选项并在每次加载的时候使用,它也提供事件视图处理数据和状态的改变,,数据仓库(Store)是无状态的,实现了读取和修改数据的接口,,每个仓库包含相同的方法集,所以你可以使用相同的代码处理不同的数据集,dev工具提供了很多便利的方式当他们帮的的数据源时使用他们..

扩展阅读:数据层,数据源例子

运行时(Running)

像普通的html-js程序,dev程序也通过浏览器运行.. 注意:
- 使用框架支持的浏览器
- 所有需要的风格必须在主页面被引用..

使用dev移动和web程序的 指导方案.
本地运行,使用任何web服务器均可(apache,iis等)
使用下列方法,查看你的程序在不同设备上的行为.
当运行在浏览器上时,使用代理切换选择需要的设备.
在index.js文件中,设置目标设备,在创建HtmlApplication对象前,使用 devExpress.devices.current(deviceName)方法.这样,程序将会运行在你设置的设备相匹配的风格下,这种方法在测试动态生成的url时很管用..
使用第三方设备模拟器,类似ripple,phonegap emulator.

使用dev完全程序 移动程序 在vs中使用dev项目模板创建,可以使用以下技术 在一个设备模拟器中(dev包含一个模拟器,允许你看到程序在不同设备上的不同 表现和行为) 在移动浏览器 你可以扫描模拟器提供的QR代码, 作为一个本地程序 使用你的设备从google pay或者itumes下载dev couriesr.使用这个程序运行你的程序,允许你看到作为本地程序时的样式和行为.

扩展阅读:模拟器工具

调试(Debugging)

所有浏览器对用户隐藏错误,为了检测html元素,调试js错误,可以使用浏览器的开发工具,以下链接教你怎样安装和使用它们(ie,firebug,chrome devtools,opera dragonfly)

调试KnockoutJs绑定,使用KnockoutJS调试器 扩展阅读:如何检测css,如何开始js调试

打包(Packaging)

创建移动程序的最后一步是打包.dev程序可以被Apach Cordova(phoneGap)编译成为一个本地安装包,提供到app stores中,如果参照以下规则,phonegap也可以提供访问设备的功能比如照相机,电话薄,加速器.

dev移动,web程序 添加config.xml文件到你的项目中,参照phonegap build instructions. 将项目打包为zip文件 参照phonegap build提供的说明,获取一个应用程序的本地包.

dev完全 dev提供了创建本地包想到,集成到了vs中,这个想到可以生产本地包.为以下平台:ios,anddroid,windows phone8,tizen,你也可以使用向导获得一个zip包,为apach cordova,

发布(Deployment)

因为程序使用dev spa框架,你可以发布到web服务器中. 以下例子告诉你如何发布到iis 添加项目内容到应用程序的输出文件夹(bin\debug或者bin\release) 在iis管理器中,添加链接到程序(包含发布项目文件夹) 确保index.html(或其他作为主页面的文件)被包含到默认文档中,可以选择你的项目在连接列表中,打开默认文档列表,添加到主页面的连接.

如何你发布使用dev项目模板创建的程序,包含一些.dxview后缀的文件,添加这种类型到mime类型中,选择项目的连接列表,打开mime类型也,右键 添加,

在浏览器中输入对应的url.