GWT应用程序运行方式(Hosted | We...-Gwt xml配置文件-可改变大小DIV层

当前位置: 编程技术>WEB前端

本页文章导读:

▪GWT应用程序运行方式(Hosted | Web)Model Hosted Model 在Hosted Model方式下，Java程序并不会被编译成JavaScript，GWT只是创造了一个类似浏览器的环境，直接运行使用GWT开发的程序。这种模式最具生产力（这种模式下.........

▪Gwt xml配置文件 <module> 　 <inherits name="com.google.gwt.user.User"/> 　 <entry-point class="com.jtv.gwt.client.MyApp"/> 　 <source path=“client"/> 　 <public path="public"/> 　 <servlet path.........

▪可改变大小DIV层本文使用Jquery UI实现了可改变大小的层，效果预览网址：http://www.keleyi.com/keleyi/phtml/resizable.htm以下是完整代码，保存到html文件，打开也可以预览效果：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans.........

[1]GWT应用程序运行方式(Hosted | Web)Model

来源: 互联网发布时间: 2013-11-15

Hosted Model

在Hosted Model方式下，Java程序并不会被编译成JavaScript，GWT只是创造了一个类似

浏览器的环境，直接运行使用GWT开发的程序。这种模式最具生产力（这种模式下可以Debug所有的Java代码），

所以开发环境通常使用Hosted Model，但是真正的程序执行不使用这种模式。

使用数据源
Hosted Mode 虽然开发起来很方便，但是也有缺点，例如，数据源的配置就有问题。

在GWT Hosted Mode下无法配置数据源，一种可选的方式是使用一个假的数据库链接

管理类，这个类的接口返回Connection，内部以DriverManager的方式实现，等待

后续部署之后再切换到数据源模式。

运行原理图:

Web Model

就是将使用GWT编写的Java程序整整编译成JavaScript，在Web容器上运行，使用浏览器

访问的模式，这种方式只有在测试或者运行的时候才使用，每次对Java类的修改必须重新编译

这些Java类，之后重新部署应用。所以生产力比较低。

作者：huang798807481 发表于2013-3-22 22:30:22 原文链接

阅读：1 评论：0 查看评论

[2]Gwt xml配置文件

来源: 互联网发布时间: 2013-11-15

<module>
　 <inherits name="com.google.gwt.user.User"/>
　 <entry-point class="com.jtv.gwt.client.MyApp"/>
　 <source path=“client"/>
　 <public path="public"/>
　 <servlet path="/cmdService"
　 　 　 　 　 　 　 　 　 class="com.jtv.gwt.server.CommandServiceImpl" />
</module>

Inherits指明继承模块，继承后可以共享资源,如js资源；必需项，内容是
"com.google.gwt.core.Core"或inherit自它的model的名称；
entry-point指明页面载入时要做什么；必需项，内容是EntryPoint实现类的全名；
source指明客户端代码的目录；默认是该xml所在目录下的client目录；
public指明公用文件的目录；默认是该xml所在目录下的public目录；
Servlet只是host-mode时用到，指明访问的后台servlet的别名以及全名(加入rpc调用设置)。

增加对多语言的支持模块
<inherits name ="com.google.gwt.i18n.I18N"/>

Gwt实现多语言
一：继承接口

1.继承接口：com.google.gwt.i18n.client.Constants

2.继承接口：com.google.gwt.i18n.client.Messages

可用通过继承上面任意一个接口实现一个多语言接口

多语言接口的名字，要与多语言的名字一致

作者：huang798807481 发表于2013-3-22 22:29:40 原文链接

阅读：1 评论：0 查看评论

[3]可改变大小DIV层

来源: 发布时间: 2013-11-15

本文使用Jquery UI实现了可改变大小的层，效果预览网址：http://www.keleyi.com/keleyi/phtml/resizable.htm

以下是完整代码，保存到html文件，打开也可以预览效果：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI实现可改变大小层-柯乐义</title>
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="http://www.keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/themes/smoothness/jquery-ui-1.10.2.custom.min.css" />
<script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery/ui/1.10.2/jquery-ui.js"></script>
<style type="text/css">
#resizable_keleyi_com { width: 150px; height: 150px; padding: 4px; }
#resizable_keleyi_com h3 { text-align: center; margin: 0;font-size:12px; }
</style>
</head>
<body>

<div id="resizable_keleyi_com" >
<h3 >可改变大小层</h3>
这里是内容<br />
www.keleyi.com
</div>
<script type="text/javascript">
$(function () {
$("#resizable_keleyi_com").resizable({minWidth:100,minHeight:50});
});
</script>
<br />
移动光标，当光标变成双箭头，按住鼠标拖动则可以改变层的大小。<br />
<a href="http://www.keleyi.com/a/bjac/7e8897e5ec0849e9.htm" target="_blank">原文</a>
</body>
</html>

resizable方法的属性：
alsoResize：
参数是选择器，参数所指的对象也会跟随调整大小对象一起进行大小改变。参数所指对象可以是调整大小对象内部元素也可以是外部元素。
JavaScript代码
$("#resizable").resizable({ alsoResize: '.other' });
animate：
调整大小动作发生在调整以后。以渐进加速方式实现动作。也就是说你在调整的时候对象的大小是不会变化的，当你松开鼠标的时候才开始发生大小变化，变化的过程并不是匀速的。参数是布尔值。
animateDuration：
与上面一个参数配合用，设置多少秒类完成大小变化动作。单位是毫秒。参数也可以为内置的字符串 'slow', 'normal'
animateEasing：
这个属性我很纳闷，应为我在官方api上面只看到一个参数就是swing，而默认值就是swing。
JavaScript代码
$("#resizable").resizable({ animate: true, animateDuration: 500,animateEasing: 'swing'});
aspectRatio：
设置为true按比例调整大小，可以设置为比例制如1/2 或者0.5.
JavaScript代码
$("#resizable").resizable({ aspectRatio: .5});
autoHide：
自动隐藏右下角调整标识...在加载ui的时候，右下角会有一个类似于QQ右下角那种3斜杠。这个属性值在设置鼠标没有放在边上的时候不显示这个。
JavaScript代码
$("#resizable").resizable({ autoHide: true });
cancel：
属性是选择器，所选择的对象不能调整。比如说用 class选择器选择了一批标签，但是我希望这批标签里面的 id是#a的不能调整。
JavaScript代码
$(".resizable").resizable({ cancel: '#a' });
containment：
限定可调整区域。参数'parent', 'document'，也可以是选择器或者标签名。比如说我把调整区域限制在父标签，那么这个元素最大只能调整成父标签的大小。
JavaScript代码
$(".resizable").resizable({ containment: 'parent' });
delay：
延迟多少毫秒执行调整事件。这样可以有效的避免因为不经意的操作而误调整了窗口。也就是说你鼠标放在边或者角上的时候需要按下去停留一定的毫秒才能执行调整事件。
JavaScript代码
$(".resizable").resizable({ delay: 2000 }); //测试用的，按下去2秒后才能调整，否则无效
distance：延迟多少像素执行调整事件，作用和上面的参数一样，都是为了防止误操作。鼠标按下去移动参数像素以后才能触发调整事件。
JavaScript代码
$(".resizable").resizable({ distance: 200 });
ghost：设置为true以后，调整时，原始对象并不发生变化，而是复制一份原始对象，并且把它半透明，来显示你调成的大小，鼠标松开后，半透明的复制对象消失，原始对象直接显示调整后的大小。
JavaScript代码
$('.selector').resizable({ ghost: true });
grid：设置调整大小时候x y 轴每次移动多少像素。
JavaScript代码
$('.selector').draggable({ grid: [50, 20] });
handles：可实行调整的边和角。默认只有 [右边,下边,右下角]可以调整。可以根据参数{ n, e, s, w, ne, se, sw, nw }自由搭配。
JavaScript代码
$('.selector').resizable({ handles: 'n, e, s, w' });
helper：拖拽组件也有这个属性，但是在这个里面效果不同，这个里面helper的参数是一个字符串（class名字），当调整发生时，会有类似ghost的效果发生，只不过ghost效果所复制的是已经定义好的，而这里可以自己根据css定义复制出来的原始对象。同样，在调整结束后，这个复制对象会消失。
JavaScript代码
$('.selector').resizable({ helper: 'ui-state-highlight' });
maxHeight： maxWidth: minHeight: minWidth: 这2个属性，等同于css里面的对应属性。实际上，如果不考虑ie6的话，在css定义这些属性比在jQ里面定义这些属性效率更好。
JavaScript代码
$('.selector').resizable({ maxWidth: 250 });

本文转载自柯乐义http://www.keleyi.com/a/bjac/7e8897e5ec0849e9.htm

本文链接