Putting XML in Picture

Computer Network Display

(Putting XML into Picture)

Abstract

Throughout this paper it’s talking about converting an XML file in to a SVG image. The Scalable

Vector Graphic (SVG) format is recommendation of the World Wide Web Consortium (W3C) for

describing scalable, two-dimensional vector graphics on the web. SVG is based on XML (Extensible

Markup Language). SVG fits perfectly in a modern XML-based environment. To render SVGs or to

interpret SVG-code it is necessary to install an appropriate plug-in on the client side (i.e. web-

browser).

In this paper it generates a simple network topology with three nodes and two links. Creating XML

Schema is the first thing to do. Coverting it in to XML is the first step to the SVG image. XSL as a

formatting and transformation language can provide rules how another XML-file should be rendered

as SVG. In here it generates the SVG code automatically using an XSL file. Using the XML file,

XSL file in a Java application could generate the SVG code and file itself using Netbeans.

Keywords: XML, SVG, XML Schema, XSL, Network Topology

II

ContentsAbstract................................................................................................................................................................... II

Contents................................................................................................................................................................. III

CHAPTER ONE – INTRODUCTION…………………………………………………………………………………………… 1

1.1 Computer Network…………………….......................................................................................................................1

1.2 Network Topology..............................................................................................................................................2

1.3 Different Network Topologies............................................................................................................................2

1.4 Conclusion..........................................................................................................................................................5

CHAPTER TWO – PROJECT BACKGROUND.................................................................................... 7

2.1 XML Introduction...............................................................................................................................................7

2.2 DTD Introduction................................................................................................................................................9

2.3 XML Schema Introduction..................................................................................................................................9

2.4 XSL Transformations.........................................................................................................................................10

2.5 SVG Introduction..............................................................................................................................................12

2.6 SVG Viewer......................................................................................................................................................14

2.7 JDOM Introduction...........................................................................................................................................15

2.8 Existing Topology Display systems....................................................................................................................18

2.9 Conclusion........................................................................................................................................................21

CHAPTER THREE – IMPLEMENTATION OF THE PROJECT.....................................................23

3.1 Design of the Project........................................................................................................................................23

III

3.2 XML Schema file...............................................................................................................................................23

3.3 XML file............................................................................................................................................................29

3.4 XSL file..............................................................................................................................................................33

3.5 XSL generating SVG code..................................................................................................................................38

3.6 Generated SVG file...........................................................................................................................................39

3.7 User Interface………………………………………………………………………………………………………………………………………39

3.8 Conclusion……………………………………………………………………………………………………………………………………………41

CHAPTER FOUR – FUTURE WORK................................................................................................. 42

CHAPTER FIVE – SUMMARY............................................................................................................ 44

References…………………………………………………………………………………………………………………………………………………….45

IV

V

CHAPTER ONE

INTRODUCTION

1.1 Computer Network

When we talk about computers in the present society, the topic computer networks is unavoidable.

That has already become a main human need nowadays. It allows computers to communicate with

each other and share resources and information.

A Network is a set of devices connected by media links. These devices are termed as Nodes. A

Node can be any device which is capable of sending and/or receiving data from/to other Nodes.

The links are called communication channels.

There are many types of Networks, such as Personal area Network (PAN), Local area network

(LAN), Home area Network, Campus Network, Metropolitan area network(MAN), Wide area

network (WAN), and Global area network (GAN) etc.

LAN – Local Area Network - is a network that connects computers and devices in a limited

geographical area such as home, school, computer laboratory, office building, or closely

positioned group of buildings. Each computer or device on the network is a node.

MAN – Metropolitan Area Network - is a network over a larger geographical area such as the

provincial government.

WAN – Wide Area Network - is a computer network that covers a large geographic area such

as a city, country, or spans even intercontinental distances, using communications channel

that combines many types of media such as telephone lines, cables, and air waves. A WAN

often uses transmission facilities provided by common carriers, such as telephone companies.

WAN technologies generally function at the lower three layers of the OSI reference model:

the physical layer, the data link layer, and the network layer.

1

GAN – Global Area Network – is a network used for supporting mobile communications

across an arbitrary number of wireless LANs, satellite coverage areas etc. The key challenge

in mobile communications is handing off the user communications from one local coverage

area to the next.

1.2 Network Topology

Although the computer industry is the youngest, the major part of this spectacular progress is

contributed by Networking. To get acquainted with networks we must know about Network

Topologies.

Network Topology is the study of the arrangement or mapping of the elements (links, nodes, etc.) of

a network.

There are two types of Network Topologies, namely, physical topology and logical topology.

Physical topology defines how the systems are physically connected. It represents the physical

layout of the devices on the network. There are five main types of physical topologies that can be

used and each has its own strengths and weaknesses. They are, Bus, Ring, Star, Hybrid or tree, and

Mesh topology.

The Logical topology defines how the systems communicate across the physical topologies. This

referred to as the LAN media access method or network access method. There are two main types of

logical topologies, shared media topology and token-based topology.

1.3 Different Network Topologies

Bus Topology:

In Bus topology, as shown in the below Figure 1.1, all computers and devices connected to

central cable or bus, and it consists of main run of cable with a terminator at each end. This is

popular on LANs because they are inexpensive and easy to install.

2

In bus topology more computers can be added without disruption and it is cheap as it uses the

least amount of cable. It also have disadvantages as with a lot of users, the network will be

slow as data has to travel through the same central cable and failure of the central cable will

stop the network from working.

Figure 1.1

Source: About.com Guide, http://compnetworking.about.com/od/networkdesign/ig/Computer-Network-Topologies/

Star Topology:

Star Topology is the oldest communication method coming from telephone switching

systems. As the Figure 1.2 shown below, smaller computers linked to a central unit and

central unit is called the network hub. All data transferred from one computer to another

passes through hub.

In Star topology if a cable fails, it will only affect one workstation. Also more computers can

be added without disruption.

But, it’s more expensive as it uses the most cabling. Failing of the central computer will stop

the network from working.

Figure 1.2


3

http://compnetworking.about.com/od/networkdesign/ig/Computer-Network-Topologies/


Ring Topology:

In Ring topology, as shown in the Figure 1.3 below, cable forms closed ring or loop, with all

computers and devices arranged along ring. Data travels from device to device around entire

ring, in one direction. This is primarily is used for LANs, but also is used in WANs. It has no

central file server or computer. It is useful in a decentralized environment.

They are cheap to expand. As the data flows around the network in one direction it is fast.

There is no reliance on a central computer.

Also if there are a lot of users on the network, it could slow down as all the data is sent along

a single line. If one computer in the ring stops working, the whole network stops. It’s a big

disadvantage.

Figure 1.3


Tree topology:

Tree topologies integrate multiple star topologies together onto a bus. In its simplest form, as

shown in Figure 1.4 below only hub devices connect directly to the tree bus. This bus/star

hybrid approach supports future expandability of the network much better than a bus or a star

alone.

Figure 1.4


4



Mesh Topology:

Mesh topology uses redundant links between devices, as shown in the below Figure 1.5. A

true mesh has a link between each device in the network. Most are hybrid mesh networks

