如何在Xpages中创建部分看起来像这样

Question

我很困惑。在oneUI 3 documentation page中有一个很好的部分。它看起来像这样：

我创建了一个新的数据库，并将主题设置为3.0.2并输入下面的代码，它看起来与我想要生成的内容完全不同。

如何使用OneUI文档重现我在那里看到的内容？

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:section id="section1" header="Header"
        headerStyle="lotusSectionHeader2">
    </xp:section>
</xp:view>

好点。它看起来像这样：

Answer 1

注意，XPages Extension Library中的“Widget Container”控件（xe：widgetContainer）大致相当于OneUI Section控件。您可以在扩展库演示应用程序中看到：XPagesExt.nsf / OneUI_WidgetContainer.xsp 使用该控件而不是xp：section控件来设计页面可能更合适。

此外，在您链接到的OneUI 3文档中，在页面右侧，页面向下25％，有一个主题下拉列表，您可以选择“默认”或“gen2”。 你要求的行为看起来像“gen2”行为（看起来像OneUI 2）， 而你看起来的截图更接近“默认”（OneUI 3）行为。 您可能想要研究如何启用gen2外观。

Answer 2

如果从文档中粘贴此代码，它是否有效？如果是，则需要将标准html元素移动到xpage元素。

    <!-- section is an HTML5 element. Use div if you are using HTML4. -->
<section class="lotusSection2">
<!-- header is an HTML5 element. Use div if you are using HTML4. -->
<header class="lotusSectionHeader"><div class="lotusInner"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="sectionBodyID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h2 class="lotusHeading"><a href="javascript:;">Section Header</a></h2><a class="lotusIcon lotusActionIcon" href="javascript:;" role="button" aria-haspopup="true" aria-owns="[menuID]"><img src="../../css/images/blank.gif" alt="" /><span class="lotusAltText">Actions</span></a></div></header>
<div id="sectionBodyID" class="lotusSectionBody">
<div class="lotusChunk">Data goes here....</div>
    <header class="lotusSubheader"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="subsectionID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h3 class="lotusHeading2"><a href="javascript:;">Subsection</a></h3></header>
    <div id="subsectionID" class="lotusSubsection">
More data goes here....
</div>
</div></section><!--end section-->

Answer 3

正如Maire所指出的，Widget容器控件使用以下代码执行您想要的操作：

<xe:widgetContainer id="widgetContainer1"
    titleBarText="Section Header" collapsible="true"
    style="width: 300px;">
    <xe:this.dropDownNodes>
        <xe:basicLeafNode label="test1"></xe:basicLeafNode>
        <xe:basicLeafNode label="test2"></xe:basicLeafNode>
        <xe:basicLeafNode label="test3"></xe:basicLeafNode>
    </xe:this.dropDownNodes>
    More data here...
</xe:widgetContainer>

但正如她指出的那样，外观与感觉你发布的是Gen2主题，这在XPage中没有实现。所以你得到的是：