相信在看到这篇文章之前,你已经查看过网上一些其他帖子。对于Gwt,我也是刚刚入门。在写这篇文章之前我也曾看过网上的一些有关Gwt的资料。但发现其中有些文章介绍的Gwt版本已经过时,应该是由于文章的创作时间比较早的缘故,为此我走了段弯路。也正是绕了个弯为此对Gwt有了点初步的了解。写这篇文章的目的是为了让想了解gwt的入门者少走弯路。
网上我见的最多的对Gwt介绍的版本如下:
首先:配置你的开发环境
使用Eclipse 和插件 Cypal Studio 下载地址:http://code.google.com/p/cypal-studio/downloads/list
使用方法 http://www.ibm.com/developerworks/cn/opensource/os-eclipse-ajaxcypal ,当然如果你能按照上面的描述顺利的操作,那你比我幸运。
我当时刚刚了解Gwt的时候用的是MyEclipse6.6.0,装Cypal Studio插件的时候还算是顺利,但创建 Gwt 项目的时候就杯具了。只能创建普通web项目,根本没有下面的创建界面选项
出现上面情况怎么办呢? GWT 不就是由Java生成JS么,所以可以这么大胆的尝试。既然不能如上方式创建Web项目,那就干脆创建普通的Java项目。
New -> Java Project
New -> Other -> GWT Module -> Next
创建好之后将 "gwt-dev-windows.jar" "gwt-user.jar" 加入 classpath
选中项目 -> 右键 -> Run As -> Run Configuration
运行之前需要配置参数
Main class:com.google.gwt.dev.GWTShell
配置运行参数 -out www com.demo.PanelDemo/PanelDemo.html
虚拟机参数 -Xms128m -Xmx128m -XX:PermSize=128m -XX:MaxPermSize=128m
运行的 Demo
demo project 截图:
代码 如下 :
package com.demo.client;
import com.google.gwt.core.client.EntryPoint;
import com.gwtext.client.core.Margins;
import com.gwtext.client.core.RegionPosition;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.Viewport;
import com.gwtext.client.widgets.layout.BorderLayout;
import com.gwtext.client.widgets.layout.BorderLayoutData;
import com.gwtext.client.widgets.layout.FitLayout;
public class PanelDemo implements EntryPoint {
public void onModuleLoad() {
Panel panel = new Panel("Border Layout Sample");
panel.setBorder(false);
panel.setPaddings(15);
panel.setLayout(new FitLayout());
Panel borderPanel = new Panel();
borderPanel.setLayout(new BorderLayout());
Panel northPanel = new Panel();
northPanel.setHtml("<p>north panel 北</p>");
northPanel.setHeight(32);
northPanel.setBodyStyle("background-color:#FFFF88");
borderPanel.add(northPanel, new BorderLayoutData(RegionPosition.NORTH));
Panel southPanel = new Panel();
southPanel.setHtml("<p>south panel 南</p>");
southPanel.setHeight(100);
southPanel.setBodyStyle("background-color:#CDEB8B");
southPanel.setCollapsible(true);
southPanel.setTitle("South");
BorderLayoutData southData = new BorderLayoutData(RegionPosition.SOUTH);
southData.setCollapseModeMini(true) ;
southData.setMinSize(100);
southData.setMaxSize(200);
southData.setMargins(new Margins(0, 0, 0, 0));
southData.setSplit(true);
borderPanel.add(southPanel, southData);
Panel eastPanel = new Panel();
eastPanel.setHtml("<p>east panel 东</p>");
eastPanel.setTitle("East Side");
eastPanel.setCollapsible(true);
eastPanel.setWidth(225);
BorderLayoutData eastData = new BorderLayoutData(RegionPosition.EAST);
eastData.setCollapseModeMini(true) ;
eastData.setSplit(true);
eastData.setMinSize(175);
eastData.setMaxSize(400);
eastData.setMargins(new Margins(0, 0, 5, 0));
borderPanel.add(eastPanel, eastData);
Panel westPanel = new Panel();
westPanel.setHtml("<p>west panel 西</p>");
westPanel.setTitle("West");
westPanel.setBodyStyle("background-color:#EEEEEE");
westPanel.setCollapsible(true);
westPanel.setWidth(200);
BorderLayoutData westData = new BorderLayoutData(RegionPosition.WEST);
westData.setSplit(true);
westData.setMinSize(175);
westData.setMaxSize(400);
westData.setMargins(new Margins(0, 5, 0, 0));
borderPanel.add(westPanel, westData);
Panel centerPanel = new Panel();
centerPanel.setHtml("<p>center panel 中间</p>");
centerPanel.setBodyStyle("background-color:#C3D9FF");
borderPanel.add(centerPanel,new BorderLayoutData(RegionPosition.CENTER));
panel.add(borderPanel);
new Viewport(panel);
}
}
<module>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name="com.google.gwt.user.User" />
<inherits name="com.gwtext.GwtExt" />
<!-- Specify the app entry point class. -->
<entry-point class='com.demo.client.PanelDemo'/>
<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"/> -->
<stylesheet src="js/ext/resources/css/ext-all.css" />
<script src="js/ext/adapter/ext/ext-base.js" />
<script src="js/ext/ext-all.js" />
</module>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gwt PanelDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
</head>
<body>
<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
<script type="text/javascript" language="javascript" src="com.demo.PanelDemo.nocache.js"></script>
</body>
</html>
上面的一切均是对 Gwt 入门做一些了解与铺垫,下面描述一下Gwt-Ext Web 开发应用
1、搭建开发环境:
下载
eclipse-jee-helios-SR2-win32
如图:
下载后解压。
2、安装所需的插件
方式二:下载下载下来安装
下载 Google Web Toolkit 开发插件 gpe-e36-latest-updatesite.zip
eclipse->Help -> Install new Software - > add ->archive…
如图:
成功安装之后重新启动Eclpse。
安装成功之后如图:
如图: New -> other...
3、安装Tomcat插件 tomcatPluginV33.zip 这是当前的最新版本
菜单上多了一个下拉项Tomcat, 快捷栏里多了三个Tomcat的猫图标。
如图:
下面进行配置:
Window->Preferences->Tomat
如图:
选择对应的版本,配置正确的Tomcat的解压路径
配置自己的JRE,
Window->Preferences->Java->Installed JREs->add->Standard VM->next
在JRE home 选择你JDK的安装路径。
所需的插件如果你懒得去下载 下面我已经上传了,经过整合验证可以使用。
- 大小: 8.8 KB
- 大小: 60 KB
- 大小: 7 KB
- 大小: 23.6 KB
- 大小: 5.5 KB
- 大小: 18.7 KB
- 大小: 20.4 KB
- 大小: 25.7 KB
- 大小: 100.7 KB
- 大小: 22.1 KB
- 大小: 25 KB
- 大小: 22.4 KB
- 大小: 118.5 KB
- 大小: 22.9 KB
分享到:
相关推荐
【GWT 开发手册轻松入门GWT】 Google Web Toolkit (GWT) 是一个开源的Java框架,用于构建和部署富互联网应用程序(RIA)。GWT允许开发者使用Java编写客户端代码,然后将其编译成优化的JavaScript,可在各种Web...
### SmartGWT 入门详解 #### 一、SmartGWT 概述 **SmartGWT** 是一款基于 **Google Web Toolkit (GWT)** 的高级Web应用开发框架,旨在简化企业级Web 2.0应用的开发过程。自从 **GWT** 发布以来,它吸引了大量的...
**GWT 入门教程与实例解析** Google Web Toolkit(GWT)是Google推出的一款用于构建高性能、跨浏览器的Web应用程序的开源开发工具。它基于Java语言,通过编译Java源代码为JavaScript,使得开发者可以利用Java的强大...
**Java开发人员的Ajax:Google Web Toolkit (GWT) 入门** Google Web Toolkit (GWT) 是一个强大的工具,它允许Java开发人员使用熟悉的Java语言来构建高性能、跨浏览器的Ajax应用程序。GWT通过将Java代码编译为优化...
GWT入门与经典实例解析源码提供了一个学习和实践GWT开发的宝贵资源,下面将详细介绍GWT的关键概念、核心特性以及通过实例解析来深入理解其工作原理。 1. **GWT的安装与设置**: 在开始GWT项目之前,你需要安装Java...
### GWT入门教程知识点详解 #### 一、GWT简介 **Google Web Toolkit (GWT)** 是由Google推出的一款强大的Ajax应用开发包,它允许开发者使用熟悉的Java语言来进行Web应用程序的构建。对于初学者而言,这无疑是一个...
**GWT(Google Web Toolkit)入门教程** GWT(Google Web Toolkit)是一个开源的Java开发框架,由Google推出,主要用于构建高性能、富交互式的Web应用程序。这个框架允许开发者使用Java语言编写前端代码,并自动...
GWT提供了丰富的UI组件,如Button、TextBox等,这些组件可以轻松地构建复杂的用户界面。例如,可以使用`Button`类创建一个按钮,使用`TextBox`类创建一个输入框。 ```java import ...
5. **GWT的响应式设计**:GWT通过CSS3媒体查询和自定义布局策略,可以轻松实现响应式网页设计,适应不同设备和屏幕尺寸。 **四、Ajax技术在GWT中的应用** GWT利用Ajax技术实现了无刷新页面更新,提升了用户体验。...
描述中的“GWT书 GWT参考 Gwt入门很适合学习GWT,很不错的资源!”暗示了压缩包内可能包含了一些GWT的学习资料,如书籍、教程或者参考资料,这些资源对于初学者来说非常有价值,可以帮助他们快速掌握GWT的基本概念和...
GWT内建了对Ajax的支持,通过异步请求(RPC)和JSON数据格式,可以轻松构建响应式Web应用。 4. JS (JavaScript) JavaScript是网页开发的标准脚本语言,用于实现客户端的交互逻辑。GWT将Java代码编译为JavaScript,...
总之,《GWT 2.2 教程与开发者指南》是一本详尽的教程书籍,它不仅适合初学者快速入门 GWT,也适合有一定经验的开发者深入学习 GWT 的高级功能和技术细节。无论您是想构建简单的 web 应用程序还是复杂的企业级应用,...
- **初学者**:对于初次接触Ext GWT的开发者来说,本书提供了全面而系统的入门指南。 - **Java开发者**:对于熟悉Java语言但不熟悉Ext GWT的开发者,本书可以帮助他们快速掌握这一框架。 - **Web开发爱好者**:任何...
### Google Web Toolkit (GWT) 入门指南 #### 一、引言 随着网络技术的发展,用户对Web应用的期望越来越高,不仅要求其功能强大,还希望具有良好的交互性和用户体验。为此,一种名为Ajax(Asynchronous JavaScript...
### JSON初学入门教程知识点详解 #### 一、JSON简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛应用于Web应用程序中进行数据传输。它以文本形式存储,具有简单易读的特点,并且能被...
在这个教程中,提供的文件"**GWT+Quickview+-+by+elephi[1].dong+.mht**"可能是一个关于GWT快速入门的资料,包含了GWT的基础知识和实用技巧。MHT文件是一种单个文件的网页存档格式,它包含了网页的所有内容,包括...
《初识Google Web Toolkit:从新手到专家》这本书是一本为所有层次的开发者设计的GWT(Google Web Toolkit)入门指南。GWT是Google推出的一个开源工具包,它允许开发者使用Java语言来编写Web应用程序,并自动编译成...