» Hello C++

Hello C++

This tutorial is based mostly on Windows version of the Sciter (a.k.a. Sciter.JS) but MacOS and Linux versions use the same source files an projects structure.

Preparation

Download Sciter.JS SDK from GitLab.

Add environment variable named SCITERSDK that will contain path to Sciter SDK on your hard drive:

SCITERSDK=C:\libraries\sciter-sdk

Real path can be any, just put there actual path.

Creating project folder

Create a folder on your hard drive named hellocpp with the following structure:

  • hellocpp – folder containing the project;
    • ui – subfolder that will contain HTML/CSS/script files defining UI of our application;
      • main.htm – main window layout – only file for a while;
    • main.cpp – our main c++ file that contains main window declaration and ui_main() function;
    • resources.cpp – binary blob that contains compressed content of /ui/ folder. This file is generated by {SCITERSDK}/bin/windows/packfolder utility;
    • stdafx.h – (Windows only) create empty text file with this name.

Content of /ui/main.htm

<html 
   window-width=800px
   window-height=600px
   window-resizable=true>
  <head>
    <title>Hello</title>
    <style>

      html {
        background:gold;
      }

      body {
        vertical-align:middle;
        text-align:center;
      }

    </style>
    <script type="text/javascript">

      document.ready = function() {
        // calling native method defined in main.cpp
        const thisWindow = Window.this;
        document.body.innerText = thisWindow.frame.nativeMessage(); 
      }

    </script>
  </head>
  <body>
  </body>
</html>

Nothing spectacular here other than the demo of calling native function thisWindow.frame.nativeMessage(); defined in main.cpp file:

Content of /main.cpp

#include "sciter-x.h"
#include "sciter-x-window.hpp"

class frame: public sciter::window {
public:
  frame() : window(SW_MAIN | SW_ENABLE_DEBUG) {}

  // passport - lists native functions and properties exposed to script under 'frame' interface name:
  SOM_PASSPORT_BEGIN(frame)
    SOM_FUNCS(
      SOM_FUNC(nativeMessage)
    )
  SOM_PASSPORT_END
  
  // function expsed to script:
  sciter::string  nativeMessage() { return WSTR("Hello C++ World"); }

};

#include "resources.cpp" // resources packaged into binary blob.

int uimain(std::function<int()> run ) {

  sciter::archive::instance().open(aux::elements_of(resources)); // bind resources[] (defined in "resources.cpp") with the archive

  sciter::om::hasset<frame> pwin = new frame();

  // note: this:://app URL is dedicated to the sciter::archive content associated with the application
  pwin->load( WSTR("this://app/main.htm") );
  //or use this to load UI from  
  //  pwin->load( WSTR("file:///home/andrew/Desktop/Project/res/main.htm") );
  
  pwin->expand();

  return run();
}

Note that this file does not contain any OS specific code – it is used “as is” on Windows, MacOS and Linux versions of your application.

This file declares three major sections:

  1. class frame declaration – this is definition of your main window;
  2. #include "resources.cpp" – it includes resource blob used by sciter::archive instance.
  3. int uimain() function declaration, this is a main UI function that defines lifecycle of our application. It does the following:
    1. Binds resource blob with the archive;
    2. Creates instance of our frame class – main window of the application;
    3. Loads main.htm file in it;
    4. Shows the window – pwin->expand();
    5. And finally invokes passed run() function – this is so called “message pump loop”. The loop will run until our main frame window is not closed.

Content of /resources.cpp file

This file contains compressed content of /ui folder and is generated by invoking packfolder utility with following parameters. This needs to be done inside our project folder:

$(SCITERSDK)\bin\windows\packfolder.exe ui resources.cpp -v "resources"

Parameters are:

  • ui – name of local folder to pack;
  • resources.cpp – name of output file that will contain the blob;
  • -v “resources” – defines variable name of the blob – const unsigned char resources[] = {...}; in resources.cpp.

Note that you can put this command into .bat file as you will need to run it each time when you change anything in /ui/ to regenerate resources.cpp file.

Generating hellocpp project

Note that these steps are common to any IDE or build system you may use with Sciter. I just explain key points:

Out project shall include two .cpp source files.

Sources:

  1. main.cpp – as defined above and
  2. sciter-win-main.cpp – from $(SCITERSDK)\include\ folder. This file implements WinMain and calls our uimain() function. For other OSes you shall use either one of these instead:
    • sciter-osx-main.mm – MacOS’ int main(...) and message pump loop;
    • sciter-gtk-main.cpp – Linux/GTK int main(...).

Includes:

These paths need to be added to Additional Include Directories (in terms of Visual Studio IDE)

.;$(SCITERSDK)/include

This adds the folder of our project (.) and /include folder of Sciter SDK to headers look up path of C++ compiler.

Project Output:

Our project uses sciter.dll (.dylib, .so) that needs to be placed in the same folder as our executable (hellocpp.exe). We have two options for that:

  • to configure our project to use SDK’s bin folder $(SCITERSDK)\bin\windows\x32\ as OutDir so the exe will be created there or
  • to create hellocpp/bin/ folder and copy there sciter.dll from $(SCITERSDK)\bin\windows\x32\ manually. The project needs to be configured to use that /bin/ as OutDir.

And the last step, we need to configure our application to use wmain() entry point instead of WinMain. Set wmainCRTStartup into Linker/Advanced/Entry Point field:

Done

We can compile and run our hellocpp.exe:

Windows Note: it makes sense to define that our executable is DPI aware – supports high-DPI monitors. In order to do this define DPI Awareness property as Per Monitor Dpi Aware


Downloads: