Code For Better 谷歌开发者之声——谷歌Web工具包(GWT)

news2024/11/18 6:02:10

🍎个人主页:亮点菌的博客
🍊个人信条:点亮编程之路,做自己的亮点

在这里插入图片描述


文章目录

  • 一、GWT简介
  • 二、运行模式
    • 1、开发模式(以前称为托管模式)
    • 2、生产模式(以前称为Web模式)
  • 三、组件
    • 1、GWT Java-to-JavaScript编译器
    • 2、GWT开发模式
    • 3、JRE仿真库
    • 4、GWT Web UI类库
  • 四、开发步骤
    • 1、安装java开发环境 Java SDK
    • 2、安装Eclipse或您喜欢的Java IDE
    • 3、安装Eclipse Google Plugin
    • 4、下载 GWT
    • 5、解压GWT 目录到你的要运行的地方
    • 6、安装Google App Engine SDK。
  • 五、GWT特性
    • 1、GWT编译器
    • 2、跨平台支持
    • 3、宿主模式(Hosted Mode)
    • 4、Web模式(Web Mode)
    • 5、命令行工具
  • 六、构建示例GWT应用程序


一、GWT简介

  1. GWT是一个开源的一套工具,它允许Web开发人员创建和维护复杂的JavaScript 前端应用程序中的Java。除了一些本地库之外,一切都是Java源代码,可以使用包含的GWT Ant构建文件在任何支持的平台上构建。它是根据Apache许可证 2.0版许可的。
  2. GWT强调可重用的常见Web开发任务方法,即异步远程过程调用,历史管理,书签,UI抽象,国际化和跨浏览器 可移植性。
  3. GWT 提供了一组基于Java语言的开发包,这个开发包的设计参考Java AWT包设计,类命名规则、接口设计、事件监听等都和AWT非常类似。熟悉Java AWT的开发者不需要花费多大的力气就能够快速的理解GWT开发工具包,将更多地时间投入到GWT应用的开发过程中。
  4. 开发出来的Java应用将由GWT开发包提供的编译工具编译后声生成对应的、应用了Ajax技术的Web应用,Java应用中出现的、和服务器之间的交互动作被自动生成的异步调用代码所代替。

eclipse安装gwt插件
请添加图片描述

二、运行模式

GWT应用程序可以以两种模式运行

1、开发模式(以前称为托管模式)

应用程序在Java虚拟机(JVM)中作为Java字节码运行。[11]此模式通常用于开发,支持代码的热交换和调试。在2014年,开发人员模式的经典实现因浏览器更新而无法使用[,直到用更兼容的超级开发模式取代,后者成为GWT 2.7中的默认模式。

2、生产模式(以前称为Web模式)

应用程序作为纯Java和HTML运行,从Java源代码编译。此模式通常用于部署。

三、组件

1、GWT Java-to-JavaScript编译器

将Java编程语言转换为JavaScript编程语言。

2、GWT开发模式

允许开发人员以开发模式运行和执行GWT应用程序(该应用程序在JVM中作为Java运行,无需编译为JavaScript)。在2.0之前,GWT托管模式提供了一个专用的“托管浏览器”来调试您的GWT代码。在2.0中,正在调试的网页在常规浏览器中查看。通过使用称为Google Web Toolkit Developer Plugin的本机代码插件为许多流行的浏览器支持开发模式。

3、JRE仿真库

Java标准类库中常用类的JavaScript实现(例如大多数java.lang包类和java.util包类的子集)。

4、GWT Web UI类库

一组用于创建窗口小部件的自定义接口和类。

四、开发步骤

1、安装java开发环境 Java SDK

如果您没有安装最新版本的Java SDK,请下载并安装Java Standard Edition SDK。

2、安装Eclipse或您喜欢的Java IDE

在这些教程中,我们使用Eclipse,因为它是开源的。 但是,GWT不会将您绑定到Eclipse。 您可以使用IntelliJ,NetBeans或您喜欢的任何Java IDE。 如果您使用Eclipse以外的Java IDE,则教程中的屏幕截图和一些特定说明将有所不同,但基本的GWT概念将是相同的。
如果您的Java IDE不包含Apache Ant支持,您可以下载并解压缩Ant以轻松编译和运行GWT应用程序。

3、安装Eclipse Google Plugin

Google Plugin for Eclipse为Eclipse添加了用于创建和开发GWT应用程序的功能。

4、下载 GWT

可以使用Google Plugin for Eclipse下载GWT。 或者,下载适用于您的操作系统的最新GWT分发版。

5、解压GWT 目录到你的要运行的地方

GWT没有安装程序。 运行和使用GWT所需的所有文件都位于解压缩的目录中。

您也可以选择执行以下操作:

6、安装Google App Engine SDK。

1.Google App Engine允许您在Google的基础架构上运行Java Web应用程序,包括GWT应用程序。 可以使用Google Plugin for Eclipse下载App Engine SDK。 或者,单独下载App Engine SDK for Java。
2.创建并运行您的第一个Web应用程序 - 一些简单的步骤可以帮助您熟悉命令行命令。

五、GWT特性

GWT除了支持将应用Java语言开发的应用转化为Ajax应用,同时提供了更多的高级特性,下面是这些特性的简单描述。

1、GWT编译器

GWT编译器是GWT的核心,负责完成将Java代码翻译很Ajax内容的工作。GWT编译器能够翻译Java语言的大部分特性。包括支持Java 语言中的基本类型、违例处理等,支持java.lang包和java.util包中的绝大部分类和接口,支持正则表达式和序列化。

2、跨平台支持

如果你使用GWT中提供的显示组件(比如Button)和组装组件(比如VerticalPanel),GWT编译生成的Ajax应用能够支持大部 分的浏览器和操作系统,比如Internet Explorer、Firefox等,也能够支持Linux、Windows等不同操作系统。这是因为GWT最大限度的将这些控件翻译成浏览器内置的类 型。比如Button类编译后生成的是标准HTML。

GWT建议使用CSS修饰页面元素的显示效果。GWT的类中很少提供访问页面元素样式属性的方法,我们可以直接在CSS文件中通过对应的样式名称来 设置页面元素的默认显示效果。比如使用 .gwt-Button { font-size: 150%; } 使用Button元素的默认显示效果。

3、宿主模式(Hosted Mode)

宿主模式是指我们和没有转换为Ajax应用的GWT应用交互的状态。当我们开发和调试时,我们就一直处在宿主模式下。在这种情况下,Java虚拟机使用GWT内置的浏览器运行GWT应用编译后的class内容,因此能够提供"编码、测试、调试"过程的最佳速度。

我们可以运行com.google.gwt.dev.GWTShell启动宿主模式。

4、Web模式(Web Mode)

Web模式是指已经成功转化为Ajax应用的状态,这种状态下,我们已经开始通过Web方式来访问Ajax应用了。

在Web模式下运行时,不再需要GWT工具包或者JVM的支持。

5、命令行工具

GWT工具包中提供了几个非常适用的小工具来帮助我们更快的建立GWT应用开发环境:projectCreator、applicationCreator、junitCreator。

  • projectCreator
    创建在Eclipse中开发GWT应用所需要的项目基本文件和可选的Ant buildfile文件。
  • applicationCreator
    applicationCreator命令用于创建基本的HelloWorld!应用和GWT应用开发环境。
  • junitCreator
    生成junti测试代码。

六、构建示例GWT应用程序

通过从头开发StockWatcher应用程序开始使用GWT。 您将学习创建GWT项目,使用GWT wigdets和面板构建UI,使用Java语言编写客户端功能,在开发模式下调试,应用CSS样式,将Java编译为JavaScript以及运行应用程序 生产模式。


看到最后,点个赞吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409606.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端开发:JS的事件冒泡和事件捕获详解

前言 在前端开发过程中,关于JS原生的核心内容使用是日常工作中的常态,关于底层和原理的掌握使用,尤其是在性能优化方面甚为重要。作为前端开发的进阶内容,在实际开发过程中事件发生的顺序称为事件流,当触发某个事件的时…

微信小程序使用 npm 包,举例图文详解

使用 npm 包前提条件: 下载安装,配置npm环境变量,不懂得可以上网查教程,本文不再描述 小程序使用 npm 包简述 1、初始化 package.json 2、勾选允许使用 npm(新版微信小程序开发工具忽略这一步) 3、下载…

Auto.js的介绍

Auto.js 是一款无需root权限的javascript自动化软件 auto.js是一款安卓手机应用,和微信一样,安装在手机上使用 Auto.is是一款自动化软件,更根据脚本内容便可自动执行相关的操作,并且手机无需root Auto.js的脚本需要使用JavaScri…

Vue中的v-for循环,实现div块的循环生成

前言 大家好,这里是果力成,老规矩,学之!最近在做前端页面遇到一个小问题,说来也不难,但还是花费了我的好些时间,保持习惯记录一下。在前端学习中不免遇到一个div或者一个数组的循环产生,因为挨个儿传数据显然不是最优的。这里讲述…

强大的图片预览组件Viewer.js

​ 1、 Viewer.js简介 Viewer.js 是一款强大的图片查看器。我们通过Viewer.js 在页面上添加强大的图片查看功能,同时,这款优秀的插件配置操作起来也非常的方便。 Viewer.js分为2个版本,js版本和jquery版本,下载地址分别为 纯J…

uniapp组件uni-file-picker中对上传的图片进行压缩至1兆以内

我在做uniapp项目时,用的uni-file-picker组件,这是我做的一个项目实例,主要是将图片通过接口传至后台服务器 如果只是上传一张照片的话 还没有什么大问题,但是如果一连上传很多个图片,像我这个项目一样,而且…

一文搞懂ES6的Map

什么是Map Map是ECMAScript 6 的新增特性,是一种新的集合类型,为javascript带来了真正的键/值存储机 制。 Map 对象存有键值对,其中的键可以是任何数据类型。 Map 对象记得键的原始插入顺序。 Map 对象具有表示映射大小的属性。 Map的基…

海康视频WEB插件 V1.5.2 开发总结

文章目录前言一、效果图二、插件使用步骤总结三、具体步骤分析1.new 一个WebControl 插件实例2.启动插件服务3.创建视频播放窗口、绑定消息回调4.初始化参数,其中secret参数需要通过RSA加密,加密公钥通过WebControl.JS_RequestInterface获取5.通过WebCon…

前端使用html2canvas生成图片踩坑

前端使用html2canvas生成图片经验总结 前言 主要是总结一下html2canvas生成图片的基础用法,以及自己在使用html2canvas过程中踩过的坑和相应的解决思路 背景 近段时间接手一个项目,需要向设备下发某一个图片,为了该图片可以实时更改&…

vue实现tagsview多页签导航功能

文章目录前言一、效果图二、实现思路1. 新建 tags-view.js2. 在Vuex里面引入 tags-view.js3. 新建 tabsView 组件4. 新建 ScrollPane 组件5. 引入 tabsView 组件6. 使用 keep-alive 组件,进行页签的缓存总结前言 基本上后台管理系统都需要有多页签的功能&#xff0…

vue 城市选择器(省市区)的使用 element-china-area-data

一、Element UI 中国省市区级联数据 本文参考:Element UI 中国省市区级联数据 本文参考:根据此文做的整理 1. 安装 npm install element-china-area-data -S2. 使用 import { regionData, CodeToText, TextToCode } from element-china-area-datareg…

vue项目打包优化及配置vue.config.js文件(实测有用)

首先我们需要在根目录里创建一个vue.config.js 首先在文件中先写入 //打包配置文件 module.exports {assetsDir: static, // outputDir的静态资源(js、css、img、fonts)目录publicPath: ./, // 静态资源路径(默认/,如果不改打包后会白屏&#x…

HTML樱花飘落

樱花效果 FOR YOU GIRL 以梦为马&#xff0c;不负韶华 LOVE YOU FOREVER 实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><meta http-equiv"…

【JavaScript-动画原理】如何使用js进行动画效果的实现

&#x1f482; 个人主页&#xff1a;Aic山鱼 个人社区&#xff1a;山鱼社区 &#x1f4ac; 如果文章对你有所帮助请点个&#x1f44d;吧!欢迎关注、点赞、收藏(一键三连)和订阅专哦目录 前言 1.动画原理 2.动画函数的封装 3.给不同元素添加定时器 4.缓动动画原理 5.给动…

原生JS实现FlappyBird游戏 超详细解析 快来做一个自己玩吧

目录​ 1.适配设备&#x1f43e; 2.背景滚动&#x1f490; 3.管道的创建与移动&#x1f338; 4.小鸟操作&#x1f337; 5.碰撞检测&#x1f340; 6.触屏事件&#x1f339; 7.制作开始与结束面板&#x1f33b; 8.得分统计&#x1f33a; 我们先来看看接下来我们要做的效果…

vue 路由报错

在进行如下路由跳转时 const edit (index: number) > { let row: any categoryData.value[index]; router.push({ name: “commodityedit”, query: { id: row.id, name: row.name } }); }; 遇到问题如下 TypeError: Failed to fetch dynamically imported module: http…

【uni-app】第三方ui组件推荐引入的方法

ui组件推荐 1. Muse-UI Muse UI 是一套 Material Design 风格开源组件库&#xff0c;旨在快速搭建页面。它基于 Vue 2.0 开发&#xff0c;并提供了自定义主题&#xff0c;充分满足可定制化的需求。material-design-icons 是谷歌定义的一套icontypeface 是谷歌定义的一套字体…

html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)

文章目录一、效果图1.1首页1.2 模拟登录1.3 游戏资料页面1.4 商城页面二、代码2.1 首页2.2 资料页面2.3 商城页面三、链接一、效果图 1.1首页 1.2 模拟登录 1.3 游戏资料页面 1.4 商城页面 二、代码 2.1 首页 index.html <!doctype html> <html><head>&l…

JavaScript高级 |如何玩转箭头函数?

本文已收录于专栏⭐️ 《JavaScript》⭐️ 学习指南&#xff1a;箭头函数语法规则简写规则常见应用mapfilterreduce箭头函数中的this使用concatthis的查找规则完结散花参考文献箭头函数 在ES6中新增了函数的简写方式----箭头函数&#xff0c;箭头函数的出现不仅简化了大量代码…

Vue3自动引入组件,组件库

在做vue3项目中时&#xff0c;每次使用都需要先进行引入&#xff0c;用ts的还好&#xff0c;会有爆红提示&#xff0c;如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入&#xff0c;就会很浪费时间&#xff0c;偶然发现一款好用的组件可以帮助我们很好的…