Oranges are not the only fruit (Alternative Solutions for Providing Additional Functionality in your Xpages Apps)

UKLUG 2012 – Cardiff, Wales
@matthew_fyleman@matthew_fyleman September 2012
Presenter: Matthew Fyleman
Company: We4IT Group
Alternative Solutions for
Providing Additional Functionality in your Xpages Apps
Oranges are not the only fruit

@matthew_fyleman@matthew_fyleman
Agenda
•About me
•Beyond the borders of OpenNTF:
•Bootstrap alternatives
•Charting components
•Calendar views
•Office integration
•Questions

About Me
•Senior Developer and Product
Manager for We4IT
•Over 22 years as an IBM Domino
Developer
•Now working almost entirely with
Xpages
•Film addict!

Beyond the borders of OpenNTF
•OpenNTF is an excellent resource!!!
- but it doesn’t have all the answers
•Why would you want to do this?
o Solution unavailable
o Deployment restrictions
o Differentiation

Bootstrap Alternatives
Foundation
http://foundation.zurb.com
For
Very nice base style
Against
Heavyweight
Utilises
SASS, jQuery, Foundation Icon Fonts
Features
Grids, UI elements, Customiser
Supports
IE 9+

Pure
http://purecss.io
For
Super lightweight
Against
No LESS/SASS
Utilises
jQuery
Features
Grids, Basic UI elements
Supports
IE 7+

UIKit
http://getuikit.com/
For
Very simple structure
Easy to style
Against
Not commonly used
Utilises
jQuery
Features
Grids, UI elements, Themeroller
Supports
IE 9+

Bootstrap

Foundation

Pure

UIKit

•Bootstrap4XPages can generally be implemented faster
•By implementing an alternative …
• Committing to a little more work
• Can achieve a more individual result
• Potentially a nicer result (of course subjective)

We use UIKit:
<script src="js/jquery.min.js"></script>
<script src="js/uikit.min.js"></script>
<link rel="stylesheet" href="css/uikit.min.css">
<div class="uk-container">
<div class="uk-grid">
<div class="uk-width-1-3"></div>
</div>
</div>
DocType = HTML5

Demo

Charting Components
Projects on OpenNTF use:
jqPlot
http://www.jqplot.com
JFreeChart
http://www.jfree.org/jfreechart/
dojox.charting
http://dojotoolkit.org/reference-guide/1.10/dojox/charting.html

Charting Components
Alternative
Chart.js
http://www.chartjs.org
• Dynamic
• Responsive
• IE9+ and all modern Browsers
Example code:
<canvas id="canvas" height="450" width="600"></canvas>
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx).Line(JSONOBJECT, {responsive: true});

Charting Components
Demo 1

Charting Components
Dynamically loading values:
XAgent for the rest Service:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=xagent
JSON – generate with Simple:
https://code.google.com/p/json-simple/

Charting Components
Demo 2

Charting Components
AMD - Loader problem
From Sven Hasselbach:
“Looks like an AMD loader problem with Dojo & JQM. I have tried out to disable the
Factory scan in a test page and this worked for me. To do this I have added the
following parameters in the xsp.properties:
xsp.client.script.dojo.djConfig=dojo-amd-factory-scan: false
Maybe this can help you with your problems in ND9.”
Three solutions…

Charting Components
AMD - Loader problem – Solution 1
Change the JavaScript Library:

Charting Components
AMD - Loader problem – Solution 2
Change the xsp.properties:
http://xomino.com/2013/05/14/xpages-nd9-dojo-1-8-does-not-work-
with-other-amd-loaders-and-the-work-around/
xsp.client.script.dojo.djConfig=dojo-amd-factory-scan: false

Charting Components
AMD - Loader problem
Change the order in which the scripts are loaded:
http://hasselba.ch/blog/?p=1216
Only works if the scripts are consolidated:.

Charting Components
Demo 3

Calendar views
FullCalendar
http://fullcalendar.io
Utilises
jQuery, moment.js
Supports
IE8+

Calendar views
FullCalendar
http://fullcalendar.io
Utilises
jQuery, moment.js
Supports
IE8+
Sample Code
<div id='calendar'></div>
$('#calendar').fullCalendar();

Calendar views
Demo 1

Calendar views
Dynamically loading values:
XAgent for the rest Service:
http://openntf.org/XSnippets.nsf/snippet.xsp?id=xagent
JSON – generate with Simple:
https://code.google.com/p/json-simple/

Calendar views
Demo 2

Office Integration
docx4j
http://www.docx4java.org/
For
•Still supported and developed, better
handling of .docx files
•HTML can be included (Rich Text)
Against
•No .doc support, exclusively .docx (.pptx,
.xlsx)

Office Integration
Demo

Office Integration – Problem 1
Security exception occurred servicing request for: /demo.xsp - HTTP Code: 403
You need to adjust the java security policy:
[notes program]/jvm/lib/security/java.policy
Solution 1: Only for Developers! (and 8.5.x users)
grant { permission java.security.AllPermission; };
Solution 2: The better way:
grant codeBase "xspnsf://server:0/yourdatabase.nsf/-" {
permission java.security.AllPermission;
};
See Stephan Wissel’s blog: http://www.wissel.net/blog/d6plinks/SHWL-8JYAT5

Office Integration – Problem 2
After downloading the file once, the page stops responding
Solution: CSJS:
XSP.allowSubmit();

Questions?

Attend our next session to win a BB-8 Sphero!:
Today, 13:30, Room 1
Simon Peek - „Need XPages apps fast? Need
apps on Mobile devices? Don’t have XPages
knowledge? We4IT brings you Aveedo!”

Matthew Fyleman
We4IT Group
email: matthew.fyleman@we4it.com :

Oranges are not the only fruit (Alternative Solutions for Providing Additional Functionality in your Xpages Apps)

Recommended

Recommended

More Related Content

Similar to Oranges are not the only fruit (Alternative Solutions for Providing Additional Functionality in your Xpages Apps)

Similar to Oranges are not the only fruit (Alternative Solutions for Providing Additional Functionality in your Xpages Apps) (20)

Recently uploaded

Recently uploaded (20)

Oranges are not the only fruit (Alternative Solutions for Providing Additional Functionality in your Xpages Apps)