Appery.io

The Appery.io Developer Hub

Welcome to the Apperyio developer hub. You'll find comprehensive guides and documentation to help you start working with apperyio as quickly as possible, as well as support if you get stuck. Let's jump right in!

Guides    Latest Updates

InAppBrowser

Using the InAppBrowser API

What are we going to build?

In this tutorial, you’ll learn how to build an app that navigates to a web page via various methods of the Apache Cordova InAppBrowser plugin. The InAppBrowser plugin provides the ability to spawn a browser instance from the application.

The app will look like:

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io.

Creating a new app

Create a new app in the app builder. From the Apps page, enter an app name and click Create. You’ll see a start page.

Creating the UI

First, place an Input component on the page and rename it to link_source. Type a link (which will be used by default), into the Text field. Place a Button component on the page, and rename it to open_browser_button. Next, place the Radio component and rename it to browser_type_group.

Set _self as value for the first Radio button. Type Cordova WebView for the Text property, and rename the button to cordova_web_view. Check the Selected box.

Create two other Radio buttons in a similar way. For the second button:

Value_system, TextSystem browser, Namesystem_browser.

And for the third one:

Value_blank, TextInAppBrowser, Namein_app_browser.

Invoking from JavaScript

InAppBrowser can be invoked via JavaScript:

  1. Open the Design tab.
  2. Select the open_browser_button, open the Events tab, and add the following event: open_browser_button> Click > Run JavaScript.
  3. Add the following JavaScript:
var radioGroup = $('input[name=browser_type_group]:checked');
window.open(Apperyio('link_source').val(), radioGroup.val());
  1. Click Save.

Wrapping into a service

InAppBrowser can be also invoked via a service.

Note: Don’t use both methods (Invoking from JavaScript and this one) at the same time.

Appery.io doesn’t have a predefined InAppBrowser component; instead, this example uses a Generic Service.

  1. From Projects view: Create New > Service > Generic (custom JavaScript implementation), enter name InAppBrowserService and click Create Service. The service will be listed under the Services folder.
  2. Open the service and go to the Request tab. Specify two parameters – link and browser_type.
  3. Go to the Settings tab and click Add custom implementation. Type InAppBrowser as name and click Create.
  4. You’ll see the default implementation. You’ll need to make some changes and add some code. Your custom implementation should look like:
Appery.InAppBrowser = Appery.createClass(null, {
    init : function(requestOptions) {
        this.__requestOptions = $.extend({}, requestOptions);
    },
    process : function(settings) {
        settings.beforeSend(settings);
        if (this.__requestOptions.echo) {
            settings.success(this.__requestOptions.echo);
        } else {
            window.open(settings.data.link, settings.data.browser_type);
            settings.success({});
        }
        settings.complete('success');
    }
});

Binding the service

  1. Open the Data tab.
  2. For datasource, select Service > InAppBrowserService > Add. The InAppBrowser service will be added to the page. Name it in_app_browser_service.
  3. Create the following mapping for Before send event:
  1. Save.

Launching the InAppBrowser

  1. Open the Design tab.
  2. Select the button, open the Events tab, and add the following event: open_browser_button> Click > Invoke service > in_app_browser_service, and click Save.

Testing the app

Since we’re invoking a native component, this app needs to be tested as a hybrid app, or installed on the device.

Android

Android testing options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app. You can find it in the Google Play Store.
  2. Build the Android binary and install it your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

iOS options:

  1. Use the Appery.io Mobile Tester app. It’s an app that allows you to launch any app created in Appery.io as a hybrid app.
  2. Build the app and install it on your device.