Browse DevX
Sign up for e-mail newsletters from DevX


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

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

Designing the Sophisticated Mall
This article's sample application is a kiosk application for a "Sophisticated Mall," which lets the user see information about each store in a visually accessible manner.

There are two different ways that such an application can be written. The first, and simplest, is to create a specific mall graphic with assignable stores, moving the metacontent about each store (a name, description, perhaps an image or other content) into a separate XML file. The thinking behind this is that while the occupants of the stores may change (or, more importantly, relevant information about these stores such as what items are on sale) will likely change daily, the specific layout of the mall is fixed.

The second approach would be to actually incorporate the specific shapes and positions of each store within the external file. For objects that change regularly (such as the layout of smaller vendor stands) this may actually provide more flexibility. On the other hand, it makes the code harder to understand.

Figure 1. The Sophisticated Mall: Users mouse over each store and click for more information.

The application for Sophisticated Mall uses the first approach. Figure 1 shows a single story mall with thirty-two stores, as well as assorted service areas like information kiosks and bathrooms. Each store has a number of useful pieces of metadata—the name and description of the store, a list of categories that indicate the kind of products or services the store sells, a graphic image that appears when the user mouses over a store with the mouse, and a movie that plays when the user clicks on the store. Additionally, beneath the mall graphic itself is a set of buttons for each category, letting the user highlight only the restaurants, or children's clothing outlets, or mall services.

The application combines multimedia layers with an external dataset; if you change any piece of data and refresh the map, the page will change accordingly. This means that you could modify this application such that, rather than (or in addition to) containing categories, the data source document contained featured sales, activities of the day, and so forth.

This data file (shown in Listing 1) comes in two parts. In the first part, a series of category terms are defined. Each term maps a category key with a particular title (and could also link this same title to a description element, though this isn't demonstrated here). By listing these terms up front, it also establishes the order in which the buttons for selecting stores that match these categories are shown. For instance, a category term for "Cards and Gifts" may look something like:

<categoryTerm key="cards_and_gifts" title="Cards & Gifts"/>

Once these items are defined, each store entry is defined, providing a name, description ,and associated list of categories (a store can fall into more than one). For instance, the "Destruction Channel" store is in the cards_and_gifts, toys_and_games and cds_video_and_dvds categories:

<store id="store11" video="DestructionChannel.mpg" image="DestructionChannel.svg"> <name>The Destruction Channel</name> <description>Learn Science by Watching Things Go Boom!</description> <category>cards_and_gifts</category> <category>toys_and_games</category> <category>cds_videos_and_dvds</category> </store>

Additionally, a store has an optional image and video attribute. Whenever a store with an associated image is rolled over, the image ends up appearing on the right hand side. Clicking on the store with a video attribute will start a video of the store running at that same location.

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