2.8.11.052101, 21 May 2019 4:25 PM : © 2019 - Mead & Company Ltd.

A sample from then to now

This walk-through illustrates taking a classic document that has a controlled print experience and works only in Internet Explorer and making it work with ScriptX.Services in any browser on any platform using the minimum amount of development effort and making as few changes as possible (though more changes might be desirable).

The starter code

<html>
<head>
<title>MeadCo's ScriptX</title>
</head>
<body onload="initView()">
<!-- MeadCo Security Manager -->
<object id="secmgr" viewastext style="display:none"
  classid="clsid:5445be81-b796-11d2-b931-002018654e2e">
  <param name="GUID" value="{C4DB5D29-BE52-46B9-9DDF-46A167170F81}" />
  <param name="PATH" value="https://licenses.meadroid.com/download/{C4DB5D29-BE52-46B9-9DDF-46A167170F81}/mlf" />
  <param name="REVISION" value="10" />
  <param name="PerUser" value="true">
</object>
<!-- MeadCo ScriptX -->
<object viewastext id="factory" style="display:none"
  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814">
</object>
<script>
function initView() {
  factory.printing.enhancedFormatting.allPagesHeader =
    "<div><center><img src='http://services.meadroid.com/images/sx-header.png'></center></div>";
  factory.printing.enhancedFormatting.allPagesFooter =
    "<div><center><img src='http://services.meadroid.com/images/sx-footer-final.png'></center></div>";
  factory.printing.SetMarginMeasure(2) // set inches
  factory.printing.header = ""
  factory.printing.footer = ""
  factory.printing.leftMargin = 1.0
  factory.printing.topMargin = 1.5
  factory.printing.rightMargin = 1.0
  factory.printing.bottomMargin = 1.5
}
</script>
<div style="font:bold 32pt courier new; text-align: justify; letter-spacing: -1px">
For nearly 20 years MeadCo's ScriptX - now installed on many millions of Windows PCs - has enabled document
 authors to script print-time attributes such as margin sizes, orientation, HTML & standard headers and 
footers, paper source, target printer, prompt-free printing and much more ... <br><br>
-> -> -></div>
</body>
</html>

The sample assumes that ScriptX.Add-on for Internet Explorer is aleady installed (no codebase). The evaluation license is used to enable advanced features to be used on content served from a web server on localhost.

An initialisation function is run when the document loads to engage the ScriptX.Add-on override of the browser UI and to describe the print layout including using enhanced formatting for page headers and footers with the use of images.

Problems

  • No doctype is provided, Internet Explorer 11 will assume standards mode, older versions will assume IE 5 mode (!) and evergreen browsers will output a complaint to the browser console.
  • No user interface is provided in the html so it is assumed that ScriptX.Add-on for Internet Explorer will override the browser UI and the user can use the standard browser controls to print or preview; gear menu etc.

Content sources for ScriptX enabled content

With a suitable publishing license ScriptX enabled html content can be loaded from disk into Internet Explorer 11, or even earlier versions of Internet Explorer. A warning will be given, and permission sought to run ActiveX Controls and then the sample would work.

However, ScriptX.Services will not work with content loaded from disk; the content must be served from a web server and the domain/URL address FROM which you are serving the ScriptX-enabled content must be listed in a MeadCo Client side publishing license.

For the purposes of this illustration we will serve the sample content from the ScriptX Samples domain. If you wish to explore in more detail yourself with different browsers you can download the sources from the  ThenToNow repository and use your own localhost server. The sources use the evaluation license which lists localhost as a valid domain.

Browse to the sample

Open Internet Explorer and go to the address  http://scriptxprintsamples.meadroid.com/ThenToNow/Then

Implement an in document UI

ScriptX.Services cannot intercept the browser UI so we first create a simple UI within the document. This will work with both ScriptX.Add-on and ScriptX.Services.

We will need jQuery as it is a dependency for the ScriptX.Add-on to ScriptX.Services compatibility libraries so we will also use it to wire up the UI.

<!-- new UI -->
<div>
<button id="btn-print">Print</button> <button id="btn-preview">Preview</button>
</div>

<!-- scriptx.services requires jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

<!-- leave current script as is, it will work .. to minimise effort -->
<script>
function initView() {
  factory.printing.enhancedFormatting.allPagesHeader = 
    "<div><center><img src='http://services.meadroid.com/images/sx-header.png'></center></div>";
  factory.printing.enhancedFormatting.allPagesFooter = 
    "<div><center><img src='http://services.meadroid.com/images/sx-footer-final.png'></center></div>";
  factory.printing.SetMarginMeasure(2); // set inches
  factory.printing.header = "";
  factory.printing.footer = "";
  factory.printing.leftMargin = 1.0;
  factory.printing.topMargin = 1.5;
  factory.printing.rightMargin = 1.0;
  factory.printing.bottomMargin = 1.5;
}
</script>

<!-- new UI script -->
<script type="text/javascript">
$(window).on("load",function() {

  viewInit();
	$("#btn-print").click(function() { 
		factory.printing.Print();
	});
	
	$("#btn-preview").click(function() { 
		factory.printing.Preview();
	});
});
</script>

As can be seen, we have retained the old viewInit() function. However as we use typical jQuery code for initialising event handlers for the UI buttons we have moved the call to viewInit() from the body tag to the jQuery "onload" event handler.

Browse to the sample

Open your browser (Internet Explorer) and go to the adress  http://scriptxprintsamples.meadroid.com/ThenToNow/ThenUI

The buttons can be used to print and/or preview the page as well as using the options from the browser Print menu.

Now - any browser : Add ScriptX.Services

To work with ScriptX.Services requires the ScriptX.Addon/ScriptX.Services compatibility javascript libraries. The libraries can be configured with attributes describing the server to use.

The ScriptX.Services Server in use is ScriptX.Services for Windows PC which listens on 127.0.0.1, port 41191. We can use the same license as we used with ScriptX.Add-on.

The following new code is needed:

<!-- Add.on to scriptx.services compatibility -->
<script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1.5.8/dist/meadco-scriptxservices.min.js"
    data-meadco-license="{C4DB5D29-BE52-46B9-9DDF-46A167170F81}"
    data-meadco-server="http://127.0.0.1:41191"
    data-meadco-license-path="warehouse"
	data-meadco-license-revision="10"
	data-meadco-syncinit="true"
>
</script>

That is all.

Browse to the sample

ScriptX.Services for Windows PC must be running on the PC. The services will not start on demand but they are started whenever a user logs-in.

If unsure, use the  ScriptX.Services dashboard to check.

Open your browser (any browser) and go to the adress  http://scriptxprintsamples.meadroid.com/ThenToNow/Now

What does not work with ScriptX.Services as it does with ScriptX.Add-on

Using other ScriptX.Services Server

To use ScriptX.Services on Cloud or ScriptX.Services for On-Premise Devices then the attributes change, for example, to work with ScriptX.Services for On-Premise Devices:

<script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1.5.8/dist/meadco-scriptxservices.min.js"
	data-meadco-subscription=""
    data-meadco-server="http://<yourlocaldomain>/<yourOnPremServicesAppName>">
</script>

Summary

The final document is:

<html>
<head>
<title>MeadCo's ScriptX</title>
</head>
<body>
<!-- MeadCo Security Manager -->
<object id="secmgr" viewastext style="display:none"
  classid="clsid:5445be81-b796-11d2-b931-002018654e2e">
  <param name="GUID" value="{C4DB5D29-BE52-46B9-9DDF-46A167170F81}" />
  <param name="PATH" value="https://licenses.meadroid.com/download/{C4DB5D29-BE52-46B9-9DDF-46A167170F81}/mlf?_={C4DB5D29-BE52-46B9-9DDF-46A167170F81}" />
  <param name="REVISION" value="10" />
  <param name="PerUser" value="true">
</object>
<!-- MeadCo ScriptX -->
<object viewastext id="factory" style="display:none"
  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814">
</object>
<div style="font:bold 32pt courier new; text-align: justify; letter-spacing: -1px">
For nearly 20 years MeadCo's ScriptX - now installed on many millions of Windows PCs - has enabled document
 authors to script print-time attributes such as margin sizes, orientation, HTML & standard headers and 
footers, paper source, target printer, prompt-free printing and much more ... <br><br>
-> -> -></div>
<!-- new UI -->
<div>
<button id="btn-print">Print</button> <button id="btn-preview">Preview</button>
</div>
<!-- scriptx.services requires jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

<!-- Add.on to scriptx.services compatibility -->
<script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1.5.8/dist/meadco-scriptxservices.min.js"
	data-meadco-license="{C4DB5D29-BE52-46B9-9DDF-46A167170F81}"
    data-meadco-server="http://127.0.0.1:41191"
	data-meadco-license-path="warehouse"
	data-meadco-license-revision="10"
	data-meadco-syncinit="true"
>
</script>

<!-- leave current script as is, it will work .. to minimise effort -->
<script>
function initView() {
  factory.printing.enhancedFormatting.allPagesHeader =
    "<div><center><img src='http://services.meadroid.com/images/sx-header.png'></center></div>";
  factory.printing.enhancedFormatting.allPagesFooter =
    "<div><center><img src='http://services.meadroid.com/images/sx-footer-final.png'></center></div>";
  factory.printing.SetMarginMeasure(2) // set inches
  factory.printing.header = ""
  factory.printing.footer = ""
  factory.printing.leftMargin = 1.0
  factory.printing.topMargin = 1.5
  factory.printing.rightMargin = 1.0
  factory.printing.bottomMargin = 1.5
}
</script>

<!-- new UI script -->
<script type="text/javascript">
$(window).on("load",function() {

  initView();
	$("#btn-print").click(function() {
		factory.printing.Print();
	});

	$("#btn-preview").click(function() {
		factory.printing.Preview();
	});
});
</script>
</body>
</html>

If the additions made to provide an on document UI are excluded, a few lines of code have been added to achieve use from anywhere:

<!-- Add.on to scriptx.services compatibility -->
<script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1.5.8/dist/meadco-scriptxservices.min.js"
    data-meadco-license="{C4DB5D29-BE52-46B9-9DDF-46A167170F81}"
    data-meadco-server="http://127.0.0.1:41191"
	data-meadco-license-path="warehouse"
	data-meadco-license-revision="10"
	data-meadco-syncinit="true"
>
</script>

And it is arguable that is one line made readable by using several lines.

However, as with the document we started with, there is no error checking, no ensuring that the license is available. The code runs synchronously which is now deprecated and there is no prompt when printing.

Improving the code and dealing with these issues will be the subject of the next article - stay tuned!