Framework7 router does not work after converting project to apk - android

I have tried out this tutorial to develop an android application via Cordova and Framework7. It works in the browser and also Android Emulator (ADK). I converted the project to the apk with Cordova build command and transferred the apk file to my device.
The application works, however, the list which is the application based Framework7 (indeed on Vue) does not show anything. It looks like Vue not initialized.
Here is the HTML code:
<template id="page-alt-sayfa">
<f7-page>
<f7-navbar title="Alt Sayfa" back-link="Geri" sliding></f7-navbar>
<f7-block-title>
<!-- sayfa id'sini data obj içinde ara-->
{{this.$root.$data['icerik'][$route.params['sayfaId']].baslik}}</p>
</f7-block-title>
<f7-block-title>Dondurucuya Konur mu?</f7-block-title>
<f7-block inner>
<img style="width:95%;overflow:hidden" :src="'./img/sembolik/'+$route.params['sayfaId']+'.png'"/>
<br>
<div v-if="this.$root.$data['icerik'][$route.params['sayfaId']].dondurucu">
<div class="chip">
<div class="chip-media bg-green"><i class="material-icons">dns</i></div>
<div class="chip-label">Dondurucuya Konulur</div>
</div>
</div>
Here is initializing Framework7 and Vue:
...
<script src="cordova.js"></script>
<script src="js/framework7.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/framework7-vue.min.js"></script>
<script type="text/javascript" src="js/data.json"></script>
<script src="js/app.js"></script>
</body>
</html>
Here a screenshoot from my phone.
(source: ultraimg.com)
How can the problem be solved?
Edit:
Here is my router code:
// Init F7 Vue Plugin
Vue.use(Framework7Vue)
// Init Page Components
Vue.component('page-about', {
template: '#page-about'
})
Vue.component('page-form', {
template: '#page-form'
})
Vue.component('page-dynamic-routing', {
template: '#page-dynamic-routing'
})
Vue.component('page-alt-sayfa', {
template: '#page-alt-sayfa'
})
// Handle device ready event
// Note: You may want to check out the vue-cordova package on npm for cordova specific handling with vue - https://www.npmjs.com/package/vue-cordova
document.addEventListener('deviceready', () => {
console.log("DEVICE IS READY!");
}, false)
// Init App
new Vue({
el: '#app',
// Init Framework7 by passing parameters here
framework7: {
root: '#app',
/* Uncomment to enable Material theme: */
// material: true,
routes: [
{
path: '/about/',
component: 'page-about'
},
{
path: '/alt-sayfa/:sayfaId/',
component: 'page-alt-sayfa'
}
]
},
data: {
mesaj: 'Merhaba',
icerik: icerik
}
});

I recently faced a similar problem. The routing was working well when tested my computer browser and emulator. But when I built the apk, it just did not work. It turned out I had a case sensitivity issue with the names of the views in my code. My computer and emulator ignored it and did the routing, but my phone didn't.
Have you crossed-checked the spelling of the names of your views to make sure it is not a case-sensitivity issue?

I do not find the where is the problem stems from. However, I find a npm template and reorganized my code according to this template and it worked
Template is:
https://framework7.io/vue/templates.html
I installed it with this command:
cordova create <project_create_dir> [com.example.projectname] [ProjectClassName] --template cordova-template-framework7-vue-webpack

Related

cordova inappbrowser and input file

I have a iOS and Android application, and I load a external website inside my app (this external website is mine too).
My problem is that this website has a file upload feature and this feature does not work on Android (it works on iOS).
I saw that this behavior is normal on Android, but is there any way to make it work or it's definitely not an option ?
Thank you
EDIT 1
I tried to create a new app with a simple page like this (hosted on AWS) :
<html>
<head>
<title>Upload Test !</title>
</head>
<body>
<div>Upload Test</div>
<div>
<input type="file" id="imgFile" name="files[]" accept="image/x-png, image/gif, image/jpeg">
</div>
</body>
and I added this script in my generated index.html in my Cordova project.
<script type="text/javascript">
document.addEventListener("deviceready", function(event) {
console.log('TEST CONSOLE LOG !');
var url = 'https://s3-eu-west-1.amazonaws.com/***/file-upload.html';
ref = window.open(url, "_blank", "location=no,toolbar=no,zoom=no,hidden=yes");
ref.addEventListener('loadstop', function () {
ref.show();
});
ref.addEventListener('loaderror', function () {
ref.close();
ref = undefined;
});
}, false);
</script>
It doesn't work on my nexus 5 (android M).
There's an issue with both Android and iOS that prevents file uploads when clicking on a file input tag like this within the inappbrowser:
<input type="file">
There's a couple of fixes for both which I've consolidated into a single location to make it easy for anyone else facing this issue. You should be able to modify your config.xml file to use it by including this:
<plugin spec="https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git" version="1.1.0" source="git" />
Instead of the default inappbrowser plugin.
More details can be found here:
https://github.com/jverlee/cordova-plugin-inappbrowser-camera
#Verl's code is pretty good! However, it cannot be installed through his installation guide... So here is mine:
cordova plugin remove cordova-plugin-inappbrowser-camera
cordova plugin add https://github.com/jverlee/cordova-plugin-inappbrowser-camera.git
By the way, if I follow his guide, I only gets:
Error: Cannot read property 'variables' of undefined

Phonegap plugin does not work using remote build

I'm using this Google Analytics plugin for my Phonegap project https://github.com/phonegap-build/GAPlugin.
Everything works fine when I run it in the Android emulator. But when I use Phonegap remote build the plugin does not work. The plugin is listed along with other working plugins in the Phonegap app page.
Here's my code:
In config.xml
<gap:plugin name="com.adobe.plugins.gaplugin" version="2.3.1" source="pgb" />
In index.html
<script type="text/javascript" src="cordova.js"></
<script type="text/javascript" src="GAPlugin.js"></script>
<script type="text/javascript" src="js/index.js"></script>
In www/index.js after the device is ready (I censored the GA ID)
var gaPlugin = window.plugins.gaPlugin;
gaPlugin.init(function () {
log.innerHTML += 'ga ok.';
}, function (e) {
log.innerHTML += 'ga failed.' + e;
}, "UA-XXX-Y", 10);
gaPlugin.trackPage(function () {
log.innerHTML += 'tracked';
}, function () {
log.innerHTML += 'nope';
}, "test.com");
When I look into the build log I can't find any text "gaplugin". I don't know if it is even building the plugin or if I'm getting an error. I can't even use the debugger because the target is never listed.
Thanks for any help.
It turns out that if you're using hydrate, you have to re-install the APK instead of just reloading when you add a new plugin.

Android PhoneGap HTML5video

I am looking for an HTML 5 video plugin for PhoneGap.
I found a plugin at GitHub but there maybe something wrong as I have the following issues:
I don't know where to place the plugin.xml
I don't know how to to link with it <video> tag
and it's not working with PhoneGap
this javascript function now
function start(){
window.plugins.html5video.initialize({"video1" : "movie.mp4"});
window.plugins.html5video.play("video1");
}
04-24 09:52:59.305: E/Web Console(740): Uncaught TypeError: Cannot call method 'initialize' of undefined at file:///android_asset/www/index.html:44
After several attempts I solved this way:
I have installed Git
I have installed the plugin HTML5Video for Cordoba with command cordova plugin add https://github.com/jaeger25/Html5Video.git (with this command, the project has run automatically configured to use the plugin)
I created the folder platforms\androis\res\raw\ where I copied the video splash.mp4
In the html file (in my case \www\splash.html) I insert this code in HEAD:
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="Html5Video.js"></script>
<script>
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
window.plugins.html5Video.initialize({
"splashvideo" : "splash.mp4"
})
window.plugins.html5Video.play("splashvideo");
}
</script>
and this is the BODY code
<body onload="onLoad()">
<video id="splashvideo" autobuffer controls="false"></video>
</body>
It's work for me ;)

Android phonegap SpeechRecognizer issue : Cannot read property 'speechrecognizer'

I am new to cordova-android app development.I am using cordova 3.3.0 to create Android phonegap SpeechRecognizer application. I referred SpeechRecognizer. According to that i have executed below commands to create cordova android platform app.
1) cordova create SpeechrecognizerApp
2) cordova platform add android
3) phonegap local plugin add https://github.com/mayurloved/speechrecognizer.git
Afer that i imported that project in eclipse and it automatically created all required packeges and made all changes in config.xml. Then i copied all html contents of example page to my index.html file. All is done properly, but when i run my app, log shows error:
Uncaught TypeError: Cannot read property 'speechrecognizer' of undefined:20
index.html
<!DOCTYPE html>
<html>
<head>
<title>Speech Recognition plugin demo</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="SpeechRecognizer.js"></script>
</head>
<body>
<script type="text/javascript">
function onDeviceReady(){
console.log("Device is ready");
}
function recognizeSpeech() {
var maxMatches = 5;
var promptString = "Speak now"; // optional
var language = "en-US"; // optional
window.plugins.speechrecognizer.startRecognize(function(result){
alert(result);
}, function(errorMessage){
console.log("Error message: " + errorMessage);
}, maxMatches, promptString, language);
}
// Show the list of the supported languages
function getSupportedLanguages() {
window.plugins.speechrecognizer.getSupportedLanguages(function(languages){
// display the json array
alert(languages);
}, function(error){
alert("Could not retrieve the supported languages : " + error);
});
}
document.addEventListener("deviceready", onDeviceReady, true);
</script>
<button onclick="recognizeSpeech();">Start recognition</button>
<button onclick="getSupportedLanguages();">Get Supported Languages</button>
</body>
</html>
I haven't copied SpeechRecognizer.js in www folder as according to above link i don't require to copy it in my app because i am using cordova version >3.0. Please help me to solve this problem.
Thank you.
Did you launch phonegap build android after you add the plugin? When you install plugins, they are installed only in the /plugins folder of the project but not in the platform folder.
You have to run phonegap build or phonegap prepare for any platform to have the plugin fully installed.
And then after you can refresh the project in eclipse and you should see the java part of the plugin in the /src folder and the javascript in /assets/www/plugins
If the folder platforms\android\assets\www\plugins... is not there after the build, that may be because your project got corrupted.
In that case you can try to empty the plugins folder at the root of your project and re-install all plugins.
If that's not enough, you can retry emptying both platforms and plugins folder (think to save any customisation you may have done in platforms folders).

Android Phonegap version 2.0 or higher any update for Share plugin for facebook , twitter, message etc

I am trying to use the PhoneGap Share plugin for 2.0 version. I have implemented it but this is not work properly.
This plugin is written in PhoneGap 1.0 and later version any new or updated plugin for share message on Facebook.
I've referred to this documentation and this question: How to implement facebook send, twitter share, send sms, send email in my phonegap android application?
But still not getting proper solution.
I am sharing my code which is working fine.
Please refer This link for share plugin functionality and follow below given steps.
1- Place the JS file in the same folder of the MainActivity.java folder.
2- Place the Js file in the www folder and add it to the index.html folder.
3- Add the following line to the config.xml (if you are using new version of Phonegap) or plugins.xml (for old version of Phonegap):
4 - add html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/libs/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/libs/jq_min.js"></script>
<script src="js/libs/share.js">
</script>
<script>
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
}
//share plugin for update status
function share(subject, text) {
window.plugins.share.show({
subject: subject,
text: text},
function() {
alert("sent success");}, // Success function
function() {alert('Share failed')} // Failure function
);
};
//Send message on facebook
$(document).ready(function() {
$("button#sendFacebook").click(function(){
var txtsub = $("input#txtsub").attr("value");
var txtmsg = $("#txtmsg").val();
share(txtsub, txtmsg);
});
});
</script>
</head>
<body>
<input id="txtsub" type="text" placeholder="Enter Subject" maxlength="20" required /><br/><br/>
<textarea placeholder="Enter Message" id="txtmsg" rows="4" cols="25"></textarea><br/>
<button id="sendFacebook">Update Status </button>
</body>
</html>
and test this plugin for Face book,twitter,gmail etc.
& enjoy :).
Let me know if you have any query.
it seems that you are not implementing the plugin in a proper way, just try the following steps:
1- Put the java file in the same folder of the MainActivity.java
2- Put the Js file in the www folder and add it to the index.html
3- Add the following line to the config.xml (if you are using new version of Phonegap) or plugins.xml (for old version of Phonegap):
<plugin name="Share" value="Path_Of_Your_Project.share.Share"/>
4- Just write the following into your JS file:
function share(subject, text) {
window.plugins.share.show({
subject: subject,
text: text},
function() {}, // Success function
function() {alert('Share failed')} // Failure function
);
};
To Call the function:
$("#share_id").onClick(function(){
share("subject", "text");
});
As simple as this.

Categories

Resources