GWT - คู่มือฉบับย่อ

GWT คืออะไร?

Google Web Toolkit (GWT) เป็นชุดเครื่องมือสำหรับการพัฒนาเพื่อสร้าง RICH Internet Applications (RIA). นี่คือคุณสมบัติเด่นบางประการ -

  • GWT ให้ตัวเลือกนักพัฒนาในการเขียนแอปพลิเคชันฝั่งไคลเอ็นต์ใน JAVA

  • GWT รวบรวมโค้ดที่เขียนด้วย JAVA เป็นโค้ด JavaScript

  • แอปพลิเคชันที่เขียนด้วย GWT เป็นไปตามข้อกำหนดข้ามเบราว์เซอร์ GWT จะสร้างโค้ดจาวาสคริปต์ที่เหมาะสมกับแต่ละเบราว์เซอร์โดยอัตโนมัติ

  • GWT เป็นโอเพนซอร์สฟรีและใช้งานโดยนักพัฒนาหลายพันคนทั่วโลก ได้รับอนุญาตภายใต้ Apache License เวอร์ชัน 2.0

โดยรวมแล้ว GWT คือไฟล์ framework เพื่อสร้างแอปพลิเคชั่นเว็บขนาดใหญ่และมีประสิทธิภาพสูงในขณะที่ดูแลรักษาง่าย

ทำไมต้องใช้ GWT?

เมื่อใช้ Java คุณสามารถใช้ JAVA IDE เช่น Eclipse เพื่อพัฒนาแอปพลิเคชัน GWT

นักพัฒนาสามารถใช้การเติมโค้ดอัตโนมัติ / การปรับโครงสร้าง / การนำทาง / การจัดการโครงการและคุณสมบัติทั้งหมดของ IDEs GWT ซึ่งให้ความสามารถในการดีบักเต็มรูปแบบ นักพัฒนาสามารถดีบักแอปพลิเคชันฝั่งไคลเอ็นต์ได้เช่นเดียวกับ Java Application

  • GWT ให้การทำงานร่วมกับ Junit และ Maven อย่างง่ายดาย

  • อีกครั้งที่ใช้ Java GWT มีช่วงการเรียนรู้ต่ำสำหรับ Java Developers

  • GWT สร้างโค้ดจาวาสคริปต์ที่ปรับให้เหมาะสมสร้างโค้ดจาวาสคริปต์เฉพาะของเบราว์เซอร์ด้วยตัวเอง

  • GWT มีไลบรารีวิดเจ็ตให้งานส่วนใหญ่ที่จำเป็นในแอปพลิเคชัน

  • GWT สามารถขยายได้และสามารถสร้างวิดเจ็ตแบบกำหนดเองเพื่อตอบสนองความต้องการของแอปพลิเคชัน

เหนือสิ่งอื่นใดแอปพลิเคชัน GWT สามารถทำงานบนเบราว์เซอร์และสมาร์ทโฟนหลัก ๆ ทั้งหมดรวมถึงโทรศัพท์ / แท็บเล็ตที่ใช้ Android และ iOS

ข้อเสียของ GWT

แม้ว่า GWT จะมีข้อดีมากมาย แต่ก็มีข้อเสียดังต่อไปนี้ -

  • Not Indexable - หน้าเว็บที่สร้างโดย GWT จะไม่ถูกสร้างดัชนีโดยเครื่องมือค้นหาเนื่องจากแอปพลิเคชันเหล่านี้สร้างขึ้นแบบไดนามิก

  • Not Degradable - หากผู้ใช้แอปพลิเคชันของคุณปิดการใช้งาน Javascript ผู้ใช้จะเห็นหน้าพื้นฐานและไม่มีอะไรเพิ่มเติม

  • Not Designer's Friendly - GWT ไม่เหมาะสำหรับนักออกแบบเว็บที่ชอบใช้ HTML ธรรมดากับตัวยึดตำแหน่งเพื่อแทรกเนื้อหาแบบไดนามิกในเวลาต่อมา

ส่วนประกอบ GWT

กรอบงาน GWT สามารถแบ่งออกเป็นสามส่วนใหญ่ ๆ ดังต่อไปนี้ -

  • GWT Java to JavaScript compiler- นี่เป็นส่วนที่สำคัญที่สุดของ GWT ซึ่งทำให้เป็นเครื่องมือที่มีประสิทธิภาพในการสร้าง RIA คอมไพเลอร์ GWT ใช้ในการแปลโค้ดแอปพลิเคชันทั้งหมดที่เขียนใน Java เป็น JavaScript

  • JRE Emulation library- Google Web Toolkit มีไลบรารีที่เลียนแบบไลบรารีรันไทม์ Java ส่วนย่อย รายการประกอบด้วย java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util และ java.util.logging

  • GWT UI building library - ส่วนนี้ของ GWT ประกอบด้วยส่วนย่อยมากมายซึ่งรวมถึงส่วนประกอบ UI จริงการรองรับ RPC การจัดการประวัติและอื่น ๆ อีกมากมาย

GWT ยังมีเว็บเบราว์เซอร์ที่โฮสต์ GWT ซึ่งช่วยให้คุณสามารถเรียกใช้และดำเนินการแอปพลิเคชัน GWT ของคุณในโหมดโฮสต์โดยที่โค้ดของคุณจะทำงานเป็น Java ใน Java Virtual Machine โดยไม่ต้องคอมไพล์เป็น JavaScript

บทช่วยสอนนี้จะแนะนำคุณเกี่ยวกับวิธีการเตรียมสภาพแวดล้อมการพัฒนาเพื่อเริ่มงานกับ GWT Framework บทช่วยสอนนี้จะสอนวิธีตั้งค่า JDK, Tomcat และ Eclipse บนเครื่องของคุณก่อนที่คุณจะติดตั้ง GWT Framework -

ความต้องการของระบบ

GWT ต้องการ JDK 1.6 หรือสูงกว่าดังนั้นข้อกำหนดแรกสุดคือต้องติดตั้ง JDK ในเครื่องของคุณ

JDK 1.6 ขึ้นไป
หน่วยความจำ ไม่มีข้อกำหนดขั้นต่ำ
พื้นที่ดิสก์ ไม่มีข้อกำหนดขั้นต่ำ
ระบบปฏิบัติการ ไม่มีข้อกำหนดขั้นต่ำ

ทำตามขั้นตอนที่กำหนดเพื่อตั้งค่าสภาพแวดล้อมของคุณเพื่อเริ่มการพัฒนาแอปพลิเคชัน GWT

ขั้นตอนที่ 1 - ตรวจสอบการติดตั้ง Java บนเครื่องของคุณ

ตอนนี้เปิดคอนโซลและดำเนินการคำสั่ง java ต่อไปนี้

ระบบปฏิบัติการ งาน คำสั่ง
Windows เปิด Command Console c: \> java - เวอร์ชัน
Linux เปิด Command Terminal $ java - รุ่น
Mac เปิด Terminal เครื่อง: ~ joseph $ java -version

มาตรวจสอบผลลัพธ์ของระบบปฏิบัติการทั้งหมดกัน

ซีเนียร์ OS และเอาต์พุตที่สร้างขึ้น
1

Windows

เวอร์ชัน java "1.6.0_21"

Java (TM) SE Runtime Environment (สร้าง 1.6.0_21-b07)

Java HotSpot (TM) Client VM (build 17.0-b17, โหมดผสม, การแชร์)
2

Linux

เวอร์ชัน java "1.6.0_21"

Java (TM) SE Runtime Environment (สร้าง 1.6.0_21-b07)

ava HotSpot (TM) Client VM (build 17.0-b17, โหมดผสม, การแชร์)
3

Mac

เวอร์ชัน java "1.6.0_21"

Java (TM) SE Runtime Environment (สร้าง 1.6.0_21-b07)

Java HotSpot (TM) 64-Bit Server VM (build 17.0-b17, โหมดผสม, การแชร์)

ขั้นตอนที่ 2 - ตั้งค่า Java Development Kit (JDK)

หากคุณไม่ได้มีการติดตั้ง Java แล้วคุณสามารถติดตั้งซอฟท์แว Java Development Kit (SDK) จากเว็บไซต์ Java ของออราเคิล: Java SE ดาวน์โหลด คุณจะพบคำแนะนำในการติดตั้ง JDK ในไฟล์ที่ดาวน์โหลดทำตามคำแนะนำที่กำหนดเพื่อติดตั้งและกำหนดค่าการตั้งค่า สุดท้ายตั้งค่าตัวแปรสภาพแวดล้อม PATH และ JAVA_HOME เพื่ออ้างถึงไดเร็กทอรีที่มี java และ javac โดยทั่วไปคือ java_install_dir / bin และ java_install_dir ตามลำดับ

ตั้งค่า JAVA_HOMEตัวแปรสภาพแวดล้อมเพื่อชี้ไปยังตำแหน่งไดเร็กทอรีฐานที่ติดตั้ง Java บนเครื่องของคุณ ตัวอย่างเช่น

ซีเนียร์ ระบบปฏิบัติการและเอาต์พุต
1

Windows

ตั้งค่าตัวแปรสภาพแวดล้อม JAVA_HOME เป็น C: \ Program Files \ Java \ jdk1.6.0_21
2

Linux

ส่งออก JAVA_HOME = / usr / local / java-current
3

Mac

ส่งออก JAVA_HOME = / Library / Java / Home

ผนวกตำแหน่งคอมไพเลอร์ Java เข้ากับ System Path

ซีเนียร์ ระบบปฏิบัติการและเอาต์พุต
1

Windows

ต่อท้ายสตริง% JAVA_HOME% \ bin ต่อท้ายตัวแปรระบบ Path
2

Linux

ส่งออก PATH =$PATH:$JAVA_HOME / bin /
3

Mac

ไม่จำเป็นต้องใช้

หรืออีกวิธีหนึ่งถ้าคุณใช้ Integrated Development Environment (IDE) เช่น Borland JBuilder, Eclipse, IntelliJ IDEA หรือ Sun ONE Studio ให้คอมไพล์และรันโปรแกรมง่ายๆเพื่อยืนยันว่า IDE รู้ตำแหน่งที่คุณติดตั้ง Java หรือทำการตั้งค่าที่เหมาะสมตามเอกสารที่กำหนด ของ IDE

ขั้นตอนที่ 3 - ตั้งค่า Eclipse IDE

ตัวอย่างทั้งหมดในบทช่วยสอนนี้เขียนขึ้นโดยใช้ Eclipse IDE ดังนั้นฉันขอแนะนำให้คุณติดตั้ง Eclipse เวอร์ชันล่าสุดในเครื่องของคุณตามระบบปฏิบัติการของคุณ

ในการติดตั้ง Eclipse IDE ให้ดาวน์โหลดไบนารี Eclipse ล่าสุดจาก https://www.eclipse.org. เมื่อคุณดาวน์โหลดการติดตั้งแล้วให้แกะการแจกแจงไบนารีในตำแหน่งที่สะดวก ตัวอย่างเช่นใน C: \ eclipse บน windows หรือ / usr / local / eclipse บน Linux / Unix และสุดท้ายตั้งค่าตัวแปร PATH ให้เหมาะสม

Eclipse สามารถเริ่มต้นได้โดยดำเนินการคำสั่งต่อไปนี้บนเครื่อง windows หรือคุณสามารถดับเบิลคลิกที่ eclipse.exe

%C:\eclipse\eclipse.exe

Eclipse สามารถเริ่มต้นได้โดยดำเนินการคำสั่งต่อไปนี้บนเครื่อง Unix (Solaris, Linux และอื่น ๆ ) -

$/usr/local/eclipse/eclipse

หลังจากเริ่มต้นสำเร็จหากทุกอย่างเรียบร้อยดีแล้วควรแสดงผลลัพธ์ดังนี้ -

ขั้นตอนที่ 4 - ติดตั้ง GWT SDK & Plugin สำหรับ Eclipse

ทำตามคำแนะนำที่ให้ไว้ที่ลิงค์Plugin for Eclipse (รวม SDKs)เพื่อติดตั้ง GWT SDK & Plugin for Eclipse เวอร์ชันที่ติดตั้งบนเครื่องของคุณ

หลังจากตั้งค่าปลั๊กอิน GWT สำเร็จแล้วหากทุกอย่างเรียบร้อยดีควรแสดงหน้าจอต่อไปนี้ด้วย Google icon ทำเครื่องหมายด้วยสี่เหลี่ยมผืนผ้าสีแดงดังแสดงด้านล่าง -

ขั้นตอนที่ 5: ตั้งค่า Apache Tomcat

คุณสามารถดาวน์โหลด Tomcat เวอร์ชันล่าสุดได้จาก https://tomcat.apache.org/. เมื่อคุณดาวน์โหลดการติดตั้งแล้วให้แกะการแจกแจงไบนารีในตำแหน่งที่สะดวก ตัวอย่างเช่นใน C: \ apache-tomcat-6.0.33 บน windows หรือ /usr/local/apache-tomcat-6.0.33 บน Linux / Unix และตั้งค่าตัวแปรสภาพแวดล้อม CATALINA_HOME ที่ชี้ไปยังตำแหน่งการติดตั้ง

Tomcat สามารถเริ่มต้นได้โดยดำเนินการตามคำสั่งต่อไปนี้บนเครื่อง windows หรือคุณสามารถดับเบิลคลิกที่ startup.bat

%CATALINA_HOME%\bin\startup.bat
or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

หลังจากเริ่มต้นสำเร็จเว็บแอปพลิเคชันเริ่มต้นที่มาพร้อมกับ Tomcat จะพร้อมใช้งานโดยไปที่ http://localhost:8080/. หากทุกอย่างเรียบร้อยดีควรแสดงผลลัพธ์ดังนี้ -

ข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่าและการเรียกใช้ Tomcat สามารถพบได้ในเอกสารที่รวมอยู่ที่นี่เช่นเดียวกับในเว็บไซต์ Tomcat - https://tomcat.apache.org/

Tomcat สามารถหยุดได้โดยดำเนินการคำสั่งต่อไปนี้บนเครื่อง windows -

%CATALINA_HOME%\bin\shutdown
or
C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat สามารถหยุดได้โดยดำเนินการคำสั่งต่อไปนี้บนเครื่อง Unix (Solaris, Linux และอื่น ๆ ) -

$CATALINA_HOME/bin/shutdown.sh
or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

ก่อนที่เราจะเริ่มสร้างแอปพลิเคชัน "HelloWorld" จริงโดยใช้ GWT ให้เราดูว่าแอปพลิเคชัน GWT มีอะไรบ้าง -

แอปพลิเคชัน GWT ประกอบด้วยส่วนที่สำคัญสี่ส่วนต่อไปนี้ซึ่งส่วนสุดท้ายเป็นทางเลือก แต่จำเป็นต้องมีสามส่วนแรก

  • ตัวบอกโมดูล
  • ทรัพยากรสาธารณะ
  • รหัสฝั่งไคลเอ็นต์
  • รหัสฝั่งเซิร์ฟเวอร์

ตำแหน่งตัวอย่างของส่วนต่างๆของแอปพลิเคชัน gwt ทั่วไป HelloWord จะเป็นดังภาพด้านล่าง -

ชื่อ สถานที่
รากโครงการ สวัสดีชาวโลก/
ตัวบอกโมดูล src / com / tutorialspoint / HelloWorld.gwt.xml
ทรัพยากรสาธารณะ src / com / tutorialspoint / สงคราม /
รหัสฝั่งไคลเอ็นต์ src / com / tutorialspoint / ลูกค้า /
รหัสฝั่งเซิร์ฟเวอร์ src / com / tutorialspoint / เซิร์ฟเวอร์ /

ตัวบอกโมดูล

ตัวบอกโมดูลคือไฟล์คอนฟิกูเรชันในรูปแบบของ XML ซึ่งใช้เพื่อกำหนดค่าแอปพลิเคชัน GWT

นามสกุลไฟล์ตัวอธิบายโมดูลคือ * .gwt.xml โดยที่ * คือชื่อของแอปพลิเคชันและไฟล์นี้ควรอยู่ในรูทของโปรเจ็กต์

ต่อไปนี้จะเป็นตัวบอกโมดูลเริ่มต้น HelloWorld.gwt.xml สำหรับแอปพลิเคชัน HelloWorld -

<?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'/>

   <!-- specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- specify the paths for translatable code                    -->
   <source path = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

ต่อไปนี้เป็นรายละเอียดโดยย่อเกี่ยวกับส่วนต่างๆที่ใช้ในตัวอธิบายโมดูล

ซีเนียร์ โหนดและคำอธิบาย
1

<module rename-to = "helloworld">

ชื่อนี้ระบุชื่อแอปพลิเคชัน
2

<inherits name = "logical-module-name" />

สิ่งนี้จะเพิ่มโมดูล gwt อื่น ๆ ในแอปพลิเคชันเช่นเดียวกับการนำเข้าในแอปพลิเคชัน java สามารถสืบทอดโมดูลจำนวนเท่าใดก็ได้ในลักษณะนี้
3

<entry-point class = "classname" />

ระบุชื่อคลาสที่จะเริ่มโหลดแอปพลิเคชัน GWT สามารถเพิ่มคลาส entry-point จำนวนเท่าใดก็ได้และจะเรียกตามลำดับตามลำดับที่ปรากฏในไฟล์โมดูล ดังนั้นเมื่อ onModuleLoad () ของจุดเริ่มต้นแรกของคุณเสร็จสิ้นจุดเริ่มต้นถัดไปจะถูกเรียกทันที
4

<source path = "path" />

สิ่งนี้ระบุชื่อของโฟลเดอร์ซอร์สซึ่งคอมไพเลอร์ GWT จะค้นหาการคอมไพล์ซอร์ส
5

<public path = "path" />

เส้นทางสาธารณะคือสถานที่ในโปรเจ็กต์ของคุณซึ่งมีการจัดเก็บทรัพยากรแบบคงที่ที่อ้างอิงโดยโมดูล GWT ของคุณเช่น CSS หรือรูปภาพ พา ธ สาธารณะดีฟอลต์คือไดเร็กทอรีย่อยสาธารณะที่อยู่ด้านล่างซึ่งเก็บไฟล์ Module XML
6

<script src="js-url" />

ฉีดไฟล์ JavaScript ภายนอกที่อยู่ในตำแหน่งที่ระบุโดย src โดยอัตโนมัติ
7

<stylesheet src="css-url" />

ฉีดไฟล์ CSS ภายนอกที่อยู่ในตำแหน่งที่ระบุโดย src โดยอัตโนมัติ

ทรัพยากรสาธารณะ

นี่คือไฟล์ทั้งหมดที่อ้างอิงโดยโมดูล GWT ของคุณเช่นหน้าโฮสต์ HTML, CSS หรือรูปภาพ

ตำแหน่งของทรัพยากรเหล่านี้สามารถกำหนดค่าได้โดยใช้องค์ประกอบ <public path = "path" /> ในไฟล์คอนฟิกูเรชันโมดูล โดยดีฟอลต์เป็นไดเร็กทอรีย่อยสาธารณะที่อยู่ด้านล่างที่เก็บไฟล์ Module XML

เมื่อคุณคอมไพล์แอปพลิเคชันของคุณเป็น JavaScript ไฟล์ทั้งหมดที่สามารถพบได้บนพา ธ สาธารณะของคุณจะถูกคัดลอกไปยังไดเร็กทอรีเอาต์พุตของโมดูล

ทรัพยากรสาธารณะที่สำคัญที่สุดคือหน้าโฮสต์ซึ่งใช้เพื่อเรียกใช้แอปพลิเคชัน GWT จริง หน้าโฮสต์ HTML ทั่วไปสำหรับแอปพลิเคชันอาจไม่มีเนื้อหาเนื้อหา HTML ที่มองเห็นได้เลย แต่ควรรวมแอปพลิเคชัน GWT ผ่านแท็ก <script ... /> ดังนี้

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

ต่อไปนี้เป็นสไตล์ชีตตัวอย่างที่เราได้รวมไว้ในหน้าโฮสต์ของเรา -

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

รหัสฝั่งไคลเอ็นต์

นี่คือโค้ด Java จริงที่เขียนขึ้นโดยใช้ตรรกะทางธุรกิจของแอปพลิเคชันและคอมไพเลอร์ GWT แปลเป็น JavaScript ซึ่งจะทำงานในเบราว์เซอร์ในที่สุด ตำแหน่งของรีซอร์สเหล่านี้สามารถกำหนดค่าได้โดยใช้อิลิเมนต์ <source path = "path" /> ในไฟล์คอนฟิกูเรชันโมดูล

ตัวอย่างเช่น Entry Point รหัสจะถูกใช้เป็นรหัสฝั่งไคลเอ็นต์และตำแหน่งจะถูกระบุโดยใช้ <source path = "path" />

โมดูล entry-point คือชั้นเรียนใด ๆ ที่สามารถกำหนดให้ EntryPointและสามารถสร้างได้โดยไม่มีพารามิเตอร์ เมื่อโหลดโมดูลทุกคลาสของจุดเข้าใช้งานจะถูกสร้างอินสแตนซ์และEntryPoint.onModuleLoad()เรียกวิธีการ ตัวอย่างคลาส HelloWorld Entry Point จะเป็นดังนี้ -

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

รหัสฝั่งเซิร์ฟเวอร์

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

บทต่อไปจะใช้แนวคิดที่กล่าวถึงข้างต้นทั้งหมดเพื่อสร้างแอปพลิเคชัน HelloWorld โดยใช้ Eclipse IDE

เนื่องจากพลังของ GWT อยู่ใน Write in Java, Run in JavaScriptเราจะใช้ Java IDE Eclipse เพื่อสาธิตตัวอย่างของเรา

เริ่มต้นด้วยแอปพลิเคชันHelloWorldง่ายๆ-

ขั้นตอนที่ 1 - สร้างโครงการ

ขั้นตอนแรกคือการสร้าง Web Application Project อย่างง่ายโดยใช้ Eclipse IDE เรียกใช้ตัวช่วยสร้างโครงการโดยใช้ตัวเลือกGoogle Icon

> New Web Application Project.... ตอนนี้ตั้งชื่อโปรเจ็กต์ของคุณเป็นHelloWorldโดยใช้หน้าต่างวิซาร์ดดังนี้ -

ยกเลิกการเลือก Use Google App Engine เนื่องจากเราไม่ได้ใช้มันในโครงการนี้และปล่อยให้ค่าเริ่มต้นอื่น ๆ (เก็บ Generate Sample project code เลือกตัวเลือก) ดังกล่าวแล้วคลิกปุ่มเสร็จสิ้น

เมื่อสร้างโครงการของคุณสำเร็จคุณจะมีเนื้อหาต่อไปนี้ใน Project Explorer ของคุณ -

นี่คือคำอธิบายสั้น ๆ ของโฟลเดอร์ที่สำคัญทั้งหมด

ซีเนียร์ โฟลเดอร์และที่ตั้ง
1

src

ไฟล์ซอร์สโค้ด (คลาส java)

โฟลเดอร์ไคลเอ็นต์ที่มีคลาส java เฉพาะฝั่งไคลเอ็นต์ที่รับผิดชอบการแสดง UI ของไคลเอ็นต์

โฟลเดอร์เซิร์ฟเวอร์ที่มีคลาส java ฝั่งเซิร์ฟเวอร์ที่รับผิดชอบการประมวลผลฝั่งเซิร์ฟเวอร์

โฟลเดอร์ที่ใช้ร่วมกันที่มีคลาสโมเดล java เพื่อถ่ายโอนข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์และในทางกลับกัน

HelloWorld.gwt.xml ซึ่งเป็นไฟล์ตัวอธิบายโมดูลที่จำเป็นสำหรับคอมไพเลอร์ GWT เพื่อคอมไพล์โครงการ HelloWorld
2

test

ซอร์สไฟล์รหัสทดสอบ (คลาส java)

โฟลเดอร์ไคลเอนต์ที่มีคลาส java ที่รับผิดชอบในการทดสอบโค้ดฝั่งไคลเอ็นต์ gwt
3

war

นี่เป็นส่วนที่สำคัญที่สุดแสดงถึงเว็บแอปพลิเคชันที่สามารถปรับใช้งานได้จริง

WEB-INF ประกอบด้วยคลาสที่คอมไพล์ไลบรารี gwt ไลบรารี servlet

HelloWorld.css สไตล์ชีตของโครงการ

HelloWorld.html ฮอต HTML ซึ่งจะเรียกใช้ GWT UI Application

ขั้นตอนที่ 2 - แก้ไขตัวบอกโมดูล: HelloWorld.gwt.xml

ปลั๊กอิน GWT จะสร้างไฟล์ตัวอธิบายโมดูลเริ่มต้น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.  You can change       -->
   <!-- the theme of your GWT application by uncommenting          -->
   <!-- any one of the following lines.                            -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- <inherits name = 'com.google.gwt.user.theme.chrome.Chrome'/> -->
   <!-- <inherits name = 'com.google.gwt.user.theme.dark.Dark'/>     -->

   <!-- Other module inherits                                      -->

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

ขั้นตอนที่ 3 - แก้ไขสไตล์ชีต: HelloWorld.css

ปลั๊กอิน GWT จะสร้างรูปแบบเริ่มต้นไฟล์แผ่นสงคราม / 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;
}

ขั้นตอนที่ 4 - แก้ไขไฟล์โฮสต์: HelloWorld.html

ปลั๊กอิน GWT จะสร้างเริ่มต้น HTML ไฟล์โฮสต์สงคราม / 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>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

คุณสามารถสร้างไฟล์แบบคงที่ได้มากขึ้นเช่น HTML, CSS หรือรูปภาพในไดเร็กทอรีต้นทางเดียวกันหรือคุณสามารถสร้างไดเร็กทอรีย่อยเพิ่มเติมและย้ายไฟล์ในไดเร็กทอรีย่อยเหล่านั้นและกำหนดค่าไดเร็กทอรีย่อยเหล่านั้นในตัวอธิบายโมดูลของแอ็พพลิเคชัน

ขั้นตอนที่ 5 - แก้ไขจุดเข้าใช้งาน: HelloWorld.java

ปลั๊กอิน GWT จะสร้างไฟล์ Java เริ่มต้นsrc / com.tutorialspoint / HelloWorld.javaซึ่งเป็นจุดเริ่มต้นสำหรับแอปพลิเคชัน

ให้เราแก้ไขไฟล์นี้เพื่อแสดง "สวัสดีชาวโลก!"

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

คุณสามารถสร้างไฟล์ Java เพิ่มเติมในไดเร็กทอรีต้นทางเดียวกันเพื่อกำหนดจุดเข้าใช้งานหรือกำหนดรูทีนตัวช่วย

ขั้นตอนที่ 6 - รวบรวมแอปพลิเคชัน

เมื่อคุณพร้อมกับการเปลี่ยนแปลงทั้งหมดแล้วก็ถึงเวลารวบรวมโครงการ ใช้ตัวเลือกGoogle Icon

> GWT Compile Project... เพื่อเปิดกล่องโต้ตอบ GWT Compile ดังที่แสดงด้านล่าง -

เก็บค่าเริ่มต้นไว้เหมือนเดิมแล้วคลิกปุ่มคอมไพล์ หากทุกอย่างเรียบร้อยดีคุณจะเห็นเอาต์พุตต่อไปนี้ในคอนโซล Eclipse

Compiling module com.tutorialspoint.HelloWorld
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into C:\workspace\HelloWorld\war\helloworld
   Link succeeded
   Compilation succeeded -- 33.029s

ขั้นตอนที่ 7 - เรียกใช้แอปพลิเคชัน

ตอนนี้คลิกที่

เรียกใช้เมนูแอปพลิเคชันแล้วเลือกHelloWorld แอปพลิเคชันเพื่อเรียกใช้แอปพลิเคชัน

หากทุกอย่างเรียบร้อยดีคุณต้องเห็น GWT Development Mode ที่ใช้งานอยู่ใน Eclipse ที่มี URL ดังที่แสดงด้านล่าง ดับเบิลคลิกที่ URL เพื่อเปิดแอปพลิเคชัน GWT

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

หากคุณตั้งค่าปลั๊กอิน GWT สำหรับเบราว์เซอร์ของคุณแล้วคุณควรจะเห็นผลลัพธ์ต่อไปนี้

ยินดีด้วย! คุณได้ติดตั้งแอปพลิเคชันแรกของคุณโดยใช้ Google Web Toolkit (GWT)

บทช่วยสอนนี้จะอธิบายวิธีสร้างแอปพลิเคชัน "war" ไฟล์และวิธีปรับใช้ในรูท Apache Tomcat Websever

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

ให้เรามี Eclipse IDE ที่ใช้งานได้พร้อมกับปลั๊ก GWT และทำตามขั้นตอนต่อไปนี้เพื่อสร้างแอปพลิเคชัน GWT -

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

ต่อไปนี้เป็นเนื้อหาของตัวอธิบายโมดูลที่แก้ไข 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'/>

   <!-- 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>Hello World</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

ฉันแก้ไข HTML เล็กน้อยจากตัวอย่างก่อนหน้านี้ ที่นี่ฉันสร้างตัวยึดตำแหน่ง <div> ... </div> ซึ่งเราจะแทรกเนื้อหาบางส่วนโดยใช้คลาส java จุดเริ่มต้นของเรา ดังนั้นให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Javasrc/com.tutorialspoint/HelloWorld.java.

package com.tutorialspoint.client;

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

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      HTML html = new HTML("<p>Welcome to GWT application</p>");
      
      RootPanel.get("gwtContainer").add(html);
   }
}

ที่นี่เราสร้างบน HTML พื้นฐานที่กว้างที่สุดและเพิ่มไว้ในแท็ก div ที่มี id = "gwtContainer" เราจะศึกษาวิดเจ็ต GWT ต่างๆในบทต่อ ๆ ไป

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

สร้างไฟล์ WAR

