GWT - CSS ile Stil
GWT widget'ları, görsel stil için basamaklı stil sayfalarına (CSS) dayanır. Varsayılan olarak, her bileşenin sınıf adı şöyledir:gwt-<classname>.
Örneğin, Düğme widget'ının varsayılan bir gwt-Button stili vardır ve TextBox widget'ının varsayılan bir gwt-TextBox stili vardır .
Tüm düğmelere ve metin kutularına daha büyük bir yazı tipi vermek için, aşağıdaki kuralı uygulamanızın CSS dosyasına koyabilirsiniz.
.gwt-Button { font-size: 150%; }
.gwt-TextBox { font-size: 150%; }Varsayılan olarak, ne tarayıcı ne de GWT varsayılanı oluşturmaz idwidget'lar için öznitelikler. CSS'de kullanabileceğiniz öğeler için açıkça benzersiz bir kimlik oluşturmalısınız. İd ile belirli bir buton vermek içinmy-button-id Daha büyük bir yazı tipinde, aşağıdaki kuralı uygulamanızın CSS dosyasına koyabilirsiniz -
#my-button-id { font-size: 150%; }Bir GWT widget'ının kimliğini ayarlamak için, DOM Öğesini alın ve ardından aşağıdaki gibi id niteliğini ayarlayın -
Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")CSS Styling API'leri
Herhangi bir GWT widget'ı için CSS ayarını değiştirmek için kullanılabilen birçok API vardır. Aşağıda, GWT kullanarak günlük web programlamada size yardımcı olacak birkaç önemli API verilmiştir -
| Sr.No. | API ve Açıklama |
|---|---|
| 1 | public void setStyleName(java.lang.String style) Bu yöntem mevcut herhangi stilleri silmek ve yeni CSS sınıfı kullanılarak sağlanan Widget stilini ayarlar tarzı . |
| 2 | public void addStyleName(java.lang.String style) Bu yöntem, parçacığa ikincil veya bağımlı bir stil adı ekleyecektir. İkincil stil adı, ek bir stil adıdır, yani daha önce uygulanmış stil adları varsa bunlar tutulur. |
| 3 | public void removeStyleName(java.lang.String style) Bu yöntem, belirli bir stili widget'tan kaldıracak ve diğerlerini widget ile ilişkili olarak bırakacaktır. |
| 4 | public java.lang.String getStyleName() Bu yöntem, nesnenin tüm stil adlarını boşlukla ayrılmış bir liste olarak alır. |
| 5 | public void setStylePrimaryName(java.lang.String style) Bu yöntem, nesnenin birincil stil adını ayarlar ve tüm bağımlı stil adlarını günceller. |
Örneğin, bir metne uygulayacağımız iki yeni stil tanımlayalım -
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}
.gwt-Red-Text {
color:red;
}Artık varsayılan ayarı yeni ayara değiştirmek için setStyleName (Style) ' i kullanabilirsiniz . Aşağıdaki kuralı uyguladıktan sonra, bir metnin yazı tipi büyür
txtWidget.setStyleName("gwt-Big-Text");Aşağıdaki gibi rengini değiştirmek için aynı widget üzerine ikincil bir CSS kuralı uygulayabiliriz -
txtWidget.addStyleName("gwt-Red-Text");Yukarıdaki yöntemi kullanarak, bir parçacığa uygulamak istediğiniz kadar stil ekleyebilirsiniz. İlk stili düğme widget'ından kaldırırsanız, ikinci stil metinde kalmaya devam eder.
txtWidget.removeStyleName("gwt-Big-Text");Birincil ve İkincil Stiller
Varsayılan olarak, bir widget'in birincil stil adı, widget sınıfı için varsayılan stil adı olacaktır; örneğin , Düğme widget'ları için gwt-Button . AddStyleName () yöntemini kullanarak stil adları eklediğimizde ve kaldırdığımızda, bu stillere ikincil stiller denir.
Bir widget'in son görünümü, ona eklenen tüm ikincil stillerin toplamı ve birincil stili tarafından belirlenir. SetStylePrimaryName (String) yöntemiyle bir widget'in birincil stilini ayarlarsınız . Örnek vermek gerekirse, bir Etiket widget'ımız olduğunu varsayalım. CSS dosyamızda aşağıdaki kuralları tanımladık -
.MyText {
color: blue;
}
.BigText {
font-size: large;
}
.LoudText {
font-weight: bold;
}Belirli bir etiket parçacığının her zaman mavi metni görüntülemesini istediğimizi varsayalım ve bazı durumlarda daha fazla vurgu için daha büyük, kalın bir yazı tipi kullanın.
Bunun gibi bir şey yapabiliriz -
// 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 Dosyalarını İlişkilendirme
CSS dosyalarını modülünüzle ilişkilendirmek için birden fazla yaklaşım vardır. Modern GWT uygulamaları genellikle CssResource ve UiBinder'in bir kombinasyonunu kullanır. Örneklerimizde sadece ilk yaklaşımı kullanıyoruz.
Barındıran HTML sayfasında bir <link> etiketi kullanma.
Modül XML dosyasında <stylesheet> öğesini kullanma.
Bir CssResource içinde bulunan ClientBundle.
Bir satır içi <ui: style> öğesi kullanma UiBinder şablonu.
GWT CSS Örneği
Bu örnek, sizi GWT pencere aracınıza farklı CSS kuralları uygulamak için basit adımlardan geçirecektir. GWT eklentisi ile birlikte Eclipse IDE'yi çalıştıralım ve bir GWT uygulaması oluşturmak için aşağıdaki adımları izleyin -
| Adım | Açıklama |
|---|---|
| 1 | GWT - Uygulama Oluştur bölümünde açıklandığı gibi com.tutorialspoint paketinin altında HelloWorld adıyla bir proje oluşturun . |
| 2 | Değiştir HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html ve HelloWorld.java olarak aşağıda açıklanmıştır. Geri kalan dosyaları değiştirmeden tutun. |
| 3 | Uygulanan mantığın sonucunu doğrulamak için uygulamayı derleyin ve çalıştırın. |
Değiştirilmiş modül tanımlayıcısının içeriği aşağıdadır 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>Değiştirilen Stil Sayfası dosyasının içeriği aşağıdadır 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%;
}Aşağıda, değiştirilmiş HTML ana bilgisayar dosyasının içeriği verilmiştir war/HelloWorld.html iki düğmeyi barındırmak için.
<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>Aşağıdaki Java dosyası içeriğine sahip olalım src/com.tutorialspoint/HelloWorld.java bu, HTML'ye iki düğme eklemeye özen gösterir ve özel CSS stilini uygular.
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);
}
}Yapılan tüm değişikliklere hazır olduğunuzda, uygulamayı GWT - Uygulama Oluştur bölümünde yaptığımız gibi geliştirme modunda derleyip çalıştıralım . Başvurunuzda her şey yolundaysa, bu aşağıdaki sonucu verecektir -
Şimdi görüntülenen iki düğmeyi tıklamayı deneyin ve "Merhaba Dünya!" iki düğmeye tıklandığında yazı tipini değiştirmeye devam eden metin.