Notes/Domino XPages Development Forum - How to implement sample components from oneuiv2.1 theme with Xpages?

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal

~Tate Dwoniberggon

Mar 29, 2012, 9:25 AM

6 Posts

How to implement sample components from oneuiv2.1 theme with Xpages?

Category: Styles and Themes
Platform: All
Release: 8.5.3
Role: Developer
Tags: OneUIv2.1,xpages
Replies: 10

At current, I am developing a new site with XPages Technology and its application theme is oneuiv2.1 (IBM Lotus User Interface Developer Documentation - Version 2.1 -http://infolib.lotus.com/resources/oneui/2.1/docPublic/examples.htm?content=3colSummary.htm). For me, it is reference site to developer XPages.

I want to create sections (components) with XPages and with the same design that there are in examples web site ( http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/section.htm), but i don't know how to implement it with XPages components, it does not get the same look and design.

Exmaple:

<div class="lotusSection">
	<h2><a class="lotusSprite lotusArrow lotusTwistyOpen" href="javascript:;" title="click to collapse section"><span class="lotusAltText">&#x25bc;</span></a><span class="lotusLeft">Section Header</span><a class="lotusIcon lotusActionMenu" href="javascript:;" title="click for actions" aria-haspopup="true"><img src="../../../css/images/blank.gif" alt="" aria-label="actions button" /><span class="lotusAltText">Actions</span></a></h2>
	<div class="lotusSectionBody">
	<div class="lotusChunk">Data goes here....</div>
</div></div><!--end section-->

Do you know to do this?

Thanks

~Paul Chutoomanynds

Mar 29, 2012, 11:20 AM

56 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

Hi,

useally, you only have to build the structure with xp:div elements, give them as styleclass the names given in the documentation, and then use the oneUI in your application properties in the XPages tab.

What is your problem in detail?

~Tate Dwoniberggon

Mar 29, 2012, 2:51 PM

6 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

I used widgetContainer component.

<xe:widgetContainer id="widgetContainer6"

titleBarText="Section in right column" dropDownRendered="true">

<xe:this.dropDownNodes>

<xe:basicLeafNode label="Section action 1"></xe:basicLeafNode>

<xe:basicLeafNode label="Section action 2"></xe:basicLeafNode>

</xe:this.dropDownNodes>

<xp:button value="Show modal dialog" id="button6" styleClass="lotusBtn lotusChunk">

<xp:this.onclick><![CDATA[XSP.openDialog("#{id:dialog2}");]]></xp:this.onclick>

<xp:eventHandler event="onclick" submit="false">

<xp:this.script><![CDATA[XSP.openDialog("#{id:dialog2}");]]></xp:this.script>

</xp:eventHandler>

</xp:button>

</xe:widgetContainer>

~Paul Chutoomanynds

Mar 29, 2012, 5:30 PM

56 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

Ok..... good job?

What do you want to tell me with that? Please describe the problem you have.

~Tate Dwoniberggon

Mar 29, 2012, 6:06 PM

6 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

I think it would be interesting that IBM should specify samples components from Web Site IBM Lotus User Interface Developer Documentation (

http://infolib.lotus.com/resources/oneui/2.1/docPublic/components/overview.htm) with XPage code instead of HTML.

This chuck

<xe:widgetContainer id="widgetContainer7" titleBarText="Section Header" dropDownRendered="true"><xe:this.dropDownNodes>

<xe:basicLeafNode label="Go Google"><xe:this.href><![CDATA[#{javascript:"http://www.google.es"}]]></xe:this.href>

</xe:basicLeafNode> </xe:this.dropDownNodes><xp:div styleClass="lotusSectionBody"> <xp:div styleClass="lotusChunk">

Data goes here....

</xp:div></xp:div> </xe:widgetContainer>

instead of

<div class="lotusSection">
<h2><a class="lotusSprite lotusArrow lotusTwistyOpen" href="javascript:;" title="click to collapse section"><span class="lotusAltText">▼</span></a><span class="lotusLeft">Section Header</span><a class="lotusIcon lotusActionMenu" href="javascript:;" title="click for actions" aria-haspopup="true"><img src="../../../css/images/blank.gif" alt="" aria-label="actions button" /><span class="lotusAltText">Actions</span></a></h2>
<div class="lotusSectionBody">
<div class="lotusChunk">Data goes here....</div>
</div></div>

Thanks

~Paul Chutoomanynds

Mar 30, 2012, 10:01 AM

56 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

Yeah, that's true. But I think this is related to the fact that IBM want to use OneUI not only for XPages development, but for all their applications (as far as I understood). So maybe they decided to put in HTML to have a generic documentation and no XPages specific one.

Do you still have a problem with it or is everything alright?

~Tate Dwoniberggon

Apr 2, 2012, 7:07 AM

6 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

OK.

How can i implement actions for views ( Summary of all entries, Details for all entries , Tree view of all entries,Thumbnails for all entries)?

I don't know. Everything would be easy if samples were implemented in XPAGES code.

~Paul Chutoomanynds

Apr 2, 2012, 8:55 AM

56 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

Try this:

<xp:div styleClass="lotusContent">

<xp:div styleClass="lotusActionBar lotusBtnContainer">

<xp:link escape="true" id="link4" outerStyleClass="lotusBtn lotusFormButton lotusLeft"> </xp:link>

</xp:div>

<xp:div>

~Tate Dwoniberggon

Apr 2, 2012, 9:55 AM

6 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

Sorry, I mean events code (SSJS), that is, event handler for "onclick" event

<xp:td>Display:</xp:td><xp:td>

<xp:div><xp:link escape="true" text="" id="viewAsListToggleLink" styleClass="lotusSprite lotusView lotusSummaryOn lotusSelected">

<xp:span styleClass="lotusAltText">Summary</xp:span>

<xp:eventHandler event="onclick" submit="true" refreshMode="complete"> <xp:this.action><![CDATA[<<<<HERE>>>>]></xp:this.action>

</xp:eventHandler>

</xp:link>

~Paul Chutoomanynds

Apr 2, 2012, 10:22 AM

56 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

This is not really related to OneUI, that is a programming and technical design issue. We don't know you code and application, and I think no one will develop your application. If you have specific questions or a problem, we would be happy to help.

~Tate Dwoniberggon

Apr 2, 2012, 10:31 AM

6 Posts

Re: How to implement sample components from oneuiv2.1 theme with Xpages?

Thank you very much.