Build a JavaScript dialog and Call Origin C in the Upcoming Origin 2017

posted in: Programming | 0

Building an Origin C based dialog is challenging in two aspects:

  1. The complexity of C++ based coding and Origin C specific implementations
  2. The need to build a resource DLL using Visual Studio

In Origin2017, we have a new mechanism to create a dialog without a resource DLL. Such a dialog will be built by html & JavaScript, like a web page. By this way developers will have more flexibility of dialog design and style.

Documentation on this feature is available online.

In this post, we will show you how to build a simple calculator using this new Origin feature. This example will focus on showing JavaScript code calling Origin C functions. The reverse call, Origin C calling JavaScript, is also supported in Origin 2017, but will not be covered in this simple example.

Before we started, we need to build a calculator interface by HTML. For example:

From the interface design, we will need three types of functions: Add a char to the end of the equation, calculate the equation and clear the box.

Let’s go back to Origin and create a blank cpp file. First, we need to include two extra header files, the one called HTMLDlg.h is new in Origin2017 and that’s the one that hooks Origin and your HTML dialog together.

Now let’s create the dialog class

The first public method is the key to link the dialog to this source code, in this example, we used a special char (__FILE__) represents the same folder location where the current cpp file is.

Then provide the title of the dialog by:

We separated the adding char to the end function to two cases, string for operations and numeric for numbers, just for showing how to pass different variable type form html dialog to OriginC:

Then, define the calculation and clear function:

Finally, add the following special macro so that the JavaScript in the HTML can locate where those functions are.

After the class declaration, list the detailed function list.

In the html JavaScript, use window.external.ExtCall(FunctionName, Input1, Input2, …) to call the Origin C functions in the header.

Then you can call those functions by the buttons you created. For example:

Now we have hooked the html and Origin C together. Create a main function at the end of the cpp file to launch the dialog.

You can download this zip to see the code, or download more examples here.

Leave a Reply