So erstellen Sie schwebende Sketch-Plugins, Teil I

Wir haben kürzlich Alembic, ein Sketch-Plugin, das Farben aus Bildern extrahiert, als Open-Source-Version veröffentlicht. Als ich anfing, daran zu arbeiten, wusste ich, dass die Verwendung eines einfachen Dialogfensters nicht mit der Oberfläche funktionieren würde, die ich mir vorgestellt hatte. Also habe ich mit anderen Methoden experimentiert, um eine benutzerdefinierte Oberfläche für Sketch-Plugins zu erstellen, und mich dazu entschlossen, ein schwebendes Bedienfeld mit einem darin enthaltenen WebView zu verwenden, um die eigentliche Oberfläche zu erstellen.

Leider gibt es nicht viel Dokumentation darüber, wie Sie Cocoa for Sketch-Plugins für Fortgeschrittene einsetzen können. In diesem Artikel wird erläutert, wie Sie ein Beispiel-Plugin mit einem schwebenden Bedienfeld erstellen, das eine WebView enthält, und vor allem, wie Sie die WebView mit Sketch kommunizieren lassen.

Wenn Sie nicht mit dem Erstellen von Sketch-Plugins vertraut sind, empfehle ich dringend, mit der Einführung in die Sketch-Entwicklerwebsite und den grundlegenden Beispielen zu beginnen, bevor Sie diesen Artikel lesen. Wenn Sie Probleme oder Fragen haben, wenn Sie mit neuen Ideen für Plugins experimentieren, empfehle ich Ihnen auch, das von Ale aus Sketch erstellte Forum für Sketch-Plugins zu besuchen, um festzustellen, ob bereits jemand auf dasselbe Problem gestoßen ist.

Der Artikel ist in zwei Teile unterteilt: Der erste Teil befasst sich mit der Erstellung des Panels und der Benutzeroberfläche, der zweite Teil mit der Kommunikation zwischen Sketch und WebView.

Panel erstellen

Um etwas Fortgeschritteneres als die Standarddialogfelder von Sketch zu tun, müssen wir die von macOS bereitgestellten Cocoa-Frameworks wie AppKit für Oberflächenelemente und WebKit verwenden, um eine WebView zu erstellen.

Zunächst erstellen wir das Panel selbst. Zuvor können Sie jedoch zunächst die grundlegende Plugin-Struktur herunterladen. Wir werden die NSPanel-Klasse von AppKit verwenden, eine Unterklasse von NSWindow, die zum Erstellen von sekundären Fenstern verwendet wird. Genau das soll unser Panel sein.

Wir haben ein Panel! Der einfache weiße Hintergrund ist ein wenig langweilig, damit es aussieht wie ein Fenster, das in macOS gehört. Fügen Sie mit der NSVisualEffectView-Klasse von AppKit einen unscharfen Hintergrund hinzu.

Das Panel ist jetzt visuell fertig, aber wir haben einige Probleme: Wir können so viele Panels starten, wie wir möchten, und wir können keines davon schließen.

Um die Möglichkeit des Starts mehrerer Bedienfelder zu beheben, speichern wir einen Verweis auf das erste Bedienfeld, das wir mit NSThread von Foundation öffnen. Jetzt können wir überprüfen, ob bereits ein Panel geöffnet ist, bevor wir das Plugin erneut ausführen.

Der nächste Schritt besteht darin, das Bedienfeld zu schließen, wenn auf die Schaltfläche "Schließen" geklickt wird. Außerdem wird der Verweis entfernt (damit wir ihn wieder öffnen können) und das Plugin gestoppt.

Schnittstelle erstellen

Nachdem wir das Bedienfeld haben, fügen wir mit der WebView-Klasse von WebKit eine Webseite hinzu, die sich im Ressourcenordner des Plugins befindet.

Anschließend fügen wir der Webseite CSS und JavaScript hinzu, damit sie sich besser in macOS einfügt.

Sie sollten jetzt ein schwebendes Bedienfeld mit einer lokalen Webseite im Inneren haben, Glückwunsch! Wenn nicht, ist alles in Ordnung. Hier ist der Code.

Im nächsten Teil sehen wir uns den wichtigsten Teil an: wie Sie die Kommunikation zwischen WebView und Sketch herstellen, damit wir mit der eben erstellten Benutzeroberfläche tatsächlich etwas unternehmen können. Stellen Sie sicher, dass Sie dabei sind!