Create Cordova Applications

Quantum Visualizer supports the creation of Apache Cordova apps. Cordova is an open-source development framework for mobile applications that rely on JavaScript, HTML5, and CSS3 rather than the APIs that are specific to a given platform, such as iOS and Android. The layout of a Cordova app is rendered using web views rather than any platform's native UI framework, and yet unlike web apps, they're capable of accessing native APIs and are bundled as apps for publication. For these reasons, Cordova applications are hybrid in nature, being neither native to a particular platform, nor entirely web-based, and are capable of mixing native and web-based code snippets.

Quantum Visualizer supports internationalization in Cordova applications.

    Important:
  • For Android: maximum Cordova version supported is 10.0.0
  • For Android: Adding Gradle to the global scope is a pre-requisite for building Cordova applications. For more information, refer to Gradle in Android Platform Guide.
  • For Windows: You must integrate Gradle home into your machine by setting the PATH environment variable.
  • For Mac: You can integrate Gradle into your Mac using any of the following procedures and verify the command "ls -l /usr/local/bin/gradle" points to the installed Gradle.
    1. Create a symbolic link to "/usr/local/bin/gradle" to the actual Gradle installation.
    2. Install Gradle using the command "brew install gradle".


Creating a Cordova app involves the following tasks:

Enable Cordova

To enable Cordova, do the following:

  1. On the Project menu in Quantum Visualizer , click Settings.
  2. On the Application tab, select the Enable Cordova Settings checkbox.
  3. By default, Quantum Visualizer uses the version of Cordova that you have installed, as indicated by the checkbox Use globally installed Cordova version being checked. However, if you want to use a different version of the Cordova command line interface (CLI), clear the Use globally installed Cordova version checkbox, and then from the Cordova CLI drop-down list, select the version you want. After you close the dialog box, Quantum Visualizer installs the version of Cordova that you selected. Quantum Visualizer supports Cordova version 4.2 and up.

    4. IMPORTANT: Changing the Cordova CLI version may affect your application code.

  4. Click Finish (Apply in Quantum Visualizer).

    5. Quantum Visualizer creates a Cordova folder structure accessible on the Project tab of the Project Explorer, under the Web section.

Import or Create Cordova Assets

With Quantum Visualizer, you can import existing Cordova content or create new content.

Import Cordova Assets

You can import an entire existing Cordova project into Quantum Visualizer, or import one or more assets into individual Cordova folders.

To import an entire existing Cordova project into Quantum Visualizer, do the following:

  1. Using your computer's folder browser, navigate to the Cordova project that you want to import, and compress it into an archive (.zip) file.
  2. In Quantum Visualizer, on the Project menu in Quantum Visualizer), click Import Cordova Project.
  3. Navigate to the archive file that contains the Cordova project that you want to import, click it, and then click Open.

    4. Quantum Visualizer imports the Cordova assets into the Cordova file structure within your Quantum Visualizer project.

To import one or more assets into individual Cordova folders, do the following:

  1. On the Project tab of the Project Explorer, expand the Web section, and then expand the Cordova folder.
  2. Navigate to any of the folders within the Cordova folder, click that folder's context menu arrow, and then click Import File(s). This command is also available from the context menu of the Cordova folder itself.
  3. Navigate to the file or files you want to import, select them, and then click Open.

    4. The file or files you selected are imported into that folder.

Create Cordova Assets

To create Cordova assets, do the following:

  1. On the Project tab of the Project Explorer, expand the Web section, and then expand the Cordova folder.
  2. Navigate to the folder within the Cordova folder structure where you want to add the asset, click that folder's context menu arrow, hover over New, and then select one of the following options:
    Folder
    JS File
    HTML File
    CSS File

    3. In the case of a folder, a new folder is added. In the case of a file, a new file is opened in the code editor. You can rename the file or folder by clicking its context menu arrow in the Project Explorer, clicking Rename, and then entering the name you want.

Add a Cordova Browser Widget to a Form

To make Cordova content accessible to the user of your app, you add a Cordova browser widget to a form. For information about its properties, see Cordova Browser.

To add a Cordova browser widget to a form, do the following:

  1. Open the form that you want to add the Cordova browser widget to.
  2. From the Widget tab of the Library Explorer, under the Advanced Widgets section, drag a CordovaBrowser widget onto the form. The Cordova browser widget becomes the widget of focus on the Visualizer Canvas.
  3. Associate an HTML file—typically Index.html for Cordova content—with the Cordova browser widget. To do so, on the Project tab of the Project Explorer, in the Cordova folder structure, locate the HTML file you want to associate with the browser widget—typically Index.html for Cordova content—and then drag it onto the Cordova browser widget. The widget's Master Data property is updated to associate with the HTML file you selected.

Add or Import Cordova Plugins

A Cordova plugin is a code module that extends Cordova's functionality beyond what is available in a purely web-based app, giving your Cordova context an interface to a device's native components and capabilities, such as the battery status or camera.

Cordova plugins can either be added or imported. When you add a plugin in Quantum Visualizer, you are in fact fetching it from the Apache Cordova web site. Quantum Visualizer searches the Cordova plugin catalog and lists the available plugins so that you can add the ones you want. In contrast, when you import a Cordova plugin into a Quantum Visualizer project, you browse your computer for a plugin that you have already downloaded.

