.gwt-Button { font-size: 150%; } .gwt-TextBox { font-size: 150%; }
#my-button-id { font-size: 150%; }
Button b = new Button(); DOM.setElementAttribute(b.getElement(), "id", "my-button-id")
public void setStyleName(java.lang.String style)
此方法将清除所有现有样式并将小部件样式设置为使用提供的新 CSS 类
风格。
|
public void addStyleName(java.lang.String style)
此方法将向小部件添加辅助或依赖样式名称。辅助样式名称是附加样式名称,因此如果应用了任何以前的样式名称,它们将被保留。
|
public void removeStyleName(java.lang.String style)
此方法将从小部件中删除给定的样式,并保留与小部件关联的任何其他样式。
|
public java.lang.String getStyleName()
此方法获取对象的所有样式名称,以空格分隔的列表形式。
|
public void setStylePrimaryName(java.lang.String style)
此方法设置对象的主要样式名称并更新所有依赖样式名称。
|
.gwt-Big-Text { font-size:150%; } .gwt-Small-Text { font-size:75%; } .gwt-Red-Text { color:red; }
txtWidget.setStyleName("gwt-Big-Text");
txtWidget.addStyleName("gwt-Red-Text");
txtWidget.removeStyleName("gwt-Big-Text");
.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");
步骤 |
在com.tutorialspoint 包下创建一个名为HelloWorld 的项目,如GWT-创建应用程序 章节所述。 |
将HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java修改为下面解释。保持其余文件不变。 |
编译并运行应用程序以验证实现逻辑的结果。 |
<?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>
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> <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>
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); } }