HTML5 Working Drafts have been published today:

March 4, 2010

Filed under: Web Application Techologies — Andrew @ 6:40 pm

HTML5
HTML+RDFa
HTML Microdata
HTML Canvas 2D Context
HTML5 differences from HTML4
HTML: The Markup Language

Printing support in Sciter.

February 19, 2010

Filed under: Sciter, Web Application Techologies — Andrew @ 11:51 pm

Sciter is getting print and print preview support. At the moment architecture and core functionality is established. Here is a screenshot of one of test pages demonstrating print preview:

Print preview widget

Print preview widget

Print preview is implemented as a native behavior that by default is assigned to any <frame type="pager"> element. Print Preview by its nature is a frame containing other document, that is why <frame> is used. The <frame> element may contain page-template="page.htm" DOM attribute that contains URL of so called page template document.

Here is an example of such page template.

<html>
  <head>
    <title></title>
    <style>
          frame#content-box  { size:*; }
          text#header { border-bottom: 1px solid gray; }
          text#footer { border-top: 1px solid gray; }

          :root[page-parity=odd] text#footer  { text-align:left; }
          :root[page-parity=even] text#footer { text-align:right; }
          :root[page-parity=odd] frame#content-box
          {
            margin-left:10pt;
                margin-right:20pt;
          }
          :root[page-parity=even] frame#content-box
          {
            margin-left:20pt;
                margin-right:10pt;
          }
        </style>
  </head>
<body>
  <text #header>Header....</text>
  <frame #content-box />
  <text #footer>Page <span #page-no /></text>
</body>
</html>

<frame #content-box /> here defines area where source document will be printed. Such page template may contain arbitrary markup and styles and is accessible/modifiable by script on the host page.
It is possible to style the template for even/odd pages, even for the page with particular number.

Print Preview Schema

Print Preview Schema

Multi-return and multi-assignment in TIScript.

October 31, 2009

Filed under: Sciter, Script, Web Application Techologies — Andrew @ 11:42 pm

As we know parameters of functions are passed by value in languages like TIScript and JavaScript. Inside the function we can modify paramaters and their new values will not be seen outside the function.

Let’s say we need to implement function expand(rect, dx, dy) : rect that should increase dimensions of the rectangle.

If the rect is an object then we will write something like this:

function expand(rect, dx, dy)
{
   return {
     x: rect.x - dx,
     y: rect.y - dy,
     w: rect.w + 2*dx,
     h: rect.h + 2*dy };
}

Problem with this implementation: it allocates brand new object on each call. That is not desirable if the function is used frequently.

If TIScript would support pass-by-reference for parameters then this function will have signature like this: inset(&x, &y, &w, &h, dx, dy) but no such thing as pass-by-reference in JS and TIScript for many good reasons.

As a solution: in TIScript we can use so called multi-return and multi-assignment feature – function is allowed to return multiple values.

Using this feature we can rewrite our function as:

function expand( x, y, w, h , dx, dy)
{
   return ( rect.x - dx, rect.y - dy, rect.w + 2*dx, rect.h + 2*dy );
          // returns "list" or tuple if you wish of four values.
}

To call such function and to get multiple values from it we will use list of values as an l-value expression:

var x = 10, y = 10, w = 100, h = 100;
(x,y,w,h) = expand(x,y,w,h, 20, 20 );

Parameters and return values are passed using stack of the VM so this will not create additional payload for the heap manager.

And yet it is pretty convenient for other cases too. For example this:

var a = 10, b = 5;
(a,b) = (b,a);

is how you can swap values of two variables.

Small feature but quite usefull.

Main challenge was to plug value lists into existing syntax of JavaScript. Implementation is quite simple.

Achtung, minen!

July 11, 2009

Filed under: Script, Web Application Techologies — Andrew @ 11:20 pm

One more “cool” thing about JS: 

somevar = 100;

      function test()
      {
        somevar = 1;
        return somevar;
        if(false) { var somevar; }
      }

      alert(test());
      alert(somevar);

Try to guess first what these two alert()s will output in JS.

You did?

Then try to see this code running alive: js-mine.

That is what Web2 is supposed to be based on… Huh?

[update] Here is a link on Doug’s Crockford talk at Google about JS.

Doug Crockford is behind JSON spec and ECMAScript 3.1.

Probably Doug’s speech may explain why I decided to go with TIScript rather than implementing JS as it is.

CSS Flexible Flow Module

April 10, 2009

Filed under: HTML and CSS, Web Application Techologies — Andrew @ 6:05 pm

We have published official proposal about ‘flow’ and flex units used in h-smile core:
CSS Flexible Flow Module

With the hope that the Web will benefit from them.

UI programming you said?

December 2, 2008

Filed under: Philosophy, Sciter, Script, Web Application Techologies — Andrew @ 11:13 pm

Usually business applications are split in three tiers: user interface layer (UI), business logic layer (BLL) and data access layer (DAL). That split is also known as Model-view-controller architectural pattern.

Ideally each layer should be isolated from the rest. For many good reasons. In any case each layer operates using its own vocabulary (namespace if you wish). For example “Account” in UI means some set of fields (<fieldset> literally). In BLL it is an instance of some class with attributes and methods describing logic. And in DAL it could be just a record in DB with associated triggers and stored procedures.

Code that works on each layer(domain) is serving different tasks. Ideally each such layer may require different programming languages that are optimal for each particular layer. E.g. DB layer as a rule uses TSQL as it better suits DB manipulation needs.

The same thing is about UI. Usually UI tasks are just sequence of rules like “if user clicks here than enable that thing over there”. Such tasks may or may not be handled equally well by universal languages like C++.

Ideally UI layer should have its own language that is better suitable for UI needs. In the same way as DB has its own language (couple of them actually: DB schema definition language and transaction definition language).

Consider following task: you have toolbar with “save” button and two widgets that do different things in onSave() methods. In C++/htmlayout you would need to create separate dispatcher that knows about “current” element and reroutes “save” button clicks to different widgets. That will require separate external entity for these two widgets.

And in Sciter you would write this as:

class MyWidget: Behavior
{
  function onFocus()
  {
    var me = this;
    // bind toolbar buttons to this widget methods:
    self.$("button#save").onClick = function() { me.doSave(); }
    self.$("button#new").onClick = function() { me.doNew(); }
    self.$("button#open").onClick = function() { me.doOpen(); }
  }
  function doSave() { ... }
}

when MyWidget gets focus the code in onFocus() replaces onClick event handlers of the toolbar buttons by new functions like function() { me.doSave(); } that will call methods of this particular widget.

You can simulate things like this in C++ of course but it will be significantly more complex. Try to imagine how you would do this in WTL or MFC or any other GUI toolkit. Less code – less errors and so on.

After many years of designing various UI and UI toolkits I shall admit that UI automation/programming is not quite OOP task in general. Usually it is better describable in terms of something close to functional programming but with the ability to define classes/objects.

UI is an assembly of sometimes very different UI components/controls. That requires language that is flexible enough to glue them together. That is my vision on TIScript in Sciter.

And of course markup and CSS are also Good Things for the UI. Especially CSS.

Next Page »