Being a better programmer means being able to design more effective and trustworthy programs and knowing how to do that efficiently.
做更好的E序员意味着能够设计更高效的、可靠的E序Q和知道如何高效的实现这一目标?/p>
看到q句话有Ҏ思,effictive,trustworthy,是E序所要追求的目标?/p>
摘要 | 从本文开始我们开始一个有点实际意义的应用Q图片浏览器Q初步我们只实现单的框架来实现图片浏览的基本功能Q然后再l箋深化Q做出更好的界面Q和更多的管理功能?/td> |
关键?/td> | Google Web Toolkit GWT Ajax 囄览 |
VerticalPanel mainPanel;//主面?br/>HorizontalPanel topPart;//端部分注意可能我们的图片会很多,希望不会把页面撑得很长很?GWT提供了不q的ScrollPanelQ只要把 centerPart.add(imagesPart);修改?em>centerPart.add(new ScrollPanel(imagesPart));可以了?br/>同样囄也可能会很大Q也一样在previewPart上添加一个滚动面ѝ?br/>
HorizontalPanel centerPart;//中间部分
HorizontalPanel bottomPart;//底端部分
HorizontalPanel imagesPart;//囄列表
HorizontalPanel previewPart;//囄预览
//按照以下安装q程l装
mainPanel.add(topPart);
mainPanel.add(centerPart);
mainPanel.add(bottomPart);
centerPart.add(imagesPart);
centerPart.add(previewPart);
囄服务实现
d客户端事?/strong> q行部v 到这里我们的囄览器就基本完成了,至于样式表之cȝ东西׃在这里说了。不说不是表CZ重要QGWT推荐所有东襉K用样式表来控Ӟ而是很重要。这里我截了一个简单的图,仅作q行效果: 源码下蝲:imageviewer_src.rar
有了界面Q有了服务,可以把q两个东西组装在一起了。我们需要两个事件处理,W一个是在客L刚刚打开的时候,?创徏界面"节中我们已l在 onModuleLoadd了界面大致框架的初始化,现在我们要调用服务,q且把获取到的数据,构造成 com.google.gwt.user.client.ui.Image对象Q添加到imagesPart中,代码大致如下Q?/p>
async.getImageData(new AsyncCallback() {
到这里你~译部v的时候就已经可以看到大致的运行效果了。左Ҏ一个小囄的列表,双是一块空白的区域?br/>到现在剩下的事情是需要在图上添加一个鼠标事Ӟ在鼠标移上去的时候,双昄大图?br/>q个q程也很单,像写swingE序一P只要在上边的Image对象构造好的时候添加一个mouseListener可以了:
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);//d到imagesPart?br/> }
}
});
image.addMouseListener(new MouseListenerAdapter() {
public void onMouseEnter(Widget sender) {
sender.addStyleName("selected");
previewPart.clear();
Image img = new Image(((Image)sender).getUrl());
//注意q里的Image需要创Z个,而不是sender强换型,
//最初的时候我是Z节省一个对象,强换型了一ơ,
//至于效果你可以自己动手改改试试看
img.addStyleName("big");
previewPart.add(img);
}
public void onMouseLeave(Widget sender) {
sender.removeStyleName("selected");
}
});
q用下蝲:imageviewer.rar
参?/td>
更多文章
pȝ属?/p>
pȝ的属性一般是p备定义的。在各个jsr标准中定义了一些系l属性的键?key)?a href="#1">?的表格就列出了当前的一些已l定义的pȝ属性名?/p>
dҎQSystem.getProperty() Q这是一个静态方?/p>
E序属?/p>
E序属性是在程序的描述文g中和jar包的manifest文g中定义?a href="#2">?中就是一个典型的描述文g。假如同L属性在描述文g中和manifest文g中都被定义了Q冲H会q样被处理:假如MIDlet是一个MIDP2.0的可信Q的程?pȝ会直接拒l安装程序。否则,E序描述文g中定义的g覆盖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.)
dҎQ?span style="FONT-FAMILY: Courier New">MIDlet.getAppProperty()Q这是一个实例方?/p>
注意Q?、这些属性的名称是区分大写的?、假如获取一个没有定义过的名Uͼ会返回一个null倹{?、不要定义太多的属性,有些讑֤上的描述大小是有限制的?/p>
原文参看Q?a >http://developers.sun.com/techtopics/mobility/midp/ttips/appproperty/index.html
?Q?/a>
J2ME Defined System Properties
JSR | Property Name |
Default Value¹ |
---|---|---|
30 | microedition.platform | null |
microedition.encoding | ISO8859_1 | |
microedition.configuration | CLDC-1.0 | |
microedition.profiles | null | |
37 | microedition.locale | null |
microedition.profiles | MIDP-1.0 | |
75 | microedition.io.file.FileConnection.version | 1.0 |
file.separator | (impl-dep) | |
microedition.pim.version | 1.0 | |
118 | microedition.locale | null |
microedition.profiles | MIDP-2.0 | |
microedition.commports | (impl-dep) | |
microedition.hostname | (impl-dep) | |
120 | wireless.messaging.sms.smsc | (impl-dep) |
139 | microedition.platform | (impl-dep) |
microedition.encoding | ISO8859-1 | |
microedition.configuration | CLDC-1.1 | |
microedition.profiles | (impl-dep) | |
177 | microedition.smartcardslots | (impl-dep) |
179 | microedition.location.version | 1.0 |
180 | microedition.sip.version | 1.0 |
184 | microedition.m3g.version | 1.0 |
185 | microedition.jtwi.version | 1.0 |
195 | microedition.locale | (impl-dep) |
microedition.profiles | IMP-1.0 | |
205 | wireless.messaging.sms.smsc | (impl-dep) |
205 | wireless.messaging.mms.mmsc | (impl-dep) |
211 | CHAPI-Version | 1.0 |
?
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坐标来确定位|?br /><div style="overflow: hidden;"></div>
Botton
是一个正常的HTML的Button.默认的样式名字是gwt-Button.
<button class="gwt-Button"/>
CellPanel
用一个table来实玎ͼ没有默认的样式,可以讄border,cell-spacing属性?br /><table></table>
CheckBox
是正常的Html的CheckBoxQ默认的样式名字为gwt-CheckBoxQ会自动生成一个不重复的idQcheckN(N是一个整?Q可以用checked,defaultChecked,disabled{属性。默认样式是I的?br /><checkbox class="gwt-CheckBox">
DeckPanel
<div style="width: 100%; height: 100%"></div>
用一个DIV来实玎ͼ包含了一pd的子对象。每一个对象可以用单独的display属性来讄是否昄。这个有点像Swing里面的CardLayout的方式有点像Q添加了一pd的组Ӟ但是只能昄一个?br />
DialogBox
~省的样式有gwt-DialogBoxQCaption两个都是相关。用一个DIV来实玎ͼ标题Caption也是一个DIV?br /><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都默认ؓ0Qؓ了实现DockPanel里边的tr,td比较ȝ一些?br /><table cell-spacing="0" cell-padding="0">
<tbody></tbody>
</table>
FlexTable
只是一个简单的TableQ没什么特别的东西?br /><table>
<tbody></tbody>
</table>
FlowPanel
用一个DIV来实玎ͼ讑֮里display属性ؓinline?br /><div style="display:inline;">content</div>
FocusPanel
只是一个DIVQ重要的是它声明了focusevents,keyevents,onclick和mouseeventsQ对对于那些没有声明的这些事?子组?很有用处?br /><div>content<div>
FocusWidget
可以是Q何组Ӟ只是它可以帮助捕获Focusevents,keyevents?/code>
Frame
是一个IFrame,他的默认的样式是gwt-Frame
<iframe></iframe>
Grid
是一个Table
<table><tbody></tbody></table>
HTML
一个DIVQ默认的样式是gwt-HTMLQ可以设定属性white-space为normal,nowrap?/code>
HTMLPanel
是一个DIVQ可以容UHTML或是其他lgQ不适用gwt-HTML样式。最有用的属性就是createUniqueIdQ可以设定一个id,HTMLPanel_N。和前面的CheckBox的checkN,相比Q这里用大写字母和下划线。看h多少有点怪异?br /><div>content</div>
HTMLTable
没有疑问Q这是用一个Table实现的,重要的是Q它是Grid,FlexTable的父cR提供了讑֮每行或是每一个单元格的样式设定的Ҏ。表g没有thead。假如要讑֮表头的话Q可能通过讑֮W一行的样式来区别?br /><table><tbody></tbody></table>
table.getRowFormtter(0).setStyleName("style");
HorizontalPanel
<table cell-spacing="0" cell-padding="0">
水^排列的面板,用一个只有一行的表格实现?br />
<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
一个有定义了锚点的DIVQ默认的样式名:gwt-HyperLink
<div></div>
Image
没有问题Q肯定是IMG.gwt-Image样式没有实现?br /><img src="..."/>
Label
一个DIVQ默认的样式是gwt-Label。Label不能解析HTML内容Q假如你惌的话Q可以用HTML来代替,两者都提供鼠标事g。Label会自动换行,但是你也可以通过setWordWrap来修攏V?br /><div class="gwt-Label">content</div>
ListBox
是用Select和Option来实现。gwt-ListBox样式没有被实现。可以设定selected,size,multples{属性?/code>
MenuBar
<div class="gwt-MenuBar">
用一个包含表格的DIV实现。一个水q的菜单Q只有一行,用单元格来设|菜单项Q一个垂直的菜单Q用行来区分菜单Vgwt-MenuBar只是讑֮外层的DIV的样式?br />
<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实现Q用gwt-PasswordTextBox样式?/code>
PopupPanel
只是一个DIV.
RadioButton
用一个INPUT实现Q用gwt-RadioButton样式?/code>
RootPanel
一个RootPanel可以附加CQ何的lg上,但是以前属于q个lg的所有的内容都会被清除。假如你仔细xQ你会发现除了初始化之外Q这个组件还有很多用处?/code>
ScrollPanel
<div style="overflow: auto;">
一个Div讑֮了overflow属性ؓscroll 或auto.
content
</div>
SimplePanel
是一个Div.
StackPanel
<table class="gwt-StackPanel" cell-spacing="0" cell-padding="0">
用一个表格来实现Q每一个组用两行来保存Q第一行放了标{,W二行放了内宏V默认的q个表格使用gwt-StackPanel样式Q标{行用了gwt-StackPanelItem和gwt-StackPanelItem-selected.当一个标{被选中的时候,它的样式q原来的gwt-StackPanelItem替换成ؓgwt-StackPanelItem-seleted.
<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
<table class="gwt-TabBar" cell-spacing="0" cell-padding="0">
TabBar使用一个HorizontalPanel来实玎ͼ所以它也是一个Table,表格的样式是gwt-TabBar。对于第一个标{,通常是一个空的,它的样式是gwt-TabBarFirst,是Z装饰,最后也会加上一个空的标{,指定样式为gwt-TabBarRest。当一个标{被选中的时候,gwt-TabBarItem-selected的样式会附加到样式中Q这点和MenuItem是一L?br />
<tbody>
<tr>
<td class="gwt-TabBarFirst" style="height: 100%;"><div class="gwt-HTML" style="height: 100%;">&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%;">&nbsp;</div></td>
</tr>
</tbody>
</table>
TabPanel
<table class="gwt-TabPanel" cell-spacing="0" cell-padding="0">
用一个VerticalPanel来实玎ͼ包含了一个TabBar和一个DeckPanelQ这样就嵌套几层表格Q样式gwt-TabPanel用到最外层表格。gwt-TabBar用到TabBar,gwt-TabPanelBottom用到DeckPanel的DIV上了。需要注意的是TabBar获取了width:100%样式Q这样你q道TabBar中的gwt-TabBarRest样式的必要了?br />
<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%;">&nbsp;</div></td>
<td class="gwt-TabBarRest" style="width: 100%;"><div class="gwt-HTML" style="height: 100%;">&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
<div class="gwt-Tree" style="overflow: auto;">
是一个包含了多个TreeItem的DivQ默认样式gwt-Tree,讑֮overflow:auto.
<div style="position: relative; margin-left: 16;" (handle)>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
TreeItem
<div style="position: relative; margin-left: 16; white-space: nowrap" (handle)>
用一个包含了一个表格的DIV来实现。默认的样式gwt-TreeItem和gwt-TreeItem-selectedQ来修饰里面的内宏V但选中的时候gwt-TreeItem-selected会替换gwt-TreeItem。这个StackPanel是一L?br />
<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">
用一个表格来实现Q所有的东西按行来排列?br />
<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