配置脱机工作.docVIP

· 下载源代码 998 KB 介绍 几个月前我在Mobile上写了一篇关于使用 HTML5.jquery ui和 knockout.js的 TaskTracker离线Web应用。 本文的重点是使用HTML5离线编程和探索不同功能框架( 如 jQuery 。jQuery ui和 knockout )的功能。 这篇文章是它的扩展，涵盖了一些附加特性，比如 HTML5 Canvas，使用 jQuery AJAX集成后端数据库，以及AJAX启用的WCF服务。 下面给出了本文所探讨的关键特性： · HTML5的应用程序缓存。web Webstorage和Canvas特性在这个应用程序中使用 · 使异步编程变得更容易，使你能够与JavaScript中的交互。 · AJAX启用WCF服务和 Entity Framework 背景 SPC是任何制造过程中质量控制的重要组成部分。 目前进行SPC分析的数据采集过程主要是手工的。 这主要是由于车间的恶劣环境，而且很难使用常规计算机或者 笔记本 。 随着智能手机技术的发展，现在可以以编写一个应用程序来实现数据捕获过程。 另外，如离线编程的关键特性，现在可以以在没有internet的情况下在本地保存数据并将它的保存到 internet 。 因这里，对于 ipad/android平板电脑的实时控制器( 统计过程控制) 应用将对工程。制造和过程产业非常有用。 这将使质量检查员和操作人员实时从商店捕获数据，并实时检查控制图。 你可以在这里查看应用程序的工作版本( 。 设计概述 应用程序是使用流行的MVVM设计 Pattern 构建。 MVVM是一个与旧的MVC设计 Pattern 非常相似的设计 Pattern，它解决了关注点分离问题。 像MVC一样，它有一个模型，视图，但是控制器角色是由ViewModel完成的。 视图模型负责处理用户交互，并与模型交互并更新视图。 除了模型之外，它还可以有其他属性，可以查看特定的。 此外，在包含多个视图的复杂web应用程序中，每个视图都可以有相应的视图模型。 在我们的应用程序中，只有一个视图和一个视图模型。 应用程序的关键文件是 newmain.html，SPCNewController.js StorageController.js controlCharts.js SPCAjaxHelper.js 和 SPCService.svc。 应用程序的类图如图 1所示。 从图 1中，RealTimeSPCUI类是一个概念类并表示应用程序的UI，并且实现为纯 HTML 。 SPCViewModel是一个负责处理所有用户交互并更新视图和与模型交互的键类。 Measurement是一个实体类，它充当这个应用程序的模型。 StorageController是一个包装类，负责保存和从web服务中检索数据。 XBarRangeChart是负责控制图表的类。 SPCAjaxHelper是一个 helper 类，用于处理与WCF服务类 SPCService的jQuery AJAX交互。 JavaScript不像传统面向对象的编程语言，比如 C++ 。C# 或者 Java，它没有 Class构造，所以所有类都不同。 我首先解释业务层实现，然后是数据层，以及 finally 。 业务层 业务层由一个关键实体 Measurement组成，并表示模型。 另一个重要的类是 SPCViewModel。 节 below 显示 Measurment类的实现细节。 // Declare Measurment class function Measurement() { var self = this; self.parameter= ko.observable(); self.id = 1, self.TimeStamp = ko.observable($.datepicker.formatDate(yy-mm-dd,new Date())), self.PartNo = ko.observable(), self.Machine= ko.observable(), self.Operator=ko.observable(), self.Parameter= ko.observable(Inner Diameter); self.P1=ko.observable(0), self.P2=ko.observable(0), self.P3=ko.observable(0), self.P4=ko.observable(0), self.P5=ko.observable(0), self.PAve = ko.dependentObservable(function () { var