Share
Dashboard dessa dagar är gammal. Vi lägger en miniräknare här och en klibbig not där en gång i några veckor, men tyvärr har vi inte sett många bra widgets ut nyligen. Idag, för att avhjälpa det tomma utrymmet i vårt Dashboard-hjärta, låt oss riva en widget och hacka den i vår egen!
Tips: Om du vill ladda ner widgetfilen från den här handledningen kan du hämta den här. Det här är den anpassade Dashboard-widgeten som skapas i slutet av denna handledning, med alla bilder och redigeringar. Det betyder att du kan installera den direkt på din Dashboard och spela omedelbart med ändringarna.
När vi tittar på instrumentpanelen för den genomsnittliga Mac-användaren är det troligt tomt och aldrig använt eller överväldigande fullt av sportnyheter och klibbiga noter. Ibland ser vi festliga julljus också! Visst måste det finnas mer till instrumentpanelen än detta.
Vi kunde fortsätta med våra liv och fortsätta stirra på våra röriga skärmar, men det är inte i enlighet med Mactuts + -stilen! Dashboards dör ut så låt oss återuppliva scenen genom att anpassa våra Widgets mer än någonsin tidigare.
För att bekämpa en aspekt av denna Widget-depression, redigerar vi "Stickies" Widget och gör den till vår egen. Redigeringarna är enkla: Ändra bakgrunden på de klibbiga noterna så att vi kan ha specifika anteckningsfärger (och etiketter) för specifika ändamål. Till exempel har vi en klibbig-typ för personliga tankar, en för en todo-listor, och eventuellt en annan för slumpmässiga anteckningar. Vi lägger också till en anpassad "Radera alla" -knapp för att göra våra anteckningar snabbare.
Dashboards dör ut så låt oss återuppliva scenen genom att anpassa våra Widgets mer än någonsin tidigare.
Du behöver lite HTML, CSS och JavaScript-kunskap, men processen är förvisso inte för avancerad. Låt oss börja!
Alla widgets finns i mappen "/ Bibliotek / Widgets". Du kan göra en snabb Comman + Skift + G för att snabbt komma åt det. Eftersom vi redigerar Stickies Widget hittar du widgetfilen Stickies.wdgt och gör en kopia till skrivbordet. På det här sättet kan vi redigera filerna utan att behöva oroa sig för behörigheter och besparingsbaserade problem.
Högerklicka på din skrivbord och välj Visa paketinnehåll för att öppna widgeten som en mapp i stället för att öppna den i instrumentpanelen.
Nu när vi har Widget-filer öppna, låt oss ta en titt på den allmänna strukturen i en Widget.
Dashboard widgets är relativt enkla. De är små HTML-inställningar med JavaScript ströms in för att göra dem interaktiva. På grund av detta är filerna som ingår i varje widget rakt framåt och lätt att ändra, speciellt när vi bara vill ändra enkla saker som bilderna. Stickies Widget är ett utmärkt exempel på denna enkelhet.
För att få en förståelse för hur en Dashboard-widget fungerar, låt oss titta på varje enskild fil och se vad den används för.
De Info.plist filen bestämmer information om widgeten. Det är centralt för Widget eftersom det innehåller paketnamnet ("Stickies" här), den aktuella versionen, widgetens höjd och bredd och mer. Men eftersom vi bara redigerar widgets i den här handledningen kan vi ignorera den här filen.
Den här filen är i allmänhet densamma som den förra. Den innehåller mer information om widgeten. Den har versionsnummer, byggnummer etc. Det är inte viktigt för vad vi gör.
Detta är det riktiga köttet i widgeten. Här har vi koden som utgör vad vi ser. Som sagt tidigare är varje widget bara en HTML-sida, så det här kan enkelt redigeras. Om du öppnar den, hittar du det mycket bekant om du tidigare har arbetat med webbplatser. (Som en anteckning ändras "Stickies" i filnamnet baserat på Widget, så den här filen har inte alltid samma namn. Det gäller även de två följande filerna.)
Självklart kommer vi med HTML att stryka innehållet, så här är CSS-filen som följer med den.
Widgetens interaktivitet kommer från JavaScript, och det här är allt det hålls. Vi kommer också att redigera detta senare senare!
När någon widget laddas visas dessa bilder som platshållare tills allt är laddat. Det är skärmsläckaren för widgeten. (Om du undrar vad "@ 2x" betyder i slutet, är det en större bild för Retina Display på nyare skärmar.)
När du lägger till en widget i ditt Dashboard, kan ikonerna du ser och dra, vara dessa filer. Återigen är "@ 2x" för Retina Displays.
Stickies-widgeten använder en mapp "Bilder" för att hålla alla bilderna. Du märker inuti är alla bakgrunder och ikoner som utgör widgeten.
Den första och enklaste vi kan göra innan vi går in i koden är att redigera bildfilerna för att ändra utseendet på widgeten. När det gäller Stickies-widgeten och många andra lager widgets kan vi bara dra och släppa nya bilder i Widget-mappen för att göra ändringar. Om jag till exempel vill ändra Stickies-ikonen kunde jag skapa nya .png filer och ersätta de gamla ("icon.png" och "[email protected]").
Jag har också nu ändrat den gula bakgrundsbilden i mappen "Bilder" genom att lägga till ett tema för "personliga tankar". Jag har ändrat färgerna och lagt till en ikon längst upp till höger för att ange syftet med noten.
Nu om vi installerar den nya widgeten ser vi omedelbart ändringarna och våra gula anteckningar kommer nu att ha temat "personliga tankar". Låt oss ändra en ny anteckning och den här gången gör den till en todo-lista.
Att redigera bilderna är ett utmärkt sätt att lägga till stilfull stil på dina widgets. Det är snabbt och enkelt att göra, och om det är allt du vill göra, kan du gå vidare till steg 5 för att installera den nyligen modifierade widgeten. Annars, låt oss fortsätta arbeta med det.
Nu är det dags att lägga till några sanna funktionaliteter! Det här är HTML / CSS / JavaScript-kunskapen som är till nytta eftersom varje widget är byggd med just det. Vi kommer inte att gå för långt för att redigera koden, men vi arbetar med alla tre filerna för att bekanta dig. Som jag sa tidigare arbetar vi för att lägga till en annan liten ikon till vänster till vänster som fungerar som en "radera alla" -knappen.
För att lägga till den nya knappen måste vi lägga till en annan #eraseButton div strax före #infoButton div (rad 21). Just nu är det bara en tom div med en bild inuti, men vi ska stile den för att få den att se ut som en riktig knapp snart. De img är en enkel 12px med 12px "x" ikon som jag har placerat i mappen "Bilder".
Nu för att ge raderingsknappen styling, låt oss vända sig till Stickies.css fil och lägg till lite grundläggande plats- och storleksinformation före #infoButton selektorer. Låt oss också ge den lite mer stil genom att öka opaciteten när den svävar över.
#eraseButton opacity: 0.5; position: absolute; topp: 166px; vänster: 15px; bredd: 13px; höjd: 13px; #eraseButton: svävar opacitet: 1;
Om du tittar på Stickies.js fil, kommer du inse att det är väldokumenterat och skrivet tack vare Apple. Det gör det enkelt för oss att arbeta med det.
JavaScript-koden för att göra raderingsknappen fungerar är en mycket enkel funktion som bara sätter innehållet i textrutan till ingenting. Lägg till den här koden var som helst i Stickies.js, helst där den passar med andra funktioner. Jag lägger den efter textToHTML fungera.
funktionen eraseAll () mydiv.innerHTML = "";
För att ringa JavaScript-koden, lägg till en onclick händelse till #eraseButton i Stickies.html fil.
Och knappen är klar! Det är ett mycket enkelt exempel, men det visar också utbyggbarheten hos widgets som dessa på grund av deras enkelhet
Om du någonsin vill testa din widget när du gör ändringar finns det två alternativ: öppna .html-filen i din webbläsare som en webbplats, eller installera widgeten och testa den i instrumentpanelen. Den första är snabbare för utveckling, medan den andra ger en sann Dashboard-upplevelse.
Installera en widget är också mycket enkel. Allt som krävs är ett dubbelklick på en widget och ett "ja" till installationsprompten. Var noga med att innan du installerar din nya widget sparar du en kopia av din redigerade version. Detta beror på att när du installerar det flyttas filen till "~ / Bibliotek / Widgets". Observera också att när vi installerar den nya Stickies Widget kommer den att skriva över den sista eftersom den har samma namn.
Redigering av widgeten verkade skrämmande först, men dess enkelhet gjorde det möjligt för oss att göra ändringar enkelt. Vi har slutat redigera vår Stickies Widget, och förhoppningsvis gav Dashboard World en liten rumpa. Om vi ville, kunde vi nu fortsätta att skapa fler bakgrunder och lägga till fler funktioner för att tillgodose våra behov.
Vi har verkligen bara fått fotled djupt i de saker vi kan göra genom att ändra våra Dashboard-widgets. Detta är verkligen bara en primer till Widget-hackingvärlden, och vad du kan göra kommer att baseras på din förmåga att manipulera foton och arbeta med koden. Du vet hur man gör förändringarna nu, men vad som kommer är att bestämma vilka förändringar du vill göra.
!
Accentsconagua