Innen letölthető a fent említett verzió, itt pedig nyomon lehet követni a különböző Chromium buildeket.

1. A http://listen.grooveshark.com cimet megnyitom Safariban, ingyenes regelés után, belépek a useremmel.
2. Csinálok pár playlistet.
3. Safariban a File/Open in Dashboard menüvel kivágom csak a lejátszót és kirakom dashboard-ra.
4. A jobb alsó “i” betűnél kikapcsolom a “play audio in dashboard only”-t.
5. Elindítom a lejátszást.

Ennyi, kész, reklám mentesen, teljesen faszán működik és nem kell hozzá nyitva lennie böngészőnek (ha lefagyna, nem kell újra mindent előlről kezdeni, nem csukom be az ablakát véletlenül, stb…)

A DataTable valójában a YUI grid view megoldása. Mindenféle adatforrásból képes felépíteni magát, legyen az HTML tábla, XML vagy JSON. A cellák tartalmának módosításához már eleve minden alap szerkesztőt tartalmaz: sima szöveg, pipák, választók (radio-buttons), lenyíló lista. Ami nekem hiányzott az a jelszó szerkesztő, amit így saját magam raktam össze, ezt fogom most röviden bemutatni.

A cella-szerkesztők alapjában véve a YAHOO.widget.BaseCellEditor osztály leszármazottai. Ahogy a neve is mutatja ebben az osztályban valósítottak meg néhány alapvető metódust: save és cancel gombok kirajzolása, a beviteli mezőket tartalmazó alap <div> létrehozása, eseménykezelők, stb… Ha belenéz valaki a datatable.js-be, akkor rögtön látszódik is, hogy milyen metódusokat kell egy cella-szerkesztő objektumnak megvalósítania, ezeknek csak a fejléce szerepel a BaseCellEditor-ban, a törzsükben csak egy megjegyzés van. Ugorjunk is fejest a közepébe, nagy előképzettség nem szükséges.

Első lépésként megadok pár hivatkozást, hogy ne kelljen mindig kiírni a YAHOO objektumot.

var Ev = YAHOO.util.Event,
   lang = YAHOO.lang,
   widget = YAHOO.widget,
   ua = YAHOO.env.ua;

Ezek után definiálom az új widget prototípusát, illetve gyakorlatilag csak a konstruktort, amiben megadok egy egyedi azonosítót minden újonnan létrehozott objektumnak és meghívom a BaseCellEditor konstruktorát.

widget.PasswordCellEditor = function(oConfigs) {
    this._sId = "yui-passwordceditor" +
        YAHOO.widget.BaseCellEditor._nCount++;
    widget.PasswordCellEditor.superclass
        .constructor.call(this, "textbox", oConfigs);
};

Most következik a fenti prototípus objektum “tartalommal” való feltöltése. Ehhez a YAHOO.lang.extend metódusát használom, mivel ezzel egyszerűen létrehozhatok minden szükséges metódus és változó prototípust olyan módon, hogy azok használhatóak legyenek “példányosításkor” – vagyis akkor, amikor a “new” paranccsal új objektumot hozok létre.

Először három változót deklarálok, amikbe majd HTML objektumokat rakok: a két jelszó beviteli mezőt és az ellenőrzés eredményének visszajelésére használt HTML elemet.

lang.extend(widget.PasswordCellEditor, widget.BaseCellEditor, {
    textbox0 : null,
    textbox1 : null,
    msgEl : null,

Most következik a a renderForm metódus, ami a szerkesztő űrlap elemeit készíti el. A kódban van néhány “workaround”, amit a TextboxCellEditor-ból vettem át. Az érdekesebb dolgok a metódus törzsének második felétől kezdődnek, ott definiálok két eseménykezelőt. A két beviteli mező “keyup” eseményére kötöm őket, tehát ha a felhasználó pötyög valamit akkor először ellenőrzöm mindkét mezőt a checkPasswords() metódussal. Ha rendben van minden és ráadásul még “enter”-t is nyomott a felhasználó, akkor jöhet a BaseCellEditor-tól örökölt save() metódus futtatása.

A metódus utolsó eleme annak a konfigurációs paraméternek a megvalósítása, amikor inicializálásnál azt kérem, hogy a cella szerkesztőben ne jelenjenek meg a “save” és “cancel” gombok. Itt igazándiból csak annyi történik, hogy a – későbbiekben definiált – handleDisabledBtns() eljárást meghívom, amiben bekötök egy eseménykezelőt a cella-szerkesztőn értelmezett blur eseményre. Ami azt eredményezi majd, hogy ha a felhasználó a cella-szerkesztőn kívülre kattint, akkor lefut a korábban már említett save() metódus, de csak abban az esetben, ha a jelszó ellenőrzés rendben volt.

    renderForm : function() {
        var elTextbox0, elTextbox1, elForm;
        // Bug 1802582: SF3/Mac needs a form element wrapping the input
        if(ua.webkit>420) {
            elForm = this.getContainerEl().appendChild(
                document.createElement("form"));
        }
        else {
            elForm = this.getContainerEl();
        }
        elForm.style.textAlign="right";
        elForm.appendChild(document.createElement("label"))
            .innerHTML="Password:";
        elTextbox0= document.createElement("input");
        elTextbox0.type = "password";
        elForm.appendChild(elTextbox0);
        elForm.appendChild(document.createElement("br"));
        elForm.appendChild(document.createElement("label"))
            .innerHTML="Confirm:";
        elTextbox1= document.createElement("input");
        elTextbox1.type = "password";
        elForm.appendChild(elTextbox1);
        elForm.appendChild(document.createElement("br"));
        this.msgEl=elForm.appendChild(document.createElement("span"));

        this.textbox0 = elTextbox0;
        this.textbox1 = elTextbox1;

        // Save on enter by default
        // Bug: 1802582 Set up a listener on each textbox to track on keypress
        // since SF/OP can't preventDefault on keydown
        Ev.addListener(elTextbox0, "keyup", function(v){
            if (this.checkPasswords())
            {
                if((v.keyCode === 13)) {
                    // Prevent form submit
                    YAHOO.util.Event.preventDefault(v);
                    this.save();
                }
            }
        }, this, true);

        Ev.addListener(elTextbox1, "keyup", function(v){
            if (this.checkPasswords())
            {
                if((v.keyCode === 13)) {
                    // Prevent form submit
                    YAHOO.util.Event.preventDefault(v);
                    this.save();
                }
            }
        }, this, true);

        if(this.disableBtns) {
            // By default this is no-op since enter saves by default
            this.handleDisabledBtns();
        }
    },

A checkPasswords() metódus ellenőrzi, hogy mindkét beviteli mezőben azonos-e a beírt szöveg. Csak akkor tér vissza “true”-val, ha egyik sem üres és megegyezik az értékük. Ahol van értelme, ott ki is íratom az ellenőrzés eredményét a “msgEl”-ben tárolt HTML objektumban.

    checkPasswords : function()
    {
        if (this.textbox0.value==null
            || this.textbox0.value==""
            || this.textbox1.value==null
            || this.textbox1.value=="")
        {
            this.msgEl.innerHTML="";
            return false;
        }
        else {
            if (this.textbox0.value == this.textbox1.value) {
                this.msgEl.innerHTML="New password is confirmed.";
                this.msgEl.style.color="#008000";
                return true;
            }
            else {
                this.msgEl.innerHTML="Password don't match!";
                this.msgEl.style.color="#800000";
                return false;
            }
        }
    },

Ez csak egy pici segítség ahhoz, hogy a cella szerkesztőt jó méretben rakja ki a BaseCellEditor.move().

    move : function() {
        this.textbox0.style.width = this.getTdEl().offsetWidth + "px";
        this.textbox1.style.width = this.getTdEl().offsetWidth + "px";
        widget.PasswordCellEditor.superclass.move.call(this);
    },

A mezők alapértékre állítása (inicializáláskor hívja meg a BaseCellEditor).

    resetForm : function() {
        this.textbox0.value = lang.isValue(this.value) ?
            this.value.toString() : "";
        this.textbox1.value = lang.isValue(this.value) ?
            this.value.toString() : "";
    },

Nevében a működése: berakja a kurzort és kijelöli az első beviteli mező tartalmát, amikor inicializálása során fókuszt kap a cella-szerkesztő.

    focus : function() {
        this.textbox0.focus();
        this.textbox0.select();
    },

A renderForm()-nál leírt handleDisabledBtns() metódus, ami egy eseménykezelőt köt be “blur”-re. Azt érdemes még megjegyezni, hogy a BaseCellEditor értlemszerűen ezt a metódust nem implementálja, csak azt az esetet amikor kirakja a “save” és “cancel” gombokat, amikhez a save() és close() metódusokat köti. Érdemes még megfigyelni azt is, hogy itt nem a YAHOO.util.Event.addListener() metódust használom, hanem a saját subscribe() metódust, ami azt jelenti, hogy a “blurEvent” nem egy W3C által megadott esemény, hanem ezt speciálisan a BaseCellEditor képes generálni. A subscribe() pedig, mint ahogy a neve is mutatja, a megadott függvényt beköti az eseménykor lefutó függvényhívások láncolatába.

    handleDisabledBtns : function() {
        this.subscribe("blurEvent", function(v){
            if (this.checkPasswords()) {
                // Save on blur
                this.save();
            }
        }, this, true);
    },

Az alábbi metódus kell a save() számára. Gyakorlatilag innen kapja meg a BaseCellEditor, hogy milyen értéket írjon vissza a DataTable megfelelő mezőjébe. Fontos: a save() a DataTable-ből elérhető RecordSet objektumot használja, tehát nem a látható táblázatba ír bele közvetlenül, azt a DataTable oszlopához megadott “formatter” metódus végzi, erről még lesz szó.

    getInputValue : function() {
        if (this.checkPasswords()) return this.textbox0.value;
        else return "";
    }
});

Kész a prototípus, most még át kell emelni pár static elemet a BaseCellEditor-ból, mivel ezeket az extend() nem végezte el:

lang.augmentObject(widget.PasswordCellEditor, widget.BaseCellEditor);

A végére még egy “apróság” maradt, a cella formázását végző kis függvény. Ezt ugyanúgy mint a fenti PasswordCellEditor objektumot, a DataTable cella-definíciós objektumában kell megadni. A feladat egyszerű, csillagokat kell rajzolni.

DataTableUtils={
   PasswordFormatter:function(el,oRecord,oColumn,oData){
      if (oData==null || oData=='') oData='xxxxxxxx';
      {
         el.innerHTML='';
         var oStr = new String(oData);
         for (var i=0; i<oStr.length; i++)
         el.innerHTML+="*";
      }
   }
}

Most már minden adott, hogy összerakjam a példát. A DataTable inicializálásához két dolog kell, az egyik az oszlopok (azonosító, fejléc szöveg, szerkesztő és formázó objektumok, átméretezhetőség, stb…), a másik pedig az adatforrás definiálása:

• Megadok három oszlop definíciót: felhasználó név, jelszó, email. Ebből a jelszón kívül mindgyikhez megadom a TextboxCellEditor-t, mint cella-szerkesztőt. Mindegyik oszlop átméretezhető, tartalom alapján sorba rendezhető. A jelszó mezőhöz megadom a PasswordFormatter-t, mint tartalom formázót.
• Adatforrásként egy előre elkészített JSON formázású szimpla javascript fájlt adok meg.

A példa alkalmazásban a fenti PasswordCellEditor és a PasswordFormatter a YUI_DataTable_PasswordCellEditor.js-ben található, amit innen le is tölthetsz és szabadon felhasználhatsz.

A példa erre a linkre kattintva érhető el. A forráskódba beírtam a fontosabb lépések magyarázatát, de a YUI saját weboldalán is sok egyszerű és jól dokumentált példa van, amiket nézegetve teljesen megérthető, hogy pontosan mi mit jelent.

Ha bármilyen észrevételed vagy javaslatod van, akkor nyugodtan kommentáld itt helyben.

Érekes linkek, ahonnan én is sok infót szereztem YUI-val való ismerkedésem során:

• http://www.satyam.com.ar/yui/
• http://developer.yahoo.com/yui/

Ez így nehezen érthető, de itt egy példa, ami az eredeti slider control-t használja: PÉLDA. Ezen jól látható, hogy egzmásra tolható a két pöcök, ugyanazt az értéket adják, de ilyenkor az alul levőt nem lehet közvetlenül elérni, el kell cibálni a fölül levőt.

A módosított verzióban a két pöcök már csak egymás mellé képes beállni, ilyenkor a visszaadott értékük azonos. Ez már jól használható intervallum megadásokra: PÉLDA

A módosított slider control letölthető innen. Az 1.8.1-es script.aculo.us lib-et használtam fel alapnak, ebbe hackeltem bele Gerd Riesselmann módosítását, amit itt tett közzé még az 1.6-os script.aculo.us lib-hez.

Futottam egy pici kört, hogy mégis mennyiért és kitől lehet hivatalos tanusítványt venni:
http://directory.google.com/Top/Computers/Security/Public_Key_Infrastructure/PKIX/Tools_and_Services/Third_Party_Certificate_Authorities/

Magyarok közül egyelőre csak a NetLock-ot találtam:
http://www.netlock.hu/

