Share
Dashbordet i disse dager er foreldet. Vi legger en kalkulator her og en klebrig notat der en gang noen få uker, men dessverre har vi ikke sett mange gode widgets kommer ut nylig. I dag, for å rette opp den tomme plassen i vårt Dashboard-hjerte, la vi rive en widget og hack den inn i vår egen!
Tips: Hvis du vil laste ned widgetfilen fra denne opplæringen, kan du laste den ned her. Dette er den tilpassede Dashboard-widgeten som er opprettet ved slutten av denne opplæringen, med alle bildene og endringene forutsett. Dette betyr at du kan installere det direkte på Dashboard og spille med endringene med en gang.
Når vi ser på Dashboard for den gjennomsnittlige Mac-brukeren, er det sannsynligvis tomt og aldri brukt, eller overveldende fullt av sportsnyheter og klistremerker. Noen ganger ser vi også festlige julelys! Sikkert, det må være mer til oversikten enn dette.
Vi kunne gå videre med våre liv og fortsette å stirre på våre rotete skjermer, men det stemmer ikke overens med Mactuts + -stilen! Dashboards dør ut, så la oss gjenopplive scenen ved å tilpasse våre widgets mer enn noen gang før.
For å bekjempe et aspekt av denne Widget-depresjonen, vil vi redigere "Stickies" Widget og gjøre det til vår egen. Redigeringene er enkle: Endre bakgrunnen til klistrene, slik at vi kan ha spesifikke notatfarger (og etiketter) til spesifikke formål. For eksempel vil vi ha en klebrig notatype for personlige tanker, en for en todo-lister, og muligens en annen for tilfeldige notater. Vi legger også til en egendefinert "Slett alle" -knappen for å gjøre det raskere å slette notatene våre.
Dashboards dør ut, så la oss gjenopplive scenen ved å tilpasse våre widgets mer enn noen gang før.
Du trenger noen HTML-, CSS- og JavaScript-kunnskaper, men prosessen er absolutt ikke for avansert. La oss komme i gang!
Alle widgets er plassert i mappen "/ Library / Widgets". Du kan gjøre en rask Comman + Shift + G for å få tilgang til det raskt. Fordi vi skal redigere Stickies Widget, finn widgetfilen Stickies.wdgt og lag en kopi til skrivebordet ditt. På denne måten kan vi redigere filene uten å måtte bekymre seg om tillatelser og lagringsbaserte problemer.
Høyreklikk på skrivebordet og velg Vis pakkeinnhold for å åpne widgeten som en mappe i stedet for å åpne den i Dashboard.
Nå som vi har Widget-filene åpne, la oss ta en titt på den generelle strukturen til en Widget.
Dashboard-widgets er relativt enkle. De er små HTML-oppsett med JavaScript sprinklet inn for å gjøre dem interaktive. På grunn av dette er filene som er inkludert i hver widget rett frem og lett å endre, spesielt når vi bare vil endre enkle ting som bildene. Stickies Widget er et godt eksempel på denne enkelheten.
For å få forståelse for bruken av en Dashboard-widget, la oss se på hver enkelt fil og se hva den brukes til.
De Info.plist filen bestemmer informasjon om widgeten. Det er sentralt for Widget, da det inneholder Bundle Name ("Stickies" her), den nåværende versjonen, høyden og bredden på widgeten og mer. Men fordi vi bare redigerer widgets i denne opplæringen, kan vi ignorere denne filen.
Denne filen er vanligvis den samme som den siste. Den inneholder mer informasjon om widgeten. Den har versionsnummer, bygge nummer, etc. Det er ikke viktig for det vi gjør.
Dette er det virkelige kjøttet av widgeten. Her har vi koden som utgjør det vi ser. Som nevnt før, er hver widget bare en HTML-side, så dette er lett å redigere. Hvis du åpner den, vil du finne det veldig kjent om du har jobbet med nettsteder før. (Som et notat endres "Stickies" i filnavnet basert på Widget, så denne filen har ikke alltid samme navn. Dette gjelder også de to neste filene.)
Selvfølgelig, med HTML-en vil vi style innholdet, så her er CSS-filen som følger med den.
Interaktiviteten til widgeten kommer fra JavaScript, og dette er hvor alt er holdt. Vi kommer til å redigere dette også senere!
Når noen widget laster, vises disse bildene som plassholdere til alt er lastet. Det er splash skjermen av widgeten. (Hvis du lurer på hva "@ 2x" betyr på slutten, er det et større bilde for Retina Display på nyere skjermer.)
Når du legger til en widget i oversikten din, kan ikonene du ser og dra, være disse filene. Igjen er "@ 2x" for Retina Displays.
Stickies-widgeten bruker en "Bilder" -mappe for å holde alle bildene sine. Du vil merke seg inne er alle bakgrunner og ikoner som utgjør widgeten.
Den første og enkleste måten vi kan gjøre før du går inn i koden, er å redigere bildefiler for å endre utseendet til widgeten. Når det gjelder Stickies-widgeten, og mange andre lager widgets, kan vi bare dra og slippe nye bilder i Widget-mappen for å gjøre endringer. Hvis jeg for eksempel ville endre Stickies-ikonet, kunne jeg opprette nye .png filer og erstatte de gamle ("icon.png" og "[email protected]").
Jeg har også nå endret det gule bakgrunnsbildet i mappen "Bilder" ved å legge til et tema for "personlige tanker". Jeg endret fargene og la et ikon øverst til høyre for å angi formålet med notatet.
Nå, hvis vi installerer den nye Widget, ser vi umiddelbart redigeringene, og våre gule notater vil nå ha temaet "personlige tanker". La oss skifte et nytt notat, og denne gangen blir den til en todo-liste.
Redigering av bildene er en fin måte å legge til stilig stil på widgets. Det er raskt og enkelt å gjøre, og hvis det er alt du ønsker å gjøre, kan du hoppe videre til trinn 5 for å installere den nylig endrede widgeten. Ellers, la oss fortsette å jobbe med den.
Nå er det på tide å legge til noen ekte funksjonalitet! Dette er hvor HTML / CSS / JavaScript-kunnskapen er nyttig, fordi hver widget er bygget med nettopp det. Vi vil ikke gå for langt inn i dybden for å redigere koden, men vi jobber med alle tre filene for å bli kjent med deg. Som jeg sa tidligere, jobber vi med å legge til et annet lite ikon nederst til venstre som fungerer som en "slette alle" -knappen.
For å legge til den nye knappen må vi legge til en annen #eraseButton div rett før #infoButton div (linje 21). Akkurat nå er dette bare en tom div med et bilde inne, men vi skal stilte det for å gjøre det som en kort knapp snart. De img er et enkelt 12px med 12px "x" ikon som jeg har plassert i "Bilder" mappen.
Nå for å gi slettknappen styling, la oss snu til Stickies.css fil og legg til noen grunnleggende plasserings- og størrelsesinformasjon før #infoButton velgere. La oss også gi den litt mer stil ved å øke opasiteten når den svinger over.
#eraseButton opacity: 0.5; stilling: absolutt; toppen: 166px; venstre: 15px; bredde: 13 piksler; høyde: 13 piksler; #eraseButton: hover opacity: 1;
Hvis du ser på Stickies.js fil, vil du innse at det er veldig godt dokumentert og skrevet takket være Apple. Dette gjør det enkelt for oss å jobbe med det.
JavaScript-koden for å gjøre sletteknappen virket er en veldig enkel funksjon som bare setter innholdet i tekstboksen til ingenting. Legg til denne koden hvor som helst i Stickies.js, helst hvor den passer med andre funksjoner. Jeg legger den etter textToHTML funksjon.
funksjon eraseAll () mydiv.innerHTML = "";
For å ringe til JavaScript-koden, la oss legge til en ved trykk hendelse til #eraseButton i Stickies.html fil.
Og knappen er ferdig! Det er et veldig enkelt eksempel, men det viser også utvidelsen av widgets som disse på grunn av deres enkelhet
Hvis du noen gang vil teste ut widgeten din når du gjør endringer, er det to alternativer: Åpne .html-filen i nettleseren din som et nettsted, eller installer widgeten og test den ut i Dashboard. Den første er raskere for utvikling, mens den andre gir en ekte Dashboard-opplevelse.
Installere en widget er også veldig enkelt. Alt du trenger er et dobbeltklikk på en widget og et "ja" til installeringsprompten. Pass på at du lagrer en kopi av den redigerte versjonen før du installerer den nye widgeten. Dette skyldes at når du installerer det, blir filen flyttet til "~ / Bibliotek / Widgets". Vær også oppmerksom på at når vi installerer den nye Stickies Widget, vil den overskrive sist som den har samme navn.
Redigering av widgeten virket skremmende i begynnelsen, men dens enkelhet tillot oss å gjøre endringer enkelt. Vi har ferdig med å redigere vår Stickies Widget, og forhåpentligvis ga Dashboard-verdenen en liten rommel. Hvis vi ønsket, kunne vi nå fortsette å skape flere bakgrunner og legge til flere funksjoner for å tilfredsstille våre behov.
Vi har egentlig bare fått ankel-dypt inn i tingene vi kan gjøre ved å endre Dashboard-widgets. Dette er egentlig bare en primer til Widget-hacking verden, og hva du kan gjøre vil være basert på din evne til å manipulere bilder og jobbe med koden. Du vet hvordan du gjør endringene nå, men det som kommer neste er å bestemme hvilke endringer du vil gjøre.
!
Accentsconagua