Xpagesでセクションを作成する方法はこうです

Question

私は困惑しています。 oneUI 3 documentation pageには素敵なセクションがあります。それは次のようになります。

私は新しいDBを作成して、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

あなたはドキュメントから、このコードを貼り付けた場合、それは動作しますか？そうであれば、標準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 2

注、「ウィジェットコンテナ」コントロール（XE：widgetContainer）のXPages拡張ライブラリではOneUI部制御とほぼ同等です。エクステンションライブラリのデモアプリケーション（XPagesExt.nsf/OneUI_WidgetContainer.xsp）で確認できます。 xp：セクションコントロールではなく、そのコントロールを使用してページをデザインする方が適切かもしれません。

また、リンク先のOneUI 3文書では、ページの25％下に「default」または「gen2」を選択したテーマドロップダウンがあります。 「gen2」の動作（OneUI 2のように見える）は、 のように見えますが、スクリーンショットは「デフォルト」（OneUI 3）の動作に近いです。 gen2の外観を有効にする方法を調べることができます。

Answer 3

Maireが指摘するように、ウィジェットコンテナコントロールを使用すると、次のコードを使用して欲しいものを行います。

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

しかし、彼女が指摘するように、一見&はあなたが投稿感じは「にISNのGen2のテーマのためのものですXPageで実装されています。だから、あなたが得るものはこれです：