Using Sciter in Code::Blocks

Back to main page

Introduction
    Recently I moved from Turbo Delphi to Qt Creator. All I wanted is ability to write C-styled code and convenient GUI form designer. I tried wxWidgets and FLTK some time ago, but was not very satisfied with their form designer tools, and other non-user friendly stuff. I remember wxWidgets form editor was very slow compared to Delphi. Maybe MSVC is a good choice, but i do not want to install it. Also tried imgui, Awesomium and libRocket. It seems that Imgui can not satisfy my demands. Awesomium requires MSVC. Qt Creator is great tool, but all that hassle with static build to make smaller EXE files is pretty annoying thing. Ideally, development tools must be user-friendly, at least they must work after installing. Delphi is a good example of user-friendly development environment. Qt partially provides such experience. I tried to build several GUI projects under Code::Blocks with gcc, and it is surely not user-friendly process.
    Today I learned about Sciter, and it very promising alternative to QT and others for my projects.  If you familiar with HTML editing it would be very easy to create beautiful GUI with it.

Using Sciter in Code::Blocks
    In this small tutorial I provide easy steps to set up Code::Blocks with MinGW-w64 compiler and start creating C++ applications using Sciter GUI. MinGW-w64 compiler is able to create both 32 and 64 bit binaries. I tried also 32-bit edition of MinGW, but had no luck of compiling Sciter with it.

1) Go to http://tdm-gcc.tdragon.net/download and download and install TDM-GCC. Or download tdm64-gcc-5.1.0-2.exe , run this setup executable, click "Create". Because of firewall settings, I unchecked "Check for updated files" to make it install:

tdm-gcc-setup.png

2) Go to http://www.codeblocks.org/downloads, download and install Code::Blocks binary release. For this tutorial you can download codeblocks-16.01-setup.exe, install it, run installed software. In settings -> compiler -> Toolchain executables click "Auto-detect" button. While making this tutorial I found out that after reinstalling Code::Blocks it did not perform auto detection at startup, also path to compiler executables must be corrected manually:

codeblocks-toolchain.png

3) Create new project:
File -> New -> Project -> Console Application
Try to build and run empty console window project by pressing F9 key.

4) Download Sciter SDK from this page: http://sciter.com/download/
Currently file is sciter-sdk-3.zip
Unzip file in some directory, for example c:\sciter\

5) Add sciter include directory in search path of empty GUI project:
Project -> Build options -> Search directories -> Add
Make sure you added search path for the whole project, not just Debug or Release configuration.

codeblocks-search-directories.png

6) Change compiler settings as shown on this image (std=c++14, Target 64bit):

compiler-options.png

7) Replace hello word application source code with this stripped-down example from Sciter library:
#define UNICODE
#define _UNICODE
#include "sciter-x.h"
#include <windows.h>

HINSTANCE ghInstance = 0;

UINT SC_CALLBACK SciterCallback( LPSCITER_CALLBACK_NOTIFICATION pns, LPVOID callbackParam )
{
// here are all notifiactions
switch(pns->code)
{
// case SC_LOAD_DATA: return DoLoadData((LPSCN_LOAD_DATA) pns);
// case SC_ATTACH_BEHAVIOR: return DoAttachBehavior((LPSCN_ATTACH_BEHAVIOR)pns );
}
return 0;
}


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"minimal.htm");
return url;
}

int WINAPI WinMain (HINSTANCE hInstance,
HINSTANCE hPrevInstance,
LPSTR lpszArgument,
int nCmdShow)
{
ghInstance = hInstance;

HWND hwnd = ::CreateWindowEx(
0,
::SciterClassName(),
L"Minimal Sciter Application",
WS_OVERLAPPEDWINDOW,
GetSystemMetrics(SM_CXSCREEN)/2-400,
GetSystemMetrics(SM_CYSCREEN)/2-300,
800, 600,
0,0,0,0);

::SciterSetCallback(hwnd,&SciterCallback,NULL);
::SciterLoadFile(hwnd, GetUrl());
::ShowWindow(hwnd, SW_SHOWNORMAL);

MSG msg;
while( ::IsWindow(hwnd) && GetMessage(&msg, 0, 0, 0) )
{
TranslateMessage(&msg);
DispatchMessage(&msg);
}
return 0;
}


8) Put some html file in minimal.html, compile example by pressing F9. An error message will appear in tiscript-streams.hpp: error: '_wfopen_s' was not declared in this scope. Correct tiscript-streams.hpp as shown below:
#ifdef WINDOWS
// _wfopen_s(&_file,filename,L"rb");
_file = fopen(aux::w2a(filename),"rb");
#else
_file = fopen(aux::w2a(filename),"rb");
#endif
_name = filename;
Finally application is able to compile and runs:

sciter-test.png
One problem solved. Now you can go through official examples of Sciter library and learn how to do things. None of examples compiled by default! Even *.cbp projects. I did not used exotic operating system or compiler. Just downloaded compiler, IDE and sciter library. At least Sciter compiled without too much efforts. For those of you who struggle with compiling at least one example, I prepared a test project here: sciter-test.zip (5mb)
Not much right now, but more info is coming as I learn this stuff!

P.S. About FLTK
    Here is some hints to build and use FLTK GUI library. To build FLTK you should download and install: TDM-GCC, Code::Blocks and cmake. I tried only 32bit versions. Next steps are
1) open cmake GUI to generate FLTK.cbp file
2) open FLTK.cbp file in Code::Blocks and build it
3) all samples, "fluid" editor and *.a library files will be built
4) alter Code::Blocks wizard for FLTK:
- find file \CodeBlocks\share\CodeBlocks\templates\wizard\fltk\wizard.script
- replace FltkPathDefaultInc <- _T("$(#fl.include)");
with FltkPathDefaultInc <- _T("$(#fl)");
- comment out OnLeave_FltkPath(fwd)
5) in project build options add path to FLTK *.h and *.lib files in "Search Directories"

For any questions and/or comments, please email me at georgy.moshkin@gmail.com

www.000webhost.com