Gwt-uibinder

提供：Dev Guides
移動先:案内、検索

GWT-UiBinder

前書き

UiBinderは、機能とユーザーインターフェイスのビューを分離するように設計されたフレームワークです。

  • UiBinderフレームワークを使用すると、開発者はgwtアプリケーションをHTMLページとして構築し、GWTウィジェットが全体にわたって構成されます。
  • UiBinderフレームワークは、JavaソースコードよりもXML、HTML、CSSに慣れているUIデザイナーとのコラボレーションを容易にします
  • UIBinderは、ユーザーインターフェイスを定義する宣言的な方法を提供します。
  • UIBinderは、プログラムロジックをUIから分離します。
  • UIBinderは、サーブレットに対するJSPと似ています。

UiBinderワークフロー

手順1-UI宣言XMLファイルの作成

XML/HTMLベースのユーザーインターフェイス宣言ファイルを作成します。 この例では、 Login.ui.xml ファイルを作成しました。 

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
   xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui'
   xmlns:res = 'urn:with:com.finddevguides.client.LoginResources'>
   <ui:with type = "com.finddevguides.client.LoginResources" field = "res">
   </ui:with>
   <gwt:HTMLPanel>
   ...
   </gwt:HTMLPanel>
</ui:UiBinder>

ステップ2-後でバインドするためにui：fieldを使用する

XML/HTML要素のui：field属性を使用して、後でバインドするために、XMLのUIフィールドをJAVAファイルのUIフィールドに関連付けます。 

<gwt:Label ui:field = "completionLabel1"/>
<gwt:Label ui:field = "completionLabel2"/>

ステップ3-UI XMLに対応するJavaを作成する

Compositeウィジェットを拡張して、JavaベースのXMLベースのレイアウトを作成します。 この例では Login.java ファイルを作成しました。 

package com.finddevguides.client;
   ...
public class Login extends Composite {
   ...
}

ステップ4-UiFieldアノテーションでJava UIフィールドをバインドする

*Login.java* で@UiFieldアノテーションを使用して、 *Login.ui.xml* のXMLベースのフィールドにバインドする対応するクラスメンバーを指定します。
public class Login extends Composite {
   ...
   @UiField
   Label completionLabel1;

   @UiField
   Label completionLabel2;
   ...
}

ステップ5-UiTemplateアノテーションを使用してUI XMLとJava UIをバインドする

@UiTemplateアノテーションを使用して、Javaベースのコンポーネント Login.java およびXMLベースのレイアウト Login.ui.xml をバインドするようにGWTに指示します。 

public class Login extends Composite {

   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);

  /*
 *@UiTemplate is not mandatory but allows multiple XML templates
   * to be used for the same widget.
 *Default file loaded will be <class-name>.ui.xml
   */

   @UiTemplate("Login.ui.xml")
   interface LoginUiBinder extends UiBinder<Widget, Login> {
   }
   ...
}

ステップ6-CSSファイルを作成する

外部CSSファイル* Login.css お​​よびcssスタイルに相当するJavaベースのリソース *LoginResources.java ファイルを作成します 

.blackText {
   font-family: Arial, Sans-serif;
   color: #000000;
   font-size: 11px;
   text-align: left;
}
...

ステップ7-CSSファイル用のJavaベースのリソースファイルを作成する

package com.finddevguides.client;
...
public interface LoginResources extends ClientBundle {
   public interface MyCss extends CssResource {
      String blackText();

      ...
   }

   @Source("Login.css")
   MyCss style();
}

手順8-Java UIコードファイルでCSSリソースを添付します。

Javaベースのウィジェットクラス Login.java のContructorを使用して、外部CSSファイル* Login.css *を添付します。 

public Login() {
   this.res = GWT.create(LoginResources.class);
   res.style().ensureInjected();
   initWidget(uiBinder.createAndBindUi(this));
}

UIBinderの完全な例

この例では、GWTでUIBinderの使用方法を示す簡単な手順を紹介します。 次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

Step Description
1 Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/HelloWorld.gwt.xml の内容です。 

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.finddevguides.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path ='client'/>
   <source path = 'shared'/>

</module>

以下は、変更されたスタイルシートファイル war/HelloWorld.css の内容です。 

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。 

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>UiBinder Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

次に、新しいUiBinderテンプレートと所有者クラスを作成します（ファイル→新規→UiBinder）。

GWT UiBinder Wizardステップ1

プロジェクトのクライアントパッケージを選択して、Loginという名前を付けます。 他のすべてのデフォルトのままにします。 [完了]ボタンをクリックすると、プラグインは新しいUiBinderテンプレートと所有者クラスを作成します。

GWT UiBinder Wizard Step 2 

*src/com.finddevguides/client* パッケージにLogin.cssファイルを作成し、次のコンテンツをその中に配置します
.blackText {
   font-family: Arial, Sans-serif;
   color: #000000;
   font-size: 11px;
   text-align: left;
}

.redText {
   font-family: Arial, Sans-serif;
   color: #ff0000;
   font-size: 11px;
   text-align: left;
}

.loginButton {
   border: 1px solid #3399DD;
   color: #FFFFFF;
   background: #555555;
   font-size: 11px;
   font-weight: bold;
   margin: 0 5px 0 0;
   padding: 4px 10px 5px;
   text-shadow: 0 -1px 0 #3399DD;
}

.box {
   border: 1px solid #AACCEE;
   display: block;
   font-size: 12px;
   margin: 0 0 5px;
   padding: 3px;
   width: 203px;
}

.background {
   background-color: #999999;
   border: 1px none transparent;
   color: #000000;
   font-size: 11px;
   margin-left: -8px;
   margin-top: 5px;
   padding: 6px;
}
*src/com.finddevguides/client* パッケージにLoginResources.javaファイルを作成し、次のコンテンツをその中に配置します
package com.finddevguides.client;

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface LoginResources extends ClientBundle {
  /**
 *Sample CssResource.
   */
   public interface MyCss extends CssResource {
      String blackText();

      String redText();

      String loginButton();

      String box();

      String background();
   }

   @Source("Login.css")
   MyCss style();
}
*src/com.finddevguides/client* パッケージのLogin.ui.xmlの内容を以下で置き換えます
<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
   xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui'
   xmlns:res = 'urn:with:com.finddevguides.client.LoginResources'>

   <ui:with type = "com.finddevguides.client.LoginResources" field = "res">
   </ui:with>

   <gwt:HTMLPanel>
      <div align = "center">

         <gwt:VerticalPanel res:styleName = "style.background">
            <gwt:Label text = "Login" res:styleName = "style.blackText"/>
            <gwt:TextBox ui:field="loginBox" res:styleName = "style.box"/>
            <gwt:Label text = "Password" res:styleName = "style.blackText"/>
            <gwt:PasswordTextBox ui:field = "passwordBox" res:styleName = "style.box"/>

            <gwt:HorizontalPanel verticalAlignment = "middle">
               <gwt:Button ui:field = "buttonSubmit" text="Submit"
                  res:styleName = "style.loginButton"/>
               <gwt:CheckBox ui:field = "myCheckBox"/>
               <gwt:Label ui:field = "myLabel" text = "Remember me"
                  res:styleName = "style.blackText"/>
            </gwt:HorizontalPanel>

            <gwt:Label ui:field = "completionLabel1" res:styleName = "style.blackText"/>
            <gwt:Label ui:field = "completionLabel2" res:styleName = "style.blackText"/>
         </gwt:VerticalPanel>

      </div>
   </gwt:HTMLPanel>

</ui:UiBinder>
*src/com.finddevguides/client* パッケージのLogin.javaの内容を次のように置き換えます
package com.finddevguides.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class Login extends Composite {

   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);

  /*
 *@UiTemplate is not mandatory but allows multiple XML templates
   * to be used for the same widget.
 *Default file loaded will be <class-name>.ui.xml
   */
   @UiTemplate("Login.ui.xml")
   interface LoginUiBinder extends UiBinder<Widget, Login> {
   }

   @UiField(provided = true)
   final LoginResources res;

   public Login() {
      this.res = GWT.create(LoginResources.class);
      res.style().ensureInjected();
      initWidget(uiBinder.createAndBindUi(this));
   }

   @UiField
   TextBox loginBox;

   @UiField
   TextBox passwordBox;

   @UiField
   Label completionLabel1;

   @UiField
   Label completionLabel2;

   private Boolean tooShort = false;

  /*
 *Method name is not relevant, the binding is done according to the class
   * of the parameter.
    */
   @UiHandler("buttonSubmit")
   void doClickSubmit(ClickEvent event) {
      if (!tooShort) {
         Window.alert("Login Successful!");
      } else {
         Window.alert("Login or Password is too short!");
      }
   }

   @UiHandler("loginBox")
   void handleLoginChange(ValueChangeEvent<String> event) {
      if (event.getValue().length() < 6) {
         completionLabel1.setText("Login too short (Size must be > 6)");
         tooShort = true;
      } else {
         tooShort = false;
         completionLabel1.setText("");
      }
   }

   @UiHandler("passwordBox")
   void handlePasswordChange(ValueChangeEvent<String> event) {
      if (event.getValue().length() < 6) {
         tooShort = true;
         completionLabel2.setText("Password too short (Size must be > 6)");
      } else {
         tooShort = false;
         completionLabel2.setText("");
      }
   }
}

UiBinderの使用方法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。 

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      RootPanel.get().add(new Login());
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。 すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT UiBinderデモ

「https://www.finddevguides.com/index.php?title=Gwt-uibinder&oldid=14906」から取得
Powered by MediaWiki