Localizzare risorse grafiche

Il processo, come accennato, è il medesimo; se abbiamo un'immagine già inserita nelle nostre risorse, o ne inseriamo una nuova, e vogliamo "localizzarla" - cioè gestire due o più immagini in base alle lingue supportate - basterà cliccare con il tasto destro sull'immagine (Adium.png in questo esempio) e selezionare Get Info:

Clicchiamo Make File Localizable in basso a sinistra.

Clicchiamo su Add Localization e inseriamo Italian:

In modo da ottenere:

La nostra immagine viene spostata (fisicamente, una delle rare volte in cui quello che accade nell'alberatura Xcode si riflette sul filesystem) sotto le cartelle virtuali English.lproj e Italian.lproj esattamente come accadeva con il testo:

A questo punto ognuna delle cartelle English.lproj e Italian.lproj contiene una stessa versione dell'immagine. Questa immagine è manipolabile all'interno di Interface Builder, dove ne vedremo - per default - la versione inglese.
Arrivati a questo punto, basta sovrascrivere uno (o entrambi i file Adium.png) per ottenere una localizzazione delle immagini "lampo".

Localizzare i file XIB

Anche le interfacce costruite con Interface Builder possono essere localizzate nella loro interezza, quando lo si ritiene necessario. Il procedimento è identico a quello svolto con le risorse grafiche: aggiungiamo un ViewController (ad esempio infoViewController) con interfaccia XIB, lo selezioniamo, scegliamo Get Info dal menu contestuale, rendiamo il file localizzabile, aggiungiamo la localizzazione in italiano:

Cliccando su English o su Italian si aprirà Interface Builder! Questa volta, sul filesystem, noteremo che sono state create due cartelle (English.lproj e Italian.lproj) all'interno della classica cartella Classes. Entrambe avranno il loro file infoViewController.xib. La comodità, in questo, risolta evidente nel codice; quando andremo ad istanziare il nostro controller si avrà un codice "pulito" di questo tipo:

Come vedete non c'è traccia di nessuna dichiarazione relativa alla localizzazione, totalmente gestita da sistema. Le due interfacce, ovviamente, possono essere completamente differenti, in quanto risultano a tutti gli effetti come due file XIB separati.

Post correlati

• iPhone SecondApp: indovina il numero – parte 2 (0)
• iPhone FirstApp: indovina il numero – parte 1 (0)
• Hi phone (7)
• XCode: organizzare il codice con la direttiva #pragma mark (0)
• Xcode shortcut (0)

Le basi

Tramite i fogli di stile è possibile personalizzare completamente il layout di un qualsiasi modulo form. Uno degli ostacoli che si possono incontrare, come spesso accade, è relativo alla compatibilità con i vari browser in commercio e quindi con diversi risultati finali in base al browser utilizzato.
Per questo, spesso, si opta per una soluzione sostanzialmente grafica, cioè si sfruttano delle immagini per ridefinire il layout grafico del form. Le immagini, infatti, sono le uniche entità che, salvo rai casi, sino ad oggi sono visualizzate sempre allo stesso modo su tutti i browser.

Senza immagini

Prima di vedere come alterare il layout di un form con delle immagini, vediamo quello che "sarebbe" possibile fare con i soli CSS. Un modulo form è formato nella maggiornza dei casi da campi INPUT. Tuttavia quello che vedremo è, in linea generale, applicabile a qualsiasi altro campo modulo. Tramite i CSS possiamo ridefinire l'aspetto del nostro campo INPUT agendo sulla sua dimensione, sul bordo, sullo sfondo, sul tipo di carattere, etc...
Ad esempio è possibile migliorare la resa impostando semplicemente:

Mozilla FireFox e Safari permettono anche di regolare in modo semplice la rotondità dei bordi (vedi anche CSS3: qualcuno ha visto Internet Explorer?):

In aggiunta possiamo inserire un'immagine come sfondo, per rendere più "accessibile" il significato del campo stesso:

Se icon.png è un'icona di larghezza 16 pixel, tramite il padding permettiamo di posizionarla all'inizio del campo ma fuori dal testo.

Le immagini nel Form

L'ultimo esempio visto porterebbe ad una semplice soluzione nel momento in cui decidiamo di realizzare il layout del nostro campo INPUT completamene in grafica. Infatti in linea teorica basterebbe eliminare il bordo del campo e inserire un'immagine di background direttamente nel campo INPUT:

Dico in linea teorica perchè se da un lato questa tecnica funziona (vedi FireFox), dall'altro produce strani effetti su altri browser (vedi Microsoft Internet Explorer).
Per sperare l'ostacolo si rende completamente trasparente il campo INPUT e l'immagine la si associa direttamente al tag FORM:

Il tutto con una "taggatura" HTML del tipo:

In base alla grafica scelta e alla complessità del form, bisognerà solo "sovrapporre" in modo corretto, e quindi posizionare, il campo INPUT all'immagine grafica sottostante posta come sfondo del form. Questo è possibile inserendo gli opportuni margini al campo INPUT stesso, per farlo coincidere con il nostro layout:

Post correlati

• FireFox 3.5.7: come risolvere il difetto dei bordi arrotondati su un’immagine (1)
• CSS3: qualcuno ha visto Internet Explorer? (5)
• Very short trick: versatilità delle classi CSS (3)
• Very short trick: disabilitare il ridimensionamento di una textarea su Safari (7)
• Very short trick: CSS condizionali e ottimizzazione (1)

Quindi se lo sfondo è bianco (o un colore simile) non ci sono problemi. Al contrario, appena sostituiamo lo sfondo, ecco cosa accade:

In attesa, quindi, della diffusione del formato APNG (Animated PNG) - che supporterà un vero e proprio canale alpha per le trasparenze, importare GIF animati in contesti come Adobe Flash risulta "graficamente" una pessima scelta. Ecco allora come realizzare un'animazione in Adobe Flash del tutto simile a quelle presenti sul Web.

Costruiamo il nostro Ajax Loader in Adobe Flash: il "petalo"

Prima di tutto creiamo un MovieClip vuoto (o se preferite potete lavorare direttamente sullo stage) e disegnamo una linea verticale nera, il nostro petalo, alta 60/70 pixel per comodità, impostando uno spessore (tratto) di 10:

Selezioniamo la nostra linea e trasformiamola temporaneamente in un oggetto immagine (F8). Dal pannello Allinea, centriamola nello stage. Adesso duplichiamo (CTRL+D o CMD+D) la nostra linea, centriamo la linea duplicata e ruotiamola dal pannello Trasforma di 30 gradi:

Ripetiamo questa operazione (duplica, centra, ruota di 30 gradi) fino ad ottenere:

Selezioniamo tutta l'immagine, cioè la somma degli oggetti:

Dal menu Elabora selezionate Dividi (CTRL+B o CMD+B):

Poi, sempre dal menu Elabora, selezionate Forma > Converti linee in riempimenti. In questo modo abbiamo ottenuto una figura "unica".

Adesso dobbiamo "bucare" il centro della nostra immagine. Per fare questo aumentate un po' lo zoom (tipo 400). Create un nuovo livello e proteggiamo quello con il lavoro svolto fino adesso:

Su questo nuovo livello potremmo lavorare in tranquillità, senza danneggiare l'altra nostra immagine. Disegniamo, partendo dal centro (mantenete premuto il tasto ALT insieme al tasto maiuscole SHIFT) un cerchio rosso senza bordo:

Nella figura qui sopra ho impostato la trasparenza del cerchio per evidenziare la sua posizione rispetto alla nostra figura (che si trova sul livello sottostante). Notate che ho appositamente "tagliato" gli spigoli dove si congiungono i "petali" della nostra figura. Il cerchio, quindi, dev'essere della giusta grandezza, cosa che ci tornerà comoda più avanti. Fatto questo selezionate il cerchio, copiatelo (CTRL+C o CMD+C) ed eliminate pure l'ultimo livello creato, sbloccate il livello con la nostra figura, e incollate!

Cliccate adesso sul bianco dello stage in modo da deselezionare il cerchio rosso. Ora abbiamo "fuso" i nostri due oggetti. Selezionate nuovamente il cerchio rosso ed eliminatelo!

Ottimo! Adesso selezioniamo tutto il nostro oggetto e cambiamogli colore con un grigio chiaro:

Selezioniamo poi il primo petalo (ore 12) e impostiamolo a nero (voi ovvimente potete scegliere la gradazione di colori che preferite):

Impostiamo ora il secondo petalo (ore 13) ad un grigio scuro:

Proseguiamo per gli altri due petali (scegliete vuoi quanta gradazione applicare) fino ad ottenere:

L'animazione

Perfetto, ci siamo quasi, l'ultimo sforzo richiesto è creare la rotazione. Questa non deve riguardare i petali ma solo il colore. Per fare questo avremmo potuto procedere anche in altri modi (vedi ad esempio con luso delle maschere...), tuttavia questo mi sembra più semplice. Spostiamoci di qualche fotogramma avanti, tipo al 5 e inseriamo un Fotogramma chiave.

Da pannello Trasforma ruotiamo la nostra immagine di 30 gradi, gli stessi gradi utilizzati durante la creazione dei nostri "petali". Ripetiamo questa operazione (inserimento Fotogramma chiave e rotazione di 30 gradi) mantenedo sempre costanti in numero di fotogrammi tra una chiave e un'altra, fino ad ottenere:

Finito! Il nostro Ajax Loader in Adobe Flash è terminato! Ecco qui sotto la versione GIF esportata da Flash.

Qui sotto il filmato Flash con uno sfondo in movimento (notate che non ci sono distorzioni o sgranature):

Il sorgente

Post correlati

• Wordpress: usare gli shortcodes (5)
• Wordpress: rimuovere i menu dell’amministrazione (12)
• Wordpress: personalizzare la navigazione tra i post (5)
• Wordpress: come scrivere un reply to comment usando jQuery (18)
• Wordpress: come creare passo passo un proprio login (21)

Download ed installazione delle SDK

Per prima cosa memorizziamo nei bookmark del nostro browser l'indirizzo del sito Google Maps API per Flash. Su questo sito troviamo tutto ciò che ci server per utilizzare le API di Google. Sulla destra della pagina è possibile accedere ad una serie di risorse, tra cui il link per scaricare le SDK da usare in Flash. Salvate lo ZIP sulla vostra scrivania (o Desktop) e scompattatelo. Nella cartella sdk/lib troverete un file chiamato map_1_16.swc. Copiate questo file nella clipboard (Command-C per Mac o Ctrl-C per PC) e posizionatelo all'interno di questo percorso:

Se la cartella Components non esiste già, createla e in questa create una cartella Google e incollate il file map_1_16.swc. Se per caso avevate già aperto Flash (frettolosi...), chiudetelo e rapritelo, in modo che possa ricaricare il componente appena installato.

Creiamo il filmato Flash

A questo punto apriamo Flash e creiamo un nuovo filmato. Aprite la finestra Componenti e dovreste trovare Google Maps:

Selezionate il componente GoogleMapsLibrary e trascinatelo nello stage. Nel primo frame del nostro filmato inserite il seguente semplice codice:

Nella riga 7 dovete sostituire la stringa API_KEY con la chiave di attivazione che fornisce Google. Per ottenerla basta tornare sul sito Google Maps API for Flash e richiedere una API Key cliccando su Sign up for a Google Maps API Key. Quando vi verrà chiesto di inserire l'url del sito sul quale volete utilizzare il filmato Flash che accede alle API di Google, nel caso non lo sapete ancora o voletete semplicemente provare il filmato in locale, inserite http://localost e cliccate su Generate API Key:

A questo punto possiamo già provare il filmato, ottenendo:

Aggiungiamo qualche controllo

Per prima cosa aggiungiamo i classici controlli di Posizione, Zoom e Tipo Mappa. Per fare questo dobbiamo essere sicuri che la mappa sia pronta all'uso. Basta quindi creare un listener sull'evento MapEvent.MAP_READY. Aggiungiamo quindi le seguenti righe di codice:

Impostiamo un indirizzo

A questo punto possiamo impostare la mappa in modo che visualizzi un indirizzo specifico, come la sede della mia società Saidmade a Modena - o qualsiasi altro indirizzo che preferite.
Suggerimento: per trovare le coordinate del nostro indirizzo, ovvero Latitudine e Longitudine, possiamo usare questo semplice e utile hack. Aprire il sito di Google Maps. Una volta sulla mappa cercate l'indirizzo che desiderate (ad esempio Via Cortese 10, Modena). Quando l'indirizzo è visualizzato sulla mappa, inserite questa riga nella barra indirizzi del browser:

Si aprirà una finestra pop-up con le coordinate utilizzabile nel codice:

Torniamo ad ActionScript e aggiungiamo le seguenti righe di codice nella funzione onMapReady():

Eseguiamo il filmato:

Aggiungiamo un Marker

Sempre all'interno della funzione onMapReady() aggiungiamo le seguenti righe di codice:

I Marker possono essere personalizzati a piacimento, sia tramite gli stili fornite dalle API stesse di Google, sia tramite Flash. Ad esempio aggiungendo questa import all'inizio del codice:

e sostituiendo il codice di creazione Marker visto prima con:

otteniamo il seguento effetto:

In alternativa è possibile associare direttamente un MovieClip come Marker. Essendo un MovieClip, ovviamente, esso potrà contenere animazioni, video o qualsiasi altro tipo di contenuto interattivo supportato in Flash. Inoltre è possibile disegnare linee e forme così da creare delle mappe interattive e ricche di contenuti multimediali.
Per aggiungere un MovieClip e sufficiente crearlo, usando ad esempio un'immagine o un'animazione Flash, e impostare le sue proprietà in questo modo:

Fatto questo modificate il codice di creazione Marker in:

Tutte le informazioni sulle API, le classi, metodi, eventi e proprietà sono disponibili su Google Maps API ActionScript Reference.
Inoltre l'intero pacchetto è stato recentemente aggiornato con molte novità interessanti, come le Mappe 3D.

Post correlati

• Web2.0: Adobe ci prova con Apollo? (2)
• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• UMap Flash Component (Beta v0.6) (0)
• Papervision3D (0)
• Net Software (0)

Gli effetti che si possono creare sono vari e le varianti si basano tutte sul medesimo procedimento, lasciando ampio spazio all'immaginazione. Ecco alcuni esempi:

Tutti questi effetti hanno in comune l'estrema semplicità della loro realizzazione. Per realizzarli, infatti, è sufficiente aggiungere un layer sotto il nostro rettangolo, che sarà il layer ombra. Su questo traccieremo un'immagine (nera) identica al rettangolo originale. Per fare questo si può procedere in vari modi, dipendenti dalla complessità della forma principale. Nel nostro caso è possibile selezionare i contorni del rettangolo cliccando sul layer mantenendo premuto il tasto Command (Control su PC). Ottenuta la selezione clicchiamo sul layer ombra e riempiamolo del colore nero:

• Tasto destro del mouse sulla selezione e click su Riempi
• Command + Cancel (ALT + Cancel su PC) se avete impostato il colore nero come colore di sfondo

A questo punto applichiamo un effetto Sfocatura al layer ombra: dal menu Filtri selezionate Sfocatura->Controllo sfocatura... e inserito un valore di 3/4 a seconda del gusto. Ora ridimensionate l'ombra (che con la sfocatura sarà visibile sotto il nostro rettangolo) di un 90%. Fatto questo non rimane che decidere il tipo di effetto ombra da applicare. Potete infatti distorcere il layer con l'apposita funzione presente nel menu Modifica:

Arrivati a questo punto la vostra immaginazione determinerà il risultato finale. Se non volete Alterare manualmente l'ombra potete sfruttare alcune delle distorsioni predefinite nel menu che trovate in alto a destra:

Selezionando Arcata, ad esempio, potete aggiustare la deformazione e ricreare l'ultimo effetto mostrato negli esempi di sopra. Giocando poi con la trasparenza e le simmetrie è possibile ottenere:

Post correlati

• Photoshop tutorial: tecniche di riflessione (9)
• Photoshop tutorial: pianeta con sole che sorge (4)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (19)
• Photoshop tutorial: effetto foglio piegato (15)
• Photoshop tutorial: curvare un testo a piacimento (8)

In rete ho trovato un bellissimo screencast su come configurare il nostro device iPhone in modo da poterlo utilizzare per il test di un'applicazione; al posto quindi del simulatore. Lo screencast dura circa sette minuti e ci guiderà passo per passo su tutto il processo di configurazione dell'ambiente XCode, la richiesta dei certificati, etc... così da poter lanciare il codice sorgente sul dispositivo iPhone. Contestualmente allo screencast potete avvalervi anche di una spiegazione testuale presente nel pacchetto.

Post correlati

• XCode: consigli sul Debugging Preferences (0)
• Xcode shortcut (0)
• Very short trick: fermare NSTimer (0)
• Objective-C: un’alternativa all’uso di CGRectMake (2)
• iPhone: tutti i font di sistema (0)

L'applicazione già fatta, se volete solo scaricarla, è disponibile sul mio Google Code repository:

• Sfoglia sorgenti
• Sorgenti .zip (1005Kb)

Vorrei far notare da subito come lo ZIP di questo esempio pesi meno di quello della scorsa volta!

Creiamo il progetto

Iniziamo creando il nostro progetto SecondApp (per distinguerlo da FirstApp), anche se questa volta sceglieremo Window-based Application:

Adesso andiamo ad eliminare tutto ciò che riguarda Interface Builder. Eliminiamo il file MainWindow.xib, situato nella cartella Resources: eliminatelo anche dal file system, quindi selezionate Also Move to Trash. Selezionate, poi, il file SecondoApp-info.plist ed eliminate il riferimento alla MainWindow nella casella Main nib file base name:

A questo punto non abbiamo più nessuna Window, almeno tramite Interface Builder. Quindi apriamo il file main.m, situato in Other Sources, e modifichiamo la funzione main() in questo modo:

Apriamo quindi SecondAppAppDelegate.m e creiamo la Window principale via codice:

Potete già provare l'applicazione; se appare una window gialla avete fatto tutto bene!

Nel file SecondAppAppDelegate.h possiamo eliminare IBOutlet, necessario solo se si usa Interface Builder. Inoltre aggiungiamo qui le nostre variabili globali che, nella scorsa volta, avevamo inserito nel Controller. Modifichiamo quindi il file SecondAppAppDelegate.h:

Anche in questo caso abbiamo preparato la definizione del metodo controllaNumero, come la scorsa volta, ma abbiamo eliminato l'indicazione IBAction, in quanto non stiamo usando Interface Builder.

Costruiamo l'interfaccia da codice

E' giunto il momento di creare tramite codice tutti i componenti della nostra interfaccia. Torniamo nel file SecondAppAppDelegate.m, posizioniamoci prima del [mainWindow release] ed inseriamo il seguente codice:

Dato che l'applicationDidFinishLaunching corrisponde alla viewDidLoad della scorsa volta, subito dopo il [mainWindow release]; inseriamo:

Ora non ci rimane che implementare il metodo controllaNumero, che sarà identico (a parte il prototipo) a quello usato la scorsa volta:

Abbiamo finito!

Conclusioni e considerazioni

Questo esempio non fa uso diretto di una UIView o di un UIViewController, proprio perchè volevo lasciarlo il più semplice e snello possibile e, anche, per dimostrare che non sono elementi sempre necessari. Tuttavia inserire gli oggetti direttamente nella window può avere un qualche senso in questo esempio ed in altri sporadici contesti. L'uso delle UIView e dei UIViewController portano comunque benefici in tantissimi altri casi, ein alcuni sono praticamente indispensabili; come avremo modo di vedere in futuro.

Post correlati

• iPhone FirstApp: indovina il numero – parte 1 (0)
• Hi phone (7)
• Xcode shortcut (0)
• Objective-C: un’alternativa all’uso di CGRectMake (2)
• Objective-C: conversione dei tipi (0)

Aprite il file search.php e inserire il seguente codice all'interno del loop centrale o, se utilizzate un tema standard, cercate il div class="entry". In pratica andiamo a modificare l'emissione del risultato dopo una ricerca:

Tutte le parole inserite nel campo di ricerca saranno evidenziate (la classe CSS evidenzia potete definirla a piacere, ad esempio con un background giallino simile ad un evidenziatore... o quello che volete) nel risultato se presenti nel riassunto. Questa procedura, infatti, ha il limite di agire solo sulla prima parte del nostro post (excerpt) e non su tutto il suo contenuto. Tuttavia è una buona alternativa all'installazione di un ulteriore plugin.

Post correlati

• WP Bannerize 2.4.1 (0)
• Wordpress: rimuovere i menu dell’amministrazione (12)
• Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)
• Wordpress: come scrivere un reply to comment usando jQuery (18)
• Wordpress Plugin: Flash Feed Scroll Reader (7)

