Hoe native C++ apps te bouwen met HTML/CSS UI?

Is het mogelijk om een ​​C++-programma te ontwikkelen met HTML en CSS voor de gebruikersinterface? Ik weet van programmeren met Javascript met behulp van een Webkit-container, maar ik ben echt geïnteresseerd in C++-ontwikkeling.

Ik was verliefd op C# WPF toen ik me ontwikkelde onder Windows, maar nu ben ik overgestapt op Linux en heb ik geen goede tool gevonden om markup voor interfaces te gebruiken. Hiervoor zou ik HTML en CSS, die erg licht en gemakkelijk te gebruiken zijn, willen combineren met C++-code, met zoiets als WPF.

O, nog één ding: ik ben op zoek naar desktopontwikkeling, niet naar internet.


Antwoord 1, autoriteit 100%

Ja, dat is mogelijk. Wat je wilt is een C++ webframework. Je zou kunnen beginnen door te kijken naar CppCMS—een gratis high-performance webontwikkelingsframework (geen CMS ) gericht op snelle ontwikkeling van webapplicaties.

Bewerken: nadat de vraag is opgehelderd, denk ik dat Awesomiumeen goede geschikt voor uw behoeften.

Je kunt dezelfde functionaliteit bereiken door WebKit (of Gecko) in te sluiten, maar voor zover ik weet is dat precies wat Awesomium achter de schermen doet.

Een alternatief is lirocket—een C++-interface middleware-pakket ontworpen voor game-applicaties. Zoals je uit de beschrijving kunt raden, is het geschikt voor games of realtime-applicaties.


Antwoord 2, autoriteit 86%

Sciteris precies dat: insluitbare HTML/CSS-engine met C/C++ API. Compact en multi-platform.

En bekijk dit artikel.

Sciter heeft dezelfde functie ingesteld als WPFmaar gebruikt HTML/CSS in plaats van XAML en gebruikt native API.

Kenmerken uit de doos:

  • HTML, CSS, SVG, aPNG (geanimeerde PNG’s), afbeeldingssprites,
  • <plaintext>– editor met syntaxisaccentuering,
  • <htmlarea>– WYSIWYG HTML-editor,
  • <frame type=pager>– afdrukvoorbeeld en HTML/CSS-afdruk,
  • animaties,
  • HTTP-client, REST/JSON-client, WebSocket’s, DataSockets,
  • enz.

Dezelfde applicatie met Sciter UI draaiend op Windows, MacOS en Linux vanuit dezelfde bronnen:

voer hier de afbeeldingsbeschrijving in

Disclaimer: ik ben een auteur van Sciter Engine.

2021 update:je kunt ook gebruiken Sciter.JSdat is een versie van Sciter die de standaard JavaScript-scriptengine (ES2020) gebruikt.


Antwoord 3, autoriteit 27%

Ik denk dat Electroneen mooie aanvulling zou zijn op de andere antwoorden.

Het gebruikt NodeJS om een ​​Webkit-venster uit te voeren. Electron zelf is alleen html/css/js, maar je kunt elke Node-module in je Electron-app gebruiken – inclusief aangepaste, native gecompileerde C++-code. Een mogelijke module om je C++-code in te sluiten zou node-gyp zijn.

Houd er echter rekening mee dat deze workflow iets meer JS kan bevatten dan bij de andere antwoorden.

Mijn favoriete teksteditor, Atom, is gemaakt met Electron.


Antwoord 4, autoriteit 23%

Je kunt Chromium Embedded Frameworkgebruiken om HTML5-inhoud in je app in te sluiten.
Je krijgt de kracht en snelheid van Chromium en de mogelijkheid om GUI-apps te bouwen op dezelfde manier waarop je webapplicaties ontwikkelt.


Antwoord 5, autoriteit 11%

Ik raad aan om Ultralight HTML UI Engine
te bekijken
Niet open source, beschikbaar voor C++. OpenGL- en DirectX-rendering ondersteund.

Ultralight is de lichtere, snellere optie om HTML UI te integreren in uw
C++-app.

Het is gemaakt door de maker van Awesomium, die helaas heeft besloten om Awesomium te verwijderen.

Als je iets zwaarders nodig hebt, raad ik je aan om CEFte bekijken. Het is een zeer krachtige (en open source) tool.


Antwoord 6

Schrijven in 2021.

U kunt webassemblage gebruiken (https://webassembly.org/). Met webassemblage of WASM kunt u uw toepassing in elke taal schrijven, bijvoorbeeld C++. Compileer het vervolgens naar webassembly, die de browser kan uitvoeren. Beschouw wasm als elke andere assembly, maar dan voor browsers. Op het moment dat dit antwoord wordt geschreven, worden alle grote browsers geleverd met de WASM-engine, en daarom zult u geen problemen ondervinden om aan de slag te gaan.

Raadpleeg de officiële documenten voor webassemblage voor C++:

  1. https://developer.mozilla.org/en-US/docs /WebAssembly/C_to_wasm
  2. https://developer.mozilla.org/en-US/docs /WebAssembly/existing_C_to_wasm

Disclaimer: ik heb geen banden met WASM

Other episodes