Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Cross-Browser

Plattformübergreifende Entwicklung mit NW.js 

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Weitere Anwendungen nutzen Webtechnologien.  Brackets, Peppermint und Pinegrow sind beispielsweise Programmiereditoren, die aus HTML, JavaScript und CSS erstellt wurden.  Das ermöglicht die Verwendung bekannter Tools, macht Anwendungen aber auch plattformübergreifender.  In diesem Tutorial werde ich Ihnen zeigen, wie Sie NW.js verwenden, um einen einfachen Programmiereditor zu erstellen, den Sie unter Windows, Mac OS X und Linux verwenden können.

Einführung und Herunterladen von NW.js

NW.js, ursprünglich als Node Webkit bekannt, ist das Paket von Node.js und WebKit HTML-Rendering in einem Paket zum Ausführen lokaler Anwendungen.  Die NW.js-Version verwendet io.js, eine aktuellere Version der V8-JavaScript-Engine mit mehr Unterstützung für ES6.  Da io.js zu 100% mit den neuesten Node.js kompatibel ist, können alle Bibliotheken und Programme, die Node.js verwenden, auch mit io.js verwendet werden.

Laden Sie zunächst alle drei Betriebssystemversionen von NW.js oder nur die Versionen herunter, für die Sie das Projekt ausführen möchten.  Ich werde auf meinem MacBook Air entwickeln, aber Sie können jedes beliebige System verwenden, das Sie möchten.  Das Projekt ist Fun Editor: ein einfach zu bedienender Code-Editor für ein Dokument.  Es basiert auf dem Linux-Motto: Eine einzige Aufgabe, die gut gemacht wurde!

Die Teile bekommen

Um zu beginnen, muss node oder io.js auf Ihrem System installiert sein.  Nachdem Sie node oder io.js installiert haben, befindet sich der Befehl npm auf Ihrem System.  Dieser Befehl dient zum Installieren verschiedener JavaScript-Bibliotheken.

Die erste Bibliothek ist Bower.  Geben Sie Folgendes in eine Eingabeaufforderung ein:

Auf einigen Systemen müssen Sie vor dem Befehl npm möglicherweise sudo verwenden, um es im Super-User-Modus auszuführen.

Der Befehl bower ist ein Paketmanager für viele Webtechnologien.  Es bietet eine einfache Möglichkeit, webbezogene Elemente zu Ihrem Projekt hinzuzufügen.

Um benutzerdefinierte Aktionen für das DOM auszuführen, verwendet dieser Editor die JavaScript-Bibliothek Zepto.js anstelle von jQuery.  Da Fun Editor die Bibliothek nur für DOM-Arbeiten verwendet, passt Zepto die Rechnung auf einen Bruchteil der Größe an.

Erstellen Sie ein neues Verzeichnis für das Projekt.  Geben Sie im Verzeichnis mit der Befehlszeile Folgendes ein:

Es wird jetzt ein neues Verzeichnis namens bower_components geben.  In diesem Verzeichnis hat bower die less- und zepto-Bibliotheken installiert.  Das war viel einfacher als das Auffinden der Website und das Herunterladen.

Die Ace JavaScript-Bibliothek ist die Basis für diesen Editor.  Es ist ein flexibler und einfach zu bedienender Editor in JavaScript, der zum Einbetten in Websites konzipiert ist.  Zur Installation geben Sie im Terminal in unserem Projektverzeichnis Folgendes ein:

Es gibt jetzt ein neues Verzeichnis ace.  Alle Quellen für die Bibliothek befinden sich in diesem Verzeichnis.  Die Bibliothek muss im kompakten Format kompiliert werden, um das Laden zu beschleunigen.  Geben Sie in der Befehlszeile Folgendes ein:

Mit diesen Befehlen gelangen Sie in das ace-Verzeichnis, installieren alle für den ace-Editor erforderlichen Bibliotheken und erstellen die minimierten Bibliotheksdateien im build-Unterverzeichnis.

Dieses Projekt verwendet die node-watch-Bibliothek, um zu erfahren, ob sich die Datei im Editor geändert hat.  Diese Bibliothek aktiviert eine Rückruffunktion, wenn sich die angegebene Datei ändert.  Um diese Bibliothek in unserem Projekt zu installieren, muss das Projektverzeichnis ein Knotenpaketverzeichnis sein.  Geben Sie in der Befehlszeile im Projektverzeichnis Folgendes ein:

Das npm-Programm wird einige Fragen zum Projekt stellen.  Nachdem Sie die Fragen beantwortet haben, befindet sich eine package.json-Datei im Projektverzeichnis.  Der npm-Befehl speichert die Namen aller in dieser Datei installierten Bibliotheken.  Durch die Weitergabe der Projektdatei an eine andere Person können sie dieselbe Arbeitsumgebung erstellen.

Um die node-watch-Bibliothek zu installieren, geben Sie Folgendes ein:

Wenn Sie fertig sind, gibt es ein node_modules-Verzeichnis  mit der Bibliothek darin.  Das –save-Flag wies npm an, die Bibliothek im Projekt und nicht global zu speichern.

Die letzte zu installierende Software ist Emmet.  Sie können keinen Code-Editor ohne Emmet haben.  Laden Sie den Emmet-Code von Emmet auf GitHub herunter und speichern Sie ihn in der Datei emmet.js im Verzeichnis js.

Nun, da alle Teile im Projektordner vorhanden sind, ist alles bereit, um es zusammenzufügen!

Alles zusammenfügen

Das erste Element, das für ein NW.js-Projekt erforderlich ist, ist die Projektdatei.  Leider verwendet die Knotenprojektdatei denselben Dateinamen.  Da die Knotenprojektdatei während der Entwicklung nicht benötigt wird, kann sie bis zur nächsten Verwendung verschoben werden.  Geben Sie in der Befehlszeile im Projektverzeichnis Folgendes ein:

Diese Befehle haben die ursprüngliche package.json-Datei nach node.package.json verschoben und eine leere Datei mit dem Namen package.json erstellt.  Geben Sie in der package.json-Datei Folgendes ein:

Diese Datei teilt NW.js mit, wie das Programm gestartet wird.  Die verschiedenen Felder sind:

description

Das sollte eine kurze Beschreibung des Programms und seiner Funktionen sein.

main

Das ist die zu öffnende HTML-Hauptdatei.  Diese Datei sollte den gesamten HTML-Code für die Hauptseite des Programms enthalten.

name

Das ist der Name des Programms.

version

Das sollte eine Versionsnummer für das Programm sein.

window

Das ist ein Json-Array von Werten, um die Benutzeroberfläche des Programms zu beschreiben.  Dieses Array enthält die folgenden Elemente:

height

Das ist eine Anzahl von Pixeln für die Höhe des Programmfensters beim Start.

width

Das ist die Anzahl der Pixel für die Breite des Programmfensters beim Start.

show

Das ist ein boolescher Befehl, der NW.js sagt, ob die Hauptfenster beim Laden angezeigt werden sollen oder nicht.  Ich habe es auf true gesetzt.  Wenn Sie den Wert auf false setzen, stellen Sie sicher, dass Sie ihn später aktivieren können.

title

Das ist der Standardtitel für das Programm.  Es wird verwendet, wenn es geladen ist, bis es von Programmcode geändert wird.

toolbar

Dieser Boolean teilt NW.js mit, ob eine Symbolleiste vorhanden sein soll oder nicht.  Da FunEditor ein minimalistischer Editor ist, ist dieser Wert auf false gesetzt.  Wenn Sie jedoch die Dev-Werkzeuge zum Debuggen Ihres Editors verwenden müssen, können Sie dies auf true setzen und ein Symbol für die Dev-Werkzeuge wird angezeigt.

icon

Das ist ein relativer Pfad des Symbols, das für das Programm verwendet werden soll.  Das Projektverzeichnis sollte die Basis für den Verweis auf diese Datei sein.

Da eine main.html-Datei in der Konfiguration enthalten ist, wird die nächste Datei erstellt.  Erstellen Sie im Projektverzeichnis die Datei main.html und geben Sie diesen Code ein:

Das ist das Hauptprogramm.  Es handelt sich hierbei um eine einfache HTML-Seite, die hauptsächlich aus einer Liste von zu ladenden JavaScript-Dateien besteht, einer Less-Datei zum Gestalten von allem, einem div mit einer id des editor für den Editor und einem div mit einer id mit info sowie einigen Bereichen für den Status Linie.  Das Styling für die Statuszeile nahm ich aus meinem Tutorial über Getting Spiffy With Powerline.  Powerline wird nicht verwendet - es sieht einfach so aus.  Am unteren Rand befinden sich zwei Eingänge, die nicht angezeigt werden.  Das sind die Dateien zum Öffnen der Datei NW.js und zum Speichern der Dateien.

Gute Kodierungspraktiken würden bedeuten, das JavaScript am Ende der Seite zu laden.  Da das Fenster für die Seite erst angezeigt wird, wenn es vom Programm angezeigt wird, spielt es keine Rolle.

Damit der HTML-Code richtig aussieht, müssen Sie als Nächstes den Stil erstellen.  Erstellen Sie ein neues Verzeichnis mit dem Namen less im Projektverzeichnis.  Erstellen Sie dann die Datei default.less und fügen Sie diese hinzu:

Diese Styling-Informationen dienen dazu, die div-Position des Editors absolut zu machen und den gesamten Browserfensterbereich mit Ausnahme von 25 px am unteren Rand einzunehmen.  Dieser Bereich ist für die Statuszeile.

Oben in der Datei werden Sie einige weniger Variablendefinitionen sehen.  Da die gleichen Farben an mehr als einer Stelle verwendet werden (d. h. Der Abstand für die Zeilennummer und der Pfeil für den Pfeil), habe ich sie in eine Less-Variable umgewandelt.  Auf diese Weise muss ich nur ein Element ändern, um alle zu ändern.  Stift oder SASS können ebenfalls verwendet werden, Less kann jedoch dynamisch im Code geändert werden.  Ideal für Themenwechsel auf der Straße.

Nun zum Hauptprogramm.  Erstellen Sie im Verzeichnis js eine Datei mit dem Namen FunEditor.js und geben Sie den folgenden Code ein:

Oben in der Datei sehen Sie die Deklaration des FunEditor-Objekts und einige Variablen.  Nach den Variablen gibt es drei require-Anweisungen.  Diese Anweisungen laden die node-watch-Bibliothek zum Überwachen einer Dateiänderung, die Bibliothek nw.gui, die die Interaktion mit der grafischen Benutzeroberfläche ermöglicht, die Bibliothek fs, die den Zugriff auf das Dateisystem ermöglicht, und die Bibliothek os, um mit dem Betriebssystem zu arbeiten.  Die Bibliotheken gui, fs und os sind Teil des Programms NW.js, während die node-watch eine von npm heruntergeladene Bibliothek ist.

In der gui-Bibliothek enthält die Variable FunEditor.clipboard das Objekt der Zwischenablage für den Zugriff auf die Systemzwischenablage.  Ebenso enthält die Variable FunEditor.win das Fensterobjekt für die Hauptfenster, die von NW.js für dieses Programm erstellt wurden.

Nachdem die Bibliotheken und globalen Variablen geladen wurden, werden mehrere Hilfsfunktionen erstellt.  Alle Funktionen, die mit FunEditor beginnen, sind Funktionen zum Ausführen des Editors und nicht spezifisch für NW.js.  Die anderen Funktionen werden von NW.js benötigt.

Ich habe jede Funktion hier beschrieben:

FunEditor.handleDocumentChange

Diese Funktion lädt den Editor mit der korrekten Syntaxhervorhebung basierend auf dem geladenen Dokument.  Sie legt außerdem den Fenstertitel und den Dokumentnamen in der Statuszeile fest.  Wenn der Fenstertitel festgelegt ist, wird das Betriebssystem überprüft, das mit FunEditor.os.platform() verwendet wird.  Wenn es sich um ein Windows-Betriebssystem handelt, muss die Suche nach dem letzten Verzeichnisseparator anders sein, da Windows \ verwendet, während OS X und Linux / verwenden.

Diese Funktion richtet auch die Dateiüberwachung mit FunEditor.watch ein.  Wenn die der Funktion übergebene Datei geändert wird, lädt die Rückruffunktion die Datei erneut in den Editor.

FunEditor.setCursorLast

Diese Funktion setzt den Cursor auf den zuletzt gespeicherten Ort.  Die Position wird jedes Mal gespeichert, wenn der Cursor bewegt und in der Statuszeile aufgezeichnet wird.  Immer wenn die Datei nach einer Änderung neu geladen wird, wird diese Funktion verwendet, um den Cursor an den letzten bekannten Ort zurückzusetzen.

FunEditor.newFile

Diese Funktion dient zum Erstellen einer neuen, leeren Datei.

FunEditor.readFileIntoEditor

Diese Funktion verwendet die Referenzvariable der Bibliothek FunEditor.fs, um die Datei aus dem Dateisystem einzulesen und in den Editor zu platzieren.  Es löscht dann die Auswahl und setzt den Cursor an die letzte bekannte Position.

FunEditor.writeEditorToFile

Diese Funktion übernimmt den aktuellen Status des Editors und speichert ihn mit der Variable FunEditor.fs im Dateisystem.

FunEditor.copyFunction

Diese Funktion verwendet die Bibliothek NW.js, um den aktuell ausgewählten Text in die Systemzwischenablage zu kopieren.

FunEditor.cutFunction

Diese Funktion ist mit FunEditor.copyFunction identisch, löscht jedoch den ausgewählten Text aus dem Editor.

FunEditor.pasteFunction

Diese Funktion übernimmt den Inhalt der Zwischenablage mithilfe der Bibliothek NW.js für die Zwischenablage und fügt sie an der aktuellen Cursorposition im Editor ein.

FunEditor.openFile

Diese Funktion öffnet den System-Dateidialog, indem ein Klick auf das ausgeblendete Eingabeelement ausgelöst wird.  Das gilt auch für NW.js.

FunEditor.saveFile

Diese Funktion speichert den Editorinhalt in der Datei, wenn er aus einer Datei geladen wurde und diese Datei Schreibzugriff hat.  Andernfalls wird das System als Dialogfeld geöffnet, in dem der Benutzer eine Datei auswählen kann.  Das funktioniert auch, indem Sie auf das ausgeblendete saveFile-Element klicken.

FunEditor.initMenus

Diese Funktion erstellt die grafischen Menüelemente für ein Kontextmenü und das Systemmenü.  Dabei wird die FunEditor.gui-Bibliothek verwendet.

Das Hauptmenü für Mac OS X wurde um zusätzliche Funktionen erweitert.  In diesem Abschnitt informiert die FunEditor.os-Bibliothek die Softwareplattform.  Wenn es sich um Mac OS X handelt, führen Sie die zusätzlichen Funktionen aus, die für das Hauptmenü erforderlich sind.

Onchosenfiletoopen

Diese von NW.js definierte Funktion ruft die ausgewählte Datei ab, wenn das Öffnen-Datei-Dialogfeld  geschlossen wird.  Diese Funktion lädt diese Datei dann mit der Funktion FunEditor.readFileIntoEditor in den Editor.

Onchosenfiletosave

Diese von NW.js definierte Funktion ruft die Datei ab, wenn das Dialogfeld Speichern unter geschlossen wird.  Diese Funktion speichert dann den Inhalt des Editors mit der Funktion FunEditor.writeEditorToFile in der angegebenen Datei.

Onload

Diese NW.js-Funktion wird aufgerufen, wenn alles, was in der main.html-Datei definiert ist, in NW.js geladen wird.  Es ist äquivalent zu document.onload = function(){}; oder die jQuery $(document).ready (funcition(){});.

Diese Funktion bereitet den Editor mit den gewünschten Einstellungen vor.  Das Thema ist solarisiert dunkel, die Tastatur für das vim-Layout, die Hervorhebung aktiver Linien usw.  Die Tastaturbefehle für das Kopieren, Einfügen, Ausschneiden und Speichern des Editors werden mit den Windows- und Mac-Standardeinstellungen festgelegt.  Der Ace-Editor kümmert sich um plattformübergreifende Fragen.

Sobald der Editor initialisiert ist, werden Listener für den changeStatus-, copy-, paste- und save-Editorereignis eingerichtet.  Dadurch kann der Editor die Verwendung der Systemzwischenablage innerhalb des Ass-Editors erzwingen und die Zeilen- und Spalteninformationen in der Statuszeile aktualisieren.  Der changeStatus-Listener aktualisiert den vim-Modus und die aktuelle Cursorposition.

Ich habe mich auch mit der Speicherfunktion befasst, die der Vim-Modus hat (:w).  Das hat etwas Arbeit gekostet, aber ich habe es auch herausgefunden.  Ace-Editor leiht sich Code aus Code Mirror, um das Vim-Tastaturlayout zu erstellen.  Es funktioniert, ist aber keine robuste Lösung.

Onresize

Diese von NW.js definierte Funktion wird aufgerufen, wenn die Größe des Fensters geändert wird.  Für den FunEditor muss nichts getan werden.

Laufen auf verschiedenen Plattformen

Das ist alles die Programmierung für den Editor.  Nun, um es auf jeder Plattform auszuführen.  Wenn Sie die NW.js noch nicht für jede Plattform heruntergeladen haben, machen Sie es jetzt und befolgen Sie die Anweisungen für jede Plattform.  Nehmen Sie alle Dateien im Projektverzeichnis und komprimieren Sie sie in einem ZIP-Archiv.  Wenn Sie fertig sind, ändern Sie den Namen des Archivs in FunEditor.nw.

Auf jeder Plattform können Sie immer zur Befehlszeile wechseln und den Befehl nw im Projektverzeichnis ausführen.  Leider wird bei der Basisinstallation die ausführbare Datei nicht in den Systempfad eingefügt.  Daher können Sie abhängig von der verwendeten Shell einen nw Aliasnamen für die ausführbare Datei erstellen.  Während der Entwicklung verwende ich dies im Projektverzeichnis zum Testen:

Sobald ich die FunEditor.nw erstellt habe, verwende ich:

Sobald die Funktionsprüfung abgeschlossen ist, starte ich die Verpackung für meine anderen Systeme.

Mac

Sobald NW.js auf dem Mac installiert ist, befindet sich die Datei nwjs.app in Ihrem Anwendungsverzeichnis.  In dem Verzeichnis, in dem Sie die Anwendung komprimiert haben, können Sie das Programm mit der folgenden Befehlszeile ausführen:

Um ein anklickbares Paket zu erstellen, ändern Sie die Datei FunEditor.nw in app.nw.  Kopieren Sie die Datei /Applications/nwjs.app nach /Applications/FunEditor.app.  Klicken Sie im Finder mit der rechten Maustaste auf die Anwendung und wählen Sie Inhalt anzeigen aus.  Legen Sie die Datei app.nw im Verzeichnis Resources ab, und ändern Sie das Symbol in ein beliebiges Symbol.  Ich füge eine in den Download ein.  Denken Sie daran, den Namen der Datei nw.icns beizubehalten.

Um den richtigen Namen im Menü zu erhalten, müssen Sie die Datei info.plist ändern.  Öffnen Sie es und ändern Sie den Inhalt in:

Ich nahm die Datei info.plist für NW.js, entfernte alles, was spezifisch für das Starten von Dateien mit der Erweiterung nw ist, änderte die Version in 1.0 und änderte den Namen in FunEditor.

FunEditor on Mac OS X
FunEditor unter Mac OS X

Sobald das erledigt ist, haben Sie eine anklickbare Anwendung für FunEditor.

Windows

Der einfachste Weg, den Editor unter Windows auszuführen, ist die Verwendung einer Batchdatei.  Erstellen Sie eine Datei FunEditor.bat irgendwo in Ihrem Systempfad.  Geben Sie Folgendes in die Datei ein:

FunEditor on Windows 7
FunEditor unter Windows 7

Wenn Sie auf die Batchdatei doppelklicken, wird der FunEditor geöffnet.

Linux

Wenn Sie das Programm NW.js heruntergeladen haben, stellen Sie sicher, dass sich das Verzeichnis mit dem entsprechenden Pfad in Ihrem Pfad befindet.  Erstellen Sie eine Skriptdatei, die das Programm NW.js mit Ihrem Programm aufruft.  Erstellen Sie in Ihrem Pfad eine Datei mit dem Namen FunEditor:

Speichern Sie die ausführbaren Berechtigungen und legen Sie sie fest:

Wenn Sie diesen Befehl jetzt ausführen, sollte der Editor für Linux gestartet werden!

FunEditor on Arch Linux
FunEditor auf Arch Linux

FunEditor macht Spaß auf meinem Arch Linux!

Schlussfolgerung

Mit diesem Projekt haben Sie gelernt, wie Sie mit NW.js einen Editor erstellen können, der unter Windows, Linux und Mac OS X ausgeführt werden kann.  Dieses Projekt bietet viel Raum für Verbesserungen.  Viel Spaß dabei, diesen kleinen Editor zu Ihrem Traumeditor zu machen und auf jedem Betriebssystem zu verwenden!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.