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
Contents

CONTENTS....................................................................................... III

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

III
IV
 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

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

3
 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

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

 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
Source: About.com Guide, http://compnetworking.about.com/od/networkdesign/ig/Computer-Network-Topologies/

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

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

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
a network. There are two main types of Network topology, namely, Physical and Logical topology.

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

CHAPTER TWO

6
 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.

Key points in an XML document:

7
(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>

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
8
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
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.
9
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
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,

10
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
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

11
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
• 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
12
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
 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
13
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
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.
14
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.

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
15
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.

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
16
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.

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,

17
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
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
18
 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.
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.

19
 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.
• 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.

20
[VLAN- virtual LAN]
[VTP – VLAN Trunking Protocol]

2.9 Conclusion
In 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
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
21
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.

CHAPTER THREE

IMPLEMENTATION OF THE PROJECT

3.1 Design of the Project

22
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>
<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>

23
<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"/>
</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>

24
</xs:schema>

Figure 3.1
The Structure of the Schema

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.

25
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

• 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.

26
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.
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,
27
”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.

3.3 XML file

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

<!--devices-->
<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"/>

28
<device id="r103" name="Company Network (Host B)" ip="222.201.129.31" type="computerB" x="550"
y="450" desc="location: A-502"/>

<!--connections-->
<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)"/>

<!--icons-->
<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"/>

<!--bandwidth mapping-->
<line bandwidth="1000m" width="8"/>
<line bandwidth="100m" width="3"/>
</topology>
</XMLtoSVG>

XML document may begin by declaring some information about them as in above.
<?xml version="1.0" encoding="UTF-8"?>

“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.

29
<!--devices-->, <!--connections-->, <!--icons-->, and <!--bandwidth mapping--> 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.

Tree
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)

30
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

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 222.201.129.31 computerB 550 450 location: A-502

(Host B)

31
 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

XMLtoSVG/topology/line

bandwidth width
1000m 8
100m 3

3.4 XSL file

<?xml version="1.0" encoding="UTF-8"?>
<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"

32
 width="800" height="600">

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

<!--Create a connection with different width -->

<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>
</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:for-each select="key('icon',@type)[1]">

33
 <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>

</xsl:template>

<!--Create device icon with a text description -->

<xsl:template match="device">
<g id="{@id}">
<image id="{@id}" x="{@x}" y="{@y}">
<xsl:for-each select="key('icon',@type)[1]">
<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"> <!-- font size = 30 -->
<xsl:param name="y" select="@y" />

34
 <xsl:param name="x" select="@x" />
<xsl:attribute name="x">
<xsl:value-of select="$x" />
</xsl:attribute>
<xsl:for-each select="key('icon',@type)[1]">
<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>
</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

35
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">

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.

36
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.
<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.

XML

Schema Generating XML file

Generating SVG file using XSL and a Java application

XML file SVG file

Figure 3.2

Java Application:
package javaapplication1;

import java.io.FileNotFoundException;
37
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 {

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>

38
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 0: simple display

3) only MSIE4.0+ 1: zoom, layers, links on objects

2: external scripts accessing graphics
4) not a Graphics format, but gra-phics library 3: animation
4: full control on objects and animations
for programmers

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