`
laodaobazi
  • 浏览: 276900 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Gwt 轻松入门

    博客分类:
  • gwt
阅读更多

      相信在看到这篇文章之前,你已经查看过网上一些其他帖子。对于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 这是当前的最新版本
地址:http://www.eclipsetotale.com/tomcatPlugin.html
把解压后的 tomcatPlugin 文件夹直接放到 eclipse的plugins 目录下 ,重新启动 eclipse ;
菜单上多了一个下拉项Tomcat, 快捷栏里多了三个Tomcat的猫图标。
如图:

下面进行配置:
Window->Preferences->Tomat
如图:
 

 选择对应的版本,配置正确的Tomcat的解压路径


 

 

 



 配置自己的JRE,
Window->Preferences->Java->Installed JREs->add->Standard VM->next
在JRE home 选择你JDK的安装路径。
gwt-ext 提供了很多的例子地址:http://gwt-ext.com/demo/
所需的插件如果你懒得去下载 下面我已经上传了,经过整合验证可以使用。
  • 大小: 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

    【GWT 开发手册轻松入门GWT】 Google Web Toolkit (GWT) 是一个开源的Java框架,用于构建和部署富互联网应用程序(RIA)。GWT允许开发者使用Java编写客户端代码,然后将其编译成优化的JavaScript,可在各种Web...

    SmartGWT 入门 SmartGWT 入门

    ### SmartGWT 入门详解 #### 一、SmartGWT 概述 **SmartGWT** 是一款基于 **Google Web Toolkit (GWT)** 的高级Web应用开发框架,旨在简化企业级Web 2.0应用的开发过程。自从 **GWT** 发布以来,它吸引了大量的...

    GWT入门教程+实例代码

    **GWT 入门教程与实例解析** Google Web Toolkit(GWT)是Google推出的一款用于构建高性能、跨浏览器的Web应用程序的开源开发工具。它基于Java语言,通过编译Java源代码为JavaScript,使得开发者可以利用Java的强大...

    面向 Java 开发人员的 Ajax: Google Web Toolkit 入门(GWT入门)

    **Java开发人员的Ajax:Google Web Toolkit (GWT) 入门** Google Web Toolkit (GWT) 是一个强大的工具,它允许Java开发人员使用熟悉的Java语言来构建高性能、跨浏览器的Ajax应用程序。GWT通过将Java代码编译为优化...

    GWT入门与经典实例解析源码

    GWT入门与经典实例解析源码提供了一个学习和实践GWT开发的宝贵资源,下面将详细介绍GWT的关键概念、核心特性以及通过实例解析来深入理解其工作原理。 1. **GWT的安装与设置**: 在开始GWT项目之前,你需要安装Java...

    GWT入门教程的好东西啊

    ### GWT入门教程知识点详解 #### 一、GWT简介 **Google Web Toolkit (GWT)** 是由Google推出的一款强大的Ajax应用开发包,它允许开发者使用熟悉的Java语言来进行Web应用程序的构建。对于初学者而言,这无疑是一个...

    GWT入门教程

    **GWT(Google Web Toolkit)入门教程** GWT(Google Web Toolkit)是一个开源的Java开发框架,由Google推出,主要用于构建高性能、富交互式的Web应用程序。这个框架允许开发者使用Java语言编写前端代码,并自动...

    入门GWT 适合初学者

    GWT提供了丰富的UI组件,如Button、TextBox等,这些组件可以轻松地构建复杂的用户界面。例如,可以使用`Button`类创建一个按钮,使用`TextBox`类创建一个输入框。 ```java import ...

    GWT入门中级高级教程,基础教程。全中文。pdf、ppt、word格式

    5. **GWT的响应式设计**:GWT通过CSS3媒体查询和自定义布局策略,可以轻松实现响应式网页设计,适应不同设备和屏幕尺寸。 **四、Ajax技术在GWT中的应用** GWT利用Ajax技术实现了无刷新页面更新,提升了用户体验。...

    GWT(很好的资料和书籍不好你打我)

    描述中的“GWT书 GWT参考 Gwt入门很适合学习GWT,很不错的资源!”暗示了压缩包内可能包含了一些GWT的学习资料,如书籍、教程或者参考资料,这些资源对于初学者来说非常有价值,可以帮助他们快速掌握GWT的基本概念和...

    Gwt In Action

    GWT内建了对Ajax的支持,通过异步请求(RPC)和JSON数据格式,可以轻松构建响应式Web应用。 4. JS (JavaScript) JavaScript是网页开发的标准脚本语言,用于实现客户端的交互逻辑。GWT将Java代码编译为JavaScript,...

    GWT 2.2 Tutorial and Developer Guide

    总之,《GWT 2.2 教程与开发者指南》是一本详尽的教程书籍,它不仅适合初学者快速入门 GWT,也适合有一定经验的开发者深入学习 GWT 的高级功能和技术细节。无论您是想构建简单的 web 应用程序还是复杂的企业级应用,...

    Ext GWT 2.0 Beginner's Guide

    - **初学者**:对于初次接触Ext GWT的开发者来说,本书提供了全面而系统的入门指南。 - **Java开发者**:对于熟悉Java语言但不熟悉Ext GWT的开发者,本书可以帮助他们快速掌握这一框架。 - **Web开发爱好者**:任何...

    Google Web Toolkit 入门

    ### Google Web Toolkit (GWT) 入门指南 #### 一、引言 随着网络技术的发展,用户对Web应用的期望越来越高,不仅要求其功能强大,还希望具有良好的交互性和用户体验。为此,一种名为Ajax(Asynchronous JavaScript...

    json初学入门教程

    ### JSON初学入门教程知识点详解 #### 一、JSON简介 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,被广泛应用于Web应用程序中进行数据传输。它以文本形式存储,具有简单易读的特点,并且能被...

    G W T 中 文 教 程

    在这个教程中,提供的文件"**GWT+Quickview+-+by+elephi[1].dong+.mht**"可能是一个关于GWT快速入门的资料,包含了GWT的基础知识和实用技巧。MHT文件是一种单个文件的网页存档格式,它包含了网页的所有内容,包括...

    Beginning Google Web Toolkit From Novice to Professional

    《初识Google Web Toolkit:从新手到专家》这本书是一本为所有层次的开发者设计的GWT(Google Web Toolkit)入门指南。GWT是Google推出的一个开源工具包,它允许开发者使用Java语言来编写Web应用程序,并自动编译成...

Global site tag (gtag.js) - Google Analytics