Share
Het Dashboard is tegenwoordig muf. We plaatsen hier een keer in de paar weken een rekenmachine en een plakbriefje, maar helaas hebben we de afgelopen tijd niet veel geweldige widgets gezien. Vandaag, om de lege ruimte in het hart van ons Dashboard te verhelpen, laten we een widget losscheuren en deze hacken in die van ons!
Tip: Als je het widgetbestand van deze tutorial wilt downloaden, kun je het hier downloaden. Dit is de aangepaste Dashboard-widget die aan het einde van deze zelfstudie is gemaakt, met alle afbeeldingen en bewerkingen voorop. Dit betekent dat u het rechtstreeks op uw Dashboard kunt installeren en meteen kunt spelen met de wijzigingen.
Wanneer we naar het Dashboard van de gemiddelde Mac-gebruiker kijken, is het waarschijnlijk leeg en nooit gebruikt, of overweldigend vol met sportnieuwsfeeds en plaknotities. Soms zien we ook feestelijke kerstlichten! Zeker, er moet meer zijn in het Dashboard dan dit.
We kunnen doorgaan met ons leven en blijven staren naar onze rommelige schermen, maar dat is niet in overeenstemming met de Mactuts + stijl! Dashboards gaan dood, dus laten we de scène nieuw leven inblazen door onze widgets meer dan ooit aan te passen.
Om een aspect van deze Widget-depressie te bestrijden, bewerken we de Widget 'Stickies' en maken deze de onze. De bewerkingen zijn eenvoudig: pas de achtergronden van de plaknotities aan, zodat we specifieke notakleuren (en labels) voor specifieke doeleinden kunnen gebruiken. We hebben bijvoorbeeld een type met een kleverige noot voor persoonlijke gedachten, een voor een todolijst en mogelijk een andere voor willekeurige notities. We voegen ook een aangepaste knop 'Alles wissen' toe om onze notities sneller te wissen.
Dashboards gaan dood, dus laten we de scène nieuw leven inblazen door onze widgets meer dan ooit aan te passen.
Je hebt wat kennis van HTML, CSS en JavaScript nodig, maar het proces is zeker niet te geavanceerd. Laten we beginnen!
Alle widgets bevinden zich in de map "/ Bibliotheek / Widgets". Je kunt snel doen Comman + Shift + G om snel toegang te krijgen. Omdat we de Stickies-widget zullen bewerken, vind je het widgetbestand Stickies.wdgt en maak een kopie naar uw bureaublad. Op deze manier kunnen we de bestanden bewerken zonder ons zorgen te hoeven maken over toestemmingen en op besparingen gebaseerde problemen.
Klik met uw rechtermuisknop op uw bureaublad en selecteer Toon Inhoud van de verpakking om de widget als een map te openen in plaats van hem open te doen in het Dashboard.
Nu we de Widget-bestanden open hebben laten we de algemene structuur van een widget bekijken.
Dashboard-widgets zijn relatief eenvoudig. Het zijn kleine HTML-instellingen met JavaScript erin om ze interactief te maken. Daarom zijn de bestanden in elke widget eenvoudig en gemakkelijk aan te passen, vooral als we eenvoudige dingen zoals de afbeeldingen willen veranderen. De Stickies-widget is een goed voorbeeld van deze eenvoud.
Om een idee te krijgen van de werking van een Dashboard-widget, laten we elk afzonderlijk bestand bekijken en zien waarvoor het wordt gebruikt.
De Info.plist bestand bepaalt informatie over de Widget. Het staat centraal in de Widget omdat het hier de bundelnaam ('Stickies'), de huidige versie, de hoogte en breedte van de widget en meer omvat. Omdat we echter alleen widgets in deze zelfstudie bewerken, kunnen we dit bestand negeren.
Dit bestand is over het algemeen hetzelfde als het vorige. Het bevat meer informatie over de widget. Het heeft het versienummer, buildnummer, etc. Het is niet belangrijk voor wat we doen.
Dit is het echte vlees van de widget. Hier hebben we de code die maakt wat we zien. Zoals eerder vermeld, is elke widget slechts een HTML-pagina, dus dit is gemakkelijk te bewerken. Als je het opent, zul je het heel bekend vinden als je eerder met websites hebt gewerkt. (Ter opmerking: de "Stickies" in de bestandsnaam veranderen op basis van de Widget, dus dit bestand heeft niet altijd dezelfde naam Dit geldt ook voor de volgende twee bestanden.)
Natuurlijk willen we met de HTML de inhoud stylen, dus hier is het CSS-bestand om het mee te begeleiden.
De interactiviteit van de widget komt van JavaScript, en dit is waar alles wordt gehouden. We zullen dit later ook gaan bewerken!
Wanneer een widget wordt geladen, worden deze afbeeldingen weergegeven als tijdelijke aanduidingen totdat alles is geladen. Het is het opstartscherm van de widget. (Als je je afvraagt wat de "@ 2x" betekent aan het einde, is dit een groter beeld voor het Retina-display op nieuwere schermen.)
Wanneer u een widget toevoegt aan uw Dashboard, zijn de pictogrammen die u kunt zien en slepen deze bestanden. Nogmaals, de "@ 2x" is voor Retina Displays.
De Stickies-widget gebruikt een map "Afbeeldingen" om alle afbeeldingen vast te houden. U zult merken dat binnen alle achtergronden en pictogrammen die deel uitmaken van de widget.
Het eerste en gemakkelijkste wat we kunnen doen voordat we de code binnengaan, is door de beeldbestanden te bewerken om de weergave van de widget te veranderen. In het geval van de Stickies-widget en vele andere stock-widgets, kunnen we gewoon nieuwe afbeeldingen slepen en neerzetten in de Widget-map om wijzigingen aan te brengen. Als ik bijvoorbeeld het Stickies-pictogram wilde wijzigen, kon ik nieuw maken .png bestanden en vervang de oude ("icon.png" en "[email protected]").
Ik heb nu ook de gele achtergrondafbeelding in de map 'Afbeeldingen' gewijzigd door een thema 'persoonlijke gedachten' toe te voegen. Ik heb de kleuren gewijzigd en rechtsboven een pictogram toegevoegd om het doel van de notitie aan te geven.
Als we nu de nieuwe Widget installeren, zien we meteen de bewerkingen en hebben onze gele notities nu het thema 'persoonlijke gedachten'. Laten we nog een notitie veranderen en deze keer veranderen in een takenlijst.
Het bewerken van de afbeeldingen is een geweldige manier om stijlvolle flair toe te voegen aan uw widgets. Het is snel en eenvoudig om te doen, en als dat alles is wat u zou willen doen, dan kunt u doorgaan naar stap 5 om de zojuist gewijzigde widget te installeren. Anders blijven we eraan werken.
Nu is het tijd om wat echte functionaliteit toe te voegen! Dit is waar de HTML / CSS / JavaScript-kennis van pas komt, omdat elke widget is gebouwd met alleen dat. We gaan niet te diep in op het bewerken van de code, maar we zullen werken met alle drie de bestanden om u te laten kennismaken. Zoals ik eerder al zei, werken we eraan om linksonder nog een klein pictogram toe te voegen dat fungeert als een knop 'alles wissen'.
Om de nieuwe knop toe te voegen, moeten we nog een toevoegen #eraseButton div direct voor de #infoButton div (regel 21). Op dit moment is dit slechts een lege div met een afbeelding erin, maar we zullen het stijlen om het binnenkort als een echte knop te laten lijken. De img is een eenvoudig 12px bij 12px "x" pictogram dat ik in de map "Afbeeldingen" heb geplaatst.
Om nu de knop voor het wissen van de knoppen te geven, gaan we nu naar de Stickies.css bestand en voeg een aantal standaard locatie- en groottegegevens toe voor de #infoButton selectors. Laten we het ook een beetje meer stijl geven door de dekking te vergroten wanneer u erboven zweeft.
#eraseButton dekking: 0,5; positie: absoluut; top: 166px; links: 15px; width: 13px; hoogte: 13px; #eraseButton: hover opacity: 1;
Als je naar de Stickies.js bestand, u zult zich realiseren dat het zeer goed gedocumenteerd en geschreven is dankzij Apple. Dit maakt het gemakkelijk voor ons om ermee te werken.
De JavaScript-code om de wistoets te laten werken, is een heel eenvoudige functie die de inhoud van het tekstvak gewoon op niets zet. Voeg deze code overal in de Stickies.js, bij voorkeur waar het past bij andere functies. Ik heb het na de textToHTML functie.
function eraseAll () mydiv.innerHTML = "";
Om de JavaScript-code aan te roepen, voegen we een toe bij klikken evenement voor de #eraseButton in de Stickies.html het dossier.
En de knop is klaar! Het is een heel eenvoudig voorbeeld, maar het toont ook de uitbreidbaarheid van widgets als deze vanwege hun eenvoud
Als u ooit uw widget wilt testen terwijl u wijzigingen aanbrengt, zijn er twee opties: open het .html-bestand in uw browser zoals een website of installeer de widget en test deze in het Dashboard. De eerste is sneller voor ontwikkeling, terwijl de tweede een echte Dashboard-ervaring biedt.
Het installeren van een widget is ook heel eenvoudig. Het enige dat nodig is, is een dubbelklik op een widget en een "ja" op de installatieprompt. Zorg ervoor dat u voordat u uw nieuwe widget installeert, een kopie van uw bewerkte versie opslaat. Dit komt omdat tijdens het installeren het bestand wordt verplaatst naar "~ / Bibliotheek / Widgets". Merk ook op dat wanneer we de nieuwe Stickies-widget installeren, deze de laatste zal overschrijven omdat deze dezelfde naam heeft.
Het bewerken van de widget leek aanvankelijk ontmoedigend, maar de eenvoud ervan stelde ons in staat om gemakkelijk wijzigingen aan te brengen. We zijn klaar met het bewerken van onze Stickies-widget en hopelijk gaf de Dashboard-wereld een klein gerommel. Als we dit wilden, konden we nu doorgaan met het maken van meer achtergronden en meer functies toevoegen om aan onze behoeften te voldoen.
We zijn pas echt tot diep in de dingen gekomen die we kunnen doen door onze Dashboard-widgets aan te passen. Dit is inderdaad slechts een inleiding tot de Widget-hack-wereld en wat u kunt doen, is gebaseerd op uw vermogen om foto's te manipuleren en met de code te werken. U weet nu hoe u de wijzigingen moet aanbrengen, maar wat hierna komt, is beslissen welke wijzigingen u wilt aanbrengen.
!
Accentsconagua