Eccoci con una nuova serie di “The Bubi Devs”: DevMac! Questa nuova iniziativa prevede di realizzare alcuni tutorial sulla programmazione di Mac OS X, realizzando piccole applicazioni oppure simpatici e utili widget.
E proprio un widget sarà l’argomento di questa pria guida. Imparerete, infatti, come creare un widget per la Dashboard, utilizzando uno strumento già presente in Mac OS X: Dashcode. Il widget che andremo a realizzare avrà l’utilità di leggere un determinato feed RSS e di visualizzarnee il contenuto, permettendoci di restare sempre aggiornati delle notizie del nostro sito preferito!
Ma ora basta chiacchiere, eccovi il tutorial!
Strumenti necessari:
- Dashcode, lo trovate già installato nel vostro sistema (cercatelo in /Developer/Applications). Se non lo trovate inserite il CD di Mac OS X e installatelo (altrimenti fare riferimento a questa pagina).
- Un editor di grafica qualsiasi, ma non sarà strettamente necessario.
TUTORIAL
1. Creiamo un nuovo progetto con Dashcode
Avviate Dashcode, si presenterà una finestra (almeno questa volta completamente in italiano) come questa:
Selezionate l’elemento “RSS” e cliccate su “Scegli”. Avrete già creato il vostro widget! Il programma, ora, vi apparirà così:
La bellezza di Dashcode è che ha già fatto tutto lui per voi! Non dovremo inserire nessuna riga di codice, ma solo un indirizzo di un feed RSS valido e personalizzare a nostro piacimento la grafica! Possiamo notare quanto sia intuitivo e immediato quest programma, che ci faciliterà tutte le fasi del nostro lavoro.
2. Impostiamo le proprietà del widget
Iniziamo occupandoci delle proprietà del nostro widget. Clicchiamo sulla sezione “Attributi widget”, si presenterà una schermata come questa:
Qui troviamo tutte le proprietà. Iniziamo inserendo un nome in “Identificatore widget“, che diversificherà il nostro widget da tutti gli altri che vengono creati. Nel nostro caso abbiamo inserito “com.thebubidevs.widgetRSS”. Spostiamoci più in basso, dove troviamo proprietà: qui dobbiamo inserire l’indirizzo del feed RSS da cui vogliamo scaricare le notizie; noi inseriamo quello del nostro blog, “http://feeds.feedburner.com/TheBubiDevs”.
Sotto la “Proprietà” possiamo notare la sezione “Localizzazione”: qui potremo settare diverse lingue, in modo da rendere il nostro widget distribuibile in tutto il mondo. Vi basterà cliccare sul bottone contraddistinto dal “+” e inserire una nuova lingua, con tutte le stringhe corrispondenti.
Abbiamo così impostato le proprietà de nostro widget! Come ultima cosa andiamo in “Condividi” e inseriamo ancora il nostro nome del widget, come mostrato qui:
3. Personalizziamo la grafica
Ora non ci resta che personalizzare la grafica del nostro widget! Torniamo nel widget e, utilizzando”Inspector” e la “Libreria” (nel caso in cui vogliate aggiungere nuovi componenti) personalizzate come più volete il widget.
Non mi dilungherò molto su come creare un widget bello esteticamente (anche perchè non sono molto bravo in queste cose!), vi faccio però un piccolo esempio su come cambiare il colore della barra dove sta il titolo.
Selezioniamo la barra superiore, dopodichè clicchiamo sul bottone “Inspector”, si aprirà una finesta così:
Da qui potremo cambiare colore, forma, dimensione, potremo insomma personalizzarla secondo le nostre esigenze. Ecco come appare il mio dopo aver sistemato la parte grafica:
4. Proviamo il widget in funzione
Clicchiamo sul bottone “Esegui” che troviamo in alto a sinistra e godiamoci il nostro widget funzionante!
Ora, però ci sono ancora delle piccole modifiche che possiamo fare, per renderlo sempre migliore.
5. Ulteriori modifiche
Il nostro widget funziona, ma non è ancora completo.
Iniziamo espandendo i componenti del nostro widget, semplicemente cliccando sulla freccetta che troviamo a lato dell’icona che lo rappresenta, così:
Selezioniamo “back” e si aprirà la parte posteriore del widget. Anche qui possiamo operare come abbiamo fatto in precedenza, ovvero aggiungendo componenti grafici ed eliminando quelli già presenti che però non ci servono.
Nella parte destra di Dashcode, ci sono altre due sezioni che non abbiamo esaminato in precedenza: “Immagine di default” e “Icona widget”. Li potremo impostare, rispettivamente, l’immagine che viene visualizzata mentre si carica il widget, e l’icona dllo stesso.
Inseriamo, adesso, una funzione molto utile. Vogliamo che quando si clicca sul titolo del widget si apra l’indirizzo del sito web (o comunque di una pagina internet). Come fare? Semplice. Selezioniamo il titolo del nostro widget e andiamo nella sezione “Comportamenti”. Nell’evento “onClick” inseriamo la stringa: “link”. Se abbiamo eseguito tutto in maniera corretta dovremmo avere una finestra come questa:
Clicchiamo ora sulla freccetta grigia che troviamo a destra della stringa appena inserita, Dashcode ci porterà nell’editor di codice, posizionandosi subito all’interno della funzione che ha già creato per noi. Ci basterà inserire questa istruzione per far si che venga aperta (nel browser predefinito) la pagina web che desideriamo:
Ora il nostro widget è completo!
6. Salviamo il nostro widget e installiamolo!
Ora non ci resta che salvare il nostro widget per distribuirlo o condividerlo con amici! Nella colonna di destra di Dashcode selezioniamo “Condividi”, dopodichè potremo scegliere se salvare il widget nel nostro computer (tramite il comando “Registra su disco..”), altrimenti installarlo direttamente nella Dashboard, utilizzando “Effettua il deployment in Dashboard”).
Ecco il nostro widget installato e funzionante:
Per chi volesse restare sempre aggiornato con “The Bubi Devs” ecco il nostro widget da scaricare e installare nel vostro Mac (vi basterà estarlo e fare doppio clic sull’icona per installarlo):
Qui di seguito, invece, trovate il file del progetto di Dashcode, per chi avesse problemi nel seguire il tutorial:
La guida è stata realizzata da Andrea Busi per “The Bubi Devs”, traendo spunto dalla seguente guida in lingua inglese.
