Electronic Joint Business

Solution for E-Business

Web应用

基于 ASP.NET 开发多租户应用

在本文中,我们将创建一个多租户(multi-tenant)的 SaaS 应用,用到的技术包括:

  • 应用框架:ASP.NET Boilerplate
  • Web 框架:ASP.NET MVC 和 ASP.NET Web API
  • ORM : Entity Framework
  • SPA 框架:Angularjs
  • HTML/CSS 框架:Bootstrap

在阅读本文之前1,读者可以先试试在线演示

创建应用模板
ASP.NET Boilerplate 提供了许多模板可以更快地创建启动项目。利用 http://aspnetboilerplate.com/Templates 的模板,创建启动项目如下:

这里选择的是 “ABP + module zero” 模板 ( zero 模块为框架添加了用户、角色、租户…等等管理基础件),该模板为我们创建了一个“即用”的解决方案,包括登录页面、导航以及一个基于 bootstrap 的布局。下载之后,你就可以通过 Visual Studio 打开该解决方案,其层级结构(包括单元测试项目)如下:

First, we select EventCloud.Web as startup project. Solution comes with Entity Framework Code-First Migrations. So, (after restoring nuget packages) we open the Package Manager Console (PMC) and run Update-Database command to create the database:

 

, , , ,

编写 Google Chrome 浏览器扩展 — CodeProject Reputation Watcher

本文将探讨如何利用 jQuery 和 jQuery UI 来构建 Chrome 浏览器扩展,并将之集成到 Chrome 中。文中讨论的扩展会读取 CodeProject 的会员信息,并查看荣誉值,它会将这些信息存储在本地,日后再查询 CodeProject 时会将这些变化呈现到表格中。该扩展还可以读取并显示会员的荣誉值走势图。1

背景
编写 Chrome 扩展所需的文档可以在 Google Chrome Externsion 上找到。用到的 javascript 类库可参见jQueryjQuery UI

Chrome 浏览器扩展
Chrome 扩展本质上是一些嵌入 JavaScript 和 CSS 的 HTML 文件。为了让 Chrome 知道该如何处理这些文件并呈现给用户,必须在项目的根目录中的清单文件(manifest)中加以规定。该清单文件的文件名固定为:“manifest.json”。

我们先来看看本范例的清单文件:

{
  "manifest_version": 2,
  "name": "CodeProject Reputation Watcher",
  "short_name": "CPRepWatcher",
  "version": "2.0",
  "content_security_policy": "script-src ‘self’ https://ssl.google-analytics.com ‘unsafe-eval’; object-src ‘self’ ",
  "description": "Extension to retrieve a CodeProject accounts reputation points.",
  "icons": {
      "48":"images/bob48.png",
      "128":"images/bob128.png"
  },
  "browser_action": {
    "default_icon": "images/bob.png",
    "default_popup": "cprepwatch.html"
  },
  "options_page": "options.html",
  "permissions": [
    "http://*.codeproject.com/"
  ]
}

开始的一些基本属性比如:“name”、 “version” 和 “description” 含义相当直观无需解释。“icons” 属性定义了扩展可以使用的多个图标文件,安装扩展后,这些图标会显示在 Chrome 扩展页及工具栏上。

>>> 阅读全文

 

, , , , ,

用 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 事件并更新数据模型。所有的更改会为视图自动拾取并更改。

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

>>> 阅读全文

 

, , , , , ,

利用 ASP.NET MVC 4 开发 Web 应用 (一)

文章评价:
现在几乎所有的网站都不停地扩张,一旦它开始增长,你就会发现无论是编写、组织和维护一个站点都十分地困难。当我们往项目中添加新功能或添加新开发人员的时候,任何设计拙劣的大型的 Web 应用都可能会去控制。因此本文隐藏的设计思想是任何一个网站的设计,无论是对网页设计师(初级到中级)还是搜索引擎而言,其架构必须是简单、易于理解的。在这篇文章中,我想要设计一个用于维护个人联系方式的站点。任何一个大型社区都可以重用该程序及其附加功能和模块。因此,设计必须很容易适应未来的业务增长。

在这篇文章中,我将讨论如何创建和设计用户界面(UI)的方式,该方式将把 UI 将从业务逻辑分离,可以由独立的设计师/开发人员负责创建。我们将会用到的框架包括 ASP.NET MVC、Knockout、Jquery 和 Bootstrap。

在后续文章中,我们会更多地谈到有关数据库设计以及如何利用 SQL Server 2008 、Entity Framework 、Castle Windsor 依赖注入框架来实现商业逻辑。

分离关注点:主要目标
关键概念是如何剥离大部分或全部商业逻辑。商业逻辑不应和页面捆绑,否则在需要重用另一个页面里的逻辑就会难以处理。很多人会忍不住对代码进行复制粘贴。一旦这样做了,项目就变得难以维护。另一个重要概念是将业务逻辑从数据存取层剥离出来,由于我们将考虑使用 Entity Framework ,这应该不成为问题。我们可以轻松地将所有 EF 的文件放到另一个 Assembly 中,然后添加该 Assembly 的引用即可。顶层设计概念如下所示:

将这一概念贯彻到 Visual Studio 开发工具中,我们得到了最后的解决方案:

>>> 阅读全文

 

, , , , , , , ,

WebGL 教程(三)动起来!

欢迎来到Lesson 3!在这一课中我们将开始尝试让物体运动起来。本节课的内容是基于 NeHe 的 OpenGL 教程的第四课改写的。

Here’s what the lesson looks like when run on a browser that supports WebGL:

Click here and you’ll see the live WebGL version, if you’ve got a browser that supports it; here’s how to get one if you don’t.

More on how it all works below…

The usual warning: these lessons are targeted at people with a reasonable amount of programming knowledge, but no real experience in 3D graphics; the aim is to get you up and running, with a good understanding of what’s going on in the code, so that you can start producing your own 3D Web pages as quickly as possible. If you haven’t read the first and second tutorials already, you should probably do so before reading this one — here I will only explain the differences between the code for lesson 2 and the new code.

>>> 阅读全文

 

, , , ,

WebGL 教程 (二) 添加颜色

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

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

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

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

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

>>> 阅读全文

 

, , , , , ,

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 文件,然后你就可以看到分子了。

这是一些快捷键:

>>> 阅读全文

 

, , , , , ,

初识 Sinatra (四)

文章评价:

这是本系列文章的最后一部分。本教程的目标是带领从未用过 Sinatra 的用户从头开始创建一个应用,并将之最后发布。

到前三部分结束时,我们已经完成了 To Do List 应用的大部分功能。在本系列的最后一部分,我们将先看看如何用 Sass 来编写 CSS ,之后将本应用发布到 Heroku 云服务上。

Logo
每个上点档次的应用都应有一个 logo,所以我创建了一个简单的“tick” logo,你可以在 Github 上找到。我们用它来作为本应用的头条的背景图片。打开 Styles.css 并添加下列 CSS:

h1.logo{
  font-family: helvetica,arial,sans-serif;
  font-size: 24px;
  color: white;
  padding: 64px 0 0;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0.3em;
  background: transparent url(/logo.png) 50% 0 no-repeat;
  }

(注意 – 也许你还发现,你需要为 layout.slim 的 h1 元素添加一个 ‘logo’ 类,这段 CSS 才会起作用。)

>>> 阅读全文

 

, , , , , , , ,

SASS 使用介绍

简单地说: Sass 就是程序化的 CSS。 Sass (即 Syntactically Awesome StyleSheets 的缩写,意思是“相当迷人的样式表”) 是一种动态样式语言,它受到 Haml 的简洁精炼的语法的启发,提供了 变量、操作、嵌套选择器(selector)和 Mixin 等等功能来增强样式表,因此和单纯使用 CSS 语法相比,Sass 更容易编写,也更容易阅读。现在 Sass 是 Ruby 上的 Haml 插件的组件之一,我们可以用 Haml 来处理 HTML 标记,而用 Sass 来处理 CSS 标记。 其作者是这样介绍 Sass 的优点的:

“ Sass 是 CSS 之上的一种元语言 (meta-language),用于简洁、结构化地描述文档的样式,和普通 CSS 相比功能更强大。Sass 提供的更简洁、更优雅的 CSS 语法,同时还实现了许多特性,可以帮助创建更易于管理的样式表。”

Sass 的发展有两种语法规则( syntaxes )。。原先 Sass 采用了 Haml 的缩排语法,没有括号,分号,它使用行缩进的方式来指定 CSS 块,这对于习惯了 CSS 语法的页面设计师来说很不习惯,同时也不能兼容既有的 CSS,因此 Sass 3 就演变成了 Scss (Sassy CSS),它是 CSS3 语法的的拓展升级,摒弃了原来的缩进语法,而采用了 CSS 设计师的惯用的花括号 {}。 Scss 100% 兼容了CSS3, 因此在一个有效的 CSS3 文件同时可以被 Scss 所识别。除此之外,它还支持我们能够找到的所有扩展,甚至包括一些非标准语法,例如微软的 expression() 函数和 filter 属性。

为了加以区别, 使用缩进语法的文件以 .sass 为扩展名,而采用 Scss 语法的文件则以 .scss 作为扩展名

参考:
http://sass-lang.com/tutorial.html

 

, , ,

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所示:

>>> 阅读全文

 

, , , , , , ,

初识 Sinatra (三)

文章评分:
在本教程的第二部分,我们利用 DataMapper 将任务保存到后台数据库,同时我们还用 Sinatra 创建了 web 前端以便显示、添加、删除和结束任务。现在这个 Just do it 应用功能齐备,但是样子还有点丑陋。

在本章中,我们继续对这个应用做些美化修饰,并增加一些功能,让你能够创建多个任务列表。

添加样式
现在我们用样式表来对应用进行美化修饰。在你的 “layout.slim” 中添加下面这行代码:

<link rel="stylesheet" media="screen, projection" href="/styles.css">

现在创建一个名为” styles.css”的文件,并保存在”public”文件夹中,将下面 CSS 内容添加到该文件中:

.completed{
  text-decoration: line-through;
  }
.tasks{
  padding:0;
  list-style:none;
  width:400px;
  }
.task{
  position:relative;
  padding:2px 0 2px 28px;
  border-bottom: dotted 1px #ccc;
}
form.update{
  position:absolute;
  bottom:2px;
  left:0;
  }
form.update input{
  background:white;
  color:white;
  padding:0 2px;
  border:solid 1px gray;
  cursor:pointer;
}
.tasks li.completed form.update input{
  color:#47FD6B;
  }
form.delete{
  display:inline;
  }
form.delete input{
  background:none;
  cursor:pointer;
  border:none;
  }

刷新页面,现在页面是不是看起来好多了,也更像一个真正的任务列表了。你也许注意到,该样式表中有个 ‘completed’ 类。 到目前为止,我们显示已完成的任务的方法是为它添加完成的时间,这样看起来不怎么样。我们来修改一下 task 视图,添加 ‘completed’ 类。这样利用样式表,已完成的任务看起来就是完全不同的风格。打开 “task.slim” 做如下修改:

>>> 阅读全文

 

, , , , , ,

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 风格应用同样适用。

    >>> 阅读全文

     

    , , , ,

    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 ,如例子所示:

    >>> 阅读全文

     

    , , , , , , ,

    Previous Posts