Kommentare

addProductToCart()
Wird ein Element der Klasse shop_item auf shop_cart platziert, wird die Callback-Funktion addProductToCart aufgerufen. So wurde es beim Erstellen des ersten Droppables vereinbart.

addProductToCart()

Wird ein Element der Klasse shop_item auf shop_cart platziert, wird die Callback-Funktion addProductToCart aufgerufen. So wurde es beim Erstellen des ersten Droppables vereinbart. Die Funktion erhält das Element als Argument, das abgelegt wurde (Listing 5).

Listing 5
function addProductToCart(element) {
  
  if ($("shop_cart_message").visible) Effect.Fade("shop_cart_message");
  
  var product_id = element.getAttribute("product");
  var productToCart = data.products.find( 
    function(product) {
      return product_id == product.id;
    }
  );
  itemIndex++;
  itemCount++;
  html_shop_cart.appendChild(createCartElement(productToCart));    
  
  //Element soll wieder ins Regal gestellt werden dürfen
  new Draggable("shop_cart_"+itemIndex,{revert:true});
  
  // Bestellmenge erhöhen
  data.products.each( 
    function(value, index) {
      if (value.id==product_id) {
        data.products[index].order++;
      }
    }
  );
    
  //Warenkorb-Menge anzeigen  
  html_shop_cart_count.innerHTML = itemCount;
  
  //Kassenzettel aktualisieren
  renderReceipt();
  
}

Zunächst wird, falls es noch nicht geschehen ist, die Bedienungsanleitung des Online-Shops ausgeblendet. Dabei kommt der Script.aculo.us-Effekt Fade zum Einsatz – doch dazu gleich mehr. Anschließend wird anhand des hausgemachten Attributs product ermittelt, welches Element von data.products gerade in den Warenkorb gelegt wurde. Der Iterator find, eine Prototype-Methode, durchläuft dazu alle Produkte des data-Objekts und gibt das data.products-Element zurück, das der Produkt-ID des eben in den Warenkorb gelegten Artikels entspricht. Anschließend wird ein völlig neues Element durch die Funktion createCart-Element für den Warenkorb erzeugt, das Regal-Draggable ist schließlich wieder an seinem Ursprungsplatz, so kann es mehrmals in den Korb gelegt werden. Neben der Erzeugung eines kleineren Abbildes des Produkts im Warenkorb wird in der Eigenschaft order des dazugehörigen data.products-Elements die Bestellmenge erhöht und die neue Gesamtanzahl von Artikeln im Warenkorb angezeigt. Nun muss nur noch der (vorläufige) Kassenzettel angepasst werden. Die Funktion renderReceipt() übernimmt das. Sie erzeugt eine Tabelle, in der die Menge, der Titel und der Gesamtpreis der Artikel, die sich im Warenkorb befinden, gelistet werden. Nachdem auch die Gesamtsumme aktualisiert wurde, soll der User auf die Veränderungen im Kassenzettel hingewiesen werden. Yellow Fade heißt hier das Zauberwort und es wird in yellow-FadeReceipt() ausgesprochen.

yellowFadeReceipt()

Diese Funktion stellt beispielhaft dar, wie visuelle Effekte mit Script.aculo.us realisiert werden. Es gibt fünf vorgefertigte Basis-Effekte (Core Effects) in Script.aculo.us und weitere fertige Effekte, die eine Kombination aus mehreren Basis-Effekten sind (Combination Effects). Ganz Hartgesottene können sogar eigene Effekte erstellen, sollten aber etwas in Mathematik bewandert sein. Die Funktion yellowFadeReceipt() nutzt den Core Effect Highlight. Allein durch die Erzeugung einer Instanz der Klasse Effect.Highlight, der Angabe der id des Elements, bei dem der Effekt wirken soll, und die Angabe von Optionen, die den Effekt spezifizieren, wird er gestartet und sichtbar:

function yellowFadeReceipt() {
  new Effect.Highlight(
    "shop_receipt", 
    {
      startcolor:'#EEEEEE', 
      endcolor:'#FFFF00',
      restorecolor: '#EEEEEE',
      duration: 1
    }
  )
}   

Der Highlight-Effekt verändert kontinuierlich die Hintergrundfarbe des betroffenen Elements. Dabei geht die Farbveränderung von startcolor über endcolor zu restorecolor. Die Option duration, die man übrigens bei allen Effekten angeben kann, setzt die Dauer des gesamten Effekts in Sekunden fest.

showShopLeft2()
Abb. 3: Wohin soll geliefert werden?

Ein weiteres Beispiel für die Verwendung von Script.aculo.us-Effekten ist die Funktion showShopLeft2. Diese wird aktiviert, wenn der Benutzer auf Jetzt bestellen klickt (Abb. 3). Im vorliegenden Fall lässt der Effekt BlindUp den Verkaufsbereich shop_left_1 nach oben hin verschwinden. BlindDown macht das genaue Gegenteil mit dem Adressbereich shop_left_2, der zum Startpunkt nicht sichtbar ist. Beide Effekte gehören zu den Combination Effects.

function showShopLeft2() {
  Effect.BlindUp('shop_left_1', { queue: 'end'});
  Effect.BlindDown('shop_left_2', { queue: 'end'});
  //Button zum Bestellen ausblenden
  $("shop_order_button").hide();
}

Hierbei kommt mit der Effect Queue eine zusätzliche Hilfe bei der Verwendung von mehreren Effekten zur Hilfe. Durch die Option queue: ’end’ kann bestimmt werden, dass der jeweilige Effekt erst dann ausgeführt wird, wenn alle anderen vorher gestarteten Effekte, die ebenfalls der Effect Queue angehören, vollständig durchlaufen sind. Ohne Effect Queue startet jeder Effekt sofort und läuft so möglicherweise parallel zu anderen ab.

showMessage()

Die Funktion showMessage() enthält ein weiteres Beispiel für Script.aculo.us-Effekte. Sie tritt in Aktion, wenn die Bestellung an den Server übermittelt wird. Schließlich muss der User wissen, was mit seiner Bestellung passiert, die ja nicht mehr per Formularversand und Seitenreload übermittelt und bestätigt wird. Die anzuzeigende Botschaft wird per Funktionsargument übergeben. Die Funktion showMessage() lässt alles, was auf dem Bildschirm ist, zunächst blitzartig verschwinden. Hierzu kommt die Methode hide() zum Einsatz, die ein weiteres Mal der Prototype-Bibliothek entstammt und den Umweg über style.display = none abkürzt. Anschließend wird shop_left_3 ganz behutsam eingeblendet. Dieser Effekt heißt Appear und gehört zu den Combination Effects.

function showMessage(message) {
  //Shop ausblenden
  $("shop_left_1").hide();
  $("shop_left_2").hide();
  $("shop_right").hide(); 
  //Hinweis einblenden
  $("shop_message").innerHTML = message;
  Effect.Appear('shop_left_3');
}

Hier werden die Standardeinstellungen von Appear genutzt, was die Angabe eines Optionsobjekts überflüssig macht.

sendOrder()

Die Funktion sendOrder() macht Gebrauch von dieser effektvollen Einblendung einer Botschaft in showMessage(). Hier wird die Bestellung aufbereitet, mit den Adressdaten versehen und per AJAX an den Server geschickt. Erneut ist es Zeit für Prototypes Ajax.Request. Die Daten werden dabei mit der POST-Methode verschickt (Listing 6).

Listing 6
--------------------------------------------------------------------
function sendOrder() {
  
  //Hinweismeldung einblenden
  showMessage("Ihre Bestellung wird übermittelt...");
  
  //Daten sammeln: Bestellte Produkte (als Objekt) und Adresse
  var order = new Object();
  order.items = collectReceiptData();
  order.name = $F("shop_address_name");
  order.city = $F("shop_address_city");
  order.street = $F("shop_address_street");
  
  //Bestelldaten als JSON an order.php schicken
  new Ajax.Request(
    'php/order.php',
    {
      method: 'post',
      postBody: 'order='+order.toJSONString(),
      onComplete: function(req) {
        showMessage(req.responseText);
      },
      onError: function() {
        showMessage("Es trat ein Fehler bei der Datenübertragung auf.");
      }
    }
  ); 
  
  // ... weil onsubmit behandelt wird:
  return false;
}

Nachdem der Einkäufer die freudige Botschaft der begonnenen Datenübertragung erhalten hat, werden die Bestell- und Adressdaten zu Eigenschaften des Objekts order. Für die Anschrift liest die Prototype-Hilfsfunktion

psenv::pushli();$env->object_param[0]=““; eval($_oclass[„F“]); psenv::popli(); ?>

den Inhalt des Eingabefeldes, dessen id als Argument übergeben wird. Dadurch gelangen Sie ganz leicht an den Wert des value-Attributs von input-Elementen. Das Objekt order wird durch die Funktion toJSONString() in das JSON-Format und damit in einen String umgewandelt und für den Abtransport zum Server vorbereitet. Das Ergebnis dieser Transaktion, eine Fehlermeldung oder die Rückmeldung des Servers, wird dann per showMessage() angezeigt.

Schlussworte

Sie haben nun einen Einblick gewonnen, welche Trends gerade auf Weboberflächen en vogue sind und wie Sie diese ganz einfach mit Script.aculo.us umsetzen können. Meistens reicht die id eines HTML-Elements schon aus, um dieses effektvoll verschwinden zu lassen, es als Ablagefläche für andere Elemente zu definieren oder mit einer Auto-Completion-Funktion zu versehen.

Und Sie haben erfahren, dass Rich Internet Applications auch mit JavaScript machbar sind. Über die vielen Optionen der einzelnen Effekte und Steuerelemente von Script.aculo.us informiert ganz konkret das Script.aculo.us-Wiki – was Sie daraus machen, steht dort allerdings nicht. Die Möglichkeiten sind jedenfalls vielfältig und das Risiko, zu viel skriptakuläres auf Ihre Seite zu zaubern, ebenfalls. Setzen Sie Effekte gezielt und zurückhaltend ein, überfordern Sie den User nicht mit aufwändigen Drag’n’Drop-Aktionen und nutzen Sie Auto-Completion nur dort, wo es die Eingabe erleichtert. Erst dann entwickeln Sie eine Web-2.0-Oberfläche mit echtem Mehrwert. Das heißt natürlich nicht, dass Sie nicht mit Script.aculo.us experimentieren dürfen – Sie werden viel Spaß dabei haben!

Denny Carl ist seit 2000 als selbstständiger Softwareentwickler, Webdesigner und Autor in Berlin tätig. Seine Schwerpunkte sind standardkonforme, dynamische Webseiten und AJAX-gestützte Applikationen im Browser.
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -