Jak budować natywne aplikacje C ++ z interfejsem HTML / CSS?

84

Czy możliwe jest stworzenie programu w C ++ z wykorzystaniem HTML i CSS jako interfejsu użytkownika? Wiem o programowaniu w Javascript przy użyciu kontenera Webkit, ale bardzo interesuje mnie programowanie w C ++.

Zakochałem się w C # WPF, kiedy tworzyłem pod Windows, ale teraz przeniosłem się na Linuksa i nie znalazłem dobrego narzędzia do używania znaczników dla interfejsów. W tym celu chciałbym połączyć HTML i CSS, które są bardzo lekkie i łatwe w użyciu, z kodem C ++, z czymś w rodzaju WPF.

Aha, jeszcze jedno: szukam programowania na komputery stacjonarne, a nie w Internecie.

c++ html css user-interface desktop-application ranisalt
źródło

Odpowiedzi:

40

Tak to mozliwe. To, czego potrzebujesz, to framework sieciowy C ++. Możesz zacząć od spojrzenia na CppCMS - darmowy, wysokowydajny framework do tworzenia aplikacji internetowych (nie CMS) przeznaczony do szybkiego tworzenia aplikacji internetowych.

Edycja : po wyjaśnieniu pytania myślę, że Awesomium będzie dobrze pasować do twoich potrzeb.

Możesz osiągnąć tę samą funkcjonalność, osadzając WebKit (lub Gecko), ale o ile wiem, właśnie to robi Awesomium za kulisami.

Alternatywą jest librocket - pakiet oprogramowania pośredniego interfejsu C ++ przeznaczony do gier. Jak można się domyślić z opisu, dobrze pasuje do gier lub aplikacji czasu rzeczywistego.

Cody Gray
źródło
3
Ale czy to skompilowałoby się dla pliku wykonywalnego? Szukam komputera, a nie internetu.
ranisalt
4
Czy chcesz, aby użytkownik mógł uruchomić przeglądarkę i przejść do hosta lokalnego i korzystać z interfejsu Twojej aplikacji? A może chcesz, aby użytkownik otworzył plik wykonywalny i zobaczył interfejs sieciowy?
15
@RobertDinu Myślę, że chce zbudować aplikację desktopową w C ++ i stworzyć interfejs użytkownika z HTML / CSS
Leonardo Arroyo
4
@RobertDinu: Istnieje również mniejsza / lżejsza biblioteka o nazwie libRocket ( librocket.com ), która może być przydatna dla OP. Możesz dodać to do swojej odpowiedzi, jeśli uważasz, że pasuje.
yzt
Widzę, jak zaoszczędziłoby to dużo czasu. Czy takie podejście doprowadziłoby do jakichkolwiek problemów?
wygasł
36

Sciter jest właśnie tym - osadzalnym silnikiem HTML / CSS z interfejsem API C / C ++. Kompaktowy i wieloplatformowy.

I sprawdź ten artykuł .

Sciter ma ten sam zestaw funkcji co WPF, ale używa HTML / CSS zamiast XAML i używa natywnego interfejsu API.

Funkcje po wyjęciu z pudełka:

  • HTML, CSS, SVG, aPNG (animowane PNG), sprite'y obrazów,
  • <plaintext> - edytor z podświetlaniem składni,
  • <htmlarea> - edytor HTML WYSIWYG,
  • <frame type=pager> - podgląd wydruku i wydruk HTML / CSS,
  • animacje,
  • Klient HTTP, klient REST / JSON, WebSocket's, DataSockets,
  • itp.

Ta sama aplikacja ze Sciter UI działająca w systemach Windows, MacOS i Linux z tych samych źródeł:

wprowadź opis obrazu tutaj

Zastrzeżenie: jestem autorem Sciter Engine.

c-uśmiech
źródło
2
Jestem początkującym w c ++, ale uważam, że dokumentacja jest skąpa i przerażająca dla początkujących .. dokumentacja powinna zaczynać się od tego, jak uruchomić dema w blokach kodu lub nawet powłoce, aby sprawdzić, czy to działa ... Prosimy o dodanie więcej wysiłku marketingowego do projekt
repzero
@repzero sprawdź ten artykuł codeproject.com/Articles/859098/… , myślę, że jest odpowiedni dla początkujących C ++.
c-smile
2
@repzero Jeśli chodzi o codeblocks, po prostu otwórz {sciter-sdk} /demos/usciter/usciter.cbp w tym IDE, wybierz miejsce docelowe Release64 i kliknij przycisk „Build and Run” - powinieneś zobaczyć uruchomioną aplikację.
c-smile
@ c-smile dzięki za pewne wskazówki. kiedy próbowałem uruchomić projekt w blokach kodu, otrzymuję błąd krytyczny „gtk / gtk.h brak takiego pliku lub katalogu” ten błąd pochodzi z instrukcji include w „sciter-x -types.h "plik nagłówkowy ... Używam Debiana jessie..Mam folder o nazwie gtk, który zawiera plik gtk.h. ten folder znajduje się w „/user/include/gtk-2.o/gtk”… jakaś rada?
repzero
W systemie Linux Sciter wymaga GTK3. Jeśli chcesz zbudować próbki, będziesz potrzebować pakietu deweloperskiego gtk, wypróbujsudo apt-get install libgtk-3-dev
c-smile
11

Myślę, że Electron byłby miłym dodatkiem do innych odpowiedzi.

Używa NodeJS do uruchamiania okna Webkit. Sam Electron to tylko html / css / js, ale możesz używać dowolnego modułu węzła w swojej aplikacji Electron - w tym niestandardowego, skompilowanego natywnie kodu C ++. Możliwym modułem do osadzenia kodu w C ++ byłby node-gyp.

Należy jednak pamiętać, że ten przepływ pracy może zawierać nieco więcej JS niż w przypadku innych odpowiedzi.

Mój ulubiony edytor tekstu, Atom , został stworzony w Electronie.

Johannes
źródło
9

Możesz użyć wbudowanej struktury Chromium, aby osadzić zawartość HTML5 w swojej aplikacji. Zyskasz moc i szybkość Chromium oraz możliwość tworzenia aplikacji GUI w taki sam sposób, w jaki tworzysz aplikacje internetowe.

Vadim Ovchinnikov
źródło
5

Od 2019 sugeruję wypróbowanie Ultralight HTML UI Engine
Not Open Source, dostępnego dla C ++. Obsługa renderowania OpenGL i DirectX.

Ultralight to lżejsza i szybsza opcja integracji interfejsu użytkownika HTML z aplikacją C ++.

Jest to dzieło twórcy Awesomium, który niestety zdecydował się usunąć Awesomium. Oto, co mamy teraz.

Jeśli potrzebujesz czegoś cięższego, a nie lekkiego, polecam przyjrzeć się CEF . To bardzo potężne (i open source) narzędzie.

tomer zeitune
źródło
1
Zamknięte źródło jest bardzo, bardzo niefortunne, biorąc pod uwagę, do czego był zdolny
Awesomium
Spróbowałem Ultralight, ale nie udało mi się. Nie można nawet uruchomić próbki przeglądarki z powodu błędów nie znaleziono biblioteki. Folder zawierający zdecydowanie znajduje się w mojej zmiennej PATH. Próbowałem skompilować aplikację podstawową, ale nie udało się. Kompilator nie mógł znaleźć ustawień klasy, które nigdzie nie są zadeklarowane, ponieważ mogłem udowodnić, używając grepa. (Ubuntu 18.4)
testalucida
@testalucida Możesz szukać wsparcia w obszarze roboczym Slack firmy Ultralight.
tomer zeitune