猪通过勤劳致富有5元钱存在老鼠开的钱庄里。猪打算拿这5元钱建一个小窝，大概要花2元卖地，花3元搭窝。

王八是搞工程的，他想在猪身上挣更多的钱，于是找来当投资顾问的狐狸想办法，狐狸说：这好办。于是找来管地盘的狼，开钱庄的老鼠一起来商议，结果王八从老鼠那里借来200元，用100元卖了狼的地，花了3元把猪窝盖好，花了50元给了狐狸咨询服务费，猪没有地，只好求王八把窝卖给它，王八要价500元，老猪说只有5元买不起，这时候狐狸说服猪去向老鼠借钱，老鼠答应借500给猪，前提是要他连本带利还600元，可以分10年还清，并且产权证拿来抵押。

结果成交。猪到最后花了600元买来了猪窝，比他原来的计划高了11倍，猪努力了十年去挣钱还贷。

在这场交易里面，狼，老鼠，狐狸还有王八都挣了钱。以后他们就如法炮制。更多的猪去贷款买房子了，这时候，当商人的驴看到有机可乘，到老鼠那里贷了好多好多的款，把王八盖的房子都买下来，然后以更高的价格卖给了猪。

猪的还贷期就越来越长，吃的越来越差，小猪崽子也不敢生了。由于猪的数目越来越少，狼觉得这样下去自己没有猪肉吃了，非饿死不可，于是开始调控，不让老鼠再借钱了。但是王八还没有停止盖房，把自己挣的钱和贷的钱全投入生产了。驴手上的猪窝囤积的很多，卖不动了被套牢了。

结果，老鼠，王八，还有驴都挣了好多的猪窝。钱到最后集中到狼手上。如今，谁都等着狼把钱拿出来救命。聪明的你，如果你是狼，你会拿钱救哪个？

基本的网络环境

包如何在网络上转发

参看tcp/ip协议详解第三章

路由表
srv4的路由表，详细参考tcp/ip协议详解第10章

sun的路由表，详细参考tcp/ip协议详解第10章

关于路由表的说明
对于一个给定的路由器，可以打印出五种不同的标志（ f l a g）：
U 该路由可以使用。
G 该路由是到一个网关（路由器）。如果没有设置该标志，说明目的地是直接相连的。
H 该路由是到一个主机，也就是说，目的地址是一个完整的主机地址。如果没有设置该
标志，说明该路由是到一个网络，而目的地址是一个网络地址：一个网络号，或者网
络号与子网号的组合。
D 该路由是由重定向报文创建的（ 9 . 5节）。
M 该路由已被重定向报文修改（ 9 . 5节）。

路由表的搜索

1) 搜索匹配的主机地址；
2) 搜索匹配的网络地址；
3) 搜索默认表项（默认表项一般在路由表中被指定为一个网络表项，其网络号为0）。
匹配主机地址步骤始终发生在匹配网络地址步骤之前。

关键的说明，需要仔细理解，可以多看几遍

标志G是非常重要的，因为由它区分了间接路由和直接路由（对于直接路由来说是不设置标志G的）。其区别在于，发往直接路由的分组中不但具有指明目的端的I P地址，还具有其链路层地址（见图3 - 3）。当分组被发往一个间接路由时， I P地址指明的是最终的目的地，但是链路层地址指明的是网关（即下一站路由器）。我们在图3 - 4已看到这样的例子。在这个路由表例子中，有一个间接路由（设置了标志G），因此采用这一项路由的分组其I P地址是最终的目的地（1 4 0 . 2 5 2 . 1 3 . 6 5），但是其链路层地址必须对应于路由器1 4 0 . 2 5 2 . 1 3 . 3 5。
理解G和H标志之间的区别是很重要的。G标志区分了直接路由和间接路由，如上所述。但是H标志表明，目的地址（ n e t s t a t命令输出第一行）是一个完整的主机地址。没有设置H标志说明目的地址是一个网络地址（主机号部分为0）。当为某个目的I P地址搜索路由表时，主机地址项必须与目的地址完全匹配，而网络地址项只需要匹配目的地址的网络号和子网号就可以了。另外，大多数版本的n e t s t a t命令首先打印出所有的主机路由表项，然后才是网络路由表项。

不理解的一个问题

在sun的路由表上为什么会有140.252.1.183 140.252.1.29 uh 0 0 sl0这么一条路由，它什么时候有用呢？

Being a better programmer means being able to design more effective and trustworthy programs and knowing how to do that efficiently.

做更好的程序员意味着能够设计更高效的、可靠的程序，和知道如何高效的实现这一目标。

看到这句话有点意思，effictive,trustworthy,就是程序所要追求的目标。

环境准备

• eclipse
• google web toolkit
• tomcat_5.0.28
• 以上3者均可通过google搜索方便下载到，安装配置不再详细介绍

实现过程

参考:	GWT Google Web Toolkit Hello World Example Project
更多文章:

简单设计

图片浏览

• 最顶上一个横向的标题栏
• 中间左边一个是小的预览图片列表
• 中间右边是图片浏览主窗口
• 最底部有一个简单的版权之类的说明

• 一保存图片信息的数据结构
• 一个能获取指定要求的图片的集合的服务

实现过程

VerticalPanel mainPanel;//主面板
HorizontalPanel topPart;//顶端部分
HorizontalPanel centerPart;//中间部分
HorizontalPanel bottomPart;//底端部分
HorizontalPanel imagesPart;//图片列表
HorizontalPanel previewPart;//图片预览
//按照以下安装过程组装
mainPanel.add(topPart);
mainPanel.add(centerPart);
mainPanel.add(bottomPart);
centerPart.add(imagesPart);
centerPart.add(previewPart);

图片服务实现

1. 一个保存图片数据的数据结构，简单点，创建一个org.jmg.client.ImageData implements IsSerializable，这个类中只有两个属性，title,url，这两个属性已经很好的表明他们的用途了，不再细说。至于getter, setter,我只提供了get,初始化用构造函数传参，你也可以根据自己习惯修改。个人原则，能不提供的方法尽量不提供。需要注意一点很重要，这个类一定要实现com.google.gwt.user.client.rpc.IsSerializable这个标志接口，这个会在编译的时候生成相应的 javascript的对象，用户在客户端运行。
   
2. 创建服务,在client包中写ImageServiceAsync，ImageService,这两个接口，在server中实现 ImageServiceImpl implements ImageService。ImageServiceImpl，所需提供的方法就是获取图片列表，返回一个ImageData数组或是集合类，都可以，我这里选择了数组。
   

添加客户端事件
有了界面，有了服务，就可以把这两个东西组装在一起了。我们需要两个事件处理，第一个是在客户端刚刚打开的时候，在"创建界面"小节中我们已经在 onModuleLoad添加了界面大致框架的初始化，现在我们要调用服务，并且把获取到的数据，构造成 com.google.gwt.user.client.ui.Image对象，添加到imagesPart中，代码大致如下：

async.getImageData(new AsyncCallback() {
      public void onFailure(Throwable caught) {
      }
      public void onSuccess(Object result) {
        ImageData[] images = (ImageData[]) result;
        for (int i = 0; i < images.length; i++) {
          Image image = new Image(images[i].getUrl());//根据url构造image对象
          image.setPixelSize(120, 120);//限制预览图片的大小          
          imagesPart.add(image);//添加到imagesPart中
        }
      }
    });

image.addMouseListener(new MouseListenerAdapter() {
            public void onMouseEnter(Widget sender) {
              sender.addStyleName("selected");
              previewPart.clear();
              Image img = new Image(((Image)sender).getUrl());
              //注意这里的Image需要创建一个，而不是sender强换型，
              //最初的时候我就是为了节省一个对象，强换型了一次，
              //至于效果你可以自己动手改改试试看
              img.addStyleName("big");
              previewPart.add(img);
            }
            public void onMouseLeave(Widget sender) {
              sender.removeStyleName("selected");
            }
          });

运行部署 到这里我们的图片浏览器就基本完成了，至于样式表之类的东西就不在这里说了。不说不是表示不重要，GWT推荐所有东西都用样式表来控制，而是很重要。这里我截了一个简单的图，仅作运行效果:

运行图例

源码下载:imageviewer_src.rar
运用下载:imageviewer.rar

系统属性

系统的属性一般是由设备定义的。在各个jsr标准中定义了一些系统属性的键值(key)。附1的表格就列出了当前的一些已经定义的系统属性名。

读取方法：System.getProperty() ，这是一个静态方法

程序属性

程序属性是在程序的描述文件中和jar包的manifest文件中定义。附2中就就是一个典型的描述文件。假如同样的属性在描述文件中和manifest文件中都被定义了，冲突会这样被处理：假如MIDlet是一个MIDP2.0的可信任的程序,系统会直接拒绝安装程序。否则，程序描述文件中定义的值会覆盖manifest中定义的属性。(If the MIDlet is a trusted application based on MIDP 2.0, the system simply won't install the application. Otherwise, the value in the descriptor overrides the value in the manifest.)

读取方法：MIDlet.getAppProperty()，这是一个实例方法

注意：1、这些属性的名称是区分大小写的。2、假如获取一个没有定义过的名称，会返回一个null值。3、不要定义太多的属性，有些设备上的描述大小是有限制的。

原文参看：http://developers.sun.com/techtopics/mobility/midp/ttips/appproperty/index.html

附1：
J2ME Defined System Properties

附2
MIDlet-1: HttpWrapperMidlet,,httpwrapper.HttpWrapperMIDlet
MIDlet-Jar-Size: 16315
MIDlet-Jar-URL: HttpWrapper.jar
MIDlet-Name: HttpWrapper
MIDlet-Vendor: Vendor
MIDlet-Version: 1.0
MicroEdition-Configuration: CLDC-1.0
MicroEdition-Profile: MIDP-1.0
Which-Locale: en

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

Technorati : gwt css

 

2007年你会是哪一头猪呢？