ตอนนี้แอปพลิเคชันของเราทำงานได้ดีและเราพร้อมที่จะส่งออกเป็นไฟล์สงคราม

ทำตามขั้นตอนต่อไปนี้ -

  • เข้าไปในโครงการของคุณ war ไดเรกทอรี C:\workspace\HelloWorld\war

  • เลือกไฟล์และโฟลเดอร์ทั้งหมดที่มีอยู่ในไดเร็กทอรี war

  • zip ไฟล์ทั้งหมดที่เลือกและโฟลเดอร์ในไฟล์ที่เรียกว่าHelloWorld.zip

  • เปลี่ยนชื่อHelloWorld.zipเพื่อHelloWorld.war

ปรับใช้ไฟล์ WAR

  • หยุดเซิร์ฟเวอร์ Tomcat

  • คัดลอกไฟล์HelloWorld.warไปที่tomcat installation directory > webapps folder.

  • เริ่มเซิร์ฟเวอร์ Tomcat

  • ดูในไดเรกทอรี webapps ควรมีโฟลเดอร์ helloworld ได้สร้างขึ้น

  • ขณะนี้ HelloWorld.war ถูกปรับใช้ในรูท Tomcat Webserver เรียบร้อยแล้ว

เรียกใช้แอปพลิเคชัน

ป้อน url ในเว็บเบราว์เซอร์: http://localhost:8080/HelloWorld เพื่อเปิดแอปพลิเคชัน

ชื่อเซิร์ฟเวอร์ (localhost) และพอร์ต (8080) อาจแตกต่างกันไปตามการกำหนดค่า tomcat ของคุณ

วิดเจ็ต GWT ใช้สไตล์ชีตแบบเรียงซ้อน (CSS) สำหรับการจัดรูปแบบภาพ โดยค่าเริ่มต้นชื่อคลาสสำหรับแต่ละองค์ประกอบคือgwt-<classname>.

ยกตัวอย่างเช่นปุ่มเครื่องมือที่มีรูปแบบเริ่มต้นของGWT ปุ่มและช่องทางเดียวกัน widgest มีสไตล์เริ่มต้นของGWT-กล่องข้อความ

เพื่อให้ปุ่มและกล่องข้อความทั้งหมดมีแบบอักษรที่ใหญ่ขึ้นคุณสามารถใส่กฎต่อไปนี้ในไฟล์ CSS ของแอปพลิเคชันของคุณ

.gwt-Button  { font-size: 150%; }

.gwt-TextBox { font-size: 150%; }

ตามค่าเริ่มต้นทั้งเบราว์เซอร์และ GWT จะไม่สร้างค่าเริ่มต้น idแอตทริบิวต์สำหรับวิดเจ็ต คุณต้องสร้างรหัสเฉพาะสำหรับองค์ประกอบที่คุณสามารถใช้ใน CSS ได้อย่างชัดเจน เพื่อให้ปุ่มเฉพาะที่มี idmy-button-id แบบอักษรที่ใหญ่ขึ้นคุณสามารถวางกฎต่อไปนี้ในไฟล์ CSS ของแอปพลิเคชันของคุณ -

#my-button-id { font-size: 150%; }

ในการตั้งค่า id สำหรับวิดเจ็ต GWT ให้ดึงข้อมูล DOM Element จากนั้นตั้งค่า id แอตทริบิวต์ดังนี้ -

Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

CSS Styling API

มี API มากมายที่สามารถใช้งานการตั้งค่า CSS สำหรับวิดเจ็ต GWT ใด ๆ ต่อไปนี้เป็น API ที่สำคัญบางส่วนซึ่งจะช่วยคุณในการเขียนโปรแกรมเว็บในแต่ละวันโดยใช้ GWT -

ซีเนียร์ API และคำอธิบาย
1

public void setStyleName(java.lang.String style)

วิธีการนี้จะล้างรูปแบบที่มีอยู่และการตั้งค่ารูปแบบวิดเจ็ชั้น CSS ใหม่ให้ใช้รูปแบบ
2

public void addStyleName(java.lang.String style)

วิธีนี้จะเพิ่มชื่อสไตล์รองหรือขึ้นอยู่กับวิดเจ็ต ชื่อสไตล์รองเป็นชื่อสไตล์เพิ่มเติมนั่นคือดังนั้นหากมีการใช้ชื่อสไตล์ก่อนหน้านี้จะถูกเก็บไว้
3

public void removeStyleName(java.lang.String style)

วิธีนี้จะลบสไตล์ที่กำหนดออกจากวิดเจ็ตและปล่อยให้คนอื่น ๆ เชื่อมโยงกับวิดเจ็ต
4

public java.lang.String getStyleName()

วิธีนี้รับชื่อสไตล์ของอ็อบเจ็กต์ทั้งหมดเป็นรายการที่คั่นด้วยช่องว่าง
5

public void setStylePrimaryName(java.lang.String style)

วิธีนี้ตั้งชื่อสไตล์หลักของอ็อบเจ็กต์และอัพเดตชื่อสไตล์ที่ขึ้นต่อกันทั้งหมด

ตัวอย่างเช่นให้กำหนดรูปแบบใหม่สองแบบซึ่งเราจะนำไปใช้กับข้อความ -

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

.gwt-Red-Text { 
   color:red;
}

ตอนนี้คุณสามารถใช้setStyleName (สไตล์)เพื่อเปลี่ยนการตั้งค่าเริ่มต้นเป็นการตั้งค่าใหม่ หลังจากใช้กฎด้านล่างแบบอักษรของข้อความจะมีขนาดใหญ่

txtWidget.setStyleName("gwt-Big-Text");

เราสามารถใช้กฎรอง CSS บนวิดเจ็ตเดียวกันเพื่อเปลี่ยนสีได้ดังนี้ -

txtWidget.addStyleName("gwt-Red-Text");

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

txtWidget.removeStyleName("gwt-Big-Text");

รูปแบบหลักและรอง

ตามค่าเริ่มต้นชื่อสไตล์หลักของวิดเจ็ตจะเป็นชื่อสไตล์ดีฟอลต์สำหรับคลาสวิดเจ็ตเช่นgwt-Buttonสำหรับวิดเจ็ต Button เมื่อเราเพิ่มและลบชื่อสไตล์โดยใช้เมธอด AddStyleName () สไตล์เหล่านั้นเรียกว่าสไตล์รอง

ลักษณะสุดท้ายของวิดเจ็ตจะพิจารณาจากผลรวมของสไตล์รองทั้งหมดที่เพิ่มเข้ามาบวกกับสไตล์หลัก คุณตั้งค่าสไตล์หลักของวิดเจ็ตด้วยเมธอดsetStylePrimaryName (String) เพื่อเป็นตัวอย่างสมมติว่าเรามีวิดเจ็ต Label ในไฟล์ CSS ของเราเราได้กำหนดกฎต่อไปนี้ -

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

สมมติว่าเราต้องการให้วิดเจ็ตป้ายกำกับเฉพาะแสดงข้อความสีน้ำเงินเสมอและในบางกรณีให้ใช้ฟอนต์ตัวหนาที่ใหญ่กว่าเพื่อเพิ่มความสำคัญ

เราสามารถทำสิ่งนี้ได้ -

// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...

// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...

// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");

การเชื่อมโยงไฟล์ CSS

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

  • ใช้แท็ก <link> ในหน้าโฮสต์ HTML

  • ใช้อิลิเมนต์ <stylesheet> ในไฟล์ XML ของโมดูล

  • การใช้ไฟล์ CssResource อยู่ภายในไฟล์ ClientBundle.

  • การใช้องค์ประกอบ <ui: style> แบบอินไลน์ในไฟล์ UiBinder แม่แบบ

ตัวอย่าง GWT CSS

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการใช้กฎ CSS ที่แตกต่างกันกับ GWT ที่กว้างที่สุดของคุณ ให้เรามี Eclipse IDE ที่ใช้งานได้พร้อมกับปลั๊ก 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'/>

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

.gwt-Button { 
   font-size: 150%; 
   font-weight: bold;
   width:100px;
   height:100px;
}

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

ต่อไปนี้เป็นเนื้อหาของไฟล์โฮสต์ 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>
      <div id = "mytext"><h1>Hello, World!</h1></div>
      <div id = "gwtGreenButton"></div>
      <div id = "gwtRedButton"></div>
   </body>
</html>

ให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Java src/com.tutorialspoint/HelloWorld.java ซึ่งจะดูแลการเพิ่มสองปุ่มใน HTML และจะใช้สไตล์ CSS ที่กำหนดเอง

package com.tutorialspoint.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.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
     
   // add button to change font to big when clicked.
   Button Btn1 = new Button("Big Text");
   Btn1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Big-Text");
      }
   });

   // add button to change font to small when clicked.
   Button Btn2 = new Button("Small Text");
   Btn2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Small-Text");
      }
   });

   RootPanel.get("gwtGreenButton").add(Btn1);
   RootPanel.get("gwtRedButton").add(Btn2);
   }
}

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

ตอนนี้ลองคลิกที่ปุ่มสองปุ่มที่ปรากฏขึ้นและสังเกต "สวัสดีชาวโลก!" ข้อความที่เปลี่ยนแบบอักษรไปเรื่อย ๆ เมื่อคลิกที่ปุ่มสองปุ่ม

อินเทอร์เฟซผู้ใช้ทุกคนพิจารณาสามประเด็นหลักดังต่อไปนี้ -

  • UI elements- สิ่งเหล่านี้เป็นองค์ประกอบภาพหลักที่ผู้ใช้เห็นและโต้ตอบในที่สุด GWT มีรายการองค์ประกอบที่ใช้กันอย่างแพร่หลายและองค์ประกอบทั่วไปที่แตกต่างกันไปตั้งแต่พื้นฐานไปจนถึงแบบซับซ้อนซึ่งเราจะกล่าวถึงในบทช่วยสอนนี้

  • Layouts- พวกเขากำหนดวิธีการจัดระเบียบองค์ประกอบ UI บนหน้าจอและให้รูปลักษณ์สุดท้ายของ GUI (อินเทอร์เฟซผู้ใช้แบบกราฟิก) ส่วนนี้จะกล่าวถึงในบทเค้าโครง

  • Behavior- นี่คือเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้โต้ตอบกับองค์ประกอบ UI ส่วนนี้จะครอบคลุมในบทการจัดการเหตุการณ์

องค์ประกอบ UI ของ GWT

ไลบรารี GWT จัดเตรียมคลาสในลำดับชั้นของคลาสที่กำหนดไว้อย่างดีเพื่อสร้างอินเทอร์เฟซผู้ใช้บนเว็บที่ซับซ้อน คลาสทั้งหมดในลำดับชั้นของคอมโพเนนต์นี้ได้รับมาจากUIObject คลาสฐานดังแสดงด้านล่าง -

วิดเจ็ต UI พื้นฐานทุกตัวจะสืบทอดคุณสมบัติจากคลาสวิดเจ็ตซึ่งจะสืบทอดคุณสมบัติจาก UIObject ต้นไม้และเมนูจะครอบคลุมในบทช่วยสอนวิดเจ็ตที่ซับซ้อน

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 คลาส GWT UIObject

วิดเจ็ตนี้มีข้อความซึ่งไม่ได้ตีความว่าเป็น HTML โดยใช้องค์ประกอบ <div> ทำให้แสดงพร้อมกับเลย์เอาต์บล็อก
2 คลาสวิดเจ็ต GWT

วิดเจ็ตนี้สามารถมีข้อความ HTML และแสดงเนื้อหา html โดยใช้องค์ประกอบ <div> ทำให้แสดงด้วยรูปแบบบล็อก

วิดเจ็ตพื้นฐาน

ต่อไปนี้เป็นวิดเจ็ตพื้นฐานที่สำคัญบางส่วน-

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 ฉลาก

วิดเจ็ตนี้มีข้อความซึ่งไม่ได้ตีความว่าเป็น HTML โดยใช้องค์ประกอบ <div> ทำให้แสดงพร้อมกับเลย์เอาต์บล็อก
2 HTML

วิดเจ็ตนี้สามารถมีข้อความ HTML และแสดงเนื้อหา html โดยใช้องค์ประกอบ <div> ทำให้แสดงด้วยรูปแบบบล็อก
3 ภาพ

วิดเจ็ตนี้แสดงภาพที่ URL ที่กำหนด
4 สมอ

วิดเจ็ตนี้แสดงถึงองค์ประกอบ <a> ที่เรียบง่าย

วิดเจ็ตแบบฟอร์มอนุญาตให้ผู้ใช้ป้อนข้อมูลและจัดเตรียมความสามารถในการโต้ตอบกับแอ็พพลิเคชัน วิดเจ็ต Form ทุกตัวจะสืบทอดคุณสมบัติจากคลาสวิดเจ็ตซึ่งจะสืบทอดคุณสมบัติจากคลาส UIObject และ Wigdet

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 คลาส GWT UIObject

วิดเจ็ตนี้มีข้อความซึ่งไม่ได้ตีความว่าเป็น HTML โดยใช้องค์ประกอบ <div> ทำให้แสดงพร้อมกับเลย์เอาต์บล็อก
2 คลาสวิดเจ็ต GWT

วิดเจ็ตนี้สามารถมีข้อความ HTML และแสดงเนื้อหา html โดยใช้องค์ประกอบ <div> ทำให้แสดงด้วยรูปแบบบล็อก

แบบฟอร์มวิดเจ็ต

ต่อไปนี้เป็นวิดเจ็ตฟอร์มที่สำคัญบางส่วน-

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 ปุ่ม

วิดเจ็ตนี้แสดงถึงปุ่มกดมาตรฐาน
2 PushButton

วิดเจ็ตนี้แสดงถึงปุ่มกดปกติพร้อมสไตล์ที่กำหนดเอง
3 ToggleButton

วิดเจ็ตนี้แสดงถึงปุ่มที่มีสไตล์ทันสมัยซึ่งช่วยให้ผู้ใช้สามารถสลับระหว่างสถานะขึ้นและลงได้
4 CheckBox

วิดเจ็ตนี้แสดงถึงวิดเจ็ตเช็กบ็อกซ์มาตรฐาน คลาสนี้ยังทำหน้าที่เป็นคลาสพื้นฐานสำหรับ RadioButton
5 RadioButton

วิดเจ็ตนี้แสดงถึงวิดเจ็ตปุ่มตัวเลือกแบบพิเศษร่วมกัน
6 ListBox

วิดเจ็ตนี้แสดงรายการตัวเลือกสำหรับผู้ใช้ไม่ว่าจะเป็นกล่องรายการหรือเป็นรายการแบบหล่นลง
7 SuggestBox

วิดเจ็ตนี้แสดงถึงกล่องข้อความหรือพื้นที่ข้อความซึ่งแสดงชุดการเลือกที่กำหนดไว้ล่วงหน้าซึ่งตรงกับข้อมูลที่ผู้ใช้ป้อน SuggestBox แต่ละรายการเชื่อมโยงกับ SuggestOracle เดียว SuggestOracle ใช้เพื่อจัดเตรียมชุดของการเลือกที่กำหนดสตริงการสืบค้นเฉพาะ
8 กล่องข้อความ

วิดเจ็ตนี้แสดงถึงกล่องข้อความบรรทัดเดียว
9 PasswordTextBox

วิดเจ็ตนี้แสดงถึงกล่องข้อความที่ปิดบังอินพุตเพื่อป้องกันการดักฟัง ..
10 TextArea

วิดเจ็ตนี้แสดงถึงกล่องข้อความที่อนุญาตให้ป้อนข้อความหลายบรรทัด
11 RichTextArea

วิดเจ็ตนี้แสดงถึงโปรแกรมแก้ไข Rich Text ที่ช่วยให้มีสไตล์และการจัดรูปแบบที่ซับซ้อน
12 อัปโหลดไฟล์

วิดเจ็ตนี้รวมองค์ประกอบ HTML <input type = 'file'>
13 ซ่อนอยู่

วิดเจ็ตนี้รีเซ็ตฟิลด์ที่ซ่อนอยู่ในรูปแบบ HTML

"วิดเจ็ตที่ซับซ้อน" ช่วยให้ผู้ใช้สามารถโต้ตอบขั้นสูงกับแอปพลิเคชันได้ วิดเจ็ตที่ซับซ้อนทุกตัวจะสืบทอดคุณสมบัติจากคลาสวิดเจ็ตซึ่งจะสืบทอดคุณสมบัติจาก UIObject

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 คลาส GWT UIObject

วิดเจ็ตนี้มีข้อความซึ่งไม่ได้ตีความว่าเป็น HTML โดยใช้องค์ประกอบ <div> ทำให้แสดงพร้อมกับเลย์เอาต์บล็อก
2 คลาสวิดเจ็ต GWT

วิดเจ็ตนี้สามารถมีข้อความ HTML และแสดงเนื้อหา html โดยใช้องค์ประกอบ <div> ทำให้แสดงด้วยรูปแบบบล็อก

วิดเจ็ตที่ซับซ้อน

ต่อไปนี้เป็นวิดเจ็ตที่ซับซ้อนที่สำคัญบางส่วน -

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 ต้นไม้

วิดเจ็ตนี้แสดงวิดเจ็ตแผนผังลำดับชั้นมาตรฐาน แผนภูมิประกอบด้วยลำดับชั้นของ TreeItems ที่ผู้ใช้สามารถเปิดปิดและเลือกได้
2 แถบเมนู

วิดเจ็ตนี้แสดงถึงวิดเจ็ตแถบเมนูมาตรฐาน แถบเมนูสามารถมีรายการเมนูกี่รายการซึ่งแต่ละรายการสามารถเริ่มคำสั่งหรือเปิดแถบเมนูแบบเรียงซ้อน
3 เลือกวันที่

วิดเจ็ตนี้แสดงถึงเครื่องมือเลือกวันที่ GWT มาตรฐาน
4 CellTree

วิดเจ็ตนี้แสดงถึงมุมมองของต้นไม้ วิดเจ็ตนี้จะทำงานในโหมดมาตรฐานเท่านั้นซึ่งกำหนดให้เพจ HTML ที่รันมีการประกาศ <! DOCTYPE> อย่างชัดเจน
5 CellList

วิดเจ็ตนี้แสดงรายการคอลัมน์เดียวของเซลล์
6 CellTable

วิดเจ็ตนี้แสดงถึงมุมมองแบบตารางที่รองรับการเพจและคอลัมน์
7 CellBrowser

วิดเจ็ตนี้แสดงถึงไฟล์ browsableมุมมองของต้นไม้ที่สามารถเปิดได้เพียงโหนดเดียวต่อระดับในคราวเดียว วิดเจ็ตนี้จะทำงานในโหมดมาตรฐานเท่านั้นซึ่งกำหนดให้เพจ HTML ที่รันมีการประกาศ <! DOCTYPE> อย่างชัดเจน

แผงเค้าโครงสามารถมีวิดเจ็ตอื่น ๆ แผงควบคุมเหล่านี้ควบคุมวิธีแสดงวิดเจ็ตบนอินเทอร์เฟซผู้ใช้ วิดเจ็ต Panel ทุกตัวจะสืบทอดคุณสมบัติจากคลาสพาเนลซึ่งจะสืบทอดคุณสมบัติจากคลาสวิดเจ็ตและซึ่งจะสืบทอดคุณสมบัติจากคลาส UIObject

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 คลาส GWT UIObject

วิดเจ็ตนี้มีข้อความซึ่งไม่ได้ตีความว่าเป็น HTML โดยใช้องค์ประกอบ <div> ทำให้แสดงพร้อมกับเลย์เอาต์บล็อก
2 คลาสวิดเจ็ต GWT

วิดเจ็ตนี้สามารถมีข้อความ HTML และแสดงเนื้อหา html โดยใช้องค์ประกอบ <div> ทำให้แสดงด้วยรูปแบบบล็อก
3 คลาสแผง GWT

นี่คือคลาสพื้นฐานนามธรรมสำหรับพาเนลทั้งหมดซึ่งเป็นวิดเจ็ตที่สามารถมีวิดเจ็ตอื่นได้

แผงเค้าโครง

ต่อไปนี้เป็นแผงเค้าโครงที่สำคัญบางส่วน-

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 FlowPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่จัดรูปแบบวิดเจ็ตลูกโดยใช้พฤติกรรมการจัดวาง HTML ดีฟอลต์
2 HorizontalPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่วางวิดเจ็ตทั้งหมดในคอลัมน์แนวนอนเดียว
3 VerticalPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่วางวิดเจ็ตทั้งหมดในคอลัมน์แนวตั้งเดียว
4 HorizontalSplitPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่จัดเรียงวิดเจ็ตสองวิดเจ็ตในแถวแนวนอนเดียวและอนุญาตให้ผู้ใช้เปลี่ยนสัดส่วนของความกว้างที่ทุ่มเทให้กับแต่ละวิดเจ็ตจากสองวิดเจ็ต วิดเจ็ตที่อยู่ใน HorizontalSplitPanel จะถูกตกแต่งโดยอัตโนมัติด้วยแถบเลื่อนเมื่อจำเป็น
5 VerticalSplitPanel

วิดเจ็ตนี้แสดงถึงพาเนล A ที่จัดเรียงวิดเจ็ตสองวิดเจ็ตในคอลัมน์แนวตั้งเดียวและอนุญาตให้ผู้ใช้เปลี่ยนสัดส่วนของความสูงที่ทุ่มเทให้กับแต่ละวิดเจ็ต วิดเจ็ตที่อยู่ภายใน VertialSplitPanel จะถูกตกแต่งโดยอัตโนมัติด้วยแถบเลื่อนเมื่อจำเป็น
6 FlexTable

วิดเจ็ตนี้แสดงถึงตารางที่ยืดหยุ่นซึ่งสร้างเซลล์ตามความต้องการ สามารถเป็นแบบหยักได้ (นั่นคือแต่ละแถวสามารถมีจำนวนเซลล์ที่แตกต่างกันได้) และแต่ละเซลล์สามารถกำหนดให้ขยายหลายแถวหรือคอลัมน์ได้
7 กริด

วิดเจ็ตนี้แสดงถึงตารางสี่เหลี่ยมที่สามารถมีข้อความ html หรือวิดเจ็ตลูกภายในเซลล์ได้ ต้องมีการปรับขนาดอย่างชัดเจนเป็นจำนวนแถวและคอลัมน์ที่ต้องการ
8 DeckPanel

แผงควบคุมที่แสดงวิดเจ็ตลูกทั้งหมดใน 'เด็ค' ซึ่งสามารถมองเห็นได้ครั้งละหนึ่งรายการเท่านั้น ใช้โดย TabPanel
9 DockPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่วางวิดเจ็ตลูก "เชื่อมต่อ" ที่ขอบด้านนอกและอนุญาตให้วิดเจ็ตสุดท้ายใช้พื้นที่ที่เหลืออยู่ตรงกลาง
10 HTMLPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่มี HTML และสามารถแนบวิดเจ็ตลูกเข้ากับองค์ประกอบที่ระบุภายใน HTML นั้น
11 TabPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่แสดงถึงชุดเพจแบบแท็บซึ่งแต่ละเพจมีวิดเจ็ตอื่น วิดเจ็ตลูกจะแสดงเมื่อผู้ใช้เลือกแท็บต่างๆที่เกี่ยวข้อง แท็บสามารถมี HTML ที่กำหนดเองได้
12 คอมโพสิต

วิดเจ็ตนี้แสดงถึงวิดเจ็ตประเภทหนึ่งที่สามารถรวมวิดเจ็ตอื่นโดยซ่อนวิธีการของวิดเจ็ตที่ถูกรวมไว้ เมื่อเพิ่มลงในพาเนลคอมโพสิตจะทำงานเหมือนกับว่ามีการเพิ่มวิดเจ็ตที่ห่อไว้
13 SimplePanel

วิดเจ็ตนี้แสดงถึงคลาสฐานสำหรับพาเนลที่มีวิดเจ็ตเดียว
14 ScrollPanel

วิดเจ็ตนี้แสดงถึงพาเนลง่ายๆที่รวมเนื้อหาไว้ในพื้นที่ที่เลื่อนได้
15 FocusPanel

วิดเจ็ตนี้แสดงถึงแผงควบคุมแบบเรียบง่ายที่ทำให้เนื้อหาสามารถโฟกัสได้และเพิ่มความสามารถในการจับเหตุการณ์ของเมาส์และคีย์บอร์ด
16 FormPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่รวมเนื้อหาในองค์ประกอบ HTML <FORM>
17 PopupPanel

วิดเจ็ตนี้แสดงถึงพาเนลที่สามารถ pop upเหนือวิดเจ็ตอื่น ๆ มันซ้อนทับพื้นที่ไคลเอนต์ของเบราว์เซอร์ (และป๊อปอัปที่สร้างไว้ก่อนหน้านี้)
18 DialogBox

วิดเจ็ตนี้แสดงถึงรูปแบบของป๊อปอัปที่มีพื้นที่คำอธิบายภาพอยู่ด้านบนและผู้ใช้สามารถลากได้ ไม่เหมือนกับ PopupPanel การเรียกใช้ PopupPanel.setWidth (String) และ PopupPanel.setHeight (String) จะกำหนดความกว้างและความสูงของกล่องโต้ตอบเองแม้ว่าจะยังไม่ได้เพิ่มวิดเจ็ตก็ตาม

GWT มีโมเดลตัวจัดการเหตุการณ์ที่คล้ายกับ Java AWT หรือ SWING User Interface frameworks

  • อินเทอร์เฟซสำหรับผู้ฟังกำหนดวิธีการอย่างน้อยหนึ่งวิธีที่วิดเจ็ตเรียกใช้เพื่อประกาศเหตุการณ์ GWT แสดงรายการอินเทอร์เฟซที่เกี่ยวข้องกับเหตุการณ์ต่างๆที่เป็นไปได้

  • คลาสที่ต้องการรับเหตุการณ์ประเภทใดประเภทหนึ่งจะใช้อินเทอร์เฟซตัวจัดการที่เกี่ยวข้องจากนั้นส่งการอ้างอิงถึงตัวเองไปยังวิดเจ็ตเพื่อสมัครสมาชิกชุดของเหตุการณ์

ตัวอย่างเช่นไฟล์ Button ชั้นเผยแพร่ click eventsดังนั้นคุณจะต้องเขียนคลาสเพื่อใช้ClickHandlerเพื่อจัดการclick เหตุการณ์.

อินเทอร์เฟซตัวจัดการเหตุการณ์

ตัวจัดการเหตุการณ์ GWT ทั้งหมดได้รับการขยายจากอินเทอร์เฟซEventHandlerและแต่ละตัวจัดการมีเพียงวิธีเดียวที่มีอาร์กิวเมนต์เดียว อาร์กิวเมนต์นี้เป็นวัตถุประเภทเหตุการณ์ที่เกี่ยวข้องเสมอ แต่ละeventวัตถุมีหลายวิธีในการจัดการกับวัตถุเหตุการณ์ที่ส่งผ่าน ตัวอย่างเช่นเหตุการณ์คลิกคุณจะต้องเขียนตัวจัดการของคุณดังนี้ -

/**
 * create a custom click handler which will call 
 * onClick method when button is clicked.
 */
public class MyClickHandler implements ClickHandler {
   @Override
   public void onClick(ClickEvent event) {
      Window.alert("Hello World!");
   }
}

ตอนนี้ชั้นเรียนใดต้องการรับเหตุการณ์คลิกจะโทร addClickHandler() เพื่อลงทะเบียนตัวจัดการเหตุการณ์ดังนี้ -

/**
 * create button and attach click handler
 */
Button button = new Button("Click Me!");
button.addClickHandler(new MyClickHandler());

แต่ละวิดเจ็ตที่รองรับประเภทเหตุการณ์จะมีวิธีการเพิ่ม HandlerRegistration แบบฟอร์มFooตัวจัดการ (FooEvent) ที่ไหน Foo คือเหตุการณ์จริงเช่น Click, Error, KeyPress เป็นต้น

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

ซีเนียร์ อินเทอร์เฟซเหตุการณ์ วิธีการและคำอธิบายเหตุการณ์
1 ก่อนตัวจัดการการเลือก <I>

void on Before Selection (Before Selection Event<I> event);

เรียกว่าเมื่อ BeforeSelectionEvent เริ่มทำงาน
2 BlurHandler

void on Blur(Blur Event event);

เรียกว่าเมื่อเกิดเหตุการณ์เบลอ
3 ChangeHandler

void on Change(ChangeEvent event);

เรียกว่าเมื่อเหตุการณ์การเปลี่ยนแปลงเริ่มทำงาน
4 ClickHandler

void on Click(ClickEvent event);

เรียกเมื่อเหตุการณ์คลิกเนทีฟเริ่มทำงาน
5 ปิดตัวจัดการ <T>

void on Close(CloseEvent<T> event);

เรียกเมื่อ CloseEvent เริ่มทำงาน
6 ตัวจัดการเมนูบริบท

void on Context Menu(Context Menu Event event);

เรียกว่าเมื่อเหตุการณ์เมนูบริบทดั้งเดิมเริ่มทำงาน
7 Double Click Handler

void on Double Click(Double Click Event event);

เรียกว่าเมื่อเหตุการณ์ดับเบิลคลิกเริ่มทำงาน
8 ตัวจัดการข้อผิดพลาด

void on Error(Error Event event);

เรียกเมื่อเกิดเหตุการณ์ข้อผิดพลาด
9 ตัวจัดการโฟกัส

void on Focus(Focus Event event);

เรียกว่าเมื่อโฟกัสเหตุการณ์ถูกยิง
10 แผงแบบฟอร์มส่งตัวจัดการที่สมบูรณ์

void on Submit Complete(Form Panel.Submit Complete Event event);

เริ่มทำงานเมื่อส่งแบบฟอร์มสำเร็จ
11 FormPanel.SubmitHandler

void on Submit(Form Panel.Submit Event event);

เริ่มทำงานเมื่อส่งแบบฟอร์ม
12 ตัวจัดการคีย์ลง

void on Key Down(Key Down Event event);

เรียกว่าเมื่อ KeyDownEvent เริ่มทำงาน
13 แป้นกดที่จัดการ

void on KeyPress(KeyPressEvent event);

เรียกว่าเมื่อ KeyPressEvent เริ่มทำงาน
14 KeyUpHandler

void on KeyUp(KeyUpEvent event);

เรียกว่าเมื่อ KeyUpEvent เริ่มทำงาน
15 LoadHandler

void on Load(LoadEvent event);

เรียกว่าเมื่อ LoadEvent เริ่มทำงาน
16 MouseDownHandler

void on MouseDown(MouseDownEvent event);

เรียกว่าเมื่อ MouseDown ถูกไล่ออก
17 MouseMoveHandler

void on MouseMove(MouseMoveEvent event);

เรียกว่าเมื่อ MouseMoveEvent เริ่มทำงาน
18 MouseOutHandler

void on MouseOut(MouseOutEvent event);

เรียกว่าเมื่อ MouseOutEvent เริ่มทำงาน
19 MouseOverHandler

void on MouseOver(MouseOverEvent event);

เรียกว่าเมื่อ MouseOverEvent เริ่มทำงาน
20 MouseUpHandler

void on MouseUp(MouseUpEvent event);

เรียกว่าเมื่อ MouseUpEvent เริ่มทำงาน
21 MouseWheelHandler

void on MouseWheel(MouseWheelEvent event);

เรียกว่าเมื่อ MouseWheelEvent เริ่มทำงาน
22 ปรับขนาดตัวจัดการ

void on Resize(ResizeEvent event);

เริ่มทำงานเมื่อปรับขนาดวิดเจ็ต
23 ScrollHandler

void on Scroll(ScrollEvent event);

เรียกว่าเมื่อ ScrollEvent เริ่มทำงาน
24 SelectionHandler <I>

void on Selection(SelectionEvent<I> event);

เรียกว่าเมื่อ SelectionEvent เริ่มทำงาน
25 ValueChangeHandler <I>

void on ValueChange(ValueChangeEvent<I> event);

เรียกว่าเมื่อ ValueChangeEvent เริ่มทำงาน
26 หน้าต่างการปิดตัวจัดการ

void on WindowClosing(Window.ClosingEvent event);

เริ่มทำงานก่อนที่หน้าต่างเบราว์เซอร์จะปิดหรือไปที่ไซต์อื่น
27 Window.ScrollHandler

void on WindowScroll(Window.ScrollEvent event);

เริ่มทำงานเมื่อหน้าต่างเบราว์เซอร์ถูกเลื่อน

วิธีการจัดงาน

ดังกล่าวก่อนหน้าแต่ละจัดการมีวิธีการเดียวกับอาร์กิวเมนต์เดียวซึ่งถือวัตถุเหตุการณ์เช่นโมฆะ onClick (event ClickEvent)หรือเป็นโมฆะ onkeydown (event KeyDownEvent) ออบเจ็กต์เหตุการณ์เช่นClickEventและKeyDownEventมีวิธีการทั่วไปไม่กี่วิธีซึ่งแสดงไว้ด้านล่าง -

ซีเนียร์ วิธีการและคำอธิบาย
1

protected void dispatch(ClickHandler handler) วิธีนี้ควรเรียกโดย HandlerManager
2

DomEvent.Type <FooHandler> getAssociatedType() วิธีนี้ส่งคืนประเภทที่ใช้ในการลงทะเบียน Foo เหตุการณ์.
3

static DomEvent.Type<FooHandler> getType() วิธีนี้ได้รับประเภทเหตุการณ์ที่เกี่ยวข้องกับ Foo เหตุการณ์
4

public java.lang.Object getSource() วิธีนี้จะส่งคืนแหล่งที่มาที่ทำให้เหตุการณ์นี้เริ่มทำงานครั้งสุดท้าย
5

protected final boolean isLive() วิธีนี้จะคืนค่าว่าเหตุการณ์นั้นเป็นจริงหรือไม่
6

protected void kill() วิธีนี้จะฆ่าเหตุการณ์

ตัวอย่าง

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการแสดงการใช้ไฟล์ Click เหตุการณ์และ KeyDownการจัดการเหตุการณ์ใน 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'/>

   <!-- 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>Event Handling Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.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.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      /**
       * create textbox and attach key down handler
       */
      TextBox textBox = new TextBox(); 
      textBox.addKeyDownHandler(new MyKeyDownHandler());

      /*
       * create button and attach click handler
       */
      Button button = new Button("Click Me!");
      button.addClickHandler(new MyClickHandler());

      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      panel.setSize("300", "100");
      panel.add(textBox);
      panel.add(button);

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(panel);
      RootPanel.get("gwtContainer").add(decoratorPanel);
   }

   /** 
    * create a custom click handler which will call 
    * onClick method when button is clicked.
    */
   private class MyClickHandler implements ClickHandler {
      @Override
      public void onClick(ClickEvent event) {
         Window.alert("Hello World!");
      }
   }

   /**
    * create a custom key down handler which will call 
    * onKeyDown method when a key is down in textbox.
    */
   private class MyKeyDownHandler implements KeyDownHandler {
      @Override
      public void onKeyDown(KeyDownEvent event) {
         if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
            Window.alert(((TextBox)event.getSource()).getValue());
         }
      }
   }
}

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

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

  • Create a widget by extending Composite Class- นี่เป็นวิธีทั่วไปและง่ายที่สุดในการสร้างวิดเจ็ตแบบกำหนดเอง ที่นี่คุณสามารถใช้วิดเจ็ตที่มีอยู่เพื่อสร้างมุมมองแบบผสมด้วยคุณสมบัติที่กำหนดเอง

  • Create a widget using GWT DOM API in JAVA- วิดเจ็ตพื้นฐาน GWT ถูกสร้างขึ้นด้วยวิธีนี้ ยังคงเป็นวิธีที่ซับซ้อนมากในการสร้างวิดเจ็ตแบบกำหนดเองและควรใช้อย่างระมัดระวัง

  • Use JavaScript and wrap it in a widget using JSNI- โดยทั่วไปควรทำเป็นทางเลือกสุดท้ายเท่านั้น เมื่อพิจารณาถึงผลกระทบข้ามเบราว์เซอร์ของเมธอดเนทีฟมันจะซับซ้อนมากและยังแก้จุดบกพร่องได้ยากขึ้นด้วย

สร้าง Custom Widget ด้วย Composite Class

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

ที่นี่เราจะสร้างวิดเจ็ตแบบกำหนดเองโดยการขยายคลาส Composite ซึ่งเป็นวิธีที่ง่ายที่สุดในการสร้างวิดเจ็ตแบบกำหนดเอง

ขั้นตอน คำอธิบาย
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'/>

   <!-- 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>Custom Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.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.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

public class HelloWorld implements EntryPoint {

   /**
    * A composite of a TextBox and a CheckBox that optionally enables it.
    */
   private static class OptionalTextBox extends Composite implements
   ClickHandler {

      private TextBox textBox = new TextBox();
      private CheckBox checkBox = new CheckBox();
      private boolean enabled = true;

      public boolean isEnabled() {
         return enabled;
      }

      public void setEnabled(boolean enabled) {
         this.enabled = enabled;
      }

      /**
       * Style this widget using .optionalTextWidget CSS class.<br/>
       * Style textbox using .optionalTextBox CSS class.<br/>
       * Style checkbox using .optionalCheckBox CSS class.<br/>
       * Constructs an OptionalTextBox with the given caption 
       * on the check.
       * @param caption the caption to be displayed with the check box
       */
      public OptionalTextBox(String caption) {
         // place the check above the text box using a vertical panel.
         HorizontalPanel panel = new HorizontalPanel();
         // panel.setBorderWidth(1);
         panel.setSpacing(10);
         panel.add(checkBox);
         panel.add(textBox);

         // all composites must call initWidget() in their constructors.
         initWidget(panel);
         
         //set style name for entire widget
         setStyleName("optionalTextWidget");
         
         //set style name for text box
         textBox.setStyleName("optionalTextBox");
         
         //set style name for check box
         checkBox.setStyleName("optionalCheckBox");
         textBox.setWidth("200");
         
         // Set the check box's caption, and check it by default.
         checkBox.setText(caption);
         checkBox.setValue(enabled);
         checkBox.addClickHandler(this);
         enableTextBox(enabled,checkBox.getValue());
      }

      public void onClick(ClickEvent event) {
         if (event.getSource() == checkBox) {
            // When the check box is clicked,
            //update the text box's enabled state.
            enableTextBox(enabled,checkBox.getValue());
         }
      }

      private void enableTextBox(boolean enable,boolean isChecked){
         enable = (enable && isChecked) || (!enable && !isChecked);
         textBox.setStyleDependentName("disabled", !enable);
         textBox.setEnabled(enable);	  
      }
   }

   public void onModuleLoad() {
      // Create an optional text box and add it to the root panel.
      OptionalTextBox otb = new OptionalTextBox(
         "Want to explain the solution?");
      otb.setEnabled(true);
      RootPanel.get().add(otb);
   }    
}

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

You can notice following points

  • การสร้าง Custom Widget โดยการขยาย Composite widget นั้นค่อนข้างง่าย

  • เราได้สร้างวิดเจ็ตด้วยวิดเจ็ต GWT inbuilt, TextBox และ CheckBox โดยใช้แนวคิดของการใช้ซ้ำ

  • TextBox ถูกปิด / เปิดใช้งานขึ้นอยู่กับสถานะของช่องทำเครื่องหมาย เราได้จัดเตรียม API เพื่อเปิด / ปิดการควบคุม

  • เราได้เปิดเผยรูปแบบวิดเจ็ตภายในผ่านรูปแบบ CSS ที่มีเอกสาร

บทนำ

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 - สร้างแอพลิเคชันบท หากทุกอย่างเรียบร้อยกับแอปพลิเคชันของคุณสิ่งนี้จะให้ผลลัพธ์ดังนี้ -

โดยทั่วไปแอปพลิเคชันที่ใช้ GWT ประกอบด้วยโมดูลฝั่งไคลเอ็นต์และโมดูลฝั่งเซิร์ฟเวอร์ โค้ดฝั่งไคลเอ็นต์ทำงานในเบราว์เซอร์และโค้ดฝั่งเซิร์ฟเวอร์ทำงานในเว็บเซิร์ฟเวอร์ โค้ดฝั่งไคลเอ็นต์ต้องทำการร้องขอ HTTP ทั่วทั้งเครือข่ายเพื่อเข้าถึงข้อมูลฝั่งเซิร์ฟเวอร์

RPC, Remote Procedure Call คือกลไกที่ GWT ใช้ซึ่งโค้ดไคลเอ็นต์สามารถเรียกใช้เมธอดฝั่งเซิร์ฟเวอร์ได้โดยตรง

  • GWT RPC ขึ้นอยู่กับ servlet

  • GWT RPC เป็นแบบอะซิงโครนัสและไคลเอนต์จะไม่ถูกบล็อกระหว่างการสื่อสาร

  • การใช้ GWT RPC ออบเจ็กต์ Java สามารถส่งได้โดยตรงระหว่างไคลเอนต์และเซิร์ฟเวอร์ (ซึ่งต่อเนื่องกันโดยอัตโนมัติโดยเฟรมเวิร์ก GWT)

  • servlet ฝั่งเซิร์ฟเวอร์เรียกว่า service.

  • การเรียกโพรซีเดอร์ระยะไกลที่เรียกเมธอดของ servlets ฝั่งเซิร์ฟเวอร์จากโค้ดฝั่งไคลเอ็นต์เรียกว่า invoking a service.

ส่วนประกอบ GWT RPC

ต่อไปนี้เป็นส่วนประกอบสามอย่างที่ใช้ในกลไกการสื่อสาร GWT RPC

  • บริการระยะไกล (servlet ฝั่งเซิร์ฟเวอร์) ที่ทำงานบนเซิร์ฟเวอร์
  • รหัสลูกค้าเพื่อเรียกใช้บริการนั้น
  • วัตถุข้อมูล Java ซึ่งจะถูกส่งผ่านระหว่างไคลเอนต์และเซิร์ฟเวอร์

ไคลเอ็นต์และเซิร์ฟเวอร์ GWT ทั้งซีเรียลไลซ์และดีซีเรียลไลซ์ข้อมูลโดยอัตโนมัติดังนั้นนักพัฒนาจึงไม่จำเป็นต้องซีเรียลไลซ์ / ดีซีเรียลไลซ์อ็อบเจ็กต์และอ็อบเจ็กต์ข้อมูลสามารถเดินทางผ่าน HTTP ได้

แผนภาพต่อไปนี้แสดงสถาปัตยกรรม RPC

ในการเริ่มใช้ RPC เราจำเป็นต้องปฏิบัติตามข้อกำหนด GWT

เวิร์กโฟลว์การสื่อสาร RPC

ขั้นตอนที่ 1 - สร้างคลาสโมเดลต่อเนื่องได้

กำหนดวัตถุโมเดล java ที่ฝั่งไคลเอนต์ซึ่งควรทำให้เป็นอนุกรมได้

public class Message implements Serializable {
   ...
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }
   ...
}

ขั้นตอนที่ 2 - สร้างอินเทอร์เฟซบริการ

กำหนดอินเทอร์เฟซสำหรับบริการบนฝั่งไคลเอ็นต์ที่ขยาย RemoteService แสดงรายการวิธีการบริการทั้งหมด

ใช้คำอธิบายประกอบ @RemoteServiceRelativePath เพื่อแม็พเซอร์วิสกับพา ธ ดีฟอลต์ของรีโมต servlet ที่สัมพันธ์กับ URL ฐานของโมดูล

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

ขั้นตอนที่ 3 - สร้าง Async Service Interface

กำหนดอินเทอร์เฟซแบบอะซิงโครนัสสำหรับบริการบนฝั่งไคลเอ็นต์ (ที่ตำแหน่งเดียวกับบริการที่กล่าวถึงข้างต้น) ซึ่งจะใช้ในโค้ดไคลเอ็นต์ GWT

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

ขั้นตอนที่ 4 - สร้างคลาส Servlet การใช้งานบริการ

ใช้อินเทอร์เฟซที่ฝั่งเซิร์ฟเวอร์และคลาสนั้นควรขยายคลาส RemoteServiceServlet

public class MessageServiceImpl extends RemoteServiceServlet
   implements MessageService{
   ...
   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }
}

ขั้นตอนที่ 5 - อัปเดต Web.xml เพื่อรวมการประกาศ Servlet

แก้ไขตัวอธิบายการปรับใช้เว็บแอ็พพลิเคชัน (web.xml) เพื่อรวมการประกาศ MessageServiceImpl Servlet

<web-app>
   ...
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>
   
   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

ขั้นตอนที่ 6 - เรียกโพรซีเดอร์ระยะไกลใน Application Code

สร้างคลาสพร็อกซีบริการ

MessageServiceAsync messageService = GWT.create(MessageService.class);

สร้าง AsyncCallback Handler เพื่อจัดการการเรียกกลับ RPC ที่เซิร์ฟเวอร์ส่งคืนข้อความกลับไปยังไคลเอนต์

class MessageCallBack implements AsyncCallback<Message> {

   @Override
   public void onFailure(Throwable caught) {
      Window.alert("Unable to obtain server response: "
      + caught.getMessage());	
   }

   @Override
   public void onSuccess(Message result) {
      Window.alert(result.getMessage()); 
   }	   
}

เรียกใช้บริการระยะไกลเมื่อผู้ใช้โต้ตอบกับ UI

public class HelloWorld implements EntryPoint {
   ... 
   public void onModuleLoad() {
   ...
      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });
   ...
   }
}

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

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการแสดงตัวอย่างของการสื่อสาร RPC ใน 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>RPC Communication Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.client;

import java.io.Serializable;

public class Message implements Serializable {
 
   private static final long serialVersionUID = 1L;
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }

   public String getMessage() {
      return message;
   }
}

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

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

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

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

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

package com.tutorialspoint.server;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.tutorialspoint.client.Message;
import com.tutorialspoint.client.MessageService;

public class MessageServiceImpl extends RemoteServiceServlet 
   implements MessageService{

   private static final long serialVersionUID = 1L;

   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }   
}

อัพเดตเนื้อหาของตัวอธิบายการปรับใช้เว็บแอ็พพลิเคชันที่แก้ไข war/WEB-INF/web.xml เพื่อรวมการประกาศ MessageServiceImpl Servlet

<?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>
   <!-- Default page to serve -->
   <welcome-file-list>
      <welcome-file>HelloWorld.html</welcome-file>
   </welcome-file-list>
   
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>

   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

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

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   private MessageServiceAsync messageService = 
   GWT.create(MessageService.class);

   private class MessageCallBack implements AsyncCallback<Message> {
      @Override
      public void onFailure(Throwable caught) {
         /* server side error occured */
         Window.alert("Unable to obtain server response: " + caught.getMessage());	
      }
      @Override
      public void onSuccess(Message result) {
          /* server returned result, show user the message */
         Window.alert(result.getMessage());
      }	   
   }

   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               /* make remote call to server to get the message */
               messageService.getMessage(txtName.getValue(), 
               new MessageCallBack());
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            /* make remote call to server to get the message */
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }    
}

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

GWT ให้การสนับสนุนที่ยอดเยี่ยมสำหรับการทดสอบโค้ดฝั่งไคลเอ็นต์อัตโนมัติโดยใช้กรอบการทดสอบ JUnit ในบทความนี้เราจะสาธิตการรวม GWT และ JUNIT

ดาวน์โหลด Junit archive

เว็บไซต์อย่างเป็นทางการของ JUnit - https://www.junit.org

ดาวน์โหลด Junit-4.10.jar

ระบบปฏิบัติการ ชื่อที่เก็บถาวร
Windows junit4.10.jar
ลินุกซ์ junit4.10.jar
Mac junit4.10.jar

จัดเก็บไฟล์ jar ที่ดาวน์โหลดไว้ในบางตำแหน่งในคอมพิวเตอร์ของคุณ เราเก็บไว้ที่C:/ > JUNIT

ค้นหาโฟลเดอร์การติดตั้ง GWT

ระบบปฏิบัติการ โฟลเดอร์การติดตั้ง GWT
Windows C: \ GWT \ gwt-2.1.0
ลินุกซ์ /usr/local/GWT/gwt-2.1.0
Mac /Library/GWT/gwt-2.1.0

คลาส GWTTestCase

GWT ให้ GWTTestCaseคลาสพื้นฐานที่ให้การรวม JUnit การรันคลาสที่คอมไพล์ซึ่งขยาย GWTTestCase ภายใต้ JUnit เปิดตัวเบราว์เซอร์ HtmlUnit ซึ่งทำหน้าที่เลียนแบบพฤติกรรมแอปพลิเคชันของคุณในระหว่างการดำเนินการทดสอบ

GWTTestCase เป็นคลาสที่ได้รับมาจาก TestCase ของ JUnit และสามารถเรียกใช้โดยใช้ JUnit TestRunner

ใช้ webAppCreator

GWT มีเครื่องมือบรรทัดคำสั่งพิเศษ webAppCreator ซึ่งสามารถสร้างกรณีทดสอบเริ่มต้นสำหรับเรารวมทั้งเป้าหมายมดและการกำหนดค่าการปล่อยคราสสำหรับการทดสอบทั้งในโหมดการพัฒนาและโหมดการผลิต

เปิดพรอมต์คำสั่งแล้วไปที่ C:\ > GWT_WORKSPACE > ที่คุณต้องการสร้างโปรเจ็กต์ใหม่พร้อมการสนับสนุนการทดสอบรันคำสั่งต่อไปนี้

C:\GWT_WORKSPACE>C:\GWT\gwt-2.1.0\webAppCreator 
   -out HelloWorld 
   -junit C:\JUNIT\junit-4.10.jar 
   com.tutorialspoint.HelloWorld

จุดสำคัญ

  • เรากำลังเรียกใช้ยูทิลิตีบรรทัดคำสั่ง webAppCreator
  • HelloWorld เป็นชื่อของโครงการที่จะสร้างขึ้น
  • อ็อพชัน -junit สั่งให้ webAppCreator เพิ่ม junit suppport ในโปรเจ็กต์
  • com.tutorialspoint.HelloWorld คือชื่อของโมดูล

ตรวจสอบผลลัพธ์

Created directory HelloWorld\src
Created directory HelloWorld\war
Created directory HelloWorld\war\WEB-INF
Created directory HelloWorld\war\WEB-INF\lib
Created directory HelloWorld\src\com\tutorialspoint
Created directory HelloWorld\src\com\tutorialspoint\client
Created directory HelloWorld\src\com\tutorialspoint\server
Created directory HelloWorld\src\com\tutorialspoint\shared
Created directory HelloWorld\test\com\tutorialspoint
Created directory HelloWorld\test\com\tutorialspoint\client
Created file HelloWorld\src\com\tutorialspoint\HelloWorld.gwt.xml
Created file HelloWorld\war\HelloWorld.html
Created file HelloWorld\war\HelloWorld.css
Created file HelloWorld\war\WEB-INF\web.xml
Created file HelloWorld\src\com\tutorialspoint\client\HelloWorld.java
Created file 
HelloWorld\src\com\tutorialspoint\client\GreetingService.java
Created file 
HelloWorld\src\com\tutorialspoint\client\GreetingServiceAsync.java
Created file 
HelloWorld\src\com\tutorialspoint\server\GreetingServiceImpl.java
Created file HelloWorld\src\com\tutorialspoint\shared\FieldVerifier.java
Created file HelloWorld\build.xml
Created file HelloWorld\README.txt
Created file HelloWorld\test\com\tutorialspoint\HelloWorldJUnit.gwt.xml
Created file HelloWorld\test\com\tutorialspoint\client\HelloWorldTest.java
Created file HelloWorld\.project
Created file HelloWorld\.classpath
Created file HelloWorld\HelloWorld.launch
Created file HelloWorld\HelloWorldTest-dev.launch
Created file HelloWorld\HelloWorldTest-prod.launch

การทำความเข้าใจคลาสทดสอบ: HelloWorldTest.java

package com.tutorialspoint.client;

import com.tutorialspoint.shared.FieldVerifier;
import com.google.gwt.core.client.GWT;
import com.google.gwt.junit.client.GWTTestCase;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;

/**
 * GWT JUnit tests must extend GWTTestCase.
 */
public class HelloWorldTest extends GWTTestCase {

   /**
    * must refer to a valid module that sources this class.
    */
   public String getModuleName() {
      return "com.tutorialspoint.HelloWorldJUnit";
   }

   /**
    * tests the FieldVerifier.
    */
   public void testFieldVerifier() {
      assertFalse(FieldVerifier.isValidName(null));
      assertFalse(FieldVerifier.isValidName(""));
      assertFalse(FieldVerifier.isValidName("a"));
      assertFalse(FieldVerifier.isValidName("ab"));
      assertFalse(FieldVerifier.isValidName("abc"));
      assertTrue(FieldVerifier.isValidName("abcd"));
   }

   /**
    * this test will send a request to the server using the greetServer
    *  method in GreetingService and verify the response.
    */
   public void testGreetingService() {
      /* create the service that we will test. */
      GreetingServiceAsync greetingService = 
      GWT.create(GreetingService.class);
      ServiceDefTarget target = (ServiceDefTarget) greetingService;
      target.setServiceEntryPoint(GWT.getModuleBaseURL() 
      + "helloworld/greet");

      /* since RPC calls are asynchronous, we will need to wait 
       for a response after this test method returns. This line 
       tells the test runner to wait up to 10 seconds 
       before timing out. */
      delayTestFinish(10000);

      /* send a request to the server. */
      greetingService.greetServer("GWT User", 
         new AsyncCallback<String>() {
         public void onFailure(Throwable caught) {
            /* The request resulted in an unexpected error. */
            fail("Request failure: " + caught.getMessage());
         }

         public void onSuccess(String result) {
            /* verify that the response is correct. */
            assertTrue(result.startsWith("Hello, GWT User!"));

            /* now that we have received a response, we need to 
             tell the test runner that the test is complete. 
             You must call finishTest() after an asynchronous test 
             finishes successfully, or the test will time out.*/
            finishTest();
         }
      });
   }
}

จุดสำคัญ

ซีเนียร์ บันทึก
1 คลาส HelloWorldTest ถูกสร้างขึ้นในแพ็คเกจ com.tutorialspoint.client ภายใต้ไดเร็กทอรี HelloWorld / test
2 คลาส HelloWorldTest จะมีกรณีทดสอบหน่วยสำหรับ HelloWorld
3 คลาส HelloWorldTest ขยายคลาส GWTTestCase ในแพ็คเกจ com.google.gwt.junit.client
4 คลาส HelloWorldTest มีเมธอดนามธรรม (getModuleName) ที่ต้องส่งคืนชื่อของโมดูล GWT สำหรับ HelloWorld นี่คือ com.tutorialspoint.HelloWorldJUnit
5 คลาส HelloWorldTest ถูกสร้างขึ้นด้วยกรณีทดสอบตัวอย่างสองกรณี testFieldVerifier, testSimple เราได้เพิ่ม testGreetingService
6 วิธีการเหล่านี้ใช้หนึ่งในฟังก์ชัน assert * จำนวนมากที่สืบทอดมาจากคลาส JUnit Assert ซึ่งเป็นบรรพบุรุษของ GWTTestCase
7 ฟังก์ชัน assertTrue (บูลีน) ยืนยันว่าอาร์กิวเมนต์บูลีนที่ส่งผ่านในการประเมินเป็นจริง ไม่เช่นนั้นการทดสอบจะล้มเหลวเมื่อรันใน JUnit

GWT - JUnit Integration Complete Example

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการแสดงตัวอย่างของการรวม JUnit ใน GWT

ทำตามขั้นตอนต่อไปนี้เพื่ออัปเดตแอปพลิเคชัน GWT ที่เราสร้างไว้ด้านบน -

ขั้นตอน คำอธิบาย
1 นำเข้าโปรเจ็กต์ด้วยชื่อHelloWorldใน eclipse โดยใช้ตัวช่วยสร้างโปรเจ็กต์ที่มีอยู่ (ไฟล์→นำเข้า→ทั่วไป→โปรเจ็กต์ที่มีอยู่ไปยังพื้นที่ทำงาน)
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>JUnit Integration Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            Window.alert(getGreeting(txtName.getValue()));
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

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

package com.tutorialspoint.client;

import com.tutorialspoint.shared.FieldVerifier;
import com.google.gwt.core.client.GWT;
import com.google.gwt.junit.client.GWTTestCase;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;

/**
 * GWT JUnit tests must extend GWTTestCase.
 */
public class HelloWorldTest extends GWTTestCase {

   /**
    * must refer to a valid module that sources this class.
    */
   public String getModuleName() {
      return "com.tutorialspoint.HelloWorldJUnit";
   }

   /**
    * tests the FieldVerifier.
    */
   public void testFieldVerifier() {
      assertFalse(FieldVerifier.isValidName(null));
      assertFalse(FieldVerifier.isValidName(""));
      assertFalse(FieldVerifier.isValidName("a"));
      assertFalse(FieldVerifier.isValidName("ab"));
      assertFalse(FieldVerifier.isValidName("abc"));
      assertTrue(FieldVerifier.isValidName("abcd"));
   }

   /**
      * this test will send a request to the server using the greetServer
      *  method in GreetingService and verify the response.
   */
   public void testGreetingService() {
      /* create the service that we will test. */
      GreetingServiceAsync greetingService = 
      GWT.create(GreetingService.class);
      ServiceDefTarget target = (ServiceDefTarget) greetingService;
      target.setServiceEntryPoint(GWT.getModuleBaseURL() 
      + "helloworld/greet");

      /* since RPC calls are asynchronous, we will need to wait 
       for a response after this test method returns. This line 
       tells the test runner to wait up to 10 seconds 
       before timing out. */
      delayTestFinish(10000);

      /* send a request to the server. */
      greetingService.greetServer("GWT User", 
         new AsyncCallback<String>() {
         public void onFailure(Throwable caught) {
            /* The request resulted in an unexpected error. */
            fail("Request failure: " + caught.getMessage());
         }

         public void onSuccess(String result) {
            /* verify that the response is correct. */
            assertTrue(result.startsWith("Hello, GWT User!"));

            /* now that we have received a response, we need to 
             tell the test runner that the test is complete. 
             You must call finishTest() after an asynchronous test 
             finishes successfully, or the test will time out.*/
            finishTest();
         }
      });
	
      /**
         * tests the getGreeting method.
      */
      public void testGetGreeting() {
         HelloWorld helloWorld = new HelloWorld();
         String name = "Robert";
         String expectedGreeting = "Hello "+name+"!";
         assertEquals(expectedGreeting,helloWorld.getGreeting(name));
      }
   }
}

รันกรณีทดสอบใน Eclipse โดยใช้คอนฟิกูเรชันการเรียกใช้ที่สร้างขึ้น

เราจะเรียกใช้การทดสอบหน่วยใน Eclipse โดยใช้การกำหนดค่าการเปิดตัวที่สร้างโดย webAppCreator สำหรับทั้งโหมดการพัฒนาและโหมดการผลิต

เรียกใช้การทดสอบ JUnit ในโหมดการพัฒนา

  • จากแถบเมนู Eclipse เลือก Run → Run Configurations ...
  • ภายใต้ส่วน JUnit เลือก HelloWorldTest-dev
  • ในการบันทึกการเปลี่ยนแปลงอาร์กิวเมนต์ให้กดใช้
  • ในการเรียกใช้การทดสอบให้กดเรียกใช้

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

รันการทดสอบ JUnit ในโหมดการผลิต

  • จากแถบเมนู Eclipse เลือก Run → Run Configurations ...
  • ภายใต้ส่วน JUnit เลือก HelloWorldTest-prod
  • ในการบันทึกการเปลี่ยนแปลงอาร์กิวเมนต์ให้กดใช้
  • ในการเรียกใช้การทดสอบให้กดเรียกใช้

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

GWT ให้ความสามารถที่ยอดเยี่ยมในการดีบักฝั่งไคลเอ็นต์และโค้ดฝั่งเซิร์ฟเวอร์

ในระหว่างโหมดการพัฒนา GWT Application อยู่ในโค้ด Java และไม่ได้แปลเป็น JavaScript

เมื่อแอปพลิเคชันกำลังทำงานในโหมดการพัฒนา Java Virtual Machine (JVM) จะเรียกใช้โค้ดแอปพลิเคชันเป็น bytecode Java ที่คอมไพล์โดยใช้ความสามารถ GWT เพื่อเชื่อมต่อกับหน้าต่างเบราว์เซอร์

GWT ใช้ปลั๊กอินที่ใช้เบราว์เซอร์เพื่อเชื่อมต่อกับ JVM

ดังนั้นนักพัฒนาจึงมีอิสระที่จะใช้ IDE ที่ใช้ Java เพื่อดีบักทั้งรหัส GWT ฝั่งไคลเอ็นต์และโค้ดฝั่งเซิร์ฟเวอร์

ในบทความนี้เราจะสาธิตการใช้งานการดีบักโค้ดไคลเอ็นต์ GWT โดยใช้ Eclipse เราจะทำงานต่อไปนี้ -

  • กำหนดจุดพักในโค้ดและดูใน BreakPoint Explorer
  • ทำตามขั้นตอนโค้ดทีละบรรทัดระหว่างการดีบัก
  • ดูค่าของตัวแปร
  • ตรวจสอบค่าของตัวแปรทั้งหมด
  • ตรวจสอบค่าของนิพจน์
  • แสดงสแต็กเฟรมสำหรับเธรดที่ถูกระงับ

ตัวอย่างการดีบัก

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการสาธิตการดีบักแอปพลิเคชัน 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'/>

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

.gwt-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

ต่อไปนี้เป็นเนื้อหาของไฟล์โฮสต์ 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>Debugging Application Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

ให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Java src/com.tutorialspoint/HelloWorld.java ซึ่งเราจะแสดงให้เห็นถึงความสามารถในการดีบักของ GWT Code

package com.tutorialspoint.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.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
      @Override
      public void onClick(ClickEvent event) {
         Window.alert(getGreeting(txtName.getValue()));
      }});

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

ขั้นตอนที่ 1 - วาง BreakPoints

วางเบรกพอยต์ในบรรทัดแรกของ onModuleLoad() ของ HelloWorld.java

ขั้นตอนที่ 2 - ดีบักแอปพลิเคชัน

ตอนนี้คลิกที่

เมนูแอปพลิเคชันแก้ไขข้อบกพร่องแล้วเลือกHelloWorld แอปพลิเคชันเพื่อแก้ไขข้อบกพร่องของแอปพลิเคชัน

หากทุกอย่างเรียบร้อยดีคุณต้องเห็น GWT Development Mode ที่ใช้งานอยู่ใน Eclipse ที่มี URL ดังที่แสดงด้านล่าง ดับเบิลคลิกที่ URL เพื่อเปิดแอปพลิเคชัน GWT

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

คุณสามารถดู stacktrace สำหรับเธรดที่ถูกระงับ

คุณสามารถดูค่าสำหรับนิพจน์

คุณสามารถดูรายการจุดพักที่วางไว้

ตอนนี้ให้กด F6 จนกว่าคุณจะถึงบรรทัดสุดท้ายของเมธอด onModuleLoad () ในการอ้างอิงปุ่มฟังก์ชัน F6 จะตรวจสอบโค้ดทีละบรรทัด F5 ขั้นตอนข้างในเพิ่มเติมและ F8 จะกลับมาใช้งานแอปพลิเคชันต่อ ตอนนี้คุณสามารถดูรายการค่าของตัวแปรทั้งหมดของเมธอด onModuleLoad ()

โค้ดไคลเอ็นต์ GWT สามารถดีบักได้ในลักษณะเดียวกับที่สามารถดีบัก Java Application ได้ วางจุดพักไว้ที่บรรทัดใดก็ได้และเล่นกับความสามารถในการดีบักของ GWT

GWT มีสามวิธีในการทำให้แอปพลิเคชัน GWT เป็นสากลเราจะสาธิตการใช้ Static String Internationalization ที่ใช้กันมากที่สุดในโครงการต่างๆ

ซีเนียร์ เทคนิคและคำอธิบาย
1

Static String Internationalization

เทคนิคนี้แพร่หลายมากที่สุดและต้องการค่าใช้จ่ายน้อยมากในรันไทม์ เป็นเทคนิคที่มีประสิทธิภาพมากในการแปลสตริงทั้งค่าคงที่และพารามิเตอร์ที่ง่ายที่สุดในการนำไปใช้

การทำให้เป็นสากลของสตริงแบบคงที่ใช้ไฟล์คุณสมบัติ Java มาตรฐานเพื่อจัดเก็บสตริงที่แปลแล้วและข้อความที่กำหนดพารามิเตอร์และอินเตอร์เฟส Java ที่พิมพ์มากถูกสร้างขึ้นเพื่อดึงค่า
2

Dynamic String Internationalization

เทคนิคนี้มีความยืดหยุ่นมาก แต่ช้ากว่าการทำให้เป็นสากลของสตริงแบบคงที่ หน้าโฮสต์มีสตริงที่แปลเป็นภาษาท้องถิ่นดังนั้นจึงไม่จำเป็นต้องคอมไพล์แอปพลิเคชันใหม่เมื่อเราเพิ่มภาษาใหม่ หากแอปพลิเคชัน GWT จะรวมเข้ากับระบบโลคัลไลเซชันฝั่งเซิร์ฟเวอร์ที่มีอยู่แล้วจะต้องใช้เทคนิคนี้
3

Localizable Interface

เทคนิคนี้มีประสิทธิภาพมากที่สุดในสามเทคนิค การใช้งาน Localizable ทำให้เราสามารถสร้างเวอร์ชันที่กำหนดเองได้ เป็นเทคนิคการทำให้เป็นสากลขั้นสูง

เวิร์กโฟลว์ของการทำให้แอปพลิเคชัน GWT เป็นสากล

ขั้นตอนที่ 1 - สร้างไฟล์คุณสมบัติ

สร้างไฟล์คุณสมบัติที่มีข้อความที่จะใช้ในแอปพลิเคชัน เราได้สร้างไฟล์HelloWorldMessages.properties ไฟล์ในตัวอย่างของเรา

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

สร้างไฟล์คุณสมบัติที่มีค่าที่แปลเฉพาะสำหรับโลแคล เราได้สร้างไฟล์HelloWorldMessages_de.propertiesไฟล์ในตัวอย่างของเรา ไฟล์นี้มีคำแปลเป็นภาษาเยอรมัน _de ระบุภาษาเยอรมันและเราจะรองรับภาษาเยอรมันในแอปพลิเคชันของเรา

หากคุณกำลังสร้างไฟล์คุณสมบัติโดยใช้ Eclipse ให้เปลี่ยนการเข้ารหัสของไฟล์เป็น UTF-8 เลือกไฟล์จากนั้นคลิกขวาเพื่อเปิดหน้าต่างคุณสมบัติเลือกการเข้ารหัสไฟล์ข้อความเป็น Other UTF-8. ใช้และบันทึกการเปลี่ยนแปลง

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

ขั้นตอนที่ 2 - เพิ่มโมดูล i18n ไปยังไฟล์ XML Descriptor Module

อัปเดตไฟล์โมดูล HelloWorld.gwt.xml เพื่อรวมการสนับสนุนภาษาเยอรมัน

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   ...
   <extend-property name = "locale" values="de" />
   ...
</module>

ขั้นตอนที่ 3 - สร้างส่วนต่อประสานที่เทียบเท่ากับไฟล์คุณสมบัติ

สร้างอินเทอร์เฟซ HelloWorldMessages.java โดยการขยายอินเทอร์เฟซ Messages ของ GWT เพื่อรวมการสนับสนุนสำหรับ internalization ควรมีชื่อเมธอดเดียวกันกับคีย์ในไฟล์คุณสมบัติ Place holder จะถูกแทนที่ด้วย String อาร์กิวเมนต์

public interface HelloWorldMessages extends Messages {
	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

ขั้นตอนที่ 4 - ใช้อินเทอร์เฟซข้อความในคอมโพเนนต์ UI

ใช้วัตถุของ HelloWorldMessages ใน HelloWorld เพื่อรับข้อความ

public class HelloWorld implements EntryPoint {
   
   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
   ...
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
   ...
   }
}

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

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการแสดงความสามารถในการทำให้เป็นสากลของแอปพลิเคชัน 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'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
  <extend-property name = "locale" values="de" />
  <!-- 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 id = "gwtAppTitle"></h1>
      <div id = "gwtContainer"></div>

   </body>
</html>

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

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

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

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

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

package com.tutorialspoint.client;
import com.google.gwt.i18n.client.Messages;

public interface HelloWorldMessages extends Messages {	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internationalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

ให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Java src/com.tutorialspoint/HelloWorld.java ซึ่งเราจะแสดงให้เห็นถึงความสามารถในการทำให้เป็นสากลของ GWT Code

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label(messages.enterName() + ": ");

      Button buttonMessage = new Button(messages.clickMe() + "!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            Window.alert(getGreeting(txtName.getValue()));
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);      

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return messages.greeting(name + "!");
   }
}

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

ตอนนี้อัปเดต URL เพื่อให้มี locale = de.Set URL - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. หากทุกอย่างเรียบร้อยกับแอปพลิเคชันของคุณสิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

โดยปกติแอปพลิเคชัน GWT เป็นแอปพลิเคชันหน้าเดียวที่ใช้ JavaScript และไม่มีหน้าจำนวนมากดังนั้นเบราว์เซอร์จึงไม่ติดตามการโต้ตอบของผู้ใช้กับแอปพลิเคชัน ในการใช้ฟังก์ชันประวัติของเบราว์เซอร์แอปพลิเคชันควรสร้างส่วนย่อย URL ที่ไม่ซ้ำกันสำหรับแต่ละหน้าที่นำทางได้

GWT ให้ History Mechanism เพื่อรับมือกับสถานการณ์นี้

GWT ใช้คำ tokenซึ่งเป็นเพียงสตริงที่แอปพลิเคชันสามารถแยกวิเคราะห์เพื่อกลับไปยังสถานะเฉพาะ แอปพลิเคชันจะบันทึกโทเค็นนี้ในประวัติของเบราว์เซอร์เป็นส่วนย่อยของ URL

ตัวอย่างเช่นโทเค็นประวัติชื่อ "pageIndex1" จะถูกเพิ่มลงใน URL ดังนี้ -

http://www.tutorialspoint.com/HelloWorld.html#pageIndex0

เวิร์กโฟลว์การจัดการประวัติ

ขั้นตอนที่ 1 - เปิดใช้งานการสนับสนุนประวัติ

ในการใช้การสนับสนุนประวัติ GWT อันดับแรกเราต้องฝัง iframe ต่อไปนี้ลงในหน้าโฮสต์ HTML ของเรา

<iframe src = "javascript:''"
   id = "__gwt_historyFrame"
   style = "width:0;height:0;border:0"></iframe>

ขั้นตอนที่ 2 - เพิ่มโทเค็นในประวัติ

ตัวอย่างต่อไปนี้สถิติวิธีการเพิ่มโทเค็นในประวัติเบราว์เซอร์

int index = 0;
History.newItem("pageIndex" + index);

ขั้นตอนที่ 3 - เรียกคืนโทเค็นจากประวัติ

เมื่อผู้ใช้ใช้ปุ่มย้อนกลับ / ไปข้างหน้าของเบราว์เซอร์เราจะเรียกคืนโทเค็นและอัปเดตสถานะแอปพลิเคชันของเราตามนั้น

History.addValueChangeHandler(new ValueChangeHandler<String>() {
   @Override
   public void onValueChange(ValueChangeEvent<String> event) {
      String historyToken = event.getValue();
      /* parse the history token */
      try {
         if (historyToken.substring(0, 9).equals("pageIndex")) {
            String tabIndexToken = historyToken.substring(9, 10);
            int tabIndex = Integer.parseInt(tabIndexToken);
            /* select the specified tab panel */
            tabPanel.selectTab(tabIndex);
         } else {
            tabPanel.selectTab(0);
         }
      } catch (IndexOutOfBoundsException e) {
         tabPanel.selectTab(0);
      }
   }
});

ตอนนี้เรามาดู History Class ในการดำเนินการ

ชั้นเรียนประวัติศาสตร์ - ตัวอย่างที่สมบูรณ์

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการสาธิตการจัดการประวัติของแอปพลิเคชัน 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'/>

   <!-- 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>
      <iframe src = "javascript:''"id = "__gwt_historyFrame"
         style = "width:0;height:0;border:0"></iframe>
      <h1> History Class Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;

public class HelloWorld implements EntryPoint {

   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      final TabPanel tabPanel = new TabPanel();

      /* create pages */
      HTML firstPage = new HTML("<h1>We are on first Page.</h1>");
      HTML secondPage = new HTML("<h1>We are on second Page.</h1>");
      HTML thirdPage = new HTML("<h1>We are on third Page.</h1>");

      String firstPageTitle = "First Page";
      String secondPageTitle = "Second Page";
      String thirdPageTitle = "Third Page";
      tabPanel.setWidth("400");
      
	  /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);

      /* add tab selection handler */
      tabPanel.addSelectionHandler(new SelectionHandler<Integer>() {
         @Override
         public void onSelection(SelectionEvent<Integer> event) {
            /* add a token to history containing pageIndex 
             History class will change the URL of application
             by appending the token to it.
            */
            History.newItem("pageIndex" + event.getSelectedItem());
         }
      });
      
      /* add value change handler to History 
       this method will be called, when browser's 
       Back button or Forward button are clicked 
       and URL of application changes.
       */
      History.addValueChangeHandler(new ValueChangeHandler<String>() {
         @Override
         public void onValueChange(ValueChangeEvent<String> event) {
            String historyToken = event.getValue();
            /* parse the history token */
            try {
               if (historyToken.substring(0, 9).equals("pageIndex")) {
                  String tabIndexToken = historyToken.substring(9, 10);
                  int tabIndex = Integer.parseInt(tabIndexToken);
                  /* select the specified tab panel */
                  tabPanel.selectTab(tabIndex);
               } else {
                  tabPanel.selectTab(0);
               }
            } catch (IndexOutOfBoundsException e) {
               tabPanel.selectTab(0);
            }
         }
      });

      /* select the first tab by default */
      tabPanel.selectTab(0);

      /* add controls to RootPanel */
      RootPanel.get().add(tabPanel);
   }
}

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

  • ตอนนี้คลิกที่แต่ละแท็บเพื่อเลือกหน้าต่างๆ

  • คุณควรสังเกตเมื่อเลือกแต่ละแท็บ url ของแอปพลิเคชันจะเปลี่ยนไปและ #pageIndex จะถูกเพิ่มลงใน url

  • นอกจากนี้คุณยังสามารถเห็นว่าปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์เปิดใช้งานอยู่ในขณะนี้

  • ใช้ปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์และคุณจะเห็นแท็บต่างๆที่ได้รับเลือกตามนั้น

GWT รองรับการจัดการประวัติเบราว์เซอร์โดยใช้คลาสประวัติซึ่งคุณสามารถอ้างอิงGWT -บทคลาสประวัติศาสตร์

GWT ใช้คำ tokenซึ่งเป็นเพียงสตริงที่แอปพลิเคชันสามารถแยกวิเคราะห์เพื่อกลับไปยังสถานะเฉพาะ แอปพลิเคชันจะบันทึกโทเค็นนี้ในประวัติของเบราว์เซอร์เป็นส่วนย่อยของ URL

ในGWT -บทคลาสประวัติศาสตร์เราจัดการการสร้างโทเค็นและการตั้งค่าในประวัติโดยการเขียนโค้ด

ในบทความนี้เราจะพูดถึงวิดเจ็ตพิเศษไฮเปอร์ลิงก์ซึ่งสร้างโทเค็นและจัดการประวัติให้เราโดยอัตโนมัติและให้ความสามารถในการบุ๊กมาร์ก

ตัวอย่างการบุ๊กมาร์ก

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการสาธิตการบุ๊กมาร์กของแอปพลิเคชัน 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'/>

   <!-- 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>
      <iframe src = "javascript:''"id = "__gwt_historyFrame"
         style = "width:0;height:0;border:0"></iframe>
      <h1> Bookmarking Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   
   private TabPanel tabPanel;

   private void selectTab(String historyToken){
      /*  parse the history token */
      try {
         if (historyToken.substring(0, 9).equals("pageIndex")) {
            String tabIndexToken = historyToken.substring(9, 10);
            int tabIndex = Integer.parseInt(tabIndexToken);
            /* Select the specified tab panel */
            tabPanel.selectTab(tabIndex);
         } else {
            tabPanel.selectTab(0);
         }
      } catch (IndexOutOfBoundsException e) {
         tabPanel.selectTab(0);
      }
   }

   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      tabPanel = new TabPanel();

      /* create pages */
      HTML firstPage = new HTML("<h1>We are on first Page.</h1>");
      HTML secondPage = new HTML("<h1>We are on second Page.</h1>");
      HTML thirdPage = new HTML("<h1>We are on third Page.</h1>");

      String firstPageTitle = "First Page";
      String secondPageTitle = "Second Page";
      String thirdPageTitle = "Third Page";

      Hyperlink firstPageLink = new Hyperlink("1", "pageIndex0");
      Hyperlink secondPageLink = new Hyperlink("2", "pageIndex1");
      Hyperlink thirdPageLink = new Hyperlink("3", "pageIndex2");

      HorizontalPanel linksHPanel = new HorizontalPanel();
      linksHPanel.setSpacing(10);
      linksHPanel.add(firstPageLink);
      linksHPanel.add(secondPageLink);
      linksHPanel.add(thirdPageLink);		

      /* If the application starts with no history token, 
         redirect to a pageIndex0 */
      String initToken = History.getToken();

      if (initToken.length() == 0) {
         History.newItem("pageIndex0");
         initToken = "pageIndex0";
      }		

      tabPanel.setWidth("400");
      /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);

      /* add value change handler to History 
       * this method will be called, when browser's Back button 
       * or Forward button are clicked.
       * and URL of application changes.
       * */
      History.addValueChangeHandler(new ValueChangeHandler<String>() {
         @Override
         public void onValueChange(ValueChangeEvent<String> event) {
            selectTab(event.getValue());				
         }
      });

      selectTab(initToken);

      VerticalPanel vPanel = new VerticalPanel();

      vPanel.setSpacing(10);
      vPanel.add(tabPanel);
      vPanel.add(linksHPanel);

      /* add controls to RootPanel */
      RootPanel.get().add(vPanel);
   }
}

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

  • ตอนนี้คลิกที่ 1, 2 หรือ 3 คุณจะสังเกตได้ว่าแท็บเปลี่ยนไปตามดัชนี

  • คุณควรสังเกตเมื่อคุณคลิกที่ 1,2 หรือ 3 url ของแอปพลิเคชันจะเปลี่ยนไปและ #pageIndex จะถูกเพิ่มลงใน url

  • นอกจากนี้คุณยังสามารถเห็นว่าปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์เปิดใช้งานอยู่ในขณะนี้

  • ใช้ปุ่มย้อนกลับและไปข้างหน้าของเบราว์เซอร์และคุณจะเห็นแท็บต่างๆที่ได้รับเลือกตามนั้น

  • คลิกขวาที่ 1, 2 หรือ 3 คุณจะเห็นตัวเลือกต่างๆเช่นเปิดเปิดในหน้าต่างใหม่เปิดในแท็บใหม่เพิ่มรายการโปรดเป็นต้น

  • คลิกขวาที่ 3 เลือกเพิ่มในรายการโปรด บันทึกบุ๊คมาร์คเป็นหน้า 3

  • เปิดรายการโปรดและเลือกหน้า 3 คุณจะเห็นแท็บที่สามที่เลือก

เฟรมเวิร์กการบันทึกเลียนแบบ java.util.logging ดังนั้นจึงใช้ไวยากรณ์เดียวกันและมีลักษณะการทำงานเหมือนกับรหัสการบันทึกฝั่งเซิร์ฟเวอร์

การบันทึก GWT กำหนดค่าโดยใช้ไฟล์. gwt.xml

เราสามารถกำหนดค่าการบันทึกให้เปิด / ปิดได้ เราสามารถเปิด / ปิดการใช้งานเครื่องจัดการเฉพาะและเปลี่ยนระดับการบันทึกเริ่มต้น

ประเภทของ Logger

คนตัดไม้จัดอยู่ในโครงสร้างแบบต้นไม้โดยมี Root Logger อยู่ที่รากของต้นไม้

ชื่อของคนตัดไม้กำหนดความสัมพันธ์แม่ / ลูกโดยใช้ . เพื่อแยกส่วนของชื่อ

ตัวอย่างเช่นถ้าเรามีคนตัดไม้สองคน Hospital.room1 และ Hospital.room2 พวกเขาก็เป็นพี่น้องกันโดยมีพ่อแม่เป็นคนตัดไม้ชื่อ Hospital คนตัดไม้ในโรงพยาบาล (และคนตัดไม้ที่มีชื่อซึ่งไม่มีจุด ".") มี Root Logger เป็นพาเรนต์

private static Logger room1Logger = Logger.getLogger("Hospital.room1");
private static Logger room2Logger = Logger.getLogger("Hospital.room2");
private static Logger hospitalLogger = Logger.getLogger("Hospital");
private static Logger rootLogger = Logger.getLogger("");

เครื่องจัดการบันทึก

GWT มีเครื่องจัดการเริ่มต้นซึ่งจะแสดงรายการบันทึกที่สร้างขึ้นโดยใช้เครื่องบันทึก

ตัวจัดการ เข้าสู่ระบบ คำอธิบาย
SystemLogHandler stdout ข้อความเหล่านี้สามารถเห็นได้เฉพาะในโหมดการพัฒนาในหน้าต่าง DevMode
DevelopmentModeLogHandler หน้าต่าง DevMode บันทึกโดยเรียกเมธอด GWT.log ข้อความเหล่านี้สามารถเห็นได้เฉพาะในโหมดการพัฒนาในหน้าต่าง DevMode
ConsoleLogHandler คอนโซล javascript บันทึกไปยังคอนโซล javascript ซึ่งใช้โดย Firebug Lite (สำหรับ IE), Safari และ Chrome
FirebugLogHandler Firebug บันทึกไปที่คอนโซล firebug
PopupLogHandler ป๊อปอัพ บันทึกไปยังป๊อปอัปซึ่งอยู่ที่มุมซ้ายบนของแอปพลิเคชันเมื่อเปิดใช้งานตัวจัดการนี้
SimpleRemoteLogHandler เซิร์ฟเวอร์ ตัวจัดการนี้จะส่งข้อความบันทึกไปยังเซิร์ฟเวอร์ซึ่งจะถูกบันทึกโดยใช้กลไกการบันทึกฝั่งเซิร์ฟเวอร์

กำหนดค่าการบันทึกในแอปพลิเคชัน GWT

ไฟล์ HelloWorld.gwt.xml จะถูกกำหนดค่าให้เปิดใช้งานการบันทึก GWT ดังนี้ -

# add logging module
   <inherits name = "com.google.gwt.logging.Logging"/>                
# To change the default logLevel 
   <set-property name = "gwt.logging.logLevel" value = "SEVERE"/>  
# To enable logging   
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>       
# To disable a popup Handler   
   <set-property name = "gwt.logging.popupHandler" value = "DISABLED" />

ใช้คนตัดไม้เพื่อบันทึกการกระทำของผู้ใช้

/* Create Root Logger */
private static Logger rootLogger = Logger.getLogger("");
...
rootLogger.log(Level.SEVERE, "pageIndex selected: " + event.getValue());
...

ตัวอย่างกรอบการบันทึก

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการสาธิตความสามารถในการบันทึกของแอปพลิเคชัน 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'/>
   <inherits name = "com.google.gwt.logging.Logging"/>
   <!-- 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'/>
   <set-property name = "gwt.logging.logLevel" value="SEVERE"/>          
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>            
   <set-property name = "gwt.logging.popupHandler" value=  "DISABLED" />
</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>
      <iframe src = "javascript:''"id = "__gwt_historyFrame"
         style = "width:0;height:0;border:0"></iframe>
      <h1> Logging Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.client;

import java.util.logging.Level;
import java.util.logging.Logger;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.logging.client.HasWidgetsLogHandler;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   
   private TabPanel tabPanel;
   /* Create Root Logger */
   private static Logger rootLogger = Logger.getLogger("");
   private VerticalPanel customLogArea;

   private void selectTab(String historyToken){
      /*  parse the history token */
      try {
         if (historyToken.substring(0, 9).equals("pageIndex")) {
            String tabIndexToken = historyToken.substring(9, 10);
            int tabIndex = Integer.parseInt(tabIndexToken);
            /* Select the specified tab panel */
            tabPanel.selectTab(tabIndex);
         } else {
            tabPanel.selectTab(0);
         }
      } catch (IndexOutOfBoundsException e) {
         tabPanel.selectTab(0);
      }
   }

   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      tabPanel = new TabPanel();

      /* create pages */
      HTML firstPage = new HTML("<h1>We are on first Page.</h1>");
      HTML secondPage = new HTML("<h1>We are on second Page.</h1>");
      HTML thirdPage = new HTML("<h1>We are on third Page.</h1>");

      String firstPageTitle = "First Page";
      String secondPageTitle = "Second Page";
      String thirdPageTitle = "Third Page";

      Hyperlink firstPageLink = new Hyperlink("1", "pageIndex0");
      Hyperlink secondPageLink = new Hyperlink("2", "pageIndex1");
      Hyperlink thirdPageLink = new Hyperlink("3", "pageIndex2");

      HorizontalPanel linksHPanel = new HorizontalPanel();
      linksHPanel.setSpacing(10);
      linksHPanel.add(firstPageLink);
      linksHPanel.add(secondPageLink);
      linksHPanel.add(thirdPageLink);		

      /* If the application starts with no history token, 
         redirect to a pageIndex0 */
      String initToken = History.getToken();

      if (initToken.length() == 0) {
         History.newItem("pageIndex0");
         initToken = "pageIndex0";
      }		

      tabPanel.setWidth("400");
      /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);

      /* add value change handler to History 
       * this method will be called, when browser's Back button 
       * or Forward button are clicked.
       * and URL of application changes.
       * */
      History.addValueChangeHandler(new ValueChangeHandler<String>() {
         @Override
         public void onValueChange(ValueChangeEvent<String> event) {
            selectTab(event.getValue());	
            rootLogger.log(Level.SEVERE, "pageIndex selected: " 
            + event.getValue());			
         }
      });

      selectTab(initToken);

      VerticalPanel vPanel = new VerticalPanel();

      vPanel.setSpacing(10);
      vPanel.add(tabPanel);
      vPanel.add(linksHPanel);
	  
      customLogArea = new VerticalPanel();	   
      vPanel.add(customLogArea);

      /* an example of using own custom logging area. */
      rootLogger.addHandler(new HasWidgetsLogHandler(customLogArea));

      /* add controls to RootPanel */
      RootPanel.get().add(vPanel);
   }
}

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

ตอนนี้คลิกที่ 1, 2 หรือ 3 คุณสามารถสังเกตได้เมื่อคุณคลิกที่ 1,2 หรือ 3 คุณจะเห็นบันทึกกำลังจะพิมพ์ออกมาโดยแสดง pageIndex ตรวจสอบเอาต์พุตคอนโซลใน Eclipse คุณสามารถดูบันทึกกำลังพิมพ์ในคอนโซล Eclipse ได้เช่นกัน

Fri Aug 31 11:42:35 IST 2012 
SEVERE: pageIndex selected: pageIndex0
Fri Aug 31 11:42:37 IST 2012 
SEVERE: pageIndex selected: pageIndex1
Fri Aug 31 11:42:38 IST 2012 
SEVERE: pageIndex selected: pageIndex2
Fri Aug 31 11:42:40 IST 2012 
SEVERE: pageIndex selected: pageIndex0
Fri Aug 31 11:42:41 IST 2012 
SEVERE: pageIndex selected: pageIndex1
Fri Aug 31 11:42:41 IST 2012 
SEVERE: pageIndex selected: pageIndex2

ตอนนี้อัปเดตตัวอธิบายโมดูล src/com.tutorialspoint/HelloWorld.gwt.xml เพื่อเปิดใช้งาน popupHandler

<?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'/>
   <inherits name = "com.google.gwt.logging.Logging"/>
   <!-- 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'/>
   <set-property name = "gwt.logging.logLevel" value = "SEVERE"/>          
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>            
   <set-property name="gwt.logging.popupHandler" value = "ENABLED" />
</module>

เมื่อคุณพร้อมกับการเปลี่ยนแปลงทั้งหมดแล้วให้โหลดแอปพลิเคชันใหม่โดยรีเฟรชหน้าต่างเบราว์เซอร์ (กด F5 / ปุ่มโหลดซ้ำของเบราว์เซอร์) สังเกตเห็นหน้าต่างป๊อปอัปปรากฏขึ้นที่มุมซ้ายบนของแอปพลิเคชัน

ตอนนี้คลิกที่ 1, 2 หรือ 3 คุณสามารถสังเกตได้เมื่อคุณคลิกที่ 1,2 หรือ 3 คุณจะเห็นบันทึกกำลังพิมพ์โดยแสดง pageIndex ในหน้าต่างป๊อปอัป

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved