### Sciter Plus Framework Basic Setup and Data Binding

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+plus/demos/0-basic-variable-binding.htm

This snippet illustrates the fundamental setup for the Sciter Plus framework. It includes necessary CSS imports, defines a data model with an observable variable, and shows how to bind UI elements to this variable for real-time updates.

```css
@import url(../plus.css);
/* the only thing needed to include Plus framework */
@import url(../../note.css);
output {
  display: inline-block;
  border: 1px gray dotted;
}
```

```script
namespace Data // our model
{
  var greeting = "?"; // observable variable
}

// Input and output elements below are bound with single `Data.greeting` variable.
// Changes in input are reflected in output, type something:

// Whom to greet:

// Greeting: Hello !
```

--------------------------------

### Sciter Initialization and Setup

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/graphs/ease-functions.htm

This function is called when the Sciter element is ready. It initializes the easing function, sets the default easing function to 'bounceOut', and starts the ball animation on the canvas.

```tiscript
function self.ready() {
  functionChart( canvas, easef = Ease.bounceOut );
  ball(canvas);
}
```

--------------------------------

### Sciter TIScript: Display Window and Handle Click Events

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/samples/sample-tool-window.htm

This TIScript code demonstrates how to initialize a Sciter window to a shown state and handle click events on an element with the ID 'test'. It uses `self.ready` for post-construction setup and `stdout.println` for output.

```TIScript
include "../../decorators.tis";

function self.ready() {
  // we do post here as window is still in construction phase. Just to avoid needless draws
  this.post ( ::view.state = View.WINDOW_SHOWN );
}

@click @on "#test" :: stdout.println("test clicked");
```

--------------------------------

### Sciter Window Setup and Event Handling (Behavior Script)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/samples/sample-frame-window.htm

This script initializes the Sciter window, sets its dimensions and background, and handles events for controlling window resizability, minimizability, and maximizability. It uses Sciter's built-in functions for view manipulation and event binding.

```javascript
button { display:block; }
html { width:640dip; height:480dip; background:transparent; }

function self.ready() {
  var (x,y) = view.box(#position,#border,#screen);
  var w = self.toPixels(self.style#width);
  var h = self.toPixels(self.style#height);
  view.move(x,y,w,h);
  view.state = View.WINDOW_SHOWN;
  
  $(#resizable).value = view.windowResizable;
  $(#minimizable).value = view.windowMinimizable;
  $(#maximizable).value = view.windowMaximizable;
}

event click $(#resizable) { view.windowResizable = this.value }
event click $(#minimizable) { view.windowMinimizable = this.value }
event click $(#maximizable) { view.windowMaximizable = this.value }
```

--------------------------------

### Virtual List Initialization and Event Handling (TIScript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+vlist/demos/test-highlight.htm

Initializes a VirtualList component with a large dataset and defines functions to handle item view setup and button click events for highlighting/removing highlights. It uses TIScript for scripting.

```tiscript
include "../vlist.tis";

function self.ready() {
  var records = new Array(10000);
  for( var n in records.length ) records[n] = { index: n, caption:"Item" };

  function setupRecordView(recordNo,record,viewEl) {
    viewEl.attributes.toggleClass( "highlighted", record.highlighted || false );
  }

  var vlist = VirtualList {
    container : $(vlist),
    setupItemView : setupRecordView
  };

  // feed it by these records
  vlist.value = records;

  $(#removeHighlighted) << event click() {
    for(var record in records) record.highlighted = false;
  }

  $(#updateHighlighted) << event click() {
    for(var (n,record) in records) record.highlighted = (n & 1) != 0; // highlight odd items
  }
}
```

--------------------------------

### Start Timer on Button Click in Sciter

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/test-view-activate.htm

This code snippet shows how to initiate a timer when a button with the ID 'start' is clicked. After a 5-second delay, it calls the 'activate' method on the view to bring it to the front.

```sciter
event click $(button#start) { this.timer(5s, function() { view.activate(#toFront); }); }
```

--------------------------------

### JavaScript Initialization in Sciter

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/frames/multi-view/view-2.htm

This JavaScript function, 'setup', is designed to run within the Sciter environment. It targets an HTML element with the ID 'status' (a span) and updates its text content to 'initialized'. This assumes the presence of a span element with id='status' in the HTML.

```javascript
function setup() {
  $(span#status).text = "initialized";
}
```

--------------------------------

### Basic Image Insertion Example (Sciter SDK)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/effects.css++/docs/html32.htm

A simple example demonstrating how to use the IMG element to insert an image with its source and alternative text attributes. This is a fundamental usage for displaying images.

```html
<IMG SRC="canyon.gif" ALT="Grand Canyon">
```

--------------------------------

### Scan Files with Extension (Sciter Script)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/tests/test-system-scanfiles.htm

This example demonstrates using System.scanFiles with a pattern that includes a file extension (e.g., "*.*") to scan files with any extension in the current directory. Similar to the previous example, it suggests a default callback.

```Sciter Script
scanFiles("*.*")
```

--------------------------------

### Sciter CSS: Loading Indicator Example

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/frames/test1.htm

Demonstrates a basic CSS rule for a loading state, potentially linked to a URL. This example shows how to apply styles when content is being loaded. The specific URL provided is for a test document on the Terrainformatica website.

```css
loading http://terrainformatica.com/tests/ds/doc.htm
```

--------------------------------

### CSS width() and height() Pseudo-functions Example

Source: https://github.com/c-smile/sciter-sdk/blob/master/logfile-1.htm

Demonstrates the usage of CSS `width()` and `height()` pseudo-functions. The example shows how `line-height` can be set relative to the element's `height()`, providing dynamic layout capabilities within CSS.

```css
/* Example usage of CSS width() and height() pseudo-functions */
/* This CSS rule applies to input elements of type text */
input[type="text"] {
  height: 1.4em;
  /* Sets the line-height to be 100% of the element's calculated height */
  line-height: height(100%); 
}
```

--------------------------------

### Sciter JsonRPC Client Example

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/communication/json-rpc/php/readme.htm

This example shows how to instantiate and use the JsonRPC class in Sciter to call remote web methods. It requires the 'jsonrpc.tis' file to be loaded and specifies the URL of the web service and an indicator element.

```tiscript
load("jsonrpc.tis");

var rpc = new JsonRPC( "http://www.terrainformatica.com/tests/calc-web-service.php", indicator );

// Call the 'add' method
var v_add = rpc.send("add", p0, p1);

// Call the 'sub' method
var v_sub = rpc.send("sub", p0, p1);
```

--------------------------------

### Example of Opacity Filter Value

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/css3-filter/filter-opacity.htm

Provides a standalone example of the opacity filter value used in Sciter CSS.

```css
opacity(50%)
```

--------------------------------

### Sciter HTML and Behavior for Request Example

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/communication/http-headers.htm

This HTML snippet defines the user interface for the Sciter SDK example, including a sandbox element to display content, buttons to trigger actions, and CSS for styling. It also includes inline JavaScript for handling events and making requests.

```html
<style>
  html { background-color: threedface; }
  #sandbox { margin:20px; padding:20px; overflow:auto; background-color:window; border:1px solid threedface; width:*; height:*; }
  #sandbox:busy /* that small spinning thing... */ { visibility:visible; foreground-image:url(res:busy.png); foreground-repeat:no-repeat; foreground-position:2px 2px; }
  code { background:white; } /* comment to fix line at exception */
</style>

<div id="sandbox">ready!</div>
<div id="indicator"></div>

<button id="clear">clear</button>
<button id="get">get</button>

<script>
  var sandbox = $(#sandbox), indicator = $(#indicator);
  sandbox.value = "ready!"; // show delivered data

  function show(data,status = 200) {
    try {
      indicator.value = String.$(Status: {status}, data: {typeof(data)});
      sandbox.html = data.toString();
    } catch (e) {
      sandbox.value = e.toString();
    }
  }

  $(#clear) << event click() {
    sandbox.value = indicator.value = "";
  }

  $(#get) << event click() {
    var params = { q:1 }; // passing custom parameters
    var headers = { "user-token": "for the demo purposes!" }; // passing custom headers
    var re = sandbox.request(show, #get, "http://www.terrainformatica.com/tools/http-headers.php", params,headers);
  }
</script>

<!--
sandbox

Talking...
-->
```

--------------------------------

### Example HTML Table Implementation

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/effects.css++/docs/html32.htm

Provides a practical example of an HTML table structure, demonstrating the use of TABLE, CAPTION, TR, and TD elements with common attributes like BORDER, CELLSPACING, CELLPADDING, and WIDTH.

```html
<TABLE BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH="80%">
  <CAPTION> _... table caption ..._ </CAPTION>
  <TR><TD> _first cell_ <TD> _second cell_
  <TR> ...
  ...
</TABLE>
```

--------------------------------

### CSS Flexible Margin Example

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/css++/flow-vertical.htm

Demonstrates the use of flexible margins, where '*' can represent an adjustable space. This example shows flexible top margin.

```css
64dip
64dip
64dip/margin-top:*
```

--------------------------------

### Fix AV when app starts not from main screen (OSX)

Source: https://github.com/c-smile/sciter-sdk/blob/master/logfile-1.htm

Resolves an Access Violation (AV) error that occurred on OSX when the application started on a screen other than the primary display. This ensures smoother application startup across different multi-monitor setups.

```objective-c
// OSX multi-monitor startup fix
```

--------------------------------

### Sciter Plus Framework Setup and Routing

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+plus/demos/Q-routing-with-data.htm

This snippet configures the Plus framework by importing its CSS and defining application routes. It sets up a basic routing structure for the application, mapping paths to specific HTML views. The `self.ready` function is crucial for initializing the application's routes.

```css
@import url(../plus-routes.css); /* the only thing needed to include Plus framework */
@import url(../../note.css);
toolbar > button {
  behavior:radio;
  height:*; 
  width:100dip;
  height:48dip;
  text-align:center;
  vertical-align:middle;
}
toolbar > caption {
  width:*; 
  text-align:center;
  vertical-align:middle;
}
```

```javascript
function self.ready() {
  Plus.app.routes = [
    { path:"/first", url:"routes/bound-first.htm" },
    { path:"/second", url:"routes/bound-second.htm" },
  ];
}

self << event routechange (evt) {
  var button = $(toolbar>button[href="{Plus.app.path}"]);
  button.value = true;
}
```

--------------------------------

### Get Dropdown Form Values

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/forms/select-dropdown-variants.htm

Retrieves the current values from a select dropdown form. It uses the `$(form).value` expression to get the form's data and `String.printf` to format the output. This is useful for capturing user selections.

```sciter
event click $(button#get) {
  var v = $(form).value;
  $(#out).value = String.printf("%V",v);
}
```

--------------------------------

### Sciter Script: Setting and Getting Textarea Value

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/test-child-window.htm

Handles click events on 'Set value' and 'Get value' buttons to interact with the native textarea. The 'Set value' event updates the textarea's content, while the 'Get value' event retrieves and displays the current content. This demonstrates basic scripting interaction with the textarea.

```javascript
event click $(#set) {
  $("#editor").value = "Hello\r\nworld!";
}

event click $(#get) {
  $("#out").value = $("#editor").value;
}
```

--------------------------------

### Sciter Plus Framework and Data Model Setup

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+plus/demos/3-repeatable-undefined-binding.htm

This snippet demonstrates how to include the Plus framework using @import and define a simple data namespace with an array. It's the foundational setup for Sciter applications using the Plus framework.

```css
@import url(../plus.css); /* the only thing needed to include Plus framework */
@import url(../../note.css);

namespace Data // our model {
  var items = [];
}
```

--------------------------------

### Plaintext Behavior Script API: Getting Selection Range

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/content/behaviors/plaintext.htm

Illustrates how to retrieve the start and end positions of the current text selection within the plaintext editor. The result is an array containing the line number and position within that line for both start and end.

```javascript
var selectionStart = editor.plaintext.selectionStart;
var selectionEnd = editor.plaintext.selectionEnd;
```

--------------------------------

### Create and Play Audio

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/content/sciter/Audio.htm

Demonstrates how to create an Audio object from a URL and start playback using the .play() method. The returned Audio object allows for method chaining.

```javascript
var audio = view.audio("path/to/your/audio.mp3");
audio.play();
```

--------------------------------

### Sciter Script: Paint Final Arc Path in Div

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/graphics/test-graphics-path-ops.htm

Presents the final example of painting an arc path, starting from the bottom-left and curving towards the top-right. It sets line styles and draws the path, completing the set of arc drawing demonstrations.

```javascript
$(div#arcTo4).paintContent = function( gfx ) {
  var (w,h) = this.box(#dimension);
  var path = new Graphics.Path();
  path.moveTo(0,200)
  .arcTo(200,200,200,0,100);
  gfx.lineWidth(4)
  .lineColor(color(0xFF,0,0))
  .drawPath( path);
};
```

--------------------------------

### Sciter Event Handling and Timer (JavaScript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/samples/sample-window-custom.htm

Implements the dynamic behavior of the 'Hello World' application using Sciter's JavaScript API. It includes functions to update a counter, handle window state changes, and set up a timer to periodically call the update function.

```javascript
var x = 0;
function change() {
  x = x + 1;
  $(p).value = x;
  return true;
}
function self.ready() {
  view.state = View.WINDOW_SHOWN;
  view << event statechange {
    $(button#maximize).attributes.toggleClass("restore", view.windowState == View.WINDOW_MAXIMIZED);
  }
  self.timer(1s, change);
}
```

--------------------------------

### Sciter HTML Structure and Styling

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/samples/sample-layered-tool.htm

Defines the visual layout and appearance of the 'Hello World' window using Sciter's HTML and CSS-like syntax. It sets background colors, dimensions, borders, and alignment for elements.

```html
html { background-color:transparent; size:400dip; }
body { background:gold; border:2px solid brown; margin:30dip; border-radius: 50%; vertical-align:middle; horizontal-align:center; overflow:hidden; }
body:hover { background-color: yellow; }
body > p, body > button { display:block; width:max-content; }
```

--------------------------------

### Sciter Script: Paint Different Arc Path in Div

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/graphics/test-graphics-path-ops.htm

Illustrates painting a different arc path within a div element. This example draws an arc starting from the bottom-right corner and curving towards the top-left. It customizes line style and color.

```javascript
$(div#arcTo2).paintContent = function( gfx ) {
  var (w,h) = this.box(#dimension);
  var path = new Graphics.Path();
  path.moveTo(200,200)
  .arcTo(200,0,0,0,100);
  gfx.lineWidth(4)
  .lineColor(color(0xFF,0,0))
  .drawPath( path);
};
```

--------------------------------

### Sciter JavaScript Event Handling

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/samples/sample-popup.htm

Implements JavaScript code for the Sciter application, specifically handling the 'ready' event to show the window. This demonstrates basic event-driven programming in Sciter.

```javascript
function self.ready() { self.post(::view.state = View.WINDOW_SHOWN); }
```

--------------------------------

### Sciter CSS Grid Layout Definition

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/flow-flex/flow-grid-holy-grail.htm

Defines a grid container with specific row and column sizing and spacing. It also styles individual grid items for text alignment and font size. This example showcases basic grid setup and item styling.

```css
section {
  size:*; 
  flow:grid(1 1 1, 2 5 3, 4 4 4);
  border-spacing:8dip; /* defines spacing between cells */
}

section > * {
  text-align:center;
  vertical-align:middle;
  font-size:40dip;
}

section > header {
  background:red;
}

section > nav {
  background:orange;
  width:1.4em;
}

section > aside {
  background:gold;
  width:1.4em;
}

section > main {
  background:yellow;
  size:*; /* takes all available space */
}

section > footer {
  background:green;
}
```

--------------------------------

### Asynchronous Directory Creation (mkdir)

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/content/script/System.htm

Explains how to asynchronously create a directory. It returns a promise that resolves to true on success or an error code on failure.

```javascript
// Asynchronously creates a directory (folder).
// Returns: promise (true | error code on failure)
// sync.mkdir(path: string)
```

--------------------------------

### Stringizer Function Example in TIScript

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/content/script/language/Functions.htm

Illustrates TIScript's stringizer functions, which start with a '$' sign. When called, the content within the parentheses is treated as a literal string.

```TIScript
var bodyDiv = self.$( div#body );
// Equivalent to:
var bodyDiv = self.$( "div#body" );
```

--------------------------------

### Initialize and Open Storage (Sciter TIScript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/storage/3-full-text-search.htm

Initializes the storage database if it doesn't exist and opens it for use. It then sets up event handlers for searching and displaying records.

```Sciter TIScript
include "init-storage-2.tis";
var storage;

function self.ready() {
    const url = self.url("storage2.sdb");
    storage = Storage.open(url);
    var root = storage.root || initStorage(storage);
    var search = $("#lookup");
    var ol = $("ol");

    function showRecords(range, text) {
        ol.clear();
        var list = [];
        for( var item in range ) // intermediate list - prevention of duplicates
            if(list.indexOf(item) < 0) list.push(item);
        for( var item in list )
            ol.$append(<li>{item.t}</li>);
    }

    search.on("change", function() {
        var text = this.value.toLowerCase();
        if( text )
            showRecords(root.itemsByWords.select(text,text + "\\xffff"), text);
        else
            showRecords(root.itemsByNumber, text);
    });

    search.sendEvent("change");
}

function self.closing() {
    storage.close();
    stdout.println("closed");
}
```

--------------------------------

### Get Element at Index with 'eq' Method

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+query/q-doc.htm

The 'eq' method retrieves a specific element from a collection based on its index. It supports positive indices for elements from the start and negative indices for elements from the end of the collection.

```javascript
q("li").eq(0);  // gets first item
q("li").eq(-1); // gets last item
```

--------------------------------

### Form Data Handling with Formation (TIScript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+formation/demos/form2.htm

This TIScript code demonstrates how to initialize a Formation object, set its value with credentials, retrieve the value, and display it as a JSON string. It also shows how to generate and display the HTML structure of the form.

```tiscript
include "../formation.tis";

var frm = formation( $(form) );

event click $(button#set) {
  frm.value = { credentials: { un: "Olga", pwd: "blondy" }, persistLogin: false };
}

event click $(button#show) {
  var val = frm.value;
  $(pre#out).value = JSON.stringify(val," ");
}

event click $(button#structure) {
  $(div#structure).html = frm.toHtmlString();
}
```

--------------------------------

### Sciter Script: Computable Properties with Get/Set Blocks

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/content/script/language/Classes.htm

Defines a class with computable properties using the 'property' keyword, including 'get' and 'set' blocks for custom logic. This example shows both single-expression and multi-statement blocks.

```sciterscript
class Baz {
  function this() { this._first = 1; this._second = 2; }

  property first( val ) {
    get return this._first; // single expression get block
    set this._first = val;  // single expression set block
  }

  property second( val ) {
    stdout << "second";
    get {
      return this._second + 2;
    }
    set {
      this._second = val - 2;
    }
  }
}
```

--------------------------------

### TIS Focus Animator Initialization

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/animated-effects/focus-animation.htm

Shows how to include and initialize the 'focus-animator.tis' script, which likely provides visual feedback for element focus.

```tis
include "focus-animator.tis";
FocusAnimator();
```

--------------------------------

### Define and Render React-like Welcome Component in Sciter

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+reactor/doc-samples/components/2-composing.htm

This snippet defines a functional component 'Welcome' that accepts props and renders a greeting. The 'App' component composes multiple 'Welcome' components. Finally, the 'App' component is rendered into the 'main' DOM element using Sciter's DOM manipulation.

```javascript
Test function Welcome(props) { return <h1>Hello, {props.name}!</h1>; }
function App() { return <main> <Welcome name="Ivan" /> <Welcome name="Olga" /> <Welcome name="Andrew" /> </main>; }
$(main).merge( <App /> );
```

--------------------------------

### Control Animation Start with JavaScript Timer

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/animations-transitions-css/infinite-stoppable-twinkle.htm

This JavaScript code snippet uses the `self.ready` function to initiate the twinkling animation after a short delay. It targets an element with the ID '#heart' and adds the 'animate' class to it, triggering the CSS animation.

```javascript
function self.ready() {
  self.timer(20ms, ::$(#heart).attributes.addClass("animate"));
}
```

--------------------------------

### Sciter HTML Structure and Styling

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/samples/sample-popup.htm

Defines the basic HTML structure and CSS styling for the Sciter application. It sets background colors, layout properties, and element behaviors.

```html
html { background: orange; overflow:none;} html > header { width:*; line-height:1.6em; flow:horizontal; margin:3dip 3dip 0 3dip; } html > header > caption { width:*; height:*; } html > header > button { behavior:clickable; /*non-focusable button*/ } body { margin:0 3dip 3dip 3dip; background:gold; overflow:none; }
```

--------------------------------

### Basic CSS Styling for Div and Text Elements

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/css3-filter/filter-drop-shadow.htm

Applies basic styling to 'div' and 'text' elements. 'div' gets a border and adjustable width, while 'text' within a div is styled with red color, automatic margins, and adjustable width.

```css
div { border:1px solid black; width:max-content; margin:1em; }
 div > text { color:red; margin-top:*; text-align:center; width:*;
}
```

--------------------------------

### Create Sciter Window with C++ API

Source: https://context7.com/c-smile/sciter-sdk/llms.txt

Demonstrates creating a cross-platform Sciter window using the `sciter::window` class. It shows how to initialize the window with specific styles and expose native C++ methods to the TIScript environment.

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

class MyApp : public sciter::window {
public:
  MyApp() : window(SW_TITLEBAR | SW_RESIZEABLE | SW_CONTROLS | SW_MAIN | SW_ENABLE_DEBUG) {}

  // Expose native method to script: view.frame.getMessage()
  sciter::string getMessage() { return WSTR("Hello from C++!"); }

  SOM_PASSPORT_BEGIN(MyApp)
    SOM_FUNCS(SOM_FUNC(getMessage))
  SOM_PASSPORT_END
};

int uimain(std::function<int()> run) {
  sciter::om::hasset<MyApp> pwin = new MyApp();
  pwin->load(WSTR("file://path/to/index.html"));
  pwin->expand();
  return run();
}
```

--------------------------------

### Get Sciter Engine Version

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/content/api/window.htm

Retrieves the major or minor version of the Sciter engine. The high and low words of the returned UINT contain the version and subversion numbers, respectively. For example, 0x0301 represents Sciter version 3.1.0.4.

```c++
UINT SciterVersion(BOOL major);
```

--------------------------------

### Sciter JavaScript for Scitris Game Logic and Events

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/games/tetris/scitris.htm

Handles the game's initialization, user input, and score updates using Sciter's JavaScript API. It starts the game, manages focus, and listens for keydown and score-change events.

```javascript
function self.ready() {
  Scitris.start();
  self.state.focus = true;
}

event ~keydown (evt) {
  return Scitris.handleKeydown(evt);
}

event score-change (evt) {
  $(output#score).value = evt.data;
}
```

--------------------------------

### Define and Render a Sciter Component with JavaScript

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+reactor/doc-samples/components/1-welcome.htm

This snippet defines a functional component 'Welcome' that accepts a 'name' prop and renders an H1 tag. It then creates an instance of this component and injects it into the 'body' element of the Sciter DOM.

```javascript
function Welcome(props) { return <h1>Hello, {props.name}!</h1>; }
const velement = <Welcome name="Ivan" />;
$(body).content(velement);
```

--------------------------------

### Sciter TIScript for Drag and Drop Event Handling

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/drag-n-drop-manager/page-layout.htm

This TIScript code implements the logic for drag and drop operations within the Sciter application. It defines functions to handle the start of a drag, what happens when an item is dropped, and configures the DragDrop behavior.

```tiscript
//test compatibility
include "../+promise/promise.tis";
include "ddm.tis";
//include "animations.tis";

function self.ready() {
  function startDrag( el ) {
    if( el.$is(ul#tools > li) ) return #copying;
    self.$(div#blackhole).state.expanded = true;
    return #moving;
  }

  function whenDropped( what, from ) {
    var where = what.parent;
    var blackhole = null;
    if( where.$is(div#blackhole) ) {
      what.remove();
      // undo/redo anyone?
      blackhole = where;
    }
    (blackhole || self.$(div#blackhole)).state.collapsed = true;
  }

  DragDrop {
    what : "ul#tools > li, ul.zone > li",
    where : "ul#tools, ul.zone, div#blackhole",
    notBefore : "ul.zone > caption",
    acceptDrag: startDrag,
    dropped : whenDropped
    //easeDrop : Animation.Ease.OutQuad - uses default
  };
}
```

--------------------------------

### Sciter Storage Initialization and Data Display (Tiscript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/storage/2-index-range.htm

Initializes Sciter's Storage API, opens a database file, and displays records based on sorting criteria. It handles user input for sorting and cleans up resources on closing. Dependencies include 'init-storage-1.tis'.

```tiscript
include "init-storage-1.tis";
var storage;

function self.ready() {
    const url = self.url("storage1.sdb");
    storage = Storage.open(url);
    var root = storage.root || initStorage(storage);
    var form = $(form);
    var ol = $(ol);

    function showRecords(range) {
        ol.clear();
        stdout.println(range.length);
        for( var item in range ) ol.$append(<li>{item.t}</li>);
    }

    form.on("change", function() {
        var asc = this.value.order == "ascending";
        stdout.printf("%V\n",this.value);
        switch( this.value.index ) {
            case "by-index" :
                showRecords( root.itemsByNumber.select(0,999999,asc) );
                break;
            case "by-text" :
                showRecords( root.itemsByText.select("","z",asc) );
                break;
        }
    });

    self.on("closing", function() {
        storage.close();
        root = null;
        storage = null;
        gc();
    });

    form.sendEvent("change");
}

function self.closing() {
    storage.close();
}
```

--------------------------------

### Clock Initialization and Event Handling (Tiscript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/demos/ulayered/res/default.htm

Handles the DOM ready event, sets the window caption, positions the window on the screen, and initiates an animation to show the clock. It also updates platform and architecture information and defines event handlers for closing and minimizing the window.

```tiscript
const body = $(body);
self.ready = function() // html loaded - DOM ready
{
    view.caption = "Sciter Clock";
    // positioning the window in the middle of the screen:
    var (sx,sy,sw,sh) = view.screenBox(#workarea,#rectw); // gettting screen/monitor size
    var (w,h) = self.$(body).box(#dimension);
    w += w/2;
    h += h/2; // to accomodate expanding animation
    view.move( sx + (sw - w) / 2, sy + (sh - h) / 2, w, h);
    body.timer(40ms, function() { body.attributes.addClass("shown") });
    $(span#platform).text = System.PLATFORM;
    $(span#arch).text = view.architecture(); // calling native function defined in ulayered.cpp
}
// <button #close> click handler
event click $(#close)
{
    body.timer(600ms, () => view.close() );
    body.attributes.removeClass("shown");
}
// <button #minimize> click handler
event click $(#minimize)
{
    view.state = View.WINDOW_MINIMIZED;
}
```

--------------------------------

### CSS Fixed Position Linear Gradients

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/basics/test-linear-gradient.htm

Demonstrates linear gradients with fixed positioning, specified by pixel values. This allows for precise control over the gradient's starting and ending points, independent of the element's size. Hover effects are included.

```css
@const START: rgb(255,0,0);
@const END: rgba(0,0,255,0.5);

div.gradient-fixed {
  background: linear-gradient(100% 100%, 80px 80px, @START, @END);
  transition: background 0.5s;
}

div.gradient-fixed:hover {
  transform:none;
  background: linear-gradient(0% 0%, 80px 80px, @START, @END);
}

div.gradient-fixed-2 {
  background: linear-gradient(100% 100%, -80px -80px, red, yellow, green, blue, magenta);
}
```

--------------------------------

### Get Switch Value with Sciter JavaScript

Source: https://github.com/c-smile/sciter-sdk/blob/master/widgets/switch/switch.htm

This snippet shows how to retrieve the current value of a switch component and display it. It uses Sciter's $(selector).onClick event handler and String.printf for formatting the output. The output is displayed in an element with the ID 'out'.

```javascript
$(button#get).onClick = function() { $(#out).text = String.printf("switch value:%V", $(switch).value); }
```

--------------------------------

### CSS Imports for Plus Framework and Widgets

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+plus/demos/5-repeatable-filtering.htm

This CSS snippet demonstrates how to import necessary stylesheets for the Plus framework and specific widgets like the switch. It sets up basic HTML styling and layout for ordered lists and list items, preparing the structure for dynamic content.

```css
@import url(../plus.css); /* the only thing needed to include Plus framework */
@import url(../../note.css);
@import url(../../../widgets/switch/switch.css);

html { font:system; }

ol { width:*; }

ol > li { flow:horizontal; border-bottom:1px solid dotted;}

ol > li > input { display: block; vertical-align:middle;}

ol > li > output { display: block; width:*; vertical-align:middle;}

ol > li.done > output { text-decoration:line-through; }
```

--------------------------------

### Sciter Script: Paint Another Arc Path in Div

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/graphics/test-graphics-path-ops.htm

Shows how to paint an arc path starting from the top-left corner and curving towards the bottom-right. The code configures line properties and draws the path, demonstrating another variation of arc drawing.

```javascript
$(div#arcTo3).paintContent = function( gfx ) {
  var (w,h) = this.box(#dimension);
  var path = new Graphics.Path();
  path.moveTo(0,0)
  .arcTo(0,200,200,200,100);
  gfx.lineWidth(4)
  .lineColor(color(0xFF,0,0))
  .drawPath( path);
};
```

--------------------------------

### Sciter Select Element Value Manipulation

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/forms/select-list.htm

This snippet shows how to get, set, and clear the value of a select element using Sciter's event handling. It also demonstrates setting the select element's value by directly referencing a DOM option.

```sciterscript
select {
  display:block;
  height:*
}

event click $(#get) {
  stdout.printf("%V\n",$(select).value);
}

event click $(#set) {
  $(select).value = 8;
}

event click $(#clear) {
  $(select).value = undefined;
}

event click $(button#set-by-dom-ref) {
  $(option[value=8]).execCommand("set-current");
}
```

--------------------------------

### Sciter Event Handling: Window Display and Closing

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/dialogs+windows/samples/sample-params-window.htm

This snippet demonstrates basic Sciter event handling. The `self.ready` function is called when the view is shown, setting its state and logging parameters. The `self.closing` function checks for an `onClose` parameter and executes it if present.

```javascript
function self.ready() {
  view.state = View.WINDOW_SHOWN;
  debug params: view.parameters;
}

function self.closing() {
  if( view.parameters.onClose) {
    view.parameters.onClose();
  }
}
```

--------------------------------

### Core API: Creating a Sciter Window

Source: https://context7.com/c-smile/sciter-sdk/llms.txt

Demonstrates the creation of a Sciter-powered window using the `sciter::window` class. This includes setting window properties, loading HTML content, and exposing native C++ methods to the TIScript environment.

```APIDOC
## Core API: Creating a Sciter Window

### Description
This section details how to create and manage Sciter windows using the `sciter::window` class in C++. It covers window initialization, HTML loading, and exposing native functions to the scripting layer.

### Method
N/A (Illustrative C++ code)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```cpp
#include "sciter-x.h"
#include "sciter-x-window.hpp"

class MyApp : public sciter::window {
public:
  MyApp() : window(SW_TITLEBAR | SW_RESIZEABLE | SW_CONTROLS | SW_MAIN | SW_ENABLE_DEBUG) {}

  // Expose native method to script: view.frame.getMessage()
  sciter::string getMessage() { return WSTR("Hello from C++!"); }

  SOM_PASSPORT_BEGIN(MyApp)
    SOM_FUNCS(SOM_FUNC(getMessage))
  SOM_PASSPORT_END
};

int uimain(std::function<int()> run) {
  sciter::om::hasset<MyApp> pwin = new MyApp();
  pwin->load(WSTR("file://path/to/index.html"));
  pwin->expand();
  return run();
}
```

### Response
N/A (This is a code example for window creation)

#### Success Response (N/A)
N/A

#### Response Example
N/A
```

--------------------------------

### Sciter Select Element Event Handling and Value Manipulation (Sciter Script)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/forms/select-tree-treelines.htm

Demonstrates how to handle click events on buttons to interact with a select element. It shows how to get the current value, set a specific value, and clear the selection. This script assumes the presence of a select element and buttons with specific IDs.

```Sciter Script
select { display:block; height:*; font: system; }
option > code { color:red; display:inline-block; border:1px solid #DCB; width:1.4em; margin-right:2px; text-align:center; }
option:not(:node) { padding-left:0; } /* leaf item*/
option:current > code { border-color:transparent; }

$(#get).onClick = function() { stdout.printf("%V\n",$(select).value); }
$(#set1).onClick = function() { $(select).value = "Transition Metals"; }
$(#set2).onClick = function() { $(select).value = "Na"; }
$(#clear).onClick = function() { $(select).value = undefined; }
```

--------------------------------

### CSS Example with Flex Units and Flow Attribute

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/flex-flow/flex-layout.htm

Demonstrates the usage of flex units for margins and the 'flow' attribute for layout management within a container. This example shows how 'flex' values act as weights to distribute free space.

```css
.container {
  /* Container styles */
}

p {
  width: 40%;             /* fixed width - 40% of width of the container */
  margin-left: 2*;        /* left "spring" of power 2 */
  margin-right: 1*;       /* right "spring" of power 1 */
  border:1px solid black; /* border of fixed width */
}
```

--------------------------------

### JavaScript: Implement Multi-View Selection Logic

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/frames/multi-view/main.htm

This JavaScript code manages the selection and loading of different views (HTML documents) within a Sciter application. It handles UI updates, document loading, and calls a setup function within the loaded document. Dependencies include Sciter's DOM manipulation methods.

```javascript
const tabs = $(div#tabs);
const frameContent = $(frame#content);
const footer = $(footer);
var currentViewId = null;
var currentViewDoc = null;
var currentLabel = null;

function selectView(viewId) {
  if( currentLabel ) currentLabel.state.checked = false; // deselect previous
  frameContent.load(viewId + ".htm");
  currentLabel = $(#tabs > label#{viewId});
  currentLabel.state.checked = true;
  currentViewId = viewId;
  // getting reference to document loaded into the view
  currentViewDoc = frameContent[0];
  // calling setup() function declared in the document
  currentViewDoc.ns.setup();
  footer.text = viewId;
  // setting <html state="..."> attribute
  // so host view can be styled differently for each view (if needed)
  self.attributes["state"] = viewId;
}

self.on("click", "#tabs>label", function() {
  var viewId = this.attributes["id"];
  selectView(viewId);
})
```

--------------------------------

### Remove Current Row from Table (Sciter Script)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/ideas/grid/grid.htm

This code snippet shows how to remove the currently selected row from an HTML table. It checks if the table has any rows, gets the current row, removes it, and then sets the next row as the current row if available. It relies on Sciter's table and DOM manipulation methods.

```javascript
const table = self.$(#thetable);
assert table : "Cannot find #thetable";

@click @on "button#RemoveCurrentRow" : {
  if(table.body.length <= 0) return;
  var row = table.getCurrentRow();
  if(!row) return;
  var row_index = row.index;
  row.remove();
  if( row_index < table.body.length) table.setCurrentRow(table.body[row_index]);
}
```

--------------------------------

### Scan All Files (Sciter Script)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/tests/test-system-scanfiles.htm

This example shows a direct call to System.scanFiles with the wildcard "*" to scan all files in the current directory. It implies a default or pre-defined callback function is used if none is explicitly provided in this simplified call.

```Sciter Script
scanFiles("*")
```

--------------------------------

### Dynamic Progress Bar with Animation (Sciter Script)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/forms/progress.htm

This snippet demonstrates how to create and control a dynamic progress bar with animation using Sciter's scripting language. It includes event handlers for starting and setting the progress bar's value. Dependencies include the Sciter DOM elements for the progress bar and buttons.

```sciter-script
event click $(#dyn1-start) {
  //stdout.$n(started);
  var progress = $(#dyn1);
  progress.value = 0;
  function inc() {
    if( progress.value >= 200 ) return;
    progress.value += 1;
    //stdout.$n(inc {progress.value});
    return true;
  }
  progress.timer(50,inc);
}

event click $(#dyn1-set) {
  var progress = $(#dyn1);
  progress.value = 50;
  progress.state.busy = false;
  return true;
}
```

--------------------------------

### Render 'Hello, world!' using Sciter Reactor SSX

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/content/reactor/helloworld.htm

This snippet demonstrates the simplest Sciter Reactor example, rendering an H1 element with 'Hello, world!' content into the DOM. It utilizes SSX literals, which are an integral part of Sciter's Script, and native DOM updates.

```javascript
$(body).content( <h1>Hello, world!</h1> );
```

--------------------------------

### Display Media Variables in Sciter (Behavior Script)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/media/media-vars.htm

This script accesses media variables provided by the Sciter environment and appends them as definition terms (dt) and definitions (dd) to a definition list (dl) element on the page. It utilizes the `view.mediaVars()` function to get the variables and DOM manipulation to display them. This code is intended to be run within a Sciter application.

```javascript
dl { flow: row(dt,dd); white-space:nowrap; }

function self.ready() {
  var ul = $(dl);
  var mediaVars = view.mediaVars();
  for( var (k,v) in mediaVars )
    ul.$append(<dt>{k}</dt><dd>{v}</dd>);
}
```

--------------------------------

### CSS Flex Unit Computation Example

Source: https://github.com/c-smile/sciter-sdk/blob/master/doc/flex-flow/flex-layout.htm

Illustrates the calculation of element dimensions, margins, and paddings when using flex units. It shows how free space is distributed based on the 'flex' values as weights, considering fixed borders.

```css
#container {
  width: 300px;
}

#element {
  width: 1*;
  margin-left: 2*;
  margin-right: 1*;
  border: 2px solid;
  padding: 0;
}

/* Computation: */
/* sum-of-flexes = 1* + 2* + 1* = 4*; */
/* width-to-distribute = 300px - 2px - 2px; // container width minus fixed borders */
/* width        = 1/4 * width-to-distribute = 74px; */
/* margin-right = 1/4 * width-to-distribute = 74px; */
/* margin-left  = 2/4 * width-to-distribute = 148px; */
```

--------------------------------

### Sciter Plus Framework Routing and UI Configuration

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+plus/demos/P-routing.htm

This snippet configures the Plus framework routing and styles basic UI elements. It imports the Plus framework CSS and defines routes for different views. It also includes event handlers for route changes and F5 key presses.

```css
/* the only thing needed to include Plus framework */
@import url(../plus-routes.css);
@import url(../../note.css);

toolbar > button {
  behavior:radio;
  height:*; 
  width:64dip;
  height:48dip;
  text-align:center;
  vertical-align:middle;
}

toolbar > caption {
  width:*; 
  text-align:center;
  vertical-align:middle;
}
```

```javascript
function self.ready() {
  Plus.app.routes = [
    { path:"/first", url:"routes/first.htm" },
    { path:"/second", url:"routes/second.htm" },
    { path:"/third", url:"routes/third.htm" }
  ];
}

self << event routechange (evt) {
  var button = $(toolbar>button[href="{Plus.app.path}"]);
  button.value = true;
}

self << event keyup (evt) {
  if( evt.keyCode == Event.VK_F5 ) {
    if( self.parent ) // loaded in frame
      self.parent.load(__FILE__);
    else // loaded in view
      view.load(__FILE__);
    return true;
  }
}
```

--------------------------------

### Sciter Select Element Styling and Event Handling

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/forms/select-tree.htm

This snippet defines CSS styles for the select and option elements, and handles click events for buttons to interact with the select element. It demonstrates how to get the selected value, set it programmatically, clear it, and set it using a DOM reference. The 'change' event on the select element is also logged.

```css
select { display:block; height:*; width: 20em; }
option > code { color:red; display:inline-block; border:1px solid #DCB; width:1.4em; margin-right:2px; text-align:center; }
option:current > code { border-color:transparent; }
```

```script
event click $(#get) { stdout.printf("%V\n",$(select).value); }
event click $(#set1) { $(select).value = "Transition Metals"; }
event click $(#set2) { $(select).value = "Na"; }
event click $(#clear) { $(select).value = undefined; }
event click $(button#set-by-dom-ref) { $(option[value=K]).execCommand("set-current"); }
event change $(select) { debug change: this, this.value; }
```

--------------------------------

### Initiate Image Drag and Drop in Sciter (JavaScript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/drag-n-drop/drag-data-with-icon.htm

This snippet demonstrates initiating a drag operation for an image within a Sciter application. It loads an image, defines drag data, and uses `view.performDrag` to start the drag. The `mousedragrequest` event is used to trigger this functionality. Dependencies include Sciter's built-in functions like `loadImage`, `view.performDrag`, and `stdout.println`.

```javascript
div { size:100dip; background:gold; }
$(div) << event mousedragrequest (evt) {
  var img = self.loadImage("../animations/tutorial-parts/heart.png");
  var data = { text: "heart image", };
  var r = view.performDrag( img, 20,20, data, #copy );
  stdout.println(r);
  return true;
};
```

--------------------------------

### UI Window Replacement Events (Tiscript)

Source: https://github.com/c-smile/sciter-sdk/blob/master/logfile-1.htm

Illustrates how to handle UI window replacement lifecycle events, specifically 'replacement-start' and 'replacement-end', using the .on() method in Tiscript.

```tiscript
view.on("replacement-start", f1).on("replacement-end", f2)
```

--------------------------------

### Sciter Plus Framework CSS Import and Markup Behavior

Source: https://github.com/c-smile/sciter-sdk/blob/master/samples/+plus/demos/K-bound-markup.htm

This snippet shows the basic setup for the Plus framework in Sciter, including importing necessary CSS files and defining a custom 'Markup' element behavior. The 'Markup' behavior redefines the 'value' property to interact with the element's inner HTML, allowing it to be bound with Plus variables and HTML content.

```css
@import url(../plus.css);
/* the only thing needed to include Plus framework */
@import url(../../note.css);

ol { width:*; }
ol > li { flow:horizontal; border-bottom:1px solid dotted;}
ol > li > label { display:inline-block; }
.markup { prototype: Markup; }
```