VS DevExtreme控件

最新推荐文章于 2024-08-22 08:41:17 发布

勇敢的鑫9

最新推荐文章于 2024-08-22 08:41:17 发布

阅读量6.8k

点赞数 1

分类专栏： DevExtreme 文章标签： web app

本文链接：https://blog.csdn.net/hujiuding/article/details/51308809

版权

DevExtreme 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

基于微软VS DevExtreme控件的web app开发
1. 移动开发分类：
※原生态开发模式（Native App）
Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。
它在用户体验度上平均在说更加稳定，但是开发成本大（因为一个版本的功能出来很快就能做出其中一部分让内测人员体验。而等我们全部做完了，已经过去一周了。然后提交给苹果审核，又要等一周。再等个良辰吉日发布，就过去了20天了。与此同时，我们有做出了更多的功能，调整了多处细节，还修复了几个bug–但用户只能再等几十天才能体验到了。而且还有的用户就是不升级。虽说我们能强制用户升级，但毕竟影响用户体验了），开发的成本高（native的平台太多-主流的就有ios、android、windows三个平台，每个平台上的运营、推广都有不同的规则，三个平台就得适应三种玩法）。

※移动web开发模式（Web App）
WebApp是基于手机的浏览器运行的。Web APP说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。但是Web APP开发也有其优势所在，它解决了iphone APP的可扩展性问题，因为它是可以跨平台使用的。比如你开发了一款Web App，那么它既可以在手机iphone上使用，也可以在平板ipad上使用，而不像iphone APP那样只针对某个平台。比如Google的搜索引擎就是一个Web App。

※混合App开发模式（Hybrid App）
Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。
Hybrid App它虽然看上去是一个Native App，但只有一个UI WebView(UIWebView用于在App中嵌入网页内容，通常情况下是html格式的网页，也支持pdf, word等文档)，里面访问的是一个Web App，比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。再彻底一点的，如掌上百度和淘宝客户端Android版，走的也是Hybrid App的路线，不过掌上百度里面封装的不是WebView，而是自己的浏览内核，所以体验上更像客户端，更高效。
Hybrid App这个领域虽然还处于比较初期的阶段，但是已经有很多优秀的公司和技术团队在致力于跨平台开发移动应用中间件技术的研究，给了开发者众多选择。开发者可以根据实际的项目需求来选择中间件。Web App虽被浏览器厂商和搜索引擎公司所推崇，但存在用户体验差、盈利模式不明确等现阶段无法解决的问题，或最终夭折。Hybrid App正在被越来越多的公司和开发者所认同，势必会成为新世界的王。

2. 三种模式的比较
Web App、Hybrid App、Native APP对比
这里写图片描述
Native App开发成本非常大，更新体验较差、同时也比较麻烦。每一次发布新的版本，都需要做版本打包，且需要用户手动更新。Web App虽被浏览器厂商和搜索引擎公司所推崇，但存在用户体验差、盈利模式不明确等现阶段无法解决的问题，或最终夭折。
正因为设备环境和开发工具的成熟，因此Hybrid App已经足够成为人们开发移动应用的优秀选择，开发门槛低、降低开发及维护成本等特点更让它成为企业实施移动信息化的首选。

3. Hybrid App主要技术
a.跨平台的web开发技术（html5+JavaScrip）
b.开源的跨平台移动设备引擎框架
如PhoneGap，AppCan，Titanium等等
c.数据交互标准——web service （如微软的Odata Service）
Web service是一个平台独立的，低耦合的，自包含的、基于可编程的web的应用程序，可使用开放的XML（标准通用标记语言下的一个子集）标准来描述、发布、发现、协调和配置这些应用程序，用于开发分布式的互操作的应用程序。[1]
Web Service技术，能使得运行在不同机器上的不同应用无须借助附加的、专门的第三方软件或硬件，就可相互交换数据或集成。依据Web Service规范实施的应用之间，无论它们所使用的语言、平台或内部协议是什么，都可以相互交换数据。Web Service是自描述、自包含的可用网络模块，可以执行具体的业务功能。
什么是Web Service？
一言以蔽之：WebService是一种跨编程语言和跨操作系统平台的远程调用技术。
从表面上看，Web service 就是一个应用程序，它向外界暴露出一个能够通过Web进行调用的API。这就是说，你能够用编程的方法通过Web来调用这个应用程序。我们把调用这个Web service 的应用程序叫做客户。Web service平台是一套标准，它定义了应用程序如何在Web上实现互操作性。你可以用任何你喜欢的语言，在任何你喜欢的平台上写Web service ，只要我们可以通过Web service标准对这些服务进行查询和访问。