Egy kis plusz info a témáról:
http://en.wikipedia.org/wiki/Certificate_authority

A PDT megjelenése elég sok változást hozott a PHP fejlesztők életében. Az első verzió ugyan csak arra volt jó, hogy Eclipse környezetben is lehetett “normálisan” PHP kódot írni. Az igazi áttörés akkor történt, amikor megjelent az első olyan verzió, ami már teljesen támogatta a Zend Debugger-es remote debugging-ot. (Böngészőből indítható debug-ot.) Eddig ezt csak a – fizetős Zend Platform részévé váló, majd onnan kikerülő Zend Debugger-rel és a szintén fizetős – Zend Development Studio keretén belül lehetett megoldani. Úgy tűnik ez most már lassan a múlt homályába vész és végre lesz egy teljes értékű, ingyenes PHP debug megoldás a jól működő ingyenes PHP IDE (PDT) mellé… illetve úgy tűnik már van is!

Az első XDebug-ot támogató PDT-vel az volt a baj, hogy valami miatt lefogta az egész processzort és eléggé hektikusan működött: néha nem indult el a debug, néha ehhez újra kellett indítani az egész Eclipse-et. Emiatt hanyagoltam is az XDebug-ot, helyette bevetettem az időközben megint ingyenesen elérhető Zend Debugger-t.

Pár napja láttam, hogy a PDT-ből kiadták az 1.0.3-as verziót és nem olyan régen megjelent az XDebug 2.0.3-as verziója is. Hirtelen ötlettől vezérelve be is frissítettem őket (biztos nem véltlen, hogy 3-as végződik mindkét verzió, ugye…) és meglepődve tapasztaltam, hogy az XDebug procit felzabáló hajlama eltűnt, a PDT szépen tudja indítani a debug session-öket, minden flottul működik. Na ezen felbuzdulva gyorsan leírtam, hogyan is jutottam el ebbe az idilli állapotba:

Alapfeltevés: Van egy Apache alá installált PHP, fut az Eclipse-ben a PDT. Mindkét előfeltételre rengeteg doksival szolgál a Googel keresője.

1. Fel kell rakni az XDebug bővítményt PHP alá. Ennek egyik legegyszerűbb módja (ha Linux vagy MacOSX alatt vagyunk), hogy a PECL csomagkezelővel szépen befordíttatjuk. Erről van egy szép doksi az XDebug oldalán is, de röviden ezt kell begépelni a konzolban:

   pecl install xdebug

   Win alatt van bináris verzió, amit csak be kell másolni a PHP könyvtárába.

2. A php.ini-ben be kell olvastatni a lefordított xdebug modult és be kell kapcsolni a remote debug fícsört:

   zend_extension=/Library/PHP5/lib/php/extensions/no-debug-non-zts-20060613/xdebug.so
   xdebug.remote_enable=1

   Windows alatt is ez kell, csak .dll a fájl kiterjesztése.

3. Eclipse-ben be kell állítani egy debug konfigurációt, ehhez kell, hogy legyen egy PHP projekt, amire majd tudunk hivatkozni.
   • 
   • 
   • A bal fölül levő “New launch configuration”-ra kell kattintani, majd a megjelenő ablakban a Server fülön beállítani a következőket:
     • Server Debugger: XDebug
     • File: belapozni egy PHP projekten belül egy php fájlt, ami az indulási oldala lesz ennek az egész indítási konfignak
     • Auto Generate: ellenőrizni, hogy jó url-t rakott-e össze a PDT, ha nem, akkor kiszedni a pipát és kézzel javítani!
   • Advanced fülön:
     1. Start Debug from: beírni ide is azt az url-t, amit az előző fülön, ha vlami miatt mégsem az jelenne meg.
     2. Pipát rakj a “Continue Debug from This Page” elé, így a PDT nem bontja a kapcsolatot az XDebug-gal a megadott url letöltése után.
   • Common fül:
     1. Itt csak azt érdemes bepipálni, hogy a most összerakott launch config szerepljen-e a debug fav.-ok között.

Ezek után mehet egy Apply és ha minden jó, akkor a Debug gombra kattintva a PDT elindítja az Eclipse-ben beállított böngészőt a megadott url-lel (kiegészítve az XDebug session indításával).
Helyezz el breakpointokat és láss csodát, a következő oldal letöltésekor (a böngészőben lehet nyomkodni a linkeket, tölteni az újabb oldalakat) a PDT életre fog kelni, ha a program futása eléri a beállított breakpointot.

