NW.js: Programm erstellen und testen, 1. Teil

Windows 10 64-Bit, Stable nwjs-sdk-v0.15.4-win-x64

Jetzt geht's los

Kurze Info vorab: NW.js besteht im Wesentlichen aus 2 Teilen, dem Javascript-Interpreter (N)ode und einer Abspaltung von der Browser-Engine (W)ebkit, nämlich Google Chrome, daher der Name NW.js. Der Browser wird zur Darstellung benutzt und bringt wie fast jeder Browser seinen eigenen Javascript-Interpreter mit. Es gibt also zwei getrennte JS-Interpreter, den von Node und den vom Browser. Näheres zu den beiden Javascript-Interpretern gibt es später.

Endlich, mein erstes NW.js Programm!

Da NW.js einen Browser zur Darstellung verwendet muss für den optischen Teil eine HTML-Datei erstellt werden. Deren Inhalt sieht in HTML5 minimal so aus:

                            <!DOCTYPE html>
                            <html>
                                <head>
                                    <title>Mein 1. Programm in NW.js</title>
                                </head>
                                <body>
                                    <h1>Hallo, ich bin's!</h1>
                                </body>
                            </html>
                        

Hmmm, welchen Editor soll ich denn zur Programmentwicklung benutzen?

Da gibt es Auswahl ohne Ende. Meine persönliche, rein subjektive Empfehlung: Notepad++. Der ist klein und flink, hat für den Anfang ausreichende Funktionalität, es gibt eine Menge Erweiterungen dafür, er kostet nichts und es gibt ihn auf der Download-Seite auch als ZIP-Ordner ohne Installationsprogramm (lässt sich dann auch ohne Administratorrechte auf Memory Stick installieren/kopieren und von dort starten und einfach wieder löschen).

Wichtig: HTML-Seiten, Javascript- und CSS-Dateien im Dateiformat UTF-8 (ohne BOM Byte Order Mark falls möglich) erstellen, dann gibt es keine Probleme mit der Darstellung von Umlauten. Zusätzlich muss UTF-8 auch auf jeder HTML-Seite im Kopfbereich angegeben werden (diese Angabe fehlt im obigen Beispiel).

So, weiter geht's. Notepad++ starten, falls nicht vorhanden eine neue Datei mit Strg-N anlegen und per Strg-S als Hyper Text Markup Language file (*.html, ...) im Verzeichnis, wo sich auch nw.exe befindet, unter dem Namen otto.html abspeichern. Zur Sicherheit noch überprüfen, dass im Menüpunkt Kodierung tatsächlich UTF-8 ohne BOM angewählt ist. Falls nicht diesen Punkt anwählen und den Text auf korrekte Darstellung überprüfen und falls nötig korrigieren. Dann mit Strg-S nochmals speichern. Das Strg ist die Abkürzung für Steuerung (Englisch: Control Ctrl), manche PC-Nutzer nennen diese Taste eigenartigerweise auch String (Zeichenkette?) oder strong(stark?).

Wenn jetzt nw.exe gestartet wird ... passiert nichts, d.h. unsere schöne neue Seite wird nicht angezeigt. Ja so ein Mist!

Ja wie sage ich denn nun NW.js, dass otto.html angezeigt werden soll?

Gute Frage, simple Antwort: nw.exe sucht beim Start nach der Konfigurationsdatei package.json (dieser Dateiname ist fest von nw.exe vorgegeben, kann also nicht geändert werden). In dieser Datei gibt man an, was nw.exe laden soll. Für unser einfaches Beispiel sieht dies so aus (Laut Dokumentation sind nur diese beiden Felder als Minimum vorgegeben. Die im Internet oft zu sehende Angabe der Version wird in der Dokumentation der von mir verwendeten Version von NW.js nicht erwähnt (genauer: Das Feld kann angegeben werden ist aber funktionslos)):

                            {
                                "name": "Otto, Karl",
                                "main": "otto.html"
                            }
                        

Also alle Schritte durchführen wie bei otto.html, beim Speichern muss aber der Dateityp Normal text file (*.txt) ausgewählt sein/werden und der Dateiname muss zwingend package.json lauten. Auch diese Datei kommt ins Verzeichnis von nw.exe.

Jetzt nochmal nw.exe starten und ... nun klappt's auch mit NW.js :-)

Kommentar? Schreiben Sie mir eine Email . Keine Angst, Ihre Email wird nicht veröffentlicht. Ich erlaube mir aber, auf Ihre Email zu antworten, schreiben Sie mir also nicht, wenn Sie nicht mit mir kommunizieren möchten. Danke.

Übersicht aller Artikel zu NW.js