Wie erstelle ich native C ++ - Apps mit HTML / CSS-Benutzeroberfläche?

83

Ist es möglich, ein C ++ - Programm unter Verwendung von HTML und CSS für die Benutzeroberfläche zu entwickeln? Ich kenne mich mit der Programmierung mit Javascript mithilfe eines Webkit-Containers aus, bin aber sehr an der C ++ - Entwicklung interessiert.

Ich habe mich in C # WPF verliebt, als ich unter Windows entwickelt habe, aber jetzt bin ich zu Linux gewechselt und habe kein gutes Tool für die Verwendung von Markup für Schnittstellen gefunden. Dazu möchte ich HTML und CSS, die sehr leicht und einfach zu verwenden sind, mit C ++ - Code mit etwas wie WPF mischen.

Noch eine Sache: Ich suche nach Desktop-Entwicklung, nicht nach Web.

Ranisalt
quelle

Antworten:

40

Ja, es ist möglich. Was Sie wollen, ist ein C ++ - Webframework. Sie können sich zunächst CppCMS ansehen - ein kostenloses Hochleistungs-Webentwicklungsframework (kein CMS) für die schnelle Entwicklung von Webanwendungen.

Bearbeiten : Nachdem die Frage geklärt wurde, denke ich, dass Awesomium gut zu Ihren Bedürfnissen passt.

Sie können dieselbe Funktionalität erreichen, indem Sie WebKit (oder Gecko) einbetten, aber soweit ich weiß, ist dies genau das, was Awesomium hinter den Kulissen tut.

Eine Alternative ist librocket - ein Middleware-Paket für C ++ - Schnittstellen, das für Spieleanwendungen entwickelt wurde. Wie Sie der Beschreibung entnehmen können, eignet es sich gut für Spiele oder Echtzeitanwendungen.

Cody Grey
quelle
3
Aber würde dies für eine ausführbare Datei kompilieren? Ich suche Desktop, nicht Web.
Ranisalt
4
Möchten Sie, dass der Benutzer einen Browser starten und zu localhost navigieren und die Benutzeroberfläche Ihrer Anwendung verwenden kann? Oder möchten Sie, dass der Benutzer eine ausführbare Datei öffnet und die Weboberfläche erhält?
15
@ RobertDinu Ich denke, er möchte eine Desktop-Anwendung mit C ++ erstellen und die Benutzeroberfläche mit HTML / CSS erstellen
Leonardo Arroyo
@ RobertDinu der zweite.
Ranisalt
4
@RobertDinu: Es gibt auch eine kleinere / leichtere Bibliothek namens libRocket ( librocket.com ), die für OP nützlich sein könnte. Vielleicht möchten Sie es Ihrer Antwort hinzufügen, wenn Sie es für passend halten.
Yzt
35

Sciter ist genau das - einbettbare HTML / CSS-Engine mit C / C ++ - API. Kompakt und plattformübergreifend.

Und überprüfen Sie diesen Artikel .

Sciter hat den gleichen Funktionsumfang wie WPF , verwendet jedoch HTML / CSS anstelle von XAML und verwendet die native API.

Sofort einsatzbereite Funktionen:

  • HTML, CSS, SVG, aPNG (animierte PNGs), Bild-Sprites,
  • <plaintext> - Editor mit Syntaxhervorhebung,
  • <htmlarea> - WYSIWYG HTML-Editor,
  • <frame type=pager> - Druckvorschau und HTML / CSS-Druck,
  • Animationen,
  • HTTP-Client, REST / JSON-Client, WebSockets, DataSockets,
  • usw.

Dieselbe Anwendung mit Sciter UI, die unter Windows, MacOS und Linux aus denselben Quellen ausgeführt wird:

Geben Sie hier die Bildbeschreibung ein

Haftungsausschluss: Ich bin Autor von Sciter Engine.

c-smile
quelle
2
Ich bin ein Anfänger in C ++, aber ich finde die Dokumentation für Anfänger spärlich und beängstigend. Die Dokumentation sollte damit beginnen, wie die Demos in Codeblocks oder sogar einer Shell ausgeführt werden, um zu sehen, ob sie funktioniert Projekt
repzero
@repzero überprüfen Sie diesen Artikel codeproject.com/Articles/859098/… , ich denke, es ist für C ++ Anfänger geeignet.
C-Smile
2
@repzero Öffnen Sie ab Codeblocks einfach {sciter-sdk} /demos/usciter/usciter.cbp in dieser IDE, wählen Sie das Release64-Ziel aus und klicken Sie auf die Schaltfläche "Erstellen und Ausführen". Die App sollte ausgeführt werden.
C-Smile
@ c-smile danke für einige Hinweise hier. Wenn ich versuchte, das Projekt in Codeblöcken auszuführen, erhalte ich den schwerwiegenden Fehler "gtk / gtk.h keine solche Datei oder kein solches Verzeichnis". Dieser Fehler ging von der include-Anweisung im "sciter-x" aus -types.h "Header-Datei ... Ich verwende Debian Jessie. Ich habe einen Ordner namens gtk, der die Datei gtk.h enthält. Dieser Ordner befindet sich in '/user/include/gtk-2.o/gtk'..any Ratschläge?
Repzero
Unter Linux benötigt Sciter GTK3. Wenn Sie Beispiele erstellen möchten, benötigen Sie ein GTK-Entwicklungspaket. Versuchen Sie es mitsudo apt-get install libgtk-3-dev
c-smile
11

Ich denke, Electron wäre eine schöne Ergänzung zu den anderen Antworten.

Es verwendet NodeJS, um ein Webkit-Fenster auszuführen. Electron selbst ist nur html / css / js, aber Sie können jedes Knotenmodul in Ihrer Electron App verwenden - einschließlich benutzerdefiniertem, nativ kompiliertem C ++ - Code. Ein mögliches Modul zum Einbetten Ihres C ++ - Codes wäre Node-Gyp.

Beachten Sie jedoch, dass dieser Workflow möglicherweise etwas mehr JS enthält als bei den anderen Antworten.

Mein Lieblingstexteditor Atom wurde mit Electron erstellt.

Johannes
quelle
9

Sie können Chromium Embedded Framework verwenden , um HTML5-Inhalte in Ihre App einzubetten. Sie erhalten die Macht und Geschwindigkeit von Chromium und die Möglichkeit, GUI-Apps auf die gleiche Weise zu erstellen, wie Sie Webanwendungen entwickeln.

Vadim Ovchinnikov
quelle
4

Ab 2019 empfehlen wir Ihnen, die für C ++ verfügbare Ultralight HTML UI Engine
Not Open Source zu testen. OpenGL- und DirectX-Rendering wird unterstützt.

Ultralight ist die leichtere und schnellere Option, um die HTML-Benutzeroberfläche in Ihre C ++ - App zu integrieren.

Es wurde vom Schöpfer von Awesomium gemacht, der sich leider entschieden hat, Awesomium zu löschen. Das haben wir jetzt.

Wenn Sie etwas Schwereres als Leichtes benötigen, empfehle ich einen Blick auf CEF . Es ist ein sehr leistungsfähiges (und Open Source) Tool.

tomer zeitune
quelle
1
Es ist sehr, sehr unglücklich, wenn man bedenkt, wozu Awesomium in der Lage war :(
Ranisalt
Ich habe Ultralight ausprobiert, bin aber gescheitert. Das Browser-Beispiel konnte aufgrund von lib-not-found-Fehlern nicht einmal ausgeführt werden. Der enthaltende Ordner befindet sich definitiv in meiner PATH-Variablen. Versucht, die Basis-App zu kompilieren, aber nicht erfolgreich. Der Compiler konnte keine Klasseneinstellungen finden, die nirgends deklariert sind, da ich mit grep nachweisen konnte. (Ubuntu 18.4)
Testalucida
@testalucida Sie können Unterstützung im Slack-Arbeitsbereich von Ultralight suchen.
Tomer Zeitune