GWT - Styl z CSS

Widżety GWT wykorzystują kaskadowe arkusze stylów (CSS) do stylizacji wizualnej. Domyślna nazwa klasy dla każdego komponentu togwt-<classname>.

Na przykład widget Button ma domyślny styl gwt-Button i podobnie jak widgest TextBox ma domyślny styl gwt-TextBox .

Aby nadać wszystkim przyciskom i polom tekstowym większą czcionkę, możesz umieścić następującą regułę w pliku CSS swojej aplikacji

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

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

Domyślnie ani przeglądarka, ani GWT nie tworzą wartości domyślnych idatrybuty widżetów. Musisz jawnie stworzyć unikalny identyfikator dla elementów, których możesz używać w CSS. Aby nadać konkretnemu przyciskowi idmy-button-id większą czcionkę, możesz umieścić następującą regułę w pliku CSS swojej aplikacji -

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

Aby ustawić identyfikator widżetu GWT, pobierz jego element DOM, a następnie ustaw atrybut id w następujący sposób -

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

Interfejsy API stylów CSS

Dostępnych jest wiele interfejsów API do zawieszania ustawień CSS dla dowolnego widżetu GWT. Poniżej znajduje się kilka ważnych interfejsów API, które pomogą Ci w codziennym programowaniu stron internetowych przy użyciu GWT -

Sr.No.	API i opis
1	public void setStyleName(java.lang.String style) Ta metoda wyczyści wszystkie istniejące style i ustawi styl widżetu na nową klasę CSS dostarczoną za pomocą style .
2	public void addStyleName(java.lang.String style) Ta metoda doda drugorzędną lub zależną nazwę stylu do widżetu. Drugorzędna nazwa stylu to dodatkowa nazwa stylu, więc jeśli zastosowano jakiekolwiek poprzednie nazwy stylów, zostaną one zachowane.
3	public void removeStyleName(java.lang.String style) Ta metoda usunie dany styl z widżetu i pozostawi wszelkie inne powiązane z widżetem.
4	public java.lang.String getStyleName() Ta metoda pobiera wszystkie nazwy stylów obiektu w postaci listy oddzielonej spacjami.
5	public void setStylePrimaryName(java.lang.String style) Ta metoda ustawia nazwę głównego stylu obiektu i aktualizuje wszystkie zależne nazwy stylów.

Na przykład zdefiniujmy dwa nowe style, które zastosujemy do tekstu -

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

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

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

Teraz możesz użyć setStyleName (Style), aby zmienić domyślne ustawienie na nowe. Po zastosowaniu poniższej reguły czcionka tekstu stanie się duża

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

Możemy zastosować dodatkową regułę CSS do tego samego widżetu, aby zmienić jego kolor w następujący sposób -

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

Korzystając z powyższej metody, możesz dodać dowolną liczbę stylów do widżetu. Jeśli usuniesz pierwszy styl z widgetu przycisku, drugi styl pozostanie w tekście.

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

Style podstawowe i drugorzędne

Domyślnie nazwa głównego stylu widgetu będzie domyślną nazwą stylu jego klasy widgetu, na przykład gwt-Button dla widgetów Button. Kiedy dodajemy i usuwamy nazwy stylów za pomocą metody AddStyleName (), style te nazywane są stylami drugorzędnymi.

Ostateczny wygląd widżetu jest określany przez sumę wszystkich dodanych do niego stylów drugorzędnych oraz stylu podstawowego. Podstawowy styl widgetu ustawia się za pomocą metody setStylePrimaryName (String) . Aby to zilustrować, załóżmy, że mamy widżet Etykieta. W naszym pliku CSS mamy zdefiniowane następujące reguły -

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

Załóżmy, że chcemy, aby określony widżet etykiety zawsze wyświetlał niebieski tekst, aw niektórych przypadkach używamy większej, pogrubionej czcionki w celu dodatkowego wyróżnienia.

Moglibyśmy zrobić coś takiego -

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

Powiązanie plików CSS

Istnieje wiele podejść do powiązania plików CSS z modułem. Nowoczesne aplikacje GWT zazwyczaj używają kombinacji CssResource i UiBinder. W naszych przykładach używamy tylko pierwszego podejścia.

Użycie tagu <link> na stronie HTML hosta.
Korzystanie z elementu <stylesheet> w pliku XML modułu.
Używać CssResource zawarte w ClientBundle.
Korzystanie z wbudowanego elementu <ui: style> w pliku UiBinder szablon.

Przykład GWT CSS

Ten przykład poprowadzi Cię przez proste kroki, aby zastosować różne reguły CSS do najszerszego GWT. Miejmy działające środowisko Eclipse IDE wraz z wtyczką GWT i wykonaj następujące kroki, aby utworzyć aplikację GWT -

Krok	Opis
1	Utwórz projekt o nazwie HelloWorld pod pakietem com.tutorialspoint, jak wyjaśniono w rozdziale GWT - Tworzenie aplikacji .
2	Zmodyfikuj HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html i HelloWorld.java, jak wyjaśniono poniżej. Resztę plików nie zmieniaj.
3	Skompiluj i uruchom aplikację, aby zweryfikować wynik zaimplementowanej logiki.

Poniżej znajduje się treść zmodyfikowanego deskryptora modułu 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>

Poniżej znajduje się zawartość zmodyfikowanego pliku arkusza stylów 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%;
}

Poniżej znajduje się zawartość zmodyfikowanego pliku hosta HTML war/HelloWorld.html pomieścić dwa przyciski.

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

Miejmy następującą zawartość pliku Java src/com.tutorialspoint/HelloWorld.java który zajmie się dodaniem dwóch przycisków w HTML i zastosuje niestandardowy styl 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);
   }
}

Gdy będziesz gotowy ze wszystkimi wprowadzonymi zmianami, skompilujmy i uruchom aplikację w trybie programistycznym, tak jak zrobiliśmy to w GWT - rozdział Tworzenie aplikacji . Jeśli wszystko jest w porządku z twoją aplikacją, da to następujący wynik -

Teraz spróbuj kliknąć dwa wyświetlone przyciski i obserwuj „Hello, World!” tekst, który zmienia czcionkę po kliknięciu dwóch przycisków.