The IlvOverview component
(located in the
IlvOverview.js) file shows
an overview of the manager. An IlvOverview is
linked to an IlvView component.
By default, the IlvOverview queries
the server to obtain an image of the global area and displays it.
Once the overview is visible, a rectangle corresponding to the area
visible in the main view is drawn on top of the overview. You can
move this rectangle to change the area visible in the main view.Here is the body of the previous example with an IlvOverview component.
Note that you cannot move the rectangle of the overview now because
the complete area is visible in the main view. You be able to do
that later when the zooming functionality is added.
Note
The lines added are in bold.
<body onload="init()" onunload=”IlvObject.callDispose()”
onresize="handleResize()" bgcolor="#ffffff">
<script>
//position of the main view
var y = 40
var x = 40
var h = 270
var w = 440
// Main view
var view = new IlvView(x, y, w, h)
view.setRequestURL(’/xmlgrapher/demo.xmlgrapher.servlet.XmlGrapherServlet’)
// Overview window.
var overview=new IlvOverview(x+w+50, y+4, 120, 70, view)
overview.setColor(’white’)
view.toHTML()
overview.toHTML()
</script>
Compared to the previous example, there is a new import
statement for IlvOverview.js:
<script TYPE="text/javascript" src="script/IlvOverview.js"></script>
An IlvOverview object
located in (x+w+50, y+4) with a size of 120 x 70 was created:
var overview = new IlvOverview(x+w+50, y+4, 120, 70, view)
The following line sets the color of the draggable rectangle:
overview.setColor(’white’)
The page looks now like this:
