Kaufen

console.log() und die Überwachung des Ladevorgangs

aus: Das Dojo Toolkit

Dieses Video ist nur für Käufer des Video-Trainings, sowie video2brain Abonnenten zugänglich.

Holen Sie sich jetzt dieses Video-Training und starten Sie ins Lernvergnügen!

Kaufen

Über dieses Video

Wenn Sie Firebug verwenden, können Sie in der Konsole Testausgaben ausgeben, die das Parsen der Webseite und den Aufbau des DOM in Zusammenhang mit addOnLoad() verdeutlichen. Seien Sie gespannt.

AJAX hat das WWW in den letzten Jahren revolutioniert! AJAX- und Web-Entwickler gieren förmlich nach leistungsfähigen und robusten Frameworks und Toolkits für Rich Internet Applications. Mit dem freien Dojo Toolkit steht ein solches mächtiges, zuverlässiges, erprobtes und dennoch einfach anzuwendendes Werkzeug bereit. Dieses Video-Training versetzt Sie in die Lage, das Dojo Toolkit zur Verbesserung und Optimierung Ihre Web-Applikationen zu nutzen und dabei viel Arbeit und Zeit zu sparen!

EUR 19,95

Kaufen

Ähnliche Video-Trainings

In diesem ersten Kapitel bekommen Sie einen Überblick über das Dojo-Toolkit und die möglichen Verwendungszwecke. Der Trainer zeigt Ihnen auch, wie Sie das Toolkit auf Ihrem Webserver einrichten.

Einleitung
- Der Trainer stellt Ihnen in diesem Video das Dojo-Toolkit vor und gibt Ihnen einen ersten Überblick über dessen Aufbau.
  
  Vorstellung
  
  06:38
- An wen wendet sich das Toolkit und was sind die Voraussetzungen für die erfolgreiche Arbeit mit dem Dojo-Toolkit und diesem Training? Diese Fragen klärt der Trainer in diesem Video.
  
  Voraussetzungen
  
  01:01
- Einen kurzen Blick auf einige eindrucksvolle, offizielle Highend-Beispiele, die mit dem Dojo-Toolkit erstellt wurden, ermöglicht Ihnen der Trainer in diesem Film.
  
  See it in action
  
  01:44
- Um das Dojo-Toolkit zu verwenden, müssen Sie es zuerst downloaden und installieren. Dieser Abschnitt zeigt Ihnen, wie das geht.
  
  Download und Installation
  - Woher Sie das Dojo-Toolkit bekommen, erfahren Sie vom Trainer in diesem Video.
    
    How do I get this?
    
    01:01
  - Um mit dem Dojo-Toolkit arbeiten zu können, müssen Sie die eben heruntergeladene Datei in das öffentliche Verzeichnis Ihres Webservers extrahieren. Sehen Sie dem Trainer hierbei über die Schulter.
    
    Das Dojo-Toolkit installieren
    
    02:06
- Damit Sie vollständig ausgerüstet sind, zeigt Ihnen der Trainer in diesem Unterkapitel, welche Werkzeuge und Add-ons für Sie interessant sein können.
  
  Tools & Programme
  - Erfahren Sie in diesem Video, welche Programme für die Arbeit mit dem Dojo-Toolkit hilfreich sind. Der Trainer stellt Ihnen Firebug, den DOM-Inspector und das Add-on "Webdeveloper" vor.
    
    Die Entwicklungswerkzeuge
    
    04:49
  - Welche Browser werden vom Dojo-Toolkit als Minimalvoraussetzung gefordert? Die Antwort bekommen Sie in diesem Film.
    
    Die Browser-Kompatibilität
    
    02:48
- In diesem Unterkapitel erfahren Sie, welche Einstellmöglichkeiten Ihnen das Dojo-Toolkit bietet und in welchen Dateien sie sich verstecken.
  
  Konfiguration und Bereitstellung
  - In diesem Film erklärt Ihnen der Trainer die Dateien dojo.xd.js und dojo.js. Des Weiteren erfahren Sie, wie Sie Konfigurationen über den Script-Parameter djConfig vornehmen.
    
    Die Verwaltungszentrale
    
    06:13
  - Nach der Installation auf Ihrem Server können Sie einige Testskripte aufrufen, um zu sehen, ob das Dojo-Toolkit korrekt installiert ist. Dieses Video gibt Aufschluss über die Testmöglichkeiten.
    
    Tests durchführen
    
    01:31
  - Wie sollen Sie das Dojo-Toolkit in Ihre eigenen Webapplikationen einbinden? Über die offiziellen CDN oder eigene Ressourcen? Sie erhalten die Antworten auf diese Fragen in diesem Film.
    
    CDN oder eigene Ressourcen?
    
    01:54
Sie bekommen in diesem Kapitel die ersten praktischen Anwendungen des Toolkits präsentiert und erhalten nützliche Tipps vom Trainers zur Verwendung von Dojo.

Der Einstieg ins Geschäft
- Der Trainer zeigt Ihnen in diesem Film das Grundgerüst jeder Dojo-Applikation und den Einstieg über die offizielle Dojo-Dokumentation - insbesondere das "Book of Dojo".
  
  Das Grundgerüst und die Dokumentation
  
  04:11
- Das Paketsystem des Dojo-Toolkits beinhaltet die Methode require(). Damit können Sie benötigte Ressourcen über eine intelligentere Funktionalität mithilfe eines Modulnamens laden. Sehen Sie auch, was es mit dojoType auf sich hat.
  
  Das Paketsystem, der dojoType und die dojo.require()-Methode
  
  06:53
- Sie werfen in diesem Video einen genaueren Blick auf die tatsächlich vom Browser verarbeitete Struktur des Quelltextes (mithilfe von Firebug), die ganz extrem von dem tatsächlich geschriebenen Quellcode abweicht, wenn Sie Dojo und vor allen Dingen einen dojoType verwenden.
  
  Der dojoType und das gerenderte Widget
  
  03:38
- Mit der Methode dojo.addOnLoad() können Sie gewährleisten, dass der darin notierte Code erst dann ausgeführt wird, wenn das DOM einer Webseite korrekt aufgebaut wurde. Insbesondere werden Ihre dort notierten dojo.require()-Anweisungen vollständig ausgeführt und die notwendigen Ressourcen geladen und verarbeitet.
  
  Schutz des DOM - die Methode dojo.addOnLoad()
  
  04:57
- Mit dojo.byId() gibt es in Dojo eine alternative Schreibweise zu document.getElementById(). Der Aufruf von dojo.byId() gibt den domNode von einem Element zurück. Die Methode dijit.byId() liefert hingegen ein Widget. Sehen Sie mehr dazu in diesem Film.
  
  Die Methoden dojo.byId() und dijit.byId()
  
  01:27
- Wenn Sie Firebug verwenden, können Sie in der Konsole Testausgaben ausgeben, die das Parsen der Webseite und den Aufbau des DOM in Zusammenhang mit addOnLoad() verdeutlichen. Seien Sie gespannt.
  
  console.log() und die Überwachung des Ladevorgangs
  
  02:38
- Mit dojo.query() können Sie auf einfache Weise das DOM oder Teile davon parsen und auf eine Auswahl an Knoten daraus zugreifen. Folgen Sie aufmerksam den Ausführungen des Trainers.
  
  DOM-Abfragen mit dojo.query()
  
  02:24
Selbst das Eventhandling wird mit dem Dojo-Toolkit revolutioniert und vereinfacht. Dieses Kapitel zeigt Ihnen gängige Methoden, um mit Dojo Events zu verwalten.

Das Eventsystem
- Die konventionelle Ereignisbehandlung bei Webapplikationen ist durch die extrem unterschiedlichen Verhaltensweisen verschiedener Browser äußerst aufwändig. Das Dojo-Toolkit vereinfacht die Ereignisbehandlung immens. Mehr dazu in diesem Film.
  
  Das Problem der konventionellen Ereignisbehandlung
  
  02:52
- Mittels des Dojo-Eventsystems können Sie ein Ereignis an ein Widget über den <script>-Tag anhängen. Dieser hat in Dojo zur Umsetzung der Ereignisbehandlung den spezifischen MIME-Type dojo/method und er wird in den Tag für das Widget eingeschlossen. Der Trainer erklärt in diesem Film, welche Möglichkeiten Ihnen hierbei zur Verfügung stehen.
  
  Innere Ereignisbehandlung und der MIME-Type dojo/method
  
  01:41
- In Dojo wird ein Ereignis als beliebiger Funktions- oder Methodenaufruf in JavaScript verstanden. Das hat zur Folge, dass Sie auf jedes Ereignis und solch einen Aufruf reagieren können. Dazu verwendet man in der Regel die Methode dojo.connect().
  
  Ereignisse verbinden
  - In der Methode dojo.addOnLoad() definieren Sie im Allgemeinen eine innere Funktion, in der mit dojo.connect() die Reaktion auf ein Ereignis verknüpft wird. Sehen Sie in diesem Video, wie das funktioniert.
    
    Die Methode dojo.connect()
    
    02:37
  - Im Ereigniskonzept von Dojo können Sie mit connect() auch mehrere Ereignisse miteinander verknüpfen. Der Trainer demonstriert Ihnen diese Vorgehensweise in diesem Video.
    
    Verknüpfen von Ereignissen
    
    01:15
  - Die Abfrage von DOM-Knoten mit dojo.query() lässt sich in Verbindung mit Ereignissen bringen. Sie selektieren über dojo.query() eine gewisse Anzahl von Elementen in einer Webseite und definieren eine einheitliche Reaktion auf ein Ereignis bei all diesen Elementen. Dieser Film gibt Aufschluss darüber.
    
    Ereignisse in Verbindung mit dojo.query()
    
    00:58
Hinter dem Begriff Dijit versteckt sich ein Widget-System, das unmittelbar auf dem puren Dojo aufsetzt. Die Hauptanwendung liegt darin, dass Sie mit nur ganz wenig (oder sogar ohne) JavaScript und CSS komplexe und leistungsfähige grafische Oberflächen für das Web 2.0 erstellen können. Sehen Sie mehr dazu in den folgenden Filmen.

Das Dijit
- Wie können Sie Widgets aus dem Dijit erstellen und in eigene Webapplikationen einsetzen? Dieses Unterkapitel gibt Aufschluss darüber.
  
  Widgets erstellen
  - Das Dijit ist sehr einfach für eigene Applikationen zu nutzen. Eine hervorragende Dokumentation (Book of Dojo) mit vielen direkt zu übernehmenden Beispielen samt Live-Vorführung ermöglicht diese leichte Verwendung des Dijit.
    
    Verwenden der Widgets
    
    05:05
  - Sie können mit dem Dijit deklarativ Widgets einer grafischen Oberfläche für das Web 2.0 unter Verwendung spezieller Attribute innerhalb von regulären HTML-Tags erzeugen oder aber auch programmiertechnisch mittels JavaScript. Auf beide Arten haben Sie dieselben Optionen zur Verfügung.
    
    Deklarativ vs programmiertechnisch
    
    02:16
  - Jede Dijit-Komponente verfügt über gewisse Interaktionspunkte, über die Sie diese für Ihre Applikation anpassen können. Es gibt eine Reihe von Attributen und Methoden im Dijit, die nahezu in jedem Widget vorkommen. Der Trainer zeigt Ihnen diese im folgenden Video.
    
    Die API-Referenz
    
    05:46
- Dijit ist als Bundle mit seinen eigenen CSS-Themen, wie z.B. Tundra, zu verstehen, das eine Reihe von üblichen Designs und Farbschemata für alle Widgets mitbringt und für ein konsistentes Look and Feel sorgt. Daneben sind im Dijit eine Reihe von Layout-Widgets zur Gestaltung einer modernen Web-GUI enthalten.
  
  Das Dijit-Layout
  - Dijit stellt mit seinen verbundenen Themen sicher, dass für die gesamte Weboberfläche ein konsistentes Look and Feel zur Verfügung steht, das sowohl global zugänglich, lokalisierbar als auch barrierefrei ist.
    
    Die CSS-Themen
    
    02:31
  - Der Schlüssel zur Gestaltung einer modernen Web-GUI ist im Dojo-Toolkit das Dijit und dort konkret der Bereich der Layout-Widgets. Erfahren Sie mehr dazu in diesem Video.
    
    Layout mit dem Dijit
    
    05:58
