361 Lotus blogs updated hourly. Who will post next? Home | Downloads | Events | Pods | Blogs | Search | myPL | About 
 
Latest 7 Posts
x$ – now a part of XPages Extension Library
Tue, Nov 18th 2014 207
Got non-XPages design elements? You really should use WebContent.
Mon, Nov 17th 2014 234
XPages and Bluemix: How to create a Websockets message without being connected to the application
Sun, Nov 16th 2014 235
One way to make a responsive XPages viewPanel
Tue, Nov 11th 2014 286
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 1121
Finding your localStorage values – Chrome Developer Tools
Thu, Nov 6th 2014 137
Because developers make mistakes – Webstorm Local History
Wed, Nov 5th 2014 197
Top 10
Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 1121
Create your own Watson Q and A example with Bluemix, Webstorm and Jazz Hub
Sun, Oct 12th 2014 505
Integrating the Bluemix Watson Translation service into an XPages application
Sun, Oct 19th 2014 454
Binding jQuery code to an XPages partialRefresh using DOM Mutation events
Wed, Oct 29th 2014 314
One way to make a responsive XPages viewPanel
Tue, Nov 11th 2014 286
Arguably the most dangerous thing you could ever do in XPages – let other people use your eval() in their SSJS
Tue, Jun 18th 2013 271
Oh duh, that is why Node Package Manager (npm) is so cool
Tue, Oct 14th 2014 260
Simple examples of how Google Developer Tools can aid Mobile Development
Thu, Oct 30th 2014 248
XPages and Bluemix: How to create a Websockets message without being connected to the application
Sun, Nov 16th 2014 235
Got non-XPages design elements? You really should use WebContent.
Mon, Nov 17th 2014 234


jQuery in XPages #9 – PageSlide
MarkyRoden    

In this article I will describe how to implement and provide examples of use the jQuery plugin PageSlide within an XPage. This is a fairly simple plugin with very few parameters but provides an alternate method for displaying information to users

PageSlide.js

Demonstration

The XPages integration of PageSlide is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Introduction

PageSlide by Scott Robin is a simple plugin which allows external content to be displayed in a sidebar on the page. There are only two parameters, direction (left or right) and modal (true or false).  It is really quite simple. As you will see my implementation does not use XPage XML markup to add resources or to activate the capability. I found that this caused issues in the browser. The capability works well using the example code from the website, applied in an XPage.

PageSlide showing data from another XPage to the side of the main

PageSlide showing data from another XPage to the side of the main

How does it work?

I added jQuery, the pageslide js library and the pageslide.css stylesheet to my database through the WebContents folder and added them to to my XPage via script and link tags.

		  <script src="js/jquery.pageslide.js"></script>
		  <script src="js/jquery-1.7.1.min.js"></script>
		  <link rel="stylesheet" type="text/css" href="css/jquery.pageslide.css" />

The basic concept works like this:

  • You create a link on the page
    • < a href=”xSomething.xsp” class=”aClass”>
  • You select the link in question
    • $(“a.aClass”).
  • You pageslide it
    • pageslide({direction: “left”, modal: false})

	<a href="xPageSlide_1.xsp" class="myClass">Display user information</a>
	<script>$("a.myClass").pageslide({ direction: "left", modal: false});</script>

When clicking on the link this produces the effect of opening xPageSlide_1.xsp in the right hand panel of the screen (direction: left moves everything to the left).
If the modal = true paramater is included then the “slide” can only be closed programmatically. This forces user interaction with the information. If not included or modal = false then clicking anywhere in the screen will make the slide disappear.

And that is pretty much it….. nothing complicated this week :)

More examples
I created a custom control with custom parameters so that the capability can be added to any page.

Custom Control properties

Custom Control properties

The example page contains a demo of this custom capability and it is build like this:

  • A link with a dynamic href is added to the form along with
  • A scriptBlock which adds the PageSlide capability to the link passing the custom parameters as necessary.

<xp:link escape="true" text="CompositeData example"
	id="compositeDataExample"
	value="${compositeData.content}" styleClass="marky">
</xp:link>
<xp:scriptBlock id="scriptBlock1">
	<xp:this.value><![CDATA[
		bModal = "#{compositeData.modal}"
		bModal == "false" ? false : true
		$("[id$=compositeDataExample]").pageslide(
			{ 	direction: "#{compositeData.direction}",
				modal: bModal
			});
	]]></xp:this.value>
</xp:scriptBlock>

The other example I created involves using sessionScope variables to look up information dynamically.

sliding in a new XPage with dynamic content

sliding in a new XPage with dynamic content

There is a hidden anchor tag on the form which is has PageSlide attached to it in a similar way as described above. It is hidden becasue we are going to “click” it programmatically when a user is selected in the comboBox.

<a href="xPageSlide_1.xsp" class="marky2" style="display:none">Display user information</a>
<script>$("a.marky2").pageslide({ direction: "right", modal: true });</script>

The combobox has a simple SSJS lookup formula showing the first column of the AllContacts view
#{javascript:@DbColumn(“”, “AllContacts”, 1)}

<xp:comboBox id="comboBox1" defaultValue="Pick a person">
	<xp:selectItem itemLabel="Pick a person" itemValue="Pick a person"></xp:selectItem><xp:selectItems>
		<xp:this.value><![CDATA[#{javascript:@DbColumn("", "AllContacts", 1)}]]></xp:this.value>
	</xp:selectItems>
	<xp:eventHandler event="onchange" submit="true" refreshMode="partial" refreshId="computedField1">
	</xp:eventHandler>
</xp:comboBox>

In the onChange event I perform a partial refresh of the computedField1. computedField1 looks like this and returns some JavaScript which triggers the link “.click()”

<xp:text escape="false" id="computedField1">
	<xp:this.value><![CDATA[#{javascript:var person = sessionScope.person=getComponent("comboBox1").getValue();
		var disp = "<script>$('a.marky2').click()</script>";
		disp2 = (person == "Pick a person" ? "" : disp);
		return disp2
	}]]>
	</xp:this.value>
</xp:text>

  • If a person is picked the computed field is refreshed
    • The computed field sets a sessionScope variable based on the value selected
      • var person = sessionScope.person=getComponent(“comboBox1″).getValue()
    • The refreshed value contains a script tag which executes when the refresh is loaded.
      • var disp = “// “;
        disp2 = (person == “Pick a person” ? “” : disp);
        return disp2
    • $(‘a.marky2′).click() clicks the hidden link opening the page slide

The xPageSlide_1.xsp page takes the sessionScope variable and looks up the user’s information based on the variable set in the computedField1 above.

<xp:div id="div1" style="display:nonex">
				    <h2 style="color: white">User Information</h2>
				    <xp:br></xp:br><xp:br></xp:br>
					<xp:text escape="true" id="computedField1"><xp:this.value><![CDATA[#{javascript:var per = sessionScope.person;
@DbLookup(@DbName(), "vwContacts", per, 4)}]]></xp:this.value></xp:text>

					<xp:br></xp:br>
					<xp:br></xp:br>
					<xp:text escape="true" id="computedField5"><xp:this.value><![CDATA[#{javascript:var per1 = sessionScope.person;
@DbLookup(@DbName(), "vwContacts", per1, 5)}]]></xp:this.value></xp:text>
					<xp:br></xp:br>
					<xp:br></xp:br>
					<xp:text escape="true" id="computedField3"><xp:this.value><![CDATA[#{javascript:var per2 = sessionScope.person;
@DbLookup(@DbName(), "vwContacts", per2, 6)}]]></xp:this.value></xp:text>
					<xp:br></xp:br>					<xp:br></xp:br>
										<xp:button id="button1" value="Close" style="display: block">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[parent.$.pageslide.close()]]></xp:this.script>
		</xp:eventHandler></xp:button><xp:br></xp:br>

</xp:div>

and with a little styling we are done for a consistent look and feel

<style>
DIV {
    background-color: #333333;
    color: #FFFFFF;
    height: 100%;
    padding: 20px;
    position: fixed;
    top: 0;
    width: 260px;
    z-index: 999999;
}

H2 { color: white }
</style>

Conclusion

I could easily see myself using PageSlide if I wanted to use a hidden menu or if I wanted to have a status update bar running in the background of my webpage which was accessed and made visible to the user when they wanted it to be there.

This is certainly the simplest plugin I have written about, but this is a very elegant solution to displaying hidden information to a user on demand.

Demonstration

The XPages integration of PageSlide is demonstrated here

 




---------------------
http://xomino.com/2012/05/08/jquery-in-xpages-9-pageslide/
May 08, 2012
13 hits



Recent Blog Posts
207


x$ – now a part of XPages Extension Library
Tue, Nov 18th 2014 9:16p   Mark Roden
I am very flattered to find out that not only is my x$ OpenNTF xSnippet being used more widely than I realized (over 600 downloads). It now being used in the latest release of the OpenNTF Extension library. If you look here – http://bootstrap4xpages.com/xsp/.ibmxspres/.extlib/responsive/xpages/js/xsp-mixin.js and search for it you will find //jQuery selector that works with XPages IDs //See - http://openntf.org/XSnippets.nsf/snippet.xsp?id=x-jquery-selector-for-xpages function x$(id [read] Keywords: xpages community openntf
234


