HTMLayout - встраиваемый браузер разработанный компанией Terra Informatica, GUI библиотека которая использует html/css для построения интерфейса с api для различных языков программирования. Используется для создания GUI "коробочного" ПО.
Документацию немного, в основном на основном сайте.
По общему впечатлению, процесс верстки напомнил мне работу с Internet Explorer 8.
Поддерживает css 2.1, частично css3 и ряд своих css конструкций (CSSS!).
Из "+" в пику основным браузерам, поддерживает свойства, параметры связанные с настройками GUI Windows. Такие как стандартные настройки и параметры темы Windows. Ширина скрола, основной шрифт системы, цвет окон и т.п.
Отдельные особенности:
- Поддержка flow и flex-units. (Реализация их в последних версиях chrome и FFox все еще имеют различия);
- Поддержка переменных css, include html файлов;
- Встроенный в css язык сценариев! Поддерживаются обработка событий, выборка dom элементов. В целом, это оправдано тем, что тогда не придется на c++ писать логику переключения блоков верстки.
- Слабая документированность;
- Различия в обработке с основными браузерами;
- Отсутствие средств отладки.
Компенсация не работающего атрибута for
<label for="elem"><input type="checkbox" id="elem"/> awesome checkbox</label>
Чтобы он заработал, необходим небольшой css код
/* Some magic: [for] not supported by default */
[for]{
hover-on!: $1(#< self.for >):hover = true;
hover-off!: $1(#< self.for >):hover = false;
active-on!: item = $1(#< self.for >), item:checked = !item:checked;
cursor: pointer;
}
Поддержка псевдокласса :checked
#elem:checked // работает
#elem + span // работает
#elem:checked + span // уже не работает
По умолчанию click event поддерживает только тег button. Выявлено опытным путем, в документации ни слова.
button{
click!: // Do something
}
Переключение блоков на странице
Требуется примитивная логика, которая позволит переключать блоки:
<button switch-view="view1">turn on View1</button>
<div view="view1" style="display: none;">...</div>
CSS:
/* View switcher */
[switch-view]{
click!:
relView = self.switch-view,
$([view]:not([view=<relView>]))::display = "none",
$([view=<relView>])::display = "block",
;
}
Вариант реализации переключения табов
button[tab]{
click!:
relTab = self.tab,
$([tab]:not([tab=<relTab>])).class = "inst_tab-item",
$1([tab=<relTab>]).class = "inst_tab-item inst_tab-active",
$([rel-tab=<relTab>])::display = "block",
$([rel-tab]:not([rel-tab=<relTab>]))::display = "none",
;
}
где
$() - функция выборки элементов по селектору
$1() - выбирает первый элемент по указанному селектору
::display - свойство display атрибута style элемента
.class - атрибут class элемента
http://habrahabr.ru/post/154697/
http://www.terrainformatica.com/2006/08/h-smile-core-popup-and-context-menus-htmlayout-and-sciter-engines/
http://www.terrainformatica.com/2008/02/built-in-drag-and-drop-support-in-h-smile-core/
