Sciter, <video> support

July 5, 2014

Filed under: HTML and CSS,Sciter,Web Application Techologies — Andrew @ 4:34 pm

Adding basic <video> support to Sciter.

The <video> element (behavior:video in fact) is rendered windowlessly as normal DOM element so can participate in animations, transforms and to have other DOM element rendered on it.

Here is a screenshot of Sciter made when it is playing video (standard 30 fps rate) under animation and transformation on semi-transparent background.

sciter video demo

DOM Inspector and “how to remove border from an input element”

June 21, 2014

Filed under: HTML and CSS,Sciter — Andrew @ 8:31 am

This how to remove border from input element is a popular question that I am getting time to time from new users.
And there are variations of it about dropdown select button, calendar cell, context menu and so on.

In this post I’d like to explain general method of solving such problems instead of answering “define the following …”

Each input element in Sciter is a plain DOM element or composition of plain DOM elements.

Input elements (and not only inputs) are getting their “primordial” styling by applying rules from Sciter’s internal “master.css” style sheet. To find out styles of particular DOM element start DOM inspector by clicking on its icon in Sciter.exe window.

To highlight needed DOM element click on it by mouse with CTRL+SHIFT keys pressed on keyboard. Or select the element in DOM tree in inspector’s window:

dom inspector

Inspector will show effective style rules applied to the element and also its final (used) styles.

As you see here that <input> element has no border at all. But it has
background-image: url(theme:edit-normal); background-repeat:stretch; instead – background image that is stretched to fill whole element’s area.

The theme:.... images are kind of virtual ones – their rendering is delegated to host OS UI theming services. Therefore background of this particular <input> element is drawn by host OS.

And finally here is the answer on “how to remove border from the input element”.

To suppress borders and any default background drawing declare the following:

 
input#my {
  border: none;  /* remove any border */
  background: none; /* remove any (default) background */
}

Sciter, SVG support

June 11, 2014

Filed under: Sciter — Andrew @ 5:02 pm

Adding SVG support to Sciter:

Sciter SVG demo rendering

Sciter SVG demo rendering

This time SVG implementation uses standard DOM model so can be accessed by TIScript Element interface and styled by CSS.

Same drawing on Mac OSX:
mac-osx-svg-tiger

[tiscript] ‘this’ and ‘this super’ function arguments

May 27, 2014

Filed under: How-to,Sciter,Script — Andrew @ 2:56 pm

Each function in JavaScript and TIScript gets implicit argument named this.

So when you call method of some object as foo.bar(1) then foo object is passed to the bar(param) function as a value of this argument. And the param will get value of 1.

All of us who are practicing JS, Python, Ruby, etc. know about that ‘this’ thing pretty well.

But what shall you do when you have inner function and want to access ‘this’ value of outer function? The only way in JavaScript for that is to declare other variable with distinct name and assign ‘this’ to it: var that = this;.

To cover such code patterns I’ve introduced in TIScript “super this” concept, so we have following implicit variables in any function:

  • this – standard this variable;
  • this super – standard this variable of outer function;
  • this super super – this variable of outer-outer function;
  • etc.

Here is an example that outputs “6” in standard output:

class Test {

  function this(data) { // constructor
    this.data = data;   // instance field 
  }

  function Outer(arg1) {
    // this - hidden argument, local variable 
    // arg1 - argument, local variable

    function Inner(arg2)  {
      // this - hidden argument, local variable 
      // arg2 - argument, local variable
      // arg1 - outer variable - outer argument
      // this super - outer variable - outer 'this' argument
      
      return 
        (this super).data   // 1 
        + arg1              // 2
        + arg2              // 3
    }
    return Inner;
  }
}

var test = new Test(1);

var innerFunc = test.Outer(2);

stdout.println( innerFunc(3) );

Sciter 3.1 with Mac OS X support from now

May 19, 2014

Filed under: Sciter — Andrew @ 2:25 pm

First release of Sciter 3.1 is now available at sciter-sdk.zip.

Sciter works now on Windows and on Mac OS X too.

Sciter layered window demo on Mac OS X

Sciter layered window demo on Mac OS X

Status:

  • Windows version is in stable phase (I didn’t change core implementation too much from Sciter 3.0).
  • Mac OS X is in beta phase with following known issues so far:
    • Work on master.css (default OS theme styling) is not complete yet. Expect some abnormalities in standard input renderings.
    • HTTP/HTTPS client is not complete yet so Element.request() calls (a.k.a. AJAX) will fail on http:// urls.

Note, API changes:

  • sciter.dll and sciter-osx.dylib expose single function SciterAPI() that returns pointer to "API interface table" – structure that contains all functions that used to be exposed directly in Sciter 3.0. Among other things this allows to use inspector.dll from statically linked Sciter code and to load Sciter DLL with greater flexibility. See SAPI() loader function.
  • All old API functions are implemented as inlines, like:
      inline LPCWSTR SCAPI SciterClassName () { return SAPI()->SciterClassName(); }
    so it is enough to recompile existing applications in order to use new API.
  • Mac OSX version does not have SciterProcND() for obvious reasons, use SciterCreateWindow() instead, it will create Sciter’s NSView instance inside its own NSWindow.
  • SciterCreateWindow() works on Windows too. You can use it to create standalone Sciter windows.

Fixes from latest (3.0.2.6) version:

  • Fix of Event.x/yRoot computation
  • CSS++, mapping: left-to-right( alignment ), switches text-align:left to text-align:right and also does this for horizontal-align. It does NOT switch text-align:start | end; values.
  • Fix of text-overflow: ellipsis in GDI+ mode.
  • view.dialog() fix of custom frame, "resizeable" interpretation.
  • GDI+, rounded border rendering fix.
  • [tiscript, regexp] infinite loop on some types of REs in string.split(re).
  • [+plus] glibc++ compatibility fixes.
  • <img> fix of border rendering (default styling issue)
  • better shutdown handling (fonts)

Builds: win32, win64, osx64

Usability. Input form validation.

May 14, 2014

Filed under: Usability,Web Application Techologies — Andrew @ 2:04 pm

While ago I’ve found article “Inline validation in web forms” on AListApart particularly deep and yet useful. Despite that it was published 5 years ago it is still actual.

Validation. Eye tracking analysis

Validation. Eye tracking analysis

« Previous PageNext Page »