Table of Contents

Example : Embed the component

Steps to take :

  1. Load the API
  2. Add the component to your page
  3. Wait for the READY event.

1. Load the API

Load API from a CDN

Orbit provides a central storage of all API files. It is strongly advised to load the API from the CDN. Bug-fixes will find automatically their way into your application.

An example : 

<html title="My Publication">
 <head>
  <script type="text/javascript" src="https://cdn.orbitgt.com/api/webclient/<version>/webclient_api.js"></script>
 </head>
 <body/>
</html>

Shorthanded way to load the most recent bug-fix version API version AA.B.C is by pointing AA.B (e.g. 11.1).

Loading the API files using https protocol is recommended. Using http will in most cases result in webclient not being able to talk to https services, due to Flash Player restrictions.

Load API from the publisher server

Some API's can be loaded from the Publisher you are connecting to.
This method is not advised and should only be used if you administer the API's on the connecting Publisher yourself.

The API is located at this location : <server>/api/<version>/webclient_api.js. You can load the API by referencing this file in the header block of your html page, using a script-tag.

An example : 

<html title="My Publication">
 <head>
  <script type="text/javascript" src="<server>/api/<version>/webclient_api.js"></script>
 </head>
 <body/>
</html>

2. Embed the component in your webpage

To embed the component we need to instantiate an instance of the orbit.webclient.Client Class. The constructor expects only one argument, the DOM element we want to add our component to. The example below adds a div element and assigns an identifier to it using the id property. That way we can retrieve the element later on. The div element functions as a container for the component. 

  <div id="clientElement"/>

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.

Once the page is fully loaded, we can create our component. We create an instance of the orbit.webclient.Client class and pass a reference to the div container we created previously, to the constructor. 

<html title="My Publication">
 <head>
  <script type="text/javascript" src="<server>/api/<version>/webclient_api.js"></script>
  <script type="text/javascript">
 
    var client;
 
    function addClient()
    {
      client = new orbit.webclient.Client(document.getElementById('clientElement'));
    }
 
  </script>
 </head>
 <body onload="addClient()">
  <div id="clientElement"/>
 </body>
</html>

3. Wait for the API to be ready.

Before we can use the component we must first wait for the 'READY' event to be dispatched. We can do so right away by adding an event listener using the addEventListener() method. 

<html title="My Publication">
 <head>
  <script type="text/javascript" src="https://cdn.orbitgt.com/api/webclient/<version>/webclient_api.js"></script>
  <script type="text/javascript">
 
    var client;
 
    function addClient()
    {
      // Create the client.
      client = new orbit.webclient.Client(document.getElementById('clientElement'));
      client.addEventListener(orbit.webclient.ClientEvent.READY,
        function()
        {
          // The API is ready for use.
          client.checkLicense();
        });
    }
 
  </script>
 </head>
 <body onload="addClient()">
  <div id="clientElement"/>
 </body>
</html>

Next steps

  1. Example : Check Product License
  2. Example : Load a publication
  3. Example : Open photo
  4. Example : Manage login configuration data

Also check the other examples…

Result