Agenda. Einbindung von Bootstrap in klassische Domino Web Anwendungen

Größe: px

Ab Seite anzeigen:

Download "Agenda. Einbindung von Bootstrap in klassische Domino Web Anwendungen"

Linus Braun
vor 5 Jahren
Abrufe

2 Agenda Vorstellung Was ist Bootstrap? Wie ist eine Bootstrap-optimierte Anwendung aufgebaut? Integration von Bootstrap in Domino Anwendungen Beispiele/Demos 2

3 Über Wabion - Enterprise Search auf Basis Google Search Appliance - Anwendungsentwicklung auf Basis Google Apps Engine und Lotus Domino - Beratungsunternehmen mit dem Focus jeweils Technologieführer auf seinem Gebiet zu sein. 3

4 Wer bin ich? Mathias Bierl, Staatl. Gepr. Wirtschaftsinformatiker Notesentwicklung / Administration seit 1997 (R 4 ND 8.5.x) Anti-Spam/Anti-Virus Lösungen Enterprise Search/Knowledgemanagement Google Lösungen (Search, Apps, ) Server-Virtualisierung 4

5 Wer bin ich? Projekte mit Lotus / Domino: Lotus Notes R4 ND 8.5.x Sametime, Domino.Doc, Lotus Workflow, LEI, DECS, DGW Formelsprache, Skript, Klassen, Java, JS, HTML, AJAX Migration R4-R5-ND6-ND7-ND8, Microsoft Exchange, C-/C++-API, WIN 3.11-WIN 7, OS/2, AIX, AS/400, Linux,... Datenanbindungen an SAP, RDBS XML/XSL, Servlets, Web Services Mobile Datenanbindung (Blackberry, OBMG, ) Projekte mit Google: Google Search Appliance Google Message Security Google Message Discovery Google Apps inkl. Migrationen Google Apps Engine Enterprise Search mit Lucidworks Fusion 5

6 Was ist Bootstrap? Ein freies modulares CSS Framework Enthält HTML und CSS basierende Gestaltungsvorlagen für die verschiedensten Web Elemente, wie Formulare, Buttons, Tabellen, Navigations- und anderen Oberflächengestaltungslemente Enthält optionale JavaScript Erweiterungen basierend auf jquery Unterstützt Gestaltung im Sinne des Responsive Webdesigns 6

7 Was heisst modular? Bootstrap besteht aus einer komponentenbasierten Definition auf Basis von Less Stylesheets auf Less Stylesheets erlauben die Schachtelungen von CSS- Regeln, erlaubt Verwendung von Variablen, Zusammenfassung und Wiederverwendbarkeit von Regeln und stellt eine effizientere Möglichkeit zum Schreiben von CSS Regeln zur Verfügung Die Less Stylesheets werden mit einem JavaScript Compiler in normale CSS Stylesheets kompiliert. Dies kann sowohl server- wie auch clientseitig erfolgen oder auch nur in der Entwicklungsumgebung 7

8 Wie ist eine Bootstrap-optimierte Anwendung aufgebaut? Der Grundaufbau entspricht dem folgenden Schema: Einbindung Bootstrap Definitionen HTML Layout auf Basis von Tabellen oder Divs Setzen von CSS Klassen, um die gewünschte Formatierung zu erreichen Bootstrap kann generell sowohl in tabellenbasierten wie auch div-basierten Layouts verwendet werden Auch responsive Layouts sind in beiden Varianten möglich Allerdings sind tabellenbasierte Layouts in der Flexibilität stark beschränkt, weswegen idealerweise auf Div-basierte Layouts gesetzt werden sollte 8

9 Wie ist eine Bootstrap-optimierte Anwendung aufgebaut? 9

10 Integration von Bootstrap in Domino Anwendungen Minimal muss das Bootstrap CSS eingebunden werden. Dies enthält die CSS Definitionen für HTML Elemente und die Optimierungen für bestimmte Displaygrößen <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> Optional kann das Bootstrap Theme miteingebunden werden für weitere optische Definitionen <link href="/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"> Optional können die Bootstrap Plugins eingebunden werden. Für diese muss aber davor jquery eingebunden werden <script src="/jquery/js/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> 10

11 Integration von Bootstrap in Domino Anwendungen Um sicherzustellen, daß auf allen Geräten die Anzeige optimal ist sollte der folgende Meta Tag eingefügt werden <meta name="viewport" content="width=device-width, initialscale=1"> 11

12 Integration von Bootstrap in Domino Anwendungen Durch die Einbindung an sich ändert sich erst einmal nur minimal etwas an der Optik, z.b. Schriftart Nutzung der Bootstrap Funktionen werden über die Zuweisung von CSS Klassen erreicht. 12

13 Integration von Bootstrap Schritt 2 Setzen von Klassen-Eigenschaften für die Labels: label label-default glyphicon glyphicon-search Setzen von Klassen-Eigenschaft für die Felder: form-control -> dynamische Breite 13

14 Integration von Bootstrap Schritt 3 Einbetten in einen Container: <div class="container"> Ersetzen des input Typ Button durch einen Button <button class="btn btn-lg btn-primary btn-block" type="submit">text</button> Vorraussetzung für die Pflichtfeldvalidierung Ergänzung einer einfachen Pflichtfeldvalidierung HTML Eigenschaften: required (type=" ") Setzen des Feldes, welches automatisch den Fokus bekommt: HTML Eigenschaften: autofocus Andere Feldgröße Klasse: input-md 14

15 Integration von Bootstrap Schritt 3 Setzen von Platzhaltern Statisch: HTML Eigenschaften: placeholder="dd.mm.yyyy" Dynamisch: jquery Code: $('#fd_ ').attr('placeholder', 'test@test.de'); 15

16 Integration von Bootstrap Schritt 3 16

17 Integration von Bootstrap Schritt 4 Gliederung in verschiedene Bereiche (Panels) <div class="panel panel-default"> Nutzung von Body, Header und Footer für die Bereiche <div class="panel-body"> <div class="panel-heading">pflichtfelder:</div> <div class="panel-footer">bitte nur Datumswerte in der Form DD.MM.YYYY eingeben</div> Dies kann natürlich auch kombiniert werden 17

18 Integration von Bootstrap Schritt 4 18

19 Integration von Bootstrap Schritt 5 Ergänzung eines vertikalen Menüs <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> Link1 Link2 Link3 </div> </div> </nav> 19

20 Integration von Bootstrap Schritt 5 20

21 Integration von Bootstrap Schritt 6 Dynamisches tabellenbasiertes Layout (Grid) Einspaltig <div class="row"> <div class="col-md-12"> </div> </div> Mehrspaltig <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> </div> </div> Grids gehen in Bootstrap von 12 Spalten aus, die maximal möglich sind Die Aufteilung definiert damit das Verhältnis der Spalten 21

22 Integration von Bootstrap Schritt 6 Diese können auch verschachtelt werden, wie es mit normalen Tabellen ebenfalls möglich ist. Der Vorteil der Grids ist vor allem die Anpassung an die Displaygröße und die Flexibilität 22

23 Integration von Bootstrap Schritt 6 23

24 Integration von Bootstrap Views/Tabellen Formatierung von Tabellen Da es bei Views nicht direkt möglich ist Klassen zu setzen, macht man dies dann dynamisch beim Laden über das ViewTemplate $( document ).ready(function() { $('table').addclass('table table-striped tablebordered'); }); Spaltenbreite setzen $( document ).ready(function() { $('th,td').addclass('col-xs-15'); }); Wechselnder Zeilenhintergrund Klasse table-striped Tabellenränder Klasse table-bordered 24

25 Integration von Bootstrap Views/Tabellen 25

26 Integration von Bootstrap Views/Tabellen - responsive Tabellen sind nur schwer responsive formatierbar Bootstrap erlaubt ein separates Scrollen der Tabelle durch Umschliessen der Tabelle mit einem entsprechenden div <div class="table-responsive"> 26

27 Integration von Bootstrap Sichtbarkeit Durch Nutzung der entsprechenden Klassen kann die Sichtbarkeit von Elementen oder Spalten von der Anzeigegröße abhängig gemacht werden Klassen.visible-, -hidden

28 Integration von Bootstrap Sichtbarkeit 28

29 Weitere Möglichkeiten Weitere Möglichkeiten, die die Bootstrap Klassen bieten: Setzen von Farben und Hintergrundfarben Screen Reader Unterstützung Tool Tips und Hilfetexte Deaktivieren von Elementen und Optionen Typographien 29

30 Q & A 30

31 Links Bootstrap Bootstrap Download Assistent Bootstrap Getting Started Bootstrap Klassenreferenz jquery jquery API 31

32 Kontakt Wabion GmbH Limburgstrasse 31 D Esslingen Phone: +49 (0) Fax: +49 (0) Web: Mathias Bierl Mobil: +49 (0)

Ähnliche Dokumente

Vorstellung LotusScript Was ist das überhaupt? Informationen Kleine Scripte Notes Klassen - BackEnd vs FrontEnd Fehlerbehandlung Tips & Tricks

Agenda Vorstellung LotusScript Was ist das überhaupt? Informationen Kleine Scripte Notes Klassen - BackEnd vs FrontEnd Fehlerbehandlung Tips & Tricks 2 Über Wabion - Anwendungsentwicklung auf Basis Google