Camelize, CamelCase

Lunedì 20 Ottobre, 2008

Come già visto nel post Varietà di coding e di coding gli approcci che uno sviluppatore può avere alla risoluzione di un problema sono diversi e molteplici a parità del linguaggio di programmazione usato. Ecco come alcuni dei più noti framework Javascript hanno risolto una semplice funzione di CamelCase:

Prototype.js

Prototype.js, nella versione 1.6.0.3, propone esplicitamente un metodo camelize() per effettuare il camelcase su una stringa. L'approccio dell'autore è abbastanza semplice e il codice risulta auto-esplicativo. In questo caso non è stato fatto nessun uso delle Regular Expression!

JavaScript:
  1. camelize: function() {
  2.     var parts = this.split('-'), len = parts.length;
  3.     if (len == 1) return parts[0];
  4.  
  5.     var camelized = this.charAt(0) == '-'
  6.       ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
  7.       : parts[0];
  8.  
  9.     for (var i = 1; i <len; i++)
  10.       camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
  11.  
  12.     return camelized;
  13.   }

Continua a leggere... »

Post correlati

Google AJAX Library API: una svolta per gli sviluppatori

Giovedì 29 Maggio, 2008

AJAX Libraries API Google, in quest'ultimo perdiodo, ha rilasciato una moltitudine di strumenti dedicati agli sviluppatori, aggiornando di continuo i propri rilasci. Adesso stringe un accordo con i più diffusi framework AJAX, e non solo, per centralizzare la distribuzione delle librerie jQuery, prototype, script.aculo.us, MooTools e dojo!

In pratica è possibile accedere a queste librerie sfruttando le infrastrutture e la rete Google, con notevoli vantaggi in termini di velocità e sicurezza.

La velocità, nel caricamento, è garantita dalla stessa rete Google che, oltre a fornire di per se una struttura di server distribuita, permette (di default) il caricamento compresso (gzip/minify) delle librerie. Gli hosting Google più vicini alla richiesta saranno utilizzati per inviare il codice e, in caso di non raggiungimento o down temporaneo, la rete Google garantirà comunque l'invio del codice Javascript!

Continua a leggere... »

Post correlati

Shadowbox assetURL: impostare il percorso delle immagini

Sabato 12 Aprile, 2008

Quando Shadowbox apre la sua finestra per mostrare un contenuto (immagine, iframe, Movie, ecc...), visualizza, nell'attesa, un gif animato che viene fornito nel pacchetto. Se la pagina che sta utilizzando Shadowbox si trova allo stesso livello della cartella images, tutto funziona bene. Per default, infatti, Shadowbox cerca la gif animata sotto images/loading.gif - o images/loading-light.gif se avete scelto gli stili light (shadowbox-light.css). Altrimenti, e spesso c'è il rischio anche di non accorgesene, se ci troviamo in una diversa alberatura, viene generato un bel codice 404 - di pagina non travata; nel nostro caso di file non trovato!

Per risolvere il problema basta inizializzare Shadowbox con un parametro opportuno che indica proprio il percorso assoluto della cartella images: su undolog.com, ad esempio, ho posizionato la gif animata del loading direttamente nella cartella images presente in root (come circa un miliardo di altri siti :). Per rendere accessibile questa cartella a Shadowbox, a prescindere dal percorso, ho inserito semplicemenete:

JavaScript:
  1. // init shadowbox with assetURL parameter
  2. Shadowbox.init( {assetURL: 'http://www.undolog.com/' } );

Post correlati

Tutti i cloni di Lightbox in una matrice dinamica

Venerdì 11 Aprile, 2008

Planetozh ha realizzato uno splendito strumento dinamico in grado di elencare tutte le librerie Javascript simili a Lightbox.

image

image Tramite un pannello (vedi  immagine qui a sinistra) con una serie di "spunte" (checkbox), che indicano le varie caratteristiche delle librerie, è possibile eseguire un filtro ottenendo così la lista di una o più librerie che fanno al caso nostro. Speriamo che l'autore mantenga aggiornata questa fantastica pagina, utilissima nel districarsi tra le numerose e sempre più potenti librerie di questo tipo.

Post correlati

Scriptaculous Effect.Tween: come funziona

Giovedì 20 Marzo, 2008

Fra tutte le librerie "web 2.0" disponibili, scriptaculous è sicuramente quella più mal documentata! Sul sito ufficiale, spesso lento, la documentazione è parziale, mal fatta e di difficile consultazione. Con gli ultimi rilasci, poi, alcune nuove funzionalità sono completamente mancanti, proprio come il nuovo core effect Tween (Effect.Tween). Quest'ultimo, in modo simile al Tween di Flash, permette di manipolare transizioni personalizzate. La sua SYNOPSIS base è la seguente: Continua a leggere... »

Post correlati

Light gallery: Lightview 2.0.0_rc1

Martedì 19 Febbraio, 2008

Lightview Appena rilasciata ecco l'ennesima libreria Unobtrusive Javascript per gallerie di immagini e non solo. Lightview, nella release 2.0.0_rc1, aggiunge anch'essa le funzioni per "aprire" delle Window con contenuti che vanno oltre la semplice immagine: filmati Flash, QuickTime, Form e IFRAME! Rispetto alla precedente versione (la 1.1.0 - che gestisce solo immagini), quindi, questa release candidate si arricchisce delle funzionalità presenti anche in altre librerie. Gli strumenti richiesti da Lighview per funzionare sono gli arcinoti Prototype 1.6.0.2 e Scriptaculous 1.8.1. Gliattributi usati per gestire la libreria sono class e rel.

Un'aspetto interessante di questa libreria è l'estrema cura della grafica con cui si presenta.

Voto: 9 - Home page di Lightview

Post correlati

Light Library: da Slimbox a Shadowbox, gallerie in Javascript

Mercoledì 13 Febbraio, 2008

Qualcuno potrebbe dire -  e non a torto - basta! Di librerie Javascript (Unobtrusive - non intrusive, o parzialmente) per gestire immagini e gallerie ce ne sono davvero tante. Comunque sia ecco la lista, con pregi e difetti, delle migliori che ho provato.

SLIMBOX 1.41

Estremamente minimale, 7K (alla versione 1.41), richiede mootools per funzionare. Come indicato sulla Home page è un vero e proprio clone grafico di Lightbox, che vedremo più sotto. Sinceramente, a parte l'estrema compattezza della libreria, non possiede caratteristiche peculiari. Sullo stesso sito, comunque, è possibile trovare anche uno script per generare riflessioni runtime... al limite può essere utile questo ;)

Voto: --6 - Home Page Slimbox, Home Page Reflection.js for MooTools

LIGHTBOX2

Lightbox2 Una delle più note e semplici. Gestisce in questa release sono immagini (quindi non funziona con QuickTime, Flash o altro). Per il suo funzionamento richiede Prototype e Scriptaculous. Usa l'attributo rel per identificare i link delle immagini da processare:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Come le altre librerie che vedremo, supporta la modalità slideshow, inserendo tra parentesi quadre un qualsiasi identificativo in una serie di link/image:

HTML:
  1. <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
  2. <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
  3. <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Voto: 6 - Home Page Lightbox2

LIGHTWINDOW 2.0

LightWindow 2.0 Anche questa è abbastanza diffusa! Dopo tutto come capire qual'è la più usata? ;). Comunque sia è estremamente completa  e versatile. Sul sito campeggia la richiesta di donazioni per l'acquisto di un Mac... un tantino invasiva e pressante... Comunque sia, come la precedente, per il suo funzionamento, richiede la presenza di Prototype e Scriptaculous. A differenza della precedente, tuttavia, questa permette di visualizzare moltisiimi tipi di file: dalle immagini, filmati QuickTime, filmati Flash, pagine HTML esterne e PDF. Di contro, utilizza vari attributi, alcuni facoltativi (author, caption e title) altri obbligatori (classparams - per impostare il comportamento della libreria). Ad esempio, per visualizzare una gallery o slideshow usa l'attributo rel:

HTML:
  1. <a href="gallery/0-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Left Behind" caption="Look's super tasty!" author="Unknown">image #1</a>
  2. <a href="gallery/1-sushi.jpg" class="lightwindow" rel="[Sushi]" title="Beware of warewolves..." caption="I shouldn't be doing this when I am hungry" author="Unknown">image #2</a>
  3. <a href="gallery/2-sushi.jpg" class="lightwindow" rel="[Sushi]" title="That was good!" caption="Take that sushi!" author="Unknown">image #3</a>

Voto: 8 - Home Page LightWindow 2.0

SHADOWBOX 1.0B

Shadowbox Nonostante sia alla versione 1.0 beta, questa è forse la libreria più completa, sia dal punto di vista funzionale sia per le librerie supportate. Per il suo funzionamento, infatti, è possibile scegliere tra una serie di framework, grazie a dei file "adapter" appositamente realizzati e fornite dall'autore:

L'effetto visivo (configurabile tramite skin/css), poi, a differenza delle altre, è sicuramente più accattivante. Gli attributi usati sono solo il rel dove, al sue interno, trovano spazio tutti gli altri parametri di configurazione. Ad esempio, per realizzare una gallery, basta usare:

HTML:
  1. <a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>
  2. <a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

Se si desidera impostare qualche opzioni (vedi sito per la lista completa) basta usare la seguente sintassi:

HTML:
  1. <a href="myimage.jpg" rel="shadowbox;options={overlayOpacity: 0.5, resize: false}">My Image</a>

Su Internet se ne possono trovare anche altre, come ad esempio Highslide JS. Anzi, se volete segnalarmi qualche altra libreria... Comunque sia, personalmente, preferisco Shadowbox per semplicità, scalabilità e cross-framework.

Voto: 9 - Home Page Shadowbox 1.0B

Post correlati

Flash: disabilitare un TextField in modalità input

Mercoledì 14 Novembre, 2007

Come si disabilità un TextField in modalità input? Visto che la proprietà enabled non è disponibile si può ricorrere ad un semplice artifizio: cambiare runtime lo stato del TextField. Fortunatamente gli sviluppatori di Flash hanno permesso di modificare lo stato di un TextField anche runtime, tramite la proprietà type. Ne deriva che se un TextField è inserito nello stage come input (quindi con type="input"), da codice possiamo trasformarlo in un testo "statico". In realtà lo trasformeremo in testo dinamico (type="dynamic") ma il risultato visivo è il medesimo. L'artifizio funziona in quanto sia il TextField input che il TextField dinamico condividono la stessa proprietà text. Così se ho inserito un testo in un TextField input quando lo trasformo in un TextField dinamico avrò solo l'impressione di non poter più inserire caratteri! Ovvero ho disabilitato il TextField input!

L'oggetto TextField, inoltre, può essere esteso come un MovieClip, quindi potremmo avvalerci del seguente utile codice:

Actionscript:
  1. TextField.prototype.Enabled = function(v:Boolean) {
  2.     this.type = v ? "input" : "dynamic";
  3. };

Post correlati

Aggiungere proprietà ad un MovieClip

Venerdì 9 Novembre, 2007

Nel Post Estendere i MovieClip in Adobe Flash MX avevo illustrato alcune tecniche per estendere un MovieClip. In particolare avevo detto che l'uso di MovieClip.prototype non permetteva l'estensione di proprità ma solo di metodi:

[...] Due importanti limitazioni di questa tecnica sono:

  1. Non può essere applicata a tutti gli oggetti esposti da Flash
  2. Possono essere "aggiunti" solo metodi e non proprietà [...]

In verità è possibile, con un passaggio in più, aggiungere dinamicamente proprietà anche usando MovieClip.prototype. Prima dell'introduzione di function get e function set, infatti, Flash permetteva l'aggiunta di proprietà (in lettura/scrittura o solo lettura) tramite il metodo addProperty(). Nella pratica questo si traduce nell'invocazione del metodo addProperty() e nella definizione di due funzioni getter e setter. La setter può essere null così da creare proprietà in sola lettura. Ad esempio se volessimo estendere tutti i MovieClip con una nuova proprietà _alpha in grado di aggiungere un'animazione, basta scrivere il seguente codice:

Actionscript:
  1. function _get_alpha():Number {
  2.         return(this._alpha);
  3. }
  4. function _set_alpha(v:Number):Void {
  5.        new Tween(this, "_alpha", Strong.easeOut, this._alpha, v, 1, true);
  6. }
  7. MovieClip.prototype.addProperty("_alpha_tween", _get_alpha, _set_alpha);

Da questo momento in poi se abbiamo un simbolo "miosimbolo_mc" possiamo sfruttare questa nuova proprietà:

Actionscript:
  1. miosimbolo_mc._alpha_tween = 50;

Quello che non è possibile fare, invece, è sovrascrivere le proprietà esistenti; per questo motivo ho usato _alpha_tween invece di _alpha. Ecco, quindi, un buon motivo per usare comunque le Classi 2.0 per estendere - e derivare - eventuali MovieClip.

Post correlati

Estendere i MovieClip in Adobe Flash MX

Mercoledì 17 Ottobre, 2007

Io utilizzo due tecniche per estendere le funzionalità di un MovieClip. La prima, utilizzata anche nelle precedenti versioni di Flash MX, usa la proprietà prototype, un puntatore alla superclasse (madre), come indicato nel manuale:

Un riferimento alla superclasse di un oggetto classe o funzione. La proprietà prototype viene creata automaticamente e associata a qualsiasi oggetto classe o funzione creato. Questa proprietà è di tipo statico ed è specifica della classe o della funzione creata. Se, ad esempio, si crea una classe personalizzata, il valore della proprietà prototype viene condiviso da tutte le istanze della classe ed è accessibile solo come una proprietà della classe. Le istanze della classe personalizzata non possono accedere direttamente alla proprietà prototype, ma possono accedervi mediante la proprietà __proto__.

Uno dei vantaggi nell'uso di prototype, soprattutto con i MovieClip, risiede nell'estensione di tutti i MovieClip, nessuno esluso. Di fatto si effettua un'estensione broadcast a tutti i MovieClip statici o dinamici. Ad esempio, una comoda estensione potrebbe essere:

Actionscript:
  1. MovieClip.prototype.move = function(x:Number, y:Number) {
  2.     this._x = x; this._y = y;
  3. }

Continua a leggere... »

Post correlati