DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webentwicklung"

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

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

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

13.06.2013 4
www.dnug.de
Kurzvorstellung „IGF/Cockpit“
Vorteile durch Frameworks in der Domino Webentwicklung

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

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

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

www.dnug.de
Startbildschirm („Dashboard“)

www.dnug.de
Übersicht „Alle Mitarbeiter“

www.dnug.de
Maske „Mitarbeiterstammdaten“

www.dnug.de
Maske „Mitarbeitergespräch“

www.dnug.de
Übersicht nach Betriebshof

www.dnug.de
Funktionsschema
NSF mit
Konfiguration
HTTP Request
Domino HTTP
Response: HTML, JS
Applikation
Browser
HTTP AJAX Request
Agent
IGF Schema
JDBC
Response: JSON

13.06.2013 14
www.dnug.de
Warum ExtJS?

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?

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?

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: [{
…
}]
})

13.06.2013 18
www.dnug.de
Implementierung:
Vorbereitungen

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

www.dnug.de
ExtJS zum Projekt hinzufügen
Implementierung: Vorbereitungen

13.06.2013 21
www.dnug.de
Implementierung:
traditionelle Webanwendung

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

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>

13.06.2013 24
www.dnug.de
Implementierung:
XPages-Anwendung

www.dnug.de
Wege der Implementierung
• als Javascript/Stylesheet Ressourcen der
XPage definieren
• in einem Theme definieren
Implementierung: XPages-Anwendung

www.dnug.de
XPage mit Ressourcen

www.dnug.de
XPages mit Themes
Der Content-Type von Javascript-Ressourcen lautet „application/x-javascript“!

13.06.2013 28
www.dnug.de
Showcase

www.dnug.de
Fragen?
Vorteile durch Frameworks in der
Domino Webentwicklung

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/

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.

DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webentwicklung"

Weitere ähnliche Inhalte

Andere mochten auch

Mehr von Oliver Busse

DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webentwicklung"