This article provides a step-by-step introduction to configure Syncfusion JavaScript (Essential JS 2) library and build it in the Cordova framework.
cordova
with global flag.on Windows:
npm install -g cordova
on OSX / LINUX:
sudo npm install -g cordova typescript
ej2-cordova
folder.cordova create ej2-cordova
cd ej2-cordova
npm install
cordova platform add browser
The command line
cordova platform add browser
adds cordova platform browser.
~/tsconfig.json
file.{
"compilerOptions": {
"target": "es5",
"module": "amd",
"removeComments": true,
"noLib": false,
"sourceMap": true,
"pretty": true,
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noFallthroughCasesInSwitch": true,
"allowJs": false,
"noEmitOnError": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"suppressImplicitAnyIndexErrors": true,
"outFile": "./www/js/ej2.js",
},
"files": [
"www/ts/ej2.ts"
],
"compileOnSave": false
}
The above configuration can be used to compile the TypeScript files into JavaScript AMD (Asynchronous Module Definition) modules. The
files
andoutFile
compiler options are used to integrate the input and output file references. Refer to this documentation for more information about the TypeScripttsconfig.json
file.The AMD module can be loaded using
RequireJS
in this application.
RequireJS
library script reference at the end of <body>
element in ~/www/index.html
file.<body>
....
....
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!-- RequireJS library reference -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
</body>
~/package.json
file script section for compiling TypeScript.{
....
....
"scripts": {
....
....
"build": "tsc --build tsconfig.json"
}
....
....
}
@syncfusion/ej2
npm package in the application using the following command line.npm install @syncfusion/ej2 --save
~/www/index.html
file.<!DOCTYPE html>
<html lang="en">
<head>
....
....
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
....
....
<div>
<h2>Essential JS 2 Button</h2>
<!--HTML button element, which is going to render as Essential JS 2 Button-->
<button id="normalbtn">Normal</button>
</div>
</div>
....
....
</body>
</html>
~/www/ts
, and render the Button control using following TypeScript code in the ~/www/ts/ej2.ts
file.import { Button } from '@syncfusion/ej2-buttons';
// initialize button control
let button: Button = new Button();
// render initialized button
button.appendTo('#normalbtn');
This
~/www/ts/ej2.ts
file reference has already been added in thefiles
option of~/tsconfig.json
file.
<head>
element in the ~/www/index.html
file.<head>
....
....
<!-- Essential JS 2 styles -->
<link rel="stylesheet" type="text/css" href="http://cdn.syncfusion.com/ej2/20.4.48/material.css">
</head>
~/www/js/ej2.js
.npm run build
This node script has already been configured in the
~/package.json
file’sscripts
section.
RequireJS
configurations in the script reference at the end of <body>
element in ~/www/index.html
file.<body>
....
....
<!-- RequireJS library reference -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" data-main="js/ej2"></script>
<script>
// Require.js configuration
requirejs.config({
paths: {
// Syncfusion Essential JS 2 button control UMD file location
"@syncfusion/ej2-base": "../node_modules/@syncfusion/ej2-base/dist/ej2-base.umd.min",
"@syncfusion/ej2-buttons": "../node_modules/@syncfusion/ej2-buttons/dist/ej2-buttons.umd.min"
}
});
</script>
</body>
The
data-main
attribute inRequireJS
script reference is used to load the entry point of the AMD file in the application, and it will be loaded asynchronously at the run time. Refer to this documentation for more information aboutdata-main
attribute inRequireJS
.The
paths
option should be configured with the package dependencies to resolve the path used inside module file. The Syncfusion JavaScript UI control dependencies are listed in the corresponding control’s getting started documentation. Refer to this documentation to learn about the button control dependencies.The UMD (Universal Module Definition) module supports both AMD and
CommonJS
. Refer to this documentation for more details about UMD module loading.
cordova run browser
The command line
npm run build & cordova run browser
will compile the TypeScript files and then run the application by a single step.
cordova platform add android
cordova run android
cordova platform add ios
If this application need to be started in the OSX configuration, add it using the command line
cordova platform add osx
. Refer to this documentation for more information about OSX platform development in Cordova.
cordova run ios
cordova platform add windows
cordova run windows
Refer to this documentation for more information about Windows platform development in Cordova.