homehtmlayouttags

HTMLayout specific tags

<include>, <widget> and <popup>

HTMLayout understands following non-standard tags:

<include>

This tag allows to include html fragments into base document. HTMLayout supports two forms of the tag:

<include src="url-of-the-fragment-html-text" /> and

<include src="url-of-the-fragment-html-text" >
 alternative markup
</include>

First form (emty element tag) replaces tag itself with the content of the document fragment pointed by the src attribute.

The second form does the same but also allows to define alternative content for the case when requested document fragment is unavailable. Example:

doument-base.html :

<html><body>
Sample of compound document.
<include src="document-fragment.html">
    <em>Ooops! document-fragment.html is unavailable!</em>
</include>
</body></html>

And content of the document-fragment.html:

<p>This is fragment of the document.</p>
<p>And this is second paragraph of the fragment</p>

While being loaded such document will be assembled and rendered as:

<html><body>
Sample of compound document.
<p>This is fragment of the document.</p>
<p>And this is second paragraph of the fragment</p>
</body></html>

And if document-fragment.html will be unavailable assembly will look like:

<html><body>
Sample of compound document.
      <em>Ooops! document-fragment.html is unavailable!</em>
</body></html>

Relative path resolution in fragments:

Values of all relative path attributes like href or src and URLs in inline styles will be resolved against base document URL and not fragment location itself. Consider base and fragment documents as a single document but splitted into multiple parts.

<widget>

<widget> is a block equivalent of inline <input> and <select> tags. By HTML specification <input> elements can appear only in text containers. If some element defined as immediate child of let's say <td> then engine will create anonymous text container for it. Sometimes such behavior is not desirable. For example height of such inline block element defined in percentage units will be calculated against height of this anonymous text conatiner and not the <td>. When you need vertically expandable input elements e.g. <select> or <textarea> use <widget> element. Good analog for <input> is <img> element (it is also inline block) and analog of <widget> is <div>.

Widget has exactly same set of attributes as <input> element. The only difference is in its extended set of values of type attribute. Beside of standard values (input element types) like text, checkbox, radio, etc. type also accepts following values:

  • <widget type="select"> - select block element;
  • <widget type="dropdown-select"> - dropdown select block element;
  • <widget type="textarea"> - textarea block element;
  • <widget type="htmlarea"> - htmlarea block element.
<widget> must be closed by tail </widget> tag.

<popup>

<popup> is a block element (like <div>) and defines popup elements in the document. Normally popups are invisible. One of main purpose of the <popup> element is to provide html formatted tooltips. For example following fragment:

<p titleid="my-html-title">Place mouse here to see html popup</p>
<popup id="my-html-title">
 This is an <em>example</em><br/>
 of html tooltip
</popup>

HTMLayout

HTMLayout distribution is not available. Use Sciter Engine instead.