Wie Abschnitte in Xpages so aussehen lassen

Question

Ich bin verwirrt. In der oneUI 3 documentation page gibt es einen schönen Abschnitt. Es sieht wie folgt aus:

ich eine neue db und stellen Sie das Thema auf 3.0.2 und in der unten stehenden Code zu setzen, und es sieht nichts, was ich zu erzeugen versuche.

Wie kann ich die OneUI-Dokumentation verwenden, um zu reproduzieren, was ich dort sehe?

<?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> 

Guter Punkt. Es sieht wie folgt aus:

Answer 1

Wenn Sie diesen Code aus der Dokumentation einfügen funktioniert es? Wenn dies der Fall ist, müssen Sie die Standard-HTML-Elemente in xpage-Elemente verschieben.

<!-- 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 2

Hinweis, das "Widget-Container" Steuerung (xe: widgetContainer) in der XPages Extension Library entspricht in etwa dem OneUI Section Control. Sie können dies in der Extension Library Demo App unter folgendem Link sehen: XPagesExt.nsf/OneUI_WidgetContainer.xsp Es könnte besser sein, die Seite mit diesem Steuerelement als mit dem Steuerelement xp: section zu entwerfen.

Außerdem gibt es im OneUI 3 doc, zu dem Sie einen Link erstellen, auf der rechten Seite der Seite, 25% nach unten, ein Theme-Dropdown, in dem Sie "default" oder "gen2" auswählen. Das Verhalten, nach dem Sie fragen, sieht aus wie das "gen2" -Verhalten (scheint OneUI 2), , während Ihr Screenshot, wie es aussieht, näher am "Standard" (OneUI 3) -Verhalten ist. Vielleicht möchten Sie untersuchen, wie Sie das Erscheinungsbild von gen2 aktivieren können.

Answer 3

Wie Maire weist darauf hin, funktioniert das Widget Container-Steuerelement, was Sie den folgenden Code wollen mit:

<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> 

Aber als sie weist darauf hin, das Aussehen & fühlen Sie auf dem Laufenden ist für das Thema Gen2, die ‚isn t in XPages implementiert. Also, was Sie bekommen, ist dies: