`
123003473
  • 浏览: 1064272 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Dojo之Widget标签开发

    博客分类：
  • dojo
 
阅读更多
Dojo widget就像是jsp中的自定义标签，通过学习开发widget标签来对其使用及其设计原理有更好的了解。本文主要是对Develop HTML widgets with Dojo一文的学习和翻译。

1.    Dojo widget的概念

正如上所述，dojo widget就像是jsp中自定义标签，只是dojo widget是在客户端使用的（本文中统一简称dojo widget为widget标签）。Widget标签已经脱离了传统的DOM模型结构，每个Widget标签都有唯一的widgetID，并且可以包含多个属性，而且可以包含子Widget标签。Widget共包含三个部分：

l         一个包含Widget标签逻辑的js文件，通过JavaScript DOM模型来处理可见的元素。

l         HTML模板文件，它提供基本的Widget HTML视图。当然如果模板很简单，完全可以在js文件中用字符类型替代。

l         Css样式文件，定义标签的样式，在js代码或者HTML模板文件中使用。

l         图片文件。

目录结构如下：

    dojo/src/widget ------------------------------------ js代码文件

     dojo/src/widget/templates ------------------------ HTML模板,Css样式文件

     dojo/src/widget/templates/images --------------- 图片文件



2.    Widget标签的使用

使用标准的Dojo Widget标签创建Button按钮，代码如下： 
<html>
<head>
    <script type="text/javascript" src="js/dojo/dojo.js"></script>

    <script type="text/javascript">

       dojo.require("dojo.widget.Button");

    </script>

</head>

<body>

    <div dojoType="Button">Submit</div>

    <!--另一种使用Widget标签的方法-->

    <!--<dojo:button caption="Submit"></dojo:button>-->

</body>

</html>


3.    自定义Widget标签-HelloWorld

首先创建js/dojo/src/Widget/templates/HelloWorldTemplate.html,代码如下： 

<div>

    HelloWorld

</div>


创建js/dojo/src/Widget/HelloWorl.js，代码如下： 

dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld",

dojo.widget.HtmlWidget, 

    {    templatePath:dojo.uri.dojoUri("src/widget/templates/HelloWorldTemplate.html")

    }

);


注：所有用户自定义Widget标签都必须继承HtmlWidget。

创建测试文件HelloWorld.html,代码如下： 

<html>

<head>

<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.widget.*");

    dojo.require("dojo.widget.HelloWorld");

</script>

</head>

<title>Hello World Widget test</title>

<body>

    <div dojoType="HelloWorld"></div>

    <dojo:HelloWorld></dojo:button>

</body>

</html>


如果HelloWorldTemplate模板足够简单，可以使用templateString替换templatePath，修改后HelloWorld.js代码如下： 
dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, 

    {

       templateString: "<div>Hello World</div>"

    }

);


4.    自定义Widget标签属性

以上部分讨论了如何创建简单的自定义标签，下面需要给HelloWorld添加属性以及自样式，让其更像一个标准的Html标签。让HelloWorld标签的显示内容可以有用户定义，添加text属性就可以办到。修改后的代码如下：

HelloWorld.js 

dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, 

    {

       templateString: "<div>${this.text}</div>",

       text: ""//default value     

    }

);


注：自定义属性必须要设置默认值，否则会被Dojo忽略。而且Dojo会忽略DOM模型下的所有属性。

HelloWorld.html 

<html>

<head>

<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.widget.*");

    dojo.require("dojo.widget.HelloWorld");

</script>

</head>

<title>Hello World Widget test</title>

<body>

    <div dojoType="HelloWorld" text="you can set the text attribute"></div>

    <!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>-->

</body>

</html>


属性的处理

    处理属性的典型方法是postCreate()方法（稍候讨论），另一个方法是fillInTemplate()。许多Widget标签都是通过postCreate()方法来处理属性的，也有通过set方法。不同的是postCreate()方法是在标签创建时处理属性，而set方法是在运行时动态设置属性。

脚本片断

    在HEML模板文件中加入js代码并不是一个好的方法，但有时候却必不可少。在Dojo中可以使用${…}代码片断来获取属性值，正如上例中的${this.text}。

添加样式

    为了使Widget达到真正的功用，Dojo提供了定制css样式的功能，通过引用不同的自定义样式，可以方便的为应用改变显示效果。为HelloWorld标签添加样式，创建一个简单样式文件js/dojo/src/widget/templates/HtmlHelloWorld.css，代码如下： 

.caption {

    font-family: Verdana;

    font-size: 10pt;

}


注：css类名必须是唯一的

修改HeolloWorld.js，代码如下： 

dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget, 

    {

       templateString: "<div class=\"caption\">${this.text}</div>",

       text: "",//default value

       templateCssPath: dojo.uri.dojoUri("src/widget/templates/HtmlHelloWorld.css") 

    }

);


5.    在js中使用Widget标签

本部分将说明如何用Dojo在js代码中使用HelloWorld标签，而传统的js方式已经不再适用。

传统方式操作Widget标签

    如果想在程序中动态改变text “Hello World”，你会试着用传统的js方式来实现，但是这样做是徒劳的。传统方式的代码如下： 

<html>

<head>

<script type="text/javascript" src=" js/dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.widget.HelloWorld");

</script>

</head>

<body onload="document.getElementById('HelloWorldTest').innerHTML='New

text';">

    <div id=" HelloWorldTest" dojoType="HelloWorld"></div>

</body>

</html>


这样的代码是没有任何效果的。下面就分析一下这段为何不会有作用。

A.      Body中的onload属性失效

Body中的onload属性与Dojo是不兼容的，Dojo已经在事件方法中包括了onload的事件。Onload事件在Dojo下使用，代码如下： 

<html>

<head>

...

<script>

    dojo.addOnLoad(

       function(){

           alert("onload!");

       }

    );

</script>

</head>


B.      Dojo Widget标签与DOM element的区别

Dojo Widget标签已经不再是一个DOM element。Dojo创建Widget标签时，已经去掉所有DOM模式下的所有属性，除了Dojo认识的属性。例如，id已经演化成了widgetId。如果需要用传统的方式操作属性，必须通过修改模板文件来实现。如果需要获取ID，修改模板文件代码如下：


<div id="${this.widgetId}">Hello World</div>

Dojo方式操作Widget标签

    如果要用Dojo方式操作Widget标签，必须还要修改一些代码。修改后的HelloWorld.js代码如下：


dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

    {

       templateString: "<div dojoAttachPoint=\"domNode\" >${this.text}</div>",

       text: "",//default value

       // dynamic setters

       setHtml: function(htmlString) {

           this.domNode.innerHTML = htmlString;

       }     

    }

);



注：Dojo Widget标签使用attachment points来处理DOM element。在Dojo方式下，不需要id=”${this.widgetId}”，因为不会使用id来获取对象，而是使用attachment point。实际上attachment point是默认使用的。”domNode”是attachment points根元素

通过获取Widget标签对象实例，代码如下：   


<html>

<head>

<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript"> dojo.require("dojo.widget.HelloWorld");

    dojo.addOnLoad(function(){

       dojo.widget.byId("someID").setHtml("New text");

    });

</script>

</head>

<body>

    <div id="someID" dojoType="HelloWorld"></div>

</body>

</html>



通过使用dojo.widget.createWidget()方法动态创建HelloWorld实例，代码如下：


<html>

<head>

<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.widget.HelloWorld");

    dojo.addOnLoad(

       function(){

           var newWidget = dojo.widget.createWidget(

           "HelloWorld", // widgetType

           {}, // widget attributes, for example {title: "Some Title"}

           dojo.byId("widgetPlaceholder") // reference to a DOM node that

           // will be REPLACED by new widget

           );

       }

    );

</script>

</head>

<body>

    <div id="widgetPlaceholder"></div>

</body>

</html>



6.    Widget标签嵌套HTML

本部分讨论如何实现Widget标签的嵌套

A.      嵌套静态HTML

正如前面提到的Dojo创建Widget标签时移除所有的DOM element。所以在Dojo移除之前，必须改变所要的DOM element。通过Dojo提供fillInTemplate()方法实现。此方法可以操作HTML DOM element和已经生成的Widget标签。实现改变静态HTML的HelloWorld.js代码如下：


dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

    {

       templateString: "<div dojoAttachPoint=\"domNode\">${this.text}</div>",

       text: "",//default value

       // dynamic setters

       setHtml: function(htmlString) {

           this.domNode.innerHTML = htmlString;

       },

      

       fillInTemplate: function(args, frag) {

           // Getting original HTML element

           var source = this.getFragNodeRef(frag);

           // Moving all children of original element to

           // the desired node of the new component

           while(source.hasChildNodes()) {

              var node = dojo.dom.removeNode(source.firstChild);

              this.domNode.appendChild(node);   

           }

           // Invoking original dojo fillInTemplate() method

        dojo.widget.HelloWorld.superclass.fillInTemplate.call(this, args, frag);

       }

    }

);



以上代码将HTML DOM节点转移到需要的地方，另一种实现方法是设置Widet属性isContainter为true。

动态添加嵌套HTML

    如何动态添加嵌套HTML实现方法要根据动态HTML的形式来决定：

l         嵌套HTML作为string提供，通过设置innerHtml属性实现。

l         嵌套HTML作为DOM节点提供，可以使用appendChild方法实现。

以上方式的实现代码如下：


dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

    {

       templateString: "<div>${this.text}</div>",

       text: "",//default value

       setHtml: function(html) {

           if (dojo.lang.isString(html)) {

              this.domNode.innerHTML = html;

           } else if (dojo.dom.isNode(html)) {

              // Cleaning whatever was there before

              dojo.dom.removeChildren(this.domNode);

              // Adding new element

              this.domNode.appendChild(html);

           } else {

              dojo.lang.assert(false, "setHtml called with incorrect type: " + (typeof html));

           }

       }     

    }

);



7.    Widget标签嵌套Widget标签

嵌套静态Widget标签

    有些情况下我们需要实现Widget标签的相互嵌套，例如Dojo TabContainer和Tree标签。要实现这样的Widget标签，你需要设置isContainer为true，而且要在模板中设置attachment point为”containerNode”，代码如下：


dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

    {

       templateString: "<div dojoAttachPoint=\"containerNode\">${this.text}</div>",

       text: "",//default value

       isContainer: true

    }

);



这种实现是依赖Dojo的，如果需要实现更加复杂的，必须要操作postCreate方法中的Children数组，数组中存了所有嵌套的静态Widget标签。

测试代码：


<html>

<head>

<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.widget.Button");

    dojo.require("dojo.widget.HelloWorld");  

</script>

</head>

<title>Hello World Widget test</title>

<body>

    <div dojoType="HelloWorld" text="   ad you can set the text attribute">

       <div dojoType="Button">Submit</div>

    </div>

    <!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>-->

</body>

</html>



复杂应用请参考Dojo TabContainer和Tree标签。

动态添加Widget标签嵌套

    动态添加Widget标签嵌套，需要在HelloWorld.js中实现addChild()方法，重写addChild()方法中还要调用父类的addChild()方法。实现动静态添加Widget标签嵌套的代码如下：


dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

    {

       templateString: "<div dojoAttachPoint=\"titleNode\">${this.text}" +

                       "<br/><div dojoAttachPoint=\"containerNode\">"

                     + "</div></div>",

       text: "",//default value

       isContainer: true,

       postCreate: function() {

           // adding statically

           for(var i in this.children) {

              this._addRow(this.children[i]);

           }

       },

       addChild: function(child, overrideContainerNode,

           pos, ref, insertIndex) {

           this._addRow(child);

           dojo.widget.HelloWorld.superclass.addChild.call(

           this, child, overrideContainerNode);

       },

       _addRow: function(component) {

           this.titleNode.appendChild(

           document.createTextNode(component.widgetType));

           this.titleNode.appendChild(

           document.createElement("br"));

       }

    }

);





注：经测试发现，即使不实现addChild方法，同样可以动态添加Widget标签嵌套，但是在HtmlWidget类中也没有找到addChild方法的实现，这里有待进一步研究。

测试代码：


<html>

<head>

<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.widget.Button");

    dojo.require("dojo.widget.Checkbox");

    dojo.require("dojo.widget.HelloWorld");

    dojo.addOnLoad(function(){

       var button = dojo.widget.createWidget("Button",

                         {caption: "Submit"});

       dojo.widget.byId('someID').addChild(button);

       var checkbox = dojo.widget.createWidget("Checkbox");

       dojo.widget.byId('someID').addChild(checkbox);

    });

</script>

</head>

<title>Hello World Widget test</title>

<body>

    <div dojoType="HelloWorld" id="someID"></div>

    <!--<dojo:HelloWorld text="you can set the text attribute"></dojo:button>-->

</body>

</html>



8.    Dojo事件处理

本部分主要介绍使用Dojo的方式处理事件，在阅读本部分之前，最好先了解Dojo事件系统。首先需要在模板中定义dojoAttachEvent=”eventName: eventHandlerMethod;”属性。eventName是标准的DOM事件名称(例如：onClick)，eventHandlerMethod则为事件调用函数。修改后的代码如下：


dojo.provide("dojo.widget.HelloWorld");

dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget("dojo.widget.HelloWorld", dojo.widget.HtmlWidget,

    {

       templateString: '<div dojoAttachPoint="domNode" dojoAttachEvent="onClick:onClickHandler;">Click here</div>',      

       onClickHandler: function(e) {

           alert("clicked in onClickHandler");

           this.onClick(e);                  

       },

       onClick:function (e) { //for dojo.event.connect

       }

    }

);



注：可以在标签中预定义某一事件的函数，如上例中的onClickHandler，同时也可以预留接口让用户绑定自定义函数。

测试代码：


<html>

<head>

<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript">

    dojo.require("dojo.widget.HelloWorld");

    function HelloWorld_onClick() {

       alert("Node clicked in HelloWorld_onClick");

    }  

    dojo.addOnLoad(function(){

       var hello = dojo.widget.byId("someID");

       dojo.event.connect(hello, 'onClick', 'HelloWorld_onClick')

    });

</script>

</head>

<title>Hello World Widget test</title>

<body>

    <div dojoType="HelloWorld" id="someID"></div>

</body>

</html>



总结：

通过对本文的学习，初步了解了Dojo的Widget标签的简单使用和如何实现自定义Widget标签。

【转载地址】http://27091497.blog.163.com/blog/static/11806250200772210458268/
分享到：
| If-Modified-Since & If-None-Match
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Dojo之Widget标签开发 - 我为人人，人人为我 - BlogJava

    本文主要探讨的是在Dojo框架下进行Widget标签开发的技术细节，旨在帮助开发者更好地理解和利用Dojo构建可重用、模块化的Web组件。 首先，我们要了解什么是Widget。在Dojo中，Widget是UI组件的基础，它封装了HTML...

    基于 HTML5 的 Dojo Widget 开发

    ### 基于HTML5的Dojo Widget开发 #### 一、引言 随着Web技术的不断发展，HTML5已经成为新一代的Web标准，它不仅增强了对JavaScript的支持，还引入了许多新特性，例如音频视频标签、离线存储、Web Socket以及矢量...

    利用dojo进行客户端开发过程

    在客户端开发中，Dojo ...Dojo 提供了丰富的 API 和 widget 支持，使得开发高效且易于维护的 Web 应用成为可能。通过深入理解 Dojo 的核心概念和用法，开发者可以充分利用其强大功能，构建出高性能、跨平台的应用程序。

    DOJO API 中文参考手册，附加注解实例(精心重新排版DOC文档)

    例如，设置isDebug为true可以在开发过程中开启调试模式，baseScriptUri可以指定Dojo脚本的基础URI，parseWidgets控制是否自动解析页面中的Widget标签。通过正确配置djConfig，开发者能更好地优化Dojo的性能和功能。 ...

    DOJO 中文 开发手册

    Widget支持自定义样式和事件处理，通过简单标签即可在页面中使用。 **常用包介绍** Dojo 1.1.1 包含Dojo、Dijit和DojoX三个一级命名空间： 1. **Dojo**：核心功能包，提供基础API和服务。 2. **Dijit**：包含所有...

    DOJO客户端性能优化

    Dojo是一个强大的JavaScript工具包，旨在加速Web应用程序的开发，尤其在处理复杂的交互和动态功能时。为了优化DOJO客户端的性能，以下是一些关键策略： 1. **编译合适的dojo文件**：由于DOJO框架庞大，包含许多不必...

    dojo学习...........

    2. 引入Dojo核心库：通过`&lt;script&gt;`标签引入`dojo.js`，这是Dojo的基础文件，可能已经包含了部分常用模块。 3. 声明需要使用的模块：使用`dojo.require()`来引入所需的包或模块，确保它们在运行时可用。 Dojo为了...

    使用_Dojo_Mobile_为_iOS_智能终端开发_Native-like_Web_应用

    随着移动互联网技术的迅猛发展，为iOS等智能终端开发应用程序成为了开发者的重要技能之一。iOS，作为Apple公司推出的移动操作系统，已经广泛应用于iPhone、iPod Touch、iPad等设备中。iOS应用开发主要有原生应用...

    DOJO—API—中文参考手册

    - **parseWidgets**：是否自动解析页面中的Widget标签。 - **searchIds**：搜索标识符列表，用于快速定位DOM元素。 - **baseRelativePath**：基础相对路径，用于确定资源的相对位置。 - **libraryScriptUri**：库...

    DOJO中文手册，非常全面

    - **模块化**：根据所需功能的不同，DOJO提供多种版本，如AJAX版本、Widget版本、Event and I/O版本等。 - **自定义核心文件**：用户可以根据需求定制自己的核心代码文件，仅包含所需的模块，从而提高加载效率。 ##...

    DOJO_API_中文参考手册 附加注释实例

    - Widget支持自定义样式表和内部事件处理，用户通过简单的HTML标签即可使用。 - Dojo提供了丰富的Widget组件，如表格、树、菜单等，方便开发者构建用户界面。 3. Dojo、Dijit和DojoX的包和功能： - Dojo核心功能...

    dojo组件资料

    通过学习这些核心概念，你可以更好地理解和使用Dojo组件，同时，结合提供的“DojoToolbox.air”，你将获得一个桌面环境下的开发辅助工具，使你的Dojo开发之旅更加顺畅。对于源码分析和工具使用的深入探究，将进一步...

    Dojo1.rarDojo1.rarDojo1.rarDojo1.rar

    【标签】：Dojo1.rar 【压缩包子文件的文件名称列表】：精通 Dojo.000 本文将深入探讨Dojo框架的核心概念和关键特性，帮助你精通这个强大的工具集。 ### 1. Dojo简介 Dojo 是一个开源的JavaScript工具包，始于...

    DOJO中文学习手册2019-12-11.docx

    Dojo还在尝试创建一种新的标签语言DojoML，期望在不改变DojoML和JavaScript语法的情况下，通过不同的渲染方式展现数据，比如SVG或桌面应用。DojoML解析器能接受HTML和SVG输入，从而构建降级响应式应用程序。 在AJAX...

    dojo 之基础篇

    - **`&lt;button&gt;` 标签**：使用 Dojo 的 widget 功能来创建一个按钮，通过设置 `dojoType` 和 `widgetId` 属性，指定了这是一个 Dojo 的 Button 类型的小部件，并为其分配了一个 ID。 2. **JavaScript 部分** ```...

    Ajax Development With Grails Dojo

    - **熟悉Grails与Dojo的集成**：包括使用Dojo的标签、库和抽象层进行开发。 - **深入控制器与动作**：学习如何使用控制器处理Ajax请求，掌握`render()`方法、构建器和模板等关键概念。 - **获取实用技巧和资源**：...

    dojo例子之布局管理

    Dojo 是一个强大的JavaScript工具库，它为Web开发提供了丰富的功能，包括UI组件、数据管理、AJAX交互以及模块化开发等。在这个“dojo例子之布局管理”中，我们将深入探讨Dojo如何帮助我们构建具有高效布局的网页应用...

    dojo study keep moving

    ### Dojo 学习知识点详解 #### 一、Dojo 概述 Dojo 是一个功能强大且灵活的开源 ...以上是对 Dojo 学习笔记中提到的核心概念和操作方法的详细介绍，希望能帮助你更好地理解和掌握 Dojo 这一强大的前端开发框架。

    dojo学习笔记（web编程必备)

    - **加载Dojo核心库**：通过`&lt;script&gt;`标签引入`dojo.js`，这是Dojo的核心文件，通常经过压缩，如果需要查看源码，可以使用未压缩的`dojo.js.uncompressed.js`。 - **声明所需模块**：使用`dojo.require()`来导入...

Magicbox
Global site tag (gtag.js) - Google Analytics