Create Web and Mobile Applications

Your visual application can contain multiple web and mobile applications. Each application in your visual application is independent, but they can all use the data sources defined in the visual application.

Create a New Web Application

Each web application in your visual application is independent, but they can all use the data sources defined in the visual application.

To create a new web application:
  1. Click Web Applications in the Navigator to open the Web Apps pane.

    Structural representations of each of the web applications in your visual application are displayed in the Web Apps pane.


    Description of webapp-no-apps.png follows
    Description of the illustration webapp-no-apps.png

    If no web applications have been created, you will see a message in the pane and a + Web Application button that you can click to open the Create Web Application dialog box.

  2. Click Create Web Application ( Create Web Application ) in the Web Apps pane.

    The New Web Application dialog box contains an Id field where you enter the name of your new web application.


    Description of webapp-appnav-createdialog.png follows
    Description of the illustration webapp-appnav-createdialog.png
  3. Enter the Id for the new app in the dialog box. Click Create.
    The Id you enter is used as the display name in the Web Apps pane in the Navigator.

Create a New Mobile Application

Each mobile application in your visual application is independent, but they can all use the data sources defined in the visual application.

To create a new mobile application in a visual application:
  1. Click Mobile Applications in the Navigator to open the Mobile Apps pane.
    Structural representations of each of the mobile applications in your visual application are displayed in the Mobile Apps pane.
    Description of mobileapp-appnav.png follows
    Description of the illustration mobileapp-appnav.png

    If no mobile applications have been created, you will see a message in the pane and a + Mobile Application button that you can click to open the New Mobile Application dialog box.

  2. Click Create Mobile Application (Create Mobile Application icon) in the Navigator.
    In the General page of the New Mobile Application, specify the application name for the mobile application you are about to create. You can also choose from three navigation styles. The Horizontal navigation style with three navigation items is configured by default. A Vertical navigation style is also available. For both navigation styles, you can modify the number of navigation items down to the minimum of two or up to the maximum of five. A page flow, with a starter page, is generated for each navigation item. Alternatively, select None if you want to configure the navigation items for your mobile application later. If you select None, one page flow is generated for the mobile application.
    Description of mob-appnav-createdialog.png follows
    Description of the illustration mob-appnav-createdialog.png
  3. Click the Next icon if you want to choose a layout for the Home screen of the mobile application from a selection of predefined options or click Finish if you want configure the layout of the Home screen later.

Add a Custom Plugin to Your Mobile Application

Oracle Visual Builder uses plugins developed with the Apache Cordova framework to access the capabilities of the devices on which your mobile application is installed.

A plugin is a package of code that allows the web view within which your application renders to communicate with the native platform on which it runs. The plugin does this by providing a JavaScript interface to native components that allows your application to use native device capabilities, such as camera, geolocation, and so on.

Oracle Visual Builder provides a range of plugins that are ready to use in the mobile applications that you create. One example is the camera plugin that is used when you configure your mobile application to use the Take Photo action. The plugins that Oracle Visual Builder delivers provide coverage for a wide range of use cases. For those use cases where Oracle Visual Builder does not provide a plugin ready to use, you can import a plugin into your mobile application using the Custom Plugins page of your mobile application’s Settings screen. To identify the plugins that Oracle Visual Builder delivers, run the following command from the Cordova command-line interface after you add the Android or iOS platform, as described in the readme.md file included in the Cordova project source that you’ll download as a first step to adding a plugin to your mobile application.

cordova plugin ls

To find a plugin to use in your application, go to the Plugins page at https://cordova.apache.org/plugins/ that provides a registry of core and third-party Cordova plugins. Core plugins are plugins provided by Apache Cordova while third-party plugins are those developed by independent developers. Core plugins display a blue vertical strip to the left of the card that describes the plugin, as shown in the following image, where a core plugin (cordova-plugin-dialogs) appears after a third-party plugin named com-artemisoftnian-plugins-unityads2.

The Plugins page categorizes plugins according to the platform on which the plugins will run. Some plugins run on a wide variety of mobile platforms (Android, iOS, and so on), such as the cordova-plugin-dialogs shown in the image while other plugins may only support one platform. Ensure that the plugins you install in your application support the platforms where your application will run. Each entry generally provides information such as a brief description of the plugin’s functionality, the platforms it supports, and the number of days since it was updated. It then links to a web page where you can access more documentation for the plugin, such as how to install it in your application, how to use the APIs it provides, and any known issues with regard to its usage.

If you cannot find a plugin that meets your requirements, you can develop your own plugin. Although this blog post makes reference to another mobile development framework (MAF), it provides a suitable introduction to creating a Cordova plugin that could be used in a mobile application developed using Oracle Visual Builder or any Cordova-based application.

Having identified or developed the plugin you want to use in your mobile application, download the cordova-package.zip file using the Cordova Project Source link in the Custom Plugins tab of your mobile application’s Settings page. The Readme.md file that is included in the cordova-package.zip file provides step-by-step instructions that describe how to add a plugin to the Cordova project and build the application for Android and/or iOS. Once you have successfully built the application, you upload the APK file (for Android) or the IPA file (for iOS) using the appropriate Upload Template Application dialog that you access from the New dropdown list in the Uploaded Templates section of the Custom Plugins tab.

You can upload one debug and one release template application for both Android and iOS. After you upload the template application, the build configuration for the platform and build type references the template application that you have uploaded. For example, if you upload a template application for Android with a built type of Release, that template application is associated with the build configuration of Release type for Android.

Having uploaded the template application that packages the Cordova plugin that you want to use in your mobile application, you can now write JavaScript functions that invokes the interfaces that the plugin provides access to. To accomplish this task, refer to the documentation that is provided with the plugin. Plugin documentation should also identify known issues with the plugin, if any exist. The following snippet of sample code demonstrates how you might initiate a barcode scan using the phonegap-plugin-barcodescanner plugin from a mobile application that uses this plugin.

function _showBarcodeScanner() {   
        // wrap the call with a promise 
        var barcodeScannerPromise = new Promise(function (resolve, reject) {
            window.cordova.plugins.barcodeScanner.scan
                (function (result) {
                    resolve(result.text);                    
                }, 
                function (err) {
                    console.error(err);
                reject(err);
            });
        });
        return barcodeScannerPromise;
    }