You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
417 lines
12 KiB
417 lines
12 KiB
<html>
|
|
<head>
|
|
<script language="javascript" src="../dom.js"></script>
|
|
<script language="javascript" src="../treeview.js"></script>
|
|
<script language="javascript" src="../palette.js"></script>
|
|
<script language="javascript">
|
|
var skin=parent._skin?parent._skin:"skin_standard";
|
|
var lang=parent._lang?parent._lang:"en";
|
|
|
|
initDom("../images/"+skin+"/",lang)
|
|
styleSheet()
|
|
</script>
|
|
|
|
<script language="javascript">
|
|
|
|
icons="treeicons.gif"
|
|
|
|
// Real tree view
|
|
tree = newTreeWidget("tree",200,300,icons,theAdvCB,dbClickCB,null,expandCB,collapseCB,deleteCB)
|
|
|
|
tree.setTooltipOnMouseOver(true) //force tooltip on mouse over
|
|
// tree.setHighlightPath(true);
|
|
|
|
root = newTreeWidgetElem(0, "Root element", "test", "help text")
|
|
|
|
FillFirstTree(false)
|
|
|
|
//tree view with no icon
|
|
treeNoIcon = newTreeWidget("treeNoIcon",200,300,icons,theCB,theCB,null,expandCB,collapseCB)
|
|
rootNoIcon = newTreeWidgetElem(-1, "Root element", "test", "help text")
|
|
|
|
treeNoIcon.setHighlightPath(true);
|
|
|
|
FillFirstTreeNoIcon(false)
|
|
|
|
// Icon list
|
|
iconList=newIconListWidget("iconList",200,300,icons,theCB,theCB)
|
|
iconList.setDragDrop(dragCB,acceptDropCB,dropCB)
|
|
|
|
// Build 5000 items
|
|
var buildStart=new Date
|
|
var nbItems=201
|
|
for (var j=0;j<nbItems;j++)
|
|
{
|
|
iconList.add(newTreeWidgetElem(1, "Element "+j, "test"+j, "help text",null,"tooltip text"))
|
|
|
|
}
|
|
var buildEnd=new Date
|
|
|
|
// Button for changing an item
|
|
changeBtn=newButtonWidget("changeBtn","change selection","change()")
|
|
resizeBtn=newButtonWidget("resizeBtn","resize Tree & lists","resize()")
|
|
tooltipBtn=newButtonWidget("tooltipBtn","disable tooltip on mouse over","disableTooltip()")
|
|
renameBtn=newButtonWidget("renameBtn","rename","rename()")
|
|
selectionBtn=newButtonWidget("selectionBtn","multi selection","changeSel()")
|
|
|
|
//to be improved later
|
|
searchBtn=newButtonWidget("searchBtn","search","search()")
|
|
searchTxt=newTextFieldWidget("searchTxt",null,null,null,search);
|
|
|
|
|
|
function expandCB(userData)
|
|
{
|
|
status="expandCB userData="+userData+" tree ID="+this.id
|
|
}
|
|
|
|
function collapseCB(userData)
|
|
{
|
|
status="collapseCB userData="+userData+" tree ID="+this.id
|
|
}
|
|
|
|
function theCB()
|
|
{
|
|
//alert(this.id)
|
|
|
|
if (this.id=="iconList")
|
|
status = this.getSelection().index
|
|
}
|
|
|
|
function theAdvCB()
|
|
{
|
|
//alert(this.id)
|
|
|
|
var arrSel=tree.getSelections();
|
|
var len = arrSel.length, s="";
|
|
for(var i=0;i<len;i++)
|
|
{
|
|
var elem=arrSel[i];
|
|
if(elem.isNode())
|
|
s+="node "+elem.name+"\n";
|
|
else
|
|
s+="leaf "+elem.name+"\n";
|
|
}
|
|
//if(s!="") alert(s);
|
|
}
|
|
|
|
//IMPORTANT SAMPLE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
//1 - treeView is a single selection:
|
|
//Use data to perform double click action
|
|
|
|
//2 - treeView is a multi selection:
|
|
//data will content the elem where the action is performed
|
|
//But to propagate the action to all selected items,use getSelectedItems()
|
|
|
|
function dbClickCB(data)
|
|
{
|
|
if(tree.multiSelection)
|
|
{
|
|
var arrSel =tree.getSelectedItems();
|
|
var s="";
|
|
for(var i=0; i<arrSel.length;i++)
|
|
{
|
|
//dbclick action
|
|
s+= arrSel[i].name + " ";
|
|
}
|
|
alert("dbClickCB on "+ s);
|
|
}
|
|
else
|
|
{
|
|
//dbclick action
|
|
alert("classic dbClickCB ");
|
|
}
|
|
}
|
|
|
|
function deleteCB(data)
|
|
{
|
|
if(tree.multiSelection)
|
|
{
|
|
var arrSel =tree.getSelectedItems();
|
|
var s="";
|
|
for(var i=0; i<arrSel.length;i++)
|
|
{
|
|
s+= arrSel[i].name + " ";
|
|
}
|
|
alert("delete "+ s);
|
|
}
|
|
else
|
|
{
|
|
alert(" classic deleteCB ");
|
|
}
|
|
}
|
|
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
|
|
|
function loadCB()
|
|
{
|
|
tree.init()
|
|
treeNoIcon.init()
|
|
iconList.init()
|
|
|
|
iconList.select(4)
|
|
selectionBtn.init();
|
|
selectItemButton.init();
|
|
searchBtn.init();
|
|
searchTxt.init();
|
|
}
|
|
|
|
// DELAYED CREATION OF CHILDS
|
|
|
|
|
|
_this=null
|
|
function delayedCompleteCB()
|
|
{
|
|
for (var i=0;i<50;i++)
|
|
{
|
|
_this.add(newTreeWidgetElem(1, "Dimension 1", "test", "help text",null,"tooltip Dimension"))
|
|
_this.add(newTreeWidgetElem(1, "Dimension 2", "test", "help text",null,"tooltip Dimension"))
|
|
_this.add(newTreeWidgetElem(1, "Dimension 3", "test", "help text",null,"tooltip Dimension"))
|
|
_this.add(newTreeWidgetElem(1, "Dimension 4", "test", "help text",null,"tooltip Dimension"))
|
|
}
|
|
|
|
_this.finishComplete()
|
|
|
|
}
|
|
|
|
|
|
function querycompleteCB()
|
|
{
|
|
_this=this
|
|
setTimeout("delayedCompleteCB()",1000)
|
|
}
|
|
//////////////////////////////
|
|
|
|
var sizes= new Array(200,70,400)
|
|
var idx=1
|
|
|
|
function rename()
|
|
{
|
|
var itm=tree.getSelectedItem()
|
|
if (itm)
|
|
{
|
|
itm.setEditable(true,editInPlaceCB,validEditInPlaceCB)
|
|
itm.showEditInput(true)
|
|
}
|
|
}
|
|
|
|
function resize()
|
|
{
|
|
var w=sizes[(idx++)%3]
|
|
tree.resize(w)
|
|
iconList.resize(w)
|
|
}
|
|
function change()
|
|
{
|
|
var itm=tree.getSelectedItem()
|
|
if (itm)
|
|
{
|
|
itm.change(4, "new name", null, "new help",5,"new tooltip")
|
|
itm.setGrayStyle(!itm.isGrayStyle())
|
|
}
|
|
}
|
|
function changeSel()
|
|
{
|
|
tree.setMultiSelection(true);
|
|
}
|
|
|
|
function editInPlaceCB()
|
|
{
|
|
alert("new value="+this.name)
|
|
}
|
|
|
|
function validEditInPlaceCB(text)
|
|
{
|
|
if (text=="")
|
|
{
|
|
alert("enter a non empty value!")
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
function disableTooltip()
|
|
{
|
|
tree.setTooltipOnMouseOver(false)
|
|
}
|
|
|
|
function FillFirstTree(rebuild)
|
|
{
|
|
if (rebuild)
|
|
tree.deleteAll()
|
|
|
|
tree.add(root)
|
|
root.expanded=false
|
|
|
|
for (var i=0;i<10;i++)
|
|
{
|
|
var sub1=newTreeWidgetElem(6, "Class1", "test", "help text",7,"This is a test tooltip")
|
|
/*if (i==0)
|
|
{}*/
|
|
sub1.expanded=false
|
|
|
|
root.add(sub1)
|
|
|
|
var editble=newTreeWidgetElem(1, "Edit me...", "test", "help text")
|
|
|
|
editble.setEditable(true,editInPlaceCB,validEditInPlaceCB)
|
|
root.add(editble)
|
|
|
|
root.add(newTreeWidgetElem(1, "Dimension 1", "test", "help text",null,"tooltip Dimension"))
|
|
root.add(newTreeWidgetElem(1, "Dimension 2", "test", "help text",null,"tooltip Dimension"))
|
|
root.add(newTreeWidgetElem(1, "Dimension 3", "test", "help text",null,"tooltip Dimension"))
|
|
root.add(newTreeWidgetElem(1, "Dimension 4", "test", "help text",null,"tooltip Dimension"))
|
|
|
|
|
|
if (i==2)
|
|
root.add(newTreeWidgetElem(1, "To be selected", "id 123", "help text",null,"tooltip Dimension"))
|
|
|
|
|
|
// DELAYED CREATION OF CHILDS
|
|
var w=sub1.add(newTreeWidgetElem(2, "Delayed FILL !", "test", "help text"))
|
|
w.setIncomplete(querycompleteCB)
|
|
//////////////////////////////
|
|
|
|
sub1.add(newTreeWidgetElem(2, "Mesure 2", "test", "help text",null,"tooltip mesure"))
|
|
root.add(newTreeWidgetElem(3, "Detail 1", "test", "help text",null,"tooltip detail"))
|
|
root.add(newTreeWidgetElem(3, "Detail 2", "test", "help text",null,"tooltip detail"))
|
|
|
|
var sub2=newTreeWidgetElem(6, "Class2", "test", "help text",7,"This is a test tooltip")
|
|
sub1.add(sub2);
|
|
sub2.add(newTreeWidgetElem(1, "Dimension 1", "test", "help text",null,"tooltip Dimension"))
|
|
sub2.add(newTreeWidgetElem(2, "Mesure 2", "test", "help text",null,"tooltip mesure"))
|
|
sub2.add(newTreeWidgetElem(3, "Detail 2", "test", "help text",null,"tooltip detail"))
|
|
sub2.add(newTreeWidgetElem(6, "Class2", "test", "help text",7,"This is a test tooltip"))
|
|
|
|
|
|
}
|
|
|
|
if (rebuild)
|
|
tree.rebuildHTML()
|
|
}
|
|
|
|
//tree no icons
|
|
function FillFirstTreeNoIcon(rebuild)
|
|
{
|
|
if (rebuild)
|
|
treeNoIcon.deleteAll()
|
|
|
|
treeNoIcon.add(rootNoIcon)
|
|
|
|
for (var i=0;i<3;i++)
|
|
{
|
|
var sub1=newTreeWidgetElem(6, "Class1", "test", "help text",null,"This is a test tooltip")
|
|
var sub2=newTreeWidgetElem(-1, "Class2", "test", "help text",null,"This is a test tooltip")
|
|
if (i==0)
|
|
sub1.expanded=false
|
|
|
|
rootNoIcon.add(sub1)
|
|
rootNoIcon.add(sub2)
|
|
|
|
sub1.add(newTreeWidgetElem(-1, "Dimension 1 tres tres tres tres tres long long", "test", "help text",null,"tooltip Dimension"))
|
|
sub1.add(newTreeWidgetElem(-1, "Dimension 2", "test", "help text",null,"tooltip Dimension"))
|
|
sub1.add(newTreeWidgetElem(-1, "Dimension 3", "test", "help text",null,"tooltip Dimension"))
|
|
sub1.add(newTreeWidgetElem(-1, "Dimension 4", "test", "help text",null,"tooltip Dimension"))
|
|
sub1.add(newTreeWidgetElem(-1, "Dimension 4", "test", "help text",null,"tooltip Dimension"))
|
|
|
|
sub1.add(newTreeWidgetElem(2, "Mesure 2", "test", "help text",null,"tooltip mesure"))
|
|
sub1.add(newTreeWidgetElem(3, "Detail 1 tres tres tres tres tres long long", "test", "help text",null,"tooltip detail"))
|
|
sub1.add(newTreeWidgetElem(3, "Detail 2", "test", "help text",null,"tooltip detail"))
|
|
|
|
sub2.add(newTreeWidgetElem(-1, "Dimension 1", "test", "help text",null,"tooltip Dimension"))
|
|
sub2.add(newTreeWidgetElem(-1, "Dimension 2", "test", "help text",null,"tooltip Dimension"))
|
|
sub2.add(newTreeWidgetElem(-1, "Dimension 3", "test", "help text",null,"tooltip Dimension"))
|
|
|
|
sub2.add(newTreeWidgetElem(-1, "Mesure 2", "test", "help text",null,"tooltip mesure"))
|
|
sub2.add(newTreeWidgetElem(-1, "Detail 1", "test", "help text",null,"tooltip detail"))
|
|
sub2.add(newTreeWidgetElem(-1, "Detail 2", "test", "help text",null,"tooltip detail"))
|
|
}
|
|
|
|
if (rebuild)
|
|
treeNoIcon.rebuildHTML()
|
|
|
|
}
|
|
|
|
// Icon list
|
|
|
|
|
|
function dragCB(source) // triggered when beginning D&D
|
|
{
|
|
}
|
|
|
|
function acceptDropCB (source, target, ctrl, shift) // return boolean if D&D is accepted
|
|
{
|
|
return true
|
|
}
|
|
|
|
function dropCB(source, target,ctrl, shift) // triggered when ending D&D
|
|
{
|
|
}
|
|
|
|
|
|
selectItemButton=newButtonWidget("selectItemButton","Select in the tree view","selItem()")
|
|
|
|
function selItem()
|
|
{
|
|
tree.selectByData("id 123",true)
|
|
}
|
|
|
|
function search()
|
|
{
|
|
var s = searchTxt.getValue();
|
|
//search(text,matchCase,matchWholeW,startFrom,next);
|
|
tree.search(s,false,false,null,false,notFoundCB);
|
|
}
|
|
|
|
function notFoundCB()
|
|
{
|
|
alert(searchTxt.getValue()+' not found')
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="loadCB()" onselectstart="return false">
|
|
|
|
<table width="100%"><tr><td align="center" valign="middle">
|
|
<div class="insetBorder"><div class="dialogzone" style="padding:15px">
|
|
|
|
<u><b>Tree View</b></u><br><br>
|
|
<table border="0"><tr valign="top"><td class="dialogzone">
|
|
<script language="javascript">tree.write()</script>
|
|
<br><br><a href="javascript:FillFirstTree(true)">Rewrite Tree</a>
|
|
<br><br><script language="javascript">changeBtn.write()</script>
|
|
<br><script language="javascript">resizeBtn.write()</script>
|
|
<br><script language="javascript">tooltipBtn.write()</script>
|
|
<br><script language="javascript">renameBtn.write()</script>
|
|
<br><script language="javascript">selectionBtn.write()</script>
|
|
<br><script language="javascript">selectItemButton.write()</script>
|
|
<br><script language="javascript">searchTxt.write()</script><script language="javascript">searchBtn.write()</script>
|
|
</td>
|
|
<td class="dialogzone" align="center">
|
|
<script language="javascript">
|
|
|
|
var writeHTMLStart=new Date
|
|
iconList.write()
|
|
var writeHTMLEnd=new Date
|
|
document.write("<br><b>Build a list with "+(nbItems)+ " items</b><br><br><u>Build Time:</u> <b>"+ ((buildEnd.valueOf()-buildStart.valueOf())/1000) +" s</b><br><u>Build HTML Time:</u> <b>"+((writeHTMLEnd.valueOf()-writeHTMLStart.valueOf())/1000)+" s</b>")
|
|
</script>
|
|
</td>
|
|
<td class="dialogzone" align="center">
|
|
<script language="javascript">
|
|
treeNoIcon.write()
|
|
</script>
|
|
<br><br><a href="javascript:FillFirstTreeNoIcon(true)">Rewrite Tree No Icons</a>
|
|
</td>
|
|
</tr></table>
|
|
|
|
<script language="javascript">
|
|
</script>
|
|
|
|
<br><br>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</td></tr></table>
|
|
|
|
</body>
|
|
|
|
</html>
|