SlideShare ist ein Scribd-Unternehmen logo
Web 2.0 mit der YAHOO! User Interface Library Stephan Schmidt, 1&1 Internet AG
Agenda Vorstellung Komponenten und Installation YUI CSS YUI Utilities YUI und AJAX YUI Widgets Erweiterungen zur YUI
Wer bin ich? Teamleiter Web-Development bei der 1&1 Internet AG Autor verschiedener Bücher und Fachartikel Redner auf internationalen Konferenzen Seit 2000 aktiv in der Open Source Szene http://www.schst.net
Komponenten der YUI Aufgeteilt in drei Gruppen CSS Resourcen Utilities Widgets / Komponenten Ergänzt durch die Design Pattern Library
YUI Design Patterns Lösungen für Design Probleme Keine Patterns im Sinne der Gang of Four, sondern Lösungen für Usability und Visualisierung Anleitungen zum Einsatz der Komponenten
YUI Design Patterns Beispiele Navigation z.B. Breadcrumb, Tabs, Menüs, … Daten durchblättern z.B. Autocomplete, Kalender, Pagination, … Aufforderung zum Klick Hover-Effekte, Tooltips, …
YUI CSS Ressourcen Stellen generische CSS-Definitionen zur Verfügung Layout-unabhängig Cross-Browser-Unterstützung z.B. Mehrspaltige Layouts, Vereinheitlichung von Schriftgrößen
YUI Utilities Low-Level Hilfsklassen Verbessern Sprachfeatures Verbessern DOM Cross-Browser-Unterstützung z.B. AJAX-Funktionen, Event-Verarbeitung, Animation-Utility,…
YUI Widgets Stellen fertige User-Interface-Elemente zur Verfügung Bauen auf den Utilities auf z.B. Events, Animation, … Fertige Implementierungen der Design Patterns
YUI Widgets (2) Bieten sehr große Flexibilität Konfigurierbar über Objekte Layout kann über CSS angepasst werden Nahezu alle üblichen Widgets Trees, Kalender, Tabs, Autocompletion, DataTable Neu: Ersatz für Standard HTML-Widgets
Installation Download des ZIP-Archivs von http://developer.yahoo.com/yui/ Entpacken fertig!
Inhalt der Distribution /docs Komplette API-Dokumentation Durchsuchbar per Javascript /examples Alle Beispiele, die auch online verfügbar sind /build Javascript Sourcen
Einbinden der Klassen Sourcen im  build -Ordner sind nach Paketen aufgeteilt z.B. event, animation, autocomplete Jede Datei ist in drei Versionen verfügbar yahoo.js  (normale Entwicklung) yahoo-min.js  (Produktivsystem) yahoo-debug.js  (Debugging mit Logger)
Alternative Installation Verwendung des YAHOO-Hosting Einbinden aller  *.js  und  *.css  Dateien von YAHOO-Servern Ab Version 2.2.0 verfügbar http://yui.yahooapis.com/2.2.2/build/*
Vorteile Dateien blockieren keine Downloads vom eigenen Server (2 Files pro Domain parallel) Werden von einem Server aus der Nähe des Clients angeboten automatische GZIP-Kompression, falls der Client dies unterstützt
Nachteile Jeder Request wird in den Webserver-Logs protokolliert Aber nicht ausgewertet Debug-Versionen sind online nicht verfügbar
Browser-Unterstützung Keine Browser komplett ausschließen Graded Browser Support A-Grade (Aktuelle Standards, 96%) z.B. Firefox 1.5+, IE 6.0+ C-Grade (reines HTML, 3%) z.B. Lynx, Netscape 4 X-Grade (unbekannt, 1%) z.B. Neue Versionen von IE/Firefox
A-Grade Browser Werden komplett von YUI unterstützt Werden ausgiebig getestet Definiert über eine Whitelist http://developer.yahoo.com/yui/articles/gbs/
C-Grade-Browser Definiert über Blacklist Kein Support von YAHOO Einsatz von HIJAX http://domscripting.com/blog/display/41 Einsatz von Unobstrusive JavaScript http://www.onlinetools.org/articles/unobtrusivejavascript/
X-Grade-Browser Alle, die nicht auf Whitelist oder Blacklist stehen Werden nicht offiziell unterstützt Trotzdem oft fähig, Komponenten darzustellen
CSS Ressourcen Nur für A-Grade-Browser Kein CSS für Lynx oder Netscape reset.css fonts.css grids.css reset-fonts-grids.css
reset.css (587 Bytes) Setzt Margin, Padding, Border und Fontgrößen in allen Browsern zurück Layout wird damit zur reinen CSS-Angelegenheit Unbedingt immer einbinden
fonts.css (416 Bytes) Vereinheitlicht Fontgröße und Zeilenhöhe über Browser und Betriebssysteme Setzt Arial als Standardfont und passende Ersatzschriften für alle Betriebssysteme Angabe der Fontgröße nur noch in Prozentwerten Tabelle für Zuordnung Prozent zu Pixel: http://developer.yahoo.com/yui/fonts/#chart
grids.css (2.526 Bytes) Ermöglicht mehrspaltige Layouts ohne Tabellen Bietet schachtelbare Templates, um nahezu unbegrenzt viele Varianten zu implementieren Ermöglicht es, wichtigen Content unabhängig von der Position im Layout an den Anfang des Dokuments zu stellen
YUI Utilities Erweiterung der JS-Sprachfeatures Erweiterung der DOM-Features Vereinheitlichung von Event-Handling Animationseffekte Vereinheitlichung von AJAX
Das YAHOO Objekt Alle Klassen sind innerhalb des YAHOO-Namespaces Verhindert Namenskonflikte Können abgekürzt werden var calClass = YAHOO.widget.Calendar; var myCal  = new calClass(…);
Eigene Namespaces YAHOO.namespace("ipc.examples"); YAHOO.ipc.examples.foo = "foo"; alert(YAHOO.ipc.examples.foo);
Vererbung YAHOO.ipc.Car = function(name) { alert("Konstruktor von Car:" + name); } YAHOO.ipc.Convertible = function(name) { alert("Konstruktor von Convertible:" + name); YAHOO.ipc.Convertible.superclass.constructor.call( this, name); } YAHOO.lang.extend(YAHOO.ipc.Convertible, YAHOO.ipc.Car); var bmw = new YAHOO.ipc.Convertible("BMW");
Weitere Features YAHOO.lang.augment()  kopiert Properties YAHOO.log() Environment zum Überprüfen, welche Komponenten geladen wurden
DOM-Features var pos = YAHOO.util.Dom.getXY('target'); YAHOO.util.Dom.setXY('abs', pos); Vereinfacht Positionierung YAHOO.util.Dom.setStyle('abs', 'opacity', 0.5); YAHOO.util.Dom.getStyle('abs', 'opacity'); Vereinfacht Arbeit mit Styles
Arbeit mit CSS-Klassen getElementsByClassName() hasClass() addClass() removeClass() replaceClass()
Weitere DOM-Features Arbeit mit Regionen (überlappt Element A Element B) Batch-Processing auf Elementen Elemente über Callback-Methode aus dem Document holen Document/Viewport-Größen ermitteln
Batch-Processing function process() { var els = YAHOO.util.Dom.getElementsByClassName(   'active'); YAHOO.util.Dom.batch(els, hide); } // Callback Funktion function hide(el) { YAHOO.util.Dom.setStyle(el, 'visibility',    'hidden'); }
Event-Handling Vereinfachung bestehender Funktionalität var oElement = document.getElementById("elementid");  function fnCallback(e) { alert("click"); }  // Listener anhängen YAHOO.util.Event.addListener(oElement, "click", fnCallback);
Event-Handling Statt Element: Array von Elementen HTML-Id Array von HTML-Ids Id kann verwendet werden, wenn das Element noch nicht geladen wurde
Event-Handling Cross-Browser Scope-Correction Beliebige Objekte als Parameter neue Events onAvailable onContentReady
Custom Events Erstellen eigener Events Ermöglichen Hooks in Anwendungen Wird in YAHOO Widgets genutzt z.B. bei Auswahl eines Datums im Kalender z.B. beim Ende einer Animation
Animationen Ermöglicht das Verändern von CSS-Attributen über eine definierte Zeit Unterstützt Easing für weiche Animationen Hooks über Events Nicht so mächtig wie script.aculo.us
Animationen var attributes = { width: {to: 100}, height: {to: 100}, fontSize: {from: 100, to: 50, unit: '%'}, opacity: { to: 0.5 } }; var anim = new YAHOO.util.Anim('demo',attributes,    0.5, YAHOO.util.Easing.backOut); anim.animate();
AJAX-Features Vereinfachte API für XmlHttpRequest Bislang nur asynchron Unterstützt GET, POST und Fileuploads Timeouts pro Request Kann zusätzliche Argumente an den Callback übergeben
AJAX-Beispiel var callback = {  success : function(o) { alert(o.responseText); }, failure : function(o)  { alert("Request fehlgeschlagen"); alert(o.statusText); } }; YAHOO.util.Connect.asyncRequest('GET', url, callback);
AJAX-Anwendungen YAHOO.ext UpdateManager regelmäßiges Abschicken von AJAX-Requests um Teile der Seite zu aktualisieren JSON-RPC-Services in Stubbles Generiert JavaScript-Proxies für PHP-Klassen auf Basis von YUI
Weitere Utilities Drag&Drop Element (Wrapper um DOM) DataSource Browser History Manager
Widgets und Controls Autocomplete Menu Calendar Container-Elemente …
Autocomplete Ergänzt Standard  <input/>  Felder um Autocompletion Beliebige Datenquellen Sehr viele Konfigurationsoptionen HIJAX-Ansatz
Autocomplete HTML <div> <input type=&quot;text&quot; id=&quot;hero&quot;/> ist mein Held. <div id=&quot;herocontainer&quot;></div> </div> #herocontainer {position:absolute;top:1.7em;width:150px;} #herocontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;} #herocontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;} #herocontainer ul {padding:5px 0;width:100%;} #herocontainer li {padding:0 5px;cursor:default;white-space:nowrap;} #herocontainer li.yui-ac-highlight {background:#ff0;}
AutoComplete Datasource var heroes = [   &quot;Batman&quot;,   &quot;Blue Beetle&quot;,   … ,   &quot;Superman&quot;,   &quot;Supergirl&quot; ]; var source = new YAHOO.widget. DS_JSArray (heroes);
AutoComplete Widget var complete = new YAHOO.widget.AutoComplete(   'hero' ,   'herocontainer' ,   source ); complete.queryDelay = 0; complete.useShadow = true; complete.minQueryLength = 0;
Weitere Features Kombination mit Animation möglich Auswahl eines Wertes forcieren Type-Ahead Feature Mehr als ein Element auswählen Layout selbst rendern
Datenquellen JavaScript Array JavaScript Callback-Funktion XmlHttpRequest über ConnectionManager JSON-Rückgabe XML Rückgabe CSV Rückgabe
Menu Eine API für verschiedene Menüs Top-Level Menü Context-Menü Windows-Startmenü Erzeugung über reines HTML reines JavaScript
Menu aus Markup HTML-Struktur als Unordered List Drei Zeilen Javascript var menu = new YAHOO.widget.Menu(&quot;menudiv&quot;);  menu.render();  menu.show();
Menu-Beispiele Live Demo
Datumsauswahl mit Calendar DIV &quot;container&quot; muss erstellt werden CSS wird mitgeliefert var cal = new YAHOO.widget.Calendar(&quot;cal&quot;,   &quot;container&quot;); cal.render();
Konfigurationsoptionen Datumsgrenzen Angezeigter Monat Locales Mehr als ein Datum wählbar Layoutoptionen
Auf Auswahl reagieren Zugriff über  getSelectedDates() Interaktion über Custom-Events Datum ausgewählt Datum abgewählt Seite gewechselt cal.selectEvent.subscribe(function(o) {…});
Container Elemente Verschiedene Widgets, die beliebigen HTML-Content beinhalten Tooltip Panel Dialog SimpleDialog Erstellung durch Markup und JS
Container-Elemente
Basis-Markup <div id=&quot;myPanel&quot;> <div class=&quot;hd&quot;></div> <div class=&quot;bd&quot;></div> <div class=&quot;ft&quot;></div> </div> var myPanel = new YAHOO.widget.Panel(&quot;myPanel&quot;); myPanel.setHeader(&quot;Titelzeile&quot;); 
Features Live Demo
Weitere Widgets TreeView (z.B. Explorer-like) Tabs Schiebregler, Farbauswahl DataTable (beta) Button (Ersatz für HTML-Input-Tag)
Vorteile der YUI Sehr viele Low-Level-Klassen Sehr viele fertige Widgets Klar strukturiert & modular Einfache APIs Sehr gute Dokumentation Fördert HIJAX
Erweiterungen YAHOO.ext von Jack Slocum YAHOO.TOOLS von Dav Glass ConnectionManager Bookmarklet (obsolet dank Firebug)
YAHOO.ext Zusätzliche Utilities und Widgets DomHelper Verbesserte Animations-Features AJAX-Update-Manager Layout-Manager Grid Gleiche Qualität wie YUI Sehr aufwändige Beispiele
Weitere Informationen YUI-Website http://developer.yahoo.com/yui YUI-Blog http://yuiblog.com/blog/ YAHOO ext http://www.jackslocum.com/
Ende Vielen Dank für Ihre Aufmerksamkeit. Fragen? http://www.schst.net

