Vor gut 1,5 Jahren habe ich selbst angefangen eine kleine Anwendung zu schreiben welche diesen ersten Schritt vereinfachen sollte, aber das Tool leider nie online gestellt. Dann kam Google selbst und hat einen Google Maps Wizzard veröffentlicht, mit dem an sich das Grundgerüst generieren lassen konnte. Seit ein paar Tagen allerdings hat Google das Einbetten einer ausgewählten Karte noch sehr viel vereinfacht. So ist es jetzt möglich mit zwei Schritten den Code für eine Karte erstellen zu lassen um ihn anschließend ganz ohne das bisher notwendige Erstellen eines Google Maps API Keys auf der eigenen Seite zu verwenden.

1. Schritt: Den gewünschten Ort/Punkt auf bei Google Maps heraussuchen und “URL zu dieser Seite” anklicken:

Diese URL kann dann auch gleich noch ein wenig verfeinert werden. Dazu einfach den Link “Eingebettete Karte anpassen und Vorschau anzeigen” anklicken. Es öffnet sich ein Popup mit Vorschau in dem man noch die Größe einstellen kann:

2. Schritt den erstellen Source Code in die eigene Seite einbetten. Die besonderheit hier ist, dass man für diesen Source Code keinen Google Maps Key mehr erstellen muss. Folgender Source Code wurde bei mir erstellt:

<iframe width="500" height="350" frameborder="no" scrolling="no"
  marginheight="0" marginwidth="0"
  src="http://maps.google.com/maps?f=q&hl=de&geocode=&q=mainz,+deutschland&...">
</iframe>
<br/>
<a href="http://maps.google.com/maps?f=q&hl=de&geocode=&q=mainz,+deutschland&..."
  style="color:#0000FF;text-align:left;font-size:small">
  Größere Kartenansicht
</a>

Und so sieht dann das eingebettete Ergebnis aus:

Allerdings sie noch erwähnt, dass man einiges mehr mit Google Maps und der dazugehörigen Google Maps API machen kann. Dazu reicht auch schon ein kleiner Blick in die Google Maps API Dokumentation.

Er beschreibt anschaulich wie man mit wenigen ein RSS Feed (in diesem Beispiel natürlich sein eigener) mit Yahoo! Pipes bearbeiten, Filtern und in einer anderen Sprache ausgeben lassen kann. Der Screenshot zeigt gerade das Bearbeiten eines Filters an.

Wem das lesen zu schwer fällt und es lieber vorgetragen bekommen möchte der kann sich eine andere Yahoo! Pipes Einführung auch bei DigitalUpgrade 2.0 als Video herunterladen und ansehen.

Das Thema Yahoo! Pipes wurde in der Geekshow 6 aufgenommen und mit folgendem Satz eingeleitet:

Wer schon immer mal ein Rohr verlegen wollte, kann das online sehr einfach tun. Mit Öffnet einen externen Link in einem neuen FensterYahoo Pipes.

Wie auch immer – jetzt steht der großen Entwicklung mit Yahoo! Pipes nichts mehr im Wege..

(via Yigg)

Wozu braucht man überhaupt einen mittigen Schriftzug? Gerade im “Ajax-Zeitalter”, wo die animierten Loading Bilder überall auftauchen möchte man doch ab und an auch den Text – “Loading..” mittig neben dem Bild haben und beide Elemente (Bild und Text) mittig im darum liegenden Block-Element. Aus diesem Grund wird oft das div Element verwendet um Bild und Text gemeinsam auszurichten. Oft läuft der erste Versuch dann folgendermaßen ab:

Loading…

<div style="vertical-align:middle;">
  <img src='http://www.webthreads.de/.../ajax-loader.gif'/> Loading...
</div>

Diese Herangehensweise funktioniert nicht, weil vertical-align nur auf die Höhe einer Zeile reagiert und nicht auf die Höhe eines umliegenden Block Elements.

Aber was tun? Selbst habe ich auch oft genug danach gegoogelt, mir Lösungen angeschaut und Erläuterungen entgegengenommen die mir sagen, dass es nur mit einer Tabelle funktioniert. Heißt es also wenn ich einen Text mittig neben einem Bild ausrichten möchte muss ich eine Tabelle nehmen? Das würde dann wie folgt aussehen:

Loading…

<table style="height: 40px;">
  <tr>
    <td style="vertical-align: middle; width: 25px;">
      <img src="http://www.webthreads.de/.../ajax-loader.gif"/>
    </td>
    <td style="vertical-align: middle;">
      Loading…
    </td>
  </tr>
</table>

Sieht ja grundsätztlich im Ergebnis schonmal nicht schlecht aus. Die Frage ist ob man dafür immer eine Tabelle verwenden soll bzw. muss:

Wenn man darüber nachdenkt, dann kann man doch ein Block Element nehmen welches auf die Zeilenhöhe reagiert, wie z.b. das <p> Element. D.h. man erstellt ein solches Element, mit einer angegebenen festen Zeilenhöhe und sagt, dass es sich mittig ausrichten soll:

Loading…

<p style="vertical-align:middle;">
  <img src='http://www.webthreads.de/.../ajax-loader.gif'/> Loading...
</p>

Das kann natürlich nicht funktionieren weil sich die CSS Angabe vertical-align:middle auf den Text einer Zeile bezogen auf das Eltern Element auswirkt, welches wiederum ein Inline-Element sein muss. Dabei orientiert sich die Zeile an der größten Box die die Zeile enthält. Das heißt, hat man mehrere Inline-Elemente nebeneinander und sie orientieren sich mit der Basislinie an dem größten Element, dann erstellt man einfach zwei separate Inline-Elemente, setzt bei einem die Schriftgröße zum ausrichten und orientieren für die anderen Boxen. Siehe dazu auch in der W3C CSS Level 2 Beschreibung zu der Eigenschaft “vertical-align:middle” (deutsche Übersetzung).

Folgende Variante funktioniert somit um einen Text neben einer Grafik mittig auszurichten:

<p style="padding:0;margin:0;">
  <span style="vertical-align:middle; font-size:40px;">
    <img src='http://www.webthreads.de/.../ajax-loader.gif'/>
  </span>
  <span style="vertical-align:middle">Loading...</span>
</p>

Vor allem wichtig ist die Angabe font-size in einem Inline-Element denn diese erstellt die entsprechende Zeilenhöhe an der sich die weiteren Boxen (span Elemente) ausrichten. Am einfachsten ist es diese Angabe entweder in einer leeren Box anzugeben oder bei einer Box, wie hier bei dem Bild, bei der es nicht weiter stört. Zur weiteren Verschönerung kann man die default padding und margin CSS Eigenschaften des p Elementes noch außer Gefecht setzen.

Ob diese Lösung eine gute, eine einfache oder eine bessere Lösung als die Tabellen-Lösung ist, dass darf jeder selbst entscheiden. Falls einer eine weitere Möglichkeit für das mittige Ausrichten eines Textes neben einem Bild hat so darf er sie hier gerne kund tun – bin sehr gespannt darauf.

(Für das Erstellen des animierten Loading Bildes wurde ajaxload.info verwendet.)

1. Mastering Ajax, Part 1: Introduction to Ajax
   Einführung in Ajax unter der Verwendung von HTML, JavaScript, DHTML und DOM.
   
2. Mastering Ajax, Part 2: Make asynchronous requests with JavaScript and Ajax
   Erste Interaktion zum Server mit Hilfe von Ajax.
   
3. Mastering Ajax, Part 3: Advanced requests and responses in Ajax
   Es wird tiefer in den Ajax Request gegangen und die verschiedenen Status, Codes und das XMLHttpRequest Objekt erläutert.
   
4. Mastering Ajax, Part 4: Exploiting DOM for Web response
   Wichtig ist es sich mit dem Document Object Model (DOM) auszukennen und hier wird tiefer darauf eingegangen.
   
5. Mastering Ajax, Part 5: Manipulate the DOM
   Nachdem man das DOM nun kennengelernt hat soll man sehen wie man es verändern und mit ihm arbeiten kann.
   
6. Mastering Ajax, Part 6: Build DOM-based Web applications
   Es wird eine kleine Beispielanwendung erstellt in der man das DOM manipuliert.
   
7. Mastering Ajax, Part 7: Using XML in requests and responses Part 1
   Ajax mit XML verwenden – was passiert beim XMLHttpRequest und wie gelangt man an die Daten mit Hilfe von XML?
   
8. Mastering Ajax, Part 8: Using XML in requests and responses Part 2
   Die XML Antwort muss mit JavaScript verarbeitet werden.
   
9. Mastering Ajax, Part 9: Using the Google Ajax Search API
   Google Search bietet eine Ajax Schnittstelle (ich berichtete) und hier wird beschrieben wie man sie nutzen kann.

Ich persönlich finde die Artikel ganz nützlich und vor allem die ersten dienen sehr gut der Einführung. Was noch fehlt ist ein Artikel der die Verwendung der JavaScript Object Notation (JSON) beschreibt, aber das kann ja noch kommen.

Viel Spass beim durcharbeiten, lesen und ausprobieren.

In dem Tutorial “Styled Form Elements” wird gezeigt, wie man auch Radio Buttons und Checkboxes in ihrer Darstellung verbessern kann. Dabei beachtet er, dass Browser, die kein CSS oder JavaScript unterstützen die default Darstellung angezeigt bekommen, was diese Lösung noch viel interessanter macht. Dabei können folgende Konstellationen auftreten: kein JavaScript, kein CSS oder kein JavaScript und kein CSS – alle diese drei Fälle werden beachtet.

Dass er eine Lösung dafür gefunden hat und wie sie funktioniert zeigt das Live Beispiel auf der Tutorial Seite. Die Seite inklusive den Beispielen stehen auch direkt zum Download zu Verfügung.

Das erste Tutorial von java.net mit dem Titel “Kickstarting Google Web Toolkit on the Client Side” erläutert anhand von drei verschiedenen Beispielen mit wachsendem Schwierigkeitsgrad das GWT. Dabei beginnt es bei dem Grundsätzlichen Verständnis des GWT und dem Erstellen eines GWT Projektes bis hin zu einem komplexerem Beispiel bei der eine Animation abläuft wenn Maus Events gefeuert werden.

Das zweite Tutorial von IBM developerWorks mit dem Titel “Exploring the Google Web Toolkit” gefällt mir persönlich ein wenig besser weil es mehr Informationen rund um das GWT mitbringt und beschreibt. Das Tutorial startet auch von einem Einstiegslevel mit einem sehr einfach “Hello World” Beispiel. Als komplexere Beispiel Applikation wird eine Wetteransage Anwendung erstellt, die erst ganz einfach erstellt wird und im Laufe des Tutorials immer mehr erweitert wird.

Neben dem Erstellen der Anwendung und dem Debuggen mit Eclipse wird erläutert wie nativer JavaScript Code aufgerufen werden kann um zum Beispiel eine JavaScript Effekt Bibliothek aufzurufen oder warum eine serverseitige Validierung eingegebener Daten notwendig ist.

Und weil gerade die serverseitige Validierung angesprochen wurde hier gleich noch ein Hinweis darauf was passieren kann wenn diese nicht implementiert ist:

