[Java] GWT 小经验

博客首页 » Java GWT 小经验

发布于 09 Dec 2014 05:08
标签 blog
[Java] GWT 小经验

怎样加快GWT项目的编译过程

http://chengdu.iteye.com/blog/353985

GWT浏览器IEEXTSafari
你是不是觉得你的GWT项目(或者是基于GWT的开源项目,比如gwt-Ext等)编译太慢了,调试很不方便,每一次修改都是一次漫长的等待。那时因为GWT需要花费大量的时间为GWT支持的每一个浏览器和语言建立默认JavaScript文件(这将确保我们的程序能够很好的运行在IE,Firefox或者其他它所支持的浏览器上。) 这会产生50种的排列组合方式:

Java代码 收藏代码

  • 5 browsers : ie6, opera, gecko1_8, safari, gecko
  • 10 locales : default, de_DE, en_UK, fr_FR, hr_HR, hu_HU, it_IT, nl_NL, pl_PL, pt_PT

能不慢嘛?!为了让我们开发调试的时间尽可能的短,我们可以指定GWT只支持一种浏览器和语言,这将大大的缩短编译的时间和产生的target的大小。(不信,你可以看看你的target,是不是很清爽了!)

1 指定浏览器(只支持FF)
Java代码 收藏代码
在module.gwt.xml中
<!— User Agent >
<set-property name="user.agent" value="gecko1_8" />
2 指定语言
Java代码 收藏代码
<!
GWT locale
<extend-property name="locale" values="de_DE" />
<extend-property name="locale" values="en_UK" />
<extend-property name="locale" values="fr_FR" />
<extend-property name="locale" values="hr_HR" />
<extend-property name="locale" values="hu_HU" />
<extend-property name="locale" values="it_IT" />
<extend-property name="locale" values="pt_PT" />
<extend-property name="locale" values="pl_PL" />
<extend-property name="locale" values="nl_NL" />
—>

注:不存在的语言不会增加编译负荷

GWT的DateUtil使用

博客分类: GWT
gwtdateutil
我应用的是 smartgwt-3.1.jar
DateUtil 使用catalina.jar
字符段转换

Java代码 收藏代码
Date date2 = DateUtil.parseInput("11/01/2011");
ystem.out.println(date2);
输出 Tue Nov 01 00:00:00 CST 2011

时间转换成字符

Java代码 收藏代码
Date date1 =startDateItem.getValueAsDate();
String dateStr =DateUtil.formatAsShortDatetime(date1);
System.out.println(dateStr);
输出:2013-07-04 06:00

Java代码 收藏代码
DateUtil.setNormalDateDisplayFormatter(new DateDisplayFormatter() {
public String format(Date date) {
if(date == null) return null;
final DateTimeFormat dateFormatter = DateTimeFormat.getFormat("yyyy-MM-dd HH:mm:ss");
String format = dateFormatter.format(date);
return format;
}
});

dateStr =DateUtil.formatAsNormalDate(date1);
System.out.println(dateStr);
输出: 2013-07-04 06:00:00

GWT 项目中代码分四级概念 Application, Host Page, Module 和 EntryPoint

分类: web JAVA Google Web Toolkit 2010-12-01 22:26 1169人阅读 评论(0) 收藏 举报
moduleapplicationgwtjspclasshtml
GWT 项目中代码分四级概念:Application, Host Page, Module 和 EntryPoint。

理论上讲:一个 Application, 有多个 Host Page, 一个 Host Page 有多个 Module,则一个 Module 有多个 EntryPoint,
但是,实际上基本就是一个页面一个应用,也就是一个 GWT 工程。
一般在 Hello World 应用中,整个一个工程是:一个页面,一个 Module,在一个 EntryPoint。
当然实际应用中,一般还是一个页面,而为个复用,就会为多个 Module, 而一个 Module 也会有多个 EntryPoint。
使用多个 Module 和 EntryPoint 相对都是非常简单的。创建过程同官方的新建一个 Module 和 EntryPoint 没什么两样。

那么我们,还有一种需求就是需要一些额外的关注:一个 application , 多个 host page, 因为 GWT 默认项目就只是一个 Single Host Page 的 Application。
其实,我们有很多人已经注意到了这一点,并且有人 open 了一个 gwt module 来帮助大家实现这一点,它就是 gwtmultipage 。

gwtmultipage 使用起来相当简单,简单三步就可以了:

加载 org.gwtmultipage.gwtmultipage 这个 GWT module java 包到项目中
修改主 Module 的 gwt.xml, EntryPoint 改成
<entry -point class=’org.gwtmultipage.client.EntrypointDispatcher’/>
当然要先加上它所在的 module
<inherits name=’org.gwtmultipage.gwtmultipage’/>
在你的 EntryPoint 类名前加 annotation:
@UrlPatternEntryPoint(value=”module.html”)
就可把 前端 jsp 或者 html 文件与 某个 EntryPoint 对应起来了。
gwtmultipage 通过 org.gwtmultipage.client.EntrypointDispatcher 把 host page 与 EntryPoint 一一对应。
EntrypointDispatcher 在这里就是一个单入口分发器。

转载:http://freekongjian.com/2010/gwt-module-entrypoint-gwtmultipage.html

http://blog.csdn.net/jinhuiyu/article/details/4808208

gwt项目开发的经验集——会一直增加

正在做一个gwt项目的开发,我会把在项目开发中遇到的问题以及解决方法记录下来(有很多是同事,也整理放在其中了),以供同道中人参考,少走不该走的路,也希望与同仁交流。

gwt的1.4发布了,好久没有更新我的文章了,现在又准备开始更新。源代码(总):http://www.blogjava.net/Files/peacess/freelinz-gwt-experience.rar
mail:moc.361|ssecaep#moc.361|ssecaep
qq:64407724
目录:
13,用gwt在web中实现上下文菜单(右键菜单、弹出菜单) 2007年8月3日

12,gwt中使用float样式实现 完成 2007年7月28日
11,文件下载(download,通过表单方式) 完成 2007年8月6日

10,阻止事件传到父对象 2007年7月31日
9,文件上传客户端(upload隐藏表单) 2007年7月29日
8,不换行:表格字符、多种widget的组合 计划中
7,css的(边框)margin、border、padding、width、height与dom对象的属clientWidth、offsetWidth、offsetHeight等的关系及gwt的获取与设置> 完成 2007年5月9日
6,学习资源 完成 2006年12月21日
5,给gwt的ui组件增加事件 完成 2006年12月17日
4,按钮的鼠标进出样式 完成 2006年12月14日
3,元素宽度计算 完成
2,对话框居中 完成
1,关闭页面 完成
。。。。。。。。
13,用gwt在web中实现上下文菜单(右键菜单、弹出菜单)
/
* gwt的上下文菜单(右键菜单、弹出菜单)实现 在web应该程序中,有一个默认上下文菜单,
* 在实现时,一定要把它禁用。 有两种实现方式实现上下文菜单,一种是用gwt的事件机制,一种是利用jsni实现
* gwt实现 优点:基于gwt,那么不同浏览器的兼容性就不用考虑
* 缺点:要把原widget放入一个div中,可能会产想不到的问题
* jsni实现 优点:对原有widget不产生多内容,直接
* 缺点:要考虑不同浏览的兼容性
*/
/

* 用gwt方式实现上下文菜单
* @author wylpeace
*
*/
class ContextMenuGwt extends Composite
{
private SimplePanel panel;

private MenuBar menuBar;

private ContextMenuGwt(Widget w,MenuBar menuBar)
{
super();
panel = new SimplePanel();
panel.setWidget(w);
initWidget(panel);
this.menuBar = menuBar;
DomEx.disableContextMenu(panel.getElement());
unsinkEvents(-1);
sinkEvents(Event.ONMOUSEDOWN);
}
protected void onAttach()
{
super.onAttach();

DOM.setEventListener(getElement(), this);
}
public static Widget addContextMenu(Widget w,MenuBar menuBarIn)
{
ContextMenuGwt c = new ContextMenuGwt(w,menuBarIn);
return c;
}
private void popupMenu(Event event, MenuBar menuBarIn)
{
// 可以加上弹出菜单的理想位置,这里取最简单的
final int x = DOM.eventGetClientX(event);
final int y = DOM.eventGetClientY(event);
PopupPanel p = new PopupPanel(true);
p.setWidget(menuBarIn);
p.setPopupPosition(x, y);
DomEx.disableContextMenu(p.getElement());//防止弹出浏览的上下文菜单
p.show();
}

public void onBrowserEvent(Event event)
{
if(DOM.eventGetType(event) == Event.ONMOUSEDOWN)
{
if(DOM.eventGetButton(event) == Event.BUTTON_RIGHT)
{
popupMenu(event, this.menuBar);
return;
}
}
super.onBrowserEvent(event);
}
}

/**
* 用jsni方式实现上下文菜单
* 这里的实现也可以放到一个函数中,不一定是一个类
* @author wylpeace
*
*/
public class ContextMenuJsni
{
public static Widget addContextMenu(Widget w,MenuBar menuBar)
{
oncontextmenu(w.getElement(), menuBar);
return w;
}
private static native void oncontextmenu(Element e, MenuBar menuBarIn)
/*-{
e.oncontextmenu = function(evt)
{
var event = (evt?evt:$wnd.event); //在ie中evt的参数为空,它的当前事件在window.event中
@freelinz.experience13.client.ContextMenuJsni::popupMenu(Lcom/google/gwt/user/client/Event;Lcom/google/gwt/user/client/ui/MenuBar;)(event,menuBarIn);
return false;
};
}-*/;

private static void popupMenu(Event event, MenuBar menuBarIn)
{
// 可以加上弹出菜单的理想位置,这里取最简单的
final int x = DOM.eventGetClientX(event);
final int y = DOM.eventGetClientY(event);

PopupPanel p = new PopupPanel(true);
p.setWidget(menuBarIn);
p.setPopupPosition(x, y);
DomEx.disableContextMenu(p.getElement());//防止弹出浏览的上下文菜单
p.show();
}
}

12,gwt中使用float样式实现
css的float样式在ie与firefox中对应的dom属性名不同,所以不能直接用如下的语句
DOM.setStyleAttribute(elem,"float", "left");
可以这样使用(在ie与firefox都可以)

public static native void setStyleAttributeEx(Element elem, String jsStyle, String value)
/*-{
if(jsStyle=="float" || jsStyle == "styleFloat" || jsStyle =="cssFloat")
{
jsStyle = (elem.style.styleFloat || elem.style.styleFloat=="") ? "styleFloat":"cssFloat";
}
elem.style[jsStyle]=value;
}-*/;

/**
* 创建下载的form,通过form带参数进行下载,
* 而不用直接把下载文件的地址写在代码里
* @return form
*/
public FormPanel createDown()
{
FormPanel formPanel = new FormPanel();
FlowPanel flowPanel = new FlowPanel();

formPanel.setWidget(flowPanel);
formPanel.setAction(GWT.getModuleBaseURL() + "filedownload");设置action
formPanel.setEncoding(FormPanel.ENCODING_URLENCODED);
formPanel.setMethod(FormPanel.METHOD_POST);
DOM.setStyleAttribute(formPanel.getElement(), "margin", "0px");
使大小为零

Hidden hidden = new Hidden("name","value");//可以增加多个,下载时带的参数
flowPanel.add(hidden);

return formPanel;
}

/**
* 阻止事件传到父对象中
* 事件比如单击事件,当一个Element收到后,进行处理。
* 如果不作处理,这个单击事件还会被传到父element。
* 这里一个实例使用的例子。 在表格中放一按钮,当单击按钮时,
* 表格的单击事件不被触发
*/
public class Experience10 implements EntryPoint
{
RootPanel rootPanel;

public void onModuleLoad()
{
rootPanel = RootPanel.get();

Grid table = new Grid();
table.resize(2, 1);
table.addTableListener(new TableListener()
{
public void onCellClicked(SourcesTableEvents arg0, int arg1, int arg2)
{
Window.alert("表格被单击");
}

});

// 一般按钮
Button normal = new Button("一般按钮");
normal.addClickListener(new ClickListener()
{
public void onClick(Widget arg0)
{
Window.alert("一般按钮 —— 按钮被单击");
}

});
table.setWidget(0, 0, normal);

// 阻止事件传到父对象
Button cancelBubble = new Button("阻止事件传到父对象")
{
public void onBrowserEvent(Event event)
{
if(DOM.eventGetType(event) == Event.ONCLICK)
{
DOM.eventCancelBubble(event, true);// 阻止事件传到父对象
}
super.onBrowserEvent(event);
}
};
cancelBubble.addClickListener(new ClickListener()
{
public void onClick(Widget arg0)
{
Window.alert("阻止事件传到父对象 —— 按钮被单击");
}

});
table.setWidget(1, 0, cancelBubble);

rootPanel.add(table);

}
}

package freelinz.experience9.client;

import com.google.gwt.core.client.GWT;

/
* 文件上传,gwt client端
*
*/
public class FileUploadDlg extends DialogBox implements ClickListener
{
/

* 操作提示
*/
private Label note;

FileUpload fileUpload;

FormPanel formPanel;

private Button confirm;

private Button close;

public FileUploadDlg()
{
setText("文件上传");

fileUpload = new FileUpload();
fileUpload.setName("fileww");// 这个名字可以任意给,但一定要记着给
note = new Label("");
formPanel = new FormPanel();
FlowPanel dlgPanel = new FlowPanel();

FlowPanel formWidget = new FlowPanel();
formPanel.setWidget(formWidget);
Hidden[] ws = new Hidden[2];// 用于向服务端传送信息
ws[0] = new Hidden("userwe", "test");
ws[1] = new Hidden("idwe", "12312");

for(int i = 0, num = ws.length; i < num; i++)
formWidget.add(ws[i]);
formWidget.add(fileUpload);

dlgPanel.add(formWidget);
dlgPanel.add(note);
// 设置表单默认属性
formPanel.setMethod(FormPanel.METHOD_POST);// 提交方式"post
formPanel.setEncoding(FormPanel.ENCODING_MULTIPART);// "encoding"为"multipart/form-data
formPanel.setAction(GWT.getModuleBaseURL() + "fileupload");// servlet的url
formPanel.addFormHandler(new FormHandler()
{
public void onSubmitComplete(FormSubmitCompleteEvent event)
{
// String temp = event.getResults();// 服务端的返回值
note.setText("上传完成");
}

public void onSubmit(FormSubmitEvent event)
{
}
});

confirm = new Button("上传", this);
// 关闭按钮
close = new Button("取消", this);

dlgPanel.add(formPanel);
dlgPanel.add(confirm);
dlgPanel.add(close);
setWidget(dlgPanel);
}

public void onClick(Widget sender)
{
// 确定,提交表单
if(sender == confirm)
{
String temp = fileUpload.getFilename();
// 未选择文件
if(temp == null || temp.length() < 1)
return;
formPanel.submit();
note.setText("文件上传中");
}
// 取消,关闭对话框
if(sender == close)
this.hide();
}
}

8,不换行:表格字符、多种widget的组合
//div中的文本不换行
Label label = new Label("div中的文本不换行");
//css white-space: nowrap;
//gwt实现:
DOM.setStyleAttribute(label.getElement(), "white-space", "nowrap");

//table中的文本不换行
//先把文件放入一个div中,再放到表格中,或者设置table的td的css样式

不同类型的widget在div中不换行
//css float:left;clear:none
//float:left 元素浮于左边;clear:none 元素两边都可以有浮动对象(如果不允许就会直接换行)
//gwt实现
FlowPanel div = new FlowPanel();
实际上flowpanel就是一个div
Label one = new Label("one");
DOM.setStyleAttribute(one.getElement(), "clear", "none");
//注:原gwt不支持float,所以这里用扩展的
DomEx.setStyleAttributeEx(one.getElement(), "float", "left");
Image image = new Image();
DOM.setStyleAttribute(image.getElement(), "clear", "none");
DomEx.setStyleAttributeEx(image.getElement(), "float", "left");

div.add(one);
div.add(image);

7,css的(边框)margin、border、padding、width、height与dom对象的属性clientWidth、offsetWidth、offsetHeight等的关系及gwt的获取与设置

public static native int getClientHeight() /*-{
if ($wnd.innerHeight)
return $wnd.innerHeight;
return $doc.body.clientHeight;
}-*/;
改为:
public static native int getClientHeight() /*-{
if ($wnd.innerHeight)
return $wnd.innerHeight;
if($doc.compatMode=='CSS1Compat') return $doc.documentElement.clientHeight;//关键
return $doc.body.clientHeight;
}-*/;
宽度与此相似
二,块(容器)的“边框”与高度(参考:http://bbs.blueidea.com/thread-2692909-1-1.html的为什么IE6下容器的宽度和FF解释不同)
不同的浏览器,就是相同的浏览器在不同的模式下的解释是不一样,没有找到一个比较好的计算他值的关系,所以在写xhtml/html时一定要注意,自己网页的规范与标准,如果你的页头有这样的信息

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
PUBLIC "-W3CDTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="height:100px; width:150px; border:10px solid red;margin:7px; padding:13px;">标准模式</div>
</body>
</html>

,在ie7与firefox2下有如下的结果:
offsetHeight:padding-top+padding-bottom+boder-top-width+border-bottom+height
clientHeight:offsetHeight - (border-top-width +border-bottom-width)

对于行元素的处理只能一个一个的试了,我没有找到通用的公式。!!!

6,学习开发资源
要做好gwt程序,客户端方面,有这些知识比较好:java、javascript、css、html(排列有先后),至于服务方面的我也说不清楚
官方主站:http://code.google.com/webtoolkit/
官方开源站:http://code.google.com/hosting/ 打开网页在里面输入gwt,会有很多相关的开源与代码
开发工具或库
gwt 官方网站上第三方工具: http://code.google.com/webtoolkit/thirdparty.html
gwt designer:可视化的eclipse插件开发工具,易上手,入门比较好
gwt widget library :开源的gwt扩展库,
wireflexsoft vistafei:是个可视化的eclipse插件开发工具,易上手,没有gwt designer做的好用
googlipse:eclipse插件,无可视化,功能少一些,不过免费的
firebug:firefox的插件,能非常方便的查看DOM、调试javascript、支持不同浏览器的控制台,支持动态修改。在firefox下只要这一个插件,开发就顺手了,ie下要多介绍几个,不过都不如firebug
DevToolBar:ie的插件,微软官方提供
WebDevHelper:ie的插件要.net framework2.0 ,软件工程师提供
Ie WebDeveloper: 功能也比较多,好像要收费

开源库或参考(排名不分先后)

gwtwindowmanager:http://code.google.com/p/gwtwindowmanager/
gwtwidgetlist:http://gwtpowered.dabbledb.com/publish/gwtwidgetlist/2ddeb373-1746-4642-836d-931fa7a2778b/gwtwidgetlist.html
http://www.brandonandkim.com/gwtblog/
基于gwt的一个开源项目:http://sourceforge.net/projects/pdune
gwt的组件库:http://gwt.components.googlepages.com/
http://jaxzin.com/2006/09/release-of-my-google-web-toolkit.html
http://code.google.com/p/rocket-gwt/
http://www.vspu.ru/is/sites/gwt-jds/index.htm
http://www.gwtwindowmanager.org/
http://simile.mit.edu/timeline/
。。。。。

5,给gwt的ui组件增加事件

一,用gwt的事件机制实现,以按钮为例,增加鼠标事件

package com.mycompany.project.client;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.MouseListenerCollection;

public class ButtonEx extends Button {
private MouseListenerCollection mouseListeners;
public ButtonEx() {
super();
sinkEvents(Event.MOUSEEVENTS); //事件类型,具体参考gwt的Event类
}
public void addMouseListener(MouseListener listener)
{
if(mouseListeners == null)
mouseListeners = new MouseListenerCollection();
mouseListeners.add(listener);
}
public void removeMouseListener(MouseListener listener)
{
if(mouseListeners != null)
mouseListeners.remove(listener);
}
public void onBrowserEvent(Event event)
{
super.onBrowserEvent(event); //调用父类的,如果想取消父类的事件也可以不用调用
switch (DOM.eventGetType(event))
{
case Event.ONMOUSEDOWN:
case Event.ONMOUSEUP:
case Event.ONMOUSEMOVE:
case Event.ONMOUSEOVER:
case Event.ONMOUSEOUT:
if(mouseListeners != null)
mouseListeners.fireMouseEvent(this, event);
break;
}
//super.onBrowserEvent(event); 这一句也可以放在这里调用,这样的话,就先触发我们增加的事件
}
}

使用代码

package com.mycompany.project.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.MouseListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
public class ExpMouseOver implements EntryPoint {
public void onModuleLoad() {
ButtonEx button = new ButtonEx();
button.addMouseListener(new MouseListener(){
public void onMouseDown(Widget sender, int x, int y) {
Window.alert("onMouseDown");
}
public void onMouseEnter(Widget sender) {
Window.alert("onMouseEnter");
}
public void onMouseLeave(Widget sender) {
Window.alert("onMouseLeave");
}
public void onMouseMove(Widget sender, int x, int y) {
Window.alert("onMouseMove");
}
public void onMouseUp(Widget sender, int x, int y) {
Window.alert("onMouseUp");
}
});
RootPanel.get().add(button);
}
}
在“4,按钮的鼠标进出样式”中的实现也可以在事件的响应中修改按钮的css。
二,用jsni实现,以TextBox的双击事件为例

package com.mycompany.project.client;
import java.util.Iterator;
import java.util.Vector;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;
public class TextBoxEx extends TextBox {
private DblClickListenerCollection dblClickListener;
private void onDblClick()
{
this.dblClickListener.fireDbLClick(this);
}
private native void addJsniEvent(Element elem)/*-{
var old = elem.ondblclick;注意这里是小写啊
var jsthis = this;
elem.ondblclick=function(){
jsthis.@com.mycompany.project.client.TextBoxEx::onDblClick()();
注意这里是两对括号啊
if(old)old();
};
}-*/;
public void addDblClickListener(DblClickListener listener)
{
if(this.dblClickListener == null)
{
this.dblClickListener = new DblClickListenerCollection();
addJsniEvent(this.getElement());
}
this.dblClickListener.add(listener);
}
public void removeDblClickListener(DblClickListener listener)
{
if(this.dblClickListener != null)
this.dblClickListener.remove(listener);
}
private static class DblClickListenerCollection extends Vector
{
public void fireDbLClick(Widget sender) {
for (Iterator it = iterator(); it.hasNext();) {
DblClickListener listener = (DblClickListener) it.next();
listener.onDblClick(sender);
}
}
}
public static interface DblClickListener{
public void onDblClick(Widget sender);
}
}
使用代码
package com.mycompany.project.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.mycompany.project.client.TextBoxEx.DblClickListener;
public class ExpMouseOver implements EntryPoint {
private TextBoxEx text;
public void onModuleLoad() {
text = new TextBoxEx();
text.addDblClickListener(new DblClickListener(){
public void onDblClick(Widget sender) {
Window.alert("DblClick");
}
});
RootPanel.get().add(text);
}
}

4,按钮的鼠标进出样式
在css中没提供直接设置按钮的鼠标进出样式,这里用鼠标事件来实现,在gwt中可以写一个Button的子类,并为其增加鼠标事件,也可以直接用脚本来实现(jsni),综合比较了一上,在这里直接用脚本比较好
一,脚本实现,代码如下

public class ExpMouseOver implements EntryPoint {
private boolean first = false;
public void onModuleLoad() {
Button button = new Button();
DOM.setStyleAttribute(button.getElement(), "borderColor", "blue");
setMouseOverBorderColor(button.getElement(), "red");
button.setText("测试");
RootPanel.get().add(button);
}
public native void setMouseOverBorderColor(Element elem,String color)/*-{
if(this.@com.mycompany.project.client.ExpMouseOver::first) return; //防止多次调用
var oldColor = elem.style["borderColor"];
var old = elem.onmouseover; //取出原事件响应函数(鼠标进入)
this.@com.mycompany.project.client.ExpMouseOver::first = true;
elem.onmouseover = function(){
elem.style["borderColor"] = color;
if(old) old(); //如果原事件响应函数存在,就运行它
};

var oldOut = elem.onmouseout; (鼠标移出)
elem.onmouseout = function(){
elem.style["borderColor"] = oldColor;
还原颜色
if(oldOut) oldOut();
};
}-*/;
}
这里说明一下,这个函数只允许调用一次,有待改进啊!
如下的是改进版的程序,可以多次调用,这里把颜色的值改成一个成员了
package com.mycompany.project.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
public class ExpMouseOver implements EntryPoint {
private boolean first = false;
private String color;
private Button button;
public void onModuleLoad() {
button = new Button();
DOM.setStyleAttribute(button.getElement(), "borderColor", "blue");
setMouseOverBorderColor(button.getElement(), "red");
setMouseOverBorderColor(button.getElement(), "green");
button.setText("测试");
RootPanel.get().add(button);
}
public native void setMouseOverBorderColor(Element elem,String color)/*-{
var jsthis = this;
jsthis.@com.mycompany.project.client.ExpMouseOver::color = color;
if(jsthis.@com.mycompany.project.client.ExpMouseOver::first) return; //防止多次调用
var oldColor = elem.style["borderColor"];
var old = elem.onmouseover; //取出原事件响应函数(鼠标进入)
jsthis.@com.mycompany.project.client.ExpMouseOver::first = true;
elem.onmouseover = function(){
elem.style["borderColor"] = jsthis.@com.mycompany.project.client.ExpMouseOver::color;
if(old) old(); //如果原事件响应函数存在,就运行它
};

var oldOut = elem.onmouseout; (鼠标移出)
elem.onmouseout = function(){
elem.style["borderColor"] = oldColor;
还原颜色
if(oldOut) oldOut();
};
}-*/;
}

二 增加Button的鼠标事件实现
这个的实现放到扩展gwt事件里讨论吧
希望还有更新的解决方法,在ie与firefox中都能用的。。。
3,元素宽度计算与设置
相关的函数有:
DOM.getAbsoluteLeft(Element elem); //元素elem左上角的“x”坐标(绝对坐标)
DOM.getAbsoluteTop(Element elem); //元素elem左上角的“y”坐标(绝对坐标)

UIObject的方法
getOffsetHeight()与DOM.getIntAttribute(element, "offsetWidth")等价 //元素的高度
getOffsetWidth()与DOM.getIntAttribute(element, "offsetWidth")等价 //元素的宽度
注:高度与宽度函数,是页面显示完成后的高度与宽度
setHeight(String height)与DOM.setStyleAttribute(element, "height", height)等价
setWidth(String width)与DOM.setStyleAttribute(element, "width", width)等价
setPixelSize(int width, int height) //设置高宽度,单位为“px”像素
setSize(String width, String height) //设置高宽度,是setHeight与setWidth的组合
注:setPixel(100,120)与setSize("100px", "120px")等价,以上所有的设置高度与宽度值,都是直接设置的元素的"style"的“height”与“width”值,所以可以使用像“100%”、“20%”等的css方式的值,含义也是与css的一样。

Window.getClientHeight() //浏览器客户区的高度,单位像素
Window.getClientWidth() //浏览器的客户区的宽度,单位像素
注:这两个函数在ie与firefox中不一样,在ie中不包含浏览器的滚动条,而在firefox中是包含的。浏览器出现滚动条,假设滚动条宽度为15px,全屏,屏幕分辨率为1024*768,
ie中:Window.getClientWidth()的值大概为1024-15 ,实际上比这个值要小一点
firefox中:Window.getClientWidth()的值为1024

例如:
TextBox text = new TextBox();
text.setPixelSize(100, 120);
int h = text.getOffsetHeight();
int w = text.getOffsetWidth();
Window.alert("h:"+h+" w:"+w);
上面的四行代码是连续的,那么h与w的值等于多少呢,想一想再看下面的结果
先到这里吧,关于高度与宽度的问题还有一些。
2,对话框居中
gwt1.2.22都没有提供对话框居中的直接方法,在这里说一下可能的实现方法
一,直接设定大小
DialogBox d = new DialogBox();
d.setText("DialogBox");
d.setPixelSize(100, 120); //要指定大小,操作起来不通用
int x = (Window.getClientWidth()-100)/2;
int y = (Window.getClientHeight()-120)/2;
d.setPopupPosition(x, y);
d.show();

二,延迟实现
final DialogBox d = new DialogBox();
d.setText("DialogBox");
DeferredCommand.add(new Command(){ //延迟执行,
public void execute()
{
int x = (Window.getClientWidth()-d.getOffsetWidth())/2;
int y = (Window.getClientHeight()-d.getOffsetHeight())/2;
d.setPopupPosition(x, y);
}
});
d.show();
注:“延迟执行”因为对话在刚创建时,它的高度与宽度还没有,所以一定要延迟一下,再取它的高度与宽度来计算它的居中位置。
三,继承实现
DialogBox d = new DialogBox(){
protected void onLoad() //对话装载完成后执行的函数
{
super.onLoad();
int x = (Window.getClientWidth()-getOffsetWidth())/2;
int y = (Window.getClientHeight()-getOffsetHeight())/2;
setPopupPosition(x, y);
}
};
d.setText("DialogBox");
d.show();
我知道的就这些,如果还有别的方法,希望给我讲一下,我再把它们加上来

1,jsp中可以关闭一个页面而到另一个页面,那么在gwt中怎么解决呢?其实在gwt中只有一个页面,要实现“关闭”的功能是这样的
RootPanel.get().clear();取得根panel(对应html中的body体),清除它的所有子对象,就是把整个页面的内容“关闭”,然后就可以再加入自己的新的内容。
这里也可以清除指它的对象(widget):
RootPanel.get().remove(w); //w为Widget
DOM.removeChild(RootPanel.getBodyElement(), w.getElement());
与上一句的功能一样,DOM类中有很多比较好用的静态方法,具体的就看gwt的文档。
举一个例子:“关闭登录窗口转到主窗口”
成功登录
RootPanel.get().clear();
也可以 RootPanel.get().remove(login);
RootPanel.get().add(mainView);//mainView主页面


本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • Java GWT 小经验

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License