面向 Java 开发人员的 Ajax: 探索 Google Web Toolkit
http://tech.ddvip.com 2006年11月20日 社区交流
本文详细介绍面向 Java 开发人员的 Ajax: 探索 Google Web Toolkit
图 2. 基本 GUI 布局
用 CSS 添加样式
呈现的 Web 页面看起来很傻，所以它将从 CSS 样式规则中汲取一些优点。可以用两种方式为 GWT 应用程序添加样式。首先，默认情况下，每个小部件都有一个 CSS 类名，其形式为project-widget。例如，gwt-Button和gwt-RadioButton是两个核心 GWT 小部件类名。面板通常被实现为一堆嵌套式表格，所以没有默认的类名。
每个小部件类型一个类名（classname-per-widget-type）的默认方法使得在整个应用程序中一致地设置小部件样式变得非常容易。当然，普通的 CSS 选择器规则也可以应用，所以可以根据小部件的上下文，用选择器规则在同一小部件上应用不同的样式。要得到更多的灵活性，则可以调用小部件的setStyleName()和addStyleName()方法，临时替换和增加小部件的默认类名。
清单 3 组合了这些方法，把样式应用到 Weather Reporter 应用程序的输入面板上。通过对inputPanel.setStyleName("weather-input-panel");的调用，在 Weather.java 中创建了weather-input-panel类名。
清单 3. 将 CSS 样式应用到 Weather Reporter 应用程序的输入面板
/* Style the input panel itself */
.weather-input-panel {
background-color: #AACCFF;
border: 2px solid #3366CC;
font-weight: bold;
}
/* Apply padding to every element within the input panel */
.weather-input-panel * {
padding: 3px;
}
/* Override the default button style */
.gwt-Button {
background-color: #3366CC;
color: white;
font-weight: bold;
border: 1px solid #AACCFF;
}
/* Apply a hover effect to the button */
.gwt-Button:hover {
background-color: #FF0084;
}图 3 显示了应用程序被替换成这些样式之后的情况：
来源：ibm 作者：Philip McCarthy 责编：豆豆技术应用
正在加载评论...