I want to create a mobile-App with sencha Touch 2 + Phonegap.
I found out, that I have to use *file:///android_asset/www/* for paths.
/assets/www/index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="file:///android_asset/www/app/app.css" type="text/css">
<script type="text/javascript" src="file:///android_asset/www/sdk/sencha-touch.js"></script>
<script type="text/javascript" src="file:///android_asset/www/all-classes.js"></script>
<script type="text/javascript" src="file:///android_asset/www/app.js"></script>
</head>
<body>T5</body>
</html>
After running the app, I got errors like:
Uncaught Error: [Ext.Loader] Failed loading 'app/view/home/main.js', please verify that the file exists at file:///android_asset/www/sdk/sencha-touch.js:7914
So I added "file:///assets/www/", but I still get:
Uncaught Error: [Ext.Loader] Failed loading 'file:///assets/www/app/view/home/main.js', please verify that the file exists at file:///android_asset/www/sdk/sencha-touch.js:7914
Something is wrong with the paths. How should the path look like?
You're basically running a website within a webview, so they are all relative to your index.html file, so you should be able to define your paths as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<link rel="stylesheet" href="app/app.css" type="text/css">
<script type="text/javascript" src="sdk/sencha-touch.js"></script>
<script type="text/javascript" src="all-classes.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>T5</body>
</html>
Related
I am working on HTML5 application with Trigger IO framework.I tested it on iPhone and it is working well there.But problem is with the Android. I am getting following error when I debug the application.
Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME
this is for every resource file referenced from the html header. My header code is :
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/index.js"></script>
both files are present on the location and working well on iOS. But problem is with Android/Chrome. Any workaround ?
EDIT
Following is the header of the index.html :
<head>
<title>My App</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
'self'; img-src https://*; child-src 'none';">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" type="text/css" href="js/slick-theme.css"/>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/network.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
</head>
Note : If I remove jquery.mobile-1.4.5.min.js file then it is taking reference of index.js
It could be a regression of:
https://github.com/jquery/jquery-mobile/issues/6746
You can use the httpd module as a workaround for this and similar bugs in other libraries:
https://trigger.io/modules/httpd/current/docs/index.html
I am newbie in hybrid app development using ionic 1 with angularJs.
I have deployed the app to my samsung device (android). I found out that when I touch any elements (eg: button) it doesn't have any sounds effect.
How to enable the touch sound like the native app?
I also visited this article http://gonehybrid.com/how-to-add-sound-effects-to-your-ionic-app-with-native-audio/ , but this is not I want to achieve. It teach on how to enable and load audio in the app. However, I want to have the native touch sound of the phone
I apologize if this similar question exist in somewhere else, I have searched through a lot of sites and I couldn't find an answer
I also tried https://github.com/MatiMenich/cordova-plugin-nativeClickSound and no luck.. Please find the code below for my index.html and controller.js
index.html
<!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>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
<!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>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular/angular-resource.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
controller.js
.controller('SoundController', function($ionicPlatform, $scope, $timeout){
var clickyClasses = ['sound-click', 'button'];
nativeclick.watch(clickyClasses);
$scope.click = function() {
nativeclick.trigger();
};
})
You can try https://github.com/MatiMenich/cordova-plugin-nativeClickSound. It's under MIT License. Hope it'll help you
This will applied native sound to all button and an "a" tag with href when clicking it.
var clickyClasses = ['button', 'a'];
nativeclick.watch(clickyClasses);
install plugin 'cordova plugin add cordova-plugin-nativeclicksound'
use this code in app.js
.controller('MyController',function($scope,
$cordovaNativeAudio) {
$scope.sound = function() {
nativeclick.trigger();
};
});
you can use sound() function where ever you want native sound, for example button
<button ng-click="sound()">native sound</button>
test it in device, web browser through error.
I've written an app in cordova 4.0 with jquery mobile & jquery, and when I try to run the app on Galaxy 2 with android 2.3.5 (gingerbread) all I get is white screen without any error or anything going on.
note: I capture any exceptions from javascript and alert them, so if there was an exception I should have seen a message. but there's nothing.
any idea why? does Cordova suppose to work properly on android 2.x? I found mix opinions on that subject...
thanks!
EDIT: adding the source code. note that I have js that wrap cordova so everything under utils.* is a wrapper layer for cordova. this is index.html, the first page that should be loaded. another thing I want to say is that I added a code to catch and alert any exceptions (window.onerror = function(message, url, lineNumber)...) and alert them, and it usually work but in this case I see no alert.
<!DOCTYPE html>
part of pages we load does not work.
-->
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=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" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- My extensions to jquery-mobile css -->
<link rel="stylesheet" type="text/css" href="css/my-jquerymobile-extend.css" />
<!-- all basic css -->
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/msgbox.css" />
<link rel="stylesheet" type="text/css" href="css/intro.css" />
<link rel="stylesheet" type="text/css" href="css/splash.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/result_page.css" />
<link rel="stylesheet" type="text/css" href="css/intlTelInput.css" />
<title>SeekWhale</title>
<!-- include cordova and jquery -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="telephonenumber.js"></script>
<script type="text/javascript" src="js/jquery/jquery.2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery/custom_loading_gif.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-draggable.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.ui.touch-punch.min.js"></script>
<!-- Include utils -->
<script type="text/javascript" src="js/utils/config.js"></script>
<script type="text/javascript" src="js/utils/flags.js"></script>
<script type="text/javascript" src="js/utils/ajax.js"></script>
<script type="text/javascript" src="js/utils/debug.js"></script>
<script type="text/javascript" src="js/utils/visuals.js"></script>
<script type="text/javascript" src="js/utils/device.js"></script>
<script type="text/javascript" src="js/utils/contacts.js"></script>
<script type="text/javascript" src="js/utils/events.js"></script>
<script type="text/javascript" src="js/utils/navigation.js"></script>
<script type="text/javascript" src="js/utils/phone_numbers.js"></script>
<script type="text/javascript" src="js/utils/prompt.js"></script>
<script type="text/javascript" src="js/utils/forms.js"></script>
<!-- Replace UI language with chosen language -->
<script type="text/javascript" src="js/languages/dictionary.js"></script>
<script type="text/javascript" src="js/languages/hebrew.js"></script>
<!-- function to init pages -->
<script type="text/javascript" src="js/init_page.js"></script>
</head>
<body data-role="page">
<img class="splash" src="img/bg-entry.png"></img>
<script type="text/javascript">
// set language
ui_dictionary.set_dictionary_words();
// called when cordova is ready to run page init script
function InitApp()
{
setTimeout(function()
{
utils.prompt.log("app started!");
var effect = utils.navigation.transition.slidedown;
// if should skip directly to main
if (utils.flags.skip_to_main)
{
utils.prompt.log("skip to main page");
utils.navigation.load_page(utils.config.get_last_page(), effect);
}
// if require first setup open the first setup page:
else if (utils.config.get_successfully_registered() == false)
{
utils.prompt.log("load register");
utils.navigation.load_page("register.html", effect);
}
// if registered but not confirmed, go to confirm page
else if (utils.config.get_is_device_confirmed() == false)
{
utils.prompt.log("load confirm page");
utils.navigation.load_page("confirm.html", effect);
}
// if all goes well, open the main page!
else
{
utils.prompt.log("load main page");
utils.navigation.load_page("main.html", effect);
}
}, 1);
}
utils.events.on_device_ready(InitApp);
</script>
</body>
<script type="text/javascript" src="cordova.js"></script>
this one should be the first js to be loaded. put all other js files after it.
I have created a application using Phonegap 2.9.0 .The Build which is running all the android phone version less than 4.0. When i instal in Android 4+ devices it shows blank screen.The same build works fine with ios all versions.Here the index.html
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
</head>
<body>
</body>
Here the explore snap
What change requires to run in android 4.0+ devices.Pelase help me to solve this issue
Try this
<!DOCTYPE HTML><html lang=en-US>
<head>
<meta http-equiv=Cache-control content=no-cache />
<meta name=format-detection content="telephone=no"/>
<meta name=apple-mobile-web-app-capable content=yes />
<title></title>
<link rel="stylesheet" href="resources/css/sencha-touch.css" />
<link rel="stylesheet" href="resources/css/app.css" />
<link href="resources/css/mobiscroll.min.css" rel="stylesheet" type="text/css" />
<script src="libraries/sencha/sencha-touch-all.js" defer></script>
<script src="libraries/jquery/jquery.1.10.1.js" defer></script>
<script src="libraries/mobiscroll/mobiscroll.min.js" type="text/javascript" defer></script>
<script type="text/javascript" src="app/views/cordova.js"></script>
<script src="app/views/app.js" defer></script>
<script src="app/views/JSfunctions.js" defer></script>
</head>
<body>
</body>
I'm using Modernizr to detect non-capable SVG browsers and loading an additional stylesheet for those that don't support it. The images are set by background-urls in css.
The images don't show in my android browser at first but when I refresh the page they load. I made certain the cache was cleared before doing so. I'm also using Jquery Mobile but not using any of its styles.
Here is my header:
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mobile.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>
I found the solution. I had to move my js scripts into the load command of modernizr.
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>My Website</title>
<meta http-equiv="x-dns-prefetch-control" content="off">
<meta name="viewport" content="width=device-width, target-densityDpi=160, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="<?php bloginfo('template_url'); ?>/css/reset.css" rel="stylesheet" />
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" />
<script type="text/javascript" src="http://use.typekit.com/abv4xxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/modernizer.js"></script>
<script type="text/javascript">
Modernizr.load({
load: ['https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
'<?php bloginfo("template_url"); ?>/js/mobile.js',
'http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js'
],
test: Modernizr.svg,
nope: '<?php bloginfo("template_url"); ?>/css/nono-svg.css'
});
</script>
<?php wp_head(); ?>
</head>