I'm making an app in cordova. I've installed some plugins, but problem is that I cannot use those plugins as when I try to call them like window.plugins.googleplus.login then it says property 'plugins' does not exists on window. So I searched from solution and they said use window['plugins'] I tried that too, but now it says undefined.
I tried cordova plugins ls and it lists all my plugins. Also checked available plugins in android.json, all plugins are there. Can anyone help me why it is undefined? My index.html looks like below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrmbl</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<base href="./">
<script type=”text/javascript” src="cordova.js"></script>
</head>
<body>
<app-root>
<center>
<div style="margin-top: 200px;">
<img src="./assets_v2/images/icon.png" alt="" >
<br><br>
<img src="./assets_v2/images/preloader.gif" alt="">
</div>
</center>
</app-root>
</body>
</html>
Any help will be highly appreciated.
cordova --version
8.0.0
I think you are calling it without deviceready. None of the googleplus methods should be called before deviceready has fired. The plugin should be called when everything's ready for the plugin to be called.
Example:
document.addEventListener('deviceready', deviceReady, false); function deviceReady() {
console.log('Device is ready!'); window.plugins.googleplus.trySilentLogin(...); }
Reference visit here
Related
I want to know if it's possible to create a page (example login) with Ionic creator web site (see http://ionic.io/products/creator), download it as .zip archive (always via their web site), and than open the index.html page inside an Android webView. I need of this page only for a "GUI" of a web application (on a server) that a want to execute inside my native Android app (creating an hybrid app).
I have tryed to call this index.html page inside the WebView of my Android app but I obtain "404 - not found" message.
This is the index.html page inside the .zip archive of this my Ionic Creator little project that I have obtained from their web site:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development)
<script src="cordova.js"></script>
-->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<link href="css/ionic.app.css" rel="stylesheet">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div style="">
<div style="">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
Did you linked it properly? Did you placed it in the www folder? Can you show us our java code where you load the webview into?
i'm new with PhoneGap build and i'm tryng to write a simple app with a button for facebook login. In PhoneGap build documentation i found is very simple to add this plugin
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script>
<script src="js/facebookConnectPlugin.js"></script>
<script src="js/jq.js"></script>
</head>
<body>
<div data-role="page" id="contenuto">
<a href="index.html" data-role="button" class='bt_loginProprietario'>Login</a>
<a href="index.html" data-role="button" class='bt_loginFacebook'>Login con facebook</a>
</div>
</body>
</html>
jq.js
function loginFacebook(){
facebookConnectPlugin.login( ["email"],
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) };
};
$(document).ready(function(){
$('#contenuto').on('click','.bt_loginFacebook',function(){
loginFacebook();
});
});
in PG build i see the plugin correctly loaded but when i try to execute the app on my android phone nothing happens when i click on button. i tried to execute in my browser and i receive the error "cordova is not defined
thx for the help this is my first post, i don't understand what is wrong
update
with your suggestion my jq.js now has this code:
document.addEventListener("deviceready", function(){
$('#contenuto').on('click','.bt_loginFacebook',function(){
loginFacebook();
});
});
but when i press the button nothing happens, i saw an error in my chrome console that says cordova is not defined
help pls
This is very common for person new to cordova/phonegap.
You are using a facebook plugin for phonegap. Phonegap REQUIRES that you wait until the deviceready event fires before you access any phonegap or 3rd-party plugin services. This blog post explains in more detail.
FYI – Cordova events must be run after deviceReady
http://www.raymondcamden.com/2015/07/15/fyi-cordova-events-must-be-run-after-deviceready
I was trying to build a sample app through phonegap(3.7)(build.phonegap.com) made using polymer(0.5).The build was successful.
However, when I installed the app in my android(v4.4+) device, I could not see the polymer element(I just inserted a <paper-checkbox> to test). All other simple HTML elements were rendered normally.
I read about the android webview support of HTML import, so I tried to vulcanize the index.html, but it didn't help. But I can see the polymer element by running the python SimpleHTTPServer on my laptop, and there's no error in the browser javascript console (other than failed to load resource.. cordova.js).
Here's the index.html (non-vulcanized version) I have created:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="import" href="res/bower_components/paper-checkbox/paper-checkbox.html">
<script type="text/javascript" src="res/bower_components/webcomponentsjs/webcomponents.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<h3>POLYMER!</h3>
</div>
<br>
<p>Introducing Polymer element next...</p>
<hr>
<paper-checkbox></paper-checkbox> This is a polymer checkbox
<hr>
</div>
<script type="text/javascript">
app.initialize();
</script>
</body>
Here is the directory structure of the project
config.xml
hooks
platforms
plugins
www
config.xml
css
icon.png
img
index.html
js
index.js
res
bower_components
polymer
webcomponentsjs
icon
screen
spec
spec.html
Is there anything I'm missing?? Please help. Thanks!
Regards,
Soumya
I saw this issue in from a library that uses Polymer in github. It says its not supporting devices below Android 4.4 (Probably). I am trying to integrate with Cordova Crosswalk and see if I can get it to work. The stock browsers from lower version of Android before 4.4 are really crappy. I am really having hard time making my web apps work on lower-end devices.
Some issues like abysmally slow js performance, exceptions, bugs are rampant on older webviews. What we can do for now is to wrap our app using a different webview such as using Cordova with Crosswalk as also suggested from the link I provided above.
Hope this helps.
Here is the tutorial which I am following.
http://ccoenraets.github.io/cordova-tutorial/setup-files.html
I've done 1 to 4 steps in Module 3: Setting Up the Workshop Files.
The problem is number 5. I typed the cordova build and cordova run android exactly same as prev page. The copied contents in www folder are restored when I type those commands.
The index.html prev image is fine right after copying the contents of starter-www however they restore as initial.
Here is the initial index.html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
I didn't get any error but why did it restore automatically? Did i miss something?
Does anyone have same experience?
If you have modified something within the platform specific assets/www folder then it will be re-generated on each Cordova build
So as you said: C:\dev\plz\workshop\platforms\android\assets\www (path). If you modified any file inside this location then it will be re-generated each time.
In order to create a new project, use below command:
cordova create hello com.example.hello HelloWorld
Now it should have created a folder with name hello, go inside the folder
cd hello
Here you can see the www folder that is a common place for the code. Whatever you place here will be generated for all your specified platforms. So in your case, you copy all those files inside this folder i.e. hello/www
After that, add your desired platform, for example:
cordova platform add android
Now you can issue the build command
cordova build
and to run on device. Note device should be connected already in order to work.
cordova run android
Here you can see full list of commands
I'm new to android programming and I'm trying to use Phonegap and jQuery Mobile.
I have configured Eclipse, Android SDK and Phonegap and this is working correctly but I have trouble with jQuery.
Here is my test page for jQuery:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8">
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
$('#title2').html('THIS WORK');
deviceReadyDeferred.resolve();
}
$(document).one("mobileinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
$('#title2').html('THIS WORK');
}
</script>
</head>
<body>
<table width=100% height="50" border ="0">
<tr>
<td>
<div id="title">TEST</div>
<div id="title2">TEST2</div>
</td>
</tr>
</table>
</body>
</html>
I expected to get "TEST2" replace by "THIS WORK" but this is not the case when I launch the Android emulator.
May someone help me to find out what I'm doing wrong?
Thanks a lot for your help
Best Regards.
Florent
I confirm that I missed to include jQuery library.
Adding it solved my issue:
<script type="text/javascript" charset="utf-8" src="jquery-1.8.3.js"></script>