GWT - UiBinder

บทนำ

UiBinder เป็นเฟรมเวิร์กที่ออกแบบมาเพื่อแยกฟังก์ชันการทำงานและมุมมองของอินเทอร์เฟซผู้ใช้

เฟรมเวิร์ก UiBinder ช่วยให้นักพัฒนาสร้างแอปพลิเคชัน gwt เป็นเพจ HTML โดยมีวิดเจ็ต GWT ที่กำหนดค่าไว้ตลอด
เฟรมเวิร์ก UiBinder ช่วยให้ทำงานร่วมกันได้ง่ายขึ้นกับนักออกแบบ UI ที่สะดวกสบายกับ XML, HTML และ CSS มากกว่าซอร์สโค้ด Java
UIBinder เป็นวิธีที่เปิดเผยในการกำหนด User Interface
UIBinder แยกตรรกะของโปรแกรมออกจาก UI
UIBinder คล้ายกับที่ JSP ใช้กับ Servlets

เวิร์กโฟลว์ UiBinder

ขั้นตอนที่ 1 - สร้างไฟล์ XML Declaration UI

สร้างไฟล์ประกาศส่วนติดต่อผู้ใช้แบบ 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.tutorialspoint.client.LoginResources'>
   <ui:with type = "com.tutorialspoint.client.LoginResources" field = "res">
   </ui:with>
   <gwt:HTMLPanel>
   ...  
   </gwt:HTMLPanel>
</ui:UiBinder>

ขั้นตอนที่ 2 - ใช้ ui: field สำหรับการผูกภายหลัง

ใช้แอตทริบิวต์ ui: field ในองค์ประกอบ XML / HTML เพื่อเชื่อมโยงฟิลด์ UI ใน XML กับฟิลด์ UI ในไฟล์ JAVA สำหรับการเชื่อมโยงในภายหลัง

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

ขั้นตอนที่ 3 - สร้างคู่ Java ของ UI XML

สร้างรูปแบบตาม XML ที่ใช้ Java โดยการขยายวิดเจ็ตคอมโพสิต เราได้สร้างไฟล์Login.java ไฟล์ในตัวอย่างของเรา

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

ขั้นตอนที่ 4 - ผูกฟิลด์ Java UI ด้วยคำอธิบายประกอบ UiField

ใช้คำอธิบายประกอบ @UiField ใน Login.java เพื่อกำหนดสมาชิกคลาสคู่กันเพื่อผูกกับฟิลด์ที่ใช้ XML ใน Login.ui.xml

public class Login extends Composite {
   ...
   @UiField
   Label completionLabel1;

   @UiField
   Label completionLabel2;  
   ...
}

ขั้นตอนที่ 5 - ผูก Java UI กับ UI XML พร้อมคำอธิบายประกอบ UiTemplate

สั่งให้ GWT ผูกคอมโพเนนต์ที่ใช้ java Login.java และเค้าโครงตาม XML Login.ui.xml ใช้คำอธิบายประกอบ @UiTemplate

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 และทรัพยากรที่ใช้ Java LoginResources.java ไฟล์เทียบเท่ากับสไตล์ css

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

ขั้นตอนที่ 7 - สร้างไฟล์ทรัพยากรบน Java สำหรับไฟล์ CSS

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

      ...
   }

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

ขั้นตอนที่ 8 - แนบทรัพยากร CSS ในไฟล์ Java UI Code

แนบไฟล์ CSS ภายนอกLogin.css โดยใช้ Contructor ของคลาสวิดเจ็ตที่ใช้ Java Login.java

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

UIBinder ตัวอย่างที่สมบูรณ์

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการแสดงการใช้ UIBinder ใน GWT ทำตามขั้นตอนต่อไปนี้เพื่ออัปเดตแอปพลิเคชัน GWT ที่เราสร้างในGWT - สร้างบทแอปพลิเคชัน -

ขั้นตอน	คำอธิบาย
1	สร้างโครงการที่มีชื่อHelloWorldภายใต้แพคเกจcom.tutorialspointตามที่อธิบายไว้ในGWT - สร้างแอพลิเคชันบท
2	แก้ไขHelloWorld.gwt.xml , HelloWorld.css , HelloWorld.htmlและHelloWorld.javaตามที่อธิบายด้านล่าง เก็บไฟล์ที่เหลือไว้ไม่เปลี่ยนแปลง
3	คอมไพล์และเรียกใช้แอปพลิเคชันเพื่อตรวจสอบผลลัพธ์ของตรรกะที่ใช้งาน

ต่อไปนี้เป็นเนื้อหาของตัวอธิบายโมดูลที่แก้ไข src/com.tutorialspoint/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.tutorialspoint.client.HelloWorld'/>
  
   <!-- Specify the paths for translatable code                    -->
   <source path ='client'/>
   <source path = 'shared'/>

</module>

ต่อไปนี้เป็นเนื้อหาของไฟล์ Style Sheet ที่แก้ไข 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/HelloWorld.html.

<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)

เลือกแพ็กเกจไคลเอนต์สำหรับโครงการจากนั้นตั้งชื่อเข้าสู่ระบบ ปล่อยให้ค่าเริ่มต้นอื่น ๆ ทั้งหมด คลิกปุ่ม Finish จากนั้นปลั๊กอินจะสร้างเทมเพลต UiBinder และคลาสเจ้าของใหม่

ตอนนี้สร้างไฟล์ Login.css ในไฟล์ src/com.tutorialspoint/client แพคเกจและวางเนื้อหาต่อไปนี้ไว้ในนั้น

.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;
}

ตอนนี้สร้างไฟล์ LoginResources.java ในไฟล์ src/com.tutorialspoint/client แพคเกจและวางเนื้อหาต่อไปนี้ไว้ในนั้น

package com.tutorialspoint.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();
}

แทนที่เนื้อหาของ Login.ui.xml ใน src/com.tutorialspoint/client แพคเกจดังต่อไปนี้

<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.tutorialspoint.client.LoginResources'>
   
   <ui:with type = "com.tutorialspoint.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>

แทนที่เนื้อหาของ Login.java ใน src/com.tutorialspoint/client แพคเกจดังต่อไปนี้

package com.tutorialspoint.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("");
      }
   }
}

ให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Java src/com.tutorialspoint/HelloWorld.java ซึ่งจะสาธิตการใช้งาน UiBinder

package com.tutorialspoint.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());   
   }    
}

เมื่อคุณพร้อมกับการเปลี่ยนแปลงทั้งหมดที่ทำให้เรารวบรวมและเรียกใช้โปรแกรมประยุกต์ในโหมดการพัฒนาในขณะที่เราทำในGWT - สร้างแอพลิเคชันบท หากทุกอย่างเรียบร้อยกับแอปพลิเคชันของคุณสิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -