Recent Changes

This is documentation of an archived release.
For documentation on the current version, please check Knowledge Base.

Example : Load a publication

Steps to take :

Load the API.
Embed the viewer component into your webpage.
Connect to your server and load the publication.

1. Load the API

We start by loading the API from the server we are connecting to. The API is always located here : <server>/api/orbit_webclient.js. You can load the API by referencing this file in the header block of your html page, using a script-tag.

Note that you should always use the API on the server and never copy the API to your web application. This ensures that the API always knows exactly how to talk to the server.

An example :

<html title="My Publication">
 <head>
  <script type="text/javascript" source="<server>/api/orbit_webclient.js"></script>
 </head>
 <body/>
</html>

2. Embed the component in your webpage

Creating the component is easy : we just instantiate the orbit.webclient.Client class. It expects at least one constructor argument : the DOM element we want to add our component to. We add a simple div element to our page and given it an identifier, so we can retrieve it later on. The div element functions as a “hook” to attach it to.

  <div id="viewerElement"/>

Before we can add the component, we need to wait for the page to fully load. If we don't do this, the div element may not exist yet. In the example below we wait for the “onload” event to fire, but other javascript libraries often provide their own way of waiting for the page to load.

When the page is loaded, we can add the component. The component is added by creating an instance of the orbit.webclient.Client object. The System component needs to know where it should go in the page, so we pass a reference to the div element to the constructor.

<html title="My Publication">
 <head>
  <script type="text/javascript" source="<server>/api/orbit_webclient.js"></script>
  <script type="text/javascript">
 
    var viewer;
 
    function addViewer()
    {
      viewer = new orbit.webclient.Client(document.getElementById('viewerElement'));
    }
 
  </script>
 </head>
 <body onload="addViewer()">
  <div id="viewerElement"/>
 </body>
</html>

3. Load a publication

Before we can use the API we must first wait for the 'systemReady' event to be dispatched. We can do so right away by adding an event listener using the addEventListener() method. When the API is ready, we can configure which server to use, which credentials to use and just load the publication using the setServer(), setCredentials() and loadPublication() methods.

If you don't specify credentials, the system will ask for them.

<html title="My Publication">
 <head>
  <script type="text/javascript" source="<server>/api/orbit_webclient.js"></script>
  <script type="text/javascript">
 
    var viewer;
 
    function addViewer()
    {
      // Create the viewer.
      viewer = new orbit.webclient.Client(document.getElementById('viewerElement'));
      // Listen for the 'ready' event.
      viewer.addEventListener(orbit.webclient.ClientEvent.READY,
        function()
        {
          // Load the publication.
          viewer.setServer(<server>);
          viewer.setCredentials(<username>,<password>);
          viewer.loadPublication("myPublication");
        });
    }
 
  </script>
 </head>
 <body onload="addViewer()">
  <div id="viewerElement"/>
 </body>
</html>

Result

Last modified:: 2019/03/25 11:36