Kalendar-Controls für XPages Anwendungen · 2016-07-09 · "One of the common requests of developers using XPages was for a Calendar view control. Although jQuery provided a plugin

EntwicklerCamp 2016 IBM Notes – die eierlegende Wollmilchsau für alle und für Immer

Kalendar-Controls für XPages Anwendungen

Michael Ruhnau


Über mich

• Notes / Domino seit 1997

• XPages Entwicklung bei Helvetia Schweiz Versicherung

• [email protected]

• http://www.mruhnau.net

• @mruhnau

http://www.mruhnau.net/


Was wir uns anschauen werden…


Agenda

• Kalenderdaten in Domino

• Controls

• Was bietet die Extension Library?

• iNotes Calendar View

• REST Services

• jQuery FullCalendar

• "Kalender" Heatmaps

• Diskussion


Hinweis

Track 3 / Session 5: "Kalender-Management mit Webservices" heute Nachmittag

Track 4 / Session 3: "REST Services in Domino" (Bernd Hort)


Kalenderdaten in Domino

• User-Kalender

• Applikations-spezifische Data:

• Event-Datenbanken

• Projekt-Datenbanken

• CRM-Daten (Kundentermine)

• usw…

• Externe Daten


aka iNotes Calendar View

• Teil der Extension Library

• ExtLib-Äquivalent zu einer Notes Client Calendar View

• benötigt in etwa die gleichen Daten

• erwartet bestimmte Information

• Daten via REST Serives der ExtLib

• calendarJsonLegacyService


Notes Calendar Views

• Spalte 1: Date/Time an dem der Eintrag erscheint

• Datum und Zeit anzeigen

• Aufsteigend sortieren

• Spalte 2: Dauer des Eintrags

• Start und Ende sowie Subject des Eintrags

• Calendar Style muss nicht gesetzt sein (nur für Notes Client)


Notes Calendar Views

• Domino Designer Hilfe hilft weiter


iNotes Calendar View

"One of the common requests of developers using XPages was for a Calendar view control. Although jQuery provided a plugin and some developers used Repeat Controls to generate a calendar-style layout and display content, there were still calls for a standard XPages control for displaying content in a calendar layout.

(…)

This approach provides a wealth of functionality but does mean some peculiarities in event handling."

XPages Extension Library, p. 194

• Extension Library bietet Lösungsansatz

•

• iNotes Kalender Wrapper


iNotes Calendar View Demo

• Darstellung eines User Kalenders in XPages

• http://localhost:8080/ec2016cal.nsf/extlib2.xsp

http://localhost:8080/ec2016cal.nsf/extlib2.xsp


iNotes Calendar View: Rest Service

• Daten: calendarJsonLegacyService



iNotes Calendar Control


iNotes Calendar View Demo

• Property type

• day, 2-days, work week, week, month

• Property Summarize

• Summary-View oder Slots

• To Dos / All Day Events



Kalender mit Events aus lokaler DB




iNotes Calendar View: Events

• Nur Client-side-JavaScript!

• Basiert auf iNotes

• onNewEntry

• onOpenEntry

• onSelectEntry

• …


All-Day-Issue

vs.


All-Day-Issue

• Problem scheint im REST Service zu liegen

"20160502T040000"

"20160502T040000"

"20160502T040000"

"20160504T090000"

"20160504T040000"

"20160504T040000"


iNotes Calendar View: weitere Beispiele

Weitere Beispiele findet man

• In der Extension Library Demo DB http://localhost:8080/XPagesExt16.nsf

• Im XPages Team Room http://localhost:8080/tr.nsf/calendar.xsp

• etliche Events ausprogrammiert

http://localhost:8080/XPagesExt16.nsfhttp://localhost:8080/tr.nsf/calendar.xsp


iNotes Calendar View: Bewertung

--- +++

iNotes Wrapper Verhalten wie Notes Kalender

Events: CSJS only Bestandteil der ExtLib

Wenig Weiterentwicklung einfach zu implementieren

Probleme bei All Day Events

