GWT - สไตล์ด้วย CSS

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

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