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?
Related
This is geo js file which id directly connected via index.html can you please explain me why i am unable to run. whether it is debugging problem or apk extraction problem.
my ionic project works fine with ionic serve --lab ,but while copied the.apk file in build folder to my phone and install the app but blank screen appears ,
Please can anyone suggest what might be my problem
my app is using google maps,key is provieded for both app and browser in index.html
here is my code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.3850, lng: 78.4867},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
//var posOptions={timeout:10000, enableHighAccuracy:true};
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Here');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
<!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 href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.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">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAJWfIcxV1Q1-lG66bpqhLfBB1zevi9bG4&callback=initMap">
</script>
<!-- your app's js -->
<script src="js/geo.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Geo Location example</h1>
</ion-header-bar>
<ion-content>
<div id="map"></div>
</ion-content>
</ion-pane>
</body>
</html>
I have just started working with phone gap and I am experiencing some issues. As I understand there have been some recent updates to phone gap so some of the info is a bit out dated.
I am trying to play an MP4 video stream.
I have tried this on both Windows 7 and Linux Ubuntu Server. Currently I am working with Ubuntu 14.04 Server and Bluestacks Android Emulator on Windows.
I followed the following install guide: http://dasunhegoda.com/installrun-phonegap-ubuntu/797/
I then created my app like so:
cd /root
phonegap create myapp
cd myapp
I have then tried to install the video player using:
phonegap plugin add https://github.com/moust/cordova-plugin-videoplayer.git
This install some directories in the plugins directory.
I have then modified the index.html file of www to the following between the body tags
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device MY APP</p>
<p class="event received">Device is Ready MY APP</p>
<p>Play File Now<p/>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function playVideo(vidUrl)
{
VideoPlayer.play(
vidUrl,
{
volume: 0.5,
//scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT_WITH_CROPPING
},
function () {
console.log("video completed");
},
function (err) {
console.log(err);
}
);
}
</script>
</body>
Whenever I try to click the play video link I can see in the console VideoPlayer not defined. I am accessing the app using the phone gap app on my Bluestack Android emulator. I have however, used jsconsole.com to log issues in the code, so I also have this in the head
<script src="http://jsconsole.com/remote.js?C2624EAC-3434-46D2-A3C5-C57D1C5584C8"></script>
I cannot see further instruction regarding installing the plugin, it seems the one command should be sufficient. Many people mention adding features to the config.xml file. I however do not have /res/xml/config.xml, I only seem to have one config file outside off www in the project root.
Can anyone point me in the right direction?
Update
Full index.html
<!DOCTYPE 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 -->
<script src="http://jsconsole.com/remote.js?4AF41FCD-34CB-482B-ADD9-D966BB408076"></script>
<!-- <script type="text/javascript" src="js/VideoPlayer.js"></script>-->
<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>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<p>Play File Now<p/>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="js/VideoPlayer.js"></script>-->
<script type="text/javascript">
app.initialize();
function init()
{
console.log("Trying to show uuid");
var uuid = device.uuid;
console.log("UUID is: " + uuid);
play_video("http://techslides.com/demos/sample-videos/small.mp4");
}
function play_video(URL)
{
VideoPlayer.play(URL);
}
</script>
</body>
Use this Plugin for Play Video.
Try to install from below git link.
cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git
Then create function for Play Video.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
Call this funciton to your button div.
<p>Play File Now<p/>
Copy JS File from plugin folder to your JS folder.
And modify in your Index.html.
<script src="js/video.js"></script>
For reference you can check below link.
https://github.com/dawsonloudon/VideoPlayer
Edit 1:
Modify your VideoPlayer.js file as below.
cordova.define("cordova/plugin/videoplayer",
function(require, exports, module) {
var exec = require("cordova/exec");
var VideoPlayer = function () {};
/**
* Starts the video player intent
*
* #param url The url to play
*/
VideoPlayer.prototype.play = function(url) {
exec(null, null, "VideoPlayer", "playVideo", [url]);
};
var videoPlayer = new VideoPlayer();
module.exports = videoPlayer;
});
if (!window.plugins) {
window.plugins = {};
}
if (!window.plugins.videoPlayer) {
window.plugins.videoPlayer = cordova.require("cordova/plugin/videoplayer");
}
Edit 2
Modify your Index.html Give it a try.
Add js file before head tag completion as below.
<head>
<meta charset="utf-8" />
<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, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/VideoPlayer.js"></script>
<title>Hello World</title>
</head>
And also change play_video function as below.
function play_video(URL) {
if (URL != '') {
setTimeout(function() {
window.plugins.videoPlayer.play(URL);
}, 1000);
}
}
It is working for me well in my app.
Hope this will help you.
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 testing the jquery.mobile script and was able to run a HTML5 content using WebView.
It seems that it can't find my jquery files but i've placed them accordingly inside the following path:
Project > assets > www > jquery
where my html file is located:
Project > assets > www > index.html
my html looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="file:///android_asset/www/jquery/jquery.mobile-1.0.min.css" />
<script src="file:///android_asset/www/jquery/jquery-1.6.4.min.js"></script>
<script src="file:///android_asset/www/jquery/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
#floatMe
{
float: right;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#btnHello').click(function() {
var name = $('#txtName').val();
alert(name);
});
});
</script>
</head>
<body>
<div id="floatMe">
What's your name?
<input id="txtName" value="" />
<button id="btnHello">say hello</button>
</div>
</body>
</html>
The error keeps prompting me:
ReferenceError: Can't find variable: jQuery at file:///android_asset/www/index.html
ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html
Have you tried using a path relative to your HTML page?
<script src="jquery/jquery-1.6.4.min.js"></script>
That's how you reference scripts from a page within a PhoneGap project, which should be similar since it's running in a WebView too.