沧海一粟 —— 技术随手记

在使用Dojo的web应用中，经常会用到一种绑定事件的方式，就是dojo.connect。

上文(使用 Struts 2将Java对象序列化成JSON)介绍了如何将Java对象序列化成JSON格式并传到客户端。这篇文章就说说如何将客户端的JSON数据映射为服务器端的Java对象。 pom.xml需要引入struts2-json-plugin包。 org.apache.struts struts2-core 2.3.12 org

经常碰到这样一种需求，当点击某个按钮向服务器发送请求时，需要将整个页面或页面的某些控件阻塞住，直到请求返回，才允许用户操作。要实现这个功能，dojo中提供了多种方法。这儿就列举几种出来。（dojo 1.7.3） 1 阻塞整个页面dijit/Dialog Loading... on(dom.byId("show_dialog"), "click", funct

dijit.form.Select的addOption()函数是一个很好的功能，方便我们用编程的方法动态添加结点到Select中。不过如果遇到下面这样的问题，希望不要重走本人的老路，花冤枉时间。(Dojo 1.7.3) HTML代码 Check Box 1: <select id="cb1" name="cb1" style="width: 1

介绍dijit.Tree是一款很有用的Dojo控件，用来在页面上表示树形数据。像Dojo其他很多控件一样，它可以直接和后台的数据连接，并实时显示在页面上。已经有很多帖子介绍如何创建树、加入点击事件及右键菜单等，这儿专门介绍dijit.Tree拖拽的精细控制。 先说说举例用的应用场景。一个食品原材料供应商要建立自己的产品列表（New List），该列表包含几个大类，大类下面又有小类，直至

介绍dojo.data.ItemFileWriteStore是Dojo用来在前端操作数据的一个强大的工具。它可以和很多UI控件合作，进行数据的存储、传输和表示。比如和dijit.Tree结合时，可以在前端表示树形。最强大的是，只要操作ItemFileWriteStore，就可以实现树形的修改，包括增删节点、修改属性等。而且可以实时反映在前端页面上。 现在就以dijit.Tree为例，说

介绍在web应用的很多场合，需要让浮动窗口跟随鼠标而动。比如这儿举的一个例子：当用户选中网页上一段内容时，弹出工具条让用户进行标记。可以想象一下，有一个在线看书的应用，支持读者在阅读的时候随时做笔记。当读者选中一段文字时，弹出一个小工具条，让用户保存成笔记标题或笔记内容。在这种场景下，让小工具条出现在选中文字的旁边是必要的用户体验。在实际应用场合，还必须确保在不同的浏览器中、当文字内容有滚动条

介绍这种效果说的就是类似状态监视器一样的应用。实时更新后台或某个监控点的状态消息。主要采用的技术就是定时器和滚动定位。 代码示例<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>@import "../js/dijit/themes/tundra

介绍在大数据时代，Visualization似乎很火。它让数据变得更直观、易理解。相应的，Dojo提供了一个专门针对 web 矢量图开发的控件包dojox.charting，提供了很多封装好的控件，比如线图、饼图、柱状图等等。试想，如果能够让后台实时更新的数据直接反映在web页面的一张图上，这张图还能随着数据的更新而变化，岂不是很有趣？关键有了dojox.charting，这样的功能就能轻松实

介绍可以说dijit.form.TextBox是最常用的一款Dojo UI控件之一。那如何能操作它呢？这儿就列举了一些用法共参考。 HTML代码@import "../js/dijit/themes/tundra/tundra.css";@import "../css/main.css";<input type="text" id="input_box" s

介绍dijit.Tree（Dojo 1.7.3）是Dojo的树形UI控件。根据上设的dojo theme不同，可以有几种不同的标准风格（claro，tundra，nihilo和soria）。但要实现自己的风格，还需要用点手段“装扮装扮”。创建一棵树CSS代码@import "../js/dijit/themes/tundra/tundra.css"; html,

介绍Struts2 + Dojo是目前非常通用的Web应用开发组合。文件下载则是非常老的一个功能了。现在就介绍一下如何用Struts2+ Dojo 1.7.3实现文件下载的功能。 前端：初始化Dojo，创建下载按钮，实现点击下载事件test.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" p

介绍在开发Web应用前端时，总是免不了要在浏览器中进行跟踪调试。以Firefox为例，有很多插件，可以让我们的工作事半功倍。Firebug最强大的前端开发调试工具。可以查看编辑HTML、CSS、JavaScript，查看HTTP请求，并直接输入执行JavaScript代码。Clear Cache一键清空Cache。我们在调试代码的时候，经常碰到这样的情况：明

同样是de打头，我经常被dojo define和dojo declare弄晕。单词长的像，表面意思似乎也很像。翻译成中文叫“定义”和“声明”，可也不是Java中说的那样。那Dojo中是怎么安排这两个词的呢？ 先看define。作用是定义一个模块（module）。这个模块可以被require引用，引用了之后就可以使用define里面的东西。一个模块想当然，里面干什么事情，不一定全部自己实现。

用Dojo也有几年了，平常写代码的时候，经常碰到一些小小的需求，实现的功能不大，但是如果要自己编程的话，得费不少的劲儿。结果回头查Dojo的文档，竟然能找到一个功能，恰好能解决手头的需求，能惹得会心一笑。忙中偷闲，这儿零零碎碎地把这样的小功能记录下来，聊以一乐。 文中所记功能是基于Dojo1.7.3的，想来更高的基于AMD的版本也有类似的功能。 dojo/_base/lang:

Struts 2有个很强大的功能，就是可以自动完成服务器端Java对象和客户端JSON对象之间的映射。这篇文章就介绍一下如何将Java对象序列化成JSON格式并传到客户端。可以看看不同的Java类型和JSON类型之间是如何映射的。 pom.xml需要引入struts2-json-plugin包。 org.apache.struts struts2-core

从Struts 1到Struts 2，从Dojo 1.5到Dojo 1.7、1.8，技术一直在进步，经验却需要时时更新。对于Web应用中最常碰到的Ajax请求处理，新版本的Struts 2和dojo 1.7做法就和以前不一样（在JAVA servlet中返回不同类型的AJAX response）。现在就拿一个例子说明如何从前台用Dojo通过Ajax请求将Json数据送回后台，后台检测后返回信息；顺

关于JavaScript变量的作用范围，前面已经有很多文章谈论到。比如"JavaScript tutorial: Variable scope and the var keyword"区分了var在不同上下文中对变量作用范围的影响。然而采用独立JS文件并引入dojo.provide/require机制后，情况就变得比较有趣了。测试的server-side文件结构如下：其中，a.js为未使用dojo.provide声明的文件，在test.html中通过script-src调用。var a1 = 1;

dojo.provide/require机制作为JavaScript模块化管理工具，在用Dojo进行富客户端开发中确实起到了关键性的作用。

关于JavaScript浏览器兼容的问题，已经有很多前人提供了大量有用的解决方案。这儿主要记录了除开上述文章之外的一些兼容问题，作为其补充。

Dojo中dijit.Dialog对话框控件由于其良好的设计和封装，得到了很多人的喜爱。而通过继承dijit.Dialog类，我们也可以设计出内在逻辑复杂，功能各异的各种自定义对话框。本文通过分析两个样例及其JavaScript原型之间的关系，来更深入地了解dijit.Dialog是如何工作的。

<br />    在中大型软件的开发过程中，代码的模块化管理非常重要。众所周知支持良好的模块化管理的语言是Java，通过package/import机制来实现。相比较而言，JavaScript作为运行在前端的解释性语言，其模块化管理一直都没有受到足够的重视。对于以静态页面为主的网站，JavaScript一般就是做做网页特效，大多数情况下都是直接写入到HTML页面中，也谈不上模块化不模块化。但是随着富客户端的蓬勃发展，特别是web应用的大量出现，客户端的功能越来越复杂。JavaScript不仅需要支持变化多

介绍       每个流行的工具包中，总有一些异常出彩的闪光点。dojo.connect就是dojo工具包中，与JavaScript事件机制相关的重磅功能。       在JavaScript的使用场景中，我们经常需要侦听某些事件的触发，然后进行相应的（函数）处理。比如最常见的，当点击登录页面的登录节点时，JavaScript能够察觉到，并随之将用户登录信息发送到后台。下面先来看看dojo.connect的参数[http://docs.dojocampus.org/dojo/connect]：dojo.co

在JAVA servlet中返回不同类型的AJAX response。

dijit.layout.ContentPane[1]包含有一系列的标准方法和事件，又有诸多参数可以设置不同的值来对这些方法/事件的调用施加影响，导致对它的使用看起来非常的纷繁复杂。这儿通过firebug的console输出，尝试查看一下不同情况下，到底dijit.layout.

前一阵子被Dijit的参数处理机制搞得头大，最近终于腾出手来好好整理了下。     熟悉Dojo的人，都非常喜欢用Dijit组件模型进行开发。不仅可以通过异常简便的方式在网页上创建具有特殊功能的页面元素，也可以很方便地对这些元素进行重构。下面就是一个自定义dijit.layout

这篇帖子还是属于Dojo Widget系列吧。从上一篇dijit.layout.ContentPane 中的标准方法/事件在不同情况下的调用中，我们看到了dijit.layout.ContentPane 中的标准方法/事件在不同情况下是如何被调用的，这儿就可以基于其结论探讨一下，

说实话，在出问题之前，下面要讨论的Dojo Widget特性是我无论如何也想不到的。问题是这样的。我用一个继承自dijit.layout.ContentPane的Dojo Widget  “Test”封装了一块页面内容。由于这块内容包含了很多事件句柄，我希望在每次刷新或关闭这块内

这儿推荐一篇帖子：http://kennethfranqueiro.com/2010/06/making-a-smarter-tabcontainer/#comment-692dijit.layout.TabContainer 很好用，就是有一个致命缺点：当关闭一个t

dijit.layout.TabContainer是非常好用的一款tab组件，而创建每个tab的内容，最常用的就是dijit.layout.ContentPane。ContentPane 可以设置href，载入一块独立的html内容。每次在一个TabContainer中创建多个t

去年因缘际会，和Django接触了有半年时间。Django有开发快速、语言简洁的特点，对于web前端开发人员来说，其官方的模板系统也是尽量做到逻辑与显示分离的典型例子。    在开发的期间，也积累了一些这方面的经验。一个印象比较深的例子就是如何支持后台返回包含中文的JSON/数组格式。和想象中不一样，在后台用Python定义的JSON或数组，直接当作response传回前台后，JavaScri

之前在装扮装扮dijit.Tree这篇文章中介绍了如何利用dijit.Tree提供的功能改变树的外表。这儿继续dijit.Tree的话题，说说dijit.Tree中widget和DOM node之间的切换。dijit.Tree是dojo提供的一个对象，用以描述树形UI。相应地，它有与之对应的DOM结构，用以在网页上将树呈现出来。在很多时候，我们需要以一知二，或者已知widget对象，得到对应的