It is very natural that in the Internet era, more and more applications are getting "Web Style" HTML alike user interfaces. HTML pictorial graphic UI attracts users and gives them an impression of lightness and easiness of tasks they need to accomplish using the software.
Let us think about HTML as not only a way to describe screen layout with active (hyperlinks) areas and embedded resources but rather a modern application design and management methodology.
Using the proposed Lightweight Embeddable HTML Layout Engine, the following tasks could be achieved in a very convenient way:
- Create applications with a "Web style" user interface.
- Separate presentation layer from user interaction logic in complex applications.
- Create "skinable" user interfaces.
- Design applications with the support of several UI languages. As a rule, each language (or locale) has its own requirement for screen layout, since the same phrase (e.g. input field caption) could have different length in different languages. Using different HTML resources for different languages could help you keep the international issues manageable.
- Create resizable screen layouts and manage complex input forms. HTML engine may play a role of an ultimate layout manager as it does all functionality which could be found in java.awt.*Layout classes.
- Design database driven applications where all needed resources to visualize objects are stored as HTML in the same database.
- Create embedded help systems, etc.
This article describes how to use
HtmLayout engine in your WTL projects.
Terra Informatica HtmLayout Engine is a native Windows™ window class which resides in HtmLayout.DLL (about 400K). Native here means that it uses pure Windows API calls and no other integration technologies like COM/ActiveX or .NET.
HtmLayout engine interacts with the hosting application through
You may think about
HtmLayout window as an intelligent container which does two main tasks:
- Rendering of loaded HTML
- Laying out of child controls (defined by HTML's
<TEXTAREA> and other "input" elements as definitions of "placeholders" for application supplied child controls and views. When parsing these tags,
HLN_CREATE_CONTROL "events". Application itself can create child windows interpreting collection of tag's attribute values and optional
<PARAM>s provided by
HtmLayout. Thus, it is possible to define any custom control of your choice in HTML:
<P>Name to search:<INPUT id=32103
name=TextToSearch type=text width=100% minwidth=40>
or select item from here:</P>
<WIDGET id=32104 name=ItemToPick type=treeview haslines linesatroot
hasbuttons width=100% height=100% minheight=40>
<PARAM name=fruits value=0>
<PARAM name=fruits/apples value=1>
<PARAM name=fruits/oranges value=2>
<PARAM name=fruits/cherries value=3>
<PARAM name=vegetables value=0>
HtmLayout's counterpart of
APPLET tag in HTML).
HtmLayout events (notification messages)
While loading HTML text,
HtmLayout will raise two types of events - (send notification messages in
HLN_CREATE_CONTROL - a request to the host to create a control
HLN_LOAD_DATA - a request to the host to load images referred by the HTML text. The application can load picture from resources or other storage such as a database.
HtmLayout can also load data from local file system or from the Internet.
If the source HTML contains hyperlinks,
HtmLayout will send
HLN_HYPERLINK notifications when mouse cursor enters, leaves, or the left button is clicked on the hyperlinked areas.
The code for handling the creation of controls in response to
HLN_CREATE_CONTROL notification might look like this:
// CREATE_CONTROL parameters structure
//zero terminated string, type attribute value,
//zero terminated string, name attribute value
//zero terminated string, id attribute value
// 0-input, 1-textarea, 2-select, 3-widget
//vector of pointers to attribute names (char strings)
// vector of pointers to attribute values (wchar_t strings)
//<SELECT> and <WIDGET>
//collection of <OPTION>'s or <PARAM>'s
// vector of pointers to param names (wchar_t strings)
// vector of pointers to param values (wchar_t strings)
HWND outControlHwnd; // output, HWND of created window
int style = WS_CHILD | WS_TABSTOP | WS_VISIBLE;
if(pnmCreateCtl->type == 0 || pnmCreateCtl->type == 0)
return 0; // no type attribute in this tag
LPCTSTR clsname = 0;
if(wcsicmp(pnmCreateCtl->type,L"treeview") == 0)
clsname = WC_TREEVIEW;
style | = WS_VSCROLL;
style | = TVS_HASLINES;
style |= TVS_LINESATROOT;
style |= TVS_HASBUTTONS;
style |= TVS_EDITLABELS;
// return to HtmLayout HWND of the control.
pnmCreateCtl->outControlHwnd = hWndCtl;
HtmLayout methods (messages)
Host applications can use either
WP_HL_ACTION_LOAD_HTML (from text buffer) or
WP_HL_ACTION_OPEN_FILE (from file) "methods" to load HTML text into
WP_HL_ACTION_GET_MIN_DOCUMENT_HEIGHT (for given width) methods allow the application to get information about dimensions of the loaded document.
All these "methods" are activated by a simple call of:
::SendMessage(hWnd, WM_HL_ACTION, WPARAM(WP_HL_ACTION_action_code), LPARAM(action_params))
or by a call of:
GetDocumentMinHeight functions of the WTL wrapper class provided by HtmLayout SDK.
More details of
HtmLayout embedding principles could be found here: HtmLayout API and embedding principles.
The sources of WTL wrapper and demo application are in samples/WTL of HtmLayout SDK distribution.
HtmLayout markup flavor
HtmLayout markup language is pretty much HTML 3.2. It was extended to make it more suitable for screen layouts limited not only by the width, but also by the height of the view. Also, there are some enhancements to support "expandable" and gradient-filled backgrounds.
HtmLayout supports GIFs, JPEGs and PNG with alpha channel (transparency).
More details about
HtmLayout markup could be found here: HtmLayout markup language.
HtmLayout.DLL is available for all existing Windows platforms including Windows Mobile and is free to use in free applications (those which distributed freely and are not bringing income in any form).
In addition to WTL wrapper,
HtmLayout SDK includes sources of wrappers for MFC, .NET (C#) and ActiveX (VB).
For details and latest updates visit, HtmLayout home.