1.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Einen Rahmen schaffen
Vorteile durch Frameworks
in der Domino-Webentwicklung
Thomas Höhne, Leipziger Verkehrsbetriebe GmbH
Oliver Busse, ULC Business Solutions GmbH

2.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Agenda
• Die Referenten
• Kurzvorstellung „IGF/Cockpit“
– Fachliche Anforderungen
– Technische Anforderungen
– Projektdaten
– Funktionsübersicht
• Warum ExtJS?
• Implementierung
– Vorbereitungen
– Nutzung in einer traditionellen Webanwendung
– Nutzung in einer XPages-Anwendung
• Showcase

3.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Die Referenten
Thomas Höhne
IBM Notes/Domino seit
1998
Domino und BES
Administrator
Leipziger
Verkehrsbetriebe
3300 Mitarbeiter in der
Unternehmensgruppe
Fahrgäste 2012:
134,4 Mio.
Oliver Busse
IBM Notes/Domino
seit 2000
Web Development
ULC Business
Solutions GmbH
IBM Premier
Business Partner
Full Service Provider
IBM Collaboration
Software
www.ulc.de
@zeromancer1972www.lvb.de

4.
13.06.2013 4
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Kurzvorstellung „IGF/Cockpit“
Einen Rahmen schaffen
Vorteile durch Frameworks in der Domino Webentwicklung

5.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Fachliche Anforderungen
• Überblick über grundsätzliche Daten eines
Mitarbeiters im Fahrbetrieb
• Vorbereitung und Protokollierung von
Mitarbeitergesprächen
• Dokumentation von Problemen und Anfragen
der Mitarbeiter
• Unterstützung der täglichen Arbeit
Kurzvorstellung „IGF/Cockpit“

6.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Technische Anforderungen
• IBM Domino 8.5.3 als Webserver, Oracle 11g
als Datenbankserver
• Konfiguration in Notes, Nutzung im Browser
• Zugriff auf Oracle Infrastruktur mittels
modernem Frontend
• Traditionelle Webanwendung
• Basis für weitere Anwendungsmodule
Kurzvorstellung „IGF/Cockpit“

7.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Projektdaten
• Umsetzungszeitraum: Q3/Q4 2012
– Datenmodellierung und Konzept ca. 40 MT
– Schnittstellen und Frontend ca. 30 MT
– Pilotphase in 12/2012
– Produktivsetzung 01.01.2013
• Erweiterungen und Anpassungen Q1/2013
– Datenerweiterung und Frontendanpassungen ca.
20 MT
Kurzvorstellung „IGF/Cockpit“

8.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Startbildschirm („Dashboard“)
Kurzvorstellung „IGF/Cockpit“

9.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Übersicht „Alle Mitarbeiter“
Kurzvorstellung „IGF/Cockpit“

10.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Maske „Mitarbeiterstammdaten“
Kurzvorstellung „IGF/Cockpit“

11.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Maske „Mitarbeitergespräch“
Kurzvorstellung „IGF/Cockpit“

12.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Übersicht nach Betriebshof
Kurzvorstellung „IGF/Cockpit“

13.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Funktionsschema
Kurzvorstellung „IGF/Cockpit“
NSF mit
Konfiguration
HTTP Request
Domino HTTP
Response: HTML, JS
Applikation
Browser
HTTP AJAX Request
Agent
IGF Schema
JDBC
Response: JSON

14.
13.06.2013 14
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Warum ExtJS?
Einen Rahmen schaffen
Vorteile durch Frameworks in der Domino Webentwicklung

15.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Hauptmerkmale von ExtJS
• Entwickelt für professionelles Anwendungsdesign
(User Experience)
• Klassenbasiert und erweiterbar
• Unterstützt relationale Datenmodelle
• Fertige Widgets für Formularelemente, Datagrids,
Layouts und Multiwindow-Oberflächen, Charting
etc.
• Vordefinierte Themes
Warum ExtJS?

16.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Erfahrungen mit ExtJS
• Zunächst sehr komplex, steile Lernkurve
• In der Folge jedoch sehr effizient in der Nutzung
• Kein Design der Widgets nötig, daher einheitliches
Erscheinungsbild
• Der modulare Aufbau ermöglicht flexibles und
generisches Programmieren
• Geeignet für den Aufbau eines eigenen Anwendungs-
Frameworks
• Enorme Zeitersparnis gegenüber manuellem Design
von Komponenten
Warum ExtJS?

17.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Einfaches Beispiel: Erzeugung eines Widgets
Warum ExtJS?
<div id="myForm"></div>
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
renderTo: 'myForm',
width: 500,
height: 300,
items: [{
…
}]
})

18.
13.06.2013 18
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Implementierung:
Vorbereitungen
Einen Rahmen schaffen
Vorteile durch Frameworks in der Domino Webentwicklung

19.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
ExtJS Bundle downloaden
• http://www.sencha.com/products/extjs
• Es gibt 2 Versionen
– GPL3-Version für freie, nicht-kommerzielle
Projekte
– Developer-License für kommerzielle Projekte
• Umfang ca. 200 MB gesamt
Implementierung: Vorbereitungen

20.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
ExtJS zum Projekt hinzufügen
Implementierung: Vorbereitungen

21.
13.06.2013 21
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Implementierung:
traditionelle Webanwendung
Einen Rahmen schaffen
Vorteile durch Frameworks in der Domino Webentwicklung

22.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
ExtJS einer Maske hinzufügen
• HTML Head Content
• $$HTMLHead
• für das Neptune Theme zusätzlich noch das Script
ext-theme-neptune.js einbinden
• DOCTYPE deklarieren! ($$HTMLFrontMatter)
Implementierung: traditionelle Webanwendung

23.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Testcode
Implementierung: traditionelle Webanwendung
<script type="text/javascript">
Ext.onReady(function(){
Ext.Msg.show({
modal: true,
title: "DNUG",
msg: "Hello, DNUG people!",
buttons: Ext.Msg.OK
})
})
</script>

24.
13.06.2013 24
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Implementierung:
XPages-Anwendung
Einen Rahmen schaffen
Vorteile durch Frameworks in der Domino Webentwicklung

25.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Wege der Implementierung
• als Javascript/Stylesheet Ressourcen der
XPage definieren
• in einem Theme definieren
Implementierung: XPages-Anwendung

26.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
XPage mit Ressourcen
Implementierung: XPages-Anwendung

27.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
XPages mit Themes
Implementierung: XPages-Anwendung
Der Content-Type von Javascript-Ressourcen lautet „application/x-javascript“!

28.
13.06.2013 28
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Showcase
Einen Rahmen schaffen
Vorteile durch Frameworks in der Domino Webentwicklung

29.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Fragen?
Einen Rahmen schaffen
Vorteile durch Frameworks in der
Domino Webentwicklung

30.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Quellennachweise
Sencha Inc, ExtJS, http://www.sencha.com/products/extjs
ExtJS Demos, http://www.sencha.com/products/extjs/examples/
Mark Roden, ExtJS in Xpages, http://xomino.com/2013/03/03/extjs-in-xpages-3-creating-a-basic-grid-from-a-custom-control/
Brad Balassaitis, Create a Dojo Enhanced Grid, http://xcellerant.net/2013/04/29/dojo-data-grid-part-13-create-a-dojo-
enhancedgrid/
OpenNTF, http://www.openntf.org
IBM Notes/Domino, http://www-03.ibm.com/software/products/de/de/ibmnotes/

31.
Social Collaboration 2013: Effizient, mobil, optimal integriert, sicher. Praxiserfahrungen - Strategien - Technologien
www.dnug.de
Bitte nehmen Sie sich die Zeit,
um diesen Vortrag zu bewerten
(A6-Block in Ihren Konferenzunterlagen)
Rückgabe
Geben Sie das ausgefüllte Bewertungsblatt
bei dem Moderator/Betreuer Ihres Vortrages
bzw. am Tagungscounter der DNUG ab.
Verlosung
Unter allen Teilnehmern
wird ein iPod nano verlost.