Electronic Joint Business

Solution for E-Business

html

用 vert.x 和 angular.js 构建基础 Axon 框架示例

在邮件列表上我常看到不断有人在问哪可以找到基础示例,最好用到了 vert.x 。由于本人对 Axon 和 vert.x 都略知一二,所以我想略尽薄力。这里我基于 vert.x 创建了个非常基础的 Axon 应用1。它用来维护个人的“待办事项”。这些事项可通过连接的网络浏览器间查阅,用户可以创建新的“待办事项”,也可以把某个事项标为“完成”。

我在浏览 Devoxx 站点时,正好学习了一个 javascript 前端框架 AngularJS 。这对 vert.x 技术栈来说是个很棒的补强。之前我一直使用 Bootstrap 来完成前端的工作,所以这个框架用起来很是顺手。图1-1 演示了本应用的最终效果。如果你想知道这个应用是怎么创建的,请继续阅读。

概述
我们创建的是个待办事项的演示。我们希望可以在网上创建待办事项。待办事项可被存储,当其他人连接到这个 Web 应用时也可以看到相同的待办事项。一旦待办事项被更新,或者将它们标为“完成”,这些变动会被推至其他连接的浏览器。图1-2 给出了示例的设计架构。你可以从 github 上检出这个示例。你可以查阅示例中的 readme 文件来运行本示例。

图1-2 中中包含了大量信息。首先客户端(在本例中是浏览器)通过 vert.x 事件总线与后端通讯。创建新事项或者或标记事项“已完成”都是在总线上发送给某个端点的一条消息。这些消息被侦听该端点的处理器( handler) 检出。接着,处理器通过 Axon 网关发出相应的命令(command) 让命令处理器(command handler)进行后续步骤,命令处理器使用 ToDo 聚合体 (aggregate) 来完成实际操作。Axon 用事件来改变状态。这些事件也为 ToDo 事件侦听器所使用,该组件会发送消息给 vert.x 事件总线以持久化待办事项,还会发送消息给客户端在侦听的主题。在客户端上,我们通过 AngularJS 控制器注册了个侦听器来侦听这些 vert.x 事件并更新数据模型。所有的更改会为视图自动拾取并更改。

听起来挺复杂的,下面我们逐一对某些片段进行讲解。

>>> 阅读全文

 

, , , , , ,

WebGL 教程 (二) 添加颜色

文章评价:
英文原文
欢迎来到 WebGL 教程的第二篇。在本文中我们将会研究一下如何给场景中的物体上色。本文的内容是基于 NeHe 的 OpenGL 教程的第三章改写的。

如果你的浏览器支持 WebGL 的话,你可以点击这里 来浏览线上版本。

事先声明,本系列的教程是面向那些具备相应编程知识,但没有实际 3D 图形经验的人群;目标是让学习者创建并运行代码,并且明白代码其中的含义,从而可以快速地创建自己的 3D Web 页面。如果你还没有阅读第一课,请先看一下第一课的内容吧。因为本课中我只会讲解那些与第一课中不同的新知识。

和上一篇文章一样,本教程应该有不少错误和混淆,如果你发现了哪些毗漏,请不吝留言斧正。

有两种方法可以获得上面实例的代码:在浏览线上版本时在页面中选择“查看源代码”;你也可以从 Github 中克隆源代码的压缩包。

>>> 阅读全文

 

, , , , , ,

Python编写的强大的通用解析器

Spark 是一种用 Python 编写的强大的、通用的解析器/编译器框架。在某些方面,Spark 所提供的比 SimpleParse 或其它 Python 解析器要多得多。不过由于它完全是用 Python 编写的,所以速度也会比较慢。

我将在本文中继续介绍一些解析的基本概念,并对 Spark 模块进行了讨论。解析框架是一个内容丰富的主题,它值得多花时间去全面了解;这篇文章为读者和我自己都开了一个好头。

在日常的编程中,我经常需要标识存在于文本文档中的部件和结构,这些文档包括:日志文件、配置文件、定界的数据以及格式更自由的(但还是半结构化的)报表格式。所有这些文档都拥有它们自己的“小语言”,用于规定什么能够出现在文档内。我编写这些非正式解析任务的程序的方法总是有点象大杂烩,其中包括定制状态机、正则表达式以及上下文驱动的字符串测试。这些程序中的模式大概总是这样:“读一些文本,弄清是否可以用它来做些什么,然后可能再多读一些文本,一直尝试下去。”

解析器将文档中部件和结构的描述提炼成简明、清晰和说明性的规则,确定由什么组成文档。大多数正式的解析器都使用扩展巴科斯范式(Extended Backus-Naur Form,EBNF)上的变体来描述它们所描述的语言的“语法”。基本上,EBNF 语法对您可能在文档中找到的部件赋予名称;另外,较大的部件通常由较小的部件组成。小部件在较大的部件中出现的频率和顺序由操作符指定。

