forked from extern/egroupware
310 lines
12 KiB
HTML
310 lines
12 KiB
HTML
<html xmlns:v="urn:schemas-microsoft-com:vml"
|
||
xmlns:o="urn:schemas-microsoft-com:office:office"
|
||
xmlns:w="urn:schemas-microsoft-com:office:word"
|
||
xmlns="http://www.w3.org/TR/REC-html40">
|
||
|
||
<head>
|
||
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
|
||
<meta name=ProgId content=Word.Document>
|
||
<meta name=Generator content="Microsoft Word 11">
|
||
<meta name=Originator content="Microsoft Word 11">
|
||
<link rel=File-List href="Dynamical%20loading_files/filelist.xml">
|
||
<link rel=Edit-Time-Data href="Dynamical%20loading_files/editdata.mso">
|
||
<title>Dynamical loading means loading data on request</title>
|
||
|
||
<style>
|
||
<!--
|
||
/* Style Definitions */
|
||
p.MsoNormal, li.MsoNormal, div.MsoNormal
|
||
{mso-style-parent:"";
|
||
margin:0in;
|
||
margin-bottom:.0001pt;
|
||
mso-pagination:widow-orphan;
|
||
font-size:12.0pt;
|
||
font-family:"Times New Roman";
|
||
mso-fareast-font-family:"Times New Roman";}
|
||
a:link, span.MsoHyperlink
|
||
{color:blue;
|
||
text-decoration:underline;
|
||
text-underline:single;}
|
||
a:visited, span.MsoHyperlinkFollowed
|
||
{color:purple;
|
||
text-decoration:underline;
|
||
text-underline:single;}
|
||
span.GramE
|
||
{mso-style-name:"";
|
||
mso-gram-e:yes;}
|
||
@page Section1
|
||
{size:595.3pt 841.9pt;
|
||
margin:56.7pt 42.5pt 56.7pt 85.05pt;
|
||
mso-header-margin:.5in;
|
||
mso-footer-margin:.5in;
|
||
mso-paper-source:0;}
|
||
div.Section1
|
||
{page:Section1;}
|
||
/* List Definitions */
|
||
@list l0
|
||
{mso-list-id:483744830;
|
||
mso-list-template-ids:435879032;
|
||
mso-list-style-name:"Current List2";}
|
||
@list l0:level1
|
||
{mso-level-tab-stop:.5in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;
|
||
mso-ansi-font-size:12.0pt;
|
||
mso-bidi-font-size:12.0pt;
|
||
mso-ascii-font-family:Arial;
|
||
mso-hansi-font-family:Arial;
|
||
color:blue;
|
||
mso-ansi-font-weight:bold;}
|
||
@list l0:level2
|
||
{mso-level-number-format:alpha-lower;
|
||
mso-level-tab-stop:1.0in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l0:level3
|
||
{mso-level-number-format:roman-lower;
|
||
mso-level-tab-stop:1.5in;
|
||
mso-level-number-position:right;
|
||
text-indent:-9.0pt;}
|
||
@list l0:level4
|
||
{mso-level-tab-stop:2.0in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l0:level5
|
||
{mso-level-number-format:alpha-lower;
|
||
mso-level-tab-stop:2.5in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l0:level6
|
||
{mso-level-number-format:roman-lower;
|
||
mso-level-tab-stop:3.0in;
|
||
mso-level-number-position:right;
|
||
text-indent:-9.0pt;}
|
||
@list l0:level7
|
||
{mso-level-tab-stop:3.5in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l0:level8
|
||
{mso-level-number-format:alpha-lower;
|
||
mso-level-tab-stop:4.0in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l0:level9
|
||
{mso-level-number-format:roman-lower;
|
||
mso-level-tab-stop:4.5in;
|
||
mso-level-number-position:right;
|
||
text-indent:-9.0pt;}
|
||
@list l1
|
||
{mso-list-id:849370803;
|
||
mso-list-template-ids:1733444914;
|
||
mso-list-style-name:"Spec List";}
|
||
@list l1:level1
|
||
{mso-level-tab-stop:.5in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;
|
||
mso-ansi-font-size:14.0pt;
|
||
mso-ascii-font-family:Arial;
|
||
mso-hansi-font-family:Arial;
|
||
mso-ansi-font-weight:bold;}
|
||
@list l1:level2
|
||
{mso-level-number-format:alpha-lower;
|
||
mso-level-tab-stop:1.0in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l1:level3
|
||
{mso-level-number-format:roman-lower;
|
||
mso-level-tab-stop:1.5in;
|
||
mso-level-number-position:right;
|
||
text-indent:-9.0pt;}
|
||
@list l1:level4
|
||
{mso-level-tab-stop:2.0in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l1:level5
|
||
{mso-level-number-format:alpha-lower;
|
||
mso-level-tab-stop:2.5in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l1:level6
|
||
{mso-level-number-format:roman-lower;
|
||
mso-level-tab-stop:3.0in;
|
||
mso-level-number-position:right;
|
||
text-indent:-9.0pt;}
|
||
@list l1:level7
|
||
{mso-level-tab-stop:3.5in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l1:level8
|
||
{mso-level-number-format:alpha-lower;
|
||
mso-level-tab-stop:4.0in;
|
||
mso-level-number-position:left;
|
||
text-indent:-.25in;}
|
||
@list l1:level9
|
||
{mso-level-number-format:roman-lower;
|
||
mso-level-tab-stop:4.5in;
|
||
mso-level-number-position:right;
|
||
text-indent:-9.0pt;}
|
||
ol
|
||
{margin-bottom:0in;}
|
||
ul
|
||
{margin-bottom:0in;}
|
||
-->
|
||
</style>
|
||
|
||
</head>
|
||
|
||
<body lang=DE link=blue vlink=purple style='tab-interval:35.4pt'>
|
||
|
||
<h1>Dynamical Loading in dhtmlxTree v.1.x</h1>
|
||
|
||
<div class=Section1>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>Dynamical loading means loading data on request. You
|
||
can split your data into parts by levels and decrease loading time this way.
|
||
For example initial xml document will be as follows:<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>
|
||
<img width=562 height=161 src="imgs/image001.jpg"></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>Just add parameter child=<3D>1<EFBFBD> to all nodes which have
|
||
dependent elements (children) and child=<3D>0<EFBFBD> to all nodes without children.<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span class=GramE><span lang=EN-GB style='font-size:10.0pt;
|
||
font-family:Arial;mso-ansi-language:EN-GB'><?xml</span></span><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>
|
||
version="1.0" encoding="iso-8859-1" ?><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='text-indent:35.4pt'><span lang=EN-GB
|
||
style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><tree
|
||
id=<3D>0<EFBFBD>><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><<span
|
||
class=GramE>item<span style='mso-spacerun:yes'><EFBFBD> </span>text</span>="Surveillance"
|
||
id="<span style='color:red'>a1</span>" im0="book.gif" <20> <span
|
||
style='color:red'>child=<3D>1<EFBFBD></span>/><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><item
|
||
<EFBFBD>/><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><EFBFBD><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><item
|
||
<EFBFBD>/><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><item
|
||
text=<3D>Low income countries<65> id=<3D>a333<33> im0=<3D>book_titel.gif<69> <20><span
|
||
style='color:red'> child=<3D>0<EFBFBD></span>><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><span style='mso-tab-count:1'><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> </span></tree><span
|
||
style='mso-tab-count:1'> </span><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>As dynamical loading needs to process incoming <span
|
||
class=GramE>url</span> parameters to work really useful, it would be good to
|
||
use some server side programming language like ASP, ColdFusion, JSP or any
|
||
other. This is necessary on next stage.<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>If you use XML for building the tree, then you already
|
||
used the method<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span class=GramE><span lang=EN-GB style='color:blue;
|
||
mso-ansi-language:EN-GB'>tree.setXMLAutoLoading(</span></span><span lang=EN-GB
|
||
style='color:blue;mso-ansi-language:EN-GB'>url)<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>When user trying to open node with child=<3D>1<EFBFBD> tree
|
||
looks for data on client side first <20> if no data found, then it goes to server
|
||
using URL specified in method mentioned above with id of node added to it,
|
||
like: <a href="http://127.0.0.1/myTree/tree.cfm?id=a1"
|
||
title="http://127.0.0.1/myTree/tree.cfm?id=a1"><span style='font-family:"Times New Roman";
|
||
mso-bidi-font-family:Arial'>http://127.0.0.1/myTree/tree.cfm?id=a1</span></a>,
|
||
where <20>a1<61> is id of the node which should be opened. So, here you need a server
|
||
side language to process incoming id parameter and to put just required part of
|
||
XML into response (in our case the xml contains next level of a1 node):<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><span style='mso-tab-count:1'><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> </span><span
|
||
class=GramE><?xml</span> version="1.0"
|
||
encoding="iso-8859-1" ?><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='text-indent:35.4pt'><span lang=EN-GB
|
||
style='font-size:10.0pt;font-family:Arial;color:red;mso-ansi-language:EN-GB'><tree
|
||
id=<3D>a1<61>><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><item
|
||
text="Bilateral surveillance" id="a2"
|
||
im0="book.gif" im1="books_open.gif"
|
||
im2="books_close.gif" <span style='color:red'>child=<3D>1<EFBFBD></span>/><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><item
|
||
<EFBFBD>/><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal style='margin-left:35.4pt;text-indent:35.4pt'><span
|
||
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><span style='mso-tab-count:1'><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD> </span></tree><span
|
||
style='mso-tab-count:1'> </span><o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>The same should be repeated for each level and each
|
||
node that has children. If you xml contains data from Database, it would be
|
||
much better to generate xml on request directly from db <20> otherwise you<6F>d
|
||
better use the following way to reduce the number of parts:<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='font-size:10.0pt;font-family:Arial;
|
||
mso-ansi-language:EN-GB'>You can split your xml document in any number of parts
|
||
(maximum <20> all levels, minimum - 1). For example you can load not only next
|
||
level of children for <i style='mso-bidi-font-style:normal'>a1</i>, but the
|
||
whole branch started from the level next to <i style='mso-bidi-font-style:normal'>a1.
|
||
</i>In this<i style='mso-bidi-font-style:normal'> </i>case initial loading of
|
||
the tree will be rather fast, as you load just one level, then if user opens
|
||
some node, the whole branch will be loaded (but not the whole tree), <span
|
||
class=GramE>so</span> in any way it is much faster than load the whole tree on
|
||
start.<o:p></o:p></span></p>
|
||
|
||
<p class=MsoNormal><span lang=EN-GB style='mso-ansi-language:EN-GB'><o:p> </o:p></span></p>
|
||
|
||
</div>
|
||
|
||
</body>
|
||
|
||
</html>
|