I want to use google maps javascript api on my cordova project. I noticed by a lot of search to need to implement white list policy in config.xml. But I can't understand what to implement in config.xml. Please help. Followings are my codes and trial result.
---config.xml---
<?xml version='1.0' encoding='utf-8'?>
<widget id="net.thinctank.onmap" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Map</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="https://maps.googleapis.com/maps/api/js?key=MYKEY" />
<allow-navigation href="https://maps.googleapis.com/maps/api/js?key=MYKEY" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
---index.html---
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
---index.js---
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
this.receivedEvent('deviceready');
},
receivedEvent: function(id) {
console.log('Received Event: ' + id);
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
}
};
app.initialize();
I tried to execute by "cordova serve android" command but i got the error↓
"Refused to load the script 'https://maps.googleapis.com/maps/api/js?key=MYKEY' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback."
Related
I have a site deployed using github page and sometime i get a 404 error, this also happend in localhost using ng serve --open
If you try to go on this page for the first time, you may have a 404 error : https://maximegillot.github.io/formation/kafka
But if you go to home page : https://maximegillot.github.io/ and manualy navigate to /formation/kafka you probably wont have any problems ...
I also have this problem when my site is deployed using ng serve --open
I feel like this problem is random and i dont know where to start investigating.
To deploy i just use ng build --aot --vendor-chunk --common-chunk --delete-output-path --build-optimizer and publish /dist/mgi-site/* on github : https://github.com/MaximeGillot/MaximeGillot.github.io
my index.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gillot Maxime</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet"
type="text/css"/>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous">
...
</head>
<body>
<app-root></app-root>
</body>
</html>
file app-routing.module.ts :
const routes: Routes = [
{path: '', redirectTo: 'home', pathMatch: 'full'},
{path: 'formation/nifi', component: FormationNifiComponent},
{path: 'formation/kafka', component: FormationKafkaComponent},
{path: 'home', component: MainComponent},
{path: 'cv', component: CvComponent},
{path: 'projets', component: ProjetComponent}
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Angular is a single page application and when deployed without using the #, the hosting site tries to find the path locally as a folder path which doesn't exist and the reason why you get the 404 error.
If you don't have one already, you will need a web.config file set up to handle the redirects.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="./index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
SOURCES:
https://angular.io/guide/deployment#server-configuration
https://indepth.dev/posts/1239/deploy-an-angular-application-to-iis
this is how my view file looks like:
<mvc:View
controllerName="abc"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form"
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="APP_TITLE" showHeader="false">
<content>
<Table id="configTable" mode="None" items="{ path : '/'}">
<columns>
<Column id="bname">
<Text text="BOOKING_NAME"></Text>
</Column>
<Column> <Button icon="sap-icon://message-information" text="Info" type="Emphasized" press="handleMessagePopoverPress"/>
</Column>
<Column hAlign="Right" id="addItem" width="2em"></Column>
</columns>
</Table>
</content>
<footer>
<Toolbar class="sapContrast sapContrastPlus" width="100%">
</Toolbar>
</footer>
</Page>
</pages>
</App>
which will produce the following UI:
as you can see that button just destroys the whole column, there is a lot of space under BOOKING_NAME how can I adjust the size of the button to the column so it doesn't scratch everything? if that's not possible how can I align the text to the center of the column, I tried vAlign="Middle" but nothing changed..... I don't find anything in the sapui5 doc
actually just solved this by adding another column in that layout and instead of using an button and icon I just implemented the icon
<mvc:View
controllerName="local.controller"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:form="sap.ui.layout.form"
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:c="sap.ui.core">
and between the colum the following:
<c:Icon src="sap-icon://message-information" size="1em" id="infoDefaultCurrency" press="onInfoButtonPressed" />
Simple workaround will be using css.You can use sapui5 predefined margin class for this.
jQuery.sap.require("sap.m.MessageToast");
sap.ui.controller("local.controller", {
doSomething: function() {
sap.m.MessageToast.show("Hello UI5 World");
}
});
var oModel = new sap.ui.model.json.JSONModel({
people: [{
name: 'Joseph',
number: 1.618
},
{
name: 'DJ',
number: 0
}
]
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
});
oView.setModel(oModel);
oView.placeAt('content');
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8">
<title>MVC with XmlView</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
<mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="APP_TITLE" showHeader="false">
<content>
<Table id="configTable" mode="None" items="/people">
<columns>
<Column id="bname">
<Text text="BOOKING_NAME" class="sapUiSmallMarginTop"></Text>
</Column>
<Column>
<Button icon="sap-icon://message-information" text="Info" type="Emphasized" press="handleMessagePopoverPress" />
</Column>
<Column hAlign="Right" id="addItem" width="2em"></Column>
</columns>
</Table>
</content>
<footer>
<Toolbar class="sapContrast sapContrastPlus" width="100%">
</Toolbar>
</footer>
</Page>
</pages>
</App>
</mvc:View>
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
I have used sapUiSmallMarginTop in the sample
I have created an app using phonegap. I have installed that app in my mobile. Can anyone explain me to how to rotate my app screen based on the mobile position?
My Config.xml file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mydomain.login_form" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>LoginForm</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="sample.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="market:*" />
<preference name="loglevel" value="DEBUG" />
<preference name="orientation" value="default" />
<plugin name="net.yoik.cordova.plugins.screenorientation" spec="1.3.1" source="pgb"></plugin>
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param name="onload" value="true" />
</feature>
<feature name="Geolocation">
<param name="android-package" value="org.apache.cordova.geolocation.Geolocation" />
</feature>
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker" />
<feature name="Compass">
<param name="android-package" value="org.apache.cordova.deviceorientation.CompassListener" />
</feature>
</widget>
Thanks in advance.
You can set orientation preference into config.xml file
<preference name="orientation" value="default" />
<!-- all: default means both landscape and portrait are enabled -->
or
<preference name="orientation" value="portrait" />
or
<preference name="orientation" value="landscape" />
You can check other all config related settings here in this link
I cannot get my app properly working I target android but I use a config.xml to build my app in phonegap. What do I need to add here to make my app show camera permission when installing my app?
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.sample.com" version = "1.0.0" versionCode = "1" >`enter code here`
<name>sample</name>
<description>sample</description>
<author>sample</author>
<gap:platforms>
<gap:platform name="ios" />
<gap:platform name="android" />
<gap:platform name="webos" />
<gap:platform name="symbian.wrt" />
<gap:platform name="blackberry" project="widgets"/>
</gap:platforms>
<icon src="icon.png" />
<preference name="phonegap-version" value="3.6.3" />
<feature id="blackberry.media.camera" />
<plugin name="Camera" value="org.apache.cordova.CameraLauncher" />
<access origin="*" subdomains="true" />
<access uri="*" subdomains="true" />
<access uri="http://redasmobile.esy.es/" subdomains="true" />
<feature name="http://api.phonegap.com/1.0/network"/>
<feature name="http://api.phonegap.com/1.0/geolocation"/>
<feature name="InAppBrowser">
<param name="android-package" value="org.apache.cordova.InAppBrowser" />
</feature>
<preference name="orientation" value="portrait" />
<preference name="fullscreen" value="false" />
<preference name="target-device" value="universal" />
<feature name="Camera">
<param name="blackberry-package" value="org.apache.cordova.camera.Camera" />
</feature>
</widget>
Add those lines to your config.xml
<feature name="http://api.phonegap.com/1.0/camera" />
<feature name="http://api.phonegap.com/1.0/file" /><!-- WRITE_EXTERNAL_STORAGE; required for camera to write to camera roll -->
Do you use the cli command ie cordova build android or do you use build.phonegap.com ?
If you use the client, you have to do a : cordova plugin add org.apache.cordova.camera
If you use build phonegap you have to add
<gap:plugin name="org.apache.cordova.camera" version="0.2.4" />
in your config.xml
I want to replace all meta tags with a set of new meta tags. I have the following code
<?php
$header = '
<link rel="shortcut icon" href="/images/favicon.ico" />
<title>meta replace test</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="..." />
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="script.js"></script>';
$meta = '<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9" />';
$regex = '/<meta.*\/>/';
preg_match_all($regex, $header, $matches);
$header = preg_replace($regex, $meta, $header);
echo "<pre>";
echo print_r($matches);
echo "</pre>";
the meta tags in the $header should be replaced with the meta tags from $meta. There are 3 meta tags in the $header so it will replace 3 times unless I put all the meta tags next to eachother. I only want to replace once, no matter how many tags there are.
The regex I use is the following:
$regex = '/<meta.*\/>/';
If you want to replace all the <meta...> tags with the contents of $meta, you’ll have to remove the tags as a separate step, and then insert your replacement at a particular point.
This solution requires that the tags are in a well-formed format. Note that it hasn’t been tested.
$header = preg_replace(/<meta\s.*?\/>/isg, "", $header);
$header = preg_replace(/(<\/title>[\s\n]*)/is, "$1$meta", $header);