在JSF中水平放置组件 [英] Horizontal placement of components in JSF
问题描述
应该很简单,但我找不到答案,我想将组件水平放置而不是垂直放置.
Should be simple but I couldn't find the answer, I would like to place components horizontally instead of vertically.
我想要实现的是带有两行或更多行的rich:toolbar.我一直在尝试使用具有panelgrid和两个这样的面板组的工具栏来做到这一点:
What I'm trying to achieve is a rich:toolbar with 2 or more rows. I've been trying to do that with a toolbar that has a panelgrid and two panelgroups like this:
<rich:toolbar...>
<f:panelgrid columns="1"...>
<f:panelgroup id="row1" .../> <-- Should be horizontal placement
<f:panelgroup id="row2" .../> <-- Should be horizontal placement
<f:panelgrid/>
<rich:toolbar/>
那么如何使面板组的布局水平(或者应该使用其他东西?)
So how do I make the panelgroup layout horizontal (Or should I use something else?)
谢谢!
推荐答案
您可能已经知道,web服务器中的JSF最终以webbrowser中的HTML形式出现.在HTML中,有几种方法可以水平放置元素(最终在CSS的帮助下):
You probably already know that JSF in webserver ends up as HTML in webbrowser. In HTML, there are several ways to place elements horizontally (eventually with help of CSS):
- 将它们分组为内联元素(例如
<span>
或带有display: inline;
的任何元素). - 将它们分组为块元素(例如
<div>
或任何带有display: block;
的元素),并给它们一个全部float: left;
.
- Group them in inline elements (like
<span>
or any element withdisplay: inline;
). - Group them in block elements (like
<div>
or any element withdisplay: block;
) and give them all afloat: left;
.
JSF <h:panelGrid>
呈现HTML <table>
元素,其中每个子组件均被视为<td>
. columns
属性表示单个<tr>
中<td>
个元素的最大数量(以便<h:panelGrid>
知道何时放置</tr><tr>
). JSF <h:panelGroup>
呈现一个<span>
元素.
The JSF <h:panelGrid>
renders a HTML <table>
element wherein each child component is taken as a <td>
. The columns
attribute represents the max amount of <td>
elements in a single <tr>
(so that the <h:panelGrid>
knows when to put a </tr><tr>
in). The JSF <h:panelGroup>
renders a <span>
element.
要使用JSF实现方法1,只需将它们分组在单独的<h:panelGroup>
组件中.
To achieve way 1 with JSF, you just need to group them in separate <h:panelGroup>
components.
<rich:toolbar ...>
<h:panelgroup id="row1" ... />
<h:panelgroup id="row2" ... />
</rich:toolbar>
方法2可以用相同的方法完成,但是在CSS中使用<h:panelGroup layout="block">
和float: left;
.
Way 2 can be done the same way, but then with <h:panelGroup layout="block">
instead and a float: left;
in their CSS.
这篇关于在JSF中水平放置组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!