Tim Tepaße: Apple-Auswahl

Beitrag lesen

Hallo,

Kann mir jemand sagen, mit welcher Technik ich dieses "Produkte - ITunes und mehr - Zubehör"-Menu realisieren kann?

Apple nutzt auf seiner Webseite das Javascript-Framework Prototype, das Arbeit in JS etwas leichter macht. Zu Prototype gibt es als Add-On das Animations-Framework Scriptaculous, mit dem man einfacher mit JS animieren kann. Die Animationen sind dabei Zuweisungen von CSS-Stilen über JS. Unter der Haube geschieht das mit Zuweisungen an das die CSS-Eigenschafts-Attribute des style-Attributes von HTML-DOM-Objekten. Aber das ist sehr abstrahiert und in Funktionen und Methoden eingepackt. Prototype pimpt seine HTML-Elemente darstellende Objekte mit einer Methode namens setStyle(). Scriptaculous verpackt mehrere solcher Stilanweisungen dann in Funktionen wie Effect.Move(). Du siehst, da wird vom mit vielen kleineren Befehlen, größeres aufgebaut. Wie immer eigentlich.

Apple hat nun aufbauend auf den erweiterten Komfort-Funktionen von Prototype und Scriptalicious sich wieder etwas eigenes gebaut das wiederverwendbare JS-Objekt AC.ProductBrowser. "AC" ist dabei nur ein Namensraum von Apple-Funktionen, damit diese niemanden anderes in die Quere kommen. Steht wahrscheinlich für "Apple Computer", auch wenn Apple schon länger nicht mehr so heisst. Wiederverwendbar ist praktisch, weil sie diesen Produktbrowser ja auch auf anderen Seiten verwenden. Das ganze ist also wieder eine Abstraktion auf der Abstraktion der Einzeln-Animationen von Scripalicious auf der Abstraktion des komfortableren JS-Zugangs von Prototype.

Letztendlich wird das ProductBrowser-Objekt mit der Prototype-Funktion Event.Observe() beim Laden des Dokumentes an mit nur noch ein paar Optionen initalisiert, so das dieses sich dann an die passenden HTML-Bereiche im Dokument dranhängt und die Elemente, die Slider und ähnliches symbolisieren mit den passenden JS-Funktionen ausstatten, die dann woanders anderes animieren.

Und wenn man Abstraktion auf Abstraktion auf Abstraktion packt, kann man so etwas durchaus einfach realisieren. Man sollte sich nur mit den unterliegenden Abstraktionen auskennen, damit man den Überblick nicht verliert. Die Luft ist dünn da oben. ;)

Tim