homehtmlayoutscreenshots

Skinned windows:

Builtin drag-n-drop support:

HTMLayout has so called Graphin API - AGG based 2d graphics engine. Here is an example of how dynamic chart rendering can be implemented. Note transparency and antialiasing.

How things like Microsoft Visual Studio StartPage can be implemented in HTMLayout (sdk/html_samples/MSVS-start-page/ sample)

Dynamic effects: fisheye

SVG:

behavior:calender - <input type="calendar" />
behavior:date - <input type="date" />
behavior:masked - <input type="masked" />

Transparent popups and windows:

Support of behavior:slider and <input type="hslider" value=x min=y max=z> / <input type="vslider" value=x min=y max=z>.
Behavior slider supports buddy attribute which defines id of element to update when value will change. As always, style of such elements can be customized by CSS.

behavior:progress and <input type="progress" value=x max=y>. Progress can be styled by CSS in various ways.

position:absolute/fixed support.

This is an example of pure CSS popup menus in HTMLayout:

Support of scrollable <table>s and text-overflow:ellipsis.

overflow:auto combined with <table fixedrows="1"> allows to view information in grid mode:

Version of HTMLayout for Windows CE 5.0 (real-time OS for embeddable devices)

"Live" behavior sample, behaviors can draw on HTML canvas now. Here is behavior_clock.cpp in action. Face and glass are styled through CSS. Windows Desktop and Windows Mobile 5.0 screenshots.

Animation effects in HTMLayout.

transition:slide:

Famous Outlook bar but now in HTML/CSS. Panel are sliding with animation. Clocks are alive. Panels can have any content including child controls.

transition:blend, each "led" on the screen is an <img> defined as:

img:hover {  foreground-image:url(led-red.png);  transition: blend;  }

This screenshot taken when mouse is moving over row of such <img>:

And one more screenshot here.

Support of formatted titles (tooltips). Beside of title attribute HTMLayout supports also titleid attribute. Titleid is an ID of some other element in the document serving as tooltip definition. This allows to define tooltips with full power of HTML and CSS.

Tabs behavior demo, OS theme style:

OS Theme support in new version of HTMLayout - Pandora. All OS specific shapes are available in CSS through special URLs like url(theme:name-of-the-part-and-state).
Here is a screenshot of /sdk/html_samples/css-plus/theme-images.htm loaded in the demo browser.

This is various types of <select>s. As you may see <select> supports also hiearchical items (tree view):

Popup/Dropdown behavior demo: (see sdk/html_samples/behaviors/colorpopup.htm)

Another example: popup combo box with complex layout.

Tabs behavior demo:

Prototype of real application. Web UI / Inductive UI style.

Browser.exe (SDK demo application) shows gradient backgrounds defined by CSS and various overflow effects:

Extended background image filling styles:

Standard Windows controls hosting and <FIELDSET>/<LABEL> elements rendering:

Dynamic effects using C++ HTML behaviors. For example collapsible trees:

HTML editor UI defined as HTML resource:

This site shown in Browser.exe demo application (50% of original size):

You may see all these documents alive, just download HTMlayout demo.

HTMLayout

Download

Documentation

Screenshots!

HTMLayout Wrappers