Browse DevX
Sign up for e-mail newsletters from DevX


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

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
With SVG 1.0/1.1, a significant amount of the work involved in creating an application resides within the scripting layer, manipulating the DOM. This will likely change somewhat in the face of Rendered Custom Content (RCC), which is a technology for formatting elements using XML (and probably XSLT). For now, though, DOM is likely be the tool of choice for manipulating SVG for quite some time.

The file mallScripts.js contains a number of functions that handle significant amounts of the automation in the mall. The key to working with them is to understand the use of the mallData variable, which holds the contents of the stores.xml file. This file is retrieved through the retrieveData() and retrieveDataCallBack() functions.

The first launches an asynchronous request using the getURL() function, which both specifies the file to retrieve (stores.xml) and passes a pointer to the callback function that will be invoked when the data is fully retrieved.

var mallData=nulle var imageBase=""; function retrieveData(evt){ window.getURL("Stores.xml",retrieveDataCallBack); return ""; }

The second function,retrieveDataCallBack() takes as an argument resultObject, which contains an object constructed by the viewer. This function may be called many times at different stages of the download, so you should use the resultObject.success property to determine whether you have retrieved all of the contents. SVG 1.2 (and the Adobe SVG 1.0 and 1.1) browser also contain a function called parseXML() which takes text content (here resultObject.content) and converts into an internal parsed format, associated with the window and placed here within the variable mallData.

function retrieveDataCallBack(resultObject){ if (resultObject.success){ mallData = window.parseXML(resultObject.content); imageBase = mallData.documentElement.getAttribute("imageBase")+"\\"; showCategories(3); } else { alert("stores.xml could not be found"); } return ""; }

The showCategories function, invoked once everything is loaded, draws that category buttons from the stores.xml file and sets up the request command handlers. Additionally, for each button, the handlers are customized for each particular category key. Finally, using the categoryBox template defined earlier, the category buttons are customized to handle labelling for each respective category.

function showCategories(depth){ if (depth == null) depth=3; var categoryTerms = mallData.getElementsByTagName("categoryTerm"); var legend=document.getElementById("legend"); for (var catIndex=0;catIndex != categoryTerms.length;catIndex++){ var categoryTerm=categoryTerms.item(catIndex); var categoryKey=categoryTerm.getAttribute("key"); var categoryTitle=categoryTerm.getAttribute("title"); var categoryNode = document.getElementById("categoryTemplate").cloneNode(true); categoryNode.setAttribute("id",categoryKey); categoryNode.setAttribute("onclick","showStoresByCategory('"+categoryKey+"')"); var x=Math.floor(catIndex / depth) * 1600; var y=(catIndex % depth) * 300; categoryNode.setAttribute("transform","translate("+x+","+y+")"); var rect=categoryNode.getElementsByTagName("rect").item(0) rect.setAttribute("id",categoryKey+"_box"); var text=categoryNode.getElementsByTagName("text").item(0) text.setAttribute("id",categoryKey+"_text"); text.childNodes.item(0).setData(categoryTitle); legend.appendChild(categoryNode); } }

The displayInfo() function displays text content in the upper-left-hand portion of the page (pulled from the local stores repository, and if an image attribute is specified, also sets the storeImage defined in the previous section to point to that image.) The function also turns the highlight of the store on (regardless of whether it has been selected as being in a category or not. Note of course that the SVG DOM uses almost exclusively XML DOM commmands. The restore() function simply turns the store's highlight off.

function displayInfo(evt){ var elt=evt.target; //alert(elt.getAttribute("id")); if (elt.getAttribute("class") == "storeCategoryHighlight"){ elt.setAttribute("class","storeCategory"); } var storeNode=mallData.getElementById(elt.getAttribute("id")); setStoreData("name","storeName",storeNode,elt.getAttribute("id")); setStoreData("description","storeDesc",storeNode); if (storeNode != null){ var storeImageData=storeNode.getAttribute("image"); var storeImage = document.getElementById("storeImage"); if (storeImageData !=""){ storeImage.setAttribute("xlink:href",imageBase + storeImageData); } else { storeImage.setAttribute("xlink:href",""); } if (elt.getAttribute("class")=="store"){ elt.setAttribute("class","storeHighlight"); } if (elt.getAttribute("class")=="storeCategory"){ elt.setAttribute("class","storeCategoryHighlight"); } if (elt.getAttribute("class")=="service"){ elt.setAttribute("class","serviceHighlight"); } } return ""; } function restore(evt){ var elt=evt.target; if (elt.getAttribute("class")=="storeHighlight"){ elt.setAttribute("class","store"); } if (elt.getAttribute("class")=="storeCategoryHighlight"){ elt.setAttribute("class","storeCategory"); } if (elt.getAttribute("class")=="serviceHighlight"){ elt.setAttribute("class","service"); } return ""; }

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date