Das Lesen von Daten von einem Server aus der Applikation heraus unterstützt das Dojo-Toolkit über verschiedene Standardverfahren natürlich auch. Das kann auf unterschiedlichen Abstraktionsebenen erfolgen, die die eigentliche AJAX-Kommunikation weitgehend verbergen und damit viele Probleme der AJAX-Kommunikation im Hintergrund lösen.

AJAX mit dem Dojo-Toolkit
- Der wohl wichtigste Fall zur Kommunikation mit dem Server erfolgt in Dojo über XMLHttpRequest oder kurz XHR. Dojo stellt verschiedene XHR-Methoden zur Verfügung, um die üblichen HTTP-Übertragungsarten zu unterstützen. Die XHR-Methoden teilen sich eine Reihe von gemeinsamen Parametern. In der Praxis nutzt man fast immer die Methoden dojo.xhrGet() für GET und dojo.xhrPost() für POST.
  
  XHR
  
  03:53
- Mit Dojo können Sie Daten per GET und POST zum Server senden. Das XHR-System von Dojo abstrahiert den gesamten Vorgang und kompensiert damit eine ganze Reihe von Problemen, die beim manuellen Versenden von Daten per AJAX auftreten können.
  
  Daten per XHR zum Server senden
  
  04:09
- Mit dem Parameter "sync" können Sie XHR-Anfragen synchronisieren. Erfahren Sie mehr dazu in diesem Video.
  
  AJAX-Anfragen synchronisieren
  
  00:53
Einer der Hauptgründe für die Beliebtheit von Dojo ist das extrem mächtige Animationssystem mit diversen vorgefertigten Animationen für eine große Anzahl an üblichen Anwendungsfällen. Damit ist es extrem einfach, Ihren eigenen Webprojekten eindrucksvolle, visuelle Effekte hinzuzufügen und damit Ihre Webseite erheblich interessanter zu machen.

Animationen mit dem Dojo-Toolkit
- Animationen in Dojo verwenden in der Regel ein "magisches Objekt" als einzigen Parameter. Das wichtigste Attribut ist "node". Damit wird der domNode spezifiziert, auf den Ihre Animationen ausgeführt werden sollen.
  
  Ein Grundgerüst
  
  01:45
- Eine Animation wird mit der Methode play() gestartet. Als Basisanimationen der Basisbibliothek dojo.js gibt es fadeIn() zum Einblenden von Elementen, fadeOut() zum Ausblenden und animateProperty() zum Animieren von Eigenschaften.
  
  Die Basismethoden
  
  02:33
- Die erweiterten Animationstechniken und Tools von Dojo wurden in ein eigenes Modul ausgelagert: dojo.fx. Damit stehen Ihnen zusätzliche Möglichkeiten zur Verfügung, die Ihnen der Trainer in diesem Video demonstriert.
  
  dojo.fx zur Ergänzung
  
  03:19
- Ein Animationsobjekt verfügt auch über eine Serie von Ereignissen, über die Sie eine Animation erheblich anspruchsvoller gestalten können. Diese Ereignisse können Sie in Verbindung mit dojo.connect() einsetzen. Sehen Sie mehr dazu in diesem Film.
  
  Animationsereignisse
  
  01:11
- Das Modul dojo.NodeList-fx ergänzt dojo.query() um einige zusätzliche Methoden, die vor allen Dingen im Rahmen von dojo.fx-Animationen sehr nützlich sein können. Das kann dann sinnvoll sein, wenn Sie eine Gruppe von Knoten haben, die Sie auf einfache Art und Weise manipulieren wollen.
  
  Animationen in Verbindung mit dojo.query()
  
  01:07

console.log() und die Überwachung des Ladevorgangs

aus: Das Dojo Toolkit

Über dieses Video

Auszug aus: Das Dojo Toolkit

Filminformationen