GWT - Stile con CSS
I widget GWT si basano su fogli di stile a cascata (CSS) per lo stile visivo. Per impostazione predefinita, il nome della classe per ogni componente ègwt-<classname>.
Ad esempio, il widget Button ha uno stile predefinito gwt-Button e in modo simile il widget TextBox ha uno stile predefinito gwt-TextBox .
Per dare a tutti i pulsanti e le caselle di testo un carattere più grande, potresti inserire la seguente regola nel file CSS della tua applicazione
.gwt-Button { font-size: 150%; }
.gwt-TextBox { font-size: 150%; }Per impostazione predefinita, né il browser né GWT crea l'impostazione predefinita idattributi per i widget. È necessario creare esplicitamente un ID univoco per gli elementi che è possibile utilizzare in CSS. Per dare un particolare pulsante con idmy-button-id un carattere più grande, potresti inserire la seguente regola nel file CSS della tua applicazione:
#my-button-id { font-size: 150%; }Per impostare l'id per un widget GWT, recupera il suo elemento DOM e quindi imposta l'attributo id come segue:
Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")API CSS Styling
Sono disponibili molte API per bloccare le impostazioni CSS per qualsiasi widget GWT. Di seguito sono riportate alcune API importanti che ti aiuteranno nella programmazione web quotidiana utilizzando GWT:
| Sr.No. | API e descrizione |
|---|---|
| 1 | public void setStyleName(java.lang.String style) Questo metodo cancellerà tutti gli stili esistenti e imposterà lo stile del widget sulla nuova classe CSS fornita usando lo stile . |
| 2 | public void addStyleName(java.lang.String style) Questo metodo aggiungerà un nome di stile secondario o dipendente al widget. Un nome di stile secondario è un nome di stile aggiuntivo, quindi se sono stati applicati nomi di stile precedenti, vengono mantenuti. |
| 3 | public void removeStyleName(java.lang.String style) Questo metodo rimuoverà lo stile dato dal widget e lascerà tutti gli altri associati al widget. |
| 4 | public java.lang.String getStyleName() Questo metodo ottiene tutti i nomi di stile dell'oggetto, come un elenco separato da spazi. |
| 5 | public void setStylePrimaryName(java.lang.String style) Questo metodo imposta il nome di stile principale dell'oggetto e aggiorna tutti i nomi di stile dipendenti. |
Ad esempio, definiamo due nuovi stili che applicheremo a un testo:
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}
.gwt-Red-Text {
color:red;
}Ora puoi usare setStyleName (Style) per cambiare l'impostazione predefinita in una nuova impostazione. Dopo aver applicato la regola seguente, il carattere di un testo diventerà grande
txtWidget.setStyleName("gwt-Big-Text");Possiamo applicare una regola CSS secondaria sullo stesso widget per cambiarne il colore come segue:
txtWidget.addStyleName("gwt-Red-Text");Usando il metodo sopra puoi aggiungere tutti gli stili che desideri applicare su un widget. Se rimuovi il primo stile dal widget del pulsante, il secondo stile rimarrà comunque con il testo.
txtWidget.removeStyleName("gwt-Big-Text");Stili primari e secondari
Per impostazione predefinita, il nome dello stile principale di un widget sarà il nome dello stile predefinito per la sua classe widget, ad esempio gwt-Button per i widget Button. Quando aggiungiamo e rimuoviamo nomi di stile utilizzando il metodo AddStyleName (), questi stili vengono chiamati stili secondari.
L'aspetto finale di un widget è determinato dalla somma di tutti gli stili secondari aggiunti, più il suo stile principale. Si imposta lo stile principale di un widget con il metodo setStylePrimaryName (String) . Per illustrare, supponiamo di avere un widget Etichetta. Nel nostro file CSS, abbiamo le seguenti regole definite:
.MyText {
color: blue;
}
.BigText {
font-size: large;
}
.LoudText {
font-weight: bold;
}Supponiamo di volere che un particolare widget di etichetta mostri sempre il testo blu e, in alcuni casi, utilizzi un carattere più grande e in grassetto per maggiore enfasi.
Potremmo fare qualcosa del genere -
// 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");Associazione di file CSS
Esistono diversi approcci per associare file CSS al modulo. Le moderne applicazioni GWT utilizzano in genere una combinazione di CssResource e UiBinder. Usiamo solo il primo approccio nei nostri esempi.
Utilizzando un tag <link> nella pagina HTML host.
Utilizzando l'elemento <stylesheet> nel file XML del modulo.
Usare un CssResource contenuto in un file ClientBundle.
Utilizzando un elemento <ui: style> inline in un file UiBinder modello.
Esempio CSS GWT
Questo esempio ti guiderà attraverso semplici passaggi per applicare diverse regole CSS sul tuo widget GWT. Facci funzionare l'IDE Eclipse insieme al plug GWT e segui i seguenti passaggi per creare un'applicazione GWT:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione . |
| 2 | Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata. |
Di seguito è riportato il contenuto del descrittore del modulo modificato 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>Di seguito è riportato il contenuto del file del foglio di stile modificato 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%;
}Di seguito è riportato il contenuto del file host HTML modificato war/HelloWorld.html per ospitare due pulsanti.
<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>Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che si occuperà di aggiungere due pulsanti in HTML e applicherà lo stile CSS personalizzato.
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);
}
}Una volta che sei pronto con tutte le modifiche fatte, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:
Ora prova a fare clic sui due pulsanti visualizzati e osserva "Hello, World!" testo che continua a cambiare il suo carattere facendo clic sui due pulsanti.