如何使Xpages中的部分看起来像这样

问题描述：

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

我创建一个新的数据库并设置主题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>

好点。它看起来像这样：

答

如果粘贴从文档中的代码工作的呢？如果这样做，那么你需要将标准的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-->

我试过了，它不起作用。 –

将代码粘贴到源代码中然后查看该页面时，它的外观如何。由于我们正在谈论前端，图片将有所帮助。 –

答

请注意，XPages Extension Library中的“Widget Container”控件（xe：widgetContainer）大致等同于OneUI Section控件。您可以在Extension Library Demo App中看到：XPagesExt.nsf/OneUI_WidgetContainer.xsp 使用该控件而不是xp：section控件设计页面可能更合适。

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

答

由于勒梅尔指出，控件容器控件是你想要使用什么下面的代码：

<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”在XPage中实现。所以你得到的是：

如何使Xpages中的部分看起来像这样

相关推荐