Tutorial: Setup dependencies

Setup dependencies

WebDocumentViewer and WebDocumentThumbnailer controls can be used as JS modules, or as controls in a global namespace. This tutorial shows how to configure your web application to use Atalasoft controls the desired way.

Global namespace

When no module systems are used then approach for WDV initialization is very straightforward. You should manually add scripts with WDV control and all its dependencies on a page and run the application.

Assume that application has an index.html page in wwwroot folder and all JS scripts for WDV and dependencies located in wwwroot\lib folder in separate subfolders, server handler is exposed on <application web address>/wdv, and image with a name Test.tif is placed in wwwroot\images folder. More details about how to gather dependencies and setup server handler can be found in tutorials Demo Application and Demo Application (ASP.NET Core).

Note The optional dependencies like Raphaël or ClipboardJS can be skipped only with this approach. AMD and CommonJS modules requires to setup all dependencies whether or not you plan to use text extraction or annotations features in WDV.

index.html

<!DOCTYPE html>
<html>
<head>
    <!-- Scripts for Web Viewing -->
    <script src="lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="lib/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
    <script src="lib/raphael/raphael.min.js" type="text/javascript"></script>
    <script src="lib/clipboard/clipboard.min.js" type="text/javascript"></script>
    <script src="lib/web-document-viewer/atalaWebDocumentViewer.js" type="text/javascript"></script>

    <!-- Style for Web Viewer -->
    <link href="lib/jquery-ui/css/jquery-ui.min.css" rel="stylesheet" />
    <link href="lib/web-document-viewer/atalaWebDocumentViewer.css" rel="stylesheet" />

    <script type="text/javascript">

        var _viewer;

        $(function() {
            RunApp();
        });

        function RunApp() {
            // Initialize Web Document Viewer
            _viewer = new Atalasoft.Controls.WebDocumentViewer({
                parent: $('.atala-document-container'),
                toolbarparent: $('.atala-document-toolbar'),
                serverurl: '/wdv',
                documenturl: 'images/Test.tif'
            });
        }

    </script>
</head>
<body>
    <div class="atala-document-toolbar" style="width: 800px;"></div>
    <div class="atala-document-container" style="width: 800px; height: 600px;"></div>
</body>
</html>

AMD configuration using RequireJS

When you use AMD module, then all dependencies should be presented because Atalasoft library will try to load them all regardless of WDV/WDT configuration. To do this, you should create a separate JS file, where all dependencies paths are set, and which is contains an entry point for the web application.

So, we should modify the previously created web page the following way. Let's create an app.js file and place it near index.html page. Then we add the RequireJS config to it, and copy our RunApp function to it.

app.js

requirejs.config({
    baseUrl: 'lib',
    paths: {
        'jquery': 'jquery/dist/jquery.min',
        'jquery-ui': 'jquery-ui/jquery-ui.min',
        'raphael': 'raphael/raphael.min',
        'clipboard': 'clipboard/dist/clipboard.min',
        'web-document-viewer': 'web-document-viewer/atalaWebDocumentViewer'
    }
});

requirejs(["web-document-viewer", "jquery"], function RunApp(Atalasoft, jQuery) {

    // Initialize Web Document Viewer
    var _viewer = new Atalasoft.Controls.WebDocumentViewer({
        parent: jQuery('.atala-document-container'),
        toolbarparent: jQuery('.atala-document-toolbar'),
        serverurl: '/wdv',
        documenturl: 'images/Test.tif'
    });

});

The next step is to setup index.html to load RequireJS and to specify app.js as entry point. To do this, you should write the following code:

index.html

<!DOCTYPE html>
<html>
<head>
    <!-- Style for Web Viewer -->
    <link href="lib/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <link href="lib/web-document-viewer/atalaWebDocumentViewer.css" rel="stylesheet" />

    <!-- data-main attribute tells require.js to load app.js after require.js loads. -->
    <script data-main="app" src="lib/requirejs/require.js" defer="defer"></script>

</head>
<body>
    <div class="atala-document-toolbar" style="width: 800px;"></div>
    <div class="atala-document-container" style="width: 800px; height: 600px;"></div>
</body>
</html>

That's all. Now the browser will load RequireJS and this framework will the rest job and load WDV script and all its dependencies. It also will notify you about missing dependencies, if you forgot mention some of them, or mention incorrectly with the following error in browser console:

Error text about missing 'clipboard' dependency

require.js:168 Uncaught Error: Script error for "clipboard", needed by: web-document-viewer
https://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:168)
    at HTMLScriptElement.onScriptError (require.js:1738)

CommonJS configuration using webpack

While CommonJS modules can't be used in browser directly but they are supported by popular bundling systems like Browserify or webpack. In this section a simple sample how to create web application using webpack is shown.

Since webpack usually installed using npm and because it by default looking for modules in node_modules folder, let's assume that Atalasoft library installed via npm too. It simplifies our webpack.config.js file for this tutorial, but you can install libraries using any other way and locate them in different folder. The package.json file for this application looks the following way:

package.json

{
  "name": "atalasoft-webpack-tutorial",
  "version": "1.0.0",
  "description": "Demo application to show Atalasoft WDV webpack support",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Atalasoft",
  "devDependencies": {
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.5.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "web-document-viewer": "^11.4.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}

Now we are ready to create demo application. First of all, we create an application entry file with the same function RunApp and store it in src folder of our project. So it looks like this

./src/app.js

require('web-document-viewer/atalaWebDocumentViewer.css');
require('jquery-ui-dist/jquery-ui.css');

var Atalasoft = require('web-document-viewer');
var jQuery = require('jquery');

// Initialize Web Document Viewer
var _viewer = new Atalasoft.Controls.WebDocumentViewer({
    parent: jQuery('.atala-document-container'),
    toolbarparent: jQuery('.atala-document-toolbar'),
    serverurl: '/wdv',
    documenturl: 'images/Test.tif'
});

The first two lines are needed to create a bundle files not only for JS code but also for CSS data.

The next step is to create index.html file with the same layout as we use in previous samples and save it in wwwroot folder.

./wwwroot/index.html

<!DOCTYPE html>
<html>
<head>
    <!-- Scripts for Web Viewing -->
    <script src="bundle.js" type="text/javascript" defer="defer"></script>

    <!-- Style for Web Viewer -->
    <link href="bundle.css" rel="stylesheet" />
</head>
<body>
<div class="atala-document-toolbar" style="width: 800px;"></div>
<div class="atala-document-container" style="width: 800px; height: 600px;"></div>
</body>
</html>

The final step is to add a webpack magic, and create a bundle from our app.js file, WebDocumentViewer and all its dependencies. For this we create a configuration file for webpack and place it in the project root.

webpack.config.js

var path = require('path');
var extractCss = require('mini-css-extract-plugin');

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'wwwroot'),
    },

    resolve: {
        alias: {
            'jquery-ui': 'jquery-ui-dist/jquery-ui',
            'jquery': 'jquery/dist/jquery',
            'raphael': 'raphael/raphael',
            'clipboard': 'clipboard/dist/clipboard',
            'webDocumentViewer': 'web-document-viewer/atalaWebDocumentViewer'
        }
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                loader: [extractCss.loader, 'css-loader']
            },
            {
                test:/\.(png|gif)$/,
                loader: 'url-loader'
            }
        ]
    },

    plugins: [
        new extractCss({filename: 'bundle.css'})
    ],

    devtool: 'source-map',
    stats: 'verbose'
};

After this, we should run webpack from command line, or from your build system and, as result of the operation, the files ./wwwroot/bundle.js and ./wwwroot/bundle.css will be created. These files will contain all scripts and styles necessary for our application.