Sciter 2.0.0.12

Posted on by c-smile

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.