GXT之旅:第二章:GXT组件(3)——事件和监听
2012-01-03 17:47
330 查看
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之旅。请大家拭目以待哦~~~
相关文章推荐
- 如何监听Element组件<el-input>标签的回车事件
- GXT之旅:第二章:GXT组件(5)——加载消息
- POX控制器源码阅读(二) 组件如何监听事件/未完成
- Vue.js父组件$on无法监听子组件$emit触发事件解决办法
- java 往frame或组件中添加监听事件无效
- extjs组件添加事件监听的三种方式
- 【新手向】适配器中有多个组件的事件监听
- ExtJs组件监听事件
- 使用vue.js在页面内组件监听scroll事件的方法
- GXT之旅:第二章:GXT组件(4)——容器的布局
- android之实现各个组件点击事件监听
- iPhone开发之UIScrollView滚动组件的使用(五) 通过代理监听滚动事件
- vuejs2.0实现分页组件,使用$emit进行事件监听数据传递
- 使用vue.js在页面内组件监听scroll事件
- GXT之旅:第二章:GXT组件(8)——Popup
- vuejs2.0实现分页组件,使用$emit进行事件监听数据传递
- extjs组件添加事件监听的三种方式 http://blog.sina.com.cn/s/blog_48d7f92901011cfn.html
- 一个简单的记事本-----熟悉JFrame、j组件、事件处理机制(监听机制)、BufferedReader/BufferedWriter 、文件选择器组件JFileChooser
- GXT之旅:第二章:GXT组件(9)——Popup位置
- vue使用$emit时,父组件无法监听到子组件的事件实例