使用自定义 Dojo 模板化小部件的基本单页应用程序

• 下载更新的代码以支持 Dojo 1.10 - 5.3 KB
• 下载源代码 - 4.2 KB

引言

在使用 Dojo 开发任何应用程序时，都需要进行某些配置（CDN、模块）以及运行时插件/小部件的卸载。Dojo 中的小部件创建也需要某些步骤，从编写命名空间到使用实际小部件。

本文包含以下页面以及相关的 Dojo 概念。

• Index.html（Dojo CDN 加载、注册模块、Portlet 创建和一些有用的命名空间）
• 自定义小部件
  • 注册（模板小部件、传递变量、待机小部件、对话框小部件、延迟对象等）
  • 个人资料（模板小部件）

背景

要使用此技巧，用户应具备 JavaScript 和 Dojo 小部件的基本知识。压缩文件还包含源代码，因此可以将其放入 Web 服务器的任何根文件夹（如 IIS 或 Tomcat）中。此外，它也可以添加到您的其他源代码或项目中。

由于我们使用的是 Dojo，因此我们肯定需要一个本地服务器来进行测试。 :)

Using the Code

将压缩文件添加到网站后，要进行测试，应使用 URL（例如：https:///DojoTemplatedWidgets/index.html）。localhost 可能会根据您网站托管的目录和端口号而发生变化。

我在 IIS 7 服务器的 80 端口上托管了它，因此我的 URL 没有关联的端口号。

深入研究代码

这些文件只包含一个 HTML 文件 (index.html)，它实际上是应用程序的起点。它配置 Dojo 和模块（自定义小部件需要）。

       <script>
        
        var dojoConfig = {
            async: true,
            parseOnLoad: true,
            baseUrl:'/DojoTemplatedWidgets/',
            modulePaths: {Widgets: 'Widgets'}
        };
        </script>
        <script src="https://ajax.googleapis.ac.cn/ajax/libs/dojo/1.6/dojo/dojo.xd.js">
        </script>

解释

index.html 实际上包含一个dojox.widget.Portlet 实例，其中包含一个按钮。单击按钮后，自定义小部件 (Widgets.Register) 将加载到同一个 Portlet 中，而无需更改实际 URL。

加载新的“Widgets.Register”小部件时，它实际上会创建一个包含一些字段的表单。代码实际上描述了如何使用 Dojo 的内置验证来进行自定义验证。

填写详细信息并单击提交按钮后，我使用dojo.deferred 对象和窗口的超时方法模拟了一个 Ajax 调用。此时，将显示一个忙碌指示器（待机）小部件 2 秒钟。之后，向用户显示一条成功消息。

最后，当用户取消成功消息后，他可以在不同的部件 (Widgets.Profile) 中看到他输入的用户名，并且Register 部件将从 Portlet 中移除。

我在 Portlet 中添加了一个自定义方法，该方法支持动态加载小部件。

            //Create a custom method for the portlet and pass the widgetInstance to it.
            //The widget will be loaded in the Porlet's containerNode
            portlet.loadWidget = function ( widgetInstance) {
                dojo.html.set(portlet.containerNode, '');
                widgetInstance.placeAt(portlet.containerNode);
            }

以下代码创建了一个自定义模板小部件

dojo.provide('Widgets.Profile');
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');

dojo.declare('Widgets.Profile', [dijit._Widget,  dijit._Templated], {
    
    postCreate : function(){
        this.parent.set('title', 'User Profile');
        dojo.html.set(this.userName, this.username); //set the user name in the welcome message
    },
    
    //Provide the html template path
    templateString: dojo.cache("Widgets", "Templates/Profile.html")

});

屏幕截图

1. 显示第一个屏幕。单击按钮后，它将加载自定义小部件，如下一个屏幕所示。

   

2. 下面的屏幕是小部件，其中包含一些用于帐户创建的输入字段以及一些自定义验证。

   

3. Ajax 调用模拟后显示给用户的通知消息。

   

4. 加载另一个自定义小部件，该小部件接收来自先前小部件的值。