Using Sciter in CodeBlocks (2018 update)

This tutorial shows how to configure CodeBlocks IDE to use TDM-GCC MinGW compiler with Sciter library.

1. Download TDM-GCC, CodeBlocks and Sciter SDK:
tdm64-gcc-5.1.0-2.exe
codeblocks-17.12-setup.exe
sciter-sdk.zip

You may try Sciter GUI without installing any compilers. Just extract sciter-sdk.zip to "c:\sciter\", run "c:\sciter\sdk\bin\64\sciter.exe" and open different html examples from "C:\sciter\sdk\samples\":

2. Install TDM-GCC MinGW compiler before installing CodeBlocks IDE. Installing in this order ensures that CodeBlocks IDE will detect MinGW toolchain executables automatically:

3. Run CodeBlocks.

4. Create new project: "File -> New -> Project -> Console application"

5. Select C++

6. Enter project title "test" and select directory "C:\sciter" for project files:

7. Leave default compiler and press "Finish":

8. In "Management" window doubleclick on main.cpp under "Projects -> Workspace -> test -> Sources":

9. You will see default console application template. You can try to compile and run it by pressing "F9":

10. Replace code in main.cpp with this example:

#define UNICODE
#define _UNICODE
#include "sciter-win-main.cpp"

using namespace std;

static RECT wrc = { GetSystemMetrics(SM_CXSCREEN)/2-400,
                    GetSystemMetrics(SM_CYSCREEN)/2-300,
                    GetSystemMetrics(SM_CXSCREEN)/2+400,
                    GetSystemMetrics(SM_CYSCREEN)/2+300};

class frame: public sciter::window {
public:
  frame() : window(SW_TITLEBAR | SW_RESIZEABLE | SW_CONTROLS | SW_MAIN | SW_ENABLE_DEBUG, wrc) {}
};

LPCWSTR GetUrl() {
  static WCHAR url[MAX_PATH] = {0};

  wcscpy(url,L"file://");
  GetModuleFileName(NULL,url+7,MAX_PATH-7);
  WCHAR* t = wcsrchr(url,'\\');
  assert(t);
  wcscpy(t + 1,L"resources\\index.htm");
  return url;
}

int uimain(std::function<int()> run ) {
    frame *pwin = new frame();
    pwin->load( GetUrl());
    pwin->expand();
    return run();
}

11. Extract sciter-sdk.zip to "c:\sciter\sdk\":

12. Open "Settings -> Compiler..." and enable two options:
- "Have g++ follow the C++14 ISO C++ language standard [-std=c++14]"
- "Target x86_64 (64bit) [-m64]":

13. Open "Linker settings" tab:
Add "libole32" to ""Link libraries"
Add "-municode" to "Other linker options" (enables wWinMain)

14. Add "C:\sciter\sdk\include" on "Search directories" tab:

15. Ensure that "Toolchain executables" tab is configured to use TDM-GCC MinGW compiler:

16. Press "F9" to build and run. Error messagess will appear:
- fix "C:\sciter\sdk\include\sciter-win-main.cpp|1|fatal error: stdafx.h: No such file or directory|" error by commenting out "stdafx.h"
- fix "C:\sciter\sdk\include\tiscript-streams.hpp|78|error: '_wfopen_s' was not declared in this scope|" error by replacing
_wfopen_s(&_file,filename,L"rb"); with _file = fopen(aux::w2a(filename),"rb");

17. Copy "sciter.dll" from "C:\sciter\sdk\bin\64\" to "C:\sciter\test\bin\Debug\" and "C:\sciter\test\bin\Release\". If sciter.dll is not found then program will fail to start and error message will appear:

18. Create file "C:\sciter\test\bin\Debug\resources\index.htm"
<html>
    <head>
        <title>Test</title>
        <style>
		h1 {color:red;}
		p {color:green;}
        </style>
    </head>
    <body>
	<h1>test</h1>
	<p>paragraph</p>
	some text
    </body>
</html>

19. Build and run by pressing "F9". For some changes to take effect need to rebuild using "CTRL+F11"

Adding icon to EXE file.
First, create resource.rc as shown below. Then right-click on project name, select "Add files..." and add resource.rc file to the project.

#include <windows.h> // include for version info constants

//ICON
A ICON MOVEABLE PURE LOADONCALL DISCARDABLE "thunder.ico"

Adding icon to window caption.
Put icon file to "C:\sciter\test\bin\Debug\resources\" directory, add window-icon="thunder.ico" to html tag.

<html window-icon="thunder.ico">

Removing console window.
Console may be usefull for debugging. You may disable it later from "Project -> Properties..." on the "Build Targets" tab by selecting GUI application:

Removing blue border.
Add window-blurbehind="dark" to html tag:

<html window-blurbehind="dark" window-icon="thunder.ico">

Putting HTML resources to single EXE file.
- copy C:\sciter\sdk\bin\packfolder.exe to C:\sciter\test\bin\Debug\
- add packfolder.exe resources resources.cpp -v "resources" to Pre/post build steps tab of Project -> Build Options (make sure to select project name and not only debug or only release):
- move resources folder from C:\sciter\test\bin\Debug\resources to C:\sciter\test\resources
- add #include "resources.cpp"
- edit "uimain" function to use "sciter::archive" and "this://app/index.htm"

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

    sciter::archive::instance().open(aux::elements_of(resources));
    frame *pwin = new frame();
    //pwin->load( GetUrl());
    pwin->load( WSTR("this://app/index.htm") );
    pwin->expand();
    return run();
}

How to compile 32bit application.
- Copy C:\sciter\sdk\bin\32\sciter.dll to Debug/Release directories
- Open "Settings -> Compiler..."
- Uncheck "Target x86_64 (64bit) [-m64]"
- Check "Target x86 (32bit) [-m32]"
- Rebuild CTRL+F11, build and run F9
When compiling for 32-bit and if file ICON is used, error message will appear: "C:/TDM-GCC-64/bin/../lib/gcc/x86_64-w64-mingw32/5.1.0/../../../../x86_64-w64-mingw32/bin/ld.exe: i386:x86-64 architecture of input file `obj\Debug\resource.res' is incompatible with i386 output"
To solve this problem open Settings -> Compiler -> Other Settings tab -> Advanced options... -> Command "Compile Win32 resource file and add -F pe-i386 option:

$rescomp $res_includes $res_options -J rc -O coff -F pe-i386 -i $file -o $resource_output
For 64-bit -F pe-i386 need to be removed.

example1.zip - Source code and compiled example from this tutorial (3.5mb)
Download latest version and more examples from official website: https://sciter.com/