fkpwolf http://fkpwolf.javaeye.com UTF-8 Copyright 2003-2008, JavaEye.com http://blogs.law.harvard.edu/tech/rss JavaEye - 做最棒的软件开发交流社区 在dojo中创建一个button的三种方式 fkpwolf 作者: fkpwolf  链接：http://fkpwolf.javaeye.com/blog/182802  发表时间: 2008年04月15日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

初学dojo，做个笔记。因为dojo的相关文档很少，官方的写的也很凌乱。 全部的代码如下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>Sample 1.0.0 xdomain page</title>
	<script type="text/javascript"
		djConfig="isDebug: true, parseOnLoad: true"
		src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"></script>
	<script type="text/javascript">
		dojo.require("dijit.form.Button");
		dojo.require("dijit.InlineEditBox");
		dojo.require("dijit.form.TextBox");
		
		Commands = {
			sayHello: function(){
				var status = "Button Clicked at time: " + (new Date());
				dojo.byId("output").innerHTML = status;
				console.debug(status);
			}
		}

		dojo.addOnLoad(function(){
			dojo.connect(dojo.byId("testButton"), "onclick", Commands, "sayHello");
       			new dijit.form.Button({ "class": "large", label:"wokao",onClick:foo }, dojo.byId("id1"));
			new dijit.InlineEditBox({onChange:myHandler, autoSave:false}, 
				dojo.byId("id2"));
		});
	</script>
	<script type="text/javascript">
		function foo(){
			console.debug("click foo");
		}
		function myHandler(idOfBox, value) {
          		console.debug("Edited value from "+idOfBox+" is now "+value);
       		}

	</script>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
    </style>
	
</head>
<body>
	<h1>Sample Dojo 1.0.0 xdomain page</h1>
	<p>
		<button id="testButton">Click Me</button>
	</p>
	<p id="output">
	</p>
	<button dojoType="dijit.form.Button" id="helloButton">Hello World!</button>
	<span id="id1"></span>	
	<h3 id="editable" autosave="false"
                dojoType="dijit.InlineEditBox" title="h3 example"
                onChange="myHandler(this.id,arguments[0])">
		Edit me - I trigger the onChange callback
	</h3>
	<span id="id2">programatic InlineEditBox</span>

	
	
</body>
</html>



第一种是HTML的产生方式。
第二种是使用dojoType的方式。可将这种方式是基于标准HTML的一种扩展，也是一种静态的方式。 
<button dojoType="dijit.form.Button" id="helloButton">Hello World!</button>

跟Tapestry有点类似，其优点是一般的图形化的html编辑器也可以对其进行编辑。对于这种方式，需要在dojo的配置里面设置“parseOnLoad: true”。
第三种是使用编程的方式（programmatically），把属性的值统一的传给构造函数。 
new dijit.form.Button({ "class": "large", label:"wokao",onClick:foo }, dojo.byId("id1"));

本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Tue, 15 Apr 2008 10:05:56 +0800 http://fkpwolf.javaeye.com/blog/182802 http://fkpwolf.javaeye.com/blog/182802 在Netbeans 6.1中使用dojo开发自定义的JSF组件 fkpwolf 作者: fkpwolf  链接：http://fkpwolf.javaeye.com/blog/177308  发表时间: 2008年03月28日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

0.准备和目的

前提：netbeans 6.1 beta。

目的：开发一个功能最简的JSF woodstock组件。

准备：Firefox + FireBug插件

 

1。新建一个普通的JSF组件

具体可以参考sun的教程 ，可以忽略其附加的高级功能，在IDE环境中可以很快的开发出一个标准JSF组件出来。

public class ImageRenderer extends javax.faces.render.Renderer{

一切皆为标准的JSF组件。Renderer可以只考虑最简单的输出，不考虑viewstate。

然后，因为netbeans中页面使用的是xhtml的技术，将该tag运用到其中需如下工作：

xmlns:k="/WEB-INF/tlds/rrr"
 

这里没有考虑design-time的所需要的类。

2。woodstock组件

在前面的组件开发中，代码量比较大地方的在Renderer中的encodeBegin方法。这个方法主要用来产生客户端HTML代码，大量的使用了诸如如下的代码：

writer.startElement("img", imgComponent);
writer.writeAttribute("onClick", "javascript:" + postBackFuncName + "(this)", null); 

有些类似在Servlet输出HTML用到的out.println()，这种方法较之JSP之类的模板技术显得非常的蹩脚。于是在netbeans 6中引入了dojo和json，用来将逻辑和展现分离。如今javascript框架遍地开花，server端越来越多的页面渲染的工作交给了javascript，比如Rails使用了prototype，框架的使用大大的提高了javascript的潜能和开发效率。

woodstock 也即原来的jsf web ui，是Sun的一个JSF的实现，跟标准不同的是提供了更多的组件和AJAX support。如其button Renderer产生client html source code如下：

<span id="j_id17">
<script type="text/javascript">
  webui.suntheme.widget.common._createWidget('j_id17',
  {"id":"form1:button2","widgetType":"webui.suntheme.widget.button",
"visible":true,"primary":false,"value":"Button",
"escape":true,"mini":false,"disabled":false});
</script></span>

  不同于一般的<button name="" value=""/>“明文”的形式。这里调用的函数_createWidget基于dojo的功能，而{}的属性由在server段的Renderer中的java代码组装出来(利用json API)，剩下的渲染工作都是client的浏览器中完成。

 3.将标准组件改造成woodstock组件

将标准JSF组件该为webui组件

import com.sun.webui.jsf.renderkit.widget.RendererBase;
public class MyRenderer extends RendererBase {

 这个类注意的地方不多，只要注意getWidgetType这个方法：

    protected String getWidgetType(FacesContext context, UIComponent component) {
        return "fan.kao";
    }

 这里返回的字符串代表新组件的名称，也是组件在dojo中的namespace。

 

在JSP中，由于该新的组件是woodstock本身没有的，为了避免修改原有的组件库的包，需要在页面中注册这个新的组件：

<script>webui.suntheme.dojo.registerModulePath("fan","/WebApplication1");</script>

这样，就可以把根目录下的js文件纳入dojo的module装载路径。

 至此，所有Java相关的工作已经完成，剩下的就和在dojo创建一个widget的过程一样，包括一个js文件，一个templete文件。

 

在开发过程中，可以使用FireBug插件来调试js相关的问题，dojo也对FireBug做了相应的支持。

 

 


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Fri, 28 Mar 2008 16:21:35 +0800 http://fkpwolf.javaeye.com/blog/177308 http://fkpwolf.javaeye.com/blog/177308