Introduction
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.
HtmLayout
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 WM_NOTIFY
messages.
HtmLayout Embedding
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
<INPUT>
tags).
HtmLayout
treats <INPUT>
, <TEXTAREA>
and other "input" elements as definitions of "placeholders" for application supplied child controls and views. When parsing these tags, HtmLayout
generates WM_NOTIFY
/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>
...
</WIDGET>
(Tag WIDGET
is 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 WM_NOTIFY
form):
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 WM_NOTIFY
/HLN_CREATE_CONTROL
notification might look like this:
struct NMHL_CREATE_CONTROL
{
NMHDR hdr;
LPCWSTR type;
LPCWSTR name;
LPCWSTR id;
int tagType;
LPCSTR* attributeNames;
LPCWSTR* attributeValues;
int attributeCount;
LPCWSTR* optionNames;
LPCWSTR* optionValues;
int optionCount;
HWND outControlHwnd;
}
inline LRESULT
CHtmLayoutWindowEx::OnCreateControl
(LPNMHL_CREATE_CONTROL pnmCreateCtl)
{
int style = WS_CHILD | WS_TABSTOP | WS_VISIBLE;
if(pnmCreateCtl->type == 0 || pnmCreateCtl->type[0] == 0)
return 0;
LPCTSTR clsname = 0;
if(wcsicmp(pnmCreateCtl->type,L"treeview") == 0)
{
clsname = WC_TREEVIEW;
style | = WS_VSCROLL;
if(IsAttributeExists(pnmCreateCtl,"haslines"))
style | = TVS_HASLINES;
if(IsAttributeExists(pnmCreateCtl,"linesatroot"))
style |= TVS_LINESATROOT;
if(IsAttributeExists(pnmCreateCtl,"hasbuttons"))
style |= TVS_HASBUTTONS;
if(IsAttributeExists(pnmCreateCtl,"editlabels"))
style |= TVS_EDITLABELS;
}
HWND hWndCtl=
CreateWindowEx(WS_EX_CLIENTEDGE,
clsname,0,style,0,0,0,0,m_hWnd,0,0,0);
pnmCreateCtl->outControlHwnd = hWndCtl;
return 0;
}
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 HtmLayout
window.
The WP_HL_ACTION_GET_MIN_DOCUMENT_WIDTH
and 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: SetText
, OpenFile
, GetDocumentMinWidth
and 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.
Platforms supported
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.