Geekly Articles each Day

Sciter - рдПрдореНрдмреЗрдб рдХрд░рдиреЗ рдпреЛрдЧреНрдп HTML / CSS / рд╕реНрдХреНрд░рд┐рдкреНрдЯрд┐рдВрдЧ рдЗрдВрдЬрди

рдЙрдиреНрд╣реЛрдВрдиреЗ рдпрд╣рд╛рдВ рдПрдХ рд╢рдмреНрдж рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХрд╣рд╛ рдХрд┐ рдореИрдВ Sciter ... рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ, рдпрд╣рд╛рдБ рдореИрдВ рдмрддрд╛ рд░рд╣рд╛ рд╣реВрдБред

рд╕реНрдХрд┐рдЯрд░ рдореЗрдВ рдбреЗрд╕реНрдХрдЯреЙрдк рдФрд░ рдореЛрдмрд╛рдЗрд▓ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЗ рд▓рд┐рдП UI рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдПрдореНрдмреЗрдбреЗрдб HTML / CSS / рд╕реНрдХреНрд░рд┐рдкреНрдЯрд┐рдВрдЧ рдЗрдВрдЬрди рд╣реИ, рдЬреЛ рдХреНрд▓рд╛рд╕рд┐рдХ рдФрд░ [рдХрднреА-рдХрднреА] рдЬреБрдбрд╝рд╛ рд╣реБрдЖ рд╣реИред

рд╕рд┐рджреНрдзрд╛рдВрдд рд░реВрдк рдореЗрдВ, рд╡рд┐рднрд┐рдиреНрди рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдкреНрд░рддрд┐рдорд╛рдиреЛрдВ рдХрд╛ рд╕рдорд░реНрдерди рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдХреЗрд╡рд▓ рдбреЗрд╡рд▓рдкрд░реНрд╕ рдХреА рдХрд▓реНрдкрдирд╛ рджреНрд╡рд╛рд░рд╛ рд╕реАрдорд┐рддред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдПрдХ рдХрдВрдкрдиреА рдиреЗ рд╕реНрдорд╛рд░реНрдЯ рдбреЗрд╕реНрдХрдЯреЙрдк рдлреЛрди рдХреЗ рд╕рд╛рде рдПрдХ рдЯреЗрд▓реАрдлреЛрди рдкреНрд░рдгрд╛рд▓реА рдмрдирд╛рдИ, рдЬрд┐рд╕ рдкрд░ Sciter- рдЖрдзрд╛рд░рд┐рдд рдХреНрд▓рд╛рдЗрдВрдЯ рдиреЗ рдХрд╛рдо рдХрд┐рдпрд╛ - рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдПрдХ рд╡рд┐рд╢реЗрд╖ рдмреНрд░рд╛рдЙрдЬрд░ рдЬреЛ рд╕реНрдЯреЗрд╢рди рдХреЗ рд╕рд┐рд╕реНрдЯрдо рдХрдВрдЯреНрд░реЛрд▓рд░ рд╕реЗ UI (HTML, CSS, рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдФрд░ рдЗрдореЗрдЬ) рд▓реЛрдб рдХрд░рддрд╛ рд╣реИред

рдПрдХ рдЕрдиреНрдп рдЙрджрд╛рд╣рд░рдг: рд╕рд┐рдореЗрдВрдЯреЗрдХ рдЕрдкрдиреЗ рдЙрдкрднреЛрдХреНрддрд╛ рдЙрддреНрдкрд╛рджреЛрдВ рдХреЗ рд▓рд┐рдП рдпреВрдЖрдИ рдХреЗ рд░реВрдк рдореЗрдВ рд╕реНрдХреЗрдЯрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ - рдиреЙрд░реНрдЯрди рдПрдВрдЯреАрд╡рд╛рдпрд░рд╕ рдПрдЯ рдЕрд▓ (2007 рд╕реЗ)ред

рдЫрд╡рд┐
рддрд╕реНрд╡реАрд░ рдореЗрдВ: sciter.exe рдбреЗрдореЛ рдкреНрд░реЛрдЬреЗрдХреНрдЯ SDK + рд╕реЗ DOM рдЗрдВрд╕реНрдкреЗрдХреНрдЯрд░ рд╡рд┐рдВрдбреЛ рдЦреЛрд▓реЗрдВ, рдирд┐рд░реАрдХреНрд╖рдХ 32.dll (SDK рдореЗрдВ рд╕реНрд░реЛрдд) рдореЗрдВ рд░рд╣рддрд╛ рд╣реИред UI рдХреЛ рдбреАрдмрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрдкрдХреЗ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ inspector.dll рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рд╕реНрд╡рд╛рднрд╛рд╡рд┐рдХ рд░реВрдк рд╕реЗ, рдирд┐рд░реАрдХреНрд╖рдХ UI рдлрд┐рд░ рд╕реЗ HTML / CSS / рд╕реНрдХреНрд░рд┐рдкреНрдЯ + рджреЗрд╢реА рдХреЛрдб рдХрд╛ рдПрдХ рдЕрдВрд╢ рд╣реИред


рдПрдореНрдмреЗрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ



рдПрдВрдмреЗрдбреЗрдб рдирд┐рдореНрди рдореВрд▓ рд╕рд┐рджреНрдзрд╛рдВрддреЛрдВ рдХреЛ рд╕рдВрджрд░реНрднрд┐рдд рдХрд░рддрд╛ рд╣реИ:
  1. рдХреЙрдореНрдкреИрдХреНрдЯрдиреЗрд╕, рдЕрдм рдЗрдВрдЬрди (sciter-x.dll) рдХрд╛ рдЖрдХрд╛рд░ 2 - 3mb рд╣реИ
  2. рдирд┐рд░реНрднрд░рддрд╛ рдореБрдХреНрдд, sciter рдПрдХ DLL рд╣реИ - sciter-x.dllред рдПрдХ рдорд╛рдирдХ рд╡рд┐рдВрдбреЛрдЬ рд╕реНрдерд╛рдкрдирд╛ рд╕реЗ рдкрд░реЗ рдХреБрдЫ рднреА рдирд╣реАрдВ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред
  3. рдпреВрдирд┐рд╡рд░реНрд╕рд▓ рдФрд░ рд╕рд░рд▓ рдПрдкреАрдЖрдИред рддрдерд╛рдХрдерд┐рдд рд╕рд╛рджреЗ рд╡рд┐рдВрдбреЛрдЬ рдПрдкреАрдЖрдИред рди рддреЛ COM рдФрд░ рди рд╣реА .NETред рд▓реЗрдХрд┐рди Sciter рдХрд╛ рдЙрдкрдпреЛрдЧ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, .NET рдпрд╛ рдбреЗрд▓реНрдлреА - рдХрд┐рд╕реА рднреА рд╡рд╛рддрд╛рд╡рд░рдг рд╕реЗ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдЬреЛ рдХрд┐ рд╕рд╛рджреЗ API рдХреЛ рд╕рдордЭрддрд╛ рд╣реИред
  4. рдмреБрдирд┐рдпрд╛рджреА рддрдВрддреНрд░ рдХрд╛ рдЦреБрд▓рд╛рдкрди рдФрд░ рд╡реНрдпрд╛рдкрдХрддрд╛ред рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛрдб рдореЗрдВ, рдЖрдк рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдкреНрд░рдХрд╛рд░ рдХреЗ DOM рддрддреНрд╡реЛрдВ рдФрд░ рдЗрдирдкреБрдЯ рддрддреНрд╡реЛрдВ рдХреЛ рд▓рд┐рдЦ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рд╕рд╛рде рд╣реА рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдкреНрд░реЛрдЯреЛрдХреЙрд▓ рдФрд░ рд╕рдВрд╕рд╛рдзрди рд▓реЛрдбрд┐рдВрдЧ рддрдВрддреНрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред DOM рдЯреНрд░реА рдХреЛ рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдФрд░ рджреЗрд╢реА рдХреЛрдб рджреЛрдиреЛрдВ рд╕реЗ рдПрдХреНрд╕реЗрд╕ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред


рдПрдореНрдмреЗрдбрд┐рдВрдЧ рдкреНрд░рдХреНрд░рд┐рдпрд╛ рд╣реА рддреБрдЪреНрдЫ рд╣реИред рдпрд╣ рдпрд╛ рддреЛ рдПрдХ рдХреЙрд▓ рд╣реИ ::CreateWindow(SciterClassName(),...) , рдпрд╛ рд╡рд┐рдВрдбреЛ рдлрд╝рдВрдХреНрд╢рди (WinProc) рдореЗрдВ рдЗрд╕ рдХреЛрдб рдХреЛ рдЬреЛрдбрд╝рдХрд░ рдХрд┐рд╕реА рдореМрдЬреВрджрд╛ рд╡рд┐рдВрдбреЛ рдХреЗ рд▓рд┐рдП рдПрдХ рдорд┐рдХреНрд╕-рдЗрди sciter:

 LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam) { //SCITER integration starts BOOL r, handled = FALSE; // delegating message processing to SciterProcND function: LRESULT lr = SciterProcND(hWnd,message,wParam,lParam, &handled); if( handled ) return lr; //SCITER integration ends switch (message) { case WM_CREATE: //SCITER integration starts { // window was created, attaching callback function that will receive SCN_LOAD_DATA requests, etc. SciterSetCallback(hWnd, BasicCallback, 0 /*cbParam is not ised in this sample*/ ); // loading default document: LPCBYTE pb = 0; UINT cb = 0; GetResource(L"default.html",pb,cb); SciterLoadHtml(hWnd, pb,cb, NULL ); } //SCITER integration ends break; ..... }


рдЬрдм SciterProcND рдлрд╝рдВрдХреНрд╢рди рдХреЛ WM_CREATE рд╕рдВрджреЗрд╢ рдкреНрд░рд╛рдкреНрдд рд╣реЛрддрд╛ рд╣реИ, рддреЛ рдпрд╣ рдЗрд╕ рд╡рд┐рдВрдбреЛ рдХреЗ рд▓рд┐рдП рдПрдХ sciter рдЙрджрд╛рд╣рд░рдг рдмрдирд╛рдПрдЧрд╛ред рдЙрд╕рдХреЗ рдмрд╛рдж, рдЗрд╕ HWND рдХреЛ рдЕрдиреНрдп рд╕реНрдХреЗрдЯрд░ рдХрд╛рд░реНрдпреЛрдВ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕реНрдХреЗрдЯрд░ рдЗрдВрдЬрди рд╣реИрдВрдбрд▓рд░ рдХреЗ рд░реВрдк рдореЗрдВ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, SciterSetCallback (hwnd, callback), рдХреЙрд▓рдмреИрдХ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдкрдВрдЬреАрдХреГрдд рдХрд░реЗрдЧрд╛, рдЬрд┐рд╕рдореЗрдВ HTML, CSS, рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдФрд░ рдЗрдореЗрдЬ рд╕рдВрд╕рд╛рдзрдиреЛрдВ рдХреЛ рд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд╕рднреА рдЕрдиреБрд░реЛрдз рдЖрдПрдВрдЧреЗ, рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдПред рдЗрд╕ рдкреНрд░рдХрд╛рд░, рдЖрдкрдХрд╛ рдЖрд╡реЗрджрди рдпрд╛ рддреЛ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рд╕рдВрд╕рд╛рдзрди рд▓реЛрдбрд░ рдкреНрд░рджрд╛рди рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдпрд╛ Sciter рдФрд░ рдЗрд╕рдХреЗ рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд http рдХреНрд▓рд╛рдЗрдВрдЯ рдХреЗ рд▓рд┐рдП рдЕрдиреБрд░реЛрдз рдЫреЛрдбрд╝ рд╕рдХрддрд╛ рд╣реИред

рдбреЛрдо рд╣реЗрд░рдлреЗрд░


рд╕реНрдХреЗрдЯрд░ рдПрд╕рдбреАрдХреЗ рдХреЗ рд╣рд┐рд╕реНрд╕реЗ рдХреЗ рд░реВрдк рдореЗрдВ, рдПрдХ рд╕реНрдХреЗрдЯрд░-рдПрдХреНрд╕-рдбреЛрдо.рдПрдЪ рдлрд╛рдЗрд▓ рд╣реИ рдЬрд┐рд╕рдореЗрдВ рд▓реЛрдб рдХрд┐рдП рдЧрдП рдбреЙрдХреНрдпреВрдореЗрдВрдЯ рдХреЗ рдбреЛрдо рдПрдХреНрд╕реЗрд╕ рдлрдВрдХреНрд╢рдВрд╕ рдФрд░ рд╕реА ++ рдХреЗ рд▓рд┐рдП рдбреЛрдо :: рдПрд▓рд┐рдореЗрдВрдЯ рдкреНрд░рд┐рдорд┐рдиреЗрдЯ рдШреЛрд╖рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд╛рджрд╛ рдПрдкреАрдЖрдИ рджреЛрдиреЛрдВ рд╢рд╛рдорд┐рд▓ рд╣реИрдВред рдпрд╣рд╛рдВ рдПрдХ рдЙрджрд╛рд╣рд░рдг рд╣реИ рдХрд┐ рдХреМрди рд╕рд╛ рдХреЛрдб рдЗрдирдкреБрдЯ рддрддреНрд╡ рдХрд╛ рдореВрд▓реНрдп рдкрдврд╝рддрд╛ рд╣реИ
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .

:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .

:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  : 
 
 dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value 
 
 Sciter DOM API     jQuery,   "". 
 
        sciter' (  tiscript ): 
 
 var numInput = self.select("input#bottles-of-beer"); var val = numInput.value; 
 
 behaviors -    
 
                . 
 
 Native widget      : 
 
 // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list: 
 
           .  : event _handler   WinProc,   windowless DOM . 
 
  (binding)    DOM      CSS: 
 
 div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ } 
 ..      ...    event handler     my_widget::attached(thatElement); . 
 
  behaviors     .    : 
 
 class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } } 
 
   CSS: 
 
 div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ } 
 
    DOM    behavior  sub-classing, ..   : 
 
 var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get. 
 
 CSS extensions 
 
  Sciter (h-smile core   )  CSS level 2     level 3.    flow  flex-units    CSS   desktop UI-   . 
 
  HTML  CSS  .. endless tape  -           .   CSS level 2    "     ". , , layout  Outlook.  sciter  layout  : 
 <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body> 
   
 body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ } 
  flow  layout manager   Java AWT .  CSS level 3  Flexbox Module      flow,  -    .  Java::BorderLayout     . 
 
   Sciter. 
 
       Sciter: 
 Sciter version 1 - GDI backend,   Windows  Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista  .  . 
     API  . 
   Sciter2: 
   DOM HTML5 compatible. Custom drawing  . Sciter  alike  ( bitmap buffer). Element.graphics()   Sciter1    (  DOM ,     ).  Sciter2  .. direct drawing.     Element.onPaintContent(graphics) , Element.onPaintBackground(graphics)     .   WM_PAINT, WM_ERASEBACKGRND, etc.  Windows. Direct2D      . 
  CSS Sciter2     transform . Direct2D   . 
 
 
  
 Sciter   .      . 
    Sciter  HTMLayout   RSDN        RSDN. 
 Sciter2 SDK     terrainformatica.com/sciter/sciter2-sdk.zip . 
 
       Sciter.    .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .

:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .

:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .
  1. :

    dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

    Sciter DOM API jQuery, "".

    sciter' ( tiscript ):

    var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

    behaviors -

    .

    Native widget :

    // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

    . : event _handler WinProc, windowless DOM .

    (binding) DOM CSS:

    div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
    .. ... event handler my_widget::attached(thatElement); .

    behaviors . :

    class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

    CSS:

    div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

    DOM behavior sub-classing, .. :

    var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

    CSS extensions

    Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

    HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
    <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

    body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
    flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

    Sciter.

    Sciter:
    Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
    API .
    Sciter2:
    DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
    CSS Sciter2 transform . Direct2D .



    Sciter . .
    Sciter HTMLayout RSDN RSDN.
    Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

    Sciter. .
  2. :

    dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

    Sciter DOM API jQuery, "".

    sciter' ( tiscript ):

    var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

    behaviors -

    .

    Native widget :

    // sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

    . : event _handler WinProc, windowless DOM .

    (binding) DOM CSS:

    div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
    .. ... event handler my_widget::attached(thatElement); .

    behaviors . :

    class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

    CSS:

    div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

    DOM behavior sub-classing, .. :

    var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

    CSS extensions

    Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

    HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
    <body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

    body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
    flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

    Sciter.

    Sciter:
    Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
    API .
    Sciter2:
    DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
    CSS Sciter2 transform . Direct2D .



    Sciter . .
    Sciter HTMLayout RSDN RSDN.
    Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

    Sciter. .
:

dom::element root = dom::element::root_element(hwnd); dom::element numInput = root.find_first("input#bottles-of-beer"); json::value val = numInput.get_value(); // get numeric value

Sciter DOM API jQuery, "".

sciter' ( tiscript ):

var numInput = self.select("input#bottles-of-beer"); var val = numInput.value;

behaviors -

.

Native widget :

// sort of WinProc but for windowless DOM element: class my_widget : public sciter::event_handler { // CTOR/DTOR called when this event_handler is attached/detached to/from DOM element virtual void attached (HELEMENT /*he*/ ) { } virtual void detached (HELEMENT /*he*/ ) { } virtual bool handle_mouse (HELEMENT he, MOUSE_PARAMS& params ) { ... } virtual bool handle_key (HELEMENT he, KEY_PARAMS& params ) { ... } virtual bool handle_focus (HELEMENT he, FOCUS_PARAMS& params ) { ... } virtual bool handle_timer (HELEMENT he,TIMER_PARAMS& params ) { ... } virtual void handle_size (HELEMENT he ) { ... } virtual bool handle_scroll (HELEMENT he, SCROLL_PARAMS& params ) { ... } virtual bool handle_gesture (HELEMENT he, GESTURE_PARAMS& params ) { ... } virtual bool handle_draw (HELEMENT he, DRAW_PARAMS& params ) { ... } virtual bool handle_method_call (HELEMENT he, METHOD_PARAMS& params ) { ... } virtual bool handle_event (HELEMENT he, BEHAVIOR_EVENT_PARAMS& params ) { ... } // notification event: data requested by HTMLayoutRequestData just delivered virtual bool handle_data_arrived (HELEMENT he, DATA_ARRIVED_PARAMS& params ) { ... } virtual bool handle_scripting_call(HELEMENT he, SCRIPTING_METHOD_PARAMS& params ) { ... } }; struct my_widget_factory: public sciter::behavior_factory { my_widget_factory(): behavior_factory("my-widget") {} // symbolic name for CSS // create the instance of our widget: virtual event_handler* create(HELEMENT he) { return new my_widget(); } }; // in .cpp file: my_widget_factory _my_widget_factory; // registering the factory in global list:

. : event _handler WinProc, windowless DOM .

(binding) DOM CSS:

div.my-widget { border: 1px solid red; behavior: my-widget; /* the name used in sciter::behavior_factory */ }
.. ... event handler my_widget::attached(thatElement); .

behaviors . :

class MyWidget : Behavior { function attached() { this.state.visited = true; } // as an example function detached() { this.state.visited = false; } function onMouse(evt) { switch(evt.type) { case Event.MOUSE_DOWN: ... case Event.MOUSE_MOVE: ... case Event.MOUSE_UP: ... ... } } property value(v) { get { return this.text; } set { this.text = v; } } }

CSS:

div.my-widget { border: 1px solid red; prototype: MyWidget; /* script class name */ }

DOM behavior sub-classing, .. :

var myWidget = self.select("div.my-widget"); myWidget instanceof MyWidget; // true, that DOM element is a MyWidget now. var val = myWidget.value; // call of MyWidget.value/get.

CSS extensions

Sciter (h-smile core ) CSS level 2 level 3. flow flex-units CSS desktop UI- .

HTML CSS .. endless tape - . CSS level 2 " ". , , layout Outlook. sciter layout :
<body> <div id="mailboxes">...</div> <div id="messages">...</div> <div id="current-message">...</div> </body>

body { flow: horizontal; /* content replaced horizontally */ width: *; height: *; /* body spans whole window */ } body > div { height: *; /* all children of the body have the same height and take whole height of the body */ }
flow layout manager Java AWT . CSS level 3 Flexbox Module flow, - . Java::BorderLayout .

Sciter.

Sciter:
Sciter version 1 - GDI backend, Windows Windows CE. Active maintenance mode. Sciter version 2 - Direct2D backend, Windows Vista . .
API .
Sciter2:
DOM HTML5 compatible. Custom drawing . Sciter alike ( bitmap buffer). Element.graphics() Sciter1 ( DOM , ). Sciter2 .. direct drawing. Element.onPaintContent(graphics) , Element.onPaintBackground(graphics) . WM_PAINT, WM_ERASEBACKGRND, etc. Windows. Direct2D .
CSS Sciter2 transform . Direct2D .



Sciter . .
Sciter HTMLayout RSDN RSDN.
Sciter2 SDK terrainformatica.com/sciter/sciter2-sdk.zip .

Sciter. .

Source: https://habr.com/ru/post/In154697/

More articles:


All Articles