Wie erstellt man native C++-Apps mit HTML/CSS-UI?

Lesezeit: 6 Minuten

Benutzer-Avatar
ranieri

Ist es möglich, ein C++-Programm zu entwickeln und gleichzeitig HTML und CSS für die Benutzeroberfläche zu verwenden? Ich kenne mich mit der Programmierung mit Javascript unter Verwendung eines Webkit-Containers aus, aber ich interessiere mich wirklich für die C++-Entwicklung.

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. Dafür möchte ich HTML und CSS, die sehr leicht und einfach zu verwenden sind, mit C++-Code mischen, mit etwas wie WPF.

Oh, noch etwas: Ich suche nach Desktop-Entwicklung, nicht nach Web.

Ja, es ist möglich. Was Sie wollen, ist ein C++-Webframework. Sie könnten damit beginnen, sich umzusehen CppCMS– ein kostenloses Hochleistungs-Webentwicklungs-Framework (kein CMS), das auf die schnelle Entwicklung von Webanwendungen abzielt.

Bearbeiten: Nachdem die Frage geklärt ist, denke ich Awesomium würde gut zu deinen bedürfnissen passen.

Sie können die gleiche Funktionalität erreichen, indem Sie WebKit (oder Gecko) einbetten, aber soweit ich weiß, macht Awesomium genau das hinter den Kulissen.

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

  • Aber würde dies für eine ausführbare Datei kompiliert werden? Ich suche Desktop, nicht Web.

    – ranieri

    7. Juli 2013 um 23:07 Uhr

  • Möchten Sie, dass der Benutzer in der Lage ist, einen Browser zu starten und zu navigieren lokaler Host und die Oberfläche Ihrer Anwendung nutzen? Oder möchten Sie, dass der Benutzer eine ausführbare Datei öffnet und die Weboberfläche angezeigt wird?

    Benutzer11617

    7. Juli 2013 um 23:10 Uhr

  • @RobertDinu Ich denke, er möchte eine Desktop-Anwendung mit C++ erstellen und die Benutzeroberfläche mit HTML/CSS erstellen

    – Leonardo Arroyo

    7. Juli 2013 um 23:12 Uhr

  • @RobertDinu: Es gibt auch eine kleinere/leichtere Bibliothek namens libRocket ( librocket.com ), die für OP nützlich sein könnten. Vielleicht möchten Sie es Ihrer Antwort hinzufügen, wenn Sie es für passend halten.

    – yzt

    7. Juli 2013 um 23:46 Uhr

  • Ich kann sehen, wie dies eine Menge Zeit sparen würde. Würde dieser Ansatz zu irgendeinem Zeitpunkt zu Problemen führen?

    – abgelaufener Ninja

    18. April 2015 um 3:32 Uhr

Benutzer-Avatar
c-Lächeln

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

Und prüfe Dieser Artikel.

Sciter hat das gleiche Feature-Set als WPF verwendet jedoch HTML/CSS anstelle von XAML und verwendet eine native API.

Funktionen out of the box:

  • HTML, CSS, SVG, aPNG (animierte PNGs), Bildsprites,
  • <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-Benutzeroberfläche, die unter Windows, MacOS und Linux aus denselben Quellen ausgeführt wird:

Geben Sie hier die Bildbeschreibung ein

Haftungsausschluss: Ich bin ein Autor von Sciter Engine.

Aktualisierung 2021: kannst du auch verwenden Sciter.JS das ist eine Version von Sciter, die die standardmäßige JavaScript-Skript-Engine (ES2020) verwendet.

  • Ich bin ein Anfänger in C++, aber ich finde die Dokumentation spärlich und beängstigend für Anfänger Projekt

    – Wiederholungsnull

    15. Juni 2016 um 23:16 Uhr

  • @repzero sieh dir diesen Artikel an codeproject.com/Articles/859098/… ich denke, es ist für C++-Anfänger geeignet.

    – c-Lächeln

    16. Juni 2016 um 17:10 Uhr

  • @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 „Build and Run“ – Sie sollten sehen, dass die App ausgeführt wird.

    – c-Lächeln

    16. Juni 2016 um 17:23 Uhr

  • @c-smile danke für eine Anleitung hier. Als ich versuchte, das Projekt in Codeblöcken auszuführen, erhalte ich einen schwerwiegenden Fehler „gtk/gtk.h no such file or directory“. -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“. Irgendwelche Ratschläge?

    – Wiederholungsnull

    16. Juni 2016 um 23:05 Uhr

  • Unter Linux benötigt Sciter GTK3. Wenn Sie Beispiele erstellen möchten, benötigen Sie das GTK-Entwicklungspaket, versuchen Sie es sudo apt-get install libgtk-3-dev

    – c-Lächeln

    16. Juni 2016 um 23:52 Uhr

Ich finde Elektron wäre eine nette 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 Node-Modul 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 die anderen Antworten.

Mein liebster Texteditor, Atomwurde mit Electron gemacht.

Sie können verwenden Eingebettetes Chromium-Framework zum Einbetten von HTML5-Inhalten in Ihre App. Sie erhalten die Kraft und Geschwindigkeit von Chromium und die Möglichkeit, GUI-Apps auf die gleiche Weise zu erstellen, wie Sie Webanwendungen entwickeln.

Benutzer-Avatar
tomer zeitune

Ich empfehle Auschecken Ultraleichte HTML-UI-Engine

Nicht Open Source, verfügbar für C++. OpenGL- und DirectX-Rendering wird unterstützt.

Ultralight ist die leichtere, schnellere Option zur Integration der HTML-Benutzeroberfläche in Ihre C++-App.

Es wurde vom Schöpfer von Awesomium erstellt, der leider beschlossen hat, Awesomium zu löschen.

Wenn Sie etwas schwereres brauchen, empfehle ich einen Blick auf CEF. Es ist ein sehr mächtiges (und Open Source) Tool.

  • Es ist sehr, sehr bedauerlich, dass es sich um eine geschlossene Quelle handelt, wenn man bedenkt, wozu Awesomium in der Lage war 🙁

    – ranieri

    3. September 2019 um 3:20 Uhr

  • Ich habe Ultralight ausprobiert, bin aber gescheitert. Aufgrund von lib-not-found-Fehlern konnte nicht einmal das Browser-Beispiel ausgeführt werden. Der enthaltende Ordner befindet sich definitiv in meiner PATH-Variablen. Versucht, die Basis-App zu kompilieren, aber ohne Erfolg. Der Compiler konnte keine Klasseneinstellungen finden, die nirgendwo deklariert sind, wie ich mit grep beweisen konnte. (Ubuntu 18.4)

    – testalucida

    3. Dezember 2019 um 16:20 Uhr


  • @testalucida Sie können Support im Slack-Workspace von Ultralight suchen.

    – tomer zeitune

    3. Dezember 2019 um 16:22 Uhr

ich würde vorschlagen RmlUI

Es ist ein aktiver Fork von librocket mit mehr Funktionen. Es ist sehr modular, Sie können das Rendering, die Ereignisbehandlung und die Benutzereingaben selbst handhaben (oder eines der bereitgestellten Beispiele kopieren).

Screenshot des Demo-Spielmenüs

Hinweis: RmlUI unterstützt keine vollständigen HTML5/CSS3-Spezifikationen, sondern nur einen Teil davon. Animationen werden ebenfalls unterstützt.

  • Es ist sehr, sehr bedauerlich, dass es sich um eine geschlossene Quelle handelt, wenn man bedenkt, wozu Awesomium in der Lage war 🙁

    – ranieri

    3. September 2019 um 3:20 Uhr

  • Ich habe Ultralight ausprobiert, bin aber gescheitert. Aufgrund von lib-not-found-Fehlern konnte nicht einmal das Browser-Beispiel ausgeführt werden. Der enthaltende Ordner befindet sich definitiv in meiner PATH-Variablen. Versucht, die Basis-App zu kompilieren, aber ohne Erfolg. Der Compiler konnte keine Klasseneinstellungen finden, die nirgendwo deklariert sind, wie ich mit grep beweisen konnte. (Ubuntu 18.4)

    – testalucida

    3. Dezember 2019 um 16:20 Uhr


  • @testalucida Sie können Support im Slack-Workspace von Ultralight suchen.

    – tomer zeitune

    3. Dezember 2019 um 16:22 Uhr

1322930cookie-checkWie erstellt man native C++-Apps mit HTML/CSS-UI?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy