Click here to Skip to main content
Click here to Skip to main content

WTL integration of Lightweight HTML layout and rendering engine

, 10 Oct 2003
Rate this:
Please Sign up or sign in to vote.
WTL integration of Lightweight HTML layout and rendering engine

Sample Image - screenshot.jpg

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:

   // CREATE_CONTROL parameters structure
  struct NMHL_CREATE_CONTROL 
  { 
      NMHDR hdr; 
      //zero terminated string, type attribute value, 
      //e.g. "text","textarea","checkbox" 
      LPCWSTR   type; 
      //zero terminated string, name attribute value 
      LPCWSTR   name;
      //zero  terminated string, id attribute value  
      LPCWSTR   id;   
      // 0-input, 1-textarea, 2-select, 3-widget 
      int            tagType;   

      //vector of pointers to attribute names (char strings) 
      LPCSTR*   attributeNames; 
      // vector of pointers to attribute values (wchar_t strings) 
      LPCWSTR*  attributeValues; 
      //<SELECT> and <WIDGET> 
      //collection of <OPTION>'s or <PARAM>'s 
      int       attributeCount; 

      // vector of pointers to param names (wchar_t strings) 
      LPCWSTR*  optionNames; 
      // vector of pointers to param values (wchar_t strings) 
      LPCWSTR*  optionValues; 
      int       optionCount; 
              
      HWND      outControlHwnd; // output, HWND of created window 
  } 
  
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; // no type attribute in this tag

    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;
        //etc... 
    }
    // ... 
    HWND hWndCtl= 
         CreateWindowEx(WS_EX_CLIENTEDGE,
                  clsname,0,style,0,0,0,0,m_hWnd,0,0,0); 
          
    // return to HtmLayout HWND of the control. 
    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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

c-smile
Founder Terra Informatica Software
Canada Canada
Andrew Fedoniouk.
 
MS in Physics and Applied Mathematics.
Designing software applications and systems since 1991.
 
W3C HTML5 Working Group, Invited Expert.
 
Terra Informatica Software, Inc.
http://terrainformatica.com

Comments and Discussions

 
GeneralRe: help,about memory leak in x64 PinmemberTangyoufox9-Mar-09 15:16 
GeneralRe: help,about memory leak in x64 Pinmemberc-smile9-Mar-09 18:12 
GeneralRe: help,about memory leak in x64 PinmemberTangyoufox9-Mar-09 18:49 
QuestionRe: help,about memory leak in x64 PinmemberTangyoufox11-Mar-09 19:57 
Hi c_smile:
 
I have test it in x64,it leaks terrible.But in x32 ,it is ok.
I have packeted my sample .Could you please give me a e_mail .And I will
send it to you.Thank you.
AnswerRe: help,about memory leak in x64 Pinmemberc-smile12-Mar-09 15:52 
QuestionRe: help,about memory leak in x64 PinmemberTangyoufox12-Mar-09 16:45 
AnswerRe: help,about memory leak in x64 Pinmemberc-smile12-Mar-09 18:06 
QuestionRe: help,about memory leak in x64 PinmemberTangyoufox12-Mar-09 18:26 
GeneralRe: help,about memory leak in x64 PinmemberTangyoufox17-Mar-09 15:18 
QuestionAbout the control of textarea PinmemberTangyoufox22-Feb-09 18:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140814.1 | Last Updated 11 Oct 2003
Article Copyright 2003 by c-smile
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid