GWT - Tạo kiểu với CSS

Các tiện ích con GWT dựa trên các biểu định kiểu xếp tầng (CSS) để tạo kiểu trực quan. Theo mặc định, tên lớp cho mỗi thành phần làgwt-<classname>.

Ví dụ: tiện ích Nút có kiểu mặc định là gwt-Button và cách tương tự , tiện ích TextBox có kiểu mặc định là gwt-TextBox .

Để cung cấp cho tất cả các nút và hộp văn bản một phông chữ lớn hơn, bạn có thể đặt quy tắc sau vào tệp CSS của ứng dụng của mình

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

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

Theo mặc định, cả trình duyệt và GWT đều không tạo mặc định idthuộc tính cho vật dụng. Bạn phải tạo một cách rõ ràng một id duy nhất cho các phần tử mà bạn có thể sử dụng trong CSS. Để cung cấp một nút cụ thể với idmy-button-id phông chữ lớn hơn, bạn có thể đặt quy tắc sau vào tệp CSS của ứng dụng -

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

Để đặt id cho tiện ích con GWT, hãy truy xuất Phần tử DOM của nó rồi đặt thuộc tính id như sau:

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

API tạo kiểu CSS

Có nhiều API có sẵn để cài đặt CSS hangle cho bất kỳ tiện ích GWT nào. Sau đây là một số API quan trọng sẽ giúp bạn lập trình web hàng ngày bằng GWT -

Sr.No.	API & Mô tả
1	public void setStyleName(java.lang.String style) Phương thức này sẽ xóa mọi kiểu hiện có và đặt kiểu tiện ích thành lớp CSS mới được cung cấp bằng cách sử dụng kiểu .
2	public void addStyleName(java.lang.String style) Phương pháp này sẽ thêm tên kiểu phụ hoặc phụ thuộc vào tiện ích con. Tên kiểu phụ là tên kiểu bổ sung, vì vậy nếu có bất kỳ tên kiểu nào trước đó được áp dụng, chúng sẽ được giữ nguyên.
3	public void removeStyleName(java.lang.String style) Phương pháp này sẽ xóa kiểu đã cho khỏi tiện ích và để lại bất kỳ kiểu nào khác được liên kết với tiện ích.
4	public java.lang.String getStyleName() Phương thức này nhận tất cả các tên kiểu của đối tượng, dưới dạng danh sách được phân tách bằng dấu cách.
5	public void setStylePrimaryName(java.lang.String style) Phương thức này đặt tên kiểu chính của đối tượng và cập nhật tất cả các tên kiểu phụ thuộc.

Ví dụ: hãy xác định hai kiểu mới mà chúng ta sẽ áp dụng cho văn bản -

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

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

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

Bây giờ bạn có thể sử dụng setStyleName (Style) để thay đổi cài đặt mặc định thành cài đặt mới. Sau khi áp dụng quy tắc dưới đây, phông chữ của văn bản sẽ trở nên lớn

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

Chúng ta có thể áp dụng quy tắc CSS phụ trên cùng một tiện ích con để thay đổi màu sắc của nó như sau:

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

Sử dụng phương pháp trên, bạn có thể thêm bao nhiêu kiểu tùy thích để áp dụng trên một widget. Nếu bạn xóa kiểu đầu tiên khỏi tiện ích nút thì kiểu thứ hai sẽ vẫn còn với văn bản.

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

Kiểu chính & kiểu phụ

Theo mặc định, tên kiểu chính của tiện ích sẽ là tên kiểu mặc định cho lớp tiện ích của nó, ví dụ gwt-Button cho các tiện ích Nút. Khi chúng ta thêm và xóa tên kiểu bằng phương thức AddStyleName (), những kiểu đó được gọi là kiểu phụ.

Giao diện cuối cùng của tiện ích con được xác định bằng tổng tất cả các kiểu phụ được thêm vào nó, cộng với kiểu chính của nó. Bạn đặt kiểu chính của tiện ích con bằng phương thức setStylePrimaryName (String) . Để minh họa, giả sử chúng ta có một tiện ích Nhãn. Trong tệp CSS của chúng tôi, chúng tôi đã xác định các quy tắc sau:

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

Giả sử chúng ta muốn một tiện ích nhãn cụ thể luôn hiển thị văn bản màu xanh lam và trong một số trường hợp, sử dụng phông chữ đậm hơn, lớn hơn để tăng thêm điểm nhấn.

Chúng ta có thể làm điều gì đó như thế này -

// 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");

Liên kết các tệp CSS

Có nhiều cách tiếp cận để liên kết tệp CSS với mô-đun của bạn. Các ứng dụng GWT hiện đại thường sử dụng kết hợp CssResource và UiBinder. Chúng tôi chỉ sử dụng cách tiếp cận đầu tiên trong các ví dụ của chúng tôi.

Sử dụng thẻ <link> trong trang HTML máy chủ.
Sử dụng phần tử <stylesheet> trong tệp XML mô-đun.
Sử dụng một CssResource chứa trong một ClientBundle.
Sử dụng phần tử <ui: style> nội tuyến trong UiBinder bản mẫu.

Ví dụ về CSS GWT

Ví dụ này sẽ hướng dẫn bạn qua các bước đơn giản để áp dụng các quy tắc CSS khác nhau trên GWT của bạn rộng nhất. Hãy để chúng tôi có Eclipse IDE đang hoạt động cùng với trình cắm GWT và làm theo các bước sau để tạo một ứng dụng GWT -

Bươc	Sự miêu tả
1	Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint như được giải thích trong chương GWT - Tạo ứng dụng .
2	Sửa đổi HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html và HelloWorld.java như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi.
3	Biên dịch và chạy ứng dụng để xác minh kết quả của logic được triển khai.

Sau đây là nội dung của bộ mô tả mô-đun đã sửa đổi 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>

Sau đây là nội dung của tệp Style Sheet đã sửa đổi 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%;
}

Sau đây là nội dung của tệp máy chủ HTML đã sửa đổi war/HelloWorld.html để chứa hai nút.

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

Hãy để chúng tôi có nội dung sau của tệp Java src/com.tutorialspoint/HelloWorld.java sẽ đảm nhận việc thêm hai nút trong HTML và sẽ áp dụng kiểu CSS tùy chỉnh.

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

Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ phát triển như chúng tôi đã làm trong chương GWT - Tạo ứng dụng . Nếu mọi thứ đều ổn với ứng dụng của bạn, điều này sẽ tạo ra kết quả sau:

Bây giờ hãy thử nhấp vào hai nút được hiển thị và quan sát "Hello, World!" văn bản tiếp tục thay đổi phông chữ của nó khi nhấp vào hai nút.