GWT入門例

6196 ワード
gwt
主な内容:GWTの紹介、インストール、簡単なGWTプログラムの作成
環境:JDK 1.6,GWT 2.0 and Eclipse 3.6(Helios).
詳細は、http://www.vogella.de/articles/GWT/article.html#firstgwt
1.概要
GWT(GOOGLE WEB TOOLKIT)は、JAVAを支援してAJAXアプリケーションを開発するツールです.開発者はJAVAコードを作成し、高度にすることができ、GWTコンパイラはコードをJAVASCRITTにコンパイルします.
GWTには2つのパターンがあります.
-開発モード、JAVAコードのデバッグを許可
-WEBモード、エンジニアリングがHTMLに変換されSERVERに公開できる
2.コンポーネント、アクセスポイント、HTML
GWTは、呼び出し可能なコンポーネントの集合、コンポーネント名xx、およびそのプロファイルxxとして理解することができる.gwt.xmlは、JAVAのMAINメソッドと同様にアクセスポイントを定義するために使用されます.
コンポーネントはHTMLページに関連付けられており、HTMLはホームページと呼ばれ、DIVセグメントがUIを含むコンポーネントを定義することができ、UIのコンポーネントをHTMLページ要素にマッピングすることができる.
3.スタイルCSSの応用
GWTエンジニアリングはWebページのスタイルをカスタマイズし、GWTのWIDGETはsetStyle(String s)メソッドでスタイルコンテナを割り当てることができます.
4.GWTのインストール
-オンライン更新
詳細は、http://code.google.com/intl/zh-CN/eclipse/docs/install-eclipse-3.6.html
間にはHelios-Eclipse classic 3.6がインストールされているため.0(170 MB)、中にwst(web standard tools)関連プラグインはありませんが、googleのツールパッケージはこれらのプラグインに依存しているのでupdateは失敗しました!
-zipパッケージのインストール方法を手動でダウンロード
紹介:http://code.google.com/intl/zh-CN/eclipse/docs/install-from-zip.html
  • http://download.eclipse.org/releases/helios  Install Helios > Web, XML, and Java EE Development > Eclipse Web Developer Tools.
  • googleのツールパッケージをダウンロード:http://dl.google.com/eclipse/plugin/3.6/zips/gpe-e36-latest.zip eclipseルートディレクトリのdropinsフォルダに解凍し、eclipseを再起動すればよいがwstのインストール時に更新ポイント接続がタイムアウトする.したがって、完全なwstプラグインを含むeclipseバージョンhttp://www.eclipse.org/downloads/packages/release/helios/rをダウンロードすることを考慮します.(Eclipse IDE for Java EE Developers、talend eclipseにも関連プラグインが含まれています)ダウンロードアドレス:http://download.actuatechina.com/eclipse/technology/epp/downloads/release/helios/R/eclipse-jee-helios-win32.zip googleツールパッケージをEclipseに解凍してインストールを完了します.添付:Helios紹介Heliosは39個のEclipseプロジェクトを持つ同期バージョンです.統計によると、Heliosバージョンには3300万行のコードが含まれています.これは44社からの5000名のEclipse.orgメンバー共同開発完了.一般的に、HeliosとEclipseの同期バージョンについては、同期バージョンはこれらの項目が統一されていることを示していないことを理解しておく必要があります.各項目はEclipseです.orgの独立したオープンソースプロジェクトで、自分のプロジェクトリーダーが運営し、自分のメンバーと開発計画を持っています.同期バージョンの概念は、透明で予測可能な開発サイクルを提供することを目的としています.詳細は、http://kaku.javaeye.com/blog/720452.簡単なGWTプロジェクトの新しいwebアプリケーションを作成するにはgoogle sdk http://google-web-toolkit.googlecode.com/files/gwt-2.0.4.zip解凍してsdkの位置を指定する必要があります.5.1-new webアプリケーションプロジェクトを新規作成し、「use google app engine」のチェックを外します.project Name: de.ytao.gwt.helloworld package: de.ytao.gwt.helloworld 5.2-clientとserverパッケージのすべてのファイルを削除し、clientの下でHelloGwtクラスを作成します.内容は以下の通りです.-de.ytao.を変更します.gwt.helloworldパッケージのxmlファイル:De_ytao_gwt_helloworld.gwt.xml、新しいentry point 
    h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
}

.gwt-Label {
 color: #DF0101;
 font: normal 12px tahoma, arial, helvetica, sans-serif;
 border: 1px solid #99bbe8;
 padding: 14px;
}

.gwt-Button {
 height: 5.7em;
 margin-bottom: 5px;
 padding-bottom: 3px;
 font-size: 12px;
 font-family: arial, sans-serif;
}
    5.3-コンパクトHTMLファイルDe_ytao_gwt_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="De_vogella_gwt_helloworld.css">
    <title>My First GWT applicaton</title>
    <script type="text/javascript" language="javascript" src="de_vogella_gwt_helloworld/de_vogella_gwt_helloworld.nocache.js"></script>
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    <h1>My First GWT applicaton</h1>
   
  </body>
</html>
    5.4-デフォルトのclientパッケージのentry pointクラスが変更されたため、xmlファイルは
      <!-- Default page to serve -->  <welcome-file-list>    <welcome-file>De_ytao_gwt_helloworld.html</welcome-file>  </welcome-file-list>
    5.5-run as webアプリケーションを実行し、ラベルdevelopment modeの下にURLアドレスがあり、ブラウザにコピーして貼るとWebページが表示されます.5.6-WebスタイルLabel label=new Label(「Hello GWT!!」);//label.setStyleName("my_label_for_css"); Button button = new Button("Say something"); コメントされた行を開くと、ページのスタイルを指定できます.しかし、このスタイル名はまだ何が起こっているのか分からないので、De_を削除したようです.ytao_gwt_helloworld.cssのスタイルはGWT 入门示例_第1张图片.まとめ(1)warフォルダの下に一般的なweb構造があることがわかる(2)De_ytao_gwt_helloworld.gwt.xml(3)表示と併せて動的に更新可能な
    • のJSファイルが生成されている.
    AnsibleでExcelファイルからパラメータを抽出する
    ExtJS3.1のExt.tree.TreePanelがIE 8にスクロールバーのBUGを異常表示