从DOM 看gwt

从DOM 看gwt






序言:这篇文章首先介绍DOM(Document Object Model),然后进入GWT的DOM 对象主题。进而说明gwt构建于"one page application"之上与传统Web构建以及带UI 的Application的联系与区别。然后重点转移到我们能够利用DOM做点什么,最后分析总结OM对组件设计人员、组件使用人员,美工设计师 (deal wtih Image && CSS)引起的微妙变化。


What is the DOM?
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

The W3C DOM provides a standard set of objects for HTML and XML documents, and a standard interface for accessing and manipulating them.

The W3C DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

Core DOM - defines a standard set of objects for any structured document
XML DOM - defines a standard set of objects for XML documents
HTML DOM - defines a standard set of objects for HTML documents

更多参考资料:www.w3schools.com/dom/default.asp


How about the gwt DOM?
It's a class.This class provides a set of static methods that allow you to manipulate the browser's Document Object Model (DOM). It contains methods for manipulating both elements and events.
简单说,它就是把HTML DOM 封装成了Java 对象, 进而可以处理html 元素和事件。


gwt==one page application?
是的,gwt是构建于one page application之上.这里暂不讨论gwt这样设计的原委。有人就会怀疑,既然这样,还能指望他做出复杂的应用? 答案是肯定的。

首先,它和我们传统的做法(web or application)是一样的,gwt是从the host page开始的(它也是the only page),和我们的welcome page一样,或者 application(mainForm or loginEntry)一样。From a entrance into the world.

其次,gwt依赖DOM动态创建web组件。熟悉DOM的应该清楚,一个Element里面可以含有一个另一个异常复杂的Element,比如 Iframe,InnerHtml。有过Application UI 编程经验的，也应该知道 a container 能放入一个复杂的control, 或 another container 。

所以，尽管看起来gwt是one page application,但你要做到多页的效果其实也是不难的。


What can we do by using DOM?
答案前面就说了,我们可以利用DOM处理 element and its events.小到设置元素属性1),大到设计组件2)...下面举例说明.


1)
java 代码
Image logo = new Image(aPATH);
DOM.setElementProperty(logo.getElement(), HTML_ID_TOKEN, HTML_LOGO_IDENTIFIER);



2)

java 代码
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.FlowPanel;

/*

* The GroupBoxPanel is extend the flow panel and add 〈fieldset〉 and 〈legend〉 tags around the panel element.
* Add Control in the container,the Align is default as flow.


some issue here

*
*/
public class GroupBoxPanel extends FlowPanel {

private Element legend;

public GroupBoxPanel() {
Element fieldset = DOM.createFieldSet();
this.legend = DOM.createLegend();
DOM.appendChild(fieldset, legend);
setElement(fieldset);
}

public GroupBoxPanel(String caption) {
this();
setCaption(caption);
}


public String getCaption() {
return DOM.getInnerText(this.legend);
}

public void setCaption(String caption) {
DOM.setInnerHTML(this.legend, caption);
}
}


从上面的例子,我们可以真正领略组件式编程的威力.



confuse,scare?
利用DOM进行扩展,多少会使得一些人迷惑或恐慌。gwt不是宣称简单即美么? 是的.你熟悉HTML DOM && gwt DOM,你就可以构造出复杂，实用的组件。你熟悉the basic gwt widget library,你也可以构造出复杂应用。对于美工呢? 基于one page application的设计更方便美工设计images and css. 至少可以使得美工设计师不会再从一个页面跳到另一个页面去看html source(推荐使用firefox+firebug).方便了对界面的整体把握,也方便其对业务流程的了解(这里不再说明这些人员间的沟通)。总之,DOM 使得人尽其才，物尽其用，所司所长。



如果文章提到的相关环节有问题,请通知我

有意思