First of all you need to choose container for dhtmlxFolders object which will define width, height for it and its place on page. Most useful HTML object for these purposes is DIV element. It can be in any type of position - relative, absolute, static or fixed. But some css attributes are mandatory for it:
It also should have id attribute.
So here is a sample of valid dhtmlxFolder container:
<div id="folders_container" style="width:450px;height:450px;overflow:hidden;"></div>
Having container you now can create dhtmlxFolders object and put it there. This can be done with a single script command:
myFolders = new dhtmlxFolders("folders_container");
Now, you have javascript object myFolders which has all functionality of dhtmlxFolders. You can define type of items you want to have in it and load data. We'll do this with a short set of script commands:
myFolders.setItemType("type_name"); myFolders.setUserData("name","value") myFolders.loadXML("/path/to/xml_source.xml","/path_to/itemtype_visualization/xsl_file.xsl");
setItemType method call is necessary if you want to use some of predefined types (read chapter “Define items type using built-in types”) or switch from one type to another (read “Changing type dynamically” chapter).
setUserData method sets name/value pairs which then can be used in XSL as xsl variables. You can pass path to icons or some other values this way. If you use built-in or third party types you need to refer to the documentation to find out what variables should be set. Or look into xsl file to see what variables are used there. Userdata cab be set with script or in XML (using userdata tag).
loadXML method gets data provided in XML format from server and populates dhtmlxFolders object with items. As you can see it uses two arguments: