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:

Before you begin

Tutorial level: intermediate.

Apache Cordova (PhoneGap)

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

Note: To learn more about the component, and any other settings and options, please go to the InAppBrowser documentation page.

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

The UI will look like:

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, Text – System browser, Name – system_browser.

And for the third one:

Value – _blank, Text – InAppBrowser, Name – in_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:
   
   1 2	var radioGroup = $('input[name=browser_type_group]:checked'); window.open(Apperyio('link_source').val(), radioGroup.val());

4. Click “Add Event.”
5. Save.

Note: To completely understand this JavaScript code, please read this section.

The added event and JavaScript code look like:

The app is now ready for testing.

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:
   
   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   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:
   
4. 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 “Add Event.”
3. 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.

The final app will look like:

Cordova WebView	System browser	InAppBrowser

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.