which have some redundant links but not all. Installation of a mesh is more difficult because

of the quantity of links. A mesh network is relatively easy to troubleshoot and is very difficult

to tolerant.

Major advantage of this is in fault tolerance and guaranteed communications channel

capacity. Difficulty of installation and reconfiguration and the cost of maintaining redundant

link are disadvantages of this.

Figure 1.5


1.4 Conclusion

In this chapter it describes the definitions of a Computer Network and Network Topology. It also

describes the different types of networks and different types of network topologies and adavantages

and disadvantages of each physical topology.

A Network is a set of devices connected by media links. These devices are termed as Nodes. A Node

can be any device which is capable of sending and/or receiving data from/to other Nodes. The links

are called communication channels. There are many types of Networks, such as LAN, WAN, MAN

etc.

Network Topology is the study of the arrangement or mapping of the elements (links, nodes, etc.) of

5


a network. There are two main types of Network topology, namely, Physical and Logical topology.

There are five main types of physical topologies such as Bus, Ring, Star, Hybrid or tree, and Mesh

topology.

6

CHAPTER TWO

PROJECT BACKGROUND

2.1 XML Introduction

XML stands for Extensible Markup Language. It is a set of rules for encoding documents

electronically. It is developed by Word Wide Web Consortium and it is extended from SGML

(Standard Generalized Markup Language).

XML’s design goals emphasize simplicity, generality, and usability over the internet. It supports a

wide variety of applications. It is a textual data format, with strong support via Unicode for the

languages of the world. Although XML’s design focuses on documents, it is widely used for the

representation of arbitrary data structures, for example in web services.

As of 2009, hundreds of XML-based languages have been deveoped, including RSS, Atom, SOAP,

and XHTML. XML-based formats have become the default for most office-productivity tools,

including Microsoft Office (Office Open XML), OpenOffice.org (OpenDOcument), and Apple’s

iWork.

<?xml version=”1.0” encoding=’ UTF-8 ’ ?>

<picture>

<img src=”flower.jpg” alt= ‘ Carnation, by Anne ’ />

<description> This is Anne’s “Carnation” flower, painted in

<date>0512</date>.

</description>

</picture>

An XML document can be broken into two basic pieces: the header, which gives an XML parser and

XML applications information about how to handle the document, and the content, which is the

XML data itself.

7

Key points in an XML document:

(Unicode) Character

An XML document is a string of characters. Almost every legal Unicode character may appear in an XML document.

Processor and Application

The processor analyzes the markup and passes strctured information to an application. The specification places requirements on what an XML processor must do and not do, but the application is outside its scope. The processor is often referred to colloquially as an XML parser.

Markup and Content

The characters which make up an XML document are divided into markup and content. Markup and content may be distinguished by the application of simple syntactic rules. All strings which constitute markup either begin with the character “<” and end with a “>”, or begin with the character “&” and end with a “;”. Strings of characters which are not markup are content.

Tag

A markup construct begins with “<” and ends with “>”. Tags come in three flavors: start-tags, for example <picture>, end-tags, for example </picture>, and empty-element tags, for example <line-break/>.

Element

A logical component of a document can either begins with a start-tag and ends with a matching end-tag, or consists only of an empty-element tag. The characters between the start- and end-tags, if any, are the element’s content, and may contain markup, including other elements, which are called child elements. An example of an element is <Greeting>Hello world! </Greeting> (see hello world!). Another is <line-break/>.Every opened element must in turn be closed. There are no exceptions to this rule as there are in many other markup languages, like HTML. Between an opening and closing tag, there can be any number of additional elements or textual data. The first opened element must always be the last closed element. <tag1> <tag2> </tag1> </tag2>

8

Attribute

In addition to text contained within an element’s tags, an element can also have attributes. Atrributes are included with their respective values within the element’s opening declaration (which can also be its closing declaration!). In the example (above) the element img has two attributes, src and alt: <img src=”flower.jpg” alt= ‘Carnation, by Anne’ />.In <step number=”3”>Connect A to B. </step>, the name of the attribute is “number” and the value is “3”.In <channel rdf: about=http://www.neilgaiman.com/journal/journal.asp>, “rdf: about” is the attribute name and the value is the URL, “http://www.neilgaiman.com/journal/journal.asp”.

XML Declaration

XML documents may begin by declaring some information about them as in the example above. <? xml version=”1.0” encoding=’ UTF-8’?>

2.2 DTD Introduction

Introduced as part of the XML 1.0 specification, DTDs are the oldest constraint model around in the

XML world. They’re simply to use, but this simplicity comes at a price: DTDs are inflexible, and

offer you little for data type validation as well.

They are usually separate documents that the document can refer to, although parts of DTDs can also

reside inside the document. A DTD is a collection of rules, or declarations, describing elements and

other markup objects. An element declaration adds a new element type to the vocabulary and defines

its content model, what the element can contain and in which order. Any element type not declared in

the DTD is illegal. Any element containing something not declared in the DTD is also illegal. The

DTD doesn’t restrict what kind of data can go inside elements, which is the primary flaw of this kind

of document model.

2.3 XML Schema Introduction

XML schema is the W3C’s anointed successor to DTDs. XML schemas are literally orders of

magnitude more flexible than DTDs, and offer an almost dizzying array of support for various data

9

http://www.neilgaiman.com/journal/journal.asp

http://www.neilgaiman.com/journal/journal.asp

types. However, just as DTDs were simple and limited, XML schemas are flexible and complex. It

takes a lot of work to write a good schema, even for 50- or 100-line XML documents. For this

reason, there’s been a lot of dissatisfaction with XML schema, even though they are widely being

used.

Schemas are a later invention, offering more flexibility and a way to specify patterns for data, which

is absent frm DTDs. For example, in a schema you could declare an element called data and then

require that it contains a legal date in the format YYYY-MM-DD. With DTDs the best you could do

is say whether the element can contain characters or elements. Unfortunately, there is a lot of

controversy around schamas because different groups have put forth competing proposals.

The purpose of an XML schema is to define the legal building blocks of an XML document, just like

a DTD.

An XML schema:

Defines elements that can appear in a document

Defines attributes that can appear in a document

Defines which elements are child elements

Defines the order of child elements

Defines the number of child elements

Defines whether an element is empty or can include text

Defines data types for elements and attributes

Defines default and fixed values for elements and attributes

2.4 XSL Transformations

One of the cooler things about XML is the ability to transform it into something else. With the wealth

of web-capable devices these days (computers, personal organizers, phones, DVRs, etc.), we never

know what flavor of markup we need to deliver. Sometimes HTML works, sometimes XHTML (the

XML flavor of HTML) is required, sometimes the Wireless Markup Language (WML) is supported;

and sometimes we need something elese entirely. In all of these cases, though, the basic data being

displayed is the same; it’s just the formatting and presentation that changes. A great technique is to

10

store the data in an XML document, and then transform that XML into various formats for display.

As usefull as XML transformations can be, though, they are not simple to implement. In fact, rather

than trying to specify the transformations of XML in the original XML 1.0 specification, the W3C

has put out three separate recommendations to define how XML transformations work.

Because these three specifications are tied together tightly and are almost always used in concert,

there is rarely a clear distinction between them. This can often make for a discussion that is easy to

understand, but not necessarily technically correct. In other words, the term XSLT, which refers

specifically to extensible stylesheet transformations, is often applied to both XSL and Xpath. In the

same fashion, XSL is often used as a grouping term for all three technologies.

XSL

XSL is the Extensible Stylesheet Language. It is defined as a language for expressing stylesheets.

This broad definition is broken into two parts:

1. XSL is a language for transforming XML documents.

2. XSL is an XML vocabulary for specifying the formatting of XML documents.

The definitions are similarr, but one deals with moving from one XML document form to another,

while the other focuses on the actual presentation of content within each document. Perhaps a clearer

definition would be to say that XSL handles the specification of how to transform a document from

format A to format B.

XSLT

XSLT is the language that specifies the conversion of a document from one format to another. The

syntax used within XSLT is generally concerned with textual transformations that do not result in

binary data output. For example, XSLT is instrumental is generating HTML or WML from an XML

document. In fact, the XSLT specification outlines the syntax of an XSL stylesheet more explicity

than the XSL specification itself!

Just as in the case of XSL, an XSLT stylesheet is always well-formed, valid XML. A DTD is defined

for XSL and XSLT that delineats the allowed constructs. Just as in XSL, XSLT is based on a

11

hierarchical tree structure of data, where nested elements are leaves, or children, of their parents.

XSLT provides a mechanism for matching patterns within the original XML document, and applying

formatting to that data. This results in anything from outputting XML data without the unwanted

element names to inserting the data into a complex HTML table and displaying it to the user with

highlighting and coloring. XSLT also provides syntax for many common operators, such as

conditionals, copying of document tree fragments, advanced pattern matching, and the ability to

access elements within the input XML data in an absolute and relative path structure. All these

constructs are designed to ease the process of transforming an XML document into a new format.

2.5 SVG Introduction

SVG (Scalable Vector Graphics) is the new official vector graphics standard of the W3C (World

Wide Web Consortium). As all new W3C standards it is XML-based, and works together with other

XML based-standards, such as DTD, Schema, XSL, XQL, SMIL, XHTML, XFORMS, RDF,

Namespaces, etc. Furthermore it is DOM-trasparent and allows the use of ECMA-Javascript, which

means that every single SVG-element and all attributes may be changed with scripts. SVG allows for

the first-time to use an open standard for the display of high- quality vector graphics within web-

applications.

As an open standard, that supports high quality vector and raster graphics, animation and

interactivity, SVG qualifies for all websites with the aim of dynamic content delivery and high

standard web graphics. Possible usage scenarios include:

Web design in general

Technical illustrations

Scientific Data visualization (chemistry, physics, exploratory visualization, etc.)

Web mapping and Online GIS-services, navigation and routing

Location based services (SVG Mobile)

Online Catalogues and E-Commerce sites

Online learning systems

Multimedia and entertainment

User Interfaces for websites in general

12

SVG as an open graphics exchange format (between graphics software and different

platforms)

SVG viewer as a rendering component of offline applications (ActiveX, COM, etc.)

SVG allows defining high level 2D graphics objects: basically we have vector-based geometry, raster

images and text. SVG viewers usually render the graphics in high quality, using antialiasing

techniques. SVG viewer internally builds a hierarchical DOM tree in order to quickly access and

manipulate elements and their attributes. Elements may be added, deleted and re-ordered within the

tree. All graphics produced by any graphics and/or DTP software may be saved and displayed with

SVG. SVG knows the following shape types:

Rectangles

Circles

Ellipses

Lines

Polylines

Polygons

Symbols

Path-elements

Using SVG has many advantages, such as:

SVG files can be read and modified by a large range of tools (e.g. notepad)

SVG files are smaller and more compressible than JPEG and GIF images

SVG images are scalable

SVG images can be printed with high quality resolution

SVG images are zoomable. Any part of the image can be zoomed without degradation

Text in SVG is selectable and searchable (excellent for making maps)

SVG works with Java technology

SVG is an open standard

13

SVG files are pure XML

Currently there are two other alternatives (besides SVG) to deliver vector graphics to web clients:

Macromedia Flash (proprietary) and WebCGM (a W3C recommendation). Considering static and

interactive SVG graphics and animation it is clear that SVG is a superset of the two above formats,

concerning functionality and flexibility. Furthermore it is W3C recommendation and is XML based.

XML is and will be the foundation of all future web-techniques. Learning XML once allows us to

more quickly get into other XML-file formats and centrally use shared XML technology (such as

XSL, DTD/Schema, XQL, etc.). This is a strong argument for people that complain about long

learning processes. Using SVG we can use most of our XML knowledge and concentrate on the

essential problems and content delivery, rather than having to learn new syntaxes. Thus XML and

SVG both can profit from each other and guarantee strong support, shorter learning phases and a fast

development cycle.

2.6 SVG Viewer

SVG is a hot topic for website developers with emphasis on rich graphical content and dynamic

content generation. It is currently the most powerful and elegant approach to bring interactive and

animated graphics to the web. The broad support from W3C, research institutions and companies

should guarantee rapid development of tools, viewers and authoring systems, as well as server side

generators. There are a large number of articles and developer tutorials available for web developers

to learn this new graphics standard. The XML foundation fits well in future web architectures.

However, penetration of SVG plugins is still low and no SVG viewer already supports the entire

specifications. Unfortunately, Adobe SVG viewer (the most popular and advanced viewer) is not

available for the Linux/Unix platform. Hopefully, customer demand will urge them to implement

one. SVG’s future and success largely depends on high quality implementations and a strong user-

community. Two W3C working groups are currently engaged in the further development of the SVG

standard.

As SVG is a quite young technology, there is rarely native SVG support in the major browsers.

Adobe currently provides the most sophisticated viewer, implemented as a plugin for Internet-

Explorer and Netscape, on both Machintosh and Windows platform. The Mozilla team is working on

14

a native browser implementation for Mozilla 1.0 (multiplatform) and the KDE/Konqueror team

works for native support for this excellent Linux/Unix browser. The W3C added static SVG support

for their Amaya project. Besides, there are some standalone implementations, mostly written in

Java2: Batik ([2, APACHE.ORG, 2001] – the most popular standalone SVG viewer, Sourcecode

available), Csiro SVG viewer and IBM SVG view are only some of the many SVG/Java2

implementations. None of them already supports the whole SVG specification, Batik is the most

advanced one – concerning static SVG display. Java2 and SVG are closely related to each other

(both designed and implemented by Adobe and Sun as major contributors): the Java2D API has all

the prerequisites necessary to implement SVG viewers.

2.7 JDOM Introduction

Java and XML play well together. Most XML parsers and tools are written in java; the XML DOM

specification from the W3C even defines language bindings for Java. Despite all this, there are

aspects of the XML specs that do not lend themselves to an easy mapping to Java constructs. JDOM

is an attempt to define an XML DOM API built around native Java data types and objects.

JDOM itself is not a parser; it is a wrapper, and requires the presence of an underlying parser, such as

Xerces. The name JDOM follows the Sun practice of NAA (not an abbreviation). Despite the

presence of leading letter J, and the letters DOM, it does not actually stands for anything. JDOM

stands for JDOM.

JDOM is an open source library for java-optimized XML data manipulations. Although it’s similar to

the World Wide Web Consortium’s (W3C) DOM, it’s an alternative document object model that was

not built on DOM or modeled after DOM. The main difference is that while DOM was created to be

language-neutral and initially used for JavaScript manipulation of HTML pages. JDOM was created

to be java-specific and thereby take advantage of Java’s features, including method overloading,

collections, reflection, and familiar programming idioms. For java programmers, JDOM tends to feel

more natural and “right”. It’s similar to how the Java-optimized remote method invocation library

feels more natural than the language-beutral Common Object Request Broker Architecture.

15

The JDOM library consists of six packages. First, the org.jdom package holds the classes

representing an XML document and its components: Attribute, CDATA, Comment, DocType,

Document, Element, EntityRef, Namespace, ProcessingInstruction, and Text.

Next is the org.jdom.input package, which holds classes that build XML documents. The main and

most important class is SAXBuilder. SAXBuilder builds a document by listening to incoming SAX

events and constructing a corresponding document. When we want to build from a file or other

stream, we use SAXBuilder. It uses SAX parser to read the stream and then builds the document

according to the SAX parser callbacks. The good part of this design is that as SAX parsers ger faster,

SAXBuilder gets faster. The other main input class is DOMBuilder. DOMBuilder builds from a

DOM tree. This class comes in handy when we have a preexisting DOM tree and want a JDOM

version instead.

The org.jdom.output package holds the classes that output XML documents. The most important

class is XMLOutputter. It converts documents to a stream of bytes for output to files, streams, and

sockets. The XMLOutputter has many special configuration options supporting raw output, pretty

output, or compressed output, among others. It’s fairly complicated class. That’s probably why this

capability still doesn’t exist in DOM Level 2.

Other outputters include the SAXOutputter, which generates SAX events based on the document

content. Although seemingly arcane, this class proves extremely useful in XSLT tranforms, because

SAX events can be a more efficient way than bytes to transfer document data to an engine. There’s

also a DOMOutputter, which builds a DOM tree representaion of the document. An interesting

contributed outputter is the JtreeOutputter, which- with just a few dozen lines of code – builds a

Jtree representation of the document. Combine that with the ResultSetBuilder, and we can go from a

SQL query to a tree view of the result with just a couple of lines code, thanks to JDOM.

Unlike in DOM, documents are not tied to their builder. This produces an elegent model in which we

have classes to hold data, various classes to construct data, and various other classes to consume the

data.

The org.jdom.transform and org.jdom.xpath packages have classes that support built-in XSLT

transformations and Xpath lookups.

16

Finally, the org.jdom.adapters package holds classes that assist the library in DOM interactions.

Users of the library never need to call upon the classes in this package. They’re there because each

DOM implementation has different method names for certain bootsrapping tasks, so the adapter

classes translate standard calls into parser-specific calls. The java API for XML Processing (JAXP)

provides another approch to this problem and actually reduces the need for these classes, but they’ve

retained them because not all parsers support JAXP, nor is JAXPinstalled everywhere, due to license

issues.

JDOM provides robust, native support for XML Namespaces. JDOM was created after the

namespace recommendation was published, so unlike other APIs there’s no pre-namespace and

deprecated leftovers.In JDOM, namespaces are represented by a Namespace class:

