Board logo

标题: Dojo 日期控件的国际化和集成（1） [打印本页]
作者: look_w    时间: 2018-8-10 21:34     标题: Dojo 日期控件的国际化和集成（1）

Dojo 控件介绍Dojo 日期控件类型Dojo 目前支持两种日期控件：
图 1. dijit.form.TimeTextBox该类型控件为时间控件 , 图中显示格式为 :hh:mm:ss，该控件支持国际化 , 其格式会根据国家的不同而相应变化。
图 2. dijit.form.DateTextBox该类型控件为日期控件 , 图中显示格式为 :yyyy-MM-dd，该控件也支持国际化。
Dojo 日期控件的类层次结构图 3. Dojo 日期控件类结构图图 3 列出了 Dojo 日期控件所依赖的主要组件，下面分别介绍它们的功能：
Dojo 日期控件的初始化Dojo 提供了两种初始化控件的途径：声明方式和编程方式。
声明方式
通过给 html 控件添加 dojoType 属性，其值为 dojo 控件的类名，在加载页面的过程中 Dojo 会将指定了 dojoType 的控件转为 dojo 控件，如 <input type="text" dojoType="dijit.form.TimeTextBox" id="text001"> 。在页面加载完成后会转变为一个 dojo 时间控件。
Dojo 是如何把普通的 html 控件转换为 dojo 控件的呢？ dojo.parser 在其中起了主要的作用。 dojo.parser 会遍历页面取出有 dojoType 属性的 html 元素，根据 dojoType 的值来初始化 dojo 控件对象，同时会把页面中该元素的属性值做为参数传递给初始化方法，Dojo 把参数值转换为自己需要的类型。例如 :<input type="text" dojoType="dijit.form.TimeTextBox" id="text001" value="T14:22"> 在页面加载的时候 dojo 会初始化 dijit.form.TimeTextBox 类型的控件，同时会把 value="T14:22" 做为参数传给初始化方法，但由于 dijit.form.TimeTextBox 对应的 value 属性的值是 Date 类型，所以 dojo.parser 会对其进行转换。此时会用到 dojo 日期转换功能，在后面会详细介绍，代码如下 :
清单 1. 声明方式初始化 dojo
1
2
3
4
5
6
7
8
<script djConfig="parseOnLoad:true,isDebug:true,locale:'zh-cn'"src="<%=Context%>
/javascript/dojo/dojo.js" ></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TimeTextBox");
</script>
<body class="tundra">
<input type="text" id="text001" dojoType="dijit.form.TimeTextBox" value="T14:22">




图 4. Dojo 日期控件类结构图编程方式
dojo 允许以更加面向对象的方式来使用 dojo 控件。对于上面的例子，可以采用如下方式来初始化。
1
2
3
new dijit.form.TimeTextBox(
{"id":"text002","value":dojo.date.locale.parse(" 下午 2:22",{selector:"time"})},
dojo.byId("text001"));




该方法有两个参数 , 第一个为 dojo 对象属性值的一个集合，第二个参数指出了 dojo 控件在页面上的位置，在此例中 id 值为 text001 的 html 元素将被替换为 dojo 控件（注：原来的 html 控件将被移除）。第一个参数中我们同样有两个属性 id 和 value，由于编程方式定义的 dojo 控件不再经过 dojo.parser 处理，因此 value 属性的值必须是日期类型，我们用 dojo.date.locale.parse 方法来将字符串转换为 Date 类型，此处我们会看到同样是把字符串转换为 Date 类型，不同的方法数据格式会有很大不同，稍后会对此进行详细介绍 , 详细代码如下：列表 (lists) 是文章中常用的元素。列表分为有序列表 ( 带有数字顺序的列表 ) 和无序列表 ( 不带数字顺序的列表 ) 。
清单 2. 编程方式初始化 dojo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script djConfig="parseOnLoad:true,isDebug:true,locale:'zh-cn'"src="<%=Context%>
    /javascript/dojo/dojo.js" >
    </script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.form.TimeTextBox");
</script>
<body class="tundra">
    <input type="text" id="text001">
        <script>
            new dijit.form.TimeTextBox(
            {"id":"text002","value":dojo.date.locale.parse
            (" 下午 2:22",{selector:"time"})},dojo.byId("text001"));
        </script>




图 5. 编程方式初始化 dojo 效果我们可以看到，这两种方式所产生的效果是完全一样的。声明方式定义 dojo 控件实现起来比较简单，而且 dojo.parser 帮助我们做了很多辅助工作。编程方式稍微复杂些，但相比声明方式，编程方式更灵活，我们可以很方便的控制它的初始化过程。
两种方式结合
当然有些情况下会有这种需求 , 既想拥有编程方式的灵活性，又想拥有声明方式的简单性，比如我想自己来控制什么时候生成 dojo 控件，又不想自己写方法来进行参数值转换，可通过如下方式来实现，在 html 代码中不添加 dojoType 属性，在我们需要的时候，通过编程方式来指定 html 控件的 dojoType 属性值，然后通过调用 dojo.parser.instantiate() 方法，来解析 html 代码生成 dojo 控件，这样我们既能动态的控制 dojo 控件的生成，又能利用 dojo.parser 的强大功能，对于上面提到的例子我们可采用如下代码实现：
清单 3. 两种方式结合页面代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script djConfig="parseOnLoad:true,isDebug:true,locale:'zh-cn'"src="<%=Context%>
    /javascript/dojo/dojo.js" >
    </script>
<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.require("dijit.form.TimeTextBox");     
    function createDojo(inputId){
        var inputObj = document.getElementById(inputId);
        inputObj.setAttribute("dojoType", "dijit.form.TimeTextBox");
        dojo.parser.instantiate([inputObj]);
    }
</script>
<body class="tundra">
    <input type="text" id="text001" onfocus="createDojo('text001')">
</body>




其页面效果同前两种方式完全一样。



欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0