Viel Spass beim lesen und Video schauen =)

Gliederrung:

• Live Beispiel
• Benötigte YUI Library Komponenten
• Aufbau des HTML für die Akkordion Elemente
• Akkordion JavaScript
• Über alle gegebenen Akkordion Elemente iterieren
• Jedes Akkordion Element speichern und das aktive Element finden
• Jedem Element die Akkordion Animation als Click-Event registieren
• Ressourcen

Live Beispiel
Das fertige Akkordion Beispiel sieht am Ende wie folgt aus:

• YUI Library base (yahoo.js)
• Event (event.js)
• Dom (dom.js)
• Animation (animation.js)

Die YUI Library kann bei SourceForge heruntergeladen werden. Anschließend die entsprechenden Komponenten aus dem build Verzeichnis in ein geeignetes Unterverzeichnis kopieren (hier wird das Verzeichnis js verwendet) und in die HTML Seite einbinden:

<!-- Yahoo! User Interface Library -->
<script type="text/javascript" src="js/yahoo/yahoo.js"></script>
<script type="text/javascript" src="js/yahoo/event.js"></script>
<script type="text/javascript" src="js/yahoo/dom.js"></script>
<script type="text/javascript" src="js/yahoo/animation.js"></script>

Ein Akkordion hat immer eine Überschrift und den eigentlichen Inhalt. Im folgenden accordion header und accordion body gennant. Somit wird jeweils ein <div> Element für den accordion header und accordion body benötigt und auch gleich ein entsprechender CSS-Klassenname für das Design und zur späteren Identifikation definiert. Ein Accordion Element (also accordion header und accordion body) wird wiederum mit einem weiteren <div> Element gekapselt und auch wieder mit einem entsprechendem CSS-Klassenname versehen.

Ein vollständiges Accordion Element sieht nun wie folgt aus:

<div class="accordionItem">
  <div class="accordionHeader">accordion header</div>
  <div class="accordionBody">accordion body</div>
</div>

Eine letzte Kapselung wird bei einer Menge von accordion items erstellt um dem JavaScript Aufruf zu vereinfachen.
Der vollständige HTML Code für ein Accordion mit drei Elementen sieht wie folgt aus:

<div id="myAccordion" class="accordion">
  <div class="accordionItem">
    <div class="accordionHeader">accordion header 1</div>
    <div class="accordionBody" style="height:100px;">accordion body</div>
  </div>
  <div class="accordionItem">
    <div class="accordionHeader">accordion header 2</div>
    <div class="accordionBody" style="overflow:auto">accordion body</div>
  </div>
  <div class="accordionItem">
    <div class="accordionHeader">accordion header 3</div>
    <div class="accordionBody">accordion body</div>
  </div>
</div>

Durch die Angabe der Höhe des ersten accordion body mit style=”height:100px” wird die Höhe der Akkordion Elemente konfiguriert und gleichzeit das initial geöffnete Element definiert.

Die CSS Klassennamen sind für die jeweiligen Element schon definiert – nun fehlen nur noch die entsprechenden CSS Klassendefinitionen. Generell muss natürlich die Gesamtbreite des Akkordions angegeben werden sonst erscheint dieser über die gesamte verfügbar Breite der Seite. Aber auch der accordion header sowie der accordion body müssen mit Höhen ausgestattet werden, wobei zu beachten ist, dass bei dem accordion body nur das initial aktive Element eine Höhe direkt angegeben bekommt und per default alle anderen eine Höhe von 0 Pixel haben.

<style type="text/css" media="screen">
  .accordion {
    width: 300px;
    border: 1px solid #999999;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
    color: #000000;
  }

  .accordionHeader {
    height: 16px;
    background-color: #CFD8E4;
    border: 1px solid #999999;
    font-size: 14px;
    padding: 1px 0px 1px 3px;
    cursor: pointer;
  }

  .accordionBody {
    height: 0px;
    overflow: hidden;
    padding: 0px 2px;
    background-color: #EEEEEE;
  }
</style>

Per default ist der accordion body bei meinem Beispiel mit dem style overflow:hidden gesetzt. Das bedeutet, dass auch bei einer größeren Datenmenge für einen accordion body kein Scollbalken erscheint. Möchte man einen Scrollbalken haben so muss der style entweder nur für das entsprechende Akkordion Elemement oder generell in der CSS-Klasse auf overflow:auto gesetzt werden. In meinem Beispiel hat das zweite Akkordion Element einen Scrollbalken.
Es sei noch erwähnt, dass die CSS Definitionen zwecks des guten Stils natürlich in eine eigene CSS Datei ausgelagert werden sollten. In diesem Beispiel werden der Übersicht wegen die CSS Definitionen nicht ausgelagert um den HTML Code direkt mit den dazugehörigen CSS Angaben sehen zu können.

Das JavaScript für die Akkordion Effekt kann in drei Teile aufgeteilt werden.

• Über alle gegebenen Akkordion Elemente iterieren
• Jedes Akkordion Element speichern und das aktive Element finden
• Jedem Element die Akkordion Animation als Click-Event registieren

Der JavaScript Code der nun erstellt wird sollte so allgemein wie nur möglich sein, damit er einfach wiederverwendet werden kann. Aus diesem Grund wurden bei dem Erstellen des HTMLs eindeutige Klassennamen verwendet, die zum einen den Zweck haben eine einheiltiche Gestaltung zu gewährleisten und zum anderen eine einfache Identifikation zu ermöglichen. Zudem wurde dem gesamten Akkordion eine eindeutige ID vergeben. Diese Id wird verwendet um ein Akkordion Objekt zu erstellen.

Wem die kompletten JavaScript Erläuterungen zu viel sind, der kann sich nur das folgende JavaScript Grundgerüst sowie die Erstellung ein solches Akkordion Objektes anschauen und gleich zu den Resourcen springen um entweder nur die accordion.js oder das gesamte Beispiel herunterzuladen. Generell reichen die bisherigen Erläuterungen und das accordion.js aus um ein Akkordion Effekt zu erstellen.

Es wird eine Accordion Funktion erstellt, die als Parameter die Id des Akkordion Rahmen <div> Elements erhält. Schöner Stil ist natürlich, wenn der JavaScript Code in eine separate Datei ausgelagert wird. In diesem Beispiel heisst diese Datei accordion.js. Das Grundgerüst für die Accordion Funktion sieht wie folgt aus:

function Accordion(id) {
  // Akkordion JavaScript Code
}

Um für den oben beschriebenen Akkordion HTML Code den Akkordion Effekt zu geben wird folgender Code genutzt:

<script type="text/javascript" src="js/accordion.js"></script>

<script type="text/javascript">
var  myAccordions;

  function init() {
    accordionWMCities = new Accordion("myAccordion");
  }
  YAHOO.util.Event.addListener(window, 'load', init);
</script>

Dabei wird die YUI Event Funktionalität genutzt um das Akkordion Objekt nach dem Erstellen des DOMs mit dem onLoadzu erzeugen.

Nachdem das Erstellen eines Akkordion Objektes geklärt ist werden nun als erstes anhand der übergebenen Akkordion Id die Akkordion Elemente geholt und lokal gespeichert.
In der YUI Library besteht seit der Version 0.10.0 die Möglichkeit Dom Elemente anhand ihres CSS-Klassennamens zu selektieren. Die Funktion ist in er Dom Komponente zu finden (siehe auch JSDoc der DOM-Funktion) und lautet:

Array YAHOO.util.Dom.getElementsByClassName( className,  tag,  root)

Es würde reichen wenn nur der CSS-Klassenname angegeben wird. Für eine Verbesserung der Performance sollte allerdings der Tag Name der Elemente nach denen gesucht wird (in unserem Fall ist das ein <div>) und ein Start Knoten angegeben werden.

function Accordion(id) {
  // Speicher das Element der übergebenen ID als Akkordion Container
  this.accContainer = document.getElementById(id);

  // Alle Elemente mit der CSS-Klasse 'accordionItem' holen
  this.accItems =
     YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer);

  // default Akkordion body Höhe definieren
  this.accItemBodyHeight = 0;

  // Über alle Akkordion Elemente iterieren und jedes einzelne in einem Array speichern
  for (var i=0; i<this.accItems.length; i++) {
    ...
  }
}

In der for Schleife wird nun über jedes Akkordion Element (CSS Klasse accordionItem) iteriert und jedes Element sowie deren accordion Header und accordion Body soll gespeichert werden. Gleichzeitig soll geprüft werden ob das aktuelle Element das aktive Element ist. Das aktive Element hat als einzigstes Element eine Höhe im accordion body definiert.

  for (var i=0; i<this.accItems.length; i++) {
    // Aktuelles Akkordion Element als Eltern-Element f?r dazugeh?rigen Header und 
    // Body speichern
    this.accItems[i].parent = this;
    // Akkordion Header und Body des aktuellen Akkordion Elements holen und speichern
    this.accItems[i].header =
      YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div",
        this.accItems[i])[0];
    this.accItems[i].body =
      YAHOO.util.Dom.getElementsByClassName("accordionBody", "div",
        this.accItems[i])[0];

    // Prüfen ob das aktuelle Akkordion Element das aktive Element ist (also eine 
    // größere Höhe f?r den accordion body gesetzt hat). Normalerweise sollte nur ein
    // Element eine Höhe größer 0 Pixel definiert haben. Wenn die Höhe größer der
    // Höhe des bisherigen aktiven Akkordion oder am Anfang 0 Pixel ist wird dieser 
    // als aktives Element gespeichert.
    if (this.accItems[i].body.offsetHeight > this.accItemBodyHeight) {
      this.accItemBodyHeight = this.accItems[i].body.offsetHeight;
      this.activeItem = this.accItems[i];
      this.activeItem.body.style.height = this.accItemBodyHeight + "px";
    }

    ...
  }

Als letztes muss nur noch die Animation für das Zusammenfahren des aktiven Elements und das Ausdehnen des selektierten Elements definiert werden. Dies wird mit Hilfe der Animation und Event Kompontente der YUI Library implementiert. Auf die Animation Komponente wird in diesem Tutorial nicht weiter eingegangen. Dieses Thema wird separat in einem weiteren Tutorial behandelt.

  for (var i=0; i<this.accItems.length; i++) {
    ...

    // Einen Click Event Listener für jeden accordion header registrieren
    YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){
      // Wenn auf das aktive Element geklickt wurde - nichts machen
      if(this.parent.activeItem == this){
          return;
      }

      // Für das aktive Element eine "Schrumpf" Animation definieren
      var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {
      height:{from:this.parent.accItemBodyHeight, to:0}}, 0.5);

      // Für das angeklickte Elment eine "Ausdehnen" Animation definieren
      var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {
      height:{from:0, to:this.parent.accItemBodyHeight}}, 0.5);

      // Selektiertes Element als aktives Element setzen
      expandNewActiveAccAnim.onStart.subscribe(function() {
        this.parent.activeItem = this;
      }, this, true);

      // Animation starten
      shrinkLastAccAnim.animate();
      expandNewActiveAccAnim.animate();
    }, this.accItems[i], true);

  }