举例来说,清单 1 是 EBNF 语法 typographify.def,我们在 SimpleParse 那篇文章中见到过这个语法(其它工具运行的方式稍有不同):
  

>>> 阅读全文

 

, , , , , ,

WebGL 教程 (一)三角形和正方形

文章评价:

欢迎来到我的第一篇 WebGL 教程 !本文借鉴了 NeHe 的 OpenGL 教程第二章,它是学习游戏开发的 3D 图形中好文章。本文将带你学习如何在网页上绘制三角形和正方形。也许这不够酷,但很好地阐述了如何用 WebGL 编程;如果你明白了这部分是如何工作,那么剩下的就相当简单了。

我们先看一下本文在支持 WebGL 的浏览器中的运行效果:

要继续本教程,你需要安装支持 WebGL 的浏览器,比如 IE11、 FireFox、Chrome 或者 Safari 等。 下面我们将继续了解如何用 WebGL 绘制三角形和正方形。

注意: 本教程是面向那些具有一定的编程知识,但没有体验过 3D 图形编程的人群,目标是让你从零开始,透过运行代码深入了解其工作原理,以便能尽快地开始编写自己的 3D 网页。我在自学 WebGL 的时候顺便写了这些教程,难免会有毗漏,欢迎大家斧正。如果您发现哪里存在谬误,请麻烦给我留言并加以指正。

>>> 阅读全文

 

, , , , , , ,

用 WebGL 和 HTML5 创建三维分子查看器

简介
许多人对 OpenGL 相当熟悉,但是对使用 WebGL 就有一点陌生。然而,许多 OpenGL 的概念和格式都可以应用到 WebGL 上。本文打算在 WebGL 编程方面做出一些尝试,可以让你了解 WebGL 的一些难易程度。象我这种略知 OpenGL 而对 WebGL 完全没概念的新手,这个例子也只花了我不到 6 个小时。现在有许多用 Java applet 或 C++ 程序写好的查看器。本项目尝试用 Javascript 和 WebGL 来完成同样的工作。让人惊讶的是,这一点也不难。

背景
WebGL 是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定,WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计 3D 网页游戏等等。

如何使用本文的代码

将本文的代码安装到 Web 服务器上,你可以选用本地服务器,也可以选择远程服务器。打开 index.html ,选择 Choose File 按钮,从本机选一个 PDB 文件,然后你就可以看到分子了。

这是一些快捷键:

>>> 阅读全文

 

, , , , , ,

Rails3 技术手册 (一) 概述

英文原文
Ruby on Rails 是用于快速简洁地开发 Web 应用框架。它被 37signal 公司的项目管理工具 Basecamp 中剥离出来,其作者 David Heinemeier Hansson 率先用 Rails 着手解决手边的现实问题。 我们会发现用 Rails 进行开发时充满乐趣, Rails 负担起了开发中那些无聊的琐事,因此开发者能专注于所要解决的问题本身。

你如果不理解这些开发中的琐事,可以看一下下面的例子:编写过 Web 应用的开发者都不可避免地会用到字典结构、缓存、数据持久化、模板系统、测试框架、路由等等组件。Rails 自身就带了这堆让应用上线运行所必需的组件,而且作者在编写它们时充分考虑了彼此的适配问题。以往希望模板语言能和复杂的 ORM 层能在一起工作的麻烦现在再也没有了。一切将是如此简单。

现在开发者无需再为数据库等的组件编写大量繁琐的 XML 配置。Rails 基于约定而非配置,配置因而精简到最少。假如 Animal 类就是关联到数据库的 animals 数据表,为什么还要让开发者花时间写配置文件来链接它们? 这一切就让 Rails 来帮你吧。

简而言之,Rails 让 Web 开发充满乐趣。

架构
Rails 应用开发是基于模型-视图-控制器模式的 (MVC) 的。想了解 Rails 是如何使用 MVC 的, 最简单的办法是透过了解 Rails 请求的生命周期。如图1-1所示:

>>> 阅读全文

 

, , , , , , ,

IE 10 开发者指南之文档对象模型

Windows 开发者预览版中的 IE10 或者 Metro 风格应用包含了许多新的文档对象模型的特性,包括:

  • 高级点击测试API — Advanced Hit Testing APIs
  • CSSOM 浮点值支持 — CSSOMFloating Point Value Support
  • 媒体查询监听器 — Media Query Listeners
  • 触摸和姿态 DOM 事件 — Pointer and Gesture DOM Events
  • 注意:这些特性在 IE10 或使用 HTML 的 Metro 风格应用都一样能工作。

    高级点击测试API
    IE10 和 Metro 风格应用中的文档对象模型 (DOM)都支持 elementFromPoint 方法,该方法返回某个视区(viewport)中位于坐标(X,Y)处的元素。这个方法对单一元素仍然有效,比如说点击页面上的某个图片。但是,对于游戏、图形编辑器之类使用多个图层的应用,点击屏幕,是无法获得相交于该点的所有东西的。

    IE10 引入了 msElementsFromPoint 和 msElementsFromRect 方法,这两个方法可以获得所有相交于指定的(X,Y)坐标或者矩形区域的所有元素,并返回节点列表。

    msElementsFromPoint 方法
    msElementsFromPoint 方法以某点的坐标 (X,Y)为参数,返回所有相交于该点的元素节点集合。. 该列表按 Z 顺序排序,这意味着第一个元素就是最顶层的元素。

    >>> 阅读全文

     

    , , , ,

    IE 10 开发者指南之SVG

    SVG (Scapable Vector Graphics,可缩放矢量图像)是互联网联盟(W3C)的正式推荐标准,它是一种使用 XML 来描述二维图像的语言。

    SVG 允许3种形式的图像对象存在,分别是矢量图形(如由直线、曲线等组成的路径)、点阵图像和文本。各种图像对象能够组合、变换,并且能修改其样式,也能够定义成预处理对象以便再用。SVG 还支持各种特效,包括嵌套变换、路径剪裁、透明度处理、滤镜效果以及模板对象等。同时,SVG 可以是互动和动态的,动画可以直接加入 SVG 文本,也可以通过脚本加入。在新的SVG版本中,还可以表现视频、音频等其它信息。

    SVG 通过使用脚本语言来完成比较复杂的应用,脚本语言调用 SVG 对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。任何一种 SVG 图像元素都能使用脚本来处理类似鼠标单击、双击以及键盘输入等事件。

    由于 SVG 文本是 XML 名字空间中的有效字符,这些字符能作为 SVG 图像的关键字而通过搜索引擎进行查询。

    注意:这些特性在 IE10 和 采用 HTML 的 Metro 风格应用同样适用。

    >>> 阅读全文

     

    , , , ,

    在 Javascript 中用 Promise 进行异步编程

    对 Javascript 这类单线程的语言来说,避免同步执行对创建能即时响应高效执行的应用来说是十分必要的。Windows Library for Javascript (即 WinJS) 提供了一种称为 promise 的机制,大大简化了异步编程。

    JavaScript 用异步编程的必然
    JavaScript 是单线程的语言。这意味着调用耗时的过程时,其他所有过程的执行会被阻塞,直到该过程结束。假设有个类库用于查询某个 web service,我们这样来调用:

    var result = myWebService.get("http://www.contoso.com");

    在结果返回前的这段时间,其所在环境内的所有执行都被暂停了。这意味着UI界面失去了响应,动画效果暂停了,应用中的其他代码也无法被执行。

    解决这个问题的方法是尽可能的避免同步执行。通常我们会遵循一些基本的模式。这些模式可以归纳外将某项功能的执行推迟到未来某个时点。基于什么样的模式取决于使用何种 API。例如,处理 HTML DOM 的时候,大多数的元素都有一些事件。订阅这些事件允许以异步的形式执行代码。假如上面的 web service 库遵循这样的模式,代码看起来是这样的:

    myWebService.addEventListener(‘completed’, function(result) { /* do something */});
    myWebService.get("http://www.contoso.com");

    现在在这段 javascript 里调用 get 方法就不会阻塞执行了。(这里假定从 Web Service 获得结果的实际工作发生在 Javascript runtime 之外)。实际上,这儿只是初始化了该工作,当它结束时,“结束”事件被触发,处理器函数则被调用。当你有多个函数需要在费时操作结束时才被运行时,这个模式就十分有用。

    >>> 阅读全文

     

    , , , ,

    IE 10 开发者指南之索引数据库

    Internet Explorer 10 支持索引数据库API(IndexedDB), 来存储结构化数据。不同于cookie 和 DOM 存储,IndexedDB 提供了组合(group)、 遍历、搜索、过滤 Javascript 对象的功能。

    IndexedDB API 由多个对象组成,每个都为特定的任务而设计:

    • 数据被保存在对象存储(object stores)里,它是 Javascript 对象的集合,这些对象的属性包含独立的数值。
    • Javascript 对象被保存在对象存储中,也称为记录 (record),每个记录都有一个共同的属性 key path。该属性的值被称为键值(key value) 或者键(key)。键值 (Key values)用于标识对象存储里的单个记录。
    • 索引按照某一属性的值来组织对象,它返回键值的集合,通过键值可以从原来的对象存储中获得独立记录。
    • 游标 (cursor) 是值的集合。当索引定义了游标时,游标代表着索引返回的键值集合。当一个对象存储定义了游标的时候,游标代表着保存在游标中的记录集合。
    • Key Range为索引或对象存储中的记录集定义了值的范围。 Key Rang可以用来过滤游标的结果。
    • 一个请求意味着对数据库中对象采取的不同动作。例如打开数据库会产生一个请求对象,你可以为这个请求对象定义事件处理器来对请求的结果产生反应。
    • 事务管理着操作的上下文,并用于维护数据库活动的一致性。例如,你可以版本变更的事务上下文中创建对象存储。如果事务被放弃,在此事务中的所有操作都被取消。

    索引数据库 API 规范定义了两套 API: 同步 API 和异步 API。IE10 支持异步 API。因此,对数据库的操作不会马上被执行,而是让返回对象的操作在后台执行。因此,IndexedDB 是事件驱动 API,你首先创建请求,然后定义事件处理器来响应请求的成功或者失败的结果。

    很重要的一点,这些特性在 IE10 和使用 HTML 的 Metro 风格应用是一致的。

    使用请求来打开数据库
    因为索引数据库 API 规范还在发展中,大部分厂商都为自己的 IndexedDB 实现添加了一个前缀,比方说webkitIndexedDB 或者 mozIndexedDB。对 IE10 来说,则是 msIndexedDB。为了得到正确的结果,我们用一小段检测代码来访问 IndexedDB API ,如例子所示:

    >>> 阅读全文

     

    , , , , , , ,

    浅析HTA技术

    文章评价:
    近几年来,XUL 技术方兴未艾, XAML(WPF),Mozilla XUL 等新技术代表着一种以标记语言和脚本构造桌面应用程序的潮流,但是其实早在 1999 年,就有一项 Microsoft 的技术实现了这种想法,这就是 HTA 技术,它的功能十分强大,甚至有时候,它也背上了“木马”的恶名,但是 HTA 却是一切 XUL 技术的鼻祖,它影响深远,包括苹果公司后面推出的 PastryKit 技术,不过就是 HTA 技术在手机上的迁移而已。

    MS HTA 技术起源时间不详,早在 1999 年 3 月发布的ie 5.0就带有 mshta.exe 运行时,(Win98SE),远远早于 XUL 和 XAML。与这两种 XUL 技术不同的是,HTA 技术并没有产生新的标记,而只是利用现成的 HTML 标记,这虽然在流媒体、动画技术等等方便表现力较弱,却带来一个很大的好处,即我们利用现成的网页来构造桌面应用程序。

    随着 HTML5.0 的兴起,RIA 技术从 Flash,Silverlight 再次转向了 HTML 标记,HTA 技术必然焕发出新的光彩。

    Microsoft 对 HTA 技术下的定义是 HTML Application(HTML应用程序),它通过 MSHTA 运行时,可以直接将 HTML 保存成 HTA 为后缀的程序,该程序就是一个独立的应用软件,与VB、C++等程序语言所设计的软件没什么差别。也有人把 HTA 称为 Javascript/vbscript的 GUI. 无疑,现成的 javascript 框架、ActiveX 和 AJAX 等技术手段都能为 HTA 所用。甚至我们可以在 WinPE 环境中运行 HTA 程序,为 WinPE 定制出漂亮的界面来。

    下面我们来看一下 HTA 技术的具体应用。最简单的 HTA 程序,可以不需要任何脚本,而只是一段纯的 html,只需要将其后缀名改为 .hta,双击即可运行。

    >>> 阅读全文

     

    , , , , , ,

    在浏览器中使用Base64编码的图像

    文章评价:
    在上一篇博客中,我们将 BLOB 保存为 Base64 编码的字符串,这些字符串可以内嵌在 XML 的标签当中,这样二进制信息可以随着 XML 文件被拷贝、下载而不用担心信息会缺失。这项技术也在 email 邮件中被广泛使用。

    浏览器对 Base64 的支持
    图像是最经常使用的二进制文件格式之一。诸如 IE7,Firefox 等等现代的浏览器对 Base64 等各种编码的图像信息提供了很好的支持,在这些浏览器中,图形信息可以以下面的形式呈现在页面中、

    <img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM///// wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" alt="Base64 encoded image" width="150" height="150" />

    这种data: URI的格式能把 Base64(或其他数据)可以内嵌在 image 标签的属性当中(或者CSS中)。我们可以看到在大部分浏览器中的显示效果:

    这种做法有利有弊,好处是浏览器可以在一个连接中得到完成的页面内容,不好的地方时图像的大小会增加1/3。因此,这种内嵌的方法适合对小的图形元素比如图标、圆角等等进行处理,从而减少浏览器打开的连接数,但对大的照片、图片(量少而大)等等则不应该使用 Base64 编码以免影响下载速度。

    >>> 阅读全文

     

    , , , , ,