Weitere ähnliche Inhalte

Was ist angesagt?

PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3
marco-huber
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Gregor Biswanger
 
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Christian Wenz
 
Powerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-FeaturesPowerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-Features
Sascha Hameister
 
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerkTYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Dokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBDokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDB
Mario Müller
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7.3 - Die Neuerungen - pluswerk
TYPO3 CMS 7.3 - Die Neuerungen - pluswerkTYPO3 CMS 7.3 - Die Neuerungen - pluswerk
TYPO3 CMS 7.3 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
Bastian Feder
 
Agiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesAgiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific Languages
Dominik Hirt
 
Windows Powershell
Windows PowershellWindows Powershell
Windows Powershell
Thomas Wilhelm Wiefel
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Der oracle dba_und_seine_passwoerter
Der oracle dba_und_seine_passwoerterDer oracle dba_und_seine_passwoerter
Der oracle dba_und_seine_passwoerter
Gunther Pippèrr
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
die.agilen GmbH
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
die.agilen GmbH
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
FunThomas424242
 
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
NETWAYS
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
Karionis
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 

Was ist angesagt? (20)

PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3PhpStorm 6 Configuration for TYPO3
PhpStorm 6 Configuration for TYPO3
 
Yes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-EntwicklerYes zu NoSQL mit MongoDB für .NET-Entwickler
Yes zu NoSQL mit MongoDB für .NET-Entwickler
 
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
Kommunikations-APIs von JavaScript (International PHP Conference/WebTechCon 2...
 
Powerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-FeaturesPowerful mostly unknown Javascript-Features
Powerful mostly unknown Javascript-Features
 
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerkTYPO3 CMS 7.2 - Die Neuerungen - pluswerk
TYPO3 CMS 7.2 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerkTYPO3 CMS 7.4 - Die Neuerungen - pluswerk
TYPO3 CMS 7.4 - Die Neuerungen - pluswerk
 
Dokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDBDokumentenorientiere Datenbanken am Beispiel CouchDB
Dokumentenorientiere Datenbanken am Beispiel CouchDB
 
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerkTYPO3 CMS 8.1 - Die Neuerungen - pluswerk
TYPO3 CMS 8.1 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7.3 - Die Neuerungen - pluswerk
TYPO3 CMS 7.3 - Die Neuerungen - pluswerkTYPO3 CMS 7.3 - Die Neuerungen - pluswerk
TYPO3 CMS 7.3 - Die Neuerungen - pluswerk
 
Ajax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google SuggestAjax hands on - Refactoring Google Suggest
Ajax hands on - Refactoring Google Suggest
 
Agiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific LanguagesAgiles Modellieren mit Domain Specific Languages
Agiles Modellieren mit Domain Specific Languages
 
Windows Powershell
Windows PowershellWindows Powershell
Windows Powershell
 
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerkTYPO3 CMS 7.6 - Die Neuerungen - pluswerk
TYPO3 CMS 7.6 - Die Neuerungen - pluswerk
 
Der oracle dba_und_seine_passwoerter
Der oracle dba_und_seine_passwoerterDer oracle dba_und_seine_passwoerter
Der oracle dba_und_seine_passwoerter
 
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerkTYPO3 CMS 8.4 - Die Neuerungen - pluswerk
TYPO3 CMS 8.4 - Die Neuerungen - pluswerk
 
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerkTYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
TYPO3 CMS 7 LTS - Die Neuerungen - pluswerk
 
Einsteiger Workshop
Einsteiger WorkshopEinsteiger Workshop
Einsteiger Workshop
 
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
OSMC 2008 | Programmierung von Nagios-Plugins für NetApp Speichergeräte by In...
 
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...
 
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerkTYPO3 CMS 8.0 - Die Neuerungen - pluswerk
TYPO3 CMS 8.0 - Die Neuerungen - pluswerk
 

Ähnlich wie Web 2.0 Mit Der Yahoo User Interface Library

Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
Patrick Lauke
 
node.js
node.jsnode.js
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
openForce Information Technology GesmbH
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
Markus Leutwyler
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
Blogwerk AG
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
grosser
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
guest9606ac
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
Martin Leyrer
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Martin Leyrer
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
die.agilen GmbH
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
dominion
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
Ulrich Krause
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
Sebastian Springer
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
Ulrich Krause
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
Thomas Siegers
 
Abläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisierenAbläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisieren
Christian Münch
 
Schulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-BibliothekSchulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-Bibliothek
tutego
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
Georg Schmidl
 
Joomla
JoomlaJoomla

Ähnlich wie Web 2.0 Mit Der Yahoo User Interface Library (20)

Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010Die Zukunft der Webstandards - Webinale 31.05.2010
Die Zukunft der Webstandards - Webinale 31.05.2010
 
node.js
node.jsnode.js
node.js
 
jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?jQuery & CouchDB - Die zukünftige Webentwicklung?
jQuery & CouchDB - Die zukünftige Webentwicklung?
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
Einführung in die webOS Programmierung
Einführung in die webOS ProgrammierungEinführung in die webOS Programmierung
Einführung in die webOS Programmierung
 
Entwickeln mit Wordpress
Entwickeln mit WordpressEntwickeln mit Wordpress
Entwickeln mit Wordpress
 
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
Webtechnologien fuer das Frontend und Flash( Flex ) Vs Js( Ajax )
 
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
Webtechnologien für das Frontend & Javascribt( AJAX ) vs Flash( Flex )
 
Effiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 AnwendungenEffiziente Fehlersuche in Web 2.0 Anwendungen
Effiziente Fehlersuche in Web 2.0 Anwendungen
 
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz EditionEffiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
Effiziente Fehlersuche In Web 2.0 Anwendungen - Graz Edition
 
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerkTYPO3 CMS 7.0 - Die Neuerungen - pluswerk
TYPO3 CMS 7.0 - Die Neuerungen - pluswerk
 
Dojo Und Notes
Dojo Und NotesDojo Und Notes
Dojo Und Notes
 
Dnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyondDnug35 ak-dev.071111-beyond
Dnug35 ak-dev.071111-beyond
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 
Templates, Code & Tools
Templates, Code & ToolsTemplates, Code & Tools
Templates, Code & Tools
 
Webanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und AdministrationWebanwendungen - Installation, Konfiguration und Administration
Webanwendungen - Installation, Konfiguration und Administration
 
Abläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisierenAbläufe mit PHP und Phing automatisieren
Abläufe mit PHP und Phing automatisieren
 
Schulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-BibliothekSchulung jQuery JavaScript-Bibliothek
Schulung jQuery JavaScript-Bibliothek
 
Atlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-InfrastrukturAtlassian Confluence als Software-Infrastruktur
Atlassian Confluence als Software-Infrastruktur
 
Joomla
JoomlaJoomla
Joomla
 

Mehr von Stephan Schmidt

Das Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesDas Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based Services
Stephan Schmidt
 
23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten
Stephan Schmidt
 
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten
Stephan Schmidt
 
Continuous Integration mit Jenkins
Continuous Integration mit JenkinsContinuous Integration mit Jenkins
Continuous Integration mit Jenkins
Stephan Schmidt
 
Die Kunst des Software Design - Java
Die Kunst des Software Design - JavaDie Kunst des Software Design - Java
Die Kunst des Software Design - Java
Stephan Schmidt
 
PHP mit Paul Bocuse
PHP mit Paul BocusePHP mit Paul Bocuse
PHP mit Paul Bocuse
Stephan Schmidt
 
Der Erfolgreiche Programmierer
Der Erfolgreiche ProgrammiererDer Erfolgreiche Programmierer
Der Erfolgreiche Programmierer
Stephan Schmidt
 
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.
Stephan Schmidt
 
Die Kunst Des Software Design
Die Kunst Des Software DesignDie Kunst Des Software Design
Die Kunst Des Software Design
Stephan Schmidt
 
Software-Entwicklung Im Team
Software-Entwicklung Im TeamSoftware-Entwicklung Im Team
Software-Entwicklung Im Team
Stephan Schmidt
 
JSON-RPC Proxy Generation with PHP 5
JSON-RPC Proxy Generation with PHP 5JSON-RPC Proxy Generation with PHP 5
JSON-RPC Proxy Generation with PHP 5
Stephan Schmidt
 
Declarative Development Using Annotations In PHP
Declarative Development Using Annotations In PHPDeclarative Development Using Annotations In PHP
Declarative Development Using Annotations In PHP
Stephan Schmidt
 
XML and Web Services with PHP5 and PEAR
XML and Web Services with PHP5 and PEARXML and Web Services with PHP5 and PEAR
XML and Web Services with PHP5 and PEAR
Stephan Schmidt
 
The Big Documentation Extravaganza
The Big Documentation ExtravaganzaThe Big Documentation Extravaganza
The Big Documentation Extravaganza
Stephan Schmidt
 
Go OO! - Real-life Design Patterns in PHP 5
Go OO! - Real-life Design Patterns in PHP 5Go OO! - Real-life Design Patterns in PHP 5
Go OO! - Real-life Design Patterns in PHP 5
Stephan Schmidt
 
Component and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHPComponent and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHP
Stephan Schmidt
 
Session Server - Maintaing State between several Servers
Session Server - Maintaing State between several ServersSession Server - Maintaing State between several Servers
Session Server - Maintaing State between several Servers
Stephan Schmidt
 
XML Transformations With PHP
XML Transformations With PHPXML Transformations With PHP
XML Transformations With PHP
Stephan Schmidt
 
PEAR For The Masses
PEAR For The MassesPEAR For The Masses
PEAR For The Masses
Stephan Schmidt
 
Inroduction to XSLT with PHP4
Inroduction to XSLT with PHP4Inroduction to XSLT with PHP4
Inroduction to XSLT with PHP4
Stephan Schmidt
 

Mehr von Stephan Schmidt (20)

Das Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based ServicesDas Web Wird Mobil - Geolocation und Location Based Services
Das Web Wird Mobil - Geolocation und Location Based Services
 
23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software Entwicklung in Teams wissen sollten
 
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten
 
Continuous Integration mit Jenkins
Continuous Integration mit JenkinsContinuous Integration mit Jenkins
Continuous Integration mit Jenkins
 
Die Kunst des Software Design - Java
Die Kunst des Software Design - JavaDie Kunst des Software Design - Java
Die Kunst des Software Design - Java
 
PHP mit Paul Bocuse
PHP mit Paul BocusePHP mit Paul Bocuse
PHP mit Paul Bocuse
 
Der Erfolgreiche Programmierer
Der Erfolgreiche ProgrammiererDer Erfolgreiche Programmierer
Der Erfolgreiche Programmierer
 
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.
23 Dinge, die Sie über Software-Entwicklung in Teams wissen sollten.
 
Die Kunst Des Software Design
Die Kunst Des Software DesignDie Kunst Des Software Design
Die Kunst Des Software Design
 
Software-Entwicklung Im Team
Software-Entwicklung Im TeamSoftware-Entwicklung Im Team
Software-Entwicklung Im Team
 
JSON-RPC Proxy Generation with PHP 5
JSON-RPC Proxy Generation with PHP 5JSON-RPC Proxy Generation with PHP 5
JSON-RPC Proxy Generation with PHP 5
 
Declarative Development Using Annotations In PHP
Declarative Development Using Annotations In PHPDeclarative Development Using Annotations In PHP
Declarative Development Using Annotations In PHP
 
XML and Web Services with PHP5 and PEAR
XML and Web Services with PHP5 and PEARXML and Web Services with PHP5 and PEAR
XML and Web Services with PHP5 and PEAR
 
The Big Documentation Extravaganza
The Big Documentation ExtravaganzaThe Big Documentation Extravaganza
The Big Documentation Extravaganza
 
Go OO! - Real-life Design Patterns in PHP 5
Go OO! - Real-life Design Patterns in PHP 5Go OO! - Real-life Design Patterns in PHP 5
Go OO! - Real-life Design Patterns in PHP 5
 
Component and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHPComponent and Event-Driven Architectures in PHP
Component and Event-Driven Architectures in PHP
 
Session Server - Maintaing State between several Servers
Session Server - Maintaing State between several ServersSession Server - Maintaing State between several Servers
Session Server - Maintaing State between several Servers
 
XML Transformations With PHP
XML Transformations With PHPXML Transformations With PHP
XML Transformations With PHP
 
PEAR For The Masses
PEAR For The MassesPEAR For The Masses
PEAR For The Masses
 
Inroduction to XSLT with PHP4
Inroduction to XSLT with PHP4Inroduction to XSLT with PHP4
Inroduction to XSLT with PHP4
 

Web 2.0 Mit Der Yahoo User Interface Library

  • 1. Web 2.0 mit der YAHOO! User Interface Library Stephan Schmidt, 1&1 Internet AG
  • 2. Agenda Vorstellung Komponenten und Installation YUI CSS YUI Utilities YUI und AJAX YUI Widgets Erweiterungen zur YUI
  • 3. Wer bin ich? Teamleiter Web-Development bei der 1&1 Internet AG Autor verschiedener Bücher und Fachartikel Redner auf internationalen Konferenzen Seit 2000 aktiv in der Open Source Szene http://www.schst.net
  • 4. Komponenten der YUI Aufgeteilt in drei Gruppen CSS Resourcen Utilities Widgets / Komponenten Ergänzt durch die Design Pattern Library
  • 5. YUI Design Patterns Lösungen für Design Probleme Keine Patterns im Sinne der Gang of Four, sondern Lösungen für Usability und Visualisierung Anleitungen zum Einsatz der Komponenten
  • 6. YUI Design Patterns Beispiele Navigation z.B. Breadcrumb, Tabs, Menüs, … Daten durchblättern z.B. Autocomplete, Kalender, Pagination, … Aufforderung zum Klick Hover-Effekte, Tooltips, …
  • 7. YUI CSS Ressourcen Stellen generische CSS-Definitionen zur Verfügung Layout-unabhängig Cross-Browser-Unterstützung z.B. Mehrspaltige Layouts, Vereinheitlichung von Schriftgrößen
  • 8. YUI Utilities Low-Level Hilfsklassen Verbessern Sprachfeatures Verbessern DOM Cross-Browser-Unterstützung z.B. AJAX-Funktionen, Event-Verarbeitung, Animation-Utility,…
  • 9. YUI Widgets Stellen fertige User-Interface-Elemente zur Verfügung Bauen auf den Utilities auf z.B. Events, Animation, … Fertige Implementierungen der Design Patterns
  • 10. YUI Widgets (2) Bieten sehr große Flexibilität Konfigurierbar über Objekte Layout kann über CSS angepasst werden Nahezu alle üblichen Widgets Trees, Kalender, Tabs, Autocompletion, DataTable Neu: Ersatz für Standard HTML-Widgets
  • 11. Installation Download des ZIP-Archivs von http://developer.yahoo.com/yui/ Entpacken fertig!
  • 12. Inhalt der Distribution /docs Komplette API-Dokumentation Durchsuchbar per Javascript /examples Alle Beispiele, die auch online verfügbar sind /build Javascript Sourcen
  • 13. Einbinden der Klassen Sourcen im build -Ordner sind nach Paketen aufgeteilt z.B. event, animation, autocomplete Jede Datei ist in drei Versionen verfügbar yahoo.js (normale Entwicklung) yahoo-min.js (Produktivsystem) yahoo-debug.js (Debugging mit Logger)
  • 14. Alternative Installation Verwendung des YAHOO-Hosting Einbinden aller *.js und *.css Dateien von YAHOO-Servern Ab Version 2.2.0 verfügbar http://yui.yahooapis.com/2.2.2/build/*
  • 15. Vorteile Dateien blockieren keine Downloads vom eigenen Server (2 Files pro Domain parallel) Werden von einem Server aus der Nähe des Clients angeboten automatische GZIP-Kompression, falls der Client dies unterstützt
  • 16. Nachteile Jeder Request wird in den Webserver-Logs protokolliert Aber nicht ausgewertet Debug-Versionen sind online nicht verfügbar
  • 17. Browser-Unterstützung Keine Browser komplett ausschließen Graded Browser Support A-Grade (Aktuelle Standards, 96%) z.B. Firefox 1.5+, IE 6.0+ C-Grade (reines HTML, 3%) z.B. Lynx, Netscape 4 X-Grade (unbekannt, 1%) z.B. Neue Versionen von IE/Firefox
  • 18. A-Grade Browser Werden komplett von YUI unterstützt Werden ausgiebig getestet Definiert über eine Whitelist http://developer.yahoo.com/yui/articles/gbs/
  • 19. C-Grade-Browser Definiert über Blacklist Kein Support von YAHOO Einsatz von HIJAX http://domscripting.com/blog/display/41 Einsatz von Unobstrusive JavaScript http://www.onlinetools.org/articles/unobtrusivejavascript/
  • 20. X-Grade-Browser Alle, die nicht auf Whitelist oder Blacklist stehen Werden nicht offiziell unterstützt Trotzdem oft fähig, Komponenten darzustellen
  • 21. CSS Ressourcen Nur für A-Grade-Browser Kein CSS für Lynx oder Netscape reset.css fonts.css grids.css reset-fonts-grids.css
  • 22. reset.css (587 Bytes) Setzt Margin, Padding, Border und Fontgrößen in allen Browsern zurück Layout wird damit zur reinen CSS-Angelegenheit Unbedingt immer einbinden
  • 23. fonts.css (416 Bytes) Vereinheitlicht Fontgröße und Zeilenhöhe über Browser und Betriebssysteme Setzt Arial als Standardfont und passende Ersatzschriften für alle Betriebssysteme Angabe der Fontgröße nur noch in Prozentwerten Tabelle für Zuordnung Prozent zu Pixel: http://developer.yahoo.com/yui/fonts/#chart
  • 24. grids.css (2.526 Bytes) Ermöglicht mehrspaltige Layouts ohne Tabellen Bietet schachtelbare Templates, um nahezu unbegrenzt viele Varianten zu implementieren Ermöglicht es, wichtigen Content unabhängig von der Position im Layout an den Anfang des Dokuments zu stellen
  • 25. YUI Utilities Erweiterung der JS-Sprachfeatures Erweiterung der DOM-Features Vereinheitlichung von Event-Handling Animationseffekte Vereinheitlichung von AJAX
  • 26. Das YAHOO Objekt Alle Klassen sind innerhalb des YAHOO-Namespaces Verhindert Namenskonflikte Können abgekürzt werden var calClass = YAHOO.widget.Calendar; var myCal = new calClass(…);
  • 27. Eigene Namespaces YAHOO.namespace(&quot;ipc.examples&quot;); YAHOO.ipc.examples.foo = &quot;foo&quot;; alert(YAHOO.ipc.examples.foo);
  • 28. Vererbung YAHOO.ipc.Car = function(name) { alert(&quot;Konstruktor von Car:&quot; + name); } YAHOO.ipc.Convertible = function(name) { alert(&quot;Konstruktor von Convertible:&quot; + name); YAHOO.ipc.Convertible.superclass.constructor.call( this, name); } YAHOO.lang.extend(YAHOO.ipc.Convertible, YAHOO.ipc.Car); var bmw = new YAHOO.ipc.Convertible(&quot;BMW&quot;);
  • 29. Weitere Features YAHOO.lang.augment() kopiert Properties YAHOO.log() Environment zum Überprüfen, welche Komponenten geladen wurden
  • 30. DOM-Features var pos = YAHOO.util.Dom.getXY('target'); YAHOO.util.Dom.setXY('abs', pos); Vereinfacht Positionierung YAHOO.util.Dom.setStyle('abs', 'opacity', 0.5); YAHOO.util.Dom.getStyle('abs', 'opacity'); Vereinfacht Arbeit mit Styles
  • 31. Arbeit mit CSS-Klassen getElementsByClassName() hasClass() addClass() removeClass() replaceClass()
  • 32. Weitere DOM-Features Arbeit mit Regionen (überlappt Element A Element B) Batch-Processing auf Elementen Elemente über Callback-Methode aus dem Document holen Document/Viewport-Größen ermitteln
  • 33. Batch-Processing function process() { var els = YAHOO.util.Dom.getElementsByClassName( 'active'); YAHOO.util.Dom.batch(els, hide); } // Callback Funktion function hide(el) { YAHOO.util.Dom.setStyle(el, 'visibility', 'hidden'); }
  • 34. Event-Handling Vereinfachung bestehender Funktionalität var oElement = document.getElementById(&quot;elementid&quot;); function fnCallback(e) { alert(&quot;click&quot;); } // Listener anhängen YAHOO.util.Event.addListener(oElement, &quot;click&quot;, fnCallback);
  • 35. Event-Handling Statt Element: Array von Elementen HTML-Id Array von HTML-Ids Id kann verwendet werden, wenn das Element noch nicht geladen wurde
  • 36. Event-Handling Cross-Browser Scope-Correction Beliebige Objekte als Parameter neue Events onAvailable onContentReady
  • 37. Custom Events Erstellen eigener Events Ermöglichen Hooks in Anwendungen Wird in YAHOO Widgets genutzt z.B. bei Auswahl eines Datums im Kalender z.B. beim Ende einer Animation
  • 38. Animationen Ermöglicht das Verändern von CSS-Attributen über eine definierte Zeit Unterstützt Easing für weiche Animationen Hooks über Events Nicht so mächtig wie script.aculo.us
  • 39. Animationen var attributes = { width: {to: 100}, height: {to: 100}, fontSize: {from: 100, to: 50, unit: '%'}, opacity: { to: 0.5 } }; var anim = new YAHOO.util.Anim('demo',attributes, 0.5, YAHOO.util.Easing.backOut); anim.animate();
  • 40. AJAX-Features Vereinfachte API für XmlHttpRequest Bislang nur asynchron Unterstützt GET, POST und Fileuploads Timeouts pro Request Kann zusätzliche Argumente an den Callback übergeben
  • 41. AJAX-Beispiel var callback = { success : function(o) { alert(o.responseText); }, failure : function(o) { alert(&quot;Request fehlgeschlagen&quot;); alert(o.statusText); } }; YAHOO.util.Connect.asyncRequest('GET', url, callback);
  • 42. AJAX-Anwendungen YAHOO.ext UpdateManager regelmäßiges Abschicken von AJAX-Requests um Teile der Seite zu aktualisieren JSON-RPC-Services in Stubbles Generiert JavaScript-Proxies für PHP-Klassen auf Basis von YUI
  • 43. Weitere Utilities Drag&Drop Element (Wrapper um DOM) DataSource Browser History Manager
  • 44. Widgets und Controls Autocomplete Menu Calendar Container-Elemente …
  • 45. Autocomplete Ergänzt Standard <input/> Felder um Autocompletion Beliebige Datenquellen Sehr viele Konfigurationsoptionen HIJAX-Ansatz
  • 46. Autocomplete HTML <div> <input type=&quot;text&quot; id=&quot;hero&quot;/> ist mein Held. <div id=&quot;herocontainer&quot;></div> </div> #herocontainer {position:absolute;top:1.7em;width:150px;} #herocontainer .yui-ac-content {position:absolute;width:100%;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;} #herocontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;} #herocontainer ul {padding:5px 0;width:100%;} #herocontainer li {padding:0 5px;cursor:default;white-space:nowrap;} #herocontainer li.yui-ac-highlight {background:#ff0;}
  • 47. AutoComplete Datasource var heroes = [ &quot;Batman&quot;, &quot;Blue Beetle&quot;, … , &quot;Superman&quot;, &quot;Supergirl&quot; ]; var source = new YAHOO.widget. DS_JSArray (heroes);
  • 48. AutoComplete Widget var complete = new YAHOO.widget.AutoComplete( 'hero' , 'herocontainer' , source ); complete.queryDelay = 0; complete.useShadow = true; complete.minQueryLength = 0;
  • 49. Weitere Features Kombination mit Animation möglich Auswahl eines Wertes forcieren Type-Ahead Feature Mehr als ein Element auswählen Layout selbst rendern
  • 50. Datenquellen JavaScript Array JavaScript Callback-Funktion XmlHttpRequest über ConnectionManager JSON-Rückgabe XML Rückgabe CSV Rückgabe
  • 51. Menu Eine API für verschiedene Menüs Top-Level Menü Context-Menü Windows-Startmenü Erzeugung über reines HTML reines JavaScript
  • 52. Menu aus Markup HTML-Struktur als Unordered List Drei Zeilen Javascript var menu = new YAHOO.widget.Menu(&quot;menudiv&quot;); menu.render(); menu.show();
  • 54. Datumsauswahl mit Calendar DIV &quot;container&quot; muss erstellt werden CSS wird mitgeliefert var cal = new YAHOO.widget.Calendar(&quot;cal&quot;, &quot;container&quot;); cal.render();
  • 55. Konfigurationsoptionen Datumsgrenzen Angezeigter Monat Locales Mehr als ein Datum wählbar Layoutoptionen
  • 56. Auf Auswahl reagieren Zugriff über getSelectedDates() Interaktion über Custom-Events Datum ausgewählt Datum abgewählt Seite gewechselt cal.selectEvent.subscribe(function(o) {…});
  • 57. Container Elemente Verschiedene Widgets, die beliebigen HTML-Content beinhalten Tooltip Panel Dialog SimpleDialog Erstellung durch Markup und JS
  • 59. Basis-Markup <div id=&quot;myPanel&quot;> <div class=&quot;hd&quot;></div> <div class=&quot;bd&quot;></div> <div class=&quot;ft&quot;></div> </div> var myPanel = new YAHOO.widget.Panel(&quot;myPanel&quot;); myPanel.setHeader(&quot;Titelzeile&quot;); 
  • 61. Weitere Widgets TreeView (z.B. Explorer-like) Tabs Schiebregler, Farbauswahl DataTable (beta) Button (Ersatz für HTML-Input-Tag)
  • 62. Vorteile der YUI Sehr viele Low-Level-Klassen Sehr viele fertige Widgets Klar strukturiert & modular Einfache APIs Sehr gute Dokumentation Fördert HIJAX
  • 63. Erweiterungen YAHOO.ext von Jack Slocum YAHOO.TOOLS von Dav Glass ConnectionManager Bookmarklet (obsolet dank Firebug)
  • 64. YAHOO.ext Zusätzliche Utilities und Widgets DomHelper Verbesserte Animations-Features AJAX-Update-Manager Layout-Manager Grid Gleiche Qualität wie YUI Sehr aufwändige Beispiele
  • 65. Weitere Informationen YUI-Website http://developer.yahoo.com/yui YUI-Blog http://yuiblog.com/blog/ YAHOO ext http://www.jackslocum.com/
  • 66. Ende Vielen Dank für Ihre Aufmerksamkeit. Fragen? http://www.schst.net