Dynamic Treeview using HTMLViewer in Custom Dialog

[Grovkillen]

Hi,

I have made this example how to display a dynamic treeview in a custom dialog. It is possible to have clickable links to text files and images. Note that these will be open within the dialog (not possible to open external files, to bad...).

The example is inspired by the work of Geir Landrö and you need to download those icons aswell as the FamFamFam icon set to be able to use the icons to build the tree structure.

Example script:

Code: Select all

Dialog>Dialog1
object Dialog1: TForm
  Left = -1387
  Top = 280
  HelpContext = 5000
  BorderIcons = [biSystemMenu]
  Caption = 'CustomDialog'
  ClientHeight = 681
  ClientWidth = 1164
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -14
  Font.Name = 'MS Sans Serif'
  Font.Style = []
  OldCreateOrder = True
  ShowHint = True
  OnTaskBar = False
  PixelsPerInch = 120
  TextHeight = 16
  object MSHTMLViewer1: tMSHTMLViewer
    Left = 10
    Top = 8
    Width = 1143
    Height = 665
    TabOrder = 8
    BorderStyle = htFocused
    DefFontName = 'Times New Roman'
    DefPreFontName = 'Courier New'
    HistoryMaxCount = 0
    NoSelect = False
    PrintMarginBottom = 2.000000000000000000
    PrintMarginLeft = 2.000000000000000000
    PrintMarginRight = 2.000000000000000000
    PrintMarginTop = 2.000000000000000000
    PrintScale = 1.000000000000000000
  end
end
EndDialog>Dialog1
//Set IGNORESPACES to 1 to force script interpreter to ignore spaces.
//If using IGNORESPACES quote strings in {" ... "}
//Let>IGNORESPACES=1

ReadFile>%SCRIPT_DIR%\HTML.txt,HTML_VAR
SetDialogProperty>Dialog1,MSHTMLViewer1,HTML,%HTML_VAR%
Show>Dialog1,r

Save this as "HTML.txt" in the script folder...

Code: Select all

<div style="font-family:verdana; font-size:12px; line-height: 0.9">
<div><img src="img/base.gif">Start</div>
<div><img src="img/join.gif"><img src="img/folder.gif"><a>Node 1</a></div>
<div><img src="img/line.gif"><img src="img/join.gif"><img src="img/folder.gif"><a>Node 1.1</a></div>
<div><img src="img/line.gif"><img src="img/line.gif"><img src="img/joinbottom.gif"><img src="img/folder.gif"><a href="HTML.txt">Node 1.1.1 clickable link</a></div>
<div><img src="img/line.gif"><img src="img/line.gif"><img src="img/empty.gif"><img src="img/joinbottom.gif"><img src="img/page.gif"><a >Node 1.1.1.1</a></div>
<div><img src="img/line.gif"><img src="img/joinbottom.gif"><img src="img/page.gif"><a>Node 1.2</a></div>
<div><img src="img/join.gif"><img src="img/page.gif"><a>Node 2</a></div>
<div><img src="img/join.gif"><img src="img/page.gif"><a>Node 3</a></div>
<div><img src="img/join.gif"><img src="img/page.gif"><a>Node 4</a></div>
<div><img src="img/join.gif"><img src="img/folder.gif"><a>Folder 2</a></div>
<div><img src="img/line.gif"><img src="img/join.gif"><img src="img/page.gif"><a>File 1</a></div>
<div><img src="img/line.gif"><img src="img/joinbottom.gif"><img src="img/page.gif"><a>File 2</a></div>
<div><img src="img/joinbottom.gif"><img src="FamFamFam/user_add.png"> Other icon</div>
</div>

I'm planning to do a script that makes the html code but that is for later.. you need to see this as inspiration of what you may do with the "htmlviewer" object in custom dialogs.

Preview:



This code will work in Chrome and IE but it is not displaying the lines in HTMLViewer, if it did it would be a simple tree without the use of icons. (Copy this code and save it as a .html file and open it in any web browser).

Code: Select all

<style>.clt, .clt ul, .clt li {
     position: relative;
}

.clt ul {
    list-style: none;
    padding-left: 32px;
}

.clt li::before, .clt li::after {
    content: "";
    position: absolute;
    left: -12px;
}

.clt li::before {
    border-top: 1px solid #000;
    top: 9px;
    width: 8px;
    height: 0;
}

.clt li::after {
    border-left: 1px solid #000;
    height: 100%;
    width: 0px;
    top: 1px;

}

.clt ul > li:last-child::after {
    height: 8px;
}
</style>
<div class="clt">
  <ul>
    <li>
      Fruit
      <ul>
        <li>
          Red
          <ul>
            <li>Cherry</li>
            <li>Strawberry</li>
          </ul>
        </li>
        <li>
          Yellow
          <ul>
            <li>Banana</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      Meat
      <ul>
        <li>Beef</li>
        <li>Pork</li>
      </ul>
    </li>
  </ul>
 </div>

And it would look something like this...


PS. other way of writing the structure (maybe easier to programmatically do?):

Code: Select all

<div class="clt">
<ul>
<li>Fruit<ul>
<li>Red<ul>
<li>Cherry</li>
<li>Strawberry</li>
</ul></li>
<li>Yellow<ul>
<li>Banana</li>
</ul></li>
</ul></li>
<li>Meat<ul>
<li>Beef</li>
<li>Pork</li>
</ul></li>
</ul>
</div>