Introduction.

I'm beginning series of articles where step by step describe ajax photo gallery developing process. This gallery I have created for one of my projects.

Task

Develop ajax gallery with not limited nesting in categories. Categories should support localization (in my case English and Russian ) Should be administrative panel. Everything what possible implement with help of Ajax.

Start developing

At the beginning of process I get html template of gallery. Not ideal, but everything clear with concept.

Basic idea of tree Html and CSS I got from here . But that tree can have only one nested level and doesn't work in IE.

So it seems to be first task.

Implementing the tree

I'm thinking about using tree from ext.js library library. But I decided to use prototype.js instead of heavy ext.js.

Task is clear. First what I want to do, add IE support to and not limited nesting to the tree. Do this using plain Html and CSS. Dynamic generation will be little bit later.

As result I got such tree. As can maybe seen from picture pervious looking is slightly different.

This picture created from such Html:

<ul class="ul_maincategory"> <li class=""> <div> <p> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="ARATA" href="javascript:open_item();">ARATA</a></p> </div> <ul class="ul_subcategory"> <li class=""> <div> <p style="left: 1.89em;"> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="??????" href="javascript:open_item();">??????</a></p> </div> <ul class="ul_subcategory" style="border-left: 2px solid white; margin-left: -1px;"> <li class=""> <div> <p style="left: 1.89em;"> <a class="sc" href="javascript:expand_or_collapse();"><span class="expanded_node" /> </a><a class="title" title="??????" href="javascript:open_item();">??????</a></p> </div> <ul class="ul_subcategory" style="border-left: 2px solid white; margin-left: -1px;"> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" title="??????" href="javascript:open_item();">??????</a></p> </div> </li> </ul> </li> </ul> </li></p> </ul> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="CATALANO">CATALANO</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="MONILE">MONILE</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="LENVAL">LENVAL</a></p> </div> </li> <li> <div> <p> <a class="sc" href="javascript:expand_or_collapse();" /><a class="title" href="javascript:open_item();" title="ROBERTO GIANNOTTI">ROBERTO GIANNOTTI</a></p> </div> </li> </ul>

The next task to create with help of JavaScript the same Html.

On input should be pulled data. Data format is obvious.

JSON it's best JS can get!

With help of favorite text editor create test JSON data. With help of this data the tree of categories will be displayed.

var data={nodes:[{name:'ARATA',hint:'ARATA',url:'ARATA',expanded:false,languages:[{language:'Ðóññêèé',name:'ARATA',hint:'ARATA'},{language:'English',name:'ARATA',hint:'ARATA'}],categoryId:58,childNodes:[{name:'Êîëüöà',hint:'Êîëüöà',url:'arata/rings',expanded:false,languages:[{language:'Ðóññêèé',name:'Êîëüöà',hint:'Êîëüöà'},{language:'English',name:'Rings',hint:'Rings'}],categoryId:64}]},{name:'CATALANO',hint:'CATALANO',url:'CATALANO',expanded:false,languages:[{language:'Ðóññêèé',name:'CATALANO',hint:'CATALANO'},{language:'English',name:'CATALANO',hint:'CATALANO'}],categoryId:59},{name:'MONILE',hint:'MONILE',url:'MONILE',expanded:false,languages:[{language:'Ðóññêèé',name:'MONILE',hint:'MONILE'},{language:'English',name:'MONILE',hint:'MONILE'}],categoryId:60},{name:'LENVAL',hint:'LENVAL',url:'LENVAL',expanded:false,languages:[{language:'Ðóññêèé',name:'LENVAL',hint:'LENVAL'},{language:'English',name:'LENVAL',hint:'LENVAL'}],categoryId:62},{name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI',url:'ROBERTO GIANNOTTI',expanded:false,languages:[{language:'Ðóññêèé',name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI'},{language:'English',name:'ROBERTO GIANNOTTI',hint:'ROBERTO GIANNOTTI'}],categoryId:63}]};

So let's do tree rendering.

Render the tree.

Object structure is pretty simple, tree class, and node class:

Tree - keeps nodes, rendering, etc.

TreeNode - implementation of node logic.

var Tree = Class.create(); Tree.prototype = { initialize:function(container,dataSource) { this.el = $(container); this.data= dataSource; this.el.className = "tree"; this.childNodes =new Array(); this.el.onclick = this.deselectAll.bindAsEventListener(this); this.render(); this.selectedNode = this; }, render:function() { this.nodesEl =createElement("ul","",this.el,"ul_maincategory"); this.createChilds(); this.renderChilds(); this.updateConnectors(); }, createChilds:function() { for(var i=0;i<this.data.nodes.length;i++) { this.appendNode(new TreeNode(this.data.nodes[i],this,this)); } }, renderChilds:function() { for(var i=0;i<this.childNodes.length;i++) { this.childNodes[i].render(); } }, appendNode:function(child) { this.childNodes.push(child); }, appendNodeToSelected:function(config) { var selectedNode = this.selectedNode?this.selectedNode:this; node = new TreeNode(config, this,selectedNode); if(selectedNode){ selectedNode.appendNode(node); selectedNode.updateNodesEl(); } else {this.appendNode(node);} node.render(); this.updateConnectors(); return node; }, updateNodesEl:function() {}, setSelectedNode:function(node) { if(this.selectedNode&&this.selectedNode!=this) this.selectedNode.deselectNode(); this.selectedNode = node; if(this.onSelect) this.onSelect(node); }, selectFirstNode:function() { this.childNodes[0].onClickHandler(); }, deselectAll:function() { this.setSelectedNode(this); }, deleteSelectedNode:function() { if(!this.selectedNode) return; this.selectedNode.deleteNode(); this.updateConnectors(); }, updateConnectors:function() { //update recursively childs for(var i=0;i<this.childNodes.length;i++) { this.childNodes[i].updateConnectors(); } } }

Useful methods: delete selected node (deleteSelectedNode), append node(appendNode), adding node to child collection of selected node. (appendNodeToSelected).

All code of node is not showed here because there is a lot of code (all listing will be available in attach). The node class implements editing methods:

setTitle:function(title) { this.titleEl.innerHTML = title; this.data.name = title; this.title = title; }, setHint:function(hint) { this.titleEl.title = hint; this.data.hint = hint; this.hint = hint; }, setUrl:function(url) { this.data.url = url; }, Delete code: deleteNode:function() { this.parentNode.childNodes=deleteElementFromArray(this.parentNode.childNodes,this.getIndex()); destroyElement(this.el); this.el = null; if(this.parentNode.childNodes.length==0) {destroyElement(this.parentNode.nodesEl); this.parentNode.nodesEl=null;}; if(this.parentNode!=this.tree) this.parentNode.updateNodesEl(); this.tree.selectedNode = null; },

Conclusion

First task completed. The tree is good looking in IE and FF; allows add, delete and edit nodes; implements simple API.

Example of tree, here.

Download here.

In the next part of serie I will implement server side, which will display the tree from database.

Russian version of article