Embedding the Query Builder

Embedding the Query Builder is a three-step process. You need to:

  • Download the official distribution package.
  • Modify the source of the HTML pages you want to add the Query Builder to.
  • Save the Query Builder files in a directory under the document root directory on your web server.

Installing the Query Builder

The Query Builder archive contains three kinds of files:

  • JavaScript
  • CSS
  • icon sprites

You will need to decompress them and copy them into the jcsdl subdirectory under the document root directory on your server or elsewhere where you want to store them. Make sure you use a separate directory for all of the Query Builder's files and make a note of their location within your server's filesystem in the relation to the document root directory. Whenever you reference them in your HTML pages, their location should be given as relative to the document root and not the filesystem root directory. For example, if the document root directory is located in /var/www/docs and you store the Query Builder's files in /var/www/docs/jcsdl, when you reference jcsdl.css from an HTML page, you would refer to it with jcsdl/jcsdl.css and not /var/www/docs/jcsdl/jcsdl.css

Embedding the Query Builder in an HTML page

To embed the Query Builder in an HTML page you need to:

  • Import the Query Builder code and style sheets.
  • Add a container element for the Query Builder and give it a CSS id.
  • Create a new instance of the Query Builder (JCSDLGui).

Example:

<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jcsdl/jcsdl.min.js"></script>
<script type="text/javascript" src="query/jcsdl.definition.js"></script>
<link rel="stylesheet" type="text/css" href="jcsdl/jcsdl.min.css" />
...
</head>

<body>
...
<div id="jcsdl"></div>
...
<script type="text/javascript">
  var editor = new JCSDLGui('#jcsdl');
</script>
...
</body>

Once initialized, the Query Builder looks like this:

demo-scaled-to-700px

You can choose the initial state of your Query Builder:

  • embed the Query Builder "empty" to let your users create new queries. That's the default behavior.
  • pre-load the Query Builder with a JCSDL query to allow your users to modify existing queries.