Got non-XPages design elements? You really should use WebContent.
Mon, Nov 17th 2014 7:20p   Mark Roden
Recently I was able to help explain an issue Russ Maher was having with his application png files - http://xpagetips.blogspot.com/2014/11/got-png-you-may-get-problems.html. It got me thinking that as modern web developers (which is what XPage developers need to be), we should not be using Domino database elements for “web elements”. Back before R8 we all used the Database Files, Style sheets and Database Images as a way to reference files as part of the database. I now believe w [read] Keywords: domino R8 xpages application applications css database development server
235


XPages and Bluemix: How to create a Websockets message without being connected to the application
Sun, Nov 16th 2014 6:32p   Mark Roden
In this article I demonstrate how to create a Websocket message to be broadcast, from a website which is not connected to the Websocket directly. This will be achieved by using a http POST request of the message to a node.js server hosted on Bluemix and having that server then emit a Websocket message out to the application. Introduction In the previous article I demonstrated how to create an XPages chat client using a Bluemix hosted node.js server. I was able to do this by porting the node. [read] Keywords: ibm xpages ajax application javascript security server
286


One way to make a responsive XPages viewPanel
Tue, Nov 11th 2014 7:41p   Mark Roden
In this article I will demonstrate a method for hiding columns using CSS and making an XPages view Panel pseudo-responsive. What is Responsive Design? Responsive design is an approach to web page creation that makes use of flexible layouts, flexible images and cascading style sheet media queries. The goal of responsive design is to build web pages that detect the visitor’s screen size and orientation and change the layout accordingly. http://whatis.techtarget.com/definition/responsive-des [read] Keywords: xpages css mobile xml
1121


Creating an XPages Websockets chat client using Bluemix
Sun, Nov 9th 2014 7:53p   Mark Roden
In this article I will demonstrate how I was able to take an example Bluemix, node.js based, websocket chat program and re-purpose it to be used in XPages. Introduction Earlier this year I was very excited to find the Websockets in XPages project on OpenNTF published by Mark Ambler. The concept behind that project is to be able to create a notes document in a queue which is processed and then send out to all users. As much as I promised to help out and use the project, life and a business need [read] Keywords: domino ibm notes xpages ajax application applications css database dojo interface javascript mobile openntf server xml
137


Finding your localStorage values – Chrome Developer Tools
Thu, Nov 6th 2014 8:05p   Mark Roden
Just a quick tip – if you use localStorage and you need to find out what values you have in localStorage you can see them through developer tools easily. F12 to pull up developer tools Resources Local Storage is right there PS A similar feature will be release in the next Firefox (34) developer tools – https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector [read] Keywords: firefox




197


Because developers make mistakes – Webstorm Local History
Wed, Nov 5th 2014 10:24p   Mark Roden
Similar to Eclipse, Webstorm has a local history capability, allowing the developer who realizes they made an idiot mistake an hour ago, to go back to it and save their day. We’ve all been there and while committing to source control is a must for modern development, there are those times in between commits and then those when you are just too lazy to go through the repo looking for it. Local History Local History is always enabled in Webstorm – for the official help check here. U [read] Keywords: development eclipse
154


Conditional style loading in IE10+
Sun, Nov 2nd 2014 8:12p   Mark Roden
I learned this recently when trying to load a conditional stylesheet into an XPage. IE9 worked but IE11 failed on me and I couldn’t see why. It was only a small change so I ended up putting it in the main stylesheet as a media query. Apparently IE10 and above does not understand conditional HTML code like this http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx So to load a style conditionally in IE11 you can do it like this @media screen and (-ms-high-contrast: a [read] Keywords: css microsoft xml
248


Simple examples of how Google Developer Tools can aid Mobile Development
Thu, Oct 30th 2014 7:36p   Mark Roden
In this article I will show some simple examples of how Google Developer Tools can be used to help in mobile (responsive) development. Introduction Google Developer Tools (F12) within Chrome is one of those things which you *know* is way more powerful that you have ever cared to look at but this week I was introduced to a very cool new feature – thanks to @simonreid123. The ability to control the veiwport and size of the viewing window, as well as being able to throttle the speed of page [read] Keywords: development google iphone mobile network twitter
314


Binding jQuery code to an XPages partialRefresh using DOM Mutation events
Wed, Oct 29th 2014 7:38p   Mark Roden
Introduction In this article I will demonstrate how to bind to the event which triggers on the completion of an XPages partialRefresh. Using that binding we will then be able to action to contents of the newly added partialRefresh DOM elements. Background In multiple articles I have discussed the use of the onComplete event of a programmatically triggered partialRefresh to be able to re-apply a jQuery plugin’s bindings to an area of an XPage. This works very nicely and integrates with the [read] Keywords: domino xpages application css dojo server




Created and Maintained by Yancy Lent - About - Blog Submission - Suggestions - Change Log - Blog Widget - Advertising - Mobile Edition