Java Me Games

在GWT的文檔里說，大致上CSS的命名規(guī)則是這樣的"[project]-[widget]，比如gwt-Button，你可以在CSS里定義如下：
.gwt-Button{font-size:150%;}
但是這樣的說明是不充分的，所以這里有必要把他真正的樣式表來列一下，以供查看。

AbsolutePanel
用一個(gè)DIV來實(shí)現(xiàn)，默認(rèn)的設(shè)置了overflow:hidden。這個(gè)DIV里邊的內(nèi)容可以用一個(gè)x,y坐標(biāo)來確定位置。
<div style="overflow: hidden;"></div>

Botton
就是一個(gè)正常的HTML的Button.默認(rèn)的樣式名字是gwt-Button.
<button class="gwt-Button"/>

CellPanel
用一個(gè)table來實(shí)現(xiàn)，沒有默認(rèn)的樣式，可以設(shè)置border,cell-spacing屬性。
<table></table>

CheckBox
就是正常的Html的CheckBox，默認(rèn)的樣式名字為gwt-CheckBox，會自動生成一個(gè)不重復(fù)的id，checkN(N是一個(gè)整數(shù))，可以使用checked,defaultChecked,disabled等屬性。默認(rèn)樣式是空的。
<checkbox class="gwt-CheckBox">

DeckPanel
用一個(gè)DIV來實(shí)現(xiàn)，包含了一系列的子對象。每一個(gè)對象可以用單獨(dú)的display屬性來設(shè)置是否顯示。這個(gè)有點(diǎn)像Swing里面的CardLayout的方式有點(diǎn)像，添加了一系列的組件，但是只能顯示一個(gè)。
<div style="width: 100%; height: 100%"></div>

DialogBox
缺省的樣式有g(shù)wt-DialogBox，Caption兩個(gè)都是相關(guān)。用一個(gè)DIV來實(shí)現(xiàn)，標(biāo)題Caption也是一個(gè)DIV。
<div class="gwt-DialogBox">
　<table cell-spacin="0" cell-padding="0">
　　<tbody>
　　　<tr><td><div class="Caption">Caption</div></td></tr>
　　　<tr><td>Content</td></tr>
　　</tbody>
　</table>
</div>

DockPanel
用一個(gè)Table來實(shí)現(xiàn)，cell-spacin,cell-padding都默認(rèn)為0，為了實(shí)現(xiàn)DockPanel里邊的tr,td比較麻煩一些。
<table cell-spacing="0" cell-padding="0">
　<tbody></tbody>
</table>

FlexTable
只是一個(gè)簡單的Table，沒什么特別的東西。
<table>
　<tbody></tbody>
</table>

FlowPanel
用一個(gè)DIV來實(shí)現(xiàn)，設(shè)定里display屬性為inline。
<div style="display:inline;">content</div>

FocusPanel
只是一個(gè)DIV，重要的是它聲明了focusevents,keyevents,onclick和mouseevents，對對于那些沒有聲明的這些事件"子組件"很有用處。
<div>content<div>

FocusWidget
可以是任何組件，只是它可以幫助捕獲Focusevents,keyevents。

Frame
是一個(gè)IFrame,他的默認(rèn)的樣式是gwt-Frame
<iframe></iframe>

Grid
就是一個(gè)Table
<table><tbody></tbody></table>

HTML
一個(gè)DIV，默認(rèn)的樣式是gwt-HTML，可以設(shè)定屬性white-space為normal,nowrap。

HTMLPanel
就是一個(gè)DIV，可以容納HTML或是其他組件，不適用gwt-HTML樣式。最有用的屬性就是createUniqueId，可以設(shè)定一個(gè)id,HTMLPanel_N。和前面的CheckBox的checkN,相比，這里用大寫字母和下劃線。看起來多少有點(diǎn)怪異。
<div>content</div>

HTMLTable
沒有疑問，這是用一個(gè)Table實(shí)現(xiàn)的，重要的是，它是Grid,FlexTable的父類。提供了設(shè)定每行或是每一個(gè)單元格的樣式設(shè)定的方法。表格中沒有thead。假如要設(shè)定表頭的話，可能通過設(shè)定第一行的樣式來區(qū)別。
<table><tbody></tbody></table>
table.getRowFormtter(0).setStyleName("style");

HorizontalPanel
水平排列的面板，用一個(gè)只有一行的表格實(shí)現(xiàn)。
<table cell-spacing="0" cell-padding="0">
　<tbody>
　　<tr>
　　　<td style="display: static; vertical-align: top;" align="left">Item 1</td>
　　　<td style="display: static; vertical-align: top;" align="left">Item 2</td>
　　</tr>
　</tbody>
</table>

HyperLink
一個(gè)有定義了錨點(diǎn)的DIV，默認(rèn)的樣式名：gwt-HyperLink
<div></div>

Image
沒有問題，肯定是IMG.gwt-Image樣式?jīng)]有實(shí)現(xiàn)。
<img src="..."/>

Label
一個(gè)DIV，默認(rèn)的樣式是gwt-Label。Label不能解析HTML內(nèi)容，假如你想要的話，可以用HTML來代替，兩者都提供鼠標(biāo)事件。Label會自動換行，但是你也可以通過setWordWrap來修改。
<div class="gwt-Label">content</div>

ListBox
就是用Select和Option來實(shí)現(xiàn)。gwt-ListBox樣式?jīng)]有被實(shí)現(xiàn)。可以設(shè)定selected,size,multples等屬性。

MenuBar
用一個(gè)包含表格的DIV實(shí)現(xiàn)。一個(gè)水平的菜單，只有一行，用單元格來設(shè)置菜單項(xiàng)，一個(gè)垂直的菜單，用行來區(qū)分菜單項(xiàng)。gwt-MenuBar只是設(shè)定外層的DIV的樣式。
<div class="gwt-MenuBar">
　<table>
　　<tbody>
　　　<tr>
　　　　<td class="gwt-MenuItem">text or html</td>
　　　　<td class="gwt-MenuItem">text or html</td>
　　　</tr>
　　　<!--一個(gè)垂直菜單的例子
　　　<tr><td class="gwt-MenuItem">text or html</td></tr>
　　　<tr><td class="gwt-MenuItem">text or html</td></tr>
　　　-->
　　</tbody>
　</table>
</div>

MenuItem
一個(gè)菜單項(xiàng)就是在菜單條中的一個(gè)單元格。它的默認(rèn)屬性是gwt-MenuItem.選中的時(shí)候有一個(gè)附加的屬性，gwt-MenuItem-selected.在菜單項(xiàng)默認(rèn)的樣式class="gwt-MenuItem",在選中的時(shí)候就改變成class="gwt-MenuItem gwt-MenuItem-selected".

PasswordTextBox
用Password實(shí)現(xiàn)，使用gwt-PasswordTextBox樣式。

PopupPanel
只是一個(gè)DIV.

RadioButton
用一個(gè)INPUT實(shí)現(xiàn)，使用gwt-RadioButton樣式。

RootPanel
一個(gè)RootPanel可以附加到任何的組件上，但是以前屬于這個(gè)組件的所有的內(nèi)容都會被清除。假如你仔細(xì)想想，你會發(fā)現(xiàn)除了初始化之外，這個(gè)組件還有很多用處。

ScrollPanel
一個(gè)Div設(shè)定了overflow屬性為scroll 或auto.
<div style="overflow: auto;">
　content
</div>

SimplePanel
就是一個(gè)Div.

StackPanel
用一個(gè)表格來實(shí)現(xiàn)，每一個(gè)組用兩行來保存，第一行放了標(biāo)簽，第二行放了內(nèi)容。默認(rèn)的這個(gè)表格使用gwt-StackPanel樣式，標(biāo)簽行用了gwt-StackPanelItem和gwt-StackPanelItem-selected.當(dāng)一個(gè)標(biāo)簽被選中的時(shí)候，它的樣式就由原來的gwt-StackPanelItem替換成為gwt-StackPanelItem-seleted.
<table class="gwt-StackPanel" cell-spacing="0" cell-padding="0">
　<tbody>
　　<tr>
　　　<td class="gwt-StackPanelItem" height="1px">text/html</td>
　　</tr>
　　<tr>
　　　<td height="100%" valign="top">
　　　　content -- a widget
　　　</td>
　　</tr>
　</tbody>
</table>

TabBar
TabBar使用一個(gè)HorizontalPanel來實(shí)現(xiàn)，所以它也是一個(gè)Table,表格的樣式是gwt-TabBar。對于第一個(gè)標(biāo)簽，通常是一個(gè)空的，它的樣式是gwt-TabBarFirst,就是為了裝飾,最后也會加上一個(gè)空的標(biāo)簽，指定樣式為gwt-TabBarRest。當(dāng)一個(gè)標(biāo)簽被選中的時(shí)候，gwt-TabBarItem-selected的樣式會附加到樣式中，這點(diǎn)和MenuItem是一樣的。
<table class="gwt-TabBar" cell-spacing="0" cell-padding="0">
　<tbody>
　　<tr>
　　　<td class="gwt-TabBarFirst" style="height: 100%;"><div class="gwt-HTML" style="height: 100%;">&amp;nbsp;</div></td>
　　　<td>Tab #1</td>
　　　<td>Tab #2</td>
　　　<td class="gwt-TabBarRest" style="width: 100%;"><div class="gwt-HTML" style="height: 100%;">&amp;nbsp;</div></td>
　　</tr>
　</tbody>
</table>

TabPanel
用一個(gè)VerticalPanel來實(shí)現(xiàn)，包含了一個(gè)TabBar和一個(gè)DeckPanel，這樣就嵌套幾層表格，樣式gwt-TabPanel用到最外層表格。gwt-TabBar用到TabBar,gwt-TabPanelBottom用到DeckPanel的DIV上了。需要注意的是TabBar獲取了width:100%樣式，這樣你就知道TabBar中的gwt-TabBarRest樣式的必要了。
<table class="gwt-TabPanel" cell-spacing="0" cell-padding="0">
　<tbody>
　　<tr>
　　　<td>
　　　　<table class="gwt-TabBar" style="width: 100%;" cell-spacing="0" cell-padding="0">
　　　　　<tbody>
　　　　　　<tr>
　　　　　　　<td class="gwt-TabBarFirst" style="height: 100%;"><div class="gwt-HTML" style="height: 100%;">&amp;nbsp;</div></td>
　　　　　　　<td class="gwt-TabBarRest" style="width: 100%;"><div class="gwt-HTML" style="height: 100%;">&amp;nbsp;</div></td>
　　　　　　</tr>
　　　　　</tbody>
　　　　</table>
　　　</td>
　　</tr>
　　<tr>
　　　<td>
　　　　<div class="gwt-TabPanelBottom">
　　　　</div>
　　　</td>
　　</tr>
　</tbody>
</table>

TextArea
就是一個(gè)TextArea,默認(rèn)的樣式為gwt-TextArea.

TextBox
<input type="text" class="gwt-TextBox" />

Tree
就是一個(gè)包含了多個(gè)TreeItem的Div，默認(rèn)樣式gwt-Tree,設(shè)定overflow:auto.
<div class="gwt-Tree" style="overflow: auto;">
　<div style="position: relative; margin-left: 16;" (handle)>
　　<table>
　　　<tr>
　　　　<td></td>
　　　　<td></td>
　　　</tr>
　　</table>
　</div>
</div>

TreeItem
用一個(gè)包含了一個(gè)表格的DIV來實(shí)現(xiàn)。默認(rèn)的樣式gwt-TreeItem和gwt-TreeItem-selected，來修飾里面的內(nèi)容。但選中的時(shí)候gwt-TreeItem-selected會替換gwt-TreeItem。這個(gè)StackPanel是一樣的。
<div style="position: relative; margin-left: 16; white-space: nowrap" (handle)>
　<table style="white-space: nowrap;">
　　<tr>
　　　<td style="vertical-align: middle;"><img src="tree_white.gif" /></td>
　　　<td style="vertical-align: middle;">content</td>
　　</tr>
　</table>
　children
</div>

VerticalPanel
用一個(gè)表格來實(shí)現(xiàn)，所有的東西按行來排列。
<table cell-spacing="0" cell-padding="0">
　<tbody>
　　<tr><td style="display: static; vertical-align: top;" align="left">Item 1</td></tr>
　　<tr><td style="display: static; vertical-align: top;" align="left">Item 2</td></tr>
　</tbody>
</table>

參考：
http://blogs.nubgames.com/code/?p=13

Technorati : gwt css