Kein Bootstrap

nicht responsive


jQuery FullCalendar


jQuery Full Calendar

"A JavaScript event calendar. Customizable and open source.

FullCalendar is a drag-n-drop jQuery plugin for displaying events on a full-sized calendar."

http://fullcalendar.io/


jQuery Full Calendar

• Website: http://fullcalendar.io

• GitHub: https://github.com/fullcalendar

• Dokumentation: http://fullcalendar.io/docs/

• Lizenz: MIT License http://fullcalendar.io/license/

• Entwickler: Adam Shaw http://arshaw.com/

• Browser: Firefox, Chrome, Safari, IE 8+

• Version:

• stable: v2.6.1 (Februar 2016)

• Beta: v2.7.0

• v1.0.0 : April 2009

http://fullcalendar.io/https://github.com/fullcalendarhttp://fullcalendar.io/docs/http://fullcalendar.io/license/http://arshaw.com/


FullCalendar: Views

basicDay


FullCalendar: Views

basicWeek


FullCalendar: Views

month


FullCalendar: Views

agendaWeek


FullCalendar: Views

agendaDay


FullCalendar: allDay-Slot

• Verfügbar für Agenda-Views

• All-Day-Events, Tasks

• JSON-Property allDay (boolean)


FullCalendar: Daten

An "event source" is anything that provides FullCalendar with data about events. It can be a simple array, an event-generating function that you define, a URL to a json feed, or a Google Calendar feed.

http://fullcalendar.io/docs/event_data/Event_Source_Object/

• JSON

• REST

http://fullcalendar.io/docs/event_data/Event_Source_Object/


FullCalendar + XPages

• jQuery in NSF bereitstellen

• FullCalendar in NSF bereitstellen

• MomentJS in NSF bereitstellen

• "A Moment object represents a point in time, like the native Date Object, but is far superior." http://fullcalendar.io/docs/utilities/Moment/

• Ressourcen in XPage laden

• FullCalender erzeugen

• Daten via REST Service konsumieren

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Datehttp://fullcalendar.io/docs/utilities/Moment/


FullCalendar + XPages: jQuery

• jQuery Website: https://jquery.com/

• Download: https://jquery.com/download/

• Import in NSF

• WebContent\js\jquery • jquery.min.js

• jquery.min.map

https://jquery.com/https://jquery.com/download/


FullCalendar + XPages: FullCalendar

• Download: http://fullcalendar.io/download/

• Import in NSF

• WebContent\js\jquery • fullcalendar.min.css

• fullcalendar.min.js

http://fullcalendar.io/download/


FullCalendar + XPages: Moment.js

• MomentJS Website: http://momentjs.com

• Download: http://momentjs.com/downloads/moment.min.js

• Import in NSF

• WebContent\js\jquery • fullcalendar.min.css

• fullcalendar.min.js

http://momentjs.com/


FullCalendar + XPages: Ressourcen einbinden

• Laden der Ressourcen auf XPage

• Reihenfolge beachten!

• jQuery

• MomentJS

• FullCalendar

• Vor dojo laden: http://hasselba.ch/blog/?p=1181

•

http://hasselba.ch/blog/?p=1181


FullCalendar + XPages: Ressourcen einbinden


FullCalendar: Kalender erzeugen

Platzhalter für Kalender


FullCalendar: Kalender erzeugen


FullCalendar: Daten


FullCalendar: Finally…

http://localhost:8080/webapp/xfull2.nsf/fullStatic.xsp

http://localhost:8080/webapp/xfull2.nsf/fullStatic.xsp


FullCalendar: Daten mit REST

Schritt1:

Daten aus View "allEvents" in lokaler Datenbank



Custom REST Service auf XPage



http://localhost:8080/webapp/xfull2.nsf/fullRestLocal.xsp

REST: http://localhost:8080/webapp/xfull2.nsf/fullRestLocal.xsp/eventdata

http://localhost:8080/webapp/xfull2.nsf/fullRestLocal.xsphttp://localhost:8080/webapp/xfull2.nsf/fullRestLocal.xsp/eventdatahttp://localhost:8080/webapp/xfull2.nsf/fullRestLocal.xsp/eventdata


FullCalendar: CustomRestService

• Erweiterung des CustomServiceBean

• Nutzt JsonWriter zum Erzeugen von JSON Antwort

• renderService doGet • JsonWriter erzeugen

• Events aus DB auslesen

• Json für jedes Event schreiben


FullCalendar: User-Kalender

http://localhost:8080/webapp/xfull2.nsf/fullRestUser.xsp

View: admin - rest

http://localhost:8080/webapp/xfull2.nsf/fullRestUser.xspnotes://w80238/C1257F8B002AC2E0/E1D7D0088F60D31DC1257F91005BDA32notes://w80238/C1257F8B002AC2E0/E1D7D0088F60D31DC1257F91005BDA32notes://w80238/C1257F8B002AC2E0/E1D7D0088F60D31DC1257F91005BDA32notes://w80238/C1257F8B002AC2E0/E1D7D0088F60D31DC1257F91005BDA32notes://w80238/C1257F8B002AC2E0/E1D7D0088F60D31DC1257F91005BDA32notes://w80238/C1257F8B002AC2E0/E1D7D0088F60D31DC1257F91005BDA32


FullCalendar: weekends

weekends: false,


Events


Events

dayClick

eventClick

onMouseOver

onMouseOut


FullCalendar: Custom Views

Erweiterung und Anpassung bestehender Views

http://localhost:8080/webapp/xfull2.nsf/fullRestLocalView.xsp

http://localhost:8080/webapp/xfull2.nsf/fullRestLocalView.xsphttp://localhost:8080/webapp/xfull2.nsf/fullRestLocalView.xsp


FullCalendar: Custom Button

• Neu seit Version 2



• Erstellen eines neuen Events mit Dialog

• REST Post


FullCalendar: Slots

• slotDuration

• slotLabelFormat

slotDuration: '00:20:00',

slotLabelFormat: 'hh:mm',


FullCalendar: eventSources

Laden von Daten aus mehreren Quellen

http://localhost:8080/webapp/xfull2.nsf/fullRestSources.xsp

eventSources: [

urlVal(),

'http://localhost:8080/webapp/xfull2.nsf/fullRestUser.xsp/eventdata'

],

http://localhost:8080/webapp/xfull2.nsf/fullRestSources.xsphttp://localhost:8080/webapp/xfull2.nsf/fullRestSources.xsp


FullCalendar: color

CalendarRestBean – doGet

this.jsonWriter.startProperty("backgroundColor");

this.jsonWriter.outStringLiteral("#f00");

this.jsonWriter.endProperty();


FullCalendar: weitere Optionen

• hiddenDays: [ 2, 4 ] // hide Tuesdays and Thursdays

• weekNumbers

• weekNumberCalculation: ISO / local

• allDaySlot: true, => allDayText

• displayEventTime

• displayEventEnd

• scrollTime


Exkurs: Calendar Heat Maps


HeatMaps

• Diagramm zur Visualisierung von Daten

• Daten als Farben auf Raster

• großen Datenmenge schnell markante Werte erfassen

• Name abgeleitet aus Assoziation der Farben zu Temperaturen


cal-HeatMap

"Cal-Heatmap is a javascript module to create calendar heatmap to visualize time series data, a la github contribution graph"

https://github.com/wa0x6e/cal-heatmap

• Website: http://cal-heatmap.com/

• Lizenz: MIT License

• Aktuelles Release: 3.5.4

https://github.com/wa0x6e/cal-heatmaphttps://github.com/wa0x6e/cal-heatmaphttps://github.com/wa0x6e/cal-heatmaphttp://cal-heatmap.com/http://cal-heatmap.com/http://cal-heatmap.com/


HeatMap+ XPages

• D3.js in NSF bereitstellen

• D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. https://d3js.org/

• Cal-HeatMap in NSF bereitstellen