Namespace xhtml = Namespace.getNamespace (“xhtml”, http://www.w3.org/1999/xhtml);

If no namespace is given, the element is constructed in “no namespace.” An element namespace is an

intrinsic part of its type, so JDOM ensures that its namespace doesn’t change when it moves around

the document. If an element has no namespace and moves under an element that has a namespace, it

explicitly does not inherit the namespace. Sometimes that causes confusion until we learn to separate

the textual representation from the semantic structure.

The XMLOutputter class sorts out the namespace issues and ensures placement of all the “xmlns”

declarations into the appropriate locations, even after a document’s elements have been heavily

shuffled around.

XSLT provides a standard way to convert XML content from one format into another, using an XML

file to handle the conversion. It’s commonly used in presenting XML as an XHTML Web page, or in

changing XML between one Schema and another. JDOM provides built-in support for in-memory

XSLT transformations, using the JAXP standard interface to XSLT engines. The key classes are

JDOMSource and JDOMResult in the org.jdom.transform package. JDOMSource provides a

JDOM document as input to the translation; JDOMResult catches the results as a JDOM document.

17

http://www.w3.org/1999/xhtml

2.8 Existing topology display systems

There are a lot of network topology display softwares existing. Active Directory Replication

Monitor, LANsurveyor, Switch Center Workgroup, LANTopolog, Monitor one, and Network

mapping, CiscoWorks2000 desktop (topology service feature) etc.

Active Directory Replication Monitor – Displays the replication topology of connections between

servers on the same site. Active Directory Replication Monitor application was designed to display

the replication topology of connections between servers on the same site.

LANsurveyor – is a powerful network management aplication that automates the discovery,

topology mapping, documentation and reporting of critcal network systems and components on a

network in real time. LANsurveyor automatically discovers a network, including desktops, servers,

printers, switches and routers. LANsurveyor uses industry-standard identification and discovery

methods (ping/ICMP, SNMP, SIP-based VoIP, NetBIOS and more) to scan IP address ranges and find

nodes. Once network nodes are discovered, LANsurveyor compiles the information into a cohesive,

easy-to-view network map with node icons and colored lines representing network connectivity

speed.

[ping/ICMP – ping is a computer network administration utility used to test whether a particular

host is reachable across an Internet Protocol (IP) network and to measure the round-trip time for

packets sent from the local host to a destination computer, including the local host’s own interfaces.

Ping operates by sending Internet Control Message Protocol (ICMP) echo request packets to the

target host and waits for an ICMP response.]

[SNMP (Simple Network Management Protocol) is a UDP-based network protocol. It is used mostly

in network manaement systems to monitor network-attached devices for conditions that warrant

administrative attention.]

[SIP-based VoIP (Session Initiation Protocol-based on Voice over Internet Protocol)]

[NetBIOS Network Basic Input/Output System]

Switch Center Workgroup – Switch Center is network management and monitoring software for

18

managed switches and hubs from any vendor supporting SNMP BRIDGE-MIB that helps to

discover, monitor, mapping and analyzing networks topology, connectivity and performances. The

workgroup version supports one network switch. Switch Center can be connected through any

network port without the need of remote agents or special network configuration. The unique

monitoring engine provides complete network connectivity and performance of local and remote

network nodes and interconnecting switch trunks. The software supports SNMPv1/2 and SNMPv3

discovery options including Ten Giga switch ports.

LANTopolog – is an application that provides physical network topology discovery, visualization

and monitoring. Key features are:

- Automatic physical network topology discovery based on SNMP.

- Provide detailed and searchable physical network topology map so we can quickly isolate

network connectivity failures.

- Topology views show which network devices are connected to each switch port; port

connections are labeled with port numbers.

- Ability to auto-discovery new devices at them is added to a network.

- LANTopolog also includes network monitoring tools.

- Monitoring device’s state (active/inactive) in real-time using ICMP.

- Generating alarms when there are failures in the network.

- E-mail allerts notifying.

- Web browser-based access from anywhere in the network.

- Easy-to-use interface.

Monitor one – To achieve a better understanding of the network, for better status, availibilty and

health monitoring and to understand the consequences of a failure more quickly, Monitor one allows

us to create a graphical multilevel representation of a network that lets us move easily between

parent maps and sub-maps (zooming-in and zooming-out). The graphical network map uses colors

and icons to indicate network status at a glance.The map makes it easy to view the IP subnets and the

IP hosts that have either been added manually or with help from the Discovery utilty. The network

maps can be viewed and accessed locally via the native interface and/or remoely through the web-

interface.

19

The Monitor one software lets us create an intiutive multi-level hierarchical network topology map

that closely matches our actual network. The imported geographic maps or floor plans as

backgrounds make the map easier to understand and more attractive.

Figure 2.1 Figure 2.2

Source: fineconnection.com, http://www.fineconnection.com/Network_topology_maps

Network mapping – displays an interactive network diagram how the devices relate to each other.

Can manually add, edit, move, and resize devices to exactly reflect the network, and even choose

filters and views to display the device details which care about most in a network map. We can even

see the bandwidth usage between nodes. It’s also possible to get information such as IP address and

serial number.

CiscoWorks2000 desktop (topology service feature) –

A topology service is an application that enables to view, monitor, and configure the physical and

logical services on a network:

View detailed network information about all devices, links, and ports in a network.

View display of the physical and logical services in a network.

Configure, manage, and monitor the ATM devices in a network.

Logically segment of a network and manage workgroups that use VLANs.

Create and manage the LANE services in a network to extend VLANs across ATM devices.20

http://www.fineconnection.com/Network_topology_maps

View port, device, and trunk attributes; view and find port information in a VTP domain; and

configure VLANs on a trunk.

Display reports about inconsistencies or misconfigurations in physical and logical network

setups.

[VLAN- virtual LAN]

[VTP – VLAN Trunking Protocol]

2.9 ConclusionIn this chapter it describes the definitions of XML, DTD, XML Schema, XSL, XSL trasformations,

SVG, SVG viewer, JDOM and the fetures of each of them. It also describes the existing topology

display softwares.

XML stands for Extensible Markup Language. It is a set of rules for encoding documents

electronically. It is developed by Word Wide Web Consortium and it is extended from SGML

(Standard Generalized Markup Language).

Introduced as part of the XML 1.0 specification, DTDs are the oldest constraint model around in the

XML world. DTD stands for Document Type Definition. They are simply to use and inflexible. The

purpose of a DTD is to define the legal building blocks of an XML document. A DTD defines the

document structure with a list of legal elements and attributes.

XML schema is the W3C’s anointed successor to DTDs. DTDs were simple and limited, XML

schemas are flexible and complex. The purpose of an XML schema is to define the legal building

blocks of an XML document, just like a DTD. An XML Schema defines elements that can appear in

a document, defines attributes that can appear in a document, defines which elements are child

elements, defines the order of child elements, defines whether an element is empty or can include

text, defines data types for elements and attributes and defines default and fixed values for elements

and attributes.

XSLT stands for Extensible Stylesheet Language Transformations. It is defined as a language for

21

expressing stylesheets. This broad definition is broken into two parts, such as XSL is a language for

transforming XML documents and the other definition is XSL is an XML vocabulary for specifying

the formatting of XML documents. The definitions are similar, but one deals with moving from one

XML document form to another, while the other focuses on the actual presentation of content within

each document. Perhaps a clearer definition would be to say that XSL handles the specification of

how to transform a document from format A to format B.

SVG stands for Scalable Vector Graphics. SVG supports high quality vector and raster graphics,

animation and interactivity. Possible usage scenarios include, Web design in general, Web mapping

and Online GIS-services, navigation and routing, Location based services (SVG mobile) and User

interface for websites in general etc. SVG allows defining high level 2D graphics objects: basically

we have vector-based geometry, raster images and text. Using SVG has many advantages, such as,

SVG files can be read and modified by a large range of tools (e.g. notepad), SVG files are smaller

and more compressible than JPEG and GIF images, SVG images are scalable etc.

As SVG is a quite young technology, there is rarely native SVG support in the major browsers.

Penetration of SVG plug-in is still low and no SVG viewer already supports the entire specifications.

Adobe currently provides the most sophisticated viewer, implemented as a plug-in for

Internet-Explorer and Netscape, on both Machintosh and Windows platform. The Mozilla team is

working on a native browser implementation for Mozilla 1.0 (multiplatform) and the

KDE/Konqueror team works for native support for this excellent Linux/Unix browser.

JDOM is an open source library for java-optimized XML data manipulations. Although it’s similar to

the World Wide Web Consortium’s (W3C) DOM, it’s an alternative document object model that was

not built on DOM or modeled after DOM. The JDOM library consists of six packages. Namely,

org.jdom, org.jdom.input, org.jdom.output, org.jdom.transform, org.jdom.xpath and

org.jdom.adapters

There are a lot of network topology display softwares existing. Active Directory Replication

Monitor, LANsurveyor, Switch Center Workgroup, LANTopolog, Monitor one, and Network

mapping and CiscoWorks2000 desktop (topology service feature) are some of them.

22

CHAPTER THREE

IMPLEMENTATION OF THE PROJECT

3.1 Design of the Project

The main task of this project is to convert the XML file into a picture. From the perspective of

system implementation, in order to achieve the network topology visualization, it needs to complete

the following objectives:

1. Write a complete XML Schema according to the output design, and standardize the XML

documents.

2. Write an XSL file, which can achieve the network topology display from text-based to

graphical conversion. (Conversion of XML to SVG)

3. Using Java Application generate the SVG file automatically.

4. Design a user interface.

3.2 XML Schema file

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">

<xs:element name="XMLtoSVG">

<xs:complexType>

<xs:sequence>

<xs:element ref="topology"/>

</xs:sequence>

</xs:complexType>

</xs:element>

<xs:element name="topology">

<xs:complexType>

<xs:sequence>

23

<xs:element maxOccurs="unbounded" ref="device"/>

<xs:element maxOccurs="unbounded" ref="connection"/>

<xs:element maxOccurs="unbounded" ref="icon"/>

<xs:element maxOccurs="unbounded" ref="line"/>

</xs:sequence>

</xs:complexType>

</xs:element>

<xs:element name="device">

<xs:complexType>

<xs:attribute name="desc" use="required"/>

<xs:attribute name="id" use="required" type="xs:NCName"/>

<xs:attribute name="ip" use="required" type="xs:NMTOKEN"/>

<xs:attribute name="name" use="required"/>

<xs:attribute name="type" use="required" type="xs:NCName"/>

<xs:attribute name="x" use="required" type="xs:integer"/>

<xs:attribute name="y" use="required" type="xs:integer"/>

</xs:complexType>

</xs:element>

<xs:element name="connection">

<xs:complexType>

<xs:attribute name="bandwidth" use="required" type="xs:NMTOKEN"/>

<xs:attribute name="desc" use="required"/>

<xs:attribute name="id" use="required" type="xs:NCName"/>

<xs:attribute name="source" use="required" type="xs:NCName"/>

<xs:attribute name="target" use="required" type="xs:NCName"/>

</xs:complexType>

</xs:element>

<xs:element name="icon">

<xs:complexType>

<xs:attribute name="height" use="required" type="xs:integer"/>

<xs:attribute name="image" use="required" type="xs:NCName"/>

<xs:attribute name="type" use="required" type="xs:NCName"/>

<xs:attribute name="width" use="required" type="xs:integer"/>

24

</xs:complexType>

</xs:element>

<xs:element name="line">

<xs:complexType>

<xs:attribute name="bandwidth" use="required" type="xs:NMTOKEN"/>

<xs:attribute name="width" use="required" type="xs:integer"/>

</xs:complexType>

</xs:element>

</xs:schema>

Figure 3.1The Structure of the Schema

25

Technically, a schema is an abstract collection of metadata, consisting of a set of schema

components: chiefly element and attribute declarations and complex and simple type definitions.

Their components are usually created by processing a collection of schema documents, which

contain the source language definitions of these components. In popular usage, however, a schema

document is often reffered to as a schema.

Schema documents are organized by namespace: all the named schema components belong to a

target namespace, and the target namespace is a property of the schema document as a whole.

In above code xmlns stands for XML namespace. xs: stands for XML Schema.

xmlns:xs=http://www.w3.org/2001/XMLSchema

A complex element is an XML element that contains other elements and/or attributes.

There are four kinds of complex elements:

Empty elements

Elements that contain only other elements

Elements that contain only text

Elements that contain both other elements and text

In above code <xs:complexType> defines the complex element in that code.

There are seven indicators which we can find in an XML schema:

Order Indications:

All

Choice

Sequence

Occurrence indicators:

maxOccurs

minOccurs

26

http://www.w3.org/2001/XMLSchema

Group indicators:

Group name

Attribute Group name

Order indicators are used to define the order of the elements.

The <all> indicator specifies that the child elements can appear in any order, and that each child

element must occur only once. When using the <all> indicator we can set the <minOccurs> indicator

to 0 to 1 and the <maxOccurs> indicator can only be set to 1.

The <choice> indicator specifies that either one child element or another can occur.

The <sequence> indicator specifies that the child elements must appear in a specific order.

Occurrence indicators are used to define how often an element can occur.

The <maxOccurs> indicator specifies the maximum number of times an element can occur.

The <minOccurs> indicator specifies the minimum number of times an element can occur.

For all “Order” and “Group” indicators (any, all, choice, sequence, group name, and group reference)

the default value for maxOccurs and minOccurs is 1.

To allow an element to appear an unlimited number of times, use the maxOccurs = “unbounded”

statement.

Group indicators are used to define related sets of elements.

Considering all the facts above we can say that <xs:sequence> defines that the child element must

appear in a specific order.

Under the parent element “topology”, there are four child elements explained; device, connection,

icon and line.

27

maxOccurs = “unbounded” says that the elements can appear an unlimited number of times.

Under the element “device” there are seven attributes explained. Attribute “id” is an NCName (An

XML name that does not contain any colons; that is, an unprefixed name), “ip” is a NMTOKEN –

An XML name token (XML 1.0 Specification NMTOKEN type), “name” is a string, “type” is an

NCName (An XML name that does not contain any colons; that is, an unprefixed name) and “x” and

“y” are integers.

Under the element “connection” there is five attributes explained. Attribute “bandwidth” is an

NMTOKEN - An XML name token (XML 1.0 Specification NMTOKEN type); “desc” is a string,

”id”, “source” and “target” are NCNames(An XML name that does not contain any colons; that is,

an unprefixed name).

Under the element “icon” there are four attributes explained. Attribute “height” and “width” are

integers; “type” and “image” are NCNames (An XML name that does not contain any colons; that

is, an unprefixed name).

Under the element “line” there is two attributes explained. Attribute “bandwidth” is a NMTOKEN -

An XML name token (XML 1.0 Specification NMTOKEN type); and “width” is an integer.

28

3.3 XML file


<XMLtoSVG>

<topology>



<device id="r101" name="Regional ISP" ip="222.201.129.65" type="router" x="150" y="300"

desc="location: B-301"/>

<device id="r102" name="Local ISP (Host A)" ip="222.201.129.10" type="computerA" x="550" y="150"

desc="location: B-102"/>

<device id="r103" name="Company Network (Host B)" ip="222.201.129.31" type="computerB" x="550"

y="450" desc="location: A-502"/>



<connection id="c101102" source="r101" target="r102" bandwidth="100m" desc="Regional ISP to Local ISP

(Host A)"/>

<connection id="c101103" source="r101" target="r103" bandwidth="1000m" desc="Regional ISP to

Company Network (Host B)"/>



<icon type="router" image="router.jpg" width="60" height="60"/>

<icon type="computerA" image="computerA.jpg" width="50" height="50"/>

<icon type="computerB" image="computerB.jpg" width="50" height="50"/>



<line bandwidth="1000m" width="8"/>

<line bandwidth="100m" width="3"/>

</topology>

</XMLtoSVG>

29

XML document may begin by declaring some information about them as in above.


“Tags” indicating structural elements. Tags have a beginning tag, placed between angle brackets, and

an end-tag, placed between angled brackets with an additional leading forward slash. An element

consists of:

- Attributes indicating properties of elements. They have a name and a value.

- Contents, the (possibly empty) body of text between the tags.

Every XML document must have precisely one top-level root element.

In the above XML code the root element is defined by the < XMLtoSVG > tag.

, , , and  are just

comments which explains what the XML code going to show next.

The element device has 7 attributes, namely, id, name, ip, type, x, y and desc.

There are 3 devices explained in there.

EX:-

Attribute name = id, value = r101

Attribute name = name, value = Regional ISP

Attribute name = ip, value = 222.201.129.65 etc.

The element Connection has 5 attributes, namely, id, source, target, bandwidth and desc.

There are 2 connections explained.

The element icon has 4 attributes, namely, type, image, width, height.

There are 2 icons explained.

The element line has 2 attributes, namely bandwidth and width.

There are 2 bandwiths explained.

Tree30

id = r101, name = Regional ISP, ip = 222.201.129.65, type = router, x = 150, y = 300, desc = location:B-301

device

id = r102, name =Local ISP (Host A), ip = 222.201.129.10, type = computerA, x = 550, y = 150, desc = location: B-102

id = r103, name = Company Network (Host B), ip = 222.201.129.31, type = computerB, x = 550, y = 450 desc = location: A-502

id = c101102, source = r101, target = r102, bandwidth = 100m, desc = Regional ISP to Local ISP (Host A)

XMLtoSVG connection

id = c101103, source = r101, target = r103, topology bandwidth = 900m, desc = Regional ISP to Company Network

(Host B)

type = router, image = router.jpg, width = 60, height = 60

icon type = computerA, image = computerA,jpg, width = 50, height = 50

type = computerB, image = computerB.jpg, width = 50, height = 50

bandwidth = 1000m, width = 8 line

bandwidth = 100m, width = 3

Grid

31

XMLtoSVG

XMLtoSVG/topology/device id name ip type x y desc

r101 Regional ISP 222.201.129.65 router 150 300 location: B-301

r102 Local ISP (Host A) 222.201.129.10 computerA 550 150 location: B-102

r103 Company Network

(Host B)

222.201.129.31 computerB 550 450 location: A-502

XMLtoSVG/topology/connection

id source target bandwidth infor

c101102 r101 r102 100m Regional ISP to Local ISP (Host A)

c101103 r101 r103 1000m Regional ISP to Company Network (Host

B)

XMLtoSVG/topology/icon

type image width height

router router.jpg 60 60

computerA computerA.jpg 50 50

computerB computerB.jpg 50 50

32

XMLtoSVG/topology/line

bandwidth width

1000m 8

100m 3

3.4 XSL file


<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >

<xsl:key name="device" match="device" use="@id"/>

<xsl:key name="icon" match="icon" use="@type"/>

<xsl:key name="connectionWidth" match="line" use="@bandwidth"/>

<xsl:template match="/XMLtoSVG/topology">

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="800" height="600">

<xsl:apply-templates select="connection"/>

<xsl:apply-templates select="device"/>

</svg>

</xsl:template>



<xsl:template match="connection">

<line>

<xsl:for-each select="key('connectionWidth', @bandwidth)[1]">

<xsl:attribute name="style">stroke:rgb(0,0,0);stroke-width:<xsl:value-of select="@width" />

</xsl:attribute>

33

</xsl:for-each>

<xsl:for-each select="key('device',@source)[1]">

<xsl:param name="x1" select="@x" />

<xsl:param name="y1" select="@y" />

<xsl:for-each select="key('icon',@type)[1]">

<xsl:param name="offsetx1" select="@width" />

param name="offsety1" select="@height" />

<xsl:attribute name="x1">

<xsl:value-of select="$x1+$offsetx1*0.5" />

</xsl:attribute>

<xsl:attribute name="y1">

<xsl:value-of select="$y1+$offsety1*0.5" />

</xsl:attribute>

</xsl:for-each>

</xsl:for-each>

<xsl:for-each select="key('device',@target)[1]">

<xsl:param name="y2" select="@y" />

<xsl:param name="x2" select="@x" />


<xsl:param name="offsetx2" select="@width" />

<xsl:param name="offsety2" select="@height" />

<xsl:attribute name="x2">

<xsl:value-of select="$x2+$offsetx2*0.5" />

</xsl:attribute>

<xsl:attribute name="y2">

<xsl:value-of select="$y2+$offsety2*0.5" />

</xsl:attribute>

</xsl:for-each>

</xsl:for-each>

</line>

34

</xsl:template>



<xsl:template match="device">

<g id="{@id}">

<image id="{@id}" x="{@x}" y="{@y}">


<xsl:attribute name="xlink:href">

<xsl:value-of select="@image" />

</xsl:attribute>

<xsl:attribute name="width">

<xsl:value-of select="@width" />

</xsl:attribute>

<xsl:attribute name="height">

<xsl:value-of select="@height" />

</xsl:attribute>

</xsl:for-each>

</image>

<text font-size="20" fill="green"> 

<xsl:param name="y" select="@y" />

<xsl:param name="x" select="@x" />

<xsl:attribute name="x">

<xsl:value-of select="$x" />

</xsl:attribute>


<xsl:param name="height" select="@height" />

<xsl:attribute name="y">

<xsl:value-of select="$y+$height+20" />

</xsl:attribute>

</xsl:for-each>

<xsl:value-of select="@name"/>

</text>

35

</g>

</xsl:template>

</xsl:stylesheet>

In above code xmlns stands for XML namespace, and xsl stands for XSL stylesheet.

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >

The <xsl:key> element is a top-level element that can be used to define a named index of nodes from

the source XML tree(s). The element has three attributes:

name – the name of the index

match – a pattern that defines the nodeset we want indexed

use – an expression that defines the value to be used as the index key value

<xsl:key name="device" match="device" use="@id"/>

The <xsl:template> element contains rules to apply when a specified node is matched. The match

attribute is used to associate the template with an XML element. The match attribute can also be used

to define a template for a whole branch of the XML document. (eg:- match = “/” defines the whole

document).

In the above XSL stylesheet, <xsl:template match="/XMLtoSVG/topology"> matches <topology>

elements that are children of <XMLtoSVG> elements.

As the above code helps to transfer the XML code to SVG it must define the SVG contents too.

<svg xmlns="http://www.w3.org/2000/svg"

xmlns:xlink="http://www.w3.org/1999/xlink"

width="800" height="600">

36

xmlns defines the xml namespace for SVG. xmlns:xlink means that the document has access to the

xlink attributes and features.

<xsl:apply-templates> element applies a template to the current element or to the current element’s

child nodes.

If we add a select attribute to the <xsl:apply-templates> element it will process only the child

element that matched the value of the attribute. We can use the select attribute to specify the order in

which the child nodes are processed.

Therefore in the above code, <xsl:apply-templates> applies a template to the topology element to the

topology element’s child nodes, “device” and “connection”.

The <xsl:for-each> element loops through each node in a specified node set.

<xsl:for-each select="key('connectionWidth', @bandwidth)[1]">

In this systax attribute is “select” and the value is “key(‘connectionWidth’, @bandwidth)[1]”>

The <xsl:for-each> element establishes the context for iteration. The XSLT transformation

instructions within this loop are to be applied to the selected nodes. Each source element selected by

<xsl:for-each> becomes a new context against which any pattern matching within the <xsl:for-each>

occurs.

The <xsl:attribute> element is used to add attributes to elements.

The <xsl:value-of> element extracts the value of a selected node.

The <xsl:param> element is used to declare a local or global parameter.

Attribute ‘name’ is required. Specifiy the qualified names of the parameter.

The value of the attribute is an expression and the value of the variable is the object that results from

evaluating the expression. When the attribute ‘select’ is specified, the <xsl:param> element must be

empty.

In between the tag <g> it has explained the SVG contents. The texts which appear in the SVG file

must be filled with green color and the font size must be 20.

37

<text font-size="20” fill="green">

3.5 XSL generating SVG code

First step is to write the XML Schema according to the output image. From that we have to generate

XML file. Using XSL and a Java application it must be converted to SVG file automatically.

Generating XML file

Generating SVG file using XSL and a Java application

Figure 3.2

Java Application:package javaapplication1;

import java.io.FileNotFoundException;import java.io.FileOutputStream;import javax.xml.transform.Transformer;import javax.xml.transform.TransformerConfigurationException;import javax.xml.transform.TransformerException;import javax.xml.transform.TransformerFactory;import javax.xml.transform.stream.StreamResult;import javax.xml.transform.stream.StreamSource;

public class Main {

public static void main(String[] args) throws TransformerConfigurationException, TransformerException, FileNotFoundException {

38

XML Schema

XML file SVG file

TransformerFactory tFactory = TransformerFactory.newInstance(); Transformer transformer = tFactory.newTransformer( new StreamSource("pie.xsl")); transformer.transform(new StreamSource("XMLtoSVG.xml"), new StreamResult(new FileOutputStream("flow.svg")));

}

} 3.6 Generated SVG file

Generated SVG code as follows:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">

<line style="stroke:rgb(0,0,0);stroke-width:3" x1="180" y1="330" x2="575" y2="175"/>

<line style="stroke:rgb(0,0,0);stroke-width:8" x1="180" y1="330" x2="575" y2="475"/>

<g id="r101"><image id="r101" x="150" y="300" xlink:href="router.jpg" width="60" height="60"/><text font-size="20" fill="green" x="150" y="380">Regional ISP</text></g>

<g id="r102"><image id="r102" x="550" y="150" xlink:href="computerA.jpg" width="50" height="50"/><text font-size="20" fill="green" x="550" y="220">Local ISP (Host A)</text></g>

<g id="r103"><image id="r103" x="550" y="450" xlink:href="computerB.jpg" width="50" height="50"/><text font-size="20" fill="green" x="550" y="520">Company Network (Host B)</text></g></svg>

3.7 User Interface

This system is little bit hard to access for a person who don’t know much about computer.

To generate the final result firstly, Netbeans or another java editor must have installed to the user

computer. The created XML and XSL files must be stored in the same directory with the Java

application code. By running the Java application it automatically creates the SVG file.

39

Figure 3.3

Java application runs in Netbeans

40

Figure 3.4

Generated SVG image

3.8 Conclusion

This Chapter describes the design of the projectin detail including the XML Schema, XML file, XSL

file, and the generated SVG file. It also describes the User Interface.

41

CHAPTER FOUR

FUTURE WORK

As I could finish my project Computer Network Display (Putting XML into picture) successfully, I’d

like to design a map using SVG in future.

Vector-based web formats begun with SVF (Simple Vector Format) and leads to nowadays frequently

used standards, like Macromedia Flash and PDF, besides using Java-Applets. None of them are fully

appropriate for catographic requirements, which might be the reason of the usually quite poor

graphical quality of todays’ map-servers.

Currently the most widespread vector format that allows interaction is Macromedia Flash. It runs as a

Macromedia plugin within the browsers. Before the rise of SVG this was the most up-to-date

standard for the representation of vectors. However, this format has been primarily designed for

advertising and multimedia, and has, from the catographic point of view, some shortcomings that are

better implemented in the SVG format.

Format visualisation module use interactivity level internal format

SVF plugin out-dated 1 binary

DWF plugin/applet rare 2 binary

Flash plugin frequent 3 binary

PDF plugin frequent 1 binary/ascii

SVG browser/plugin rare (new) 4 ascii

PGML ² ² 3 ascii

WebCGM browser/plugin rare 2 binary

HGML ² ² 1 ascii

DrawML ² ² 0 binary

VML browser rare ³ 1 ascii

Java2D 4 applet rare (new) 4 binary

ActiveX 4 browser frequent ³ 4 binary

2) format specified but not implemented

3) only MSIE4.0+

4) not a Graphics format, but gra-phics library for programmers

0: simple display

1: zoom, layers, links on objects2: external scripts accessing graphics3: animation4: full control on objects and animations

42

When consider all those facts in the above table we can say that SVG is not yet well known.

Up to now, all attempts to deliver high-quality cartography to the web, more or less failed, often due

to technical restrictions. Most cartographers at this particular front have been busy creating

emergency workarounds, preventing them from doing their actual job. For the first time, SVG, the

new Internet vector standard, reduces this strain. It opens ways for cartographers to concentrate on

content delivery and interactions, still typical for monitor cartography. But, with SVG, not only the

visualization is optimized - SVG is an open, object-oriented file-format (not software!). It is

completely based on the XML-model. This guarantees a solid and long-term embedding into web-

environments and compatibility to other data-formats, also in non-networking environments. Thanks

to the object-hierarchy it is possible to implement all possible interactions. SVG-based projects can

also be used offline - the Adobe SVG-viewer and the open-source Batik-project (an open-source

SVG viewer, rasterizer and generator) offer programming interfaces and therefore embedding in

offline multimedia environments. The combination of the high-quality rendering SVG-Viewers

provide for both display and printing, and the architecture based on XML, allows a reduced

development time, because developers can deliver for different media types based on the same data-

source.

43

CHAPTER FIVE

SUMMARY

The subject of the application of Computer Network Display (putting XML into picture), through a

series of studies, beginning from the xml file, write a complete Schema, build the structure of

XML format and then use Schema specification of the xml could write xml file correct and

complete. Using XSLT technology, combined with java technologies, to expand on the

functionality, which allows for complex XML file compiled, using array approach to build network

topology, the XML file is converted to SVG file. Since SVG is XML based, and therefore can create

an unprecedented and powerful dynamic interactive images. SVG images can make a different

response to user actions, such as brightness, sound, special effects and animation.

44

References

Overview of Computer Networks – By:- Norman Matloff

Extensible Markup Language (XML) 1.0 (Fifth Edition) -

http://www.w3.org/TR/REC-xml/ - last accessed date: 08/06/2010

Java and XML – 3rd edition – By:- Brett D. McLaughlin and Justin Edelson

Learning XML – By:- Erik T. Ray

XML Tutorial-Volume 4: XML Schema Basics -

http://www.xmlmaster.org/en/article/d01/c04/ - last accessed date: 08/06/2010

Namespaces - http://www.dpawson.co.uk/xsl/sect2/N5536.html#d7035e898 -

last accessed date: 08/06/2010

XMLSchema Languages as a Technical Fundamental of formalised description of maps –

By:- Otakar Cerba

Introduction to XSL – Max Froumentin – W3C

SVG, CSS and XSL – Max Froumentin – W3C

Scalable Vector Graphics – From Wikipedia, the free encyclopedia

SVG Tutorial – By:- David Duce, Ivan Herman and Bob Hopgood

XML and JDOM- A Quick Tutorial – By:- Dan R. Ghica (University of Birmingham, school

of computer science)

JDOM and XML Parsing – JDOM makes XML manipulation in Java easier than ever –

otn.oracle.com/oraclemagazine (september/october 2002)

Interactive Java & JDOM online tutorial – By:- James Britt, published at TopXML

Engineering Web applications with XML and XSLT – By:- Andrea R. de Andare, Ethan V.

Munson and Maria G.C. Pimentel

Network Display technology breaks through VGA/DVI limitations – By:- Jason Slaughter

45

http://www.dpawson.co.uk/xsl/sect2/N5536.html#d7035e898

http://www.xmlmaster.org/en/article/d01/c04/

http://www.w3.org/TR/REC-xml/

Date post:	08-Apr-2015
Category:	Documents
Upload:	shashieka-fernando
View:	47 times
Download:	0 times

Putting XML in Picture

Documents