Sciter article on CodeProject

January 7, 2015

Filed under: How-to,Sciter — Andrew @ 10:30 am

Sciter clock

I’ve published Sciter technology introduction article on CodeProject with the brief description of samples included in SDK.

Sciter-XGL

December 16, 2014

Filed under: Sciter — Andrew @ 10:00 pm

Thinking about making so called sciter-xgl – smaller version of the Sciter but with OpenGL backend and with slightly reduced feature set. Targeted on games and the like use cases. And with broader platform support including all mobiles I can put my hands on.

Thinking…

Linux version is coming

December 10, 2014

Filed under: Sciter — Andrew @ 3:21 pm

Actually it is not about Linux only but any POSIX compatible system that is capable to run GTK 3.0 and above.

Sciter on Ubuntu Linux

Sciter on Ubuntu Linux

50 million PCs are running Sciter or HTMLayout code.

December 2, 2014

Filed under: HTMLayout,Philosophy,Sciter — Andrew @ 6:43 pm

pc-crowd

Quite conservative estimation of number of PCs and Mac’s running either Sciter or HTMLayout code is 50 million worldwide so far.

Thanks to Sciter/HTMLayout customers and their great applications.

UPDATE: I’ve been told that at least one of companies from the list has 90 million registered users. So the total number is way above 100 mln computers.

display:none is considered harmful

October 28, 2014

Filed under: HTML and CSS,Sciter,Script,Web Application Techologies — Andrew @ 7:51 pm

Quite often in HTML/CSS based UIs we need to hide/show some elements in runtime.

Probably the most widespread (and the worst) solution is to set display:none CSS property programmatically.

That sounds quite easy at the first glance but solves only half of the problem – it hides – removes the element from rendering tree. But what you would do when you need to show element that was previously hidden that way? Setting it to display:block is very wrong. Far not all elements have display:block model by default in HTML.  <img>, <input>, <select>, <textarea>, etc are display:inline-block. <table> and all its children have special display:table**** values. Setting them to display:block will lead you to quite surprising results.

Therefore in order to use display:none in runtime you will need to know original display value of the element. Not quite convenient and maintainable. Imagine that your web designer (probably sitting on other continent) decided to replace some elements horizontally by declaring display: table-cell on them. You will get problems hiding/showing such elements by switching display: none <-> block.

To overcome such a problem jQuery for example implements its hide() method by storing existing display value to special property named "olddisplay". And restores the display from that property when you need to show the element. That approach is far from ideal either for obvious reasons.

Better solution

Better solution is to use attribute "hidden". So instead of setting element.style.display CSS property you will need to add attribute "hidden" to the element when you need to hide it and remove that attribute when you will want to show the element. In order this to work you will need to add single and simple rule to your stylesheet:

[hidden] { display:none !important; }

If some elements need to be hidden by default you will use hidden attribute in your markup, for example as:

<button id="ok-button" hidden>OK</button>

In Sciter you can define some virtual property, e.g. "shown", to all DOM elements (in some common "utilities" module):

/* CSS must have [hidden] { display:none } rule in order this to work */
property Element.shown(v) 
{
  get return this.style#display != "none";
  set this.attributes["hidden"] = v ? undefined : true;
}

and use it as

var someEl = ...

someEl.shown = true; // to show
someEl.shown = false; // to hide

The solution is not free from obvious drawbacks though:

  1. you need that special [hidden] { display:none; } rule to be present in your CSS and
  2. In all cases when you need to hide/show the element you should do it either through that special "shown" property or explicitly by removing "hidden" attribute from the element.

visibility:none

Since Sciter version 3.1.0.15 you can use visibility:none; in CSS to exclude the element from rendering. Exactly in the same way as display:none;. It has exactly the same effect.

As the visibility property is orthogonal to the dsiplay you can safely assign "none" and "visible" property to it without affecting display model of the element.

Therefore, the visibility property in Sciter can accept following values:

  • none – the element is excluded from rendering tree in the same way as display:none, that is Sciter specific;
  • hidden – the element is in rendering tree, takes space but not rendered;
  • collapse – the element is in rendering tree, takes space but its height or width is collapsed to zero. E.g. in flow:horizontal container visibility:collapse child will take space vertically but rendering width will be set to zero. In Sciter this will work for any elements but in standard CSS only for table rows for some unknown to me reason.
  • visible – default value, element is rendered normally.

And here is modified version of the shown scripting property defined above:

property Element.shown(v) 
{
  get return this.isVisible;
  set this.style#visibility = v ? "visible" : "none";
} 

Context menus in Sciter

September 27, 2014

Filed under: How-to,HTML and CSS,Sciter — Andrew @ 1:57 pm

Context menu is a standard UI feature and in order to support them Sciter has following mechanisms on board:

  1. custom CSS property named context-menu. It defines location of DOM element ( usually it is one of <menu class=context> ) that will appear on context menu activation.
  2. Menu behaviors and their DOM events associated with menus.
  3. Context menu activation and initialization mechanism.

(more…)

« Previous PageNext Page »