Agenda. Vorstellung JavaScript Frameworks UI vs. Backend jquery/jqueryui. Vergleich normaler JavaScript Code mit jquery Code

Transkript

1

2 Agenda Vorstellung JavaScript Frameworks UI vs. Backend jquery/jqueryui Vergleich normaler JavaScript Code mit jquery Code 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 9.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 JavaScript Frameworks abstrahieren und vereinfachen viele Aktionen/Funktionen stellen zusätzliche Funktionalitäten zur Verfügung einfache direkte und dynamische Manipulation von DOM Elementen bieten browserübergreifende Unterstützung => Keine Notwendigkeit mehr beim Aufruf zwischen verschiedenen Browsern und Versionen zu unterscheiden unterstützen auch mobile Endgeräte und deren Browser PlugIns-/Widgets zur Wiederverwendbarkeit 6

7 UI vs. Backend Backend JavaScript Frameworks bieten die Möglichkeit nicht sichtbare Aktionen/Manipulationen durchzu führend, die sich dann ggfls auch im Frontend/dem UI auswirken bzw von diesem ausgelöst werden z.b. Einfügen von DOM Elementen, Manipulation von DOM Elementen, Ajax-Requests UI JavaScript Frameworks bieten Komponenten um bestehende sichtbare HTML Elemente zu erweitern 7

8 jquery Was ist das überhaupt? jquery ist eine JavaScript Bibliothek, welche viele Dinge, die bisher nur mit viel Code gingen, vereinfacht ist browserübergreifend, d.h. es muss nicht mehr auf die Eigenheiten/abweichende Syntax von verschiedenen Browsern/Browserversionen Rücksicht genommen werden stellt viele Funktionalitäten zur Verfügung stellt ein Framework für die Entwicklung eigener PlugIns zur Verfügung 8

9 jquery Was ist das überhaupt? jquery-versionen 1.x unterstützt Internet Explorer 6 und neuer 2.x unterstützt Internet Explorer 9 und neuer Andere Browser wie Opera, Chrome, Safari,... werden von beiden Versionen identisch unterstützt 9

10 jquery und jqueryui jquery stellt primär Backend Funktionalitäten zur Verfügung erlaubt die Manipulation des DOM kann Events abfangen erlaubt die Entwicklung von PlugIns jqueryui stellt eine Sammlung von Widgets, UI Interaktionen, Effekten und Themes auf Basis der jquery Library zur Verfügung z.b. DatePicker und durchsuchbare Dialogelisten sind typische Beispiele für jqueryui Elemente 10

11 Einstieg jquery - Einbinden jquery ist eine JavaScript Bibliothek, die entweder direkt aus dem Internet oder als lokale Ressource eingebunden werden kann Es gibt hierbei zwei Varianten jquery.js die ungepackte Variante Vorteil ist vor allem, daß man problemlos den JavaScript-Debugger verwenden kann und den jquery Quellcode auch direkt lesen kann jquery.min.js die gepackte Variante Vorteil ist vor allem die geringere Ladezeit 11

12 Einstieg jquery - Einbinden jquery Code wird analog zu normalem JavaScript Code eingebunden, d.h. entweder in der Form: <script type="text/javascript"> /* Hier der jquery-code */ </script> oder als externe JavaScript Datei <script src="<sourceurl>"></script> bzw in Notes Anwendungen als JavaScript Library Davor muss natürlich die jquery-bibliothek eingebunden werden, z.b. als FileRessource 12

13 Einstieg jquery - Syntax jquery Aufrufe/Events entsprechen generell immer der folgenden Syntax: jquery(<selektor>).<attribut/methode/event>(<parameter>); oder als Kurzschreibweise $(<Selektor>).<Attribut/Methode/Event>(<Parameter>); Die Kurzschreibweise ist die normalerweise verwendete Variante Die Langschreibweise wird nur dann verwendet, wenn man mehrere Libraries einsetzt, die die gleiche Kurzschreibweise verwenden. Hier würde dann die letzte eingebundene gewinnen Der Selektor ist eine CSS basierte Schreibweise um die entsprechenden Elemente zu selektieren 13

14 Einstieg jquery jquery.ready vs onload jquery stellt einen Document Event namens ready zur Verfügung. Dieser ist ähnlich zum onload Event des normalen DOM Der Code im onload Event wird nach Laden des Dokumentes und aller eingebundener Ressourcen (Bilder, CSS,...) ausgeführt. Der Code im ready-event dagegen wird direkt nach dem Laden des HTML Codes ausgeführt, also bevor die Seite dargestellt wird und externe Ressourcen, wie Bilder geladen werden 14

15 Einstieg jquery jquery.ready vs onload Beide können zum Initialisieren von Objekten verwendet werden jquery.ready allerdings z.b. nicht für die Manipulation von Bildern, da diese ja zu diesem Zeitpunkt noch nicht geladen sind jquery.ready kann mehrfach in einer Seite vorkommen, somit z.b. auch in Teilmasken gekapselt werden Syntax: $(document).ready(function(){ /* Hier der jquery-code */ }); 15

16 Auslesen von Inhalten Dies geschieht über folgende Aufrufe: $(<Selektor>).html() bzw.text() Für Inhalte $(<Selektor>).attr( <Attributname> ) Für Attribute $(<Selektor>).prop( <Propertyname> ) Für Properties Der Unterschied zwischen Attributen und Properties ist recht einfach: Attribute werden beim Aufbau der Seite gesetzt Properties durch den Benutzer z.b. ist die Eigenschaft checked eines Radiobuttons eine Property während die Eigenschaft value ein Attribut ist 16

17 Ändern von Inhalten Dies geschieht über folgende Aufrufe: $(<Selektor>).html( <Wert> ) bzw.text( <Wert> ) $(<Selektor>).attr( <Attributname>, <Wert> ) $(<Selektor>).prop( <Propertyname>, <Wert> ) Mehrfach-Attribute bzw Properties können durch die folgende Syntax gesetzt werden: $(<Selektor>).prop({<Propertyname1>: <Wert1>, <Propertyname2>: <Wert2> }) 17

18 Ändern von Inhalten Generell werden beim Setzen von Eigenschaften immer alle selektierten Elemente verändert Durch Angabe von Klassennamen kann die Selektion nur auf bestimmte Elemente eines Typs beschränkt werden (CSS-Syntax) Durch Angabe von Pseudoselektoren kann ebenfalls eine Einschränkung vorgenommen werden: :first, :last, :even, :odd, :eq(x), :gt, :lt, :nth-child(x) 18

19 Ändern von Styles Mit der Methode.css können direkt Styles eines oder mehrerer Elemente gesetzt werden: $(<Selektor>).css('<Attribut>', 'Wert') Besser ist natürlich gleich mit CSS-Klassen zu arbeiten. Diese können mit.addclass zugewiesen bzw mit.removeclass entfernt werden: $(<Selektor>).addClass('<Klasse>') $(<Selektor>).removeClass('<Klasse>') 19

20 Events Mit der Methode.on bzw.off können Events eines oder mehrerer Elemente gesetzt bzw entfernt werden: $(<Selektor>).on('<Eventname(n)>', function() {<Code>} bzw <Funktionsname>) $(<Selektor>).off(['<Eventname(n)>'[, function() {<Code>} bzw <Funktionsname>]]) Empfehlenswert ist die Variante, die EventHandler in eigene Funktionen auszulagern -> Übersichtlicher Es kann auch für viele Events die Kurzschreibweise verwendet werden: $(<Selektor>).<Eventname>(function() {<Code>} bzw <Funktionsname>) 20

21 Events Mausevents: click, dblclick, hover, mouseleave, mousedown, mouseenter, mousemove, mouseout, mouseover, mouseup Tastaturevents: keypress, focusout, keydown, keyup Formevents: focus, blur, submit 21

22 Effekte Mit der Methode.hide bzw.show können eines oder mehrerer Elemente ausgeblendet bzw eingeblendet werden: $(<Selektor>).hide(['<Übergangszeiten>']) $(<Selektor>).show(['<Übergangszeiten>']) Als Übergangszeiten kann entweder ein Wert in ms oder aber 'slow' bzw 'fast' angegeben werden Die Methode toggle schaltet jeweils auf den anderen Status um. z.b. ein sichtbares Element wird versteckt: $(<Selektor>).toggle(['<Übergangszeiten>']) 22

23 Effekte Es gibt auch weitere Effekte, wie z.b..animate.fadein,.fadeout,.fadetoggle.slidedown,.slideup 23

24 Callback Oftmals will man nach Ausführen eines Effektes weitere Aktionen durchführen Dies kann durch die Angabe einer Callback Funktion erreicht werden: $(<Selektor>).hide(['<Übergangszeiten>'][,function () {<Code>}]) 24

25 Ajax jquery bietet z.b. auch eine Ajax Funktion Aufbau $.ajax({ url : action, type : method, data : data }).done(function (data) { // Bei Erfolg alert("erfolgreich:" + data); }).fail(function() { // Bei Fehler alert("fehler!"); }).always(function() { // Immer alert("beendet!"); }); 25

26 Ajax url: Aufzurufende URL type: Typ des Requests (GET, POST, PUT) data: Daten für den Request als PlainObject, Text oder String Die Ajax-Methode kennt noch eine Vielzahl weiterer Parameter mit denen z.b. Header Informationen, MimeType, Benutzerdaten ausgelesen werden können oder auch andere EventHandler mit Code befüllt werden können 26

27 jqueryui Erweitern die Selektoren um Methoden, um die Widgets, Interaktionen oder Effekte auszuführen Widgets werden meist beim Laden initialisiert, z.b. Autocomplete: var availabletags = [ "Tag1", "Tag2", "Tag3" ]; $( <Selector> ).autocomplete({ source: availabletags }); 27

28 PlugIns Müssen separat zu jquery UI eingebunden werden Auch hier gilt, daß diese meist beim Laden an selektierte Elemente gebunden werden 28

29 Demo 29

30 Vergleich JavaScript/jQuery jquery vereinfacht an vielen Stellen den Zugriff Der folgende Vergleich z.b. versteckt alle a-links im Dokument jquery: $('a').hide(); JavaScript: var els = document.getelementsbytagname( a ); for (int i=0;i<els.length;i++) { els[i].style.display = 'none'; } Die jquery Selektion wird also immer für alle Elemente ausgeführt, die durch den Selektor definiert sind. Ausnahme ist lediglich das Auslesen von Informationen 30

31 Vergleich JavaScript/jQuery Der folgende Vergleich z.b. macht einen einfachen Ajax Request jquery: $.ajax({ url : "/names.nsf/people?readviewentries", type : "GET", }).always(function() { dosomething(); }).fail(function() { alert("kann keine XMLHTTP-Instanz erzeugen"); }) 31

32 Vergleich JavaScript/jQuery JavaScript: if (window.xmlhttprequest) { request = new XMLHttpRequest(); } else if (window.activexobject) { try { request = new ActiveXObject('Msxml2.XMLHTTP'); } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {} } } if (!request) { alert("kann keine XMLHTTP-Instanz erzeugen"); return false; } else { var url = "/names.nsf/people?readviewentries"; request.open('get', url, true); request.send(null); request.onreadystatechange = dosomething; } 32

33 Q & A 33

34 Links jquery jquery API jqueryui jqueryui API jquery Date-/Timepicker Chosen 34

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