I followed official Sencha learning tutorial to setup my first phonegap app with sencha touch give on this link.
And here's my index.html code -
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<script type="text/javascript" src="lib/touch/sencha-touch-debug.js"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="cordova-1.8.1.js"></script>
<script type="text/javascript">
/* Ext.application({
name : "DemoApp",
launch : function() {
console.log("App launch");
}
}); */
</script>
<script type="text/javascript">
document.addEventListener("deviceready", DemoApp.launch, false);
</script>
</head>
<body>
</body>
</html>
And my app/app.js contains -
Ext.application({
name: 'DemoApp',
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
if (!device || !this.launched) {return;}
console.log('mainLaunch');
}
});
All the paths to the script are absolutely correct but still I get following error.
Uncaught ReferenceError: DemoApp is not defined at file:///android_asset/www/index.html:19
I also tried putting app.js in index.html itself but above error still persists. Sencha js and css are included correctly as I'm not getting any error regarding Ext not defined etc etc.
What else could be the reason. Any help is highly appreciated.
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="cordova-1.8.1.js"></script>
should be
<script type="text/javascript" src="cordova-1.8.1.js"></script>
<script type="text/javascript" src="app/app.js"></script>
Related
I am developing an android app using phonegap. I have added google-play-services library project successfully. Now I want to integrate AdMob for advertising purpose. I have followed these steps https://developers.google.com/mobile-ads-sdk/docs/. My project is built and run successfully but ads are not showing there.
I have added AdMob Cordova Plugin and the SCRIPT in index.html. Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!--<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" />-->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->
<!-- <link href="lib/ionic/css/ionic.css" rel="stylesheet"> -->
<link href="css/app.css" rel="stylesheet">
<!-- <link href="css/leaflet.css" rel="stylesheet">
<link href="css/leaflet.draw.css" rel="stylesheet">
<link href="css/nv.d3.css" rel="stylesheet"> -->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<style type="text/css">
.css-form input.ng-invalid.ng-dirty {
/*background-color: #FA787E;*/
outline: none;
box-shadow:0px 0px 7px #FA787E;
border-color:#FA787E;
}
.css-form input.ng-valid.ng-dirty {
/*background-color: #78FA89;*/
outline: none;
box-shadow:0px 0px 7px #78FA89;
border-color:#78FA89;
}
</style>
<!-- ionic/angularjs js -->
<script src="js/leaflet.js"></script>
<script src="js/d3.js"></script>
<script src="js/nv.d3.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.js"></script>
<script src="js/geolocation.js"></script>
<script src="js/angularjs-nvd3-directives.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-leaflet-directive.min.js"></script>
<script src="js/leaflet.draw.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view animation="slide-left-right-ios7">
</ion-nav-view>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="deviceinfo.js"></script>
<script type="text/javascript" src="telephonenumber.js"></script>
<script type="text/javascript" src="sharedprefs.js"></script>
<!-- your app's js -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
<script type="text/javascript" src="js/geolib.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript">
Date.prototype.deductHours= function(h){
this.setHours(this.getHours()-h);
return this;
}
Date.prototype.addHours= function(h){
this.setHours(this.getHours()+h);
return this;
}
</script>
<script>
function onDocLoad() {
initApp();
}
function initApp() {
initAd();
console.log("initApp is running");
// display the banner at startup
window.plugins.AdMob.createBannerView();
}
function initAd(){
if ( window.plugins && window.plugins.AdMob ) {
console.log("initAd is running");
var ad_units = {
ios : {
banner: 'ca-app-pub-2899535788334936/6458250207',
interstitial: 'ca-app-pub-2899535788334936/3672907408'
},
android : {
banner: 'ca-app-pub-2899535788334936/6458250207',
interstitial: 'ca-app-pub-2899535788334936/3672907408'
}
};
var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;
window.plugins.AdMob.setOptions( {
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
bannerAtTop: false, // set to true, to put banner at top
overlap: false, // set to true, to allow banner overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: false, // receiving test ad
autoShow: true // auto show interstitial ad when loaded
});
registerAdEvents();
} else {
alert( 'admob plugin not ready' );
}
}
function registerAdEvents() {
document.addEventListener('onReceiveAd', function(){});
document.addEventListener('onFailedToReceiveAd', function(data){});
document.addEventListener('onPresentAd', function(){});
document.addEventListener('onDismissAd', function(){ });
document.addEventListener('onLeaveToAd', function(){ });
document.addEventListener('onReceiveInterstitialAd', function(){ });
document.addEventListener('onPresentInterstitialAd', function(){ });
document.addEventListener('onDismissInterstitialAd', function(){ });
}
function onResize() {
var msg = 'web view: ' + window.innerWidth + ' x ' + window.innerHeight;
document.getElementById('sizeinfo').innerHTML = msg;
}
</script>
</body>
</html>
Can anyone tell me what actually I have missed here? I think my project is not finding the plugin anyhow. But I have added the the plugin in config.xml also. Then whats wrong? Please reply!!
No need to add separate sdk's for both GCM and AdMob, google play services contains both sdk you can use it. Use latest android google play services that contains both sdk packages.
You are doing with old way, actually, google have declared updated google_play_services library, which contains all your individual libraries in it. So dont use individual libs, just get updated google_play_service lib and go on...!!!
Ok my problem solved. The problem was not related to google-play-sevices configuration. So I can't accept any answer. Thank you everyone to help me. At least I got the surety that I was not wrong in google-play-services and admob configuration.
I'm have trouble using the widget dojox.mobile.TextBox in my Android app.
Here is the simple html file:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="dojo/dojox/mobile/themes/custom/custom.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/cordova-2.6.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
}
</script>
</head>
<body onload="onLoad();">
<div>
<input data-dojo-type="dojox.mobile.TextBox" placeHolder="Enter LAST name" />
</div>
<script type="text/javascript" charset="UTF-8" src="dojo/dojo/dojo.js" ></script>
<script type="text/javascript" charset="UTF-8">
// Load the widget parser and mobile base
require([
"dojox/mobile/parser",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/TextBox"
], function(parser, deviceTheme) {
// Parse the page for widgets!
parser.parse();
});
</script>
</body>
</html>
And Here is the error I get:
06-04 15:22:52.304: E/Web Console(28791): Uncaught Error: declare dojox.mobile.TextBox: mixin #1 is unknown. Did you use dojo.require to pull it in? at file:///android_asset/www/dojo/dojo/dojo.js:15
I also tried with dojox.mobile.app.TextBox but then I get:
06-04 15:46:16.192: E/Web Console(29566): Uncaught TypeError: Cannot read property 'dynamic' of undefined at file:///android_asset/www/dojo/dojo/dojo.js:15
I made sure I have the last version of dojo.
If anybody has an answer it would really help me.
Thanks.
I would start by moving:
<script type="text/javascript" charset="UTF-8" src="dojo/dojo/dojo.js" ></script>
<script type="text/javascript" charset="UTF-8">
// Load the widget parser and mobile base
require([
"dojox/mobile/parser",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile",
"dojox/mobile/TextBox"
], function(parser, deviceTheme) {
// Parse the page for widgets!
parser.parse();
});
into the head tag area and add "dojo/domReady!" to you dojo require block. You should probably add another thing in the head to configure dojo properly:
<script>dojoConfig = {
async: true,
parseOnLoad: true
}
</script>
You should study all the examples located here:
http://download.dojotoolkit.org/release-1.9.0/dojo-release-1.9.0/dojox/mobile/tests/
So i've gotten jQuery 1.8.2 working with Phonegap no problem, but as soon as I add in jquery.mobile.1.2.0, the default Phonegap example breaks. the deviceready event stops firing.
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<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>
<input type="text" name="firstname" id="firstname" />
Say Hello
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function displayHello(){
var name = document.getElementById("firstname").value;
navigator.notification.alert("My name is "+ name);
}
</script>
</body>
</html>
index.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
}
};
So this is the default code example Phonegap comes with, and i've only added
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
in index.html.
Not sure what is going on as it seems other people have gotten Phonegap and jQuery Mobile to work just fine together.
I've tried dumbing the js down and just calling the deviceready event.
And I've tried following this solution and the other posted below it to no avail.
Correct way of using JQuery-Mobile/Phonegap together?
But the same thing happens. With jQuery Mobile deviceready never fires, without it, it fires fine.
Any help would be appreciated! Maybe i'm just missing something simple here.
I have also tried different version combinations of jQuery and jQuery Mobile with no luck.
I was running the Android Phonegap version and cordova-2.3.0. I recently tried upgrading to cordova-2.4.0 to see if that would help but nothing...
Update: No errors are thrown in the LogCat/DDMS
I had the same issue a while ago and I ended up throwing out the launcher of phonegap.
I suggest doing it like so :
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// your functions here
}
</script>
I hope it helps
Try putting scripts above jquery mobile library.:
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function displayHello(){
var name = document.getElementById("firstname").value;
navigator.notification.alert("My name is "+ name);
}
</script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
updates:
<script type="text/javascript">
$(document).on('pageinit', function($){
app.initialize();
});
</script>
I noticed that the browser does not work, but using the emulator or PhoneGap build ondeviciready event and the same example works!
I had the exact same problem even after adding the libraries to the head, but as soon as I moved cordova.js below jquery-mobile, deviceready started firing again.
<head>
<script type="text/javascript" src="jqueryMobile/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</head>
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>
I'm working on a phonegap 1.9.0 app for android using ember and am trying to hide my splash screen once the app is loaded instead of waiting for the specified timeout.
My splash screen displays but I cannot successfully call
navigator.splashscreen.hide()
The inclusion of this line leads to the error:
Error: SyntaxError: Unexpected token ' at file:///android_asset/src/cordova-1.9.0.js:1012
I have tried downloading cordova-1.9.0.js again and using version 2.0.0 instead but encountered the same problem.
Here is my html/js.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" title="master" type="text/css" href="css/master.css" />
<title>Cordova Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="ember-0.9.8.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript" charset="utf-8">
// Call onDeviceReady when Cordova is loaded.
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
function onDeviceReady() {
// Now safe to use the Cordova API
console.log("device ready...")
navigator.splashscreen.hide()
}
</script>
</head>
<body onload="onLoad()">
<div id="content"></div>
</body>
</html>
and the activity code...
public class myApp extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/src/index.html", 5000);
}
}
Try below code to hide splash screen:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
cordova.exec(null, null, "SplashScreen", "hide", []);
}
Look at my previous answer: Splash Screen in Cordova
I am using Cordova 2.1.0 and now 2.2.0. When calling navigator.splashscreen.hide(), the Splash Screen didn't disappear. Using the following code, it worked:
private static native void hideSplashScreen() /*-{
$wnd.Cordova.exec(null, null, "SplashScreen", "hide", []);
}-*/;
Hope this helps