По мотивам
http://guicci.ru/2007/10/28/htmlayout-web-20-prishel-na-desktop/Дисклаймер.Мне не доводилось работать с библиотеками UI отличными от HTMLayout, поэтому не возьмусь сравнивать HTMLayout и например QT. Есть небольшой опыт веб-разработки, поэтому кратко расскажу чем отличается HTMLayout от IE (и IWebBrowser2).
Прежде всего - верстка. HTMLayout это HTML движок с человеческим лицом (и это лицо улыбается разработчику :) )
Небольшое отступление.
Когда впервые столкнулся с задачей разработки сайта меня поразило насколько сложно сделать корректный сайт с несколькими вертикальными колонками контента - веб-разработчики пишут по этому поводу статьи (разные для обсуждения деталей двух/трехколоночной верстки), активно обсуждают, устраивают холивары на тему "верстка table vs div" и т.д. Поначалу, я воспринимал эти статьи как какой-то нелепый розыгрыш, но вскоре выяснилось, что это тяжкая реальность :). Для человека знакомого с HTMLayout подобные вопросы звучат дико. Поясню на примере:
Пример 1. Требуется сделать двухколоночную страничку. Левая колонка имеет фиксированную ширину (допустим 100px), правая - резиновая.
Код:
<html>
<head>
<style>
div { border: 1px solid black; margin: 5px; }
body { flow: horizontal; }
#left { width: 100px; height: 100%%; }
#center { width: 100%%; height: 100%%; }
</style>
</head>
<body>
<div #left >
<div #center >
</body>
</html>
Здесь используется два расширения html: style attribute flow и единица измерения %%.
flow: horizontal говорит, что мы будем укладывать потомков body не вертикально, а горизонтально. %% - определяют размер элемента в процентах от свободного места на страничке. С помощью записи width: 100%%; height: 100%%; мы отдаем элементу #center все свободное место не занятое фиксированной колонкой.
Скриншот прилагается.
http://htmlayoutlab.com/tmp/columns.example1.png
Пример 2. Требуется модифицировать предыдущий пример добавив справа еще одну фиксированную колонку.
#left { width: 100px; height: 100%%; }
#center { width: 100%%; height: 100%%; }
#right { width: 200px; height: 100%%; }
Колонка готова.
http://htmlayoutlab.com/tmp/columns.example2.png
Пример 3. Теперь мы захотели модифицировать предыдущий пример так, чтобы в центре было две резиновых колонки. Потребуется добавить одну строчку в css, одну (еще один div) в html:
#left { width: 100px; height: 100%%; }
#center1 { width: 50%%; height: 100%%; }
#center2 { width: 50%%; height: 100%%; }
#right { width: 200px; height: 100%%; }
http://htmlayoutlab.com/tmp/columns.example3.png
Детальное описание атрибута flow:
http://www.terrainformatica.com/htmlayout/flow.whtmОтдельный бонус - значения h-flow, v-flow, но о них позже.
Описание %%
http://www.terrainformatica.com/htmlayout/fspu.whtmДругая проблема верстки - создание "сложных" элементов на страничке. Например описание линка на http://www.dzone.com/links/ - каждый линк имеет пиктограмму (уменьшенный скриншот), описание, автора, кнопку для голосования, теги. Обычно, создание/переделка подобного (или более сложного) лэйаута - это борьба с таблицами или непослушными дивами. HTMLayout для сохранения значительной части нервных клеток разработчика имеет еще одно значение атрибута flow: table.
Если у Вас есть несколько минут, рекомендую глянуть
HTMLayout SDK
http://www.terrainformatica.com/htmlayout/HTMLayoutSDK.zip имеет несколько готовых примеров использования flow: table.
bin\browse.exe - стандартный браузер для просмотра тестовых примеров
html_samples\flows\grid*.htm - примеры flows
Там же можно найти примеры использования h-flow, v-flow
http://htmlayoutlab.com/tmp/flow.grid.png
http://htmlayoutlab.com/tmp/flow.grid2.png
Далее.
Каждый веб-дизайнер сталкивался с ситуацией, когда на нескольких страницах присутствуют одинаковые фрагменты кода (например меню). Оставаясь только в рамках html, мы не можем вынести дублирующийся код в отдельный файл. HTMLayout для решения такой задачи имеет тег <include>, его использование тривиально
<include src="menu.htm"> <em>Ooops! menu.htm is unavailable!</em> </include>
Дополнительный бонус - в коде приложения мы можем перехватывать загрузку файлов и изменять стандартное поведение - грузить menu.htm не с диска, а например, из ресурсов приложения, или архива, БД, генерировать файл на лету - HTMLayout не накладывает на пользователя никаких ограничений.
Далее, я тезисно перечислю другие вкусные особенности (то что помню сейчас) (описывать их подробно, сейчас просто нет времени).
- Поддержка "обычного" внешнего вида стандартных контролов. Например, background-image: url(theme:button-normal); Естественно, контролы можно стилизовать с помощью css
- Существует совершенно замечательная возможность определять собственные теги (для этого требуется добавить одну строчку в код Вашего приложения) и атрибуты css.
- Легкая разработка собственных behaviors. Это тема для отдельного и большого разговора :)
- Высокая скорость работы, малый размер библиотеки.
- Высокое качество и дружелюбность саппорта - обнаруживаемые баги обычно фиксятся в течении нескольких дней после обнаружения http://www.terrainformatica.com/htmlayout/logfile.whtm (да, баги к сожалению присутствуют - библиотека активно развивается.)
- Все это удовольствие можно использовать совершенно бесплатно http://www.terrainformatica.com/htmlayout/prices.whtm :)
- Наличие мобильной версии (http://www.terrainformatica.com/htmlayout/HTMLayoutMobileSDK.zip)
Если какие-то моменты заинтересуют более подробно, я буду рад ответить на вопросы :)
Форумы посвященные HTMLayout
Официальный
http://www.terrainformatica.com/forums/Неофициальный русскоязычный форум на рсдн
http://www.rsdn.ru/forum/group/htmlayout.aspxПримеры использованные в посте и скриншоты
http://htmlayoutlab.com/tmp/flows.zip
