Sciter 2.0.0.12

February 27, 2012

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

Just published Sciter 2.0.0.12 SDK that is available at terrainformatica.com/sciter/sciter2-tech-preview.zip.

Sciter 2.0.0.12 screenshot

What’s new in the build:

  • Demos:
    • bin/layered.exe (sdk/demos/layered) demonstrates use of WS_EX_LAYERED windows. That is about windows of non-rectangular shapes. W7 has better support of such windows so even animations are feasible on such windows. Just run the demo to see.
  • CSS features:
    • New layout method: flow:row(tag1,tag2) – that is a variation of flow:grid | "template" that allows to define grid-alike layouts when number of rows is unknown upfront. For example list of info items on the screen shot above is defined as:
    • <dl #info>
        <header>Sciter</header>
           <dt>version:</dt>        <dd #version>...</dd>
        <header>System</header>
           <dt>OS type:</dt>        <dd #os-type>...</dd>
           <dt>OS version:</dt>     <dd #os-version>...</dd>
      ... </dl>

      and styled simply as flow:row(dt,dl) to replace <dt>/<dd>s in grid rows.

    • The design of font-rendering-mode property is finalized and now it looks as this:
    • font-rendering-mode: snap-pixel | sub-pixel;
      

      Default value is sub-pixel and it is an inheritable property. For large fonts and fonts in elements under 2D transforms look better when rendered in sub-pixel mode. Normal and small UI fonts are better readable in snap-pixel mode.

  • Core changes:
    • flow:text layout module ( used to render text block containers like <p> ) was rewritten from a scratch. Previously I was using IDWriteTextLayout for that but was forced to get rid of it. IDWriteTextLayout has no means to support things like floats (require "jagged" text boundaries) and text-align:justify.
    • So now the engine passes all floats related tests from W3C CSS test suite.
  • List of intrinsic behaviors supported so far:
    • buttons:
      • behaviror:button  attached to <input type=button> and <button>;
      • behavior:clickable – focus-less buttons like toolbar buttons, etc.
      • behaviror:check  attached to <input type=checkbox> and <button type=checkbox>;
      • behavior:radio attached to <input type=radio> and <button type=radio>;
      • behavior:switch – flawor of behavior radio but activation happens on MOUSE_DOWN rather than on MOUSE_UP, used for tabs alike containers.
      • behavior:hyperlink – attached to all elements having href DOM attribute, including <a>.
    • date and time:
      • behavior:calendar – shows month/year/century calendar. Attached to <input type=calendar> and <widget type=calendar>.
      • behavior:date – date input with popup calendar, <input type=date>
      • behavior:time – time input <input type=time>.
    • edits:
      • behavior:edit – text input, <input type=text>;
      • behavior:password – password input, <input type=password>;
      • behavior:textarea – multiline input, <texarea>;
      • behavior:number – numbers (integer or decimal) input element, <input type=number>;
      • behavior:integer – integer number input element, <input type=integer>;
      • behavior:decimal – decimal number input element, <input type=decimal>;
      • behavior:masked-edit – masked input element, <input type="masked" mask="...">
      • behavior:slider
    • selects:
      • behavior:select – single select list, <select size=2,3,...>, <select type=select>;
      • behavior:select-multiple – multi-select list, <select size=2,3,... multiple>, <select type=select multiple>;
      • behavior:select-checkmarks – multi-select list, <select size=2,3,... multiple=checkmarks>, <select type=select multiple=checkmarks>;
      • behavior:tree – single select tree, <select type=tree>. Select with <option>s containing other <option>s;
      • behavior:tree-checkmarks – multi-select tree, <select type=tree multiple=checkmarks>;
    • menus:
      • behavior:menu-bar – menu bar;
      • behavior:menu – context/popup menu;
      • behavior:popup-menu – button with popup menu <button type="menu" menu="css selector">;
      • behavior:popup-selector – button with popup menu list, <button type="selector" menu="css selector"> ;
    • indicators:
      • behavior: progress – progress bar, <progress>, <meter> elements.
    • gestures recognition:
      • behavior:swipe – recognizes swipe gestures and generates BEHAVIOR_EVENTS::SWIPE / Event.SWIPE events.
    • frame/form:
      • behavior:frame – the behavior behind <frame>. Used for loading other documents inside elements thus to support DOM elements with "foreign" DOM sub-trees;
      • behavior:history – navigation history in system of <frame>s;
      • behavior:frame-set – that is just a handler of containers with splitters, by default attached to <frameset cols=...> and <frameset rows=...>;
      • behavior:form – the behavior behind the <form>. Form here is a "submitable/resetable" collection of input items. Note: behavior:form can be  assigned to any container. Value of the form is collection(map) of name/value pairs – names and values of input elements.

JavaScript vs Dart/Chrome vs TIScript/Sciter

February 6, 2012

Filed under: Sciter,Script — Andrew @ 8:42 pm

Here is a comparison table of JavaScript/jQuery, Dart/GoogleChrome and TIScript/Sciter:
www.terrainformatica.com/sciter/js-dart-tis.htm.

It tries to compare similar features among these three technologies.

My TIScript looks pretty good if you would ask me. Not that extreme as Dart and
close to original JavaScript while bringing needed modularity and convenience.

The document is based on synonym.dartlang.org , if someone think that there is a copyright violation – please let me know.

Just for the note: another TIScript vs JavaScript comparison is here.