By default, a number of Cordova plugins are supported in Quantum App. For more information, see Default Cordova Plugins for Quantum App.

To add Cordova plugins, do the following:

  1. On the Edit menu, click Manage Cordova Plugins. The Manage Cordova Plugins dialog box displays, and lists any plugins that you have already added to the project.
  2. Click Add. Quantum Visualizer populates the dialog box with the Cordova plugins available on the Cordova Plugins page of the Apache Cordova web site.
  3. In the Search text box, type keywords that help narrow the scope of the plugins listed.
  4. Click the name of the plugin you want, and then click Add. The plugin is added to the list of plugins associated with your project.
  5. Code your Cordova context to access the plugin. For more information, see CordovaBrowser Widget in the Quantum Visualizer Widget Programmer's Guide.

To import Cordova plugins, do the following:

  1. On the Edit menu, click Manage Cordova Plugins. The Manage Cordova Plugins dialog box displays, and lists any plugins that you have already added to the project.
  2. Click Import.
  3. Navigate to the location of the plugin, select it, and then click OK. The plugin is added to the list of plugins associated with your project.
  4. Code your Cordova context to access the plugin. For more information, see CordovaBrowser Widget in the Quantum Visualizer Widget Programmer's Guide.

Default Cordova Plugins for Quantum App

Quantum Visualizer by default supports the following plugins for Quantum App:

Battery Device Network Information
BlueTooth LE Device Motion Notification
Camera Device Orientation Push
Capture File Splashscreen
CodePush File Transfer StatusBar
Console Geolocation Vibration
Contacts Globalization Whitelist
Cordova SQLite storage InAppBrowser  
CrossWalk WebView engine Media  

 

Best Practices for Creating Cordova Applications

To ensure the best performance and security, it is recommended that you adhere to the following best practices.

Invoking Quantum Fabric Services from Cordova

With Quantum Visualizer, a Cordova application can invoke Quantum Fabric services. And if your application requires it, you can invoke Quantum Fabric services from both a Cordova context and a native context.

If your Quantum Visualizer project includes both native forms and Cordova forms, it is best to invoke Quantum Fabric services from the native context, and then pass the required data to the Cordova browser widget.

Prevent the Execution of Unverified JavaScript Functions

To prevent the execution of any unverified JavaScript functions on a device, any functions that are invoked for use in the Browser or Cordova Browser widgets should exist in the underlying JavaScript files of your project.

Manually Customize the Cordova-Generated Android Project

While integrating your Cordova-generated Android project, certain gradle dependency conflicts or android.support to androidx conversion issues can arise. From Quantum Visualizer V8 SP4 Fixpack 47, you can manually customize this Cordova project and then resolve these issues.

You can bundle this customized Cordova project by specifying the cordovabuildmode property as incremental in the androidbuild.properties file. For more information about the cordovabuildmode property, click here.

To manually customize your Cordova-generated Android project, follow these steps:

  1. You must build your Quantum Visualizer project at least once to get a temporary cordova folder, where the actual Cordova project is copied and built.
  2. After the Quantum Visualizer project is built once (which may fail due to unresolved android.support references or due to some other build conflicts), you must copy all the contents in the <konyproject>\cordovatemp\platforms\android folder to the <konyproject>/cordovaprebuilt folder.
    The Cordova project (which is, <konyproject>/cordovaprebuilt) is now available for customization.

NOTE: If you face any android.support to androidxconflicts, you can manually change those references. Alternatively, with Android Studio 3.2 and later, you can migrate an existing project to AndroidX by selecting Refactor > Migrate to AndroidX from the menu bar. This action converts all android.support references to androidx.

  1. To pick the customization from the new Cordova project, you must specify the value of the cordovabuildmode property as incremental in the androidbuild.properties file, which is located at: <konyproject>/androidbuild.properties.

NOTE: If you do not specify the cordovabuildmode property, the <konyproject>/cordovaprebuilt folder will be ignored.

NOTE: If you specify the cordovabuildmode property, the <konyproject>/cordovaprebuilt folder must be available; otherwise, the build will fail.

Errors and Workarounds

While developing Cordova supported applications in Quantum Visualizer, you might see the following errors due to memory-related issues.

Execution failed for task ':mergeDebugResources'

Error: java.util.concurrent.ExecutionException: java.io.IOException: The pipe is being closed

Follow the steps below to fix the problem:

  1. Navigate to the home directory of the user.
    You can navigate to the User home directory by running the command (Windows + R) %userprofile% on Windows machines and ~/ on Macs.
  2. In the directory, create a new file with the name gradle.properties.
  3. Copy the code below and paste it in the gradle.properties file.

    org.gradle.jvmargs=-Xms512M -Xmx4g -XX:MaxPermSize=2048m -XX:MaxMetaspaceSize=1g -Dkotlin.daemon.jvm.options="-Xmx1g"

  4. Save and close the gradle.properties file.
  5. Run the command gradle -- stop on your machine. This action stops the Gradle process and unlocks any locked files by Gradle.