एक्सपेज में अनुभाग कैसे बनाएं इस

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

आप पेस्ट प्रलेखन से इस कोड को यह काम करता है: यह इस तरह दिखता है? यदि ऐसा होता है तो आपको मानक 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%, एक थीम ड्रॉपडाउन है जहां आप "डिफ़ॉल्ट" या "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 ', जेन 2 विषय के लिए है XP में लागू नहीं किया गया। तो क्या आप प्राप्त यह है: