`
joshokn
  • 浏览: 102166 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

HelloWorld

    博客分类:
  • Dojo
阅读更多
[声明]:此文章只是偶得学习总结,如果您觉得不爽,可以到下面的网站看原文:
http://dojo.jot.com/WikiHome/Tutorials/HelloWorld#Introduction(我永远认为看原文远比看翻译理解的透彻)。
今天要小试Dojo,初次接触,依然从HelloWorld开始:
1.
从它的tutorial中知道,先要建立文件结构,所谓的文件结构,随便建,只是待会用到相对路径的时候能写清楚就可以了
如此:
引用

- HelloWorldTutorial/
    |
    |---- js/
          |
          ---- dojo/

http://dojotoolkit.org/download/下面的release解压到dojo下面
引用

- HelloWorldTutorial/
    |
    |-- js/
          |
          -- dojo/
               |
               -- build.txt
               -- CHANGELOG
               -- demos
                    |
                    -- ..
               -- dojo.js
               -- dojo.js.uncompressed.js
               -- iframe_history.html
               -- LICENSE
               -- README
               -- src/
                    |
                    -- ..

还是那句话自己可以搞清楚相对路径就OK了。

2.例子中用到了dojo组件中的button,风格还真是蛮有特点的,待会就知道了
在HelloWorldTutorial/下面建立HelloWorld.html吧
这是最后整理在一起的文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Dojo: Hello World!</title>

    <!-- SECTION 1 -->
    <script type="text/javascript" src="js/dojo/dojo.js"></script>
	<!-- SECTION 2 -->
	<script type="text/javascript">
		 dojo.require("dojo.event.*");
		// Load Dojo's code relating to widget managing functions
         //dojo.require("dojo.widget.*");
		// Load Dojo's code relating to the Button widget
         dojo.require("dojo.widget.Button");
		 
		 function helloPressed()
      	{
        	dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });

     	}

     	 function init()
      	{
       		var helloButton = dojo.widget.byId('helloButton');
        	dojo.event.connect(helloButton, 'onClick', 'helloPressed')
      	}

      	dojo.addOnLoad(init);
		
		function helloCallback(type, data, evt)
		  {
		    if (type == 'error')
		      alert('Error when retrieving data from the server!');
		    else
		      alert(data);
		  }


	</script>

  </head>

  <body>
  	<button dojoType="Button" widgetId="helloButton">Hello World!</button>
  </body>
</html>

解释一下,
首先你得html文件中需要有dojo自己的
<script type="text/javascript" src="js/dojo/dojo.js"></script>

dojo.js文件,
其二,'dojo.require'类似java的import ,可以看到文件中包含了dojo的button,怕麻烦就直接dojo.require("dojo.widget.*");将所有的widget引入,[这样做极其糟糕,不好的编程习惯!]
其三,‘ dojo.require("dojo.event.*");’组件和事件绑定。‘function init()’在html运行后被加载,init()中寻找‘button's id’,绑定相应的事件处理函数。
其四,看看这段代码很有意思:
function helloPressed()
      {
        dojo.io.bind({
                       url: 'response.txt',
                       handler: helloCallback
                    });
      }

'url':url当然是将数据(=HelloWorldTutorial/下面建立一个'response.txt'文件)送出的了,tutorial上面讲送往服务器,我想这里就本地了,有送就有回,在'服务器'返回数据的时候就调用
handler: helloCallback
处理了.'helloCallback'里面的参数顾名思义了.
到此为止已经可以运行这样一个用dojo组件编写的html页面了。
分享到:
评论

相关推荐

    hello world hello world

    hello world

    Helloworld_helloworld_

    输出HELLOWORLD然后输出Helloworld最后的最后的输出Helloworld

    OpenWrt之helloworld程序

    OpenWrt之helloworld程序开发入门,里面包含helloworld和Makefile

    helloworld

    helloworld

    SpringMVC ---- HelloWorld ---- 代码

    SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- HelloWorld ---- 代码 SpringMVC ---- Hello...

    Hello World

    // Display the Hello World message. messageLabel.Text = "Hello World"; } private void exitButton_Click(object sender, EventArgs e) { // Exit the project. this.Close(); } private void ...

    helloworld.war

    Manning.Struts.2.in.Action 's example HelloWorld.war provides a convenient example of a minimal Struts 2 application

    第一个Ext 3.2版本的Hello World程序

    4、打开IE在地址栏输入“http://localhost:8088/FirstExt/HelloWorld.html”之后敲回车,如果一切正常,那么你会看到Ext 3.2版本的Hello world程序--它会一秒钟之后变背景色 阅读对象:希望使用新版本的Ext框架开发...

    一个简单的qt版helloworld程序

    一个简单的qt版helloworld程序

    HelloWorld_打印HelloWorld_

    打印HelloWorld ,在Visual Studio的开发环境当中,实现简单的操作。

    Spring4 HelloWorld

    Spring4 HelloWorld初学Spring,java bean通过applicationContext.xml配置SpringIoC容器生成。

    C#入门

    C#第一个程序,helloworld using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace helloworld { class helloworld { [STAThread] static void Main(string[] args)...

    helloworld vbs 脚本

    helloworld vbs 脚本hellohelloworld vbs 脚本world vbs 脚本helloworld vbs 脚本helloworld vbs 脚本helloworld vbs 脚本

    编写 hello world web 程序

    • 在命令行打印 hello world! 字符 //mkdir nodejs-demo //cd nodejs-demo // https://sample.wangding.in/nodejs/tern-project //mv tern-project .tern-project //mkdir 01-introduction //touch 01-hello-world....

    Hello World C源码

    Hello World C源码 Hello World C源码 Hello World C源码 Hello World C源码 Hello World C源码

    MDK5.15版本的HelloWorld

    这是我自己在MDK5.15环境写的一个STM32F103RCT6运行的HelloWorld程序,用的固件库版本是V3.5.0。固件库也包含在里面。使用的串口是USART1。分享给大家,希望可以为大家节省一点开发时间。

    深入浅出hello world

    深入浅出hello world。从一个简单的hello,world程序开始,经过预处理、编译、汇编、链接、加载各个步骤详细介绍程序从编辑到执行的过程。深入的讲解了linux下程序的编译过程,并且讲解了linux kernel系统调用的相关...

    helloworld War包测试专用

    helloworld War包,直接上传至服务器webapp目录,自动解压,专用,

Global site tag (gtag.js) - Google Analytics