Cordova plugins
Stéphen bellanger
ysée monnier
WHAT is it?
what is it?
- Device and platform functionality
- Health Kit, Google Maps, Calendar, Camera, ...
- Interface an External Library
HOW does IT work?
HOW DOES IT WORK?
import org.apache.cordova.CordovaPlugin;
public class CustomAlertPlugin extends CordovaPlugin {
private static final String TAG = "CustomAlertPlugin";
public void initialize(CordovaInterface cordova,
CordovaWebView webView) {
super.initialize(cordova, webView);
Log.d(TAG, "Initializing MyCordovaPlugin");
}
...
}
@objc(ModusEchoSwift) class CustomAlertPlugin : CDVPlugin {
func superFunction(command: CDVInvokedUrlCommand) {
let superArg = command.arguments[0] as? String ?? ""
if msg.characters.count > 0 {
let alertController: UIAlertController =
UIAlertController(
title: "",
message: msg,
preferredStyle: .Alert
)
HOW DOES IT WORK?
Structure
HOW DOES IT WORK?
.
├── package.json
├── plugin.xml
├── src
│ └── android
│ └── com
│ └── example
│ └── CustomAlertPlugin.java
└── www
└── plugin.js
plugin.xml
HOW DOES IT WORK?
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="my-cordova-plugin" version="1.0.0">
<name>Cordova Plugin Template</name>
<description></description>
<repo>https://github.com/driftyco/cordova-plugin-template.git</repo>
<!-- android -->
<platform name="android">
<js-module src="www/plugin.js" name="plugin">
<runs/>
<!-- This is the window variable name you want, like window.MyCordovaPlugin -->
<clobbers target="CustomAlertPlugin"/>
</js-module>
<config-file target="res/xml/config.xml" parent="/*">
<feature name="CustomAlertPlugin">
<param name="android-package" value="com.example.CustomAlertPlugin"/>
<param name="onload" value="true"/>
</feature>
</config-file>
<source-file src="src/android/com/example/CustomAlertPlugin.java" target-dir="src/com/example/"/>
</platform>
</plugin>
plugin . js
HOW DOES IT WORK?
var exec = require('cordova/exec');
// Plugin name defined in `plugin.xml`
const PLUGIN_NAME = 'DatePlugin'
// Export a public function.
exports.getDate = function(success, error) {
exec(success, error, PLUGIN_NAME, 'getDate', []);
};
myplugin . java
HOW DOES IT WORK?
public class CustomAlertPlugin extends CordovaPlugin {
private static final String TAG = "CustomAlertPlugin";
public void initialize(CordovaInterface cordova, CordovaWebView webView) {
super.initialize(cordova, webView);
Log.d(TAG, "Initializing MyCordovaPlugin");
}
@Override
public boolean execute(String action, JSONArray args, final CallbackContext callbackContext)
throws JSONException {
if(action.equals("getDate")) {
final PluginResult result = new PluginResult(PluginResult.Status.OK, (new Date().toString());
callbackContext.sendPluginResult(result)
return true;
} else {
callbackContext.error(action + " not found !");
return false;
}
}
}
GOOGLE MAPS
WHAT is it?
what is it?
- Interactive map
- Web-based service
- Geometrics layers (maker, polygon, polyline ...)
- Unofficial Cordova plugin
Why Google maps
Cordova plugins?
HOW DOES IT WORK?
HOW DOES IT WORK?
cordova plugin add cordova-plugin-googlemaps \
--variable API_KEY_FOR_ANDROID="API_KEY_VALUE" \
--variable API_KEY_FOR_IOS="API_KEY_VALUE"
Features
MAP
features
var options = {
camera: {
target: {lat: ..., lng: ...},
zoom: 19
}
};
var map = plugin.google.maps
.Map.getMap(mapDiv, options)
MARKER
features
map.addMarker({
position: {lat: ..., lng: ...},
title: "Hello Cordova Google Maps for iOS and Android",
snippet: "This plugin is awesome!"
}, function(marker) { ... })
Html InfoWindow
features
var options = {
camera: {
target: {lat: ..., lng: ...},
zoom: 19
}
};
var map = plugin.google.maps
.Map.getMap(mapDiv, options)
CIRCLE
features
map.addCircle({
'center': {lat: ..., lng: ...},
'radius': 300,
'strokeColor' : '#AA00FF',
'strokeWidth': 5,
'fillColor' : '#880000'
}, function(circle) { ... });
POLYLINE
features
map.addPolyline({
points: AIR_PORTS,
'color' : '#AA00FF',
'width': 10,
'geodesic': true
}, function(polyline) { ... });
POLYGON
features
map.addPolygon({
'points': GORYOKAKU_POINTS,
'strokeColor' : '#AA00FF',
'strokeWidth': 5,
'fillColor' : '#880000'
}, function(polygon) { ... });
Questions?
cordova-plugins
By ymonnier
cordova-plugins
Cordova Plugins Presentation - University Of Toulon. Master In Computer Science - Mobile Applications.
- 409