BlogJava-rebel-随笔分类-Java

Using CSS with GWT

忆了又忆 — Wed, 10 Jan 2007 09:08:00 GMT

This is an attempt to put together a comprehensive reference for using Cascading Style Sheets with the Google Web Toolkit. I’ve assembled this document by first starting with the official documentation and then reviewing the source code. Where the source disagreed with the documentation I’ve sided with the source. I then did a runtime analysis of the sample applications that ship with the SDK to verify the results.

I feel there is a need for this because the documentation that comes with the SDK is rather unhelpful. The SDK says, basically, that widget styles are conventionally named [project]-[widget], e.g., gwt-Button, and style names correspond to CSS class names, so in order to style your button you would include something like

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

in your stylesheet. And that’s all it says. Really.

I believe this documentation to be inadequate for a number of reasons.

The style is almost never as simple as the button example. Many GWT widgets correspond to messy nested tables, divs, and spans so it can be hard to know what it is you’re actually styling and what options are available to you in that context.
The naming rule is not applied consistently within the SDK. The DialogBox class, for one, does not follow the rule.
In some situations similarly named styles (*-selected*) are used in different or even contradictory manners making it hard to generalize your experience from one widget to another.
In many cases the documentation is incorrect; the documented style simply is not implemented. The ListBox class should, according to both the general rule above and the specific class documentation, implement a style named gwt-ListBox. Nope, not there. Grep the source directory if you don’t believe me.

If I’ve left out a class below, it’s probably because it doesn’t participate in styling in any way. (I hope.) If you’re trying to read this straight through instead of just jumping to an item of interest, more power to you. If you find yourself yawning you might want to skip around a bit.

With that said…

AbsolutePanel

Implemented as a DIV and by default sets overflow to hidden. Contents are positioned absolutely according to given x, y values unless x == -1 and y == -1 in which case the widget is positioned statically.

Button

Implemented as HTML BUTTON. Default style name is gwt-Button and is used. No default attributes. Can contain text or HTML.

CellPanel

Implemented as a TABLE. No default styles. Can set border and cell-spacing attributes.

CheckBox

Implemented as HTML CHECKBOX. Default style name is gwt-CheckBox and is used. Automatically generates unique id of the form checkN where N is an integer. Uses checked, defaultChecked, and disabled attributes. No default styles.

DeckPanel

Implemented using a DIV containing any number of children. The visibility of the individual children are controlled using the display attribute. The DeckPanel sets display to 'none' or '' as appropriate.

DialogBox

Default style names are gwt-DialogBox and Caption and are both used. Implemented as a DIV and the caption is also a DIV. (Technically, the caption is an HTML, which is a Label, which is implemented using a DIV.)


  
      
    
      caption
      
      
        
          content

DockPanel

Implemented using TABLE. cell-spacing and cell-padding attributes both default to 0. Nesting of TR and TD elements can get quite complicated in order to achieve desired layout.

FlexTable

Just a TABLE, there’s nothing funky going on here.

FlowPanel

Implemented as a DIV with display set to inline.

content

FocusPanel

A DIV. FocusPanel is only important in that it publishes a number of events (FOCUSEVENTS, KEYEVENTS, ONCLICK, and MOUSEEVENTS) and is very useful for containing widgets that don’t publish their own events. See Drag-and-Drop with the Google Web Toolkit.


  content

FocusWidget

Can be anything because it is implemented using whatever element is passed to it in the constructor. Interesting because it generates FOCUSEVENTS and KEYEVENTS.

Frame

Implemented as an IFRAME. Documented style name of gwt-Frame is not implemented.

Grid

Is just a table.

HTML

Implemented as a DIV with default style name of gwt-HTML. Can also set attribute white-space to normal or nowrap.

html

HTMLPanel

Is a DIV that can either contain HTML exactly as HTMLor a collection of widgets. Does not use the gwt-HTML style. The most useful attribute of an HTMLPanel is that it contains the method createUniqueId that returns an id of the form HTMLPanel_N that can be used to apply styles to specific elements, as opposed to classes.

Contrast this with CheckBox which generates ids of the form checkN without either the capitalization or the underscore. Not a bug, just another minor inconsistency.


  content

HTMLTable

Unsurprisingly this class is implemented as a TABLE. The most important things to know about HTMLTable are (a) that it is the superclass for both FlexTable and Grid and (b) that it provides methods for setting the styles of individual rows or cells.

It is also worth noting that HTMLTable does not include a THEAD. The 0th row therefore must be used as something of a pseudo-header by applying any necessary styles.

Row 0 -- if you want a header you have to fake it here.

// Style the first row to fake a header.
table.getRowFormatter(0).setStyleName("something-interesting");

HorizontalPanel

Implemented using a TABLE with all elements laid out as TDs in a single TR.


  
    
      Item 1
      Item 2

HyperLink

A DIV containing an anchor. Documented style name gwt-HyperLink is not implemented.

Image

Implemented as IMG. Documented style of gwt-Image is not implemented.

Label

Label is implemented as a DIV with a default style name of gwt-Label. Labels do not interpret their content as HTML and by default allow word-wrap. If you want to use HTML content in your label then you should use an instance of HTML. Both classes provide MOUSEEVENTS.

You can change the default word-wrap by calling the setWordWrap method.

your text here

ListBox

Implemented using SELECT with OPTION for elements. Documented style name gwt-ListBox is not implemented. Uses attributes selected, size, and multiple as part of implementation.

MenuBar

Implemented as a DIV containing a TABLE with menu items contained in TD elements. A horizontal MenuBar contains all menu items as children of a single TR and a vertical MenuBar uses a separate TR for each item. Simple enough. The documented style name of gwt-MenuBar is used and applied to the outer DIV.


  
    
      
      
        text or html
        text or html

MenuItem

A MenuItem is a TD that can be inserted into a MenuBar. The default style name is gwt-MenuItem. A selected MenuItem has the additional style name of gwt-MenuItem-selected. I want to emphasize that the selected style is added to the default style, so that class="gwt-MenuItem" becomes class="gwt-MenuItem gwt-MenuItem-selected". This is not the case with all widgets and is another minor inconsistency in the GWT style design. See StackPanel for an example of the opposite behavior.

PasswordTextBox

Implemented as PASSWORD. Uses gwt-PasswordTextBox.

PopupPanel

Just a DIV.

RadioButton

Implemented as an instance of INPUT. Uses gwt-RadioButton.

RootPanel

A RootPanel can be attached to any element, but it will discard all children previously belonging to that element. If you stop to think about it, this can be useful in contexts outside of your application init.

ScrollPanel

A DIV with overflow set to scroll or auto. Defaults to auto.


  content

SimplePanel

Just a DIV.

StackPanel

Implemented as a TABLE with 2 rows per item. In each pair of rows the first contains the caption and the second contains the corresponding widget. By default the TABLE is styled with gwt-StackPanel. The captions are styled with gwt-StackPanelItem and gwt-StackPanelItem-selected. When an item is selected the caption’s unselected style gwt-StackPanelItem is replaced with gwt-StackPanelItem-selected. Not all widgets behave this way. See MenuItem for an example of the opposite behavior.


  
    
    
      text/html
    
    
      
        content -- a widget

TabBar

A TabBar is implemented using a HorizontalPanel so it is effectively a TABLE. The style name gwt-TabBar applies to the TABLE — that is, to the actual tabs. The style gwt-TabBarFirst applies to the first (effectively empty) HTML widget and is only useful for creating some sort of left border effect. The style gwt-TabBarRest applies to that part of the TabBar following the tabs.

When a tab is selected the style gwt-TabBarItem-selected gets added to the existing style. This behavior is like that of MenuItem but opposite that of StackPanel.


  
    
      &nbsp;
      Tab #1
      Tab #2
      &nbsp;

TabPanel

Implemented as a VerticalPanel containing a TabBar and a DeckPanel. In other words, it’s a bunch of nested tables. The style gwt-TabPanel applies to the top-level TABLE, gwt-TabBar still applies to the contained TABLE implementing the TabBar, and gwt-TabPanelBottom styles the DIV containing the actual content.

Note that the TabBar gets the added default style of width: 100%. This ensures that the TabBar is as wide as the content panel and is the reason the gwt-TabBarRest style is important. It’s all about how you want that empty space to look.

TextArea

Implemented as a TEXTAREA with a default style of gwt-TextArea.

TextBox

Tree

Implemented as a DIV containing nested TreeItems. The style name gwt-Tree applies to the DIV and the style overflow defaults to auto.

TreeItem

Implemented as a TABLE nested within a DIV. The styles gwt-TreeItem and gwt-TreeItem-selected apply to the nested content element, a SPAN. The selected state gwt-TreeItem-selectedreplaces the unselected state gwt-TreeItem, like StackPanel but unlike MenuItem or TabBar.


  
    
      
      content
    
  
  children

VerticalPanel

Implemented using a TABLE with all elements laid out as TRs.


  
    Item 1
    Item 2

忆了又忆 2007-01-10 17:08 发表评论

扑克发牌算法

忆了又忆 — Tue, 05 Dec 2006 14:36:00 GMT

