Ankündigung

Einklappen
Keine Ankündigung bisher.

2,58: Schönes Klickibunti und mehr…

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • 2,58: Schönes Klickibunti und mehr…

    2,58:
    Jeder, der sich viel mit der Frontend-Entwicklung von Webseiten beschäftigt hat, stolpert über kurz oder lang über das Javascript-Framework jQuery. Im Moment hat es den Anschein, als ob jeder dabei sein und keiner den Zug verpassen wolle. jQuery-Code ist herrlich einfach und wunderbar zu lesen. Noch dazu, wo jQuery vor wenigen Tagen den „Packt Publishing Award“ als beste Open-Source-JavaScript-Bibliothek gewonnen hat.

    Natürlich entging das auch nicht dem Webteam der Nordweih24 GmbH. Hatte man doch schon seit Briefposttagen, Höhlenmalereien und uralten Flaschenpostwunschzetteln das Anspruchsdenken verinnerlicht, diejenige Agentur mit dem denkbar einfachsten Benutzerinterface auf dem Markt zu sein. Dies dürfte sich auch im 21. Jahrhundert nicht ändern. Schließlich hatte der Weihnacksmann persönlich in einer hausinternen Memo nachgehakt, ob denn die „Gui“ immer noch „up to date“ sei. So musste das PHP-Team der Nordweih24 GmbH ran zur Umschulung, man hatte ja schließlich einen Ruf zu verlieren.

    Schnell stießen die Entwickler bei Recherechen auf jQueryUI und waren ob der Möglichkeiten dieser Erweiterungen begeistert, da sie modularen Code fanden, der Events feuerte und gegen ein sauber definiertes Interface entwickelt worden war. Noch dazu bekamen sie mit der Bibliothek ein CSS-Framework mitgeliefert, das selbst die feuerspuckenden Höllenbrowser aus Redmond besänftigte.

    Die neue Wunschzettel-Oberfläche stand schnell in Grundzügen, doch leider konnte auch diese Erweiterung nur den Grundstock der neuen „blingbling-UI“ (wie sie der Weihnacksmann gerne schelmisch bezeichnete) bilden. So mussten die Entwickler schnell einsehen, dass man im Team gezwungen war, selbst die Wichtelgriffel anzulegen. Da schnelles Handeln geboten war und jeder zunächst eigene Vorstellungen hatte, einigten sie sich nach kurzer Diskussion auf die Verwendung von $.widget, der Basis des jQueryUI-Frameworks.

    $.widget hatte in ihren Augen viele Vorzüge. So konnten sie in den Objekten javascript-unüblich durch die Verwendung eines Unterstriches vor dem Methodennamen elegant zwischen protected und public Methoden unterscheiden. Natürlich sollte das alles nicht mit dem Namespace von jQueryUI kollidieren, so dass schon nach kurzer Recherche folgender Code auf dem Papier stand:
    PHP-Code:
    (function($) { 
        $.
    widget('nordweih.rentier', { 
            
    options: { 
                
    autoBoost true 
            
    } ,
            
    _create: function () { 
            }, 
            
    _init: function () { 
            }, 
    Die Entwickler bemerkten schnell, dass die Methode _create() den Konstruktor des zu erzeugenden Widgets darstellt.

    Hingegen wurde mit jedem Aufruf des Rentier-Widgets _init() aufgerufen. Hooks kannten einige aus dem PHP-Team bereits aus verschiedenen PHP-Frameworks, so war schnell klar, dass hier Optionen wie autoBoost abgefragt werden sollten:
    PHP-Code:
            // ..
            
    _init : function () { 
                var 
    this.options
                if(
    o.autoBoost && !o.disabled) { 
                    
    this.boost(); 
                } 
            },
            
    // .. 
    EventListener für das Widget konnten durch _trigger('eventname') deklariert werden. Das war besonders hilfreich, wenn das Rentier auf keinen Fall ohne den Weihnacksmann losgalloppieren durfte. So war es möglich, von außen über den selbsterzeugten Event zu steuern, ob schon alle Startbedingungen erfüllt waren.
    PHP-Code:
            move : function () 
                if (
    this._trigger('beforemove') === false) { 
                    return; 
                } 
                
    /** 
                 * move code 
                 */ 
                // der "after" move event 
                
    this._trigger('move'eventdata); 
            } 
    Ansprechen konnte man das Event wie den click-Event auch, über einen Bind an das Element, in diesem Fall Rudolf.
    PHP-Code:
    $('#rudolf').bind('rentierbeforemove', function () {
        return 
    checkForWeihnacksmann();
    }); 
    Um sicher zu stellen, dass auch wirklich immer nur ein Rentier das Haus verließ, mussten jetzt noch sichergestellt werden, dass alle anderen heimkehrten, bevor Rudolf lossprintete. Schnell wurde die durch jQueryUI bereitgestellte Möglichkeit ausgelotet, alle anderen Instanzen eines Widgets über einen Pseudo-Selektor ausfindig zu machen. Somit mussten sie sich noch nicht einmal um das Halten aller Instanzen kümmern. Gesagt, getan, move() wurde dementsprechend aufgebohrt:
    PHP-Code:
        move : function () { 
        if(
    this._trigger('beforemove') === false){ 
                    return; 
                } 
                $(
    ':nordweih-rentier')
                    .
    not(this.element
                    .
    rentier('flyhome'); 
                
    // .. 
    Um das Aufräumen kümmerte sich $.widget auch schon, sofern sich nichts am Original-Element verändert hatte. Und wenn doch, so hatten sie auch hier die Möglichkeit, gezielt einzugreifen. Der jQueryUI-Destruktor:
    PHP-Code:
           destroy : function () { 
                
    this.rentier.dialog("destroy"); 
                if( 
    this.element.is($('#rudolf')) {
                    
    // mach etwas besonderes
                
    }
                $.
    Widget.prototype.destroy.apply(thisarguments); 
            } 
    Innerhalb kürzester Entwicklungszeit war es mit diesen einfachen Methoden möglich, saubere und auch vererbbare Widgets zu schreiben (wie das geht, lässt sich sehr schön $.ui.draggable-Beispiel entnehmen).

    Und die Moral von der Geschicht: jQueryUI bringts, warum verwendest du's noch nicht?


  • #2
    Pünktlich wie immer
    --

    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


    --

    Kommentar


    • #3
      Ja, der Nikolaus hat's echt drauf, was?
      Refining Linux: “Performing Push Backups – Part 1: rdiff-backup

      Kommentar


      • #4
        Und wie der Nikolaus recht hat! jQuery UI ist wirklich eine schöne Sache

        Kommentar


        • #5
          Das hört sich geil an.
          Gibt es eventuell die Wunschliste auch als Demo, so das ich als fauler Sack gleich mal ein Bsp sehe?

          Kommentar


          • #6
            Die Wunschliste ist streng geheimes geistiges "Eigentum" des eifersüchtigen Weihnacksmannes, aber du kannst dir ja mal die Beispiele auf der jQueryUI-Website ansehen.
            Refining Linux: “Performing Push Backups – Part 1: rdiff-backup

            Kommentar

            Lädt...
            X