• Ressourcen in XPage laden

• Platzhalter erzeugen

• Daten laden

• HeatMap erzeugen

https://d3js.org/


HeatMap+ XPages: d3

• Website: https://d3js.org/

• Import in NSF

• WebContent\js\d3 • d3.min.js


HeatMap + XPages: cal-HeatMap

• Download: https://github.com/wa0x6e/cal-heatmap/

• Import in NSF

• WebContent\js\cal-heatmap • cal-heatmap.min.js

• CSS File

https://github.com/wa0x6e/cal-heatmap/https://github.com/wa0x6e/cal-heatmap/https://github.com/wa0x6e/cal-heatmap/


HeatMap + XPages: Ressourcen einbinden

• Laden der Ressourcen auf XPage

• Reihenfolge beachten!

• d3

• Cal-HeatMap


HeatMap + XPages: Kalender erzeugen

Platzhalter für HeatMap

itemSelector Property:

Default: #cal-heatmap

Verschiedene Selektoren möglich: ID, class http://cal-heatmap.com/#itemSelector

http://cal-heatmap.com/http://cal-heatmap.com/http://cal-heatmap.com/


HeatMap + XPages: erzeugen


HeatMap + XPages: Beispiel 1

• http://localhost:8080/webapp/xfull2.nsf/heatSOStatic.xsp

http://localhost:8080/webapp/xfull2.nsf/heatSOStatic.xsp



http://localhost:8080/webapp/xfull2.nsf/heatReservation.xsp

Resource Reservations

http://localhost:8080/webapp/xfull2.nsf/heatReservation.xsphttp://localhost:8080/webapp/xfull2.nsf/heatReservation.xsp



http://localhost:8080/webapp/xfull2.nsf/heatReservation.xsp

Statistik

http://localhost:8080/webapp/xfull2.nsf/heatReservation.xsphttp://localhost:8080/webapp/xfull2.nsf/heatReservation.xsp


HeatMap + XPages: Optionen

• Legende legend: [50,100,200,250,500],

Farben legendColors: {

min: "#efefef",

max: "steelblue",

empty: "white"

},


HeatMap + XPages: Werte

Anzeige der Werte im Raster

subDomainTextFormat: function(date ,value) {

return value;

},

http://localhost:8080/webapp/xfull2.nsf/heatSOAsyncWeek.xsp

subDomainTextFormat: "%d",

http://localhost:8080/webapp/xfull2.nsf/heatSOAsyncWeek.xsphttp://localhost:8080/webapp/xfull2.nsf/heatSOAsyncWeek.xsp


HeatMap: Views

Domains für unterschiedliche Views

• hour

• day

• week

• month

• Year

• SubDomain

• für Raster


HeatMap: Views

Week > hour


Credit

• Keith Strickland: JQuery FullCalendar in XPages http://www.keithstric.com/A55BAC/keithstric.nsf/default.xsp?documentId=C4ACC1CA300C873786257B15007F7732

• Sven Hasselbach: XPages: Inject CSJS code at page top http://hasselba.ch/blog/?p=1181

• Bernd Hort: www.assono.de/blog/d6plinks/ibmconnect2016-ad1238

• tbc

http://www.keithstric.com/A55BAC/keithstric.nsf/default.xsp?documentId=C4ACC1CA300C873786257B15007F7732http://www.keithstric.com/A55BAC/keithstric.nsf/default.xsp?documentId=C4ACC1CA300C873786257B15007F7732http://hasselba.ch/blog/?p=1181http://www.assono.de/blog/d6plinks/ibmconnect2016-ad1238http://www.assono.de/blog/d6plinks/ibmconnect2016-ad1238http://www.assono.de/blog/d6plinks/ibmconnect2016-ad1238


Diskussion & Fragen


Vielen Dank für die Aufmerksamkeit Guten Appetit!

Documents

Kalendar-Controls für XPages Anwendungen · 2016-07-09 · "One of the common requests of developers using XPages was for a Calendar view control. Although jQuery provided a plugin