Der gesamte JavaScript Code für den Accordion Effekt ist im folgenden Listing zu erkennen. Dieser ist ausführlich kommentiert und sieht auf den ersten Blick evtl. komplexer aus als er wirklich ist. Die Hälfte des Listings besteht aus Kommentaren. Das JavaScript für den Akkordion Effekt kann auch direkt als Datei heruntergeladen werden (siehe Ressourcen).

function Accordion(id) {
  // Speicher das Element der ?bergebenen ID als Akkordion Container
  this.accContainer = document.getElementById(id);

  // Alle Elemente mit der CSS-Klasse 'accordionItem' holen
  this.accItems =
    YAHOO.util.Dom.getElementsByClassName("accordionItem", "div", this.accContainer);

  // default Akkordion body H?he definieren
  this.accItemBodyHeight = 0;

  // ?ber alle Akkordion Elemente iterieren und jedes einzelne in einem Array speichern
  for (var i=0; i<this.accItems.length; i++) {
    // Aktuelles Akkordion Element als Eltern-Element f?r dazugeh?rigen Header und 
    // Body speichern
    this.accItems[i].parent = this;
    // Akkordion Header und Body des aktuellen Akkordion Elements holen und speichern
    this.accItems[i].header =
      YAHOO.util.Dom.getElementsByClassName("accordionHeader", "div",
        this.accItems[i])[0];
    this.accItems[i].body =
      YAHOO.util.Dom.getElementsByClassName("accordionBody", "div",
        this.accItems[i])[0];

    // Prüfen ob das aktuelle Akkordion Element das aktive Element ist (also eine 
    // größere Höhe f?r den accordion body gesetzt hat). Normalerweise sollte nur ein
    // Element eine Höhe größer 0 Pixel definiert haben. Wenn die Höhe größer der
    // Höhe des bisherigen aktiven Akkordion oder am Anfang 0 Pixel ist wird dieser 
    // als aktives Element gespeichert.
    if (this.accItems[i].body.offsetHeight > this.accItemBodyHeight) {
      this.accItemBodyHeight = this.accItems[i].body.offsetHeight;
      this.activeItem = this.accItems[i];
      this.activeItem.body.style.height = this.accItemBodyHeight + "px";
    }

    // Einen Click Event Listener f?r jeden accordion header registrieren
    YAHOO.util.Event.addListener(this.accItems[i].header, "click", function(){
      // Wenn auf das aktive Element geklickt wurde - nichts machen
      if(this.parent.activeItem == this){
        return;
      }

      // F?r das aktive Element eine "Schrumpf" Animation definieren
      var shrinkLastAccAnim = new YAHOO.util.Anim(this.parent.activeItem.body, {
        height:{from:this.parent.accItemBodyHeight, to:0}}, 0.5);

      // F?r das angeklickte Elment eine "Ausdehnen" Animation definieren
      var expandNewActiveAccAnim = new YAHOO.util.Anim(this.body, {
        height:{from:0, to:this.parent.accItemBodyHeight}}, 0.5);

      // Selektiertes Element als aktives Element setzen
      expandNewActiveAccAnim.onStart.subscribe(function() {
        this.parent.activeItem = this;
      }, this, true);

      // Animation starten
      shrinkLastAccAnim.animate();
      expandNewActiveAccAnim.animate();
    }, this.accItems[i], true);
  }

  // Letzte Prüfung, falls mehrere Elemente eine Höhe angegeben haben. Es wird 
  // nur das aktive Element offen gelassen. Alle anderen Akkordion Elemente 
  // erhalten die Höhe 0 Pixel.
  for(var i=0; i<this.accItems.length; i++){
    if(this.activeItem != this.accItems[i]){
      this.accItems[i].body.style.height = 0 + "px";
    }
  }
};

Das hier beschriebene Beispiel kann noch einmal separat auf einer eigenen HTML Seite angesehen werden: Link
Zudem kann das gesamte Beispiel komplett zum entpacken heruntergeladen werden: AkkordionBeispiel.zip
Oder auch nur der Akkordion JavaScript: accordion.js

Viel Spass beim Ausprobieren.

Eine schöne Einführung in JavaScript und alle dazugehörigen Komponenten kann bei Simon Willison gefunden werden. Er hat auf der ETech Konferenz einen dreistündigen Vortrag über JavaScript gegeben und anschließend seine Folien veröffentlich hat.

Die Slides sind in drei verschiedenen Varianten verfügbar. Zum einen als einzelne HTML Seiten die auch mit einer höheren Auflösung bei flickr vorliegen. In der dritten Variante liegen alle Slides auf eine Seite zusammengestellt vor und haben ein wenig mehr beschreibenden Text – somit gut zum drucken geeignet und lesen.

Die Slides sind sehr lesenswert und als JavaScript Einführung gut geeignet – vielen Dank an Jörg Zintel für diese Information. =)

Aber webthreads.de wäre kein Blog rund um die Entwicklung von Web Anwendungen wenn die einzelnen Komponenten nicht in Tutorials erläutert werden würden. So kommen in den nächsten Wochen einige Tutorials rund um das webthreads WM 2006 Info Mashup. Darunter folgende Themen:

• Erstellen einen Akkordion Effekts mit der YUI Library
• Erstellen eines Animations Effekts (Auf- und Zuklappen) mit der YUI Library
• Implementierung eines RSS Readers mit Hilfe von DWR und Java
• Erstellen und Einbinden einer Google Map mit Daten aus einem XML File