4. 基本架构：
Angular Js Framework + UI widgets + Data Liabrary
优秀的JS框架用户界面组件数据库

5．开发工具
1. VS2013（或VS2010）
2. ODAC12c
3. DevExpressDevExtreme控件
（安装顺序如上）

一.DevExtreme简介
1、 DevExtreme为移动和Web开发提供HTML/ JS工具
2、 DevExtreme包含使用HTML5和JavaScript创建本地客户端应用程序以及针对当今最流行的智能手机和平板设备使用一个单一的代码库来提供解决方案的所有东西。
3、 DevExtreme允许建立HTML/ JS应用程序，并且可以打包为本地移动应用程序，然后安装到相应的移动设备。安装时，DevExtreme应用程序的外观和行为像本地移动应用。要建立这样的移动应用程序，DevExtreme带有一套UI控件(用户界面组件)，SPA（single-page application）框架和数据管理库。

二．入门程序演示
为了规范应用程序的命名和结构，简化创建应用程序的过程，DevExtreme自带了集成到Visual Studio的应用程序模板。使用这些模板，我们可以更快速地创建移动程序。首先我们以创建一个基本应用程序为例，步骤如下：
1. 新建基本应用程序
这里写图片描述
新建一个Basic Application项目，给项目命名，这样就建立了一个基于 SPA Framework和 DevExtreme 控件的HTML/JS 应用程序.
2. 部分右键菜单说明：

Build Native Packages：这个程序很容易被打包部署到任何一种设备。
Run Theme Builder：DevExtreme内置了一些主题，这些主题都是用CSS类表示的，比如dx.ios.default.css，dx.android5.light.css，我们可以自定义主题然后应用到程序上。
3.项目的结构说明
这里写图片描述
css:常用的特定平台的样式文件
js：应用程序所需要的所有JavaScript库
layouts：这个框架预先定义好的布局
views：有三个示例视图，”home”, “about” and “blank”，home由三个文件实现
home.dxview：视图设计器以及html源文件
home.css
home.js
这是典型的MVVM（模型视图视图模型）模式。根据这种模式，视图可以绑定到相应的ViewModels。ViewModel基本上是自定义JavaScript代码，它的作用负责从model中准备好数据提供给视图。model可以用从任何地方获得的数据来表示。所以，你可以选择通过AJAX请求连接到远程数据源，或者绑定到JavaScript对象，甚至使用HTML5本地存储。
app.config.js：包含一个配置对象去初始化程序的对象，这个配置包括layoutSet，项目中默认布局为navbar（导航栏），navigation选项指定我们可以直接访问导航栏中哪些items。
config.xml：在Build Native Packages时用到，该文件需要指定核心科多瓦API特性，插件和特定平台的设置。
cordova.js：最开始这是一个空文件。当打包的时候，Package Builder（包生成器）会用一个有效的指定平台的科多瓦库替换该文件。
index.css：程序样式
index.html：我们需要的所有资源链接
index.js：创建和配置HtmlApplication对象，该对象管理视图以及控制应用程序的生命周期
4.运行程序
程序由simulator（模拟器）显示，模拟器是DevExtreme VS 扩展的工具之一，它允许在不同的设备上查看应用程序
a.修改home 视图
将home视图的原内容改为如下：
这里写图片描述
b.绑定view到ViewModel
打开home.js文件，它已经帮我们实现了一个js函数，该函数返回的是一个ViewModel对象，接下来把视图上的元素绑定到ViewModel的field。
在ViewModel中添加一个message字段，值为”Welcome!”，然后在html模板中通过文本knockout语法将h1显示的文本内容绑定到message字段，浏览效果。
这里写图片描述

接下来我想输入名字XXX，点击按钮之后h1的内容显示hello XXX。
Html文件内容如下：

Js文件内容如下：

这里将message字段和name字段设置为ko.observable（变量），当ViewModel中字段值改变时，能自动更新UI元素的值。反过来一样，当UI元素值变化时，ViewModel中字段的值也会更新。
c.添加一个新的视图
greeting.dxview，会生成greeting.dxview 和 greeting.js文件，并且自动在index.html里注册。
这里写图片描述

greeting视图html模板如下：

Js代码如下：

d.在视图之间添加导航
默认情况下，新添加的视图都是根视图（可以直接从导航栏访问到），现在我们通过home 视图上的一个button导航到greeting页面。

删掉app.config.js文件中的greeting视图的导航项

e.给视图传递参数
将home视图中输入的内容传递到greeting视图，步骤如下：
首先在index.js文件中，确保程序允许传参，默认的路由规则里面有id这个参数
这里写图片描述
接下来在greet函数中导航到greeting视图的同时带上参数（home视图中输入的名字）：

greeting.js文件代码如下，将message字段设置为一个变量：

三.多通道应用程序
接下来我们创建一个多通道应用程序，在下面两种情况下，它比Basic Application更有用
1.当我们需要使用一些共享代码建立不同系统的应用程序，比如桌面，iOS系统，Android，Tizen，WindowsPhone8和Windows8，只需要创建一个多通道解决方案，会帮我们分别生成这些系统的项目以及一个共享项目。
2.无论想建立哪些平台的项目，程序可以绑定到一个WCF OData服务
创建多通道应用程序步骤如下：
1. WCF OData Service
Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架，可以翻译为Windows 通讯开发平台。
应用程序整体架构:移动端使用DevExtreme构建项目，数据库放在远程，WCF OData Service提供数据服务。
应用程序架构图
这里写图片描述

首先新建一个WCF OData Service（生成EMP表和DEPT表的实体模型）
这里写图片描述

添加一个多通道应用程序
在同一个解决方案中添加一个多通道应用程序

点击“finish”，会生成三个项目：

四．使用PhoneGap第三方插件
PhoneGap是一款开源的开发框架，是基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它实现了智能手机硬件相关的核心功能——包括地理定位，加速器，联系人，声音和振动等。此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。
PhoneGap插件分为三类：PhoneGap的内置的插件、官方认可并发布的第三方插件、自定义插件。其中内置的插件使用十分方便，仅需在项目属性—>PhoneGap中勾选需要的插件，然后就可以开始该插件的编程了，如下图所示(vs 2013)。
(插件的API可以在官网查看：http://docs.phonegap.com/en/2.9.0/cordova_camera_camera.md.html#Camera)。
这里写图片描述

五．附录:
1.mvvm模式简介：
MVVM模式是Model-View-ViewMode模式的简称。由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。
这里写图片描述
MVVM模式架构图
组成部分：
View：UI界面
ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；
Model：数据访问层
对这种模式的实现，大部分都是通过在view层声明数据绑定来和其他层分离的，这样就方便了前端开发人员和后端开发人员的分工，前端开发人员在html标签中写对viewmodel的绑定数据，model和viewmodel是后端开发人员通过开发应用的逻辑来维护这两层。
View没有大量代码逻辑，大量代码逻辑、状态转到ViewModel。
View绑定到ViewModel，然后执行一些命令在向它请求一个动作。而反过来，ViewModel跟Model通讯，告诉它更新来响应UI。这样便使得为应用构建UI非常的容易。往一个应用程序上贴一个界面越容易，外观设计师就越容易使用Blend来创建一个漂亮的界面。同时，当UI和功能越来越松耦合的时候，功能的可测试性就越来越强。
最近几年，mvvm模式在javascript中开始有人实现，目前比较成熟的框架有KnockoutJS, Kendo MVVM和Knockback.js。
使用MVVM模式有几大好处：
　　1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
　　2. 可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
　　3. 独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
　　4. 可测试性。可以针对ViewModel来对界面(View)进行测试