Re: Cool FoxInCloud trick: treeview support

1. On the form we placed a container, the standard container from the FiC xxxcnt class. Since we are modifying it for HTML, we put a label in the container that says DO NOT EDIT THIS - HTML USE ONLY. We set the label visible = .f. That way future developers will not mess with it unless they make sure they know what it does.

2. In the container we put our own HTML, but did it from an external file like this:

procedure wcHTMLgen
LPARAMETERS toHTMLgen AS awHTMLGen OF awHTML.prg, tlInnerHTML && {en} awHTMLgen instance {fr} instance de awHTMLgen && [.F.] {en} render container's inner HTML {fr} Rendre l'intérieur du conteneur
xxx=FILETOSTR('inc.txt')
this.wcHTML = xxx

3. In the file inc.txt we have HTML list code with 2 tricks: a CSS class for appearance and a call to Foxincloud when the node is selected. Like this example of 2 master nodes, one of which has only one child node ane one has 2 children. Note carefully the syntax for executing a form method from the javascript:

<div id="tree1" name="tree1" class="tree1">
 <ol class="tree">
    <li class="upper">
      <label for="folder1">
        Names
      </label>
      <input type="checkbox" id="folder1" class="treecheck"/> 
      <ol>
        <li class="file">
         <a onclick="javascript:FoxInCloud.MethExec('requery','reports_scx-vmclst1','requery',1);">Name Reports</a>
        </li>
     </ol>  
    </li>
  </ol>
 <ol class="tree">
    <li class="upper">
      <label for="folder4">
        Deposits
      </label>
      <input type="checkbox" id="folder4" class="treecheck"/> 
      <ol>
        <li class="file">
         <a onclick="javascript:FoxInCloud.MethExec('requery','reports_scx-vmclst1','requery',4);">Deposit Tickets</a>
        </li>
        <li class="file">
         <a onclick="javascript:FoxInCloud.MethExec('requery','reports_scx-vmclst1','requery',5);">Deposit Reports</a>
        </li>
     </ol>  
    </li>
  </ol>
</div>

3. The CSS completes the look:

/* CSS Tree menu styles */

div.tree1 {
	height:455px;  /* 25 for bottom scroll bar */
	width:350px;
	margin-top:105px;
	margin-left:40px;
	max-height:480px;
	max-width:350px;
	overflow:scroll;
	padding:10px;
	border-color:#800000!important;
	border-width:4px!important;
	border-style:outset!important;
		background: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#CCCCCC))!important;
	background: -moz-linear-gradient(top,  #E6E6E6, #CCCCCC)!important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#CCCCCC')!important; 

}
ol.tree
{
	padding: 0 0 0 30px;
	width: 300px;
	font-size:12pt;
}
	li.upper 
	{ 
		position: relative; 
		margin-left: 15px;
		list-style: none;
	}
	li.file
	{	
		margin-left: -1px !important;
		list-style: none;
	}
		li.file a
		{
			background:url(Images/document.png) 0 0 no-repeat!important;
			color: #800000;
			padding-left: 21px;
			text-decoration: none;
			display: block;
		}
		li.file a[href *= '.pdf']	{ background: url(Images/document.png) 0 0 no-repeat!important; }
		li.file a[href *= '.html']	{ background: url(Images/document.png)0 0 no-repeat!important; }
		li.file a[href $= '.css']	{ background: url(Images/document.png) 0 0 no-repeat!important; }
		li.file a[href $= '.js']		{ background: url(Images/document.png) 0 0 no-repeat!important; }
	li input.treecheck
	{
		position: absolute;
		left: 0;
		margin-left: 0;
		opacity: 0;
		z-index: 2;
		cursor: pointer;
		height: 1em;
		width: 1em;
		top: 0;
	}
		li input + ol
		{
			background: url(images/toggle-small-expand.png) 40px 0 no-repeat!important;
			margin: -0.938em 0 0 -44px; /* 15px */
			height: 1em;
		}
		li input + ol > li { display: none; margin-left: -14px !important; padding-left: 1px; }
	li label
	{
		background: url(images/folder-horizontal.png) 15px 1px no-repeat!important;
		cursor: pointer;
		display: block;
		padding-left: 37px;
	}

	li input:checked + ol
	{
		background: url(images/toggle-small.png) 40px 5px no-repeat;
		margin: -1.25em 0 0 -44px; /* 20px */
		padding: 1.563em 0 0 80px;
		height: auto;
	}
		li input:checked + ol > li { display: block; margin: 0 0 0.125em;  /* 2px */}
		li input:checked + ol > li:last-child { margin: 0 0 0.063em; /* 1px */ }
		

4. And here we are. The noded function exactly like a treeview: