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

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></div>DocType = HTML5

Bootstrap Alternatives

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

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: matthew.fyleman@we4it.com :

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

Software

xpages introductie

xpages för utvecklare

xpages: no experience needed

angular.js in xpages

workflow for xpages

java vs javascript (xpages)

xpages advanced

ddive11 - xpages

ask the xpages experts

bootstrap in xpages

social enabler for xpages

xpages erweitern & ausbauen -...

jquery comes to xpages

xpages extension library -...

xpages - admincampfile/t1s1-xpages-basic.pdf · pplication...

xpages lab 02 scrapbook

presa xpages lcty 2011

xpages guru webinar - xpages sample apps

xpages day2015 実践 xpages on bluemix

xpages extension library - entwicklercamp · the xpages...