日韩国产福利,亚洲精品视频在线看,av在线之家电影网站

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�?/p>

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

扑克发牌��法是棋牌游戏中常用的基��法�Q�也是游戏开发�h员需要熟悉的基础��法之一。下面介�l�一下该��法的一�U�实现方式�?
首先�l�扑克牌中每张牌讑֮�一个编��P��下面��法实现的编可��则如下：
1.�U�桃按照从小到大依次为： 1-13
2.方块按照从小到大依次为： 14-26
3.黑桃按照从小到大依次为： 27-39
4.梅花按照从小到大依次为： 40-52
5.��王�?53 �Q�大王�ؓ 54

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

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

import java.util.*;

/**
* 发牌��法的实�?
* 要求�Q�把 2 副牌�Q�也��是 108 张，发给 4 个�h�Q�留 6 张底�?
*/

public class Exec {
    public static void main(String[] args) {
        // 存储 108 张牌的数�l?br />        int[] total = new int[108];
        // 存储四个玩家的牌
        int[][] player = new int[4][25];
        // 存储当前剩余牌的数量
        int leftNum = 108;
        // 随机数字
        int ranNumber;
        // 随机对象
        Random random = new Random();
        // 初始化数�l?br />        for (int i = 0; i < total.length; i++) {
            total[i] = (i + 1) % 54;
            // 处理大小王编�?br />            if (total[i] == 0) {
                total[i] = 54;
            }
        }
        // 循环发牌
        for (int i = 0; i < 25; i++) {
            // 为每个�h发牌
            for (int j = 0; j < player.length; j++) {
                // 生成随机下标
                ranNumber = random.nextInt(leftNum);
                // 发牌
                player[j][i] = total[ranNumber];
                // �U�d��已经发过的牌
                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] 在包含的字符�?, 匚w��其中一�?, 可匹�?�?a!�?

(abc) 在包含的字符�?, 都要逐一匚w�� , 而且有顺�?, 其实��是�?,() 里面��是一个字正则�?, 可匹�?�?abc93�?

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

3.构造检�?email的正则表辑ּ�

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

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

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

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

然后是后面一部分 , 在网上流传的一�U�做法是 , 后面的一部分是跟前面那部分一��L�� , 但是我觉得有点不�?, ��N�� abc@abc �q�样也符合一�?email 地址格式�?? 我试�q�不��的�pȝ�� , 都不允许�q�样输入�?, 必需要你输入�?abc@abc.abc �q�样的格式才行．所以后面部分是略有不同的．

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

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

�q�就是完整的 email 认证匚w��模式�?, �?JS 中只需要调�?
reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[w-]+)+$/;
reg.exec(input);

�q�回�?true, ��是�?input 是一�?email 地址 .
通过�q�种�Ҏ��可以得到是否�ؓ email �?!

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