6

当在 Web 上查看包含列中带有组合框的表的 Xpage 时，Domino 生成的 html 为组合框创建了一个表，但为其他组件创建了一个跨度（当前在 textFields 和 computedFields 上测试）。
然后用一个让我烦恼的垂直对齐差异的像素来渲染它。
我该如何克服呢？

<table>
        <tbody>
            <tr>
                <td colspan="3">
                    <table id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyName">
                        <tbody>
                            <tr>
                                <td>
                                    AVANZA SWEDEN
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <span id="view:_id1:_id2:_id3:legend1:callbackFieldControlSet:CounterpartyShort">AVANZA SWEDEN</span>
                </td>
            </tr>
        </tbody>
    </table>

在编辑模式下，差异仍然存在，但组合框生成的 html 不是表格而是选择，然后我可以使用 css 控制它。
见下图。

示例读取模式
示例阅读模式

示例编辑模式（css 编辑）：
示例编辑模式

<xp:table>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty name:"
                    id="counterpartyName_Label1"
                    for="CounterpartyName"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:comboBox
                    id="CounterpartyName"
                    value="#{document1.CounterpartyName}"
                    required="true"
                >
                </xp:comboBox>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Counterparty short:"
                    id="counterpartyShort_Label1"
                    for="CounterpartyShort"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.CounterpartyShort}"
                    id="CounterpartyShort"
                    required="true"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
        <xp:tr>
            <xp:td>
                <xp:label
                    value="Bic Code:"
                    id="bicCode_Label1"
                    for="BicCode"
                >
                </xp:label>
            </xp:td>
            <xp:td>
                <xp:inputText
                    value="#{document1.BicCode}"
                    id="BicCode"
                    styleClass="xspInputFieldEditBox"
                >
                </xp:inputText>
            </xp:td>
        </xp:tr>
    </xp:table>
4

4 回答 4

16

我看到你已经接受了一个答案，但我提出了一个替代解决方案，它只是消除了生成的 HTML。我意识到这可能是一个乏味的解决方案:)

我在XPages 为 checkbox group 生成表时遇到了类似的问题。Tim Tripcony 建议我创建一个自定义渲染器来修改控件的输出。一开始它有点棘手，但一旦你掌握了它，它就会做得很好。在您的只读字段的情况下，它会更简单:)

1.创建自定义渲染器

在这里，我创建了一个自定义渲染器 Java 类，名为pkg.MyRenderer. 您可以在“代码 > Java”中创建此 Java 文件。在这里，我只输出组合框的选定值，仅此而已。

package pkg;

import java.io.IOException;
import java.io.Writer;
import javax.faces.component.UISelectOne;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.render.Renderer;

public class MyRenderer extends Renderer {
    public void encodeBegin(FacesContext context, UIComponent component) throws IOException {
        UISelectOne obj = (UISelectOne)component;
        Writer writer = context.getResponseWriter();
        writer.write(obj.getValue().toString());
    }

    public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    }
}

2.注册您的自定义渲染器

现在在包资源管理器中转到“YourDatabase.nsf > WebContent > WEB-INF > faces-config.xml ”。在那里您需要注册您的自定义渲染器。您只需要确保component-family与组合框所属的相同。

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
    <render-kit>
        <renderer>
            <component-family>javax.faces.SelectOne</component-family>
            <renderer-type>pkg.MyRendererType</renderer-type>
            <renderer-class>pkg.MyRenderer</renderer-class>
        </renderer>
    </render-kit>
</faces-config>

3.分配你的自定义渲染器来控制

由于您希望自定义渲染器仅在它处于只读模式时才处于活动状态，因此您检查它，然后将rendererType控制设置为ie中renderer-type定义的。faces-config.xmlpkg.MyRendererType

在这里，我检查控件comboBox1是否处于只读模式，如果是，则使用pkg.MyRendererTypeelse 使用控件的渲染器。

<xp:comboBox id="comboBox1" .....>
    <xp:this.rendererType><![CDATA[${javascript:var cb:com.ibm.xsp.component.xp.XspSelectOneMenu = getComponent("comboBox1");
cb.isReadonly() ? "pkg.MyRendererType" : cb.getRendererType();}]]></xp:this.rendererType>
.....
.....
.....
</xp:comboBox>

当您在只读模式下使用控件运行它时，只会显示组合框的值，而不会显示其他任何内容（没有表格，耶！）。当控件不处于只读模式时，会像以前一样显示一个下拉列表。

于 2013-04-05T11:53:31.407 回答
6

问题是内部表格有自己的边界（一如既往：一个用于表格本身，一个用于 td）需要折叠。只需创建一些 CSS 来处理这个问题：

  1. 为您的外部表提供自己的样式类，例如“myOuterTable”

  2. 然后，您的 css 将处理“.myOuterTable”中的任何表，如下所示：

    table.myOuterTable 表 {border-collapse:collapse;}

这在编辑和阅读模式下都可以正常工作，因为只有在阅读模式下你才有额外的“内部”表格；在编辑模式下，没有什么可以折叠...

甚至可以在 IE 中工作，顺便说一句...

希望对你有帮助

于 2013-04-05T10:20:38.433 回答
1

3 种可能的操作（取决于复杂性）：

  • 编写自己的下拉组件
  • 添加一个文本字段。使用可见属性根据读取/编辑模式仅显示/隐藏一个
  • 使用 css 和 padding（可以取负值）移动一个像素
于 2013-04-05T10:10:20.663 回答
1

此代码将使用 dojo 修复页面上的所有组合框，运行 onClientLoad：

if("#{javascript:document1.isEditable()}" == "false"){
    // Search for all nested tables with ids
    dojo.query('table td table[id]').forEach(function(node) {
        var value = '';

        // Locate the first table cell, which contains the value
        dojo.query('td:first-child', node).forEach(function(innerNode) {
            value = innerNode.innerHTML;
        });

        // Replace the table with only the value (or a blank)
        node.outerHTML = value;
    });
}

笔记：

  • 更新第 1 行中的文档名称以匹配页面上的文档名称。
  • 此代码假定您的组合框已经嵌套在表格单元格中。如果不是这样，您可以在第 3 行中优化选择器。
  • 如果您遇到影响页面中其他表格的冲突，您可能需要在第 3 行中优化选择器。
于 2013-07-24T13:50:56.457 回答