Sciter. Part III. Do you behave well?

All < input > and < widget > elements (and their subparts) in the Sciter/HTMLayout are plain DOM elements with attached behaviors. This probably sounds not too much spectacular but, trust me, this, as a system, is extremely useful.

As a rule behavior as an entity is some class or collection of functions defining guess what? correct – behavior of DOM element – how it reacts on UI events. Main purpose of the behavior is to change state of the element while handling UI events. By changing state registers of the elements behaviors allow CSS engine to style them declaratively. So for example: li:expand > .details { display:block; transition:slide } will make items in your list expandable. You just need to define proper behavior for your list like ul { behavior:expandable-list; }. Image on the right is a screenshot of that expandable-list in action.

As I said before all built-in input elements in Sciter implemented as behaviors. While loading HTML document engine styles shape and behavior of elements by using Master style sheet.

By using cascading of styles you can redefine look-n-feel (literally) of all elements. As an example of why you would need this consider following task: there is no such thing as < button type='checkbox' >some caption here< /button> by defult in HTML. But you need it! Standard CHECKBOX in Windows for example has clickable caption erea. And your customers will expect such behavior. So in Sciter you will define button[type=”checkbox”] { behavior:checkbox; … } plus bunch of state styles and you will have checkbox button visually styled as a standard system one or as a product of cauchemar of your graphical designer. And by the way, you can change its style on the fly by changing, say, value of some attribute and use the value of such attribute in CSS selectors for such elements.

Sciter. Part II. Hey, where is my old tape recoder?!

Pure HTML on the screen is a sequence of blocks spanning full width of the window (a.k.a. view) and stacked one by one forming “tape” of blocks. Tape as a geometrical surface has only one fixed dimension – width. Length of the tape is unknown at the moment of loading of HTML document. That is why there is no such thing as height=”100%” attribute/value in HTML specification. At all. By design. Nothing to calculate percentage from.

As a consequence: there is no vertical alignment of content in standard html (execept of table cell content but this is separate story) .CSS follows this path too. Yes, it defines such things as height:100% but be careful – sometimes height:XX% there means XX% from the width of the element it applied. In other cases trying to define something as { height:100%; padding:10px; } will give you effects not exactly you wanted. Have you ever seen in stylesheets something like height:99%? I bet – you did. Do you think author wanted element to be exactly 99%? I am pretty sure – no.

In many UI design cases you do need to say: I want this element (panel, block, etc.) to span the whole available height of the form/window/view. Take a look on the window of your favorite browser as an example. Can you define its window layout in HTML? … And hey! Don’t touch < table >s !!! They are designed for tabular data representation only (as they say). Anyway you cannot use such thing as < table height="100%" > in standard HTML. Well, you could of course give it a try but nobody will tell you what this height=100% means. 100% from what? Not defined, non-standard – not reliable to use.
Continue reading “Sciter. Part II. Hey, where is my old tape recoder?!”

Sciter. Part I. So what is the Sciter anyway?

Hard to say… Sciter is an Offline Web Application Client (I can feel smell of tautology in Offline Web). In other words it is Excution Environment for Occassionally Connected Web Applications. (Last definition is significantly better, isn’t it?)

And here goes the same as above but in plain English (or in what I assume is English) language:

You may think about the Sciter as a Web client application (some smart people use name User Agent – UA) of special kind. “Special” here means that Sciter as a web client is capable to work in offline (disconnected) mode too. What’s the deal you will ask? Everyone can click on icon of his/her favorite UA and browse pages stored on his/her local drive. But… this is pretty much all of what you can do with standard UA. Not too much, isn’t it?

Continue reading “Sciter. Part I. So what is the Sciter anyway?”