Innentől kezdve a PDT debug perspektívájában lehet nézelődni: látszódik a hívási verem, az elérhető változók, sőt a változók értékei módosíthatóak is!

Mindenkinek jó szórakozást hozzá!

• Firefox 2.0.0.11: 20643.0ms
• WebKit: 2767.6ms
• (Safari 3.11: 4390.6ms)
• (Opera 9.5: 7907.8ms)
• (UPDATE: FF3: 4274.6ms)

Akkor ezek szerint a WebKit 7,46x gyorsabb JavaScript futtatásban. Impresszív!

Gondolom Google tele van már ilyen tesztekkel, de jó látni, hogy egymásra licitálnak a “kis” böngészőgyártók. Várom a FF3-at jövő héten! A FF3 partiban van a legújabb Safarival! Igazán szép eredmény!

Na de amiért ezt az egészet leírom az amiatt van, mivel ma ráakadtam egy aranyos oldalra, ahol hasonló ötletet használtak fel Homer Simpson megjelenítésére. Hab a tortán, hogy animálva(!) is megnézhetjük a kép létrejöttét. Erre tessék bámulni: http://nedbatchelder.com/blog/200805/css_homer_animated.html

Egy kicsit művészibb megközelítés, itt mondjuk nincsen animáció:http://www.romancortes.com/blog/bush-css/

Na kérem, nem akarom túlmagyarázni a dolgot, mindenesetre ha nem is erre kell használni a CSS-t, de ebből a kis demonstrációból azért kiviláglik, hogy már RÉGEN lehúzták a rolót a table-layout-nak és társainak. (No igen, vért még mindig lehet pisilni néhány triviális table-layout tiszta CSS-re való átültetésekor…)

Akinek gyanúsan ismerős a design, annak megsúgom, hogy nem teljesen eredeti az ötlet, hasonló menü van a mootools.net-en is. Az ott látható harmonika menüt szabtam át egy kicsit.

Valami hasonló megoldáson gondolkodom a fotógalériák nyitóoldalára is, de ahhoz megint kell egy nagyobb mennyiségű szabadidő. :/

Egyébként ez a harmonika menü egy nagyon jó ötlet, szeretnék eljátszadozni vele egy picit. Kokrét “Accordion menu” javascript osztállyal még nem futottam össze, igaz főleg csak a mootools oldalán keresgéltem. Van egy másik igéretes projekt, ami kifejezetten csak mootools-ra épülő effektek gyártásával foglalkozik. Találó néven: moo.fx. Viszont ebben sincs kész osztály erre. Mondjuk nem túl bonyolult megírni a kódot az egéreseményekre, nagyjából 20 sor az egész.

Szóval következő mini-projektem lesz az accordion menu JS osztály összeheggesztése, amit kirakok ide az oldalra egy kisebb tutoriallal megtámogatva.

Stay tuned!

Múlt héten nézegettem a screencast-eket az RC2-es verzióról és tetszetősnek tűnt az új Dashboard, a szerkesztő, meg az egész kipolírozott admin felület. Így aztán nem sokat gondolkodtam az új verzióra való frissítésen, amint megláttam, hogy megjelent le is töltöttem és egy szinte fájdalommentes upgrade után be is üzemeltem.

Tényleg nagyon jó lett az új Dashboard és az egész admin felület, szép, következetes, átgondolt. Tetszik!

Sajnos a TinyMCE Advanced plugin nem működik még ezzel a verzióval, ami nem lenne olyan nagy baj, mert egész szépen átdolgozták a szerkesztőt is, de mivel az általam használt design “széles” és a beépített szerkesztő szinte minden CSS definíciót átvesz, ezért a szerkesztő rész rálóg a legfontosabb panelre. Emiatt nem tudom Visual módban menteni és publikálni a bejegyzéseket. Ezen segíthetne a TinyMCE Advanced plugin, mert ott meg tudom adni azokat a css osztályokat, amiket nem kérek a szerkesztőben. Remélem az elkövetkező pár hétben javítják ezt a dolgot és akkor minden szép is lesz. (Árgus szemekkel figyelem a Trac ticketeket.)

Kipróbálásra melegen ajánlom az új WordPress-t, látványosan nem csak egy ráncfelvarrás.

Hivatalos bejelentés: WordPress 2.5

Amint lesz még több tapasztalatom ezzel a verzióval (és persze lesz időm) nyomom tovább az infókat, mára ennyire futotta.

Jóéjet!