总结一下使用Seam过程中遇到的一点问题:
1. 关于Seam自动生成的页面在IE6内显示错误的问题
搜索、编辑和表单显示的标题在IE6里面看不到,但是用鼠标拖拉相应的位置则会出现,而在Firefox中都正常,出现问题的组件有如下:
<rich:simpleTogglePanel style="width:100%" label="用户信息搜索条件" switchType="ajax">
.....
</rich:simpleTogglePanel>
<rich:panel style="width:600px">
<f:facet name="header" >用户详细信息</f:facet>
......
</rich:panel style="width:600px">
默认生成的JBoss代码没有style="width:600px"和style="width:100%"等样式属性,所以在IE6内显示有些问题,通过添加这个属性则给予了解决,同时在Firefox中的表现也是正常的。
2. 修改Seam生成的代码的默认CSS样式以便更好支持中文字体显示的问题。
由于默认的CSS样式对于汉字的显示非常不友好,所以我通过修改stylesheet/theme.css文件控制字体的颜色和大小,通常设置为{ font-size: 9pt; font-weight: normal;}的视觉效果较好,对于小字体最好不要使用粗体,否则在Firefox中的显示很别扭。另外,对于字体大小的指定最好以pt为单位,而不要使用像素,会影响不同机器上的显示效果。
经过一番努力,对生产的页面进行了汉化,汉字显示效果在IE6和Firefox中都一样了,感觉还行,坚定了使用Seam的信心。
以下提供一个修改后的theme.css文件,是Seam 2.1.1.GA + JBoss Tools 3.0.0CR1的环境:
html { overflow-y: scroll; } body { font-size: 9pt; font-weight: normal; margin: 0px; } a img { border: none; } h1 { font-size: medium; margin-top: 0; } input[type=submit], input[type=button] { font-size: 9pt; font-weight: normal; margin: 5px 5px 5px 0; cursor: pointer; } input[type=text], input[type=password], textarea { font-size: 9pt; font-weight: normal; padding-left: 1px; } .tableControl, .actionButtons { width: 100%; } .tableControl a { padding-left: 10px; } .tableControl { text-align: right; } .footer { text-align: center; font-size: 9pt; font-weight: normal; margin-bottom: 10px; } .rich-table { width: 100%; } .body { padding: 30px; } .columnHeader:hover { color: #FF6600; } .message { padding: 5px; list-style: none; border: 0; background: none; padding: 0; color: #000000; margin: 5px 0 8px 0; font-size: 9pt; font-weight: normal; } .message li { background: no-repeat left center; padding-top: 1px; padding-left: 20px; margin-left: 3px; } .message li.infomsg { background-image: url(../img/msginfo.png); } .message li.errormsg { background-image: url(../img/msgerror.png); } .message li.warnmsg { background-image: url(../img/msgwarn.png); } .name { vertical-align: top; font-size: 9pt; font-weight: normal; width: 115px; float: left; padding: 5px; margin-top: 3px; clear: left; } .value { font-size: 9pt; font-weight: normal; } .columnHeader { font-size: 9pt; font-weight: normal; } .value { float: left; padding: 5px; } .error { float: left; padding: 5px; } .errors { color: red; vertical-align: middle; } img.errors { padding-right: 5px; } .errors input, .errors textarea { border: 1px solid red !important; } .required { color: red; padding-left: 2px; } .rich-stglpanel-body { overflow: auto; } /* the specificity here is necessary to override the defaults */ .rich-panel .rich-panel-header, .rich-stglpanel .rich-stglpanel-header { padding: 2px 3px; font-size: 9pt; font-weight: normal; } select { font-size: 9pt; font-weight: normal; } .rich-panel input[type=submit], .rich-panel input[type=button], .rich-tabpanel input[type=submit], .rich-tabpanel input[type=button] { margin-bottom: 0; } .tableControl input[type=submit], .tableControl input[type=button], .tableControl select { margin: 5px 0 5px 5px; } /* I don't know why this is necessary, but the select is off by a pixel on the top and is padding too much on the left */ .tableControl select { margin-left: 2px; position: relative; top: 1px; } .actionButtons { padding-left: 1px; } .actionButtons select { margin: 5px 5px 5px 0; vertical-align: bottom; } .rich-datalist { list-style: square; margin: 6px 0 1px 0; padding-left: 18px; } .rich-list-item { padding-bottom: 4px; } div.info { font-size: 9pt; font-weight: normal; } ul.bullets { list-style: square; } ul.bullets li { padding-bottom: 2px; } .rich-table-cell { font-size: 9pt; font-weight: normal; } td.action { font-size: 9pt; font-weight: normal; text-align: center; width: 8em; white-space: nowrap; } .rich-toolbar-item a { font-size: 10pt; font-weight: normal; } td.action a { padding-left: 1px; padding-right: 1px; font-size: 10pt; font-weight: normal; }
另外,如果能够自定义一个Richfaces的皮肤插件,对于使用Seam会大有裨益,毕竟在代码里手工添加太多的样式代码也不好看嘛。
Richfaces + JSF是我目前最缺乏的知识了,不看具体的例子都不会用,而且对于如何和样式结合也不懂,要补课的地方很多啊。