从DOM 看gwt

从DOM 看gwt

---

序言:这篇文章首先介绍DOM(Document Object Model),然后进入GWT的DOM 对象主题。进而说明gwt构建于"one page application"之上与传统Web构建以及带UI 的Application的联系与区别。然后重点转移到我们能够利用DOM做点什么,最后分析总结:DOM对组件设计人员、组件使用人员,美工设计师 (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 代码

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

2)

java 代码

1. import com.google.gwt.user.client.DOM;
2. import com.google.gwt.user.client.Element;
3. import com.google.gwt.user.client.ui.FlowPanel;
5. /*
7. * The GroupBoxPanel is extend the flow panel and add 〈fieldset〉 and 〈legend〉 tags around the panel element.
8. * Add Control in the container,the Align is default as flow.
   
10. some issue here
    
11. *
12. */
13. public class GroupBoxPanel extends FlowPanel {
15. private Element legend;
17. public GroupBoxPanel() {
18. Element fieldset = DOM.createFieldSet();
19. this.legend = DOM.createLegend();
20. DOM.appendChild(fieldset, legend);
21. setElement(fieldset);
22. }
24. public GroupBoxPanel(String caption) {
25. this();
26. setCaption(caption);
27. }
30. public String getCaption() {
31. return DOM.getInnerText(this.legend);
32. }
34. public void setCaption(String caption) {
35. DOM.setInnerHTML(this.legend, caption);
36. }
37. }

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

• confuse,scare?

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

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