How Hack en Dashboard-widget
Dashboard i disse dager er uinteressant. Vi legger en kalkulator her og en klebrig-notat der en gang i noen uker, men dessverre har vi ikke sett mange flotte widgets kommet ut nylig. I dag, for å bøte på den tomme plassen i vår Dashboard hjerte, la oss rive fra hverandre en widget og hacke den inn i vårt eget
Tips: Hvis du ønsker å laste ned widget filen fra denne opplæringen , kan du laste den ned her. Dette er tilpasset Dashboard-widget som er skapt ved slutten av denne opplæringen, med alle bilder og redigeringer predone. Dette betyr at du kan installere den direkte til Dashboard og leke seg med endringene med en gang.
A Dashbord Dilemma
Når vi ser på oversikten over den gjennomsnittlige Mac-bruker, er det sannsynlig tom og aldri brukt, eller overveldende full av sports-nyhetsstrømmer og klissete-notater. Noen ganger ser vi festlige julelysene i tillegg! Sikkert, må det være mer til Dashboard enn dette.
Dashbordet var aldri ment for dette! Vel, forhåpentligvis var det ikke.
Vi kunne gå videre med livene våre og fortsette stirrer på våre rotete skjermer, men det er ikke i henhold til de Mactuts + stil! Dashbord er å dø ut så la oss gjenopplive scenen ved å tilpasse våre Widgets mer enn noen gang før.
For å bekjempe ett aspekt av denne Widget-depresjon, vil vi endre de "Huskelapper" Widget og gjøre det vår egen. Redigeringene er enkel: endre bakgrunnen til de klissete-notater slik at vi kan ha spesifikke kommentarer farger (og etiketter) for bestemte formål. For eksempel, vil vi ha en sticky-notat type for personlige tanker, en for et todo-lister, og muligens en annen for tilfeldige notater. Vi vil også legge til en tilpasset «Slett alt" for å få fjerne våre notater raskere.
Dashbord dør ut så la oss gjenopplive scenen ved å tilpasse våre Widgets mer enn noen gang før.
Du kommer til å trenge litt HTML, CSS og Javascript kunnskap, men prosessen er absolutt ikke for avansert. La oss komme i gang
Trinn 1: Få den Widget Åpne
Alle widgets ligger i mappen "/Library /Widgets". Du kan gjøre en rask comman + Shift + G for å raskt få tilgang til den. Fordi vi skal redigere Huskelapper Widget, finne widgeten filen Stickies.wdgt Hotell og lage en kopi til skrivebordet ditt. På denne måten kan vi redigere filer uten å måtte bekymre seg om tillatelser og lagring-baserte problemer. På skrivebordet, høyreklikk og velg Vis innholdet i pakken Nå som vi har Widget filer åpne, la oss ta en titt på den generelle strukturen til en Widget Dashboard widgets er relativt enkel. De er små HTML oppsett med Javascript stenket i å gjøre dem interaktive. På grunn av dette, de filene som er inkludert i hver widget er rett fram og enkel å endre, særlig når vi bare ønsker å endre enkle ting som bildene. Huskelapper Widget er et godt eksempel på dette enkelhet For å få en forståelse av hvordan en Dashboard-widget, la oss se på hver enkelt fil og se hva det brukes til. Info.plist Denne filen er vanligvis den samme som sist. Det inneholder mer informasjon om widgeten. Den har versjonsnummeret, build-nummeret, etc. Det er ikke viktig for hva vi gjør. Dette er den virkelige kjøtt 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 redigeres. Hvis du åpner den, vil du finne det svært kjent hvis du har jobbet med nettsteder før. (Som et notat, de "Stickies" i filnavnet endres basert på Widget, så denne filen må ikke alltid har samme navn Dette gjelder også for de neste to filer.) Selvfølgelig med HTML vi ønsker å style innholdet, så her er CSS-filen til å følge den. interaktivitet av widgeten kommer fra Javascript, og det er her det hele holdes. Vi vil komme til å endre denne, så vel senere Når noen widget belastninger, er disse bildene vises som plassholdere før alt er lastet. Det er velkomstbildet av widgeten. (Hvis du lurer på hva "@ 2x" betyr på slutten, er det en større størrelse bilde for Retina Display på nyere skjermer.) Når du legger til en widget til Dashboard, ikonene du kan se og dra er disse filene. Igjen, for Retina Viser "@ 2x". De Stickies widget bruksområder en "Bilder" mappen til å holde alle sine bilder. Du vil merke på innsiden er alle bakgrunner og ikoner som utgjør widgeten Den første og enkleste ting vi kan gjøre før du går inn i Koden er å redigere bildefiler for å endre utseendet på widgeten. I tilfelle av Huskelapper widget og mange andre lager widgets, kan vi bare dra og slippe nye bilder inn i Widget-mappen for å gjøre endringer. For eksempel, hvis jeg ønsket å endre Huskelapper ikon, kunne jeg lage nye .png Jeg har også nå endret den gule bakgrunnsbilde i "Bilder" -mappen ved å legge til et tema av "personlige tanker." Jeg endret fargene og lagt til et ikon i øverste høyre for å indikere formålet med notatet. Hvis vi nå installere den nye Widget, vil vi umiddelbart se endringene og våre gule notater vil nå ha "personlige tanker" tema. La oss endre ett mer oppmerksom og denne gangen slå den inn i en todo liste. Redigere bilder er en flott måte å legge stilig stil til din widgets. Det er raskt og enkelt å gjøre, og hvis det er alt du har lyst til å gjøre, så kan du gå videre til trinn 5 for å installere den nylig endret widget. Ellers, la oss fortsette arbeidet på det Nå er det på tide å legge noen sanne funksjonalitet! Det er der HTML /CSS /Javascript kunnskap er nyttig fordi hver widget er bygget med nettopp det. Vi vil ikke gå for langt i dybden til å redigere koden, men vi skal jobbe med alle tre filer for å få deg kjent. Som jeg har nevnt før, vil vi arbeide for å legge til en annen liten ikonet nederst til venstre som fungerer som en "slett 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 vil style den for å få det til å se ut som en faktisk knapp snart. Den img er en enkel 12px av 12px "x" ikonet som jeg har plassert i "Bilder" -mappen Nå for å gi sletteknappen styling, la oss slå til Stickies.css fil og legge til noen grunnleggende plassering og størrelse informasjon før de #infoButton velgere. La oss også gi den litt mer stil ved å øke tettheten når svevde over Hvis du ser på den Stickies.js filen, vil du innse det er godt dokumentert og skrevet takket være Apple. Dette gjør det enkelt for oss å jobbe med det. Javascript-kode for å gjøre sletteknappen arbeid er en svært enkel funksjon som bare setter innholdet i tekstboksen til ingenting. Legg denne koden hvor som helst i Stickies.js, helst der det passer med andre funksjoner. Jeg satte den etter textToHTML funksjon For å ringe Javascript-kode, la oss legge en onclick hendelse til #eraseButton i Stickies.html fil . Og knappen er ferdig! Det er et veldig enkelt eksempel, men det viser også extendability av widgets som disse på grunn av sin enkelhet Hvis du ønsker å teste ut widget som du gjør endringer, er det to alternativer: åpne opp .html filen i nettleseren din som en nettside, eller installere widget og teste det ut i kontrollpanelet. Den første er raskere for utvikling, mens andre gir et rettvisDashBoard opplevelse. Installere en widget er svært enkel i tillegg. Alt som trengs er et dobbeltklikk på en widget og en "ja" til å installere teksten. Vær sikker på at før du installerer den nye widget, du lagrer en kopi av den redigerte versjonen. Dette er fordi når du installerer den, vil filen bli flyttet til "~ /Library /Widgets". Legg også merke til at når vi installerer nye Huskelapper Widget, vil den overskrive den siste som den har samme navn. Redigere widget virket skremmende i starten, men dens enkelhet tillatt oss å gjøre endringer enkelt. Vi er ferdig med å redigere vår Huskelapper Widget, og forhåpentligvis ga Dashboard verden en liten rumling. Hvis vi ville, 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 de tingene vi kan gjøre ved å endre våre Dashboard-widgeter. Dette er faktisk bare en primer til Widget-hacking verden, og hva du kan gjøre vil være basert på din evne til å manipulere bilder og arbeide med koden. Du vet hvordan du skal gjøre endringer nå, men hva som kommer etterpå er å bestemme hvilke endringer du ønsker å gjøre. Kanskje du vil legge til en klokke til Vær-widgeten eller kanskje du ønsker å legge til en tilpasset huden til Klokke-widgeten. Kanskje du hadde selv lyst til å lage et dashbord widget av din egen! (Apple har stor dokumentasjon for å lede deg på den veien.) Uansett hva du velger selv, sørg for å gi oss beskjed i kommentarfeltet om de store tingene du endre og lage!
for å åpne widget som en mappe i stedet for å åpne den opp i kontrollpanelet.
Dette vil åpne opp widget som en mappe, snarere enn i kontrollpanelet.
Trinn 2:. Se på filer
Sørg for å ha åpnet widget gjennom et høyreklikk - >.; Vis Innhold i pakken. Ikke åpne den og installere det på dashbordet ditt.
Info. plist
strukturen i Info.plist filen kan se kjent ut hvis du har sett på innstillingsfilene på Mac eller iOS-enheten før.
filen bestemmer informasjon om Widget. Det er sentralt for den Widget som det inkluderer navn på Bundle ("Huskelapper" her), den gjeldende versjonen, høyden og bredden på widget, og mer. Men fordi vi bare redigerer widgets i denne opplæringen, kan vi se bort fra denne filen.
Version.plist
Stickies.html
Stickies.css
Stickies.js
Default.png &!; [email protected]~~V
icon.png & [email protected]
Bilder Mappe
Akkurat som hvilken som helst nettside, er alle bildene samlet på ett sted for enkel tilgang.
Trinn 3:. Rediger Images
filer og erstatte de gamle ("icon.png" og "[email protected]").
Du kan behandle widgeten akkurat som en nettside. Her har jeg redigert på ikonet!
Bare ved å bytte ut det første bildet med den andre, har vi redigert widgeten.
Annen liten endring kan gjøre en widget mye mer personlig og tiltalende.
Trinn 4:. Redigere koden
Til ydmyke webutvikler, føler seg hjemme denne.
HTML File
. ≪ div id = "eraseButton" > < img src = "Images /x.png" > < /div >
CSS-filen
#eraseButton {opacity. 0,5; position: absolute; top: 166px; venstre: 15px; width: 13px; høyde: 13px;} #eraseButton: hover {opacity: 1; }
Den JS File
funksjon eraseAll () {mydiv.innerHTML = "";}.
< div id = "eraseButton" onclick = "eraseAll ();" > < img src = "Images /x.png" > < /div >
Trinn 5: Installer New Widget
Vi har endret ikonet, bakgrunnene, og lagt til en ny funksjon!
Akkurat som vi ønsket, de nye knappen fungerer og våre nye bakgrunner fungere.
Mer Hacking og fikle