GXT之旅：第二章：GXT组件(3)——事件和监听

最新推荐文章于 2012-01-11 10:53:11 发布

茜茜770

最新推荐文章于 2012-01-11 10:53:11 发布

阅读量6.8k

点赞数 3

分类专栏： GWT/GXT GXT之旅文章标签： gwt stylesheet 浏览器 encoding button

本文链接：https://blog.csdn.net/miqi770/article/details/7172719

版权

GWT/GXT 同时被 2 个专栏收录

61 篇文章 5 订阅

订阅专栏

GXT之旅

61 篇文章 17 订阅

订阅专栏

GXT基础3：Events

Events 概念是指：当有事件发生时，通知应用程序作出响应的这一过程。点击button或者控件的状态改变，都可以当作一个事件，然后通过应用程序，使用户和程序之间产生某种互动的效果。用户在控件上的每一个行为，每一个操作，都会导致某些事件的触发，如果这个控件自身监听到了某些事件的发生，那么就会跳转到对应的处理流程中，以此作为事件的响应。

从专业的角度来说，就像总所周知的observer模式那样。在GXT里，使用listeners来处理事件的。如果一个listener已经被添加到某个component上，当某个event被触发后，那么与之对应的listener就会被唤醒，然后处理该event。

所有Events的基类是：com.extjs.gxt.ui.client.event.BaseEvent。并且GXT提供了广泛的事件类型。稍后我们会在demo应用程序中逐渐的使用他们。

事件的sink和swallow

作为GWT设计的一部分，widgets只能响应浏览器中部分的事件，GXT也是如此。原因是降低内存使用量，避免内存使用溢出。如果让一个widget可以响应一个浏览器里的事件，要调用sinkEvents()方法把该事件注册。例如，默认的一个component可以响应onClick event，但是不支持响应onDoubleClick。为此，我们需要通过sinkEvents()方法在此控件上组册此双击事件。

类似的方法，我们也可以销毁某些事件，来避免一个事件被多次触发。例如，如果像让一个button component的onClick event失效，我们可以注销调他。

Demo应用程序－RSSReader

下面我们就开始一步一步的搭建一个demo程序，此demo会贯穿全文，我们会不断的优化她，通过此过程深入了解GXT的各种应用。首先呢，我需要先新建一个最基本的项目。

需求：假如我们的客户有这样一个简单的需求。创建一个RSS 新闻订阅读器，可以管理用户指定的各式各样的RSS；此程序必须要可以通过web访问，显式效果必须类似于桌面的应用程序。不需要强制用户安装某一特定的浏览器，不需要用户设置显示器分辨率，要尽可能的让我们的程序灵活起来。

解决方案：GWT提供最优话的跨浏览器JavaScript解决方案，这正好满足了综上需求。在此基础上，我们再使用GXT，可以让程序展现的更像桌面程序。

项目背景：我们现在需要创建一个新的GXT项目，按照第一章所讲的步骤，此次项目命名为RSSReader。同时我们不需要GWT的默认生成的代码，要清楚干净他们。

创建项目基包：com.danielvaughan.rssreader
在此包下创建GWT modal文件（com.danielvaughan.rssreader.RSSReader.gwt.xml）

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='rssreader'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <inherits name='com.google.gwt.user.theme.standard.Standard'/>
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/>     -->

  <!-- Other module inherits                                      -->
   <inherits name='com.extjs.gxt.ui.GXT'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.danielvaughan.rssreader.client.RSSReader'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

创建新包（client），并在此包下创建类（com.danielvaughan.rssreader.client.RSSReader），实现onModuleLoad()方法。

package com.danielvaughan.rssreader.client;

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

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class RSSReader implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	@Override
	public void onModuleLoad() {

	}
}

编辑web.xml文件，设置欢迎页面

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>RSSReader</display-name>
	<!-- Default page to serve -->
	<welcome-file-list>
		<welcome-file>RSSReader.html</welcome-file>
	</welcome-file-list>
</web-app>

WebContent/目录下创建RSSReader.css空文件。
创建欢迎页面（RSSReader.html）；引入GXT resources目录里面的css文件和刚才建立的RSSReader.css；引入rssreader.nocache.js（GWT编译后会自动生成在WebContent/目录下，注意大小写）；把<body>标签里内容清空。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="RSSReader.css">
<link type="text/css" rel="stylesheet" href="gxt/css/gxt-all.css">
<title>RSSReader</title><script type="text/javascript" language="javascript"
	src="rssreader/rssreader.nocache.js"></script></head><body></div></body></html>

搭建后的空项目，我们启动后访问应该是一个空白页面。整个目录结构如下

下一节，会在这个RSSReader项目上开始GXT之旅。请大家拭目以待哦～～～

茜茜770

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
GXT之旅：第二章：GXT组件(3)——事件和监听

GXT基础3：EventsEvents 概念是指：当有事件发生时，通知应用程序作出响应的这一过程。点击button或者控件的状态改变，都可以当作一个事件，然后通过应用程序，使用户和程序之间产生某种互动的效果。用户在控件上的每一个行为，每一个操作，都会导致某些事件的触发，如果这个控件自身监听到了某些事件的发生，那么就会跳转到对应的处理流程中，以此作为事件的响应。从专业的角度来说，就像总所周知
复制链接

扫一扫