Browse DevX
Sign up for e-mail newsletters from DevX


Go Shopping with SVG: A Hands-on Graphics Tutorial : Page 6

Though it's often overlooked, SVG is poised to become the dominant graphics environment for the Web and desktop during the next few years. Learn the ins and outs of this up and coming technology with this virtual shopping mall application.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Enabling the Mall (cont.)
The setStoreData() function is a helper function for updating text content within SVG. An element in XML contains a text node, which in turn contains text. This means that in order to retrieve the text of a given element, you would use an expression such as this one:

eltData = elt.item(0).childNodes.item(0).getData();

The corresponding setData method sets the text data itself, and is used to update both elements and attributes. These routines are not called directly by the user, but rather are called indirectly by other routines.

function setStoreData(field,target,storeNode,message){ if (storeNode != null){ elt = storeNode.getElementsByTagName(field); eltData = elt.item(0).childNodes.item(0).getData(); } else { if (message!=null){ eltData = message; } else { eltData = "Not Yet Occupied"; } } eltText=document.getElementById(target); eltText.childNodes.item(0).setData(eltData); }

The showStoresByCategory takes a category name and compares it against the category list of each store in the store XML. Those that match are added into an array to have their categories changed.

function showStoresByCategory(categoryName){ var stores=mallData.getElementsByTagName("store"); var catStoresArr =new Array(); var storeCatIndex = 0; var categoryTerms = mallData.getElementsByTagName("categoryTerm"); for (var ctIndex = 0;ctIndex != categoryTerms.length;ctIndex++){ var categoryTerm=categoryTerms.item(ctIndex); var key=categoryTerm.getAttribute("key") // alert(key); categoryTermElt = document.getElementById(key+"_box"); if (categoryName == key){ categoryTermElt.setAttribute("class","categoryBoxHighlight"); } else { categoryTermElt.setAttribute("class","categoryBox"); } } for (var storeIndex=0;storeIndex != stores.length;storeIndex++){ var store = stores.item(storeIndex); storeElt = document.getElementById(store.getAttribute('id')); if (storeElt.getAttribute("class")=="storeCategory"){ storeElt.setAttribute("class","store"); } var categoryElts = store.getElementsByTagName("category"); for (var catIndex = 0;catIndex !=categoryElts.length;catIndex++){ var categoryValue = categoryElts.item(catIndex).childNodes.item(0).getData(); if (categoryValue == categoryName){ catStoresArr[storeCatIndex] = store; storeCatIndex++; break; } } } for (var storeCatIndex=0;storeCatIndex != catStoresArr.length;storeCatIndex++){ var store = catStoresArr[storeCatIndex]; var storeElt = document.getElementById(store.getAttribute('id')); storeElt.setAttribute("class","storeCategory"); } }

Finally, the showVideo() function sets the video xlink:href attribute to a new local value. It also uses the beginElement() and endElement() functions to insure that the video is always rewound prior to started.

function showVideo(evt){ var elt=evt.target; var storeNode=mallData.getElementById(elt.getAttribute("id")); if (storeNode != null){ var storeVideoData=storeNode.getAttribute("video"); var storeVideo = document.getElementById("storeVideo"); if (storeVideoData != ''){ //alert(storeVideoData); storeVideo.setAttribute("xlink:href",imageBase + storeVideoData); storeVideo.beginElement(); // storeVideo.setAttribute("to",imageBase + storeVideoData); } else { storeVideo.setAttribute("xlink:href",""); storeVideo.endElement(); } } }

Just In Time For Christmas
While this uses a few of the less controversial 1.2 capabilities, this sample SVG document illustrates how to create a compelling, full-blown application that is nonetheless surprisingly simple to create. The linked nature of XML means that you could just as readily have the kiosk display additional information like sales, events, or you could do things like have the stores act as links into other "pages," and so forth.

The most recent SVG 1.2 working draft was published in November and is available here, with the SVG 1.1 available a year ago. The Adobe SVG Viewer 6.0 beta, the first to support SVG 1.2, can be downloaded for experimentation here. It supports SVG 1.2 up to the July release, though that may change by the time this articles is published.

Kurt Cagle is the author or co-author of twelve books and several dozen articles on web technologies, XML and web services. He is the president of Cagle Communications (Olympia, WA), which specializes in the production of training materials for XML and Web Services education. He can be reached at kurt@kurtcagle.net.
Thanks for your registration, follow us on our social networks to keep up-to-date