WebSphere Portal调整portlet之间的间隙

间距的原因：portlet之间存在的间距过大的原因是portal v6.0提供了托拽的功能，这些间距是为了这个功能而存在的，所以如果一点间距都不想要的话，portal就没有了托拽的功能。

首先是portlet之间的间距

它是由皮肤下边的两个UnlayeredContainer-V.jsp（控制垂直间距）,UnlayeredContainer-Hjsp jsp(控制水平间距)文件导致的。只要在里边修改它内置的一些空隙就可以了
修改后的UnlayeredContainer-H,jsp

<table class="layoutRow" cellpadding="0" cellspacing="0" border="0"><tr>
<%
   boolean hasChildren=false;
%>
<portal-skin:layoutNodeLoop var="currentLayoutNode">
<%
hasChildren=true;
String columnWidth=(String)currentLayoutNode.getMetrics().getValue(CompositionMetrics.WID;
%>
<td valign="top" <% if (columnWidth != null)
{
out.print ("width=\"");
out.print (columnWidth);
out.print ("\"");
} %>>
<portal-skin:layoutNodeRender/>
</td>
<td style="width:1px;" valign="top">
<dnd:drop namespace="wp" type="portlet_windowID" action="#" name="<%=com.ibm.wps.dnd.util.Constants.PORTLET_INSTANCE_ID%>" validator="com.ibm.wps.dnd.impl.DNDPortletActionValidator" optionalActionJavascript="DND_MOVE_PORTLET_JS"><dnd:additionalAction namespace="wp" type="portlet_ID" action="#" name="<%=com.ibm.wps.dnd.util.Constants.PORTLET_ID%>" validator="com.ibm.wps.dnd.impl.DNDPortletActionValidator" supportsMultiselect="true" multiselectDelimiter="__DND_DELIM__" optionalActionJavascript="DND_ADD_PORTLET_JS"/>
</dnd:drop></td>
</portal-skin:layoutNodeLoop>
<%
if (!hasChildren) {%><td width="100%">&nbsp;</td>
<%}%></tr>
</table>

UnlayeredContainer-V.jsp：

<table class="layoutColumn" cellpadding="0" cellspacing="0" border="0">
<portal-skin:layoutNodeLoop var="currentLayoutNode">
<tr>
<td style="width:100%;" valign="top"><portal-skin:layoutNodeRender/></td>
</tr>
</portal-skin:layoutNodeLoop>
<tr>
<td>
<dnd:drop namespace="wp" type="portlet_windowID" action="#" name="<%=com.ibm.wps.dnd.util.Constants.PORTLET_INSTANCE_ID%>" validator="com.ibm.wps.dnd.impl.DNDPortletActionValidator" optionalActionJavascript="DND_MOVE_PORTLET_JS">&nbsp;

<dnd:additionalAction namespace="wp" type="portlet_ID" action="#" name="<%=com.ibm.wps.dnd.util.Constants.PORTLET_ID%>" validator="com.ibm.wps.dnd.impl.DNDPortletActionValidator" supportsMultiselect="true" multiselectDelimiter="__DND_DELIM__" optionalActionJavascript="DND_ADD_PORTLET_JS"/>
</dnd:drop>
</td>
</tr>
</table>

等你把这些文件替换后发布到服务器上后还是发现有一点间距：

这些间距大概有5px左右吧 ！

你可以看看style－theme。Jspf 文件

有个wpsPortlet 样式文件定义了每个portlet 的间距

.wpsPortlet{
   margin:5px;
   border-left: 1px solid;
   border-right: 1px solid;
   border-bottom: 1px solid;
   border-color: ${colors.skinBorder};
   background-image:none;
}

这下 portlet与portlet之间就没有间距了，可是portlet与最左边的屏幕还是有间距

可以看一下 defaultjsp文件

    <td width="100%" height="100%" valign="top">
<a name="wpsMainContent">
</a>
<%-- Call the portal engine command to render the portlets for this page --%>
<div id="mainContent">
<portal-core:screenRender/>
</div></td>
</tr>
</table>

这些代码导入了屏幕 你可以看到有一个 id＝“mainContent”属性。

再来看 style-theme.jspf 文件

#mainContent {
   padding: 5px;
}
整个portlet与屏幕之间 还是有间距 再把它给改一下就可以了

现在没有间距了 可是当你把皮肤替换为noskins 时发现又出现间隙了

在style-theme.jspf文件里你可以看到这个样式文件它定义了单个portlet与皮肤之间的间距，不用我说你也知道杂办了吧！

.wpsPortletBody{
   margin: 5px;
   background-image:none;
}

现在终于在页面上找不到一点间距了 。

评论

1 楼 varhome 2010-05-20  

请问我按照你的步骤修改后，怎么还是没有效果，页面还是显示有间距，而且我把skin里面的
<dnd:XXX>标签都去掉了，页面上还是生成了好多间距的行和列