Share
Il Dashboard in questi giorni è vecchio. Mettiamo qui una calcolatrice e una nota appiccicosa una volta ogni poche settimane, ma purtroppo non abbiamo visto molti grandi widget uscire di recente. Oggi, per rimediare allo spazio vuoto nel cuore del nostro Dashboard, facciamo a pezzi un widget e lo hackeriamo nel nostro!
Mancia: Se desideri scaricare il file del widget da questo tutorial, puoi scaricarlo qui. Questo è il widget Dashboard personalizzato che viene creato alla fine di questo tutorial, con tutte le immagini e le modifiche predone. Ciò significa che puoi installarlo direttamente sul tuo Dashboard e giocare subito con le modifiche.
Quando guardiamo il Dashboard dell'utente medio di Mac, è probabilmente vuoto e mai usato, o in modo schiacciante pieno di notizie di notizie sportive e di note adesive. A volte vediamo anche le luci natalizie! Sicuramente, ci deve essere più di Dashboard di questo.
Potremmo andare avanti con le nostre vite e continuare a fissare i nostri schermi disordinati, ma questo non è conforme allo stile Mactuts +! I cruscotti sono in via di estinzione, quindi ravviviamo la scena personalizzando i nostri widget più che mai.
Per combattere un aspetto di questa depressione dei widget, modificheremo il widget "Stickies" e ne diventeremo nostri. Le modifiche sono semplici: modifica gli sfondi delle note adesive in modo che possiamo avere colori di nota specifici (e etichette) per scopi specifici. Ad esempio, avremo un tipo di nota appiccicosa per i pensieri personali, uno per un elenco di cose da fare e forse un altro per le note casuali. Aggiungeremo anche un pulsante personalizzato "Cancella tutto" per rendere più veloci le nostre note.
I cruscotti sono in via di estinzione, quindi ravviviamo la scena personalizzando i nostri widget più che mai.
Avrai bisogno di conoscenze HTML, CSS e JavaScript, ma il processo non è certamente troppo avanzato. Iniziamo!
Tutti i widget si trovano nella cartella "/ Libreria / Widget". Puoi fare un rapido Comman + Shift + G per accedervi rapidamente. Perché modificheremo il widget Stickies, troverai il file del widget Stickies.wdgt e fare una copia sul desktop. In questo modo possiamo modificare i file senza doverci preoccupare delle autorizzazioni e dei problemi di salvataggio.
Sul desktop, fare clic con il tasto destro e selezionare Mostra i contenuti del pacchetto per aprire il widget come cartella invece di aprirlo nella Dashboard.
Ora che abbiamo i file del Widget aperti, diamo un'occhiata alla struttura generale di un Widget.
I widget di Dashboard sono relativamente semplici. Sono piccole configurazioni HTML con JavaScript disseminate per renderle interattive. Per questo motivo, i file inclusi all'interno di ciascun widget sono semplici e facili da modificare, specialmente quando vogliamo solo cambiare le cose semplici come le immagini. The Stickies Widget è un ottimo esempio di questa semplicità.
Per comprendere il funzionamento di un widget di Dashboard, esaminiamo ogni singolo file e vediamo a cosa serve.
Il Info.plist il file determina le informazioni sul Widget. È centrale per il Widget in quanto include il nome del bundle ("Sticky" qui), la versione corrente, l'altezza e la larghezza del widget e altro ancora. Tuttavia, poiché modifichiamo solo i widget in questo tutorial, possiamo ignorare questo file.
Questo file è generalmente uguale all'ultimo. Detiene più informazioni sul widget. Ha il numero di versione, il numero di build, ecc. Non è importante per quello che stiamo facendo.
Questa è la vera carne del widget. Qui abbiamo il codice che costituisce ciò che vediamo. Come detto prima, ogni widget è solo una pagina HTML, quindi è facilmente modificabile. Se lo apri, ti sarà molto familiare se hai già lavorato con i siti web. (Come nota, i "Promemoria" nel nome del file cambiano in base al Widget, quindi questo file non ha sempre lo stesso nome Questo vale anche per i prossimi due file.)
Ovviamente, con l'HTML vorremmo modellare il contenuto, quindi ecco il file CSS per accompagnarlo.
L'interattività del widget proviene da JavaScript, ed è qui che viene tenuto tutto. Avremo modo di modificarlo anche in seguito!
Quando viene caricato un widget, queste immagini vengono visualizzate come segnaposti finché non viene caricato tutto. È la schermata iniziale del widget. (Se ti stai chiedendo cosa significhi "@ 2x" alla fine, è un'immagine di dimensioni maggiori per il Retina Display sugli schermi più recenti.)
Quando aggiungi un widget alla tua Dashboard, le icone che puoi vedere e trascinare sono questi file. Di nuovo, "@ 2x" è per i display Retina.
Il widget Stickies utilizza una cartella "Immagini" per conservare tutte le sue immagini. Noterai che all'interno ci sono tutti gli sfondi e le icone che compongono il widget.
La prima e più semplice cosa che possiamo fare prima di entrare nel codice è modificare i file di immagine per cambiare l'aspetto del widget. Nel caso del widget Stickies e di molti altri widget di serie, possiamo semplicemente trascinare e rilasciare nuove immagini nella cartella Widget per apportare modifiche. Ad esempio, se volessi cambiare l'icona Stickies, potrei crearne di nuovi .png file e sostituire quelli vecchi ("icon.png" e "[email protected]").
Ho anche modificato l'immagine di sfondo gialla nella cartella "Immagini" aggiungendo un tema di "pensieri personali". Ho cambiato i colori e aggiunto un'icona in alto a destra per indicare lo scopo della nota.
Ora se installiamo il nuovo Widget, vedremo immediatamente le modifiche e le nostre note gialle avranno ora il tema "pensieri personali". Cambiamo un'altra nota e questa volta la trasformiamo in una lista di cose da fare.
Modificare le immagini è un ottimo modo per aggiungere stile ai tuoi widget. È semplice e veloce da fare, e se è tutto ciò che vorresti fare, puoi saltare al Passaggio 5 per installare il widget appena modificato. Altrimenti, continuiamo a lavorarci.
Ora è il momento di aggiungere alcune funzionalità reali! Questo è il punto in cui le conoscenze HTML / CSS / JavaScript sono utili perché ogni widget è costruito proprio con questo. Non approfondiremo troppo il codice, ma lavoreremo con tutti e tre i file per farti conoscere. Come ho detto prima, lavoreremo per aggiungere un'altra piccola icona in basso a sinistra che funziona come un pulsante "cancella tutto".
Per aggiungere il nuovo pulsante, sarà necessario aggiungerne un altro #eraseButton div prima del #infoButton div (riga 21). Al momento questo è solo un div vuoto con un'immagine all'interno, ma lo modificheremo per farlo apparire presto come un vero e proprio pulsante. Il img è una semplice icona "x" da 12px per 12px che ho inserito nella cartella "Immagini".
Ora per dare lo stile del pulsante di cancellazione, passiamo a Stickies.css file e aggiungere alcune informazioni sulla posizione e le dimensioni di base prima del #infoButton selettori. Diamo anche un po 'più di stile aumentando l'opacità quando ci si libra sopra.
#eraseButton opacity: 0.5; position: absolute; sopra: 166 px; a sinistra: 15px; larghezza: 13px; altezza: 13px; #eraseButton: hover opacity: 1;
Se guardi il Stickies.js file, ti renderai conto che è molto ben documentato e scritto grazie ad Apple. Questo ci facilita il lavoro con esso.
Il codice JavaScript per far funzionare il pulsante di cancellazione è una funzione molto semplice che imposta il contenuto della casella di testo su zero. Aggiungi questo codice ovunque nel Stickies.js, preferibilmente dove si adatta con altre funzioni. L'ho messo dopo il textToHTML funzione.
function eraseAll () mydiv.innerHTML = "";
Per chiamare il codice JavaScript, aggiungiamo un al clic evento al #eraseButton nel Stickies.html file.
E il pulsante è fatto! È un esempio molto semplice, ma mostra anche l'estensione di widget come questi a causa della loro semplicità
Se vuoi testare il tuo widget mentre apporti le modifiche, ci sono due opzioni: apri il file .html nel tuo browser come un sito web, oppure installa il widget e testalo nel Dashboard. Il primo è più veloce per lo sviluppo, mentre il secondo fornisce una vera esperienza di Dashboard.
Anche l'installazione di un widget è molto semplice. Tutto ciò che serve è un doppio clic su un widget e un "sì" al prompt di installazione. Assicurarsi che prima di installare il nuovo widget, si salvi una copia della versione modificata. Questo perché quando lo installi, il file verrà spostato in "~ / Libreria / Widget". Si noti inoltre che quando installiamo il nuovo Stickies Widget, sovrascriverà l'ultimo poiché ha lo stesso nome.
La modifica del widget sembrava inizialmente scoraggiante, ma la sua semplicità ci permetteva di apportare facilmente modifiche. Abbiamo terminato di modificare il nostro Stickies Widget e, si spera, abbiamo dato al mondo di Dashboard un piccolo rombo. Se volessimo, ora potremmo continuare a creare più sfondi e aggiungere più funzioni per soddisfare i nostri bisogni.
In realtà, abbiamo solo approfondito le cose che possiamo fare modificando i nostri widget di Dashboard. Questo è solo un primer per il mondo di hacking dei widget, e ciò che puoi fare sarà basato sulla tua capacità di manipolare le foto e lavorare con il codice. Adesso sai come apportare le modifiche, ma ciò che viene dopo è decidere quali modifiche vuoi apportare.
!
Accentsconagua