comboBox在readmode web中生成表而不是span

Question

当在Web上查看包含带有comboBox的表的Xpage时,Domino生成的html会为组合框创建一个表,但是为其他组件创建一个span (当前在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>

Answer 1

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

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

1.创建自定义渲染器

在这里,我创建了一个名为的自定义渲染器Java类pkg.MyRenderer.您可以在"Code> 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.注册自定义渲染器

现在在Package Explorer中转到"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>

当你以只读模式控制运行它时,只显示组合框的值而没有其他任何东西(没有表格,是的!).当控件不处于只读模式时,会显示一个下拉列表,如前所示.

Answer 2

问题是内表有自己的边框(一如既往:一个用于表本身,另一个用于td)需要折叠.只需创建一些CSS来处理:

1. 给你的外表自己的风格类,例如"myOuterTable"

2. 你的css然后将解决".myOuterTable"中的任何表,如下所示:

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

这在编辑和读取模式下都能正常工作,因为只有在读取模式下才有额外的"内部"表; 在编辑模式下,没有任何东西可以折叠......

即使在IE中工作,顺便说一下......

希望这对你有用