Share
Das Dashboard ist in diesen Tagen veraltet. Wir stellen hier alle paar Wochen einen Taschenrechner und eine Haftnotiz ab, aber leider haben wir in letzter Zeit nicht viele tolle Widgets gesehen. Um den leeren Raum im Herzen unseres Dashboards zu beheben, lassen Sie uns ein Widget zerlegen und in unser eigenes hacken!
Spitze: Wenn Sie die Widget-Datei aus diesem Tutorial herunterladen möchten, können Sie sie hier herunterladen. Dies ist das angepasste Dashboard-Widget, das am Ende dieses Lernprogramms erstellt wird und alle Bilder und Änderungen enthält. Dies bedeutet, dass Sie es direkt in Ihrem Dashboard installieren und mit den Änderungen sofort spielen können.
Wenn wir das Dashboard eines durchschnittlichen Mac-Benutzers betrachten, ist es wahrscheinlich leer und wird nie verwendet, oder überwältigend voll von Sport-News-Feeds und Haftnotizen. Manchmal sehen wir auch festliche Weihnachtslichter! Sicherlich muss das Dashboard mehr haben als dies.
Wir könnten unser Leben fortsetzen und weiter auf unsere unordentlichen Bildschirme starren, aber das entspricht nicht dem Mactuts + -Stil! Dashboards werden aussterben, also lassen Sie uns die Szene wiederbeleben, indem Sie unsere Widgets mehr denn je anpassen.
Um einen Aspekt dieser Widget-Depression zu bekämpfen, bearbeiten wir das Widget "Stickies" und machen es zu unserem eigenen. Die Bearbeitungen sind einfach: Ändern Sie die Hintergründe der Haftnotizen, sodass wir bestimmte Notenfarben (und Beschriftungen) für bestimmte Zwecke haben können. Zum Beispiel haben wir einen Haftnotizentyp für persönliche Gedanken, einen für ToDo-Listen und möglicherweise einen weiteren für zufällige Notizen. Wir werden auch eine benutzerdefinierte Schaltfläche "Alle löschen" hinzufügen, um das Löschen unserer Notizen zu beschleunigen.
Dashboards werden aussterben, also lassen Sie uns die Szene wiederbeleben, indem Sie unsere Widgets mehr denn je anpassen.
Sie werden einige HTML-, CSS- und JavaScript-Kenntnisse benötigen, aber der Prozess ist sicherlich nicht zu fortgeschritten. Lass uns anfangen!
Alle Widgets befinden sich im Ordner "/ Library / Widgets". Sie können schnell gehen Comman + Shift + G um schnell darauf zuzugreifen. Da wir das Stickies-Widget bearbeiten, finden Sie die Widget-Datei Stickies.wdgt und machen Sie eine Kopie auf Ihren Desktop. Auf diese Weise können wir die Dateien bearbeiten, ohne sich um Berechtigungen und Speicherprobleme kümmern zu müssen.
Klicken Sie mit der rechten Maustaste auf Ihren Desktop und wählen Sie aus Paketinhalt anzeigen um das Widget als Ordner zu öffnen, anstatt es im Dashboard zu öffnen.
Nachdem wir nun die Dateien des Widgets geöffnet haben, werfen wir einen Blick auf die allgemeine Struktur eines Widgets.
Dashboard-Widgets sind relativ einfach. Sie sind kleine HTML-Setups, in die JavaScript eingebettet ist, um sie interaktiv zu machen. Aus diesem Grund sind die in jedem Widget enthaltenen Dateien unkompliziert und leicht zu ändern, insbesondere wenn Sie nur einfache Dinge wie die Bilder ändern möchten. Das Stickies Widget ist ein großartiges Beispiel für diese Einfachheit.
Um zu verstehen, wie ein Dashboard-Widget funktioniert, sehen wir uns jede einzelne Datei an und sehen, wozu sie verwendet wird.
Das Info.plist Datei bestimmt Informationen über das Widget. Es ist von zentraler Bedeutung für das Widget, da es den Bundle-Namen (hier "Stickies"), die aktuelle Version, die Höhe und Breite des Widgets und vieles mehr enthält. Da wir in diesem Lernprogramm jedoch nur Widgets bearbeiten, können wir diese Datei ignorieren.
Diese Datei ist im Allgemeinen die gleiche wie die letzte. Es enthält weitere Informationen zum Widget. Es hat die Versionsnummer, Build-Nummer usw. Es ist nicht wichtig für das, was wir tun.
Dies ist das wahre Fleisch des Widgets. Hier haben wir den Code, der ausmacht, was wir sehen. Wie bereits erwähnt, ist jedes Widget nur eine HTML-Seite, sodass diese leicht bearbeitet werden kann. Wenn Sie es öffnen, werden Sie wissen, ob Sie bereits mit Websites gearbeitet haben. (Hinweis: Die "Stickies" im Dateinamen ändern sich je nach Widget. Daher hat diese Datei nicht immer denselben Namen. Dies gilt auch für die nächsten beiden Dateien.)
Natürlich möchten wir mit dem HTML-Code den Inhalt formatieren, daher folgt hier die CSS-Datei.
Die Interaktivität des Widgets stammt von JavaScript, und hier wird alles gespeichert. Wir werden das später auch bearbeiten!
Wenn ein Widget geladen wird, werden diese Bilder als Platzhalter angezeigt, bis alles geladen ist. Es ist der Startbildschirm des Widgets. (Wenn Sie sich fragen, was das "@ 2x" am Ende bedeutet, ist es auf neueren Bildschirmen ein größeres Bild für das Retina-Display.)
Wenn Sie ein Widget zu Ihrem Dashboard hinzufügen, werden diese Symbole angezeigt und gezogen. Wieder ist das "@ 2x" für Retina-Displays.
Das Stickies-Widget verwendet einen Ordner "Images", um alle Bilder zu speichern. Im Inneren befinden sich alle Hintergründe und Symbole, aus denen das Widget besteht.
Das erste und einfachste, was wir tun können, bevor wir in den Code einsteigen, ist das Bearbeiten der Bilddateien, um das Erscheinungsbild des Widgets zu ändern. Im Fall des Stickies-Widgets und vieler anderer Standard-Widgets können Sie einfach neue Bilder in den Widget-Ordner ziehen und dort ablegen, um Änderungen vorzunehmen. Wenn ich beispielsweise das Stickies-Symbol ändern wollte, könnte ich ein neues erstellen .png Dateien und ersetzen Sie die alten ("icon.png" und "[email protected]").
Ich habe jetzt auch das gelbe Hintergrundbild im Ordner "Bilder" geändert, indem ein Thema mit "persönlichen Gedanken" hinzugefügt wurde. Ich habe die Farben geändert und oben rechts ein Symbol hinzugefügt, um den Zweck der Notiz anzuzeigen.
Wenn wir nun das neue Widget installieren, werden wir sofort die Änderungen sehen und unsere gelben Notizen werden jetzt das Thema "persönliche Gedanken" haben. Lassen Sie uns noch eine weitere Note ändern und diesmal eine ToDo-Liste erstellen.
Durch das Bearbeiten der Bilder können Sie Ihren Widgets ein stilvolles Flair verleihen. Das geht schnell und einfach, und wenn Sie alles möchten, können Sie mit Schritt 5 fortfahren, um das neu modifizierte Widget zu installieren. Ansonsten arbeiten wir weiter daran.
Jetzt ist es Zeit, einige echte Funktionen hinzuzufügen! Hier kommt das HTML / CSS / JavaScript-Wissen zum Tragen, da jedes Widget mit genau diesem erstellt wird. Wir werden den Code nicht allzu ausführlich bearbeiten, aber wir werden mit allen drei Dateien arbeiten, um Sie kennenzulernen. Wie ich bereits sagte, arbeiten wir daran, unten links ein weiteres kleines Symbol hinzuzufügen, das als Schaltfläche "Alle löschen" fungiert.
Um die neue Schaltfläche hinzuzufügen, müssen wir eine weitere hinzufügen #eraseButton div direkt vor dem #infoButton div (Zeile 21). Im Moment ist dies nur ein leeres div mit einem Bild, aber wir werden es so gestalten, dass es bald wie eine tatsächliche Schaltfläche aussieht. Das img ist ein einfaches "x" -Symbol von 12px x 12px, das ich im Ordner "Images" abgelegt habe.
Um nun die Schaltfläche zum Löschen der Schaltfläche zu erhalten, wenden wir uns dem zu Stickies.css Datei und fügen Sie einige grundlegende Informationen zum Standort und zur Größe hinzu #infoButton Selektoren. Lassen Sie uns auch etwas mehr Stil geben, indem Sie die Deckkraft erhöhen, wenn Sie darüber schweben.
#eraseButton Deckkraft: 0,5; Position: absolut; oben: 166px; links: 15px; Breite: 13px; Höhe: 13px; #eraseButton: hover Deckkraft: 1;
Wenn du dir das anschaust Stickies.js Datei, werden Sie feststellen, dass es dank Apple sehr gut dokumentiert und geschrieben ist. Dies macht es uns leicht, damit zu arbeiten.
Der JavaScript-Code für das Löschen der Schaltfläche ist eine sehr einfache Funktion, bei der der Inhalt des Textfelds einfach auf nichts gesetzt wird. Fügen Sie diesen Code an einer beliebigen Stelle im hinzu Stickies.js, vorzugsweise dort, wo es zu anderen Funktionen passt. Ich habe es nach dem textToHTML Funktion.
function eraseAll () mydiv.innerHTML = "";
Um den JavaScript-Code aufzurufen, fügen Sie ein ein onclick Veranstaltung zum #eraseButton in dem Stickies.html Datei.
Und der Button ist fertig! Es ist ein sehr einfaches Beispiel, aber es zeigt auch die Erweiterbarkeit solcher Widgets aufgrund ihrer Einfachheit
Wenn Sie Ihr Widget einmal testen möchten, während Sie Änderungen vornehmen, gibt es zwei Möglichkeiten: Öffnen Sie die HTML-Datei in Ihrem Browser wie eine Website, oder installieren Sie das Widget und testen Sie es im Dashboard. Der erste ist schneller für die Entwicklung, während der zweite eine echte Dashboard-Erfahrung bietet.
Die Installation eines Widgets ist ebenfalls sehr einfach. Dazu genügt ein Doppelklick auf ein Widget und ein "Ja" zur Installationsabfrage. Stellen Sie sicher, dass Sie vor der Installation Ihres neuen Widgets eine Kopie Ihrer bearbeiteten Version speichern. Dies liegt daran, dass die Datei bei der Installation nach "~ / Library / Widgets" verschoben wird. Beachten Sie auch, dass bei der Installation des neuen Stickies-Widgets das letzte überschrieben wird, da es den gleichen Namen hat.
Die Bearbeitung des Widgets war anfangs entmutigend, aber aufgrund seiner Einfachheit konnten wir Änderungen leicht vornehmen. Wir haben das Stickies-Widget fertig bearbeitet und haben der Dashboard-Welt hoffentlich einen kleinen Groll gegeben. Wenn wir wollten, könnten wir jetzt weitere Hintergründe erstellen und weitere Funktionen hinzufügen, um unsere Bedürfnisse zu erfüllen.
Wir haben uns wirklich nur mit den Dingen befasst, die wir tun können, indem wir unsere Dashboard-Widgets modifizieren. Dies ist in der Tat nur eine Einführung in die Widget-Hacking-Welt. Was Sie tun können, hängt von Ihrer Fähigkeit ab, Fotos zu bearbeiten und mit dem Code zu arbeiten. Sie können jetzt die Änderungen vornehmen, aber als Nächstes entscheiden Sie, welche Änderungen Sie vornehmen möchten.
!
Accentsconagua