oranges are not the only fruit (alternative solutions for providing additional functionality in...

UKLUG 2012 – Cardiff, Wales@matthew_fyleman@matthew_fyleman

September 2012

Presenter: Matthew FylemanCompany: We4IT Group

Alternative Solutions for Providing Additional Functionality in your Xpages Apps

Oranges are not the only fruit


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 unavailableo Deployment restrictionso Differentiation


Bootstrap AlternativesFoundationhttp://foundation.zurb.com

ForVery nice base style

AgainstHeavyweight

UtilisesSASS, jQuery, Foundation Icon Fonts

FeaturesGrids, UI elements, Customiser

SupportsIE 9+


Bootstrap AlternativesPurehttp://purecss.io

ForSuper lightweight

AgainstNo LESS/SASS

UtilisesjQuery

FeaturesGrids, Basic UI elements

SupportsIE 7+


Bootstrap AlternativesUIKithttp://getuikit.com/

ForVery simple structureEasy to style

AgainstNot commonly used

UtilisesjQuery

FeaturesGrids, UI elements, Themeroller

SupportsIE 9+


Bootstrap


Foundation


Pure


UIKit


Bootstrap Alternatives•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)


Bootstrap AlternativesWe 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 class="uk-width-1-3"></div> <div class="uk-width-1-3"></div>

</div></div>DocType = HTML5


Bootstrap Alternatives

Demo


Charting ComponentsProjects on OpenNTF use:

jqPlothttp://www.jqplot.com

JFreeCharthttp://www.jfree.org/jfreechart/

dojox.chartinghttp://dojotoolkit.org/reference-guide/1.10/dojox/charting.html


Charting ComponentsAlternativeChart.jshttp://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 ComponentsAMD - Loader problemFrom 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 ComponentsAMD - Loader problem – Solution 1Change the JavaScript Library:


Charting ComponentsAMD - 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 ComponentsAMD - Loader problemChange 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 viewsFullCalendarhttp://fullcalendar.io

UtilisesjQuery, moment.js

SupportsIE8+


Calendar viewsFullCalendarhttp://fullcalendar.io

UtilisesjQuery, moment.js

SupportsIE8+

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 Integrationdocx4jhttp://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 1Security 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 2After downloading the file once, the page stops responding

Solution: CSJS:XSP.allowSubmit();


Questions?


Thank you!

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 FylemanWe4IT Group

email: [email protected] :

oranges are not the only fruit (alternative solutions for providing additional functionality in...

Software