This is a sciter.js demo app that showcases:
- all sciter html elements (components) I found
- application theming
It's a personal declination from one of the sciter examples.
- git clone the repository
- install packages
npm install - install latest sciter sdk
npm run install-sdk - start the demo
npm run scapp
- A recent version of Node.js
node(tested with 16 LTS) and its package managernpm.- On Windows download and run the installer
- On Linux check the installation guide
- close the inspector before you play with the interface as inspector communication errors make the application crash.
https://github.com/c-smile/sciter-js-sdk/tree/main/docs/md
sciter supports all standard elements defined in the HTML5 specification with some additions:
https://sciter.com/developers/for-web-programmers/input-elements-map/
Unlike vanilla html, it's possible to include html inside another html document:
<include src="window.html" media="sciter" />or
<include src="fragment.htm">
fragment.htm is not available!
</include>Consider this input:
<input type="text" name="test" id="info" class="blue">info</input>in sciter there's a shorter notation:
<input|text(name) #info .blue>info</input>https://sciter.com/developers/for-web-programmers/input-elements-map/
https://github.com/c-smile/sciter-js-sdk/tree/main/docs/md/behaviors
<input type="currency"><input type="decimal"><input type="integer"><input type="number"><input type="masked">masked text input eg: phone, IP address, serial numbers<input type="url"><input type="slider">horizontal and vertical slider input<input type="scrollbar">horizontal and vertical standalone scrollbars<input type="date">date input<input type="time">time input<input type="calendar">month/year/decade/century input<button type="checkbox">...</button>checkbox combined with its label<button type="radio">...</button>radio button combined with its label<button type="menu">...<menu></button>button with popup menu<button type="selector">...</button>button with popup list of options defined in a separate popup element<button type="menu">...<menu></button>button with popup menu
<output type="text" value="text" /><output type="integer" value=1 /><output type="integer" value=1 /><output type="time-local" format="long|short" />
Select elements support multiple and multiple=checkmarks attributes to allow multi-select list functionality
<select type="list">standard select element<select type="dropdown">standard select element with dropdown list<select type="tree">select element with<option>s organized in hierarchical tree
<popup>popup element (preferred to be placed in<head>). You can show popup with Element.popupAt.<menu .context>context-menu styled element
<textarea>standard plain text editor<plaintext>plain source code editor with line numbers and optional syntax highlighter, each line is a<text>element<htmlarea>ready to use WYSIWYG HTML editor
<frame>represents a nested browsing context, embedding another HTML page into the current one.<frameset>child elements to be resizable window blocks
selectableassign behavior: selectablespellchecktrue/false enable or disable spellchecknovaluesynonym ofplaceholder
application window attributes
-
window-framevaluesdefault|standard|solid|solid-with-shadow|extended|transparentnoneor attribute omitted as whole – standard OS desktop window frame (with caption and close/maximize) buttons.solid– frameless window with non-transparent background, just a rectangular box. Window chrome needs to be defined in markup (see below).solid-with-shadowsame as above but with shadow if OS supports it.extended– window that allows to replace custom elements in window’s caption bar.transparent– layered window, it’s shape is determined by background image or border-radius. CSS shall definehtml { background-color:transparent }for it. -
window-titletitle -
window-resizable -
window-widthinitial width of the window -
window-heightinitial height of the window -
window-iconimage for window decoration and in taskbar -
langdefine dictionary for spellcheck ISO 639-1 -
window-blurbehindcreate windows with blur-behind effectauto– default OS blur-behind effect;ultra-dark,dark,lightandultra-light
<html
window-frame="default"
window-title="sciter demo app"
window-resizable="true"
window-width="750dip"
window-height="1024dip"
window-icon="images/seastar.svg"
window-blurbehind="light"
theme="light"
>To create a headless window use window-frame="extended", then define the header components.
role="window-caption"move window by clicking the elementrole=window-close– close buttonrole=window-icon– window icon buttonrole=window-minimize– minimize buttonrole=window-maximize– maximize/restore buttonrole=window-bodyor<body>– area (four bands) between<html>and that body element is used for window resizing.
<head>
...
</head>
<!-- header before the body tag -->
<header>
<picture src="images/seastar.svg" role="window-icon" />
<window-caption role="window-caption">sciter demo app</window-caption>
<window-buttons>
<window-button role="window-minimize"></window-button>
<window-button role="window-maximize"></window-button>
<window-button role="window-close"></window-button>
</window-buttons>
</header>
<body>This doesn't work.
<button #info onclick="console.log('test')">info</button>Use this instead:
// option 1
document.$("button#info").onclick = log;
// option 2
document.$("button#info").on("click", log);
function log()
{
console.log('test');
}
<button #info>info</button>There's another project that explores event in more details
sciter supports css level 2.1 in full and has some css 3 features
https://sciter.com/developers/for-web-programmers/
- gradient backgrounds, see
background-colorattribute definition - extended image fill, see
background-positionandbackground-repeatattribute definitions - flex length units and
flow - foreground images
hit-margin@include "mime-type" url(...) [media types list]inclusion of scripts from csssizeshortcut property forwidthandheight. If only one length value is provided then both width and height get the value. If there are two values then first one will go to width and second to height.- supports
//comments @mixinA named set of css properties (see below)@setA style set is a named block of style rules (see below)morphcolor transformation function (see below)- css 3
currentcolorkeyword refers to the value of the color property foregroundpropertyappearanceproperty that suppresses default visual styles
https://sciter.com/docs/content/css/cssmap.html
sciter does not support display: flex, you need to use the custom css property flow instead.
https://terrainformatica.com/w3/flex-layout/flex-vs-flexbox.htm
- 1
ppx= 1 physical screen pixel = actual size depends of screen resolution - 1
dip= 1/96th of an inch = 0.264583mm = actual size does not depend on screen resolution
One dip is one ppx on a 96 DPI screen.
1px can be either 1dip or 1ppx depending on SCITER_SET_PX_AS_DIP setting.
In order to have your application size consistently accross screens with different DPI, use dip.
See https://sciter.com/road-to-sciter-js-step-i-supports-px-ppx-dip/
Unlike vanilla css, css constants and variables are supported.
https://sciter.com/developers/for-web-programmers/css-constants/ https://sciter.com/css-variables-support/
morph is color transformation function.
color: morph(basecolor, transformation1:value1, transformation2:value2, ...)
basecolor is either a constant or a variable or currentColor
example: background-color: morph(currentColor, lighten:40%, opacity:50%)
sciter uses the QuickJS++ javascript engine.
It adds JSX, Mithril and React support:
https://github.com/c-smile/quickjspp/blob/master/doc/jsx.md
In addition it contains storage in the form of a NoSQL MongoDB.
General considerations about JS libraries and frameworks:
If library is pure JS one then it should work as it is in sciter. Example: RemarkableJS that does MD-to-HTML conversion works as it is.
If library relies on basic DOM features it may work as it is. Example: MithrilJS that works as it is in sciter.
If library relies on extended/obscure features then it will need either porting or an external porting layer. see
jQuery does not work in Sciter as JQuery was designed to support specific browsers, but zepto.js, a lightweight port of jQuery, works.
Lottie animations are supported.
Mixin is a named set of css properties that can be applied by name to css rules.
@mixin STD-BUTTON-DEFAULT
{
padding: 0 1em;
border: 1dip solid black;
border-radius: 3dip;
background: linear-gradient(top, #3498db, #2980b9);
color: #ffffff;
}https://sciter.com/mixin-feature-in-sciters-css/
A style set is a named set of style declarations and it is a system of selectors and style definitions that are applied as the whole.
@set button {
:root {
behavior: button;
flow: vertical;
@STD-BUTTON-DEFAULT;
}
:root:hover { @STD-BUTTON-HOVER; }
:root:focus { @STD-BUTTON-FOCUS; }
:root:disabled { @STD-BUTTON-DISABLED; }
}Rules within a style set can only be overriden with !important.
https://terrainformatica.com/2007/04/20/css-extensions-in-h-smile-engine-part-i-style-sets/