在GWT的文檔里說(shuō)，大致上CSS的命名規(guī)則是這樣的"[project]-[widget]，比如gwt-Button，你可以在CSS里定義如下：

.gwt-Button{font-size:150%;}

但是這樣的說(shuō)明是不充分的，所以這里有必要把他真正的樣式表來(lái)列一下，以供查看。

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

Botton 就是一個(gè)正常的HTML的Button.默認(rèn)的樣式名字是gwt-Button.

CellPanel

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

CheckBox

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

DeckPanel

用一個(gè)DIV來(lái)實(shí)現(xiàn)，包含了一系列的子對(duì)象。每一個(gè)對(duì)象可以用單獨(dú)的display屬性來(lái)設(shè)置是否顯示。這個(gè)有點(diǎn)像Swing里面的CardLayout的方式有點(diǎn)像，添加了一系列的組件，但是只能顯示一個(gè)。

DialogBox

缺省的樣式有g(shù)wt-DialogBox，Caption兩個(gè)都是相關(guān)。用一個(gè)DIV來(lái)實(shí)現(xiàn)，標(biāo)題Caption也是一個(gè)DIV。

Caption

Content

DockPanel

用一個(gè)Table來(lái)實(shí)現(xiàn)，cell-spacin,cell-padding都默認(rèn)為0，為了實(shí)現(xiàn)DockPanel里邊的tr,td比較麻煩一些。

FlexTable

只是一個(gè)簡(jiǎn)單的Table，沒(méi)什么特別的東西。

FlowPanel

用一個(gè)DIV來(lái)實(shí)現(xiàn)，設(shè)定里display屬性為inline。

content

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

content

FocusWidget

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

Frame

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

Grid

就是一個(gè)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,相比，這里用大寫字母和下劃線。看起來(lái)多少有點(diǎn)怪異。

content

HTMLTable

沒(méi)有疑問(wèn)，這是用一個(gè)Table實(shí)現(xiàn)的，重要的是，它是Grid,FlexTable的父類。提供了設(shè)定每行或是每一個(gè)單元格的樣式設(shè)定的方法。表格中沒(méi)有thead。假如要設(shè)定表頭的話，可能通過(guò)設(shè)定第一行的樣式來(lái)區(qū)別。

table.getRowFormtter(0).setStyleName("style");

HorizontalPanel 水平排列的面板，用一個(gè)只有一行的表格實(shí)現(xiàn)。

Item 1

Item 2

HyperLink

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

Image

沒(méi)有問(wèn)題，肯定是IMG.gwt-Image樣式?jīng)]有實(shí)現(xiàn)。

Label

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

content

ListBox

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

MenuBar

用一個(gè)包含表格的DIV實(shí)現(xiàn)。一個(gè)水平的菜單，只有一行，用單元格來(lái)設(shè)置菜單項(xiàng)，一個(gè)垂直的菜單，用行來(lái)區(qū)分菜單項(xiàng)。gwt-MenuBar只是設(shè)定外層的DIV的樣式。

text or html

text or html

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)容都會(huì)被清除。假如你仔細(xì)想想，你會(huì)發(fā)現(xiàn)除了初始化之外，這個(gè)組件還有很多用處。

ScrollPanel 一個(gè)Div設(shè)定了overflow屬性為scroll 或auto.

content

SimplePanel

就是一個(gè)Div.

StackPanel

用一個(gè)表格來(lái)實(shí)現(xiàn)，每一個(gè)組用兩行來(lái)保存，第一行放了標(biāo)簽，第二行放了內(nèi)容。默認(rèn)的這個(gè)表格使用gwt-StackPanel樣式，標(biāo)簽行用了gwt-StackPanelItem和gwt-StackPanelItem-selected.當(dāng)一個(gè)標(biāo)簽被選中的時(shí)候，它的樣式就由原來(lái)的gwt-StackPanelItem替換成為gwt-StackPanelItem-seleted.

text/html

content -- a widget

TabBar

TabBar使用一個(gè)HorizontalPanel來(lái)實(shí)現(xiàn)，所以它也是一個(gè)Table,表格的樣式是gwt-TabBar。對(duì)于第一個(gè)標(biāo)簽，通常是一個(gè)空的，它的樣式是gwt-TabBarFirst,就是為了裝飾,最后也會(huì)加上一個(gè)空的標(biāo)簽，指定樣式為gwt-TabBarRest。當(dāng)一個(gè)標(biāo)簽被選中的時(shí)候，gwt-TabBarItem-selected的樣式會(huì)附加到樣式中，這點(diǎn)和MenuItem是一樣的。

 

Tab #1

Tab #2

 

TabPanel

用一個(gè)VerticalPanel來(lái)實(shí)現(xiàn)，包含了一個(gè)TabBar和一個(gè)DeckPanel，這樣就嵌套幾層表格，樣式gwt-TabPanel用到最外層表格。gwt-TabBar用到TabBar,gwt-TabPanelBottom用到DeckPanel的DIV上了。需要注意的是TabBar獲取了width:100%樣式，這樣你就知道TabBar中的gwt-TabBarRest樣式的必要了。

   

TextArea

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

TextBox

Tree

就是一個(gè)包含了多個(gè)TreeItem的Div，默認(rèn)樣式gwt-Tree,設(shè)定overflow:auto.

TreeItem

用一個(gè)包含了一個(gè)表格的DIV來(lái)實(shí)現(xiàn)。默認(rèn)的樣式gwt-TreeItem和gwt-TreeItem-selected，來(lái)修飾里面的內(nèi)容。但選中的時(shí)候gwt-TreeItem-selected會(huì)替換gwt-TreeItem。這個(gè)StackPanel是一樣的。

content

children

VerticalPanel

用一個(gè)表格來(lái)實(shí)現(xiàn)，所有的東西按行來(lái)排列。

Item 1

Item 2

Technorati : gwt css

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的java games_Java Me Games的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。