JavaScript

Introduction

Deployment

Browser Compatibility

API Reference

Release Notes

Getting Started

Installation and Upgrade

Licensing

Appearance

Common

Accordion

Accumulation Chart

AppBar

AutoComplete

Avatar

Badge

Barcode

Breadcrumb

Bullet Chart

Button

ButtonGroup

Calendar

Card

Carousel

Chart

CheckBox

Chips

Circular Gauge

Color Picker

ComboBox

ContextMenu

Dashboard Layout

DataManager

DatePicker

DateRangePicker

DateTimePicker

Diagram

Dialog

DocumentEditor

DropDownButton

DropDownList

Dropdown Tree

FileManager

FloatingActionButton

Form Validator

Gantt

Grid

HeatMap Chart

ImageEditor

In-place Editor

Kanban

Linear Gauge

ListBox

ListView

Maps

MaskedTextBox

Mention

Menu Bar

Message

MultiSelect

NumericTextBox

Pager

PDF Viewer

Pivot Table

Predefined Dialogs

ProgressButton

ProgressBar

QueryBuilder

RadioButton

Range Navigator

Range Slider

Rating

RichTextEditor

Schedule

Sidebar

Signature

Skeleton

Smith Chart

Sparkline

SpeedDial

Spinner

SplitButton

Splitter

Spreadsheet

Stock Chart

Switch

Tabs

TextBox

TimePicker

Toast

Toolbar

Tooltip

TreeGrid

TreeMap

TreeView

Uploader

/ Getting Started / Cordova Framework

Search results

Getting Started with Syncfusion JavaScript (Essential JS 2) library and Cordova

23 Mar 2023 / 6 minutes to read

This article provides a step-by-step introduction to configure Syncfusion JavaScript (Essential JS 2) library and build it in the Cordova framework.

Getting started with Cordova CLI

Prerequisites

Setup development environment

Open command prompt, and run the following command line to install the cordova with global flag.

on Windows:

npm install -g cordova

on OSX / LINUX:

sudo npm install -g cordova typescript

Create a new Cordova application by running the following command line. A new Cordova application will be created under ej2-cordova folder.

cordova create ej2-cordova

ej2 cordova new app

Navigate to the application folder, and install the required default dependencies using the following command line from command prompt.

cd ej2-cordova
npm install

ej2 cordova npm install

Run the following command line in the command prompt to install the required platforms. For getting started, the browser platform has been installed in this application.

cordova platform add browser

adding browser platform in cordova

The command line cordova platform add browser adds cordova platform browser.

Open the application in Visual Studio Code, and configure the TypeScrit compilation settings by adding the following code snippets in ~/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 and outFile compiler options are used to integrate the input and output file references. Refer to this documentation for more information about the TypeScript tsconfig.json file.

The AMD module can be loaded using RequireJS in this application.

Add the 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>

Then, add the following node script in the ~/package.json file script section for compiling TypeScript.

{
    ....
    ....
    "scripts": {
        ....
        ....
        "build": "tsc --build tsconfig.json"
    }
    ....
    ....
}

Configure Syncfusion JavaScript UI control in application

Install @syncfusion/ej2 npm package in the application using the following command line.

npm install @syncfusion/ej2 --save

ej2 cordova npm ej2 install

Add the Syncfusion JavaScript UI cotrols in the application. For getting started, the Button control is added in the application ~/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>

Now, create a folder ~/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 the files option of ~/tsconfig.json file.

Add the Syncfusion JavaScript style reference inside the <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>

Now, run the following command line to compile the TypeScript file into JavaScript AMD module file. The compiled JavaScript output file will be placed in ~/www/js/ej2.js.

npm run build

This node script has already been configured in the ~/package.json file’s scripts section.

After compiling TypeScript file, add the 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 in RequireJS 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 about data-main attribute in RequireJS.

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.

Finally, run the following command line to start the application. The button control will be rendered in the Cordova application.

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.

Running on mobile emulator/simulator

Android

The Android SDK is required to run the Cordova application in Android emulator. Refer to this Cordova documentation for more information about Android platform development in Cordava.
Run the following command line to add the Android platform in the Cordova application after installing the required software.

cordova platform add android

Then, run the following command line to start the Cordova application in Android emulator.

cordova run android

IOS

The Xcode is required to run the Cordova application in IOS simulator. Refer to this documentation for more information about IOS platform development in Cordava.
After installing the required software, run the following command line to add the IOS platform in the Cordova application.

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.

Now, run the following command line to start the Cordova application in IOS simulator.

cordova run ios

Windows

Run the following command line to add the Windows platform in the Cordova application after installing the required software.

cordova platform add windows

Then, run the following command line to start the Cordova application in Windows emulator.

cordova run windows

Refer to this documentation for more information about Windows platform development in Cordova.

Getting Started / Electron Framework

Getting Started / Ionic Framework

Contents

Getting started with Cordova CLI
Prerequisites
Setup development environment
Configure Syncfusion JavaScript UI control in application
Running on mobile emulatorsimulator
Android
IOS
Windows