从DOM 看gwt
序言:这篇文章首先介绍DOM(Document Object Model),然后进入GWT的DOM 对象主题。进而说明gwt构建于"one page application"之上与传统Web构建以及带UI 的Application的联系与区别。然后重点转移到我们能够利用DOM做点什么,最后分析总结:DOM对组件设计人员、组件使用人员,美工设计师 (deal wtih Image && CSS)引起的微妙变化。
"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
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;
-
-
-
-
-
-
-
-
- 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);
- }
- }
从上面的例子,我们可以真正领略组件式编程的威力.
利用DOM进行扩展,多少会使得一些人迷惑或恐慌。gwt不是宣称简单即美么? 是的.你熟悉HTML DOM && gwt DOM,你就可以构造出复杂,实用的组件。你熟悉the basic gwt widget library,你也可以构造出复杂应用。对于美工呢? 基于one page application的设计更方便美工设计images and css. 至少可以使得美工设计师不会再从一个页面跳到另一个页面去看html source(推荐使用firefox+firebug).方便了对界面的整体把握,也方便其对业务流程的了解(这里不再说明这些人员间的沟通)。总之,DOM 使得人尽其才,物尽其用,所司所长。
如果文章提到的相关环节有问题,请通知我
分享到:
相关推荐
7,css的(边框)margin、border、padding、width、height与dom对象的属clientWidth、offsetWidth、offsetHeight等的关系及gwt的获取与设置> 完成 2007年5月9日 6,学习资源 完成 2006年12月21日 5,给gwt的ui组件...
用于低级 DOM 编程的类。 该包包含公开 W3C 标准 HTML 文档对象模型的类,用于直接在客户端 Java 源代码中以编程方式访问和操作 HTML 页面,考虑到大多数浏览器变体。 这些类提供了一种高效、类型安全且对 IDE 友好...
gwt-dom-event-binder.zip,用于通过注释处理dom事件的gwt生成器用于通过注释处理dom事件的gwt生成器
使用它的小部件库,您还可以从 DOM 和浏览器的差异中抽象出一些。为什么选择 Xtend? 对于客户端,您经常必须指定回调。 这些在 Java 中可能非常冗长。 Xtend 有一个非常无噪音的语法来指定同样的事情。 此外,通过...
GWT Uploader 是一个免费提供的开源 GWT 库,它封装了 File 和 XMLHttpRequest Level 2 API 以及 SWFUpload 库提供的文件上传功能。 使用 GWT Uploader 允许使用纯 Java 代码在 GWT 应用程序中增强文件上传对话框...
与一般的 Web 应用程序开发体验相比,使用 GWT 更接近于使用 Swing 或 SWT 进行开发,它还试图将 HTTP 协议和 HTML DOM 模型抽象出去。实际上,应用程序最终几乎总是会呈现在 Web 浏览器中。 GWT 是通过代码生成来...
本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱,包括 XMLHttpRequest 对象。 五年前,如果不...
Ext Core 是一个构建跨浏览器运行的动态 web 应用的 JavaScript 库,它提供了 DOM 查询和元素选择的跨浏览器访问 API,它是一个轻量级的,运行性能良好并且很容易使用的 JavaScript 库。 Ext Designer Ext Designer ...
jQuery、GWT、YUI、DoJo等兴起的框架让构建Web 2.0应用变得更加容易,糟糕的是,随之而来的,定位这些应用的问题也越来越难,尤其是与性能相关的时候。 最让人头疼的浏览器依然是Internet Explorer – 企业级环境也...
GwtQuery 的 Droppable 插件 这个插件是对的整个 gwt ...Droppable 插件使任何 DOM 元素和 GWT 小部件都可以放置,或者换句话说,成为可拖动元素的目标。 更多信息请访问: : 示例可 这个插件的原作者: ##谢谢
AJAX基础概念、核心技术与典型...142个典型实例和9个综合案例,全面阐述AJAX的方方面面,剖析GWT(Google Web Toolkit),体会Google的魅力,详细讲解了JavaScript、XMLHttpRequest、DOM、CSS、XML、ASP.NET AJAX等内容
GwtQuery 的可拖动插件 这个插件是对的整个 gwt 重写 Draggable 插件在任何 DOM 元素和 GWT 小部件上启用可拖动功能(它使所选元素可通过鼠标拖动)。 更多信息请访问: : 示例可 这个插件的原作者: ##谢谢
该库由GWT自动从原始源进行编译,并了以使用html canvas元素。 公共api的导出是通过。现场演示如何使用将目录中的所有文件放在服务器上。 将添加到您的页面中。 < script type =" text/javascript " src =" /js/...
- DeepScan技术可以准确地爬行使用诸如SOAP / WSDL,SOAP / WCF,REST / WADL,XML,JSON,Google Web Toolkit(GWT)和CRUD操作等复杂技术的AJAX重型客户端单页应用(SPA) 。 - 业界最先进和最强大的SQL注入和跨...
这是通过使用并生成JsTypes来完成的,这些是在GWT和J2CL中都实现的一部分。Bazel依赖如果您的项目使用 ,请将此存储库作为外部依赖项添加到您的WORKSPACE文件中: load("@bazel_tools//tools/build_defs/repo:...
6.5.htm 以从大到小冒泡排序法为例 6.6.htm 使用Navigator的属性进行浏览器检测 6.7.htm 列出了一些可能的浏览器类型 6.8.htm Screen对象的使用 6.9.htm 用来检测浏览器...
测试使用动态DOM树技术运行的网页和应用程序的覆盖范围某些技术,例如GWT, Vaadin,React等很难用稳定的自动测试覆盖。 原因在于定位器-寻找合适的定位器通常很难而且很费时间,这些定位器可以在测试中使用并且不会...
* Restlet-GWT module available, letting you leverage the Restlet API from within any Web browser, without plugins. * Concept of "URIs as UI" supported based on the URI Templates standard. This ...