扑克发牌算法是棋牌游戏中常用的基础算法，也是游戏开发人员需要熟悉的基础算法之一。下面介绍一下该算法的一种实现方式。
首先给扑克牌中每张牌设定一个编号，下面算法实现的编号规则如下：
1.红桃按照从小到大依次为： 1-13
2.方块按照从小到大依次为： 14-26
3.黑桃按照从小到大依次为： 27-39
4.梅花按照从小到大依次为： 40-52
5.小王为 53 ，大王为 54

算法实现如下：
1.首先按照以上编号规则初始化一个包含 108 个数字的数组
2.每次随机从该数组中抽取一个数字，分配给保存玩家数据的数组

实现该功能的代码如下所示：

import java.util.*;

/**
* 发牌算法的实现
* 要求：把 2 副牌，也就是 108 张，发给 4 个人，留 6 张底牌
*/

public class Exec {
    public static void main(String[] args) {
        // 存储 108 张牌的数组
        int[] total = new int[108];
        // 存储四个玩家的牌
        int[][] player = new int[4][25];
        // 存储当前剩余牌的数量
        int leftNum = 108;
        // 随机数字
        int ranNumber;
        // 随机对象
        Random random = new Random();
        // 初始化数组
        for (int i = 0; i < total.length; i++) {
            total[i] = (i + 1) % 54;
            // 处理大小王编号
            if (total[i] == 0) {
                total[i] = 54;
            }
        }
        // 循环发牌
        for (int i = 0; i < 25; i++) {
            // 为每个人发牌
            for (int j = 0; j < player.length; j++) {
                // 生成随机下标
                ranNumber = random.nextInt(leftNum);
                // 发牌
                player[j][i] = total[ranNumber];
                // 移动已经发过的牌
                total[ranNumber] = total[leftNum - 1];
                // 可发牌的数量减少 1
                leftNum--;
            }
        }
        // 循环输出玩家手中的牌
        for (int i = 0; i < player.length; i++) {
            for (int j = 0; j < player[i].length; j++) {
                System.out.print(" " + player[i][j]);
            }
            System.out.println();
        }
        // 底牌
        for (int i = 0; i < 8; i++) {
            System.out.print(" " + total[i]);
        }
        System.out.println();
    }
}

忆了又忆 2006-12-05 22:36 发表评论

正则表达式笔记

忆了又忆 — Tue, 05 Dec 2006 14:24:00 GMT

1.[] 与 ()的区别

[a-zA-Z0-9] 在包含的字符中 , 匹配其中一个 , 可匹配 ”!a!”

(abc) 在包含的字符中 , 都要逐一匹配 , 而且有顺序 , 其实就是说 ,() 里面就是一个字正则式 , 可匹配 ”3abc93”

2. 表达式之间千万不能有空格

3.构造检查 email的正则表达式

/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/

在一个完整的 email 地址中有三个部分 :
　1. 用户名 ( 在 '@' 左边的一切 ),
　2.'@',
　3. 服务器名 ( 就是剩下那部分 ).
用户名可以含有大小写字母阿拉伯数字 , 句号 ('.'), 减号 ('-'), and 下划线 ('_'). 服务器名字也是符合这个规则 , 当然下划线除外 .

现在 , 用户名的开始和结束都不能是句点 . 服务器也是这样 . 还有你不能有两个连续的句点他们之间至少存在一个字符，好现在我们来看一下怎么为用户名写一个匹配模式 :
/^[\w-]+$/

现在还不能允许句号的存在 . 我们把它加上 :
　 /^[\w-]+(\.[\w-]+) * $/
上面的意思就是说 : " 以至少一个规范字符（除了 . ）开头 , 后面跟着 0 个或者多个以点开始的字符串 ."

然后是后面一部分 , 在网上流传的一种做法是 , 后面的一部分是跟前面那部分一样的 , 但是我觉得有点不妥 , 难道 abc@abc 这样也符合一个 email 地址格式吗 ? 我试过不少的系统 , 都不允许这样输入的 , 必需要你输入如 abc@abc.abc 这样的格式才行．所以后面部分是略有不同的．

\^[\w-]+(\.[w-]+) ＋ $\
上面的意思就是说 : " 以至少一个规范字符（除了 . ）开头 , 后面跟着１个或者多个以点开始的字符串 ."

好 . 现在只需要用 ”@” 把两部分连接 :
　/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[w-]+)+$/

这就是完整的 email 认证匹配模式了 , 在 JS 中只需要调用
reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[w-]+)+$/;
reg.exec(input);

返回为 true, 就是说 input 是一个 email 地址 .
通过这种方法就可以得到是否为 email 了 !

忆了又忆 2006-12-05 22:24 发表评论