在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):

1. 将它们分组为内联元素(例如<span>或带有display: inline;的任何元素).
2. 将它们分组为块元素(例如<div>或任何带有display: block;的元素)，并给它们一个全部float: left;.

1. Group them in inline elements (like <span> or any element with display: inline;).
2. Group them in block elements (like <div> or any element with display: block;) and give them all a float: 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屋！