Apache Click 中的表单：如何将标签与字段堆叠？

发布于 2024-11-04 20:07:45 字数 1007 浏览 0 评论 0原文

我正在使用 Apache Click 开发一个应用程序，旨在用于移动浏览器——所以我预计主要用于窄显示（240 像素以上）。目前，我尝试将 org.apache.click.control.Form 与几个 org.apache.click.control.Field 一起使用，包括 TextField 和选择。

然而，当尝试将整个页面的宽度限制为 240 像素时，表单仍然水平溢出，这迫使用户向右平移并使设计“丑陋”。一种可能的替代方法是将 Field 标签放在相应输入字段的顶部，但是我还没有找到一种方法来做到这一点，因为 Click 将每个 Field 呈现为HTML 包含两个，一个包含，另一个包含（对于 TextField 类）或

我正在考虑探索的一些想法：

我承认可能有一些我不知道的“CSS 魔法”，它允许告诉浏览器“渲染所有 ”彼此之上”或类似的东西。
我的另一个想法（涉及更多工作）是对这些类进行子类化，在 HTML 呈现时将标签和字段显式地放在彼此之上。某些移动浏览器（例如我测试过的基于 Windows Mobile 的浏览器）具有“调整为单列”选项，但这需要明确的用户干预。其他浏览器中似乎没有类似的选项，例如 Opera Mobile。
使用空字符串标签显式放置单独的标签和 Field。这似乎是“最愚蠢”的解决方案，但也相对简单。

我希望可能有一种我没有提到或想到的相对简单的方法来做到这一点。因此，我正在寻找有关如何配置 Click 或使用 CSS 或其他内容的建议，以生成呈现彼此顶部的两个 Field 元素（标签和实际输入字段）而不是“默认值”的 HTML。 “并排单击会在“窄”显示器上占用一些宝贵的屏幕。

提前致谢。

原文

I'm developing an application using Apache Click, aimed for mobile browsers -- so I expect to be mostly used in narrow display (240 pixels upward). Currently, I attempt to use a org.apache.click.control.Form with a couple of org.apache.click.control.Fields, including TextFields and Selects.

However, when attempting to limit the width of the whole page to, say, 240 pixels, the form still overflows horizontally, which forces the user to pan to the right and makes the design "uglish". A possible alternative would be to put the Field labels on top of the respective input fields, however I haven't found a way to do that as Click renders each Field as an HTML <tr class="field"> with two <td>, one containing the <label> and the other containing the <input> (for class TextField) or <select> (for class Select).

Some ideas that I'm considering exploring:

I admit that there might be some "CSS magic" that I don't know of and that allows to tell the browser to "render all <td>s on top of each other" or something like that.
Another idea that I have (which involves some more work) is to subclass those classes, putting explicitly the label and fields on top of each other as they're HTML rendered. Some mobile browsers (e.g. Windows Mobile based that I've tested with) have a "adjust to single column" option, but this requires explicit user intervention. There doesn't seem to be a similar option in other browsers, such as Opera Mobile.
Explicitly putting the separate label and Field with an empty string label. This seems the "dumbest" solution but also relatively easy.

I'm hoping that there might be a relatively simple way to do this that I've not mentioned or thought of. Therefore, I'm looking for suggestions on how to configure Click, or use CSS, or something else, to result in HTML that renders the two Field elements (label and the actual input field) of top of each other instead of the "default" Click side-by-side which takes up some precious screen on "narrow" displays.

Thanks in advance.

分享到QQ

分享到微博