Hello World!

This section shows a very simple JavaScript application that you should be able to run within minutes.

First, locate and obtain a copy of the Quick Start example provided in the Xpress Insight installation located in the following location:

<installdir>\examples\insight\quick_start.zip

Create the files client_resources/hello-world.html and client_resources/js/hello-world.js. You will also need a compiled model to drop into the app. You can copy the model from the hello-world-example example app as shown here:

<installdir>\examples\insight\developer_guide\javascript_api\hello_world_example\application.bim

You should now have the following app structure:

Hello World Folder Structure

Custom JavaScript views need to be registered in the app’s application.xml file, known as the companion file. Add the following interface to the <view-group> section of the companion file:

<html-view title="Hello World Example" default="true"
        path="hello-world.html"/>

The Hello World Example view is specified as the default view when one or more scenarios are selected. The view will be available in the Xpress Insight web client as a tab when the app is selected.

Enter the following code into your JavaScript file hello-world.js and save it:

insight.ready(function () {
  var view = insight.getView();
  view.withFirstScenario()
      .bindAutoText('#hellomessage');
  view.start();
});

This first example demonstrates a starting point for your first application using the JavaScript 4.7 API.

Note The JavaScript API is an HTML file and a JavaScript file.

Notice that the JavaScript code is wrapped up in a call to insight.ready. This ensures that your code will not be executed until the Xpress Insight API is fully initialized.

The following code should be copied into your hello-world.html file and saved:

<!DOCTYPE html>
  <html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <link type="text/css" rel="stylesheet" href="$distrib/insight-4.7.css"/>
    <script src="$distrib/insight-4.7.js"></script>
    <script src="js/hello-world.js"></script>
  </head>
  <body>
    <p class="view-initializing">Initializing...</p>
    <div class="view-initialized" style="display: none">
      <h1>Hello, world! AutoText Example</h1>
      <!-- start custom content -->
      <h1 id="hellomessage" data-entity="MyScalar"></h1>
      <!-- end custom content -->
    </div>
  </body>
  </html>

The preceding code shows all of the HTML code required to include and initialize JavaScript API 4.7. It provides all the data, state, and view management needed to develop Xpress Insight applications.

The following sections describe these codes examples in more detail.

Contents

Index

Glossary

Search Results

Hello World!