[Java] GWT的HTML实现与CSS的命名规则

博客首页 » Java GWT的HTML实现与CSS的命名规则

发布于 09 Dec 2014 01:51
标签 blog
GWT HTML实现与CSS的命名规则

http://www.blogjava.net/cnjmgs/archive/2007/01/06/92141.html

GWT里面的CSS样式单

在GWT的文档里说,大致上CSS的命名规则是这样的"[project]-[widget],比如gwt-Button,你可以在CSS里定义如下:
.gwt-Button{font-size:150%;}
但是这样的说明是不充分的,所以这里有必要把他真正的样式表来列一下,以供查看。

AbsolutePanel

用一个DIV来实现,默认的设置了overflow:hidden。这个DIV里边的内容可以用一个x,y坐标来确定位置。
<div style="overflow: hidden;"></div>

Botton

就是一个正常的HTML的Button.默认的样式名字是gwt-Button.
<button class="gwt-Button"/>

CellPanel

用一个table来实现,没有默认的样式,可以设置border,cell-spacing属性。
<table></table>

CheckBox

就是正常的Html的CheckBox,默认的样式名字为gwt-CheckBox,会自动生成一个不重复的id,checkN(N是一个整数),可以使用checked,defaultChecked,disabled等属性。默认样式是空的。
<checkbox class="gwt-CheckBox">

DeckPanel

用一个DIV来实现,包含了一系列的子对象。每一个对象可以用单独的display属性来设置是否显示。这个有点像Swing里面的CardLayout的方式有点像,添加了一系列的组件,但是只能显示一个。
<div style="width: 100%; height: 100%"></div>

DialogBox

缺省的样式有gwt-DialogBox,Caption两个都是相关。用一个DIV来实现,标题Caption也是一个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

用一个Table来实现,cell-spacin,cell-padding都默认为0,为了实现DockPanel里边的tr,td比较麻烦一些。
<table cell-spacing="0" cell-padding="0">
 <tbody></tbody>
</table>

FlexTable

只是一个简单的Table,没什么特别的东西。
<table>
 <tbody></tbody>
</table>

FlowPanel

用一个DIV来实现,设定里display属性为inline。
<div style="display:inline;">content</div>

FocusPanel

只是一个DIV,重要的是它声明了focusevents,keyevents,onclick和mouseevents,对对于那些没有声明的这些事件"子组件"很有用处。
<div>content<div>

FocusWidget

可以是任何组件,只是它可以帮助捕获Focusevents,keyevents。

Frame

是一个IFrame,他的默认的样式是gwt-Frame
<iframe></iframe>

Grid

就是一个Table
<table><tbody></tbody></table>

HTML

一个DIV,默认的样式是gwt-HTML,可以设定属性white-space为normal,nowrap。

HTMLPanel

就是一个DIV,可以容纳HTML或是其他组件,不适用gwt-HTML样式。最有用的属性就是createUniqueId,可以设定一个id,HTMLPanel_N。和前面的CheckBox的checkN,相比,这里用大写字母和下划线。看起来多少有点怪异。
<div>content</div>

HTMLTable

没有疑问,这是用一个Table实现的,重要的是,它是Grid,FlexTable的父类。提供了设定每行或是每一个单元格的样式设定的方法。表格中没有thead。假如要设定表头的话,可能通过设定第一行的样式来区别。
<table><tbody></tbody></table>
table.getRowFormtter(0).setStyleName("style");

HorizontalPanel

水平排列的面板,用一个只有一行的表格实现。
<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

一个有定义了锚点的DIV,默认的样式名:gwt-HyperLink
<div></div>

Image

没有问题,肯定是IMG.gwt-Image样式没有实现。
<img src="…"/>

Label

一个DIV,默认的样式是gwt-Label。Label不能解析HTML内容,假如你想要的话,可以用HTML来代替,两者都提供鼠标事件。Label会自动换行,但是你也可以通过setWordWrap来修改。
<div class="gwt-Label">content</div>

ListBox

就是用Select和Option来实现。gwt-ListBox样式没有被实现。可以设定selected,size,multples等属性。

MenuBar

用一个包含表格的DIV实现。一个水平的菜单,只有一行,用单元格来设置菜单项,一个垂直的菜单,用行来区分菜单项。gwt-MenuBar只是设定外层的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>
   <!一个垂直菜单的例子
   <tr><td class="gwt-MenuItem">text or html</td></tr>
   <tr><td class="gwt-MenuItem">text or html</td></tr>
   
>
  </tbody>
 </table>
</div>

MenuItem

一个菜单项就是在菜单条中的一个单元格。它的默认属性是gwt-MenuItem.选中的时候有一个附加的属性,gwt-MenuItem-selected.在菜单项默认的样式class="gwt-MenuItem",在选中的时候就改变成class="gwt-MenuItem gwt-MenuItem-selected".

PasswordTextBox

用Password实现,使用gwt-PasswordTextBox样式。

PopupPanel

只是一个DIV.

RadioButton

用一个INPUT实现,使用gwt-RadioButton样式。

RootPanel

一个RootPanel可以附加到任何的组件上,但是以前属于这个组件的所有的内容都会被清除。假如你仔细想想,你会发现除了初始化之外,这个组件还有很多用处。

ScrollPanel

一个Div设定了overflow属性为scroll 或auto.
<div style="overflow: auto;">
 content
</div>

SimplePanel

就是一个Div.

StackPanel

用一个表格来实现,每一个组用两行来保存,第一行放了标签,第二行放了内容。默认的这个表格使用gwt-StackPanel样式,标签行用了gwt-StackPanelItem和gwt-StackPanelItem-selected.当一个标签被选中的时候,它的样式就由原来的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使用一个HorizontalPanel来实现,所以它也是一个Table,表格的样式是gwt-TabBar。对于第一个标签,通常是一个空的,它的样式是gwt-TabBarFirst,就是为了装饰,最后也会加上一个空的标签,指定样式为gwt-TabBarRest。当一个标签被选中的时候,gwt-TabBarItem-selected的样式会附加到样式中,这点和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

用一个VerticalPanel来实现,包含了一个TabBar和一个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

就是一个TextArea,默认的样式为gwt-TextArea.

TextBox

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

Tree

就是一个包含了多个TreeItem的Div,默认样式gwt-Tree,设定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

用一个包含了一个表格的DIV来实现。默认的样式gwt-TreeItem和gwt-TreeItem-selected,来修饰里面的内容。但选中的时候gwt-TreeItem-selected会替换gwt-TreeItem。这个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

用一个表格来实现,所有的东西按行来排列。
<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


本页面的文字允许在知识共享 署名-相同方式共享 3.0协议和GNU自由文档许可证下修改和再使用,仅有一个特殊要求,请用链接方式注明文章引用出处及作者。请协助维护作者合法权益。


系列文章

文章列表

  • Java GWT的HTML实现与CSS的命名规则

这篇文章对你有帮助吗,投个票吧?

rating: 0+x

留下你的评论

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License