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="{e29212c9-3c6f-41ac-8078-4596738fdb59}" />
<param name="PATH" value="https://licenses.meadroid.com/download/{e29212c9-3c6f-41ac-8078-4596738fdb59}/mlf?_=638491734577013617" />
<param name="REVISION" value="0" />
<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.
We could, with a different license, load the html 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.
So, the first thing we need is a web server. This may be IIS Express, IIS or something very simple.
A quick web server
For testing we will use a simple web server implemented in NodeJS
Download and Install NodeJS
If you haven't installed Node yet, download the latest stable release of NodeJS from https://nodejs.org and install using all the default options.
Install the http-server package from npm
Install the http-server globally on your machine using the node package manager (npm) command line tool, this will allow you to run a web server from anywhere on your computer. Open a command prompt / powershell window and enter the following:
npm install -g http-server
Grab the sample files
If you are using Git, then clone the repository
cd \projects\scriptx\ git clone https://github.com/MeadCo/ThenToNow.git
If you don't have Git, then download the archive from the ThenToNow repository and extract the files to a suitable directory.
Start the web server
Change to the directory containing the sample files.
cd \projects\scriptx\thentonow
Start the server:
http-server
You will see something like this:
C:\projects\scriptx\thentonow>http-server Starting up http-server, serving ./ Available on: http://192.168.96.202:8080 http://127.0.0.1:8080 Hit CTRL-C to stop the server
Browse to the sample
Open Internet Explorer and go to the address http://localhost:8080/then.htm
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://localhost:8080/then-ui.htm
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 localhost, port 41191. We can use the same license as we used with ScriptX.Add-on.
<!-- Add.on to scriptx.services compatibility -->
<script src="//cdn.jsdelivr.net/npm/scriptxprint-html@1.11.1/dist/meadco-scriptxservices.min.js"
data-meadco-license="{e29212c9-3c6f-41ac-8078-4596738fdb59}"
data-meadco-server="http://localhost:41191"
data-meadco-license-path="warehouse"
data-meadco-license-revision="0"
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://localhost:8080/now.htm
- If you have used Internet Explorer note that nothing has changed, everything works exactly as before.
- If you use a browser such as Google Chrome or Microsft Edge then the buttons can be used to print the page.
What does not work with ScriptX.Services as it does with ScriptX.Add-on
- Print preview is not supported currently.
- The default is no prompt when printing - with ScriptX.Add-on the default is to print.
- Using the print options from the browser Print menu gives the browser print experience as it has not been overridden by ScriptX.Services.
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.11.1/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="{e29212c9-3c6f-41ac-8078-4596738fdb59}" />
<param name="PATH" value="https://licenses.meadroid.com/download/{e29212c9-3c6f-41ac-8078-4596738fdb59}/mlf?_=638491734577013617" />
<param name="REVISION" value="0" />
<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.11.1/dist/meadco-scriptxservices.min.js"
data-meadco-license="{e29212c9-3c6f-41ac-8078-4596738fdb59}"
data-meadco-server="http://localhost:41191"
data-meadco-license-path="warehouse"
data-meadco-license-revision="0"
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.11.1/dist/meadco-scriptxservices.min.js"
data-meadco-license="{e29212c9-3c6f-41ac-8078-4596738fdb59}"
data-meadco-server="http://localhost:41191"
data-meadco-license-path="warehouse"
data-meadco-license-revision="0"
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!