extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-18 14:03:19 +01:00
Code Issues Packages Projects Releases Wiki Activity
f219bf221e
egroupware/phpgwapi/js/dhtmlxtree/doc/kb/dyn_loading.html

310 lines
12 KiB
HTML
Raw Normal View History

updated dhtmlXTree to version 1.2
2006-03-19 18:51:23 +01:00
<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>&nbsp;</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'>&lt;?xml</span></span><span
lang=EN-GB style='font-size:10.0pt;font-family:Arial;mso-ansi-language:EN-GB'>
version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?&gt;<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'>&lt;tree
id=<3D>0<EFBFBD>&gt;<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'>&lt;<span
class=GramE>item<span style='mso-spacerun:yes'><EFBFBD> </span>text</span>=&quot;Surveillance&quot;
id=&quot;<span style='color:red'>a1</span>&quot; im0=&quot;book.gif&quot; <20> <span
style='color:red'>child=<3D>1<EFBFBD></span>/&gt;<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'>&lt;item
<EFBFBD>/&gt;<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'><3E><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'>&lt;item
<EFBFBD>/&gt;<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'>&lt;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>&gt;<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>&lt;/tree&gt;<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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&nbsp;</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>&lt;?xml</span> version=&quot;1.0&quot;
encoding=&quot;iso-8859-1&quot; ?&gt;<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'>&lt;tree
id=<3D>a1<61>&gt;<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'>&lt;item
text=&quot;Bilateral surveillance&quot; id=&quot;a2&quot;
im0=&quot;book.gif&quot; im1=&quot;books_open.gif&quot;
im2=&quot;books_close.gif&quot; <span style='color:red'>child=<3D>1<EFBFBD></span>/&gt;<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'>&lt;item
<EFBFBD>/&gt;<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>&nbsp;</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>&lt;/tree&gt;<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>&nbsp;</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>&nbsp;</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>&nbsp;</o:p></span></p>
</div>
</body>
</html>
Reference in New Issue Copy Permalink