Sintassi

Per utilizzare gli shortcodes è sufficente creare una funzione di hook, con dei parametri standard e impostare lo shortcodes tramite add_shortcode():

Questo codice può essere posizionato nel file functions.php. Durante la scrittura del post inserendo mio_shortcode tra parentesi quadre sarà eseguito il codice dell'hook (della funzione) mio_shortcode_hook().

La funzione di hook, e il nostro shortcode, possono essere utilizzati in vari modi a seconda delle necessità:

Note: nel codice qui sopra ho dovuto inserire uno spazio nello shortcode di chiusura tra l'apertura della parentesi quadra e lo slash. Tale spazio andrà eliminato nel vostro codice. Tutto questo a causa di un conflitto con il plugin che uso per visualizzare il codice, in quanto anc'esso usa una sintassi simile a quella degli shortcode

Gestione degli attributi

Gli attributi inseriti in uno shortcode sono facilissimi da gestire ed è possibile impostare dei valore di default. Ecco ad esempio come creare uno shortcode che gestisca un titolo formattato in modo speciale:

Similmente a come abbiamo visto in Wordpress: wp_parse_args() , la gestione degli attributi è davvero semplice e permette di impostare dei valori di default in caso di assenza degli attributi stessi. Il codice sopra esposto "fonde" l'array $attrs con quello dinamico tramite la funzione shortcode_atts() (cugina della wp_parse_args()), rendendo disponibile nello scope della funzione (vedi extract()) gli attributi come variabili. Gli attributi devono essere tutti in lowercase!

Gestione del contenuto

La modalità con il content è quella più versatile in particolari casi, ecco un esempio chiarificatore:

Utilizzando lo shortcode nel nostro post:

Avremo come output:

Possiamo migliorare il nostro esempio introducento anche degli attributi per rendere più personalizzabile il nostro shortcode:

Come già indicato potete trovare molte informazioni sulla documentazine ufficiale di Wordpress. Ecco qualche utile shortcode.

Mostrare AdSense nei post

Inserire il codice qui sotto nel vostro file functions.php. Cambiate i codice Google AdSense con i vostri.

Nel posto basta inserire:

Aggiungere note ad un post visibile solo dall'amministratore

Questo shortcode permette di aggiungere delle note ad un post visibili solo ad un amministratore.

Pubblicherò in futuro altri shortcode utili...

Post correlati

• Wordpress: rimuovere i menu dell’amministrazione (12)
• Wordpress: functions.php, qualche funzione utile (0)
• Wordpress: filtrate il contenuto dei commenti (2)
• Wordpress: estendere le informazioni utente (0)
• Wordpress: come scrivere un reply to comment usando jQuery (18)

In questo post realizzeremo una particolare versione di "Indovina il numero" e la chiameremo FirstApp. Più avanti riscriveremo la stessa applicazione con metodi diversi, ad esempio creando manualmente un UIView o lasciando da parte Interface Builder.

L'applicazione già fatta, se volete solo scaricarla, è disponibile sul mio Google Code repository:

• Sfoglia sorgenti
• Sorgenti .zip (1.4Mb)

1 - Iniziamo

Apriamo XCode, dal menu File selezioniamo New Project e scegliamo, per questa versione, di partire dal classico View-Based Application (la prossima volta partiremo da Window-Based Application ottenendo lo stesso identico risultato). Chiamate il progetto FirstApp e salvatelo dove più vi fa comodo.

Come noterete sto usando ancora la versione di XCode per le SDK 2.2.1, in quanto le SDK 3.0 non sono ancora "molto" stabili. Tenete bene a mente quest'immagine in quanto con la nuova versione di XCode alcuni template non saranno proprio identici e alcune cose cambieranno. Tuttavia per ora non vi dovete preoccupare di questo a meno che non state già utilizzando l'ultima release di XCode.

In questa versione useremo Interface Builder quindi, per prima cosa, andremo a disegnare la nostra interfaccia utente. Apriamo dunque la cartella Resources e fate doppio click su FirstAppViewController.xib. Questo file è proprio di Interface Builder, come il file MainWindow.xib (vedi anche l'estensione del file X Interface Builder).
Eventuali altri controller saranno posizionati sempre in questa cartella. Le restanti cartelle contengono tutti gli altri file della nostra applicazione e, in particolare, noi lavoreremo molto su quelli presenti nella cartella Classes.
Tornando ad Interface Builder ci troveremmo davanti ad una schermata vuota che rappresenta la nostra View, il contenitore dove saranno posizionati gli oggetti UIKit della nostra interfaccia utente. Questo oggetto visivo che stiamo guardando tramite Interface Builder è collegato al file FirstAppViewController.m (e .h) presente nella cartella Classes.

Nella finestra Library troviamo tutti i componenti visivi per creare interfaccie standard, piacevoli ed accessibili sul nostro Apple iPhone.
Questi sono comodamente ordinati per tipologia (vedi cartelle azzurre in alto). Per inserirli nella nostra View è sufficiente selezionare il componente dalla fienstra Library e trascinarlo all'interno della nostra finestra View, dove potremmo posizionarlo, ridimensionarlo e configurarlo a nostro piacimento (tutte cose fattibili anche da codice, come vedremo prossimamente).
Prima di proseguire, se è la prima volta che lavorate con Interface Builder, divertitevi un po' provando i vari componenti e, quando ne avrete abbastanza, fate in modo di ottenere qualcosa di simile all'immagine mostrata qui sotto, ovvero un titolo realizzato con il componente UINavigationBar, un testo introduttivo (UILabel), un campo testo per l'inserimento del numero da indovinare (UITextField) e - finalmente - un semplice bottone (UIButton) per verificare se abbiamo indovinato:

L'impostazione dei componenti in Interface Builder avviene tramite una particolare finestra divisa sempre in quattro schede: attributes, connections, size e identity, una sorta di "ispettore" dei componenti. In base al componente selezionato la finestra Identity si configura con le appropriete caratteristiche relative al componente. Se selezioniamo la UINavigationBar, ad esempio, avremmo a disposizioni tutte le impostazioni possibili per questo tipo di componente.

2 - Codice

Adesso che abbiamo stabilito e posizionato i nostri componenti visivi per l'interfaccia, andiamo a scrivere un po' di codice per manipolarli. Prima di tutto apriamo il file FirstAppViewController.h e facciamolo diventare così:

Le righe 12, 13 e 14 definiscono le "variabili" del nostro Game. Le prime due sono dei puntatori ai nostri oggetti grafici inseriti con Interface Builder: il campo testo e il bottone. IBOutlet, davati al tipo, serve a creare un link, una referenza, verso l'interfaccia .xib di Interface Builder. Infatti, nel caso volessimo creare i nostri componenti esclusivamenti tramite codice, senza passare per Interface Builder, basta eliminare la IBOutlet, in quanto inutile. La riga 17, invece, definisce un metodo (un messaggio-evento) che vogliamo far scattare quando si clicca il bottone. In questo file .h (header file) abbiamo eseguito solo definizioni. L'implementazione del codice vero e proprio avviene nel corrispettivo file .m: FirstAppViewController.m. Cliccando si CMD+ALT+FRECCIA SU si passa alternativamente dal file .h al file .m. Andiamo quindi ad editare FirstAppViewController.m. Prima di tutto eliminiamo i commento al meotdo viewDidLoad (33 esima riga circa) e facciamolo diventare:

viewDidLoad è uno dei metodo richiamati all'avvio dell'applicazione. Se volete corrisponde un po' al document onload di Javascript o al $(document).ready() di jQuery. Le righe che ho aggiunto sono la 5 e la 6. La 5, in particolare, crea un numero casuale compreso da 1 a 10! La riga numero 6, invece, è solo per debug e stampa sulla console il numero generato. Adesso scriviamo il codice (l'impementazione) del metodo controllaNumero() che abbiamo definito nel file FirstAppViewController.h:

Questo codice, l'ultimo che scriveremo prima di passare nuovamente a Interface Builder, possiamo definirlo come il cuore del sistema, o meglio del gioco. Esso, infatti, verifica se il numero inserito nel campo testo (UITextField) è minore, maggiore o uguale al numero "pensato" dal nostro iPhone. In base all'esito mostra un alert. La riga 2, come sempre, è solo per debug e stampa sulla console un messaggio quando clicchiamo il bottone. La riga 4, invece, è interessante; questa trasforma il contenuto testuale del nostro campo testo in un intero numerico. Questo è necessario per confrontare il numero casuale numeroACaso con il numero inserito dall'utente. In Objective-C, come nel C, non esistono conversioni di tipo implicite, come il altri linguaggi ad alto livello che non supportano la tipizazzione delle variabili in senso strict. In alcuni linguaggi, infatti, si possono confrontare stringhe e interi senza eseguire nessuna conversione esplicita o casting.

La riga 5 prepara un puntatore ad un stringa message che conterrà la risposta da visualizzare nell'alert. Le righe dalla 9 alla 17 controllano il numero inserito dall'utente con il numero casuale e ne traggono le dovute conseguenze. Ho inserito appositamente queste "if" brutali per rendere il più chiaro possibile il codice. In alternativa avremmo potuto usare:

Uniamo il code con Interface Builder

Torniamo adesso su Interface Builder, cliccando sempre il file FirstAppViewController.xib. Quello che andremo a fare ora permetterà di linkare l'interfaccia visiva preparata con Interface Builder e il codice che abbiamo scritto, in particolare con i componenti evidenziati con IBOutlet. I componenti che dobbiamo linkare al nostro codice sono il campo testo e il bottone, definiti nella definizione dell'interfaccia nel file FirstAppViewController.h. A questi gli avevamo dato il nome rispettivamente di numero e bottone. Da Interface Builder abbiamo vari modi per linkare i componenti visivi con il codice, uno dei più semplici è quello di cliccare con il tasto destro del mouse sul nostro componente visivo, ad esempio il campo testo (UITextField):

Questa finestra, diversa per ogni componente, ci mostre tutto quello che possiamo "linkare" con il codice. In particolare a noi interessa l'ultima voce, quella nella sezione Referencing Outlets: New Referencing Outlet. Clicchiamo sul "cerchietto" posto a destra e - mantenendo premuto il tasto del mouse - trascinatelo nella finestra princiaple FirstAppViewController.xib sopra l'icona FirstAppViewController (File's Owner):

Rilasciando il tasto del mouse apparirà un menu con l'elenco di tutte le "variabili" (properties) IBOutlet e definite come UITextField:

Nel nostro caso selezioniamo numero. Ripetiamo lo stesso identico procedimento anche per il bottone, con l'aggiunta che per quest'ultimo avevamo definito anche un evento: - (IBAction) controllaNumero;. Alla fine otteremo:

Conclusioni

Se avete fatto tutto in modo corretto abbiamo finito! Il nostro giochino è pronto. In caso potete scaricare il sorgente completo qui. Ovviamente questo è solo un esempio e mancano alcuni dettagli per farlo diventare una vera applicazione; dalle icone 57x57 ai controlli sul numero inserito e altri dettagli ancora. Il processo di sviluppo qui illustrato può essere variato, passando ad esempio per Interface Builder una volta sola, cioè alla fine: prima si scrive tutto il codice e poi si va su Interface Builder a linkare gli oggetti. In questo esempio siamo passati subito su Interface Builder per disegnare la bozza della nostra interfaccia, essendo l'applicativo semplice.

La prossima volta vedremo come realizzare il medisimo "giochino" senza usare Interface Builder.

Post correlati

• iPhone SecondApp: indovina il numero – parte 2 (0)
• Hi phone (7)
• Xcode shortcut (0)
• Objective-C: un’alternativa all’uso di CGRectMake (2)
• Objective-C: conversione dei tipi (0)

Le basi

Prima di tutto dobbiamo capire come e quando un plugin Wordpress viene caricato nel sistema. Quando si attiva un plugin dall’amministrazione, il file che contiene il codice principale, riconosciuto dalle classiche linee di commento:

viene caricato sia se ci troviamo nel front-end sia se ci troviamo nell’amministrazione (back-end):

Questo comportamento è di per sé corretto e, probabilmente, in molti casi non è preso in considerazione dallo sviluppatore. Inoltre alcuni plugin hanno una struttura (ad esempio non hanno impostazioni e quindi non necessitano di una amministrazione) tale da rendere inutile soffermarsi su tale punto.
Tuttavia va considerato che alcuni plugin hanno una consistente amministrazione, cioè portano con se molto codice usato solo nel back-end di Wordpress. In questi casi se non si prendono le opportune precauzioni si rischia di far caricare al front-end, cioè la parte visibile a navigatori, codice completamente inutile che non fa altro che appesantire il caricamento del blog.

Possibili conflitti: spazio dei nomi

Dal punto precedente si deduce un altro fatto importante; tutti i plugin Wordpress vengono caricati nella stessa area di funzionamento, il ché si traduce nella spiacevole conseguenza che se due diversi plugin hanno una funzione (una variabile o una costante) identificata dallo stesso nome, questi andranno in conflitto tra loro!

L’ideale, quindi, sarebbe quello di riuscire a:

• Separare il caricamento del codice per il front-end ed il back-end
• Proteggere lo “spazio dei nomi” per evitare possibili conflitti con altri plugin caricati nel sistema

Front-end o Back-end?

Il modo più semplice per determinare se si è in amministrazione (back-end) è quello di chiamare la funzione is_admin():

In pratica, schematizzando, possiamo realizzare:

ovvero:

Uso delle classi per proteggere lo spazio dei nomi

Per impedire sovrapposizioni spiacevoli un buon modo è quello di “avvolgere” le nostre funzioni e le nostre variabili in opportuni contenitori: gli oggetti. Definendo una classe abbiamo più possibilità di proteggere i nomi delle nostre funzioni ottenendo come ulteriore vantaggio il possibile riutilizzo del codice in futuri plugin. Questa tecnica permette di avere due plugin diversi, quindi due oggetti diversi, con il medesimo metodo (funzione). Il conflitto viene eliminato grazie alla nomenclatura diversa delle classi e delle loro istanze.

Plugin Sketch

Detto tutto ciò vediamo come realizzare uno Sketch (che potete trovare sempre aggiornato nel repository Google Code di Saidmade), uno scheletro, da poter riutilizzare ogniqualvolta abbiamo bisogno di scrivere un plugin. Prima di tutto nella nuova organizzazione ad oggetti rendiamoci conto che se è vero che esiste una separazione "netta" tra la parte di back-end e quella front-end è vero anche che alcune "funzioni" sono e saranno condivise! Questo, a livello di programmazione ad oggetti, ci indica la strada da percorrerre in una possibile organizzazione del codice. Ad esempio, l'intuito ci suggerisce che la creazione di una classe "madre", cioè una classe da cui deriveranno le nostre classi "client" (front-end) e "admin" (back-end), sarebbe una buona cosa!
Questa classe "madre" conterrà tutte le proprietà (variabili) e metodi (funzioni) condivise dagli ambienti front-end e back-end:

Avremo quindi la nostra classe "madre" e due classi specifiche per il front-end e il back-end:

Il file principale (wp-sketch.php) non farà altro che includere nel modo opportuno queste classi ed istanziarle a dovere:

In questo "contesto" bisogna solo stare attenti a definire in modo univoco le variabili che contengono le istanze delle classi ($wp_sketch_admin e $wp_sketch_client) e i nomi delle classi stesse (WPSKETCH_ADMIN e WPSKETCH_CLIENT), ma non i metodi e le proprietà in esse presenti.

Entrambe le classi WPSKETCH_ADMIN e WPSKETCH_CLIENT sono "sottoclassi" (figli) di WPSKETCH_CLASS, definita nel file wp-sketch_class.php. Questa, come accennato sopra, dovrà contenere solo gli elementi condivisi (variabili e funzioni) in quanto viene sempre caricata a prescindere se ci troviamo nel back-end o nel front-end.

Concludendo...

È possibile scaricare l'intero scheletro dal repository Google Code di Saidmade. In questo troverete anche un file wp-sketch_functions.php, utilizzato per evitare che le chiamate alle funzioni nel front-end si traducano un una chiamata oggetto->metodo(). Di fatto è un file opzionale non sempre necessario.

Possibili sviluppi di quest'approccio sono la sempre migliore identificazione della sezione su cui stiamo operando e Wordpress, in questo senso, offre innumerevoli azioni di ottimizzazione da compiere, nell'ottica di caricare solo il codice necessario e quando davvero serve. Ulteiori esempi su questo versante li vedremo prossimamente.

Post correlati

• WP Bannerize 2.4.1 (0)
• Wordpress: rimuovere i menu dell’amministrazione (12)
• Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)
• Wordpress: come scrivere un reply to comment usando jQuery (18)
• Wordpress: bugs nell’installazione dei plugins da un archivio ZIP (3)

Ora, a parte qualche raro caso di “semplice” distorsione, questa procedura può andare più che bene, ma cosa accade se, ad esempio, vogliamo deformare il nostro testo in modo tale che segua una circonferenza? In questo caso applicando la deformazione “arco” o tentando di usarne più di una i risultati saranno comunque scoraggianti. Esiste infatti un modo molto più semplice ed efficace per deformare un testo; è possibile farlo con pochissimi passi. Immaginiamo di voler inserire una scritta “intorno” ad un cerchio. Prima di tutto creiamo un nuovo layer ed effettuiamo un selezione circolare:

A questo punto clicchiamo con il tasto destro sulla selezione e selezioniamo “crea tracciato di lavoro…”

Scegliamo la “tolleranza” in modo tale che il “tracciato di lavoro” sia il più possibile una circonferenza.

Creato il nostro tracciato selezioniamo lo strumento testo e avviciniamoci alla curva fino a quando il cursore non assomiglia a quello della figura qui sotto:

A questo punto… non resta che scrivere!

Tramite i “tracciati”, quindi, è possibile far percorrere al nostro testo qualsiasi tipo di curva. Inoltre, una volta che il nostro testo segue la curva del tracciato, come nella figura qui sopra, è sempre possibile modificare il tracciato tramite lo strumento “seleziona tracciato” :

Post correlati

• Photoshop tutorial: pianeta con sole che sorge (4)
• Photoshop tutorial: icone stile web 2.0 in 3 passi (19)
• Photoshop tutorial: effetto foglio piegato (15)
• Photoshop tutorial: effetti con le ombre (0)
• I nuovi strumenti di Adobe Photoshop CS3 Extended (0)

È possibile tuttavia ordinare un tale array in un momento successivo, senza passare per il database, sfruttando la funzione php usort(). Questa permette di eseguire un ordinamento tramite una funzione callback personale. Ad esempio immaginiamo di voler ordinare i nostri post per post_author o per un qualsiasi altro campo che, a sua volta, può essere un array o un altro stdClass Object:

Giocando sul maggiore ">" e minore "<" dell'ultima istruzione è possibile ordinare in modo decrescente o crescente.

Queste situazioni possono essere molto frequenti in contesti avanzati dove, ad esempio, si hanno una serie di elenchi da sottoporre a scansione. Un altro esempio è nel caso di aggregazioni, dove più liste di post, recuperati al limite da blog diversi, devono essere ordinate.

Post correlati

• Wordpress: wp_parse_args() (3)
• Wordpress: come scrivere un reply to comment usando jQuery (18)
• Very short trick: pagine padri e pagine figlie in Wordpress (1)
• Very short snippet: Wordpress, prossimamente sul vostro blog (1)
• Very short snippet: visualizzare una lista di post per categoria o tag (2)

• adjacent_post_link()
• next_posts_link()
• posts_nav_link()

Con la release 2.7 di Wordpress, poi, sono stati aggiunge altre funzioni (o rese pubbliche) usate in realtà all'interno di quelle già note. Ad esempio la nuova get_next_posts_link() è usata da next_posts_link(), disponibile dalla release 0.71. Ovviamente la get_previous_posts_link() viene chiamata da previous_posts_link().

Per ragioni storiche e di compatibilità con i "vecchi" template, analizzando il codice sorgente di Wordpress ci si rende conto che alcune funzioni sono davvero ridondanti. Ad esempio posts_nav_link() chiama al suo interno previous_posts_link() e next_posts_link(). Tuttavia il codice (nella release 2.7 di Wordpress) di next_posts_link() è:

Personalizzazione

Lasciando da parte le questioni di codice sorgente a basso livello, torniamo ad affrontare l'argomento di questo post, cioè di come modificare facilmente il layout classico dell'avanti e indietro. La navigazione avanti ed indietro può essere posizionata dove si vuole, ad esempio nel file archive.php si può usare:

Dato che ci stiamo muovendo in un archivio, che è limitato rispetto all'intera possibilità di post (perchè filtra per data, argomento, tag, etc...) usiamo next_posts_link() e previous_posts_link(). Impostando poi le label in modo opportuno, come nell'esempio, possiamo operare le modifiche di layout tramite il solo foglio di stile, lasciando un output HTML valido. Ad esempio è possibile "nascondere" le label e sostiturle con un'immagine usando:

L'ultima riga è quella che permette di nascondere i testi, ed è per questo che sono stati inseriti degli span nella chiamata alla funzione next_posts_link() e previous_posts_link()

Per la navigazione nel file single.php, spesso si usa:

Anche in questo caso il codice CSS è sempre lo stesso.

Post correlati

• Wordpress: modifcare AdminBigWidth per gli sviluppatori (1)
• Wordpress: migliorare la lista dei commenti (3)
• jQuery: bordi rotondi sulle immagini per sovrapposizione (1)
• Wordpress: come scrivere un reply to comment usando jQuery (18)
• Very short trick: versatilità delle classi CSS (3)

Lo stesso Actionscript, come annunciato, prevede la non dichiarazione dei tipi e delle variabili! Quest’ultimo comportamento va forzato eliminando la spunta nella casella “Modalità rigorosa” della finestra di Impostazioni Actionscript 3.0:

Così facendo un codice come questo qui sotto non produrrà nessun errore:

Alla riga 2 la variabile mio_nove non solo non contiene il tipo, ma non è nemmeno stata dichiarata tramite la keyword var. Nonostante sia stata mantenuta la possibilità di dichiarare le variabili in questa modalità “blanda”, è estremamente più corretto, utile ed efficacie specificare il tipo dato associato alla nostra variabile:

Questo è il modo corretto per dichiarare le variabili, utile per migliorare le performance e la solidità della nostra applicazione.

Vantaggi nell’uso dei tipi

C’era un tempo in cui un programmatore doveva risparmiare memoria a livello bit! Quando il codice aveva pochi Kilobyte a disposizione, usare 8 bit per mantenere i mesi dell’anno era davvero uno spreco immane. Con 4 bit, infatti, possiamo memorizzare 16 valori, dallo 0 (0000) al 15 (1111). Oggi, evidentemente, i tempi sono cambiati. Un personal computer dispone in media di qualche Giga di RAM (il mio ne ha 8!). Diventa quindi di uso comune non fare più attenzione al “consumo” di RAM e risorse.
Ad un esame più attento, poi, il problema del consumo maggiore di RAM non riguarda solo uno “spreco” fine a se stesso; una cattiva gestione dei tipi può rendere il codice più lento in quanto obbliga compilatore, interprete ed eseguibile finale a lavorare su tipi più “capienti” del necessario.

Actionscript 3.0 ha introdotto alcuni tipi dati nuovi che permettono di sviluppare applicazioni sicuramente più performanti grazie all’indicazione – preventiva – della tipologia di dato da trattare. Un esempio classico riguarda i cicli for. Partendo da questa tabella:

• Number: (64 bit) da -9.007.199.254.740.992 a 9.007.199.254.740.992 (per gli interi)
• int: (32 bit) da -2.147.483.648 (-2³¹) a 2.147.483.647 (2³¹ - 1)
• uint: (32 bit) da 0 a 4.294.967.295 (2³² - 1)

Scrivere:

rappresenta palesemente uno “spreco di risorse”, molto meglio e sufficiente sarebbe:

In linea generale sarebbe buona regola fare riferimento a questa tabella:

• Number: qualsiasi valore numerico, con o senza decimali
• int: numero intero senza decimali
• uint: numero intero senza segno, vale a dire un numero intero non negativo

Questo significa che se dobbiamo memorizzare valori interi, cioè non decimali, positivi, uint è il tipo dato perfetto! Se abbiamo necessità anche del "segno", cioè valori interi negativi, possiamo avvalerci di int. Nei casi di numeri molto molto grandi e con decimali, allora il tipo Number è l'unica soluzione a nostro disposizione.

Post correlati

• Actionscript 3.0 for beginners: lesson #4 (3)
• Actionscript 3.0 for beginners: lesson #3 (0)
• Actionscript 3.0 for beginners: lesson #2 (4)
• Actionscript 3.0 for beginners: lesson #1 (9)
• Flash CS3: creare un effetto Reflex su qualsiasi MovieClip (12)

Cosa ci serve...

Prima di tutto scaricate SimplePie e inserire, da qualche parte, il file simplepie.inc sul vostro sito/blog. Il codice per leggere e visualizzare un feed è il seguente:

In questo codice di esempio ho estratto gli ultimi 10 Feed da undolog.com e li ho formattati usando una lista ul/li. Ho recuperato sia il titolo ($item->get_title()) che una parte del contenuto ($item->get_description()). Ovviamente inserite questo codice all'interno di una formattazione HTML di questo tipo:

Veniamo ora alla parte Javascript per visualizzare "a turno", con una semplice animazione, i singoli titoli/contenuto dei feed:

Nel file sample.js, che potete chiamare e posizionare dove volete, abbiamo:

Il risultato finale lo potete vedere su saidmade.com

Post correlati

• Wordpress: come scrivere un reply to comment usando jQuery (18)
• Wordpress: come creare passo passo un proprio login (21)
• jQuery footer caption Plugin: aggiungere didascalie alle immagini (0)
• Adobe AIR e le API di Feedburner: reloaded (3)
• Wordpress Plugin: Flash Feed Scroll Reader (7)

1. Creiamo l'immagine

Prima di tutto creiamo l'immagine che vogliamo posizionare in uno degli angoli destro o sinistro. L'immagine qui sotto, di 163x163 pixel, ecostruita per l'angolo superiore sinistro.

Per rendere l'effetto di sovrapposizione completo bisogna scegliere, al momento del salvataggio, un formato che supporti la trasparenza, come il GIF o il PNG.

2. Il codice HTML

Salvata la nostra immagine possiamo inserirla nella nostra pagina, avvolgendo il tag img con un div contenitore, che useremo puoi per posizionare l'immagine nell'angolo:

Se il nostro sticker deve possedere un link, possiamo avvalerci del tag map per definire un'area sensibile che non sia rettangolare. Lo sticker presentato in questo esempio, infatti, hai una forma obliqua e la trasparenza ne evidenzia perfettamente i contorni. Sarebbe quindi sconveniente permette di cliccare su un'area vuota aggiungendo semplicemente un tag a introno all'immagine. Usiamo allora questa sintassi:

L'attributo coords del tag area definisce le coordinate del nostro ribbon.

3. il codice CSS

Aggiungiamo adesso le definizioni degli stili che permetteranno al nostro sticker di posizionarsi sulla pagina in modo corretto:

Se vogliamo che il ribbon rimanga "appiccicato" al video, anche se scorriamo la finestra, basta modificare il tipo absolute dello stile position in fixed:

Nota: il tipo fixed, nello stile position, fino a poco tempo fa non era supportato da tutti i browser. Per rendere l'effetto, infatti, si era costretti ad usare una funzione Javascript che, ad intervalli regolari, controllava l'eventuale scorrimento del contenuto della finestra e riposizionava il ribbon in modo che desse l'impressione di rimanere sostanzialmente immobile. Fortunatamente, oggi, a parte qualche obsoleta versione di Explorer, tutti i browser supportano il tipo fixed.

Post correlati

• Web2.0: Gran Paradiso-Firefox 3.0 e Apollo (2)
• Web2.0: Adobe ci prova con Apollo? (2)
• jQuery: bordi rotondi sulle immagini per sovrapposizione (1)
• Very short trick: come centrare elementi sulla pagina, anche su IE5 (3)
• Snipplr code 2.0: frammenti (snipp) di codice utile (0)

Flash vs Flex

Nonostante apprezzi Adobe AIR come tecnologia e come è stato implementato nelle piattaforme HTML (Dreamweaver), Flash e Flex, non sono "ancora" del tutto ben disposto verso Flex! Non voglio certo mettere a confronto Flash con Flex, nonostante hanno molti punti in comune ma anche molte differenze. Tuttavia non ho assolutamente apprezzato la politica Adobe rispetto a questo spinoff a volte privo di senso. Avrei preferito, invece, la costituzione di un unico ambiente (Flax) di sviluppo e non questa "inutile" separazione. Inoltre, da buon programmatore, gli ambienti troppo "visuali" non mi piacciono granchè e Flex sembra proprio destinato a diventare pericolosamente simile a Visual Basic, che tra l'altro conosco molto bene e su cui ho lavorato per molti anni. Insomma, Flex sinceramente non l'ho capito e non ho capito cosa vuole fare Adobe con questo branch. Se Flex è indicato come l'ambiente ideale per scrivere RIA qual'è il destino di Flash? Tutte le features di Flex, effettivamente non disponibili "direttamente" in Flash, potrebbero - volendo - essere inserite senza costringere ad acquistare licenze multiple per sviluppare - alla fine - la stessa identica cosa.

Differenze tra Flash e Flex

La prima cosa che noterete nella versione Flash è la presenza di un po' più codice. Infatti Flex risolve alcune procedure sfruttando direttamente i "suoi" file MXML. A ben guardare, comunque, non c'è tanto più codice di quello che si potrebbe pensare. La procedura più corposa, che in Flex è "oscurata", è la connessione via REST alle API di Feedburner. Uno dei vantaggi nell'uso di un codice scritto in Flash è che lo stesso può funzionare immediatamente sia come applicativo AIR che come filmato Flash su una qualsiasi pagina Web! Sempre se non abbiamo utilizzato funzionalità specifiche di un amiente desktop. Inoltre, ed ecco un altro motivo per cui Flex non mi convince affatto, l'applicazione Adobe AIR creata con Flash risulta 5 volte inferiore a quella proposta da Napolux e compilata con Flex builder:

• Feedburner.air (Flash) 59,1 KB (60.576 byte)
• Feedburner.air (Flex) 316 KB (323.584 byte)

Nota: ad onor del vero questo è imputabile a tutta una serie di componenti (come l'mx.controls.Alert ) che vengono inclusi in Flex e non nella mia versione Flash; in Actionscript 3.0, infatti, tutta una serie di funzionalità è stata eliminata: tutti i "pachetti" mx presenti in Actionscript 2.0 e migrati ora sotto Flex! Comunque mi riservo quanto prima di effettuare maggiori test al riguardo.

Il codice

Deciso o meno di compilare il nostro filmato come applicazione Adobe AIR (cosa che potete fare in qualsiasi momento successivo), ecco la classe documento Feedburner.as: (tutti i codici sono disponibili su Google Code)

La parte di interfaccia è disponibile su Feedburner.fla.

Post correlati

• Flash CS3: comunicazione con un Web Server (0)
• UMap Flash Component (Beta v0.6) (0)
• Google Maps component per Flash (5)
• Adobe AIR 1.0, Adobe Flex 3.0 e il nuovo Adobe Open Source (0)
• 10 motivi per passare ad Adobe Flash CS3 (3)

Importare le definizioni

Con Actionscript 3.0 è stato fatto un grande lavoro di pulizia e sistemazione nell'alberatura delle classi (contenute nei pacchetti, package) utilizzate durante lo sviluppo. In altri linguaggi di programmazione, come il C ad esempio, quando si desidera utilizzare una funzionalità bisogna esplicitamente "importarla" nel codice. Questa operazione di "importazione" è necessaria per permettere al compilatore di avere tutti i codici e le definizioni legate alla funzionalità che vogliamo usare. In Actionscript 3.0, tuttavia, l'istruzione import non va confusa con l'equivalente C/C++ #include; Actionscript 3.0 mette a disposizione l'istruzione include che è identica all'#include del C/C++. Quest'ultima, infatti, "include" effettivamente del codice che, se usato o meno, viene compilato nell'eseguibile finale. L'istruzione import è di più alto livello e risulta più "intelligente" in fase di compilazione. Essa serve principalemente per accedere alle classi senza doverne specificare il nome completo. In alre parole invece di usare forme del tipo:

Importando la definizione dallo specifico pacchetto (o libreria se preferite), si ottiene il più semplice e leggibile:

Nel nostro esempio, all'interno della dichiarazione del package della classe, troviamo subito tre import:

Il primo import rende disponibili tutte le classi e le definizioni all'interno del package flash.display. In alternativa avremmo potuto sostituire l'intero pacchetto con l'importazione (mirata) delle singole classi e definzioni che usiamo, ovvero:

Questa operazione di "dettaglio" non è comunque necessaria ai fini del risultato finale. Se una classe importata non viene utilizza nello script, non viene - intelligentemente - esportata nel file SWF.

Questo significa che è possibile importare pacchetti di grandi dimensioni senza doversi preoccupare delle dimensioni del file SWF; il codice byte associato a una classe viene incluso in un file SWF solo se tale classe viene effettivamente utilizzata.

Al massimo, se esageriamo con gli "asterischi", cioè con sintassi come flash.*, possiamo avere un "leggero" rallentamento durante la fase di compilazione! Nella "vita di tutti i giorni", dunque, è possibile utilizzare in tutta tranquillità la sintassi usata nel nostro esempio.

Costanti statiche

Ecco un'altra caratteristica interessante di Actionscript 3.0: le costanti statiche. Nell'esempio ne ho introdotte alcune a titolo di esempio:

È curioso notare che la stessa sequenza può essere scritta come:

Lasciando da parte queste "curiosità" dell'ambiente Flash CS3, diciamo che le variabili o costanti statiche sono associate alla classe e non all'istanza della classe! Vedi Classi, Oggetti e Istanze. Questa è una differenza importantissima, infatti nel nostro caso se scriviamo - a titolo di esempio:

Verrà generato un errore. Questo perchè le costanti o variabili statiche vengono associate direttamente alla definizione della classe stessa e non ad una sua istanza. Il modo corretto è:

Le costanti o variabili statiche hanno la caratteristche di non essere "istanziate" più volte. Vengono usate in tutte quelle situazioni dove il valore memorizzato (sia sotto forma di variabile che sotto forma di costante) rimane valido per tutte le istanze di quella classe e quindi può essere condiviso con tutti i "figli".

Variabili e Costanti

È facile intuire la sostanziale differenza tra variabile e costante, essendo il nome stesso auto esplicativo. È bene tuttavia spiegarlo visto che ne abbiamo appena parlato. Una variabile è uno spazio riservato ad un dato (numerico, stringa, booleano, etc...) che può (o deve) mutare il suo valore durante l'esecuzione di un codice. Al contrario le costanti sono spazi riservati a dati che non mutano mai il loro valore durante l'esecuzione di un codice: rimangono costanti! Si veda al riguardo Costanti e variabili: qual’è la vera differenza?.

In Actionscript 3.0, come in altri linguaggi, le costanti possono essere impostate solo una volta: direttamente durante la definizione o successivamente nel codice:

La prossima volta proseguiremo l'analisi del codice e daremo un'occhiata ai "tipi" dato, argomento interessante ed importante con la release 3.0 di Actionscript.

Post correlati

• Actionscript 3.0 for beginners: lesson #5 (4)
• Actionscript 3.0 for beginners: lesson #3 (0)
• Actionscript 3.0 for beginners: lesson #2 (4)
• Actionscript 3.0 for beginners: lesson #1 (9)
• Flash CS3: creare un effetto Reflex su qualsiasi MovieClip (12)

L'uso del link come chiave per la rimozione ($sm[2] nelle parti commentate nel codice qui sorpra), è utile quando non si ha certezza della lingua - localizzazione - con cui è stato installato Wordpress. Con questa tecnica, tuttavia, il menu è rimosso solo a livello di interfaccia, quindi sarà possibile ancora accedere alla pagina tramite una link diretto.

Post correlati

• Wordpress: scrivere un logout personale (2)
• Wordpress: come scrivere un reply to comment usando jQuery (18)
• WP Bannerize 2.4.1 (0)
• Very short trick: PHP auto echo (0)
• Very short trick: avoid error message in PHP (1)