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

31
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

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

Page 1: 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

Page 2: 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

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

Page 3: 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

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 @zeromancer1972 www.lvb.de

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

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

Page 5: 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

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“

Page 6: 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

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“

Page 7: 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

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“

Page 8: 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

Startbildschirm („Dashboard“)

Kurzvorstellung „IGF/Cockpit“

Page 9: 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

Übersicht „Alle Mitarbeiter“

Kurzvorstellung „IGF/Cockpit“

Page 10: 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

Maske „Mitarbeiterstammdaten“

Kurzvorstellung „IGF/Cockpit“

Page 11: 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

Maske „Mitarbeitergespräch“

Kurzvorstellung „IGF/Cockpit“

Page 12: 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

Übersicht nach Betriebshof

Kurzvorstellung „IGF/Cockpit“

Page 13: 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

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

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

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

Page 15: 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

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?

Page 16: 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

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?

Page 17: 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

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: [{

}]

})

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

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

Page 19: 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

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

Page 20: 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

ExtJS zum Projekt hinzufügen

Implementierung: Vorbereitungen

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

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

Page 22: 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

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

Page 23: 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

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>

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

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

Page 25: 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

Wege der Implementierung • als Javascript/Stylesheet Ressourcen der

XPage definieren

• in einem Theme definieren

Implementierung: XPages-Anwendung

Page 26: 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

XPage mit Ressourcen

Implementierung: XPages-Anwendung

Page 27: 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

XPages mit Themes

Implementierung: XPages-Anwendung

Der Content-Type von Javascript-Ressourcen lautet „application/x-javascript“!

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

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

Page 29: 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

Fragen?

Einen Rahmen schaffen

Vorteile durch Frameworks in der Domino Webentwicklung

Page 30: 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

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/

Page 31: 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

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.