新手JSF问题 - 如何实现这种布局？

Question

我正在尝试实现此处显示的布局

每个面板都应链接到一个支持bean，稍后我将根据上下文添加不同的组件。

我尝试使用panelgrid但无法实现这种外观。 我更喜欢只使用JSF，但如果不可能或太复杂的RichFaces也可以。

谢谢！

Answer 1

这不仅是JSF / HTML的问题，也是CSS的问题。上面的布局基本上可以实现如下：

<h:panelGroup id="header" layout="block"></h:panelGroup>
<h:panelGroup id="leftcol" layout="block"></h:panelGroup>
<h:panelGroup id="rightcol" layout="block"></h:panelGroup>

（生成以下HTML）

<div id="header"></div>
<div id="leftcol"></div>
<div id="rightcol"></div>   

您可以使用CSS来设置/定位它，如：

#header {
    width: 100%;
    height: 100px;
}
#leftcol {
    width: 200px;
    float: left;
}
#rightcol {
    float: left;
}

就是这样。

Answer 2

您可以使用已实现上述布局的HTML代码。即。

<table>
   <tr>..</tr>
   <tr>..</tr>
</table>

但是，无表格布局是首选 - 即使用<div>标签。 （see here）