Sciter, Mac OSX port progress report.

November 12, 2013

Filed under: Sciter — Andrew @ 9:50 pm

It is coming.

Here is structure of projects the Sciter is made of:

  • /demos/ – group of demonstration projects that go to public SDK:
    • inspector – DOM inspector, targets: /sdk/bin/inspector32.dll and /sdk/bin/inspector64.dll, uses/depends-on sciter.dll
    • sciter – main demo, UI "player" of HTML/CSS/TIScript, targets: /sdk/bin/sciter32.exe and /sdk/bin/sciter64.exe, uses/depends-on sciter.dll
  • /libs/ – external libraries, used "as is" by sciter.dll
    • dybase – Konstantin Knizhnik’s DyBASE, used by tiscriptlib to provide persistence (Storage and Index objects). Static library, part of sciter.dll
    • png – standard distribution of pnglib + animated PNG extension. Used by gool.  Static library, part of sciter.dll
    • zlib – standard distribution of zlib. Used by pnglib and sciter.dll. Static library, part of sciter.dll
  • d2d – Direct2D and DirectWrite gfx backend, used by gool and html. Static library, part of sciter.dll
  • gdi+ – GDI+ gfx backend implementation, used by gool and html. Static library, part of sciter.dll
  • gool – abstract graphics layer, used by html. Static library, part of sciter.dll
  • html – h-smile core – HTML/CSS engine. Static library, part of sciter.dll
  • sciter.dll – the sciter engine assembly per se. targets: /sdk/bin/sciter32.dll and /sdk/bin/sciter64.dll
  • tiscript – standalone tiscript interpretter/compiler assmbled as command line utility. Used for example to compile TIS sources to bytecodes. target: /sdk/bin/tiscript.exe (32bit).
  • tiscriptlib – TIScript core, uses /libs/dybase and tool static libraries. Static library, part of sciter.dll
  • tool – collection of common primitives: string, array<T>, hash_map<T>, etc. Static library, part of sciter.dll
  • win – window primitives (Windows)

So far I’ve ported /tool, /tiscript + /dybase

/gool and /html are platform independent but taking some attention.

Major things are graphics and windowing layers, they are taking most of the time at the moment.

Model-View-Whatever, the Plus engine for Sciter.

October 20, 2013

Preface

I would say that human history is a history of reinventing "wheels" of various kinds.

This time we see concept of data binding reincarnated with slightly pathetic name Model-View-Controller. Of course, as many people as many meaning they give to the MVC abbreviation but, nevertheless, it is all around basic idea of data binding – you have data (the Model these days) declaratevily bound with UI "controls" (the View). I believe Microsoft’s VisualBasic 4 and its IDE was the very first usable implementation of the idea. There was no Controller concept at that moment so their implementation was quite limiting – while you can implement 90% of your data editing needs using simple declarations you will spend 90% of your design time fighting with the rest of 10% of needed functionality.

The Plus framework for Sciter.

The Plus framework you can find in Sciter SDK is quite compact (400 LOC) and relatively simple implementation of that old data binding concept with controller means.

Note, the Plus is not an attempt to solve every html/css/script UI problem as AngularJS does. It is just a data binding mechanism with the concept of @observing functions (controllers in my interpretation).

Basics

Model in Plus interpretation is some tiscript namespace object that contains data variables (and optionally functions) to be bound with particular container in HTML DOM.

For example if you declare this script:

namespace Data {
  var correspondent = "world"; // variable to be bound
} 

and corresponding markup:

<section model="Data">
   Whom to greet: <input name="correspondent"> ?
   <p>The greeting: Hello <output name="correspondent">!</p>
</section>

and include in your document "plus.css" file you will get live data binding between Data.correspondent data variable and two DOM elements: two ways with input[name=correspondent] and one way (only view) binding with output[name=correspondent]. So when you type something in that input you will see the data also rendered in output element.  To see this alive load sdk/samples/+plus/demos/0-basic-variable-binding.htm in sciter.exe from its SDK.

The model and name DOM attributes.

Note that <section> element contains model="Data" attribute. It instructs the Plus engine to establish data binding between content of this section and members of namsepace Data {} in script. Name of the bound namespace can be any suitable, not just Data.

Any DOM element inside that section[model] may have name attribute defined. On binding initialization the Plus will try to find data element in the model with that name and if such data variable is found it will made two or one way (for <output> elements) binding between .value of that DOM element and the data variable. The name can be compound – may contain ‘.‘ (dot)-separated list of names. This way  you can bind DOM elements with object fields inside the model:

namespace Contact {
  var name = { first: "Albert", last: "Einshtein" };
  var phone = "....";
  ... 
}

and markup:

<form model="Contact" id="contact-details"> 
  <label for="name.first">First name></label> <input name="name.first">
  <label for="name.last">Last name></label> <input name="name.last">
  ...
</form>

Celsius to Fahrenheit convertor.

Controllers, the @observing function decorator.

File plus.tis (the Plus engine implementation) contains declaration of function decorator named @observing. With that decorator you can define functions that will be triggered (called by the engine) when variable(s) they are observing change.

As an example let’s define simple Celsius to Fahrenheit conversion tool that should work in two directions – when you define celcius value it will calculate its fahrenheit representation. And vice versa. Something similar to the form on the right:

First we will define our Data namespace:

      include "../plus.tis"; // model below uses @observing decorator defined in plus.tis  
      namespace Data // our model
      {  
        var celsius = 0; 
        var fahrenheit = 32;
        
        // this function is observing 'celsius' and calculates 'fahrenheit'
        @observing "celsius"
          function toFahrenheit() {
            fahrenheit = celsius * 9 / 5 + 32;
          }
        // this function is observing 'fahrenheit' and calculates 'celsius'
        @observing "fahrenheit"
          function toCelcius() {
            celsius = (fahrenheit - 32) * 5 / 9;
          }        
      }    

Note two functions above: function toFahrenheit() is observing celcius variable. When celcius variable will change, for example as a result of changes in <input|number(celsius)> field, the toFahrenheit() function will be triggered and will set value of fahrenheit variable. As we have another input bound with the fahrenheit variable:

<body model="Data">
  <p><input|number(celsius)>°C and <input|number(fahrenheit)>°F</p>
</body>

we will see in it results of calculation. This works in both directions – from fahrenheit to celcius and from celcius to fahrenheit.

To see this alive load sdk/samples/+plus/demos/1-basic-function-binding.htm sample in sciter.exe.

That’s it for now. In the next article I’ll explain use of repeatable attribute to bind arrays of objects with rpepatable sections and other samples. If you don’t want to wait check other samples in sdk/samples/+plus/demos/ folder of the SDK. They are self descriptive.

Sciter HTML parsing flavour

September 21, 2013

Filed under: HTML and CSS,Sciter — Andrew @ 12:24 pm

HTML parser in Sciter v.3 supports attribute shortcuts allowing to write HTML in more compact form. Compare these two declarations that are identical (for the Sciter):

Compact:

 
  <input|currency(itemPrice) value=1000> 

and standard:

 
  <input type="currency" name="itemPrice" value=1000> 

As you see the first one is slightly shorter and better readable (subjective of course).

Here is full list of supported attribute shortcuts:

  • #nameid, attribute name that starts from ‘#’ is parsed as id=”name”
  • .nameclass, this is an equivalent of class="name". Element may have multiple “dot attributes”. All of them are combined into single class attribute. So this <div.container.collapsed> is treated as this: <div class=”container collapsed”>
  • |nametype, attribute name that starts from ‘|’ is parsed as type="name"
  • (someName)name, attribute name enclosed into ‘(‘ and ‘)’ is parsed as name="someName"

Just in case :)

Sciter 3

September 8, 2013

Filed under: Sciter — Andrew @ 3:28 pm

Sciter 3 is officially out.

See its log file.

  • On Windows Vista/7 it uses Direct2D backend
  • On Windows XP it uses GDI+ backend

Known issue on Windows XP: rendering of linear and radial gradients is different from Direct2D backend as GDI+ has no notion of “open gradients”. I’ll fix it a bit later.

You shall expect that GDI+ rendering is not that effective as rendering by Direct2D so avoid animations affecting large areas. These two media rules allow to target different backends used:

 
  @media graphics-layer == 1 {
    /* GDI+ rules here.
       Less animation, etc. */
  }
  @media graphics-layer == 2 {
    /* Direct2D in WARP mode (software rendering but fast enough)        
     */
  }
  @media graphics-layer >= 3 {
    /* Direct2D in hardware mode, max performance. */
  }

But most of the time it is enough to have just two sections:

 
  @media graphics-layer == 1 {
    /* GDI+ rules here.
       Less animation, etc. */
  }
  @media graphics-layer > 1 {
    /* Direct2D, high performance. */
  }

In script you can check gfx backend used by reading view.backend (:integer) property.

Sciter 3 beta is out

August 24, 2013

Filed under: Sciter — Andrew @ 8:42 pm

Here is Sciter 3 beta SDK distribution.

This version of Sciter is pretty much Sciter v.2 with additional GDI+ backend. All samples from the SDK will run on Windows XP and above as they are.

On Windows Vista with Service Pack 2 and above Sciter will use H/W accelerated Direct2D rendering backend.
On XP and Vista prior SP2 it will use GDI+ layer. It should also run on Windows 2000 but I didn’t test that OS yet.

Known problems (on XP) that will be fixed in final release:

  1. Gradients on graphics show artifacts.
  2. opacity CSS property is not implemented yet.
  3. Styling of some of <inputs> does not follow XP styling.
  4. IME input is supported partially (no highlighting yet).

Note: you can run all SDK samples on W7 using GDI backend. Simply add sciter-gfx=gdi to command line, for example this:

> sciter.exe sciter-gfx=gdi

will run the executable with GDI backend.

Sciter 3 is coming

August 18, 2013

Filed under: Sciter — Andrew @ 10:12 am

Sciter 3 is all about various ports on various platforms.

For example here it runs on Windows XP where it uses GDI+ graphics backend:

sciter3-xp screeshot

Sciter 3 running on Windows XP

Sciter 3 is built on top of Sciter 2 codebase and is a drop-in replacement of Sciter 2 – you just need to replace sciter32/64.dll in your distributions. Sciter ABI stays the same.

I expect first public build of S3 to appear September 7th this year (2013).

Sciter for Mac OS X will appear later this year.
I am also planning to do Linux/Gnome port but I am not sure about its dates yet.

« Previous PageNext Page »