當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

gwt入门和进阶_GWT入门

發布時間：2023/12/3 编程问答 60 豆豆

生活随笔收集整理的這篇文章主要介紹了 gwt入门和进阶_GWT入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

gwt入門和進階

GWT是Google Web Development Kit的縮寫，可讓程序員使用Java開發Ajax Web應用程序。 GWT編譯器將Java代碼轉換為JavaScript和html代碼。 GWT應用程序稱為模塊，并且使用xml文件描述模塊，假設該模塊名稱為xml文件的“ mymodule”名稱為“ mymodule.gwt.xml”。一個模塊至少有一個入口點，它與Java程序中的main方法相同。 GWT程序代碼在HTML文件中執行，而CSS文件用于改變外觀。

現在我們對術語和內容已經很熟悉了，我們可以繼續編寫自己的GWT應用程序了。

步驟1：為Eclipse安裝GWT插件

如果您已經安裝了eclipse，只需進入“幫助”菜單，在“安裝新軟件”下，將URL設置為http://dl.google.com/eclipse/plugin/3.6 ，然后單擊“下一步”和完成安裝。

步驟2：創建一個新項目

選擇文件>新建> Web應用程序項目。輸入名稱“ com.eviac.blog.helloworld”作為項目名稱和程序包。默認情況下，它將選擇“使用Google Web Toolkit”和“使用Google App Engine”，因為我們在這里僅使用Google Web Toolkit，因此您必須取消選擇Google App Engine。

現在，eclipse將為您創建一個具有包結構的項目，如下所示。

步驟3：創建入口點

在com.eviac.blog.helloworld.client包中，創建一個名為
“ HelloWorldGwt ”

package com.eviac.blog.helloworld.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.user.client.Window; import com.google.gwt.user.client.ui.Button; import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.RootPanel; public class HelloWorldGwt implements EntryPoint { @Override public void onModuleLoad() { final Label label = new Label("Hello World GWT !!!"); final Button button = new Button("Click Here"); button.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { label.setVisible(false); button.setText("welcome back again!"); Window.alert("Welcome to GWT"); } }); RootPanel.get().add(label); RootPanel.get().add(button); } }

在com.eviac.blog.helloworld包中，創建Com_eviac_blog_helloworld.gwt.xml文件。

Com_eviac_blog_helloworld.gwt.xml

<?xml version="1.0" encoding="UTF-8"?> <module rename-to='com_eviac_blog_helloworld'>  <inherits name='com.google.gwt.user.User'/> <inherits name='com.google.gwt.user.theme.standard.Standard'/>  <entry-point class='com.eviac.blog.helloworld.client.HelloWorldGwt'/> </module>

步驟3：建立html網頁

在文件夾war內，創建Com_eviac_blog_helloworld.html文件

Com_eviac_blog_helloworld.html

<!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="Com_eviac_blog_helloworld.css"> <title>Hello World GWT</title> <script type="text/javascript" language="javascript" src="com_eviac_blog_helloworld/com_eviac_blog_helloworld.nocache.js"></script> </head> <body>  <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> <h1><center>Hello World GWT</center></h1> </body> </html>

第4步：創建web.xml文件

在文件夾war / WEB-INF內，創建一個名為web.xml的xml文件。

web.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"> <web-app>  <welcome-file-list> <welcome-file>Com_eviac_blog_helloworld.html</welcome-file> </welcome-file-list> </web-app>

步驟5：創建css文件

在打獵者內創建一個名為Com_eviac_blog_helloworld.cssCSS文件

Com_eviac_blog_helloworld.css

h1 { font-size: 2em; font-weight: bold; color: #6495ED; } .gwt-Label { color: #0000FF; font: normal 12px tahoma, arial, helvetica, sans-serif; height:3.5em; width: 10.7em; } .gwt-Button { color: #0000FF; height:3.5em; width: 10.7em; font-size: 12px; font-family: arial, sans-serif; }

好了，我們已經完成了編碼步驟，但請等待，還有一個步驟

步驟6：運行GWT應用程序

要在項目上單擊鼠標右鍵，請選擇“運行方式”->“ Web應用程序”，它將彈出一個新視圖“開發模式”，復制生成的URL。

使用此鏈接為您的Web瀏覽器安裝GWT插件。

現在，將URL粘貼到瀏覽器中，您將看到類似以下的內容，僅此而已。

現在，您知道如何構建基本的GWT應用程序，可以通過添加更多功能并使用css文件更改外觀來改進它。

參考：我們的JCG合作伙伴開始使用GWT ? EVIAC博客上的Pavithra Siriwardena。

翻譯自: https://www.javacodegeeks.com/2012/03/getting-started-with-gwt.html

gwt入門和進階

總結

以上是生活随笔為你收集整理的gwt入门和进阶_GWT入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： x86版安卓系统（x86版安卓）
下一篇： gwt格式_GWT –利弊