Mobile apps created by using the Mashup SDK consist of a native component and a web-based component. Learn how you can extend the Mashup SDK API used in your third-party app for Android, for example, to give the web component access to the functionality of the native component. One such use can be passing an arbitrary parameter to the native code before closing the webview.

• Prerequisites
• Extracting sample apps
• Building and running the sample app
• Creating your own plug-in

Prerequisites

Make sure that you have experience developing Android apps. Use the following resources to develop the native Android app that uses the Mashup SDK:

• Java programming language
• Android Studio or another software development tool for creating apps for the Android platform

Complete the following tasks:

• Read the Mashup SDK overview article.
• Download the Mashup SDK distribution package.
• Read and follow the instructions in Setting up the Mashup SDK for Android app development.

Extracting sample apps

Begin your work by extracting two sample apps. The first app is part of the Mashup SDK distribution package and does not contain any plug-ins. The second app has been modified to contain two simple plug-ins:

• CloseWebView - A plug-in that allows you to close a webview by using a JavaScript method
• SimpleBridge - A plug-in that lets you pass a message from the native side of the app to the webview

1. Extract a sample app in the root folder of the Mashup SDK distribution package to a separate folder, for example, Sample1.
2. Download the Mashup SDK sample app and extract it to another folder, for example, Sample2.
3. Copy the contents of the repository folder from the Sample1 directory to the repository folder in the Sample2 directory.
4. Copy the contents of the docs folder from the Sample1 directory to the docs folder in the Sample2 directory.

Building and running the sample app

1. Use the software development tool to open the project in the Sample2 folder.
2. Examine the contents of the configuration files, such as the build.gradle file, which is in the mashup directory, and the AndroidManifest.xml file, which is in the mashup/src/main directory.
3. Learn how the webview side of the API implements methods defined on the native side of the API by calling them within the bridge.call method:
   1. Examine the contents of the CloseWebView.java file, which is in the mashup\src\main\java\com\pega\mashup\plugins directory, and the CloseWebView.js file, which is in the mashup\src\main\assets\js folder. These files implement a plug-in that closes the HybridWebView after the CloseWebView method is called.
   2. Examine the contents of the SimpleBridge.java file, which is in the mashup\src\main\java\com\pega\mashup\plugins directory and the SimpleBridge.js file, which is in the mashup\src\main\assets\js folder. These files implement a plug-in that passes a message from the native side of the app to the HybridWebView when the PostMessage method is called.

4. Build and run the app in the IDE, using your connected device or a simulator, to observe the behavior of the plug-ins.

Creating your own plug-in

1. In the mashup\src\main\assets\js folder, create a JavaScript file that performs the function that you want, for example MyPlugin.js. This file constitutes the webview component of the API, which serves as an intermediary and facilitates communications between the web app and the native side.

   You can also rename the SimpleBridge.js file, and modify the following JavaScript code in the file to perform the function that you want:

    

   (function () { 
   	 
   	window.SimpleBridge = window.SimpleBridge || {}; 
   	 
   	window.SimpleBridge.postMessage = function (message) { 
   	bridge.call("SimpleBridge", "postMessage", message, null); 
   	}; 
   	 
   	window.SimpleBridge.postMessageWithCallback = function (message, callback) { 
   	var callbackObj = { 
   	echo: callback 
   	}; 
   	bridge.call("SimpleBridge", "postMessageWithCallback", message, callbackObj); 
   	}; 
   	 
   	})();

    

2. In the Project View pane of the software development tool, create the subfolder mashup\src\main\java\com\pega\mashup\plugins.

3. Right-click the folder's icon, click New > Java Class, and enter the name of the plug-in class, for example, MyPlugin.

4. Edit the Java class file and define the method implementations. You are creating the native side of the API, which calls the JavaScript code by using the JavaScript-native side bridge functionality of the Mashup SDK.

   You can also rename the SimpleBridge.java file, and modify the following code in the file to implement the methods that you just created in the MyPlugin.js file:

   package com.pega.mashup.plugins; 
   	import android.webkit.JavascriptInterface; 
   	import com.pega.commontools.androidlogger.ALog; 
   	import com.pega.mobile.plugin.JavaScriptAppender; 
   	import com.pega.mobile.plugin.JavaScriptCallback; 
   	import com.pega.mobile.plugin.JavaScriptPlugin; 
   	import com.pega.mobile.plugin.JavaScriptPluginContext; 
   	public class SimpleBridge extends JavaScriptPlugin { 
   	public SimpleBridge(JavaScriptPluginContext context) { 
   	super(context); 
   	} 
   	@Override 
   	public String getName() { 
   	return "SimpleBridge"; 
   	} 
   	@Override 
   	public void appendJavascript(JavaScriptAppender javaScriptAppender) { 
   	javaScriptAppender.appendFile("js/simpleBridge.js"); 
   	} 
   	@JavascriptInterface 
   	public void postMessage(Object data, JavaScriptCallback callback) { 
   	ALog.i("Bridge", "Received message: " + data); 
   	} 
   	@JavascriptInterface 
   	public void postMessageWithCallback(Object data, JavaScriptCallback callback) { 
   	ALog.i("Bridge", "Received message: " + data); 
   	callback.call("echo", "ping pong:" + data); 
   	} 
   	}

5. Place any additional resources that are required by your module, such as JavaScript files, graphics, and so on, in the mashup\src\main\assets directory.

6. Modify the plugin-list file in the mashup\src\main\assets\plugins folder, by adding your plug-in in the # Project specific plugins section.

7. To avoid build errors, remove all of the attributes in the application section of the AndroidManifest.xml file in your custom module's folder.