The IlvView JavaScript component

The IlvView component (located in the IlvView.js file) is the main component. This component queries the servlet and displays the resulting image.

To use this component, you need to include the following JavaScript™ files: IlvUtil.js , IlvView.js , the files for the superclasses of IlvView: IlvAbstractView.js, IlvResizableView.js, and IlvEmptyView.js, and IlvGlassView.js.

Instead of including the individual .js files of each component, you can add the file framework.js which is located in <installdir> /jviews-framework89/lib/thinclient/framework/framework.js

This file is a concatenation of all the .js files required for doing JavaScript Web application in the Framework.

Here is a simple HTML page that creates an instance of IlvView:

HTML code

<html>
<head>
<META HTTP-EQUIV="Expires" CONTENT="Mon, 01 Jan 1990 00:00:01 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>
<script TYPE="text/javascript" src="script/IlvUtil.js"></script>
<script TYPE="text/javascript" src="script/IlvEmptyView.js"></script>
<script TYPE="text/javascript" src="script/IlvImageView.js"></script>
<script TYPE="text/javascript" src="script/IlvGlassView.js"></script>
<script TYPE="text/javascript" src="script/IlvResizableView.js"></script>
<script TYPE="text/javascript" src="script/IlvAbstractView.js"></script>
<script TYPE="text/javascript"  src="script/IlvView.js"></script>
<script TYPE="text/javascript">

function init() {
  view.init()
  return false
}

function handleResize() {
  if (document.layers) 
   window.location.reload()  
}
</script>
<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’)
view.toHTML()

</script>
</body>
</hmtl>

This example starts by importing some JavaScript files:

<script TYPE="text/javascript" src="script/IlvUtil.js"></script>
<script TYPE="text/javascript" src="script/IlvEmptyView.js"></script>
<script TYPE="text/javascript" src="script/IlvImageView.js"></script>
<script TYPE="text/javascript" src="script/IlvGlassView.js"></script>
<script TYPE="text/javascript" src="script/IlvResizableView.js"></script>
<script TYPE="text/javascript" src="script/IlvAbstractView.js"></script>
<script TYPE="text/javascript"  src="script/IlvView.js"></script>

In the body of the page, the example creates an IlvView object located in (40, 40) on the HTML page. The size is 440 x 270. This view displays images produced by the servlet XmlGrapherServlet. Note the toHTML method that creates the HTML necessary for the component.

This example also defines two JavaScript functions:

The init function, called on the onload event of the page, initializes the IlvView by calling its init method.
The handleResize function, called on the onresize event of the page, reloads the page when the Web browser is resized.

Note

The global IlvObject.callDispose() function must be called in the onunload event of the HTML page. This function disposes of all resources acquired by the JViews JavaScript components.

Once the image is loaded from the server, the page now looks like this:

Generated HTML page

Current section

Developing the client