Nachdem nun die News, die übrigends von der offiziellen FIFA WM Homepage geliefert werden, vorhanden sind, darf man fragen was dem richtigen Fussballfan nun noch fehlt? – Und tatsächlich fehlt noch ein Live Ticker, der die Spielstände direkt in den Browser bringt. Zum Glück gibt es Firefox und dessen Plugin API. So besteht mit der Firefox Erweiterung “FootieFox” die Möglichkeit einen WM Liveticker in seinen Firefox eingebettet zu bekommen. FootieFox ist somit für jeden WM Begeisterten Pflicht =). (FootieFox via live.hackr)

Somit kann die WM 2006 nun richtig durchstarten.

Obwohl auf der offiziellen GWT Homepage eine “Getting Started” Seite sowie Beispiele mit Source Code vorhanden sind ist das GWT erst einmal gewöhnungsbedürftig. So ist es nur zu begrüßen, dass auf der ONJava Homepage eine ausführliche Einführung in das GWT gestern veröffentlicht wurde. In der Einführung wird eine Tabelle (Tabellen Klasse) implementiert, welche bei der selektierten Zeile die CSS Klasse ändert und die Daten für die Tabelle dynamisch mit Ajax geladen werden. Es wird auch kurz das History Objekt angesprochen mit dem es möglich ist mit dem Back Button des Browsers umzugehen.

Im gesamten ist das eine sehr schöne Einführung in das GWT und zeigt in einzelnen Schritten auf wie das grundsätzliche Vorgehen bei einer Entwicklung ist. Der Source Code für das Beispiel kann in den Resourcen runtergeladen werden (Direktlink). Um das Beispiel lokal bei sich zum laufen zu bringen kann zum einen Maven verwendet werden, wie das auch der Autor in seinem Tutorial beschreibt. Ich habe aktuell kein Maven installiert und darum doch gleich mal die Eclipse Unterstützung des GWT ausprobiert.

Um das Beispiel in Eclipse zum laufen zu bringen einfach folgende Schritte ausführen:

1. Verzeichnis für das Eclipse Projekt erstellen.

2. GWT installieren und applicationCreator.cmd sowie projectCreator.cmd im Pfad verfügbar machen, so dass von überall zugegriffen werden kann (oder es muss der komplette Pfad zum GWT beim Aufruf der Befehle angegeben werden).

3. Kommandozeile in dem erstellten Verzeichnis öffnen und mit GWT ein Eclipse Projekt für das Tabellen Beispiel erstellen:
#projectCreator -eclipse Table

4. In der gleichen Kommandozeile das GWT Anwendungsgerüst erstellen:
#applicationCreator -eclipse Table com.totsp.gwt.client.Table

5. Source Code runterladen und entpacken.

6. Aus dem entpackten Verzeichnis den Source Code (Unterhalb des Verzeichnisses sample/src/java/) in das Eclipse Projekt Source Verzeichnis (src) kopieren. Dabei die vorhandenen Dateien überschreiben.

7. Eclipse starten und das Projekt importieren. Bei dem Import Fenster bis zu dem erstellten Ordner für das Eclipse Projekt navigieren und “OK” drücken. Das Eclipse Projekt wird als solches erkannt und kann importiert werden.

8. Sobald das Projekt importiert ist kann es wie eine normale Java Anwendung von Eclipse heraus gestartet werden (Menüpunkt “Run”->”Run…”->”Java Applikation – Table”). Genauso verhält es sich für das Debuggen – einfach aus Eclipse heraus im Debug Modus starten und beliebig Breakpoints setzen.

Das Beispiel ist eine einfache Möglichkeit GWT einaml aus Eclipse heraus zu starten oder auch zu debuggen ohne sich viel Gedanken über das Erstellen einer GWT Anwendung zu machen.
Jedenfalls ist das Tutorial für eine Einführung in das GWT sehr zu empfehlen!

• Mastering Ajax, Part1: Introduction to Ajax
• Mastering Ajax, Part2: Make asynchronous requests with JavaScript and Ajax
• Mastering Ajax, Part3: Advanced requests and responses in Ajaxy
• Mastering Ajax, Part4: Exploiting DOM for Web response

Ein weiterer interessanter Artikel developerWorks über Ajax aber mit serverseitigem Java ist “Ajax for Java developers: Build dynamic Java applications“.

In diesem kleinen Tutorial soll gezeigt werden wie man einem HTML Block-Element mit Hilfe der Yahoo! User Interface Library sehr einfach eine Drag und Drop Fähigkeit geben kann. Als zweites Beispiel soll ein Fenster mit Kopf und Content Bereich erstellt werden, dass sich nur durch den Fensterkopf bewegen lässt. Die drei implementierten Beispiele können auch direkt von der Übersichtsseite aus aufgerufen werden.

Gliederrung:

• Genrelles Vorgehen Yahoo! UI Library
• Yahoo! Drag und Drop Komponente
  1. Drag und Drop mit der Klasse DD (Beispiel 1)
  2. Drag und Drop mit der Klasse DDProxy (Beispiel 2)
  3. Eigene Drag und Drop Klasse schreiben – Drag und Drop Fenster (Beispiel 3)
• Fazit

Generelles Vorgehen mit der Yahoo! User Interface Library

Yahoo! liefert in seinem Download neben den Javascript Dateien viele Beispiele aus denen hervorgeht wie die UI Library zu nutzen ist. Daher wird an dieser Stelle nicht auf jedes Detail eingegangen sondern nur das notwendigste erläutert. Zudem liefert Yahoo! zu der UI LIbrary eine JSDoc Dokumentation mit, in der alle Methoden noch einmal dokumentiert sind.

Generell muss immer die YAHOO.js an erster Stelle inkludiert werden um den globalen Namespace für die YAHOO! UI Library bekannt zu machen. Ist diese nicht nicht an erster Stelle oder überhaupt nicht inkludiert werden die Klassen von Yahoo! nicht gefunden. An dieser Stelle sei kurz erwähnt, dass die Yahoo! UI Library Namespaces unterstützt und man somit Namen für Klassen oder Funktionen unter verschiedenen Namespaces mehrfach verwenden kann.

Als weitere Grundelemente müssen die Yahoo! Javascript Dateien für das Event Handling und für die Dom Manupulationen inkludiert werden. Es wird in diesem Artikel nur kurz auf das Event Handling aber nicht weiter auf die Funktionalität und Möglichkeiten für die DOM Manipulation eingegangen.

<script type="text/javascript" src="js/yahoo/YAHOO.js"></script>
<script type="text/javascript" src="js/yahoo/event.js"></script>
<script type="text/javascript" src="js/yahoo/dom.js"></script>

Yahoo! Drag and Drop Komponente

Um die Drag und Drop Komponente zu nutzen muss die Javascript Datei dragdrop.js inkludiert werden:

<script type="text/javascript" src="js/yahoo/dragdrop.js">

Diese Javascript Datei definiert die verschiedenen Drag und Drop Klassen. Unter anderem die Oberklasse DragDrop und die konkreten Implementierungen DD sowie deren Unterklasse DDProxy, welche hier genauer angesehen werden.

Einfaches Drag und Drop mit der Klasse DD

Die Klasse DD stellt die grundsätzliche Drag und Drop Funktionalität zur Verfügung. Wenn man eine Instanz der Klasse erstellt übergibt man die Id eines HTML Block-Elements. Dieses verlinkte HTML Block-Element folgt dem Mauszeiger während einer Drag-Aktion. Als Beispiel wurde ein <div> Element erstellt welches 100×100 Pixel groß ist. Dieses HTML Element wird mit einer Id versehen, welches einer Instanz der Klasse DD bei dem Erstellen übergeben wird:

<div id="dragDropDiv" class="dragDiv">
  My drag and drop div.
</div>

Bei einigen Versuchen hat sich gezeigt, dass als Stylesheet zwingend position gesetzt werden muss. Dabei ist es vorerst egal ob mit dem Wert relative oder absolute. Wenn dies nicht gesetzt ist wird sich das Block-Element bei einer Drag-Aktion nicht bewegen. Daher ist im folgenden auch noch das Listing der Stylesheet Klasse:

<style type="text/css">
  .dragDiv {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #63FBDC;
    cursor: move;
  }
</style>

Der dazugehörige Javascript Code um ein Drag und Drop (DD) Objekt zu erstellen ist der folgende:

<script type="text/javascript" language="Javascript">
  var dragElement = new YAHOO.util.DD("dragDropDiv");
</script>

Generell wäre das schon ausreichend um das HTML div Element mit der Id dragDropDiv die Drag und Drop Funktionalität zu geben. Aber wichtig zu beachten ist, dass das HTML Block-Element erst nach dem gesamten Laden der Seite im DOM zur Verfügung steht. So wird allein mit diesem Javascript Code leider noch nichts funktionieren. Es gibt für dieses Problem zwei Lösungen. Die eine ist, den Javascript Code an das untere Ende, nachdem das Div Element definiert wurde, zu verlagern und auszuführen. Das würde funktionieren ist aber meiner Meinung nach nicht die eleganteste Lösung. Eine schönere Lösung ist, das Erstellen des Drag und Drop Objektes in eine init Methode auszulagern und diese Methode nach dem Laden der HTML Seite mit der <body onload=”"> Parameter aufzurufen.
An dieser Stelle bietet es sich an, ein weiteres Feature der Yahoo! UI Library, nämlich das Event Handling, zu nutzen. Mit UI Library ist es möglich zu definieren welche Methode bei welchen Event aufgerufen werden soll.
In diesem Beispiel wird die init() Methode bei dem Event load aufgerufen:

<script type="text/javascript" language="Javascript">
  // global variables
  var dragElement;

  /**
   * Initialize all needed objects here.
   */
  function init() {
    dragElement = new YAHOO.util.DD("dragDropDiv");
  }

  /**
   * Add an listener for onload() method of this window.YAHOO
   * When this method will be called our method init will be invoked.
   */
  YAHOO.util.Event.addListener(window, 'load', init);
</script>

Mit dem Erstellen dieses Javascript Codes ist auch schon das erste Ergebnis zu sehen: Beispiel 1.

Wenn man nun den ersten Abschnitt auf das wesentliche zusammenkürzt, so ist zu erkennen, dass man mit Hilfe der Yahoo! UI Library in 5 Zeilen eine Drag und Drop Funktionalität seiner HTML Seite hinzufügen kann.

Die Klasse DDProxy

Worin liegt nun der Unterschied zwischen der Klasse DD und DDProxy? Tatsächlich gibt es bis auf die Darstellung des Block-Elements während der Drag-Aktion
keinen Unterschied. Die zwei verbreitesten Darstellungsmöglichkeiten der Drag-Atkion sind durch die Klassen DD und DDProxy gegeben. Während die Klasse DD ein ganzes Objekt mit der Bewegung des Cursers mitnimmt und dies auch so visuell dargestellt wird, ist bei der Klasse DDProxy nur ein Rahmen des Elements zu sehen, während das original Element an seinem Ausgangspunkt stehen bleibt solange die Drag-Aktion durchgeführt wird.
Als implementiertes Beispiel kann die Erweiterung des ersten Beispiels eingesehen werden: Beispiel 2.

Eigene Drag und Drop Klassen erstellen

Oft reicht eine vorgegebene Funktionalität nicht aus oder diese soll nur ein wenig erweitert werden. In dem folgendem Beispiel soll ein Fenster mit Kopf und Content-Bereich erstellt werden. Das Fenster soll dabei nur über den Kopfbereich die Drag und Drop Funktionalität zugänglich machen. Des weiteren soll während der Drag-Aktion eine andere Styleclass verwendet werden.
Um das Verhalten oder Eigenschaften einer bestehenden Drag und Drop Klasse zu beeinflussen kann sie überschrieben werden. Tatsächlich ist es in Javascript möglich Objektorientiert zu arbeiten.
In diesem Beispiel wird eine neue Klasse ddParent erstellt, die von der Klasse DD erbt. Diese Klasse soll in dem Konstruktur die Id des Kopf-divs übergeben bekommen und dabei den parent-div als Drag und Drop Element an die Oberklasse weitergeben. Dabei soll aber nicht die gesamte parent-div Fläche als mögliche Drag-Aktion Initiator genutzt werden sondern lediglich die Kopfzeile. In dem folgenden Javascript Ausschnit ist die Vererbung sowie das Setzen der eben beschriebenen Konfiguration zu sehen:

function ddParent(id, sGroup, onDragStyleClass, onStopStyleClass) {

  if (id) {
    // get parent id (window block element) and store it
    this.parentId = document.getElementById(id).parentNode.id;
		
    // invoke init method from superclass with parent id to set parent as
    // drag and drop element
    this.init(this.parentId);
		
    // Set a child element of set element in init method which should be
    // used to initiate the drag operation. In this case the given id
    // vi constructor (window head element) should be initiat the drag operation.
    this.setHandleElId(id);
		
    // css style to use when items are not being hovered over.
    this.onDragClass = onDragStyleClass;

    // css style to use when hovered over
    this.onStopClass = onStopStyleClass;
    }
}

// extend from class DD
ddParent.prototype = new YAHOO.util.DD();

Besonders interessant an dem obigen Javascript Code ist der Aufruf der Methode this.setHandleElId(id);. Mit diesem Aufruf kann das Element gesetzt werden, dass benutzt werden soll um eine Drag-Aktion zu starten (Drag Handler). Konkret bedeutet das, dass erst auf den Event reagiert wird wenn der definierte Drag Hanlder selektiert wird. Mit diesem Aufruf ist in dem Beispiel gewährleistet, dass nur der Kopf für die Drag und Drop Aktion genutzt werden kann.

Anschließend sollen noch die übergebnen css Style Klassen bei dem Starten und dem Stoppen der Drag-Aktion gewechselt werden. Dazu werden die Methoden startDrag und endDrag überschrieben. Die Methode startDrag wird aufgerufen sobald eine Drag-Aktion startet und die Methode endDrag wenn die Drag-Aktion aufgehürt hat. In diesem Beispiel soll die CSS Style Klasse für das gesamte div gewechselt werden, daher kann die Methode this.getEl() aufgerufen werden. Wenn zum Beispiel nur das div für den Kopf des Fensters gewechselt werden soll, dann müsste das HTML-Element über die id des Kopf Elements (YAHOO.util.DDM.getElement(this.id)) geholt werden.

/**
   * Method will be called after drag and drop object is clicked.
   * Set given onDragClass as style class.
   */
  ddParent.prototype.startDrag = function(x, y) {
    var el = this.getEl();
    el.className = this.onDragClass;
  }

  /**
   * Method will be called when done dragging.
   * Set given onStopClass style class.
   */
  ddParent.prototype.endDrag = function(e) {
    var el = this.getEl();
    el.className = this.onStopClass;
  };

Die CSS Klassen werden auf der HTML Seite direkt definiert und werden beim instanziieren der ddParent Klasse im Konstruktur übergeben. Die für das div-Fenster definierten CSS Klassen sind die folgenden:

<style type="text/css">
  .winDiv {
    position: relative;
    width: 400px;
    height: 350px;
    background-color: #63FBDC;
  }
  .onDragWindow {
    position: relative;
    width: 400px;
    height: 350px;
    background-color: #2693F2;
  }
  .winDivHeader {
    height: 25px;
    padding: 4px 0px 0px 5px; /* oben rechts unten links */
    background-color: #888888;
    font-size: 12px;
    font-weight: bold;
    cursor: move;
  }
  .windDivContent {
    font-size:10px;
    padding-left:5px;
  }
</style>

Das Erstellen des Drag und Drop Objektes gestaltet sich wie schon bei dem zwei ersten Beispielen bis auf die erweiterten übergabeparameter für den Konstruktor:

<script type="text/javascript" language="Javascript">
  // global variables
  var dragElement;
		
  function init() {
    // Constructor parameter are: 
    // 'id', 'group', 'css style when dragging', 'css style when not dragged'
    dragElement = new ddParent("windowHeader", "", "onDragWindow", "winDiv");
  }

  YAHOO.util.Event.addListener(window, 'load', init);	
</script>

Das Beispiel dazu kann hier angesehen werden: Beispiel 3.

Fazit

Diese drei Beispiele zeigen wie einfach Drag und Drop in eine HTML Seite mit Hilfe der Yahoo! User Interface Library einzubinden ist. Zudem wurde gezeigt wie eine Klasse für eigene Zwecke abgeleitet und erweitert werden kann. In den von Yahoo mitgelieferten Beispielen kann man noch weitaus komplexere Beispiele finden. Auch im Zusammenspiel mit Animationen oder anderen Komponenten kann noch einiges erreicht werden. Da ist also noch viel Spielraum für Beispiele =).

Die drei implementierten Beispiele können auch direkt von der Übersichtsseite aus aufgerufen werden.