I'm trying to acccess the Camera using Sencha touch, ported to Android using Phonegap. As the Sencha touch guide to using native APIs suggests, I declared the camera as a required:
Ext.require('Ext.device.Camera');
But unfortunately, I get this error:
07-19 11:51:42.159: E/Web Console(8668): Uncaught Error: [Ext.Loader]
Failed loading './device/Camera.js', please verify that the file exists at
file:///android_asset/www/lib/touch/sencha-touch-all-debug.js:8000
The sencha library does have Camera.js under device. I'm not sure why this error appears.
Edit 1: Still not able to find an answer. Would really appreciate any suggestions.
If you download the source code of sencha touch, there will be a directory named "device" in the "src" directory (after unzipping). Camera.js is in that directory. Seems sencha-touch-all-debug.js or sencha-touch-all.js not include the source code from all .js files in "device" directory. You must manually copy that directory to your android assets directory (eg the file:///android_asset/www/lib/touch/device).
or
You can copy the directory device in any place on your android assets (eg file:///android_asset/www/device). Then on the first of javascript declaration before you use sencha touch you must type the following code:
Ext.Loader.setConfig ({
paths: {
'Ext.device': 'device'
}
});
The code tells that "Ext.device" is reference to directory "device". Make sure the "device" directory is relative to the html file that calls the javascript (eg index.html). From the above code means the "device" directory is same location with the html file.
If you are using phonegap for deploying, then use Phonegap camera functionality. I have used it in my app in following way:
Add <script type="text/javascript"
src="cordova-x.x.x.js"></script> in your index.html file.
Use following code to open Camera:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
For more information on this api use following link:
http://docs.phonegap.com/en/edge/cordova_camera_camera.md.html#Camera
On the sencha forum there is a thread about it.
The problem appears to be the naming of Phongap - Cordova. Executing this before Sencha Touch is loaded should fix that.
if(typeof window.Cordova != 'undefined') {
window.PhoneGap = window.Cordova;
}
Related
I have a NativeScript/Angular application that uses code sharing.
To make my project more organized, I have created a core folder that contains a sub-folder for routing:
Routes are defined in app.common.ts:
export const appRoutes: Routes = [
{ path: '', redirectTo: '/products', pathMatch: 'full' },
{
path: 'products',
loadChildren: '../products/products.module#ProductsModule'
}
]
Of particular interest is the module path shown in the following property:
loadChildren: '../products/products.module#ProductsModule'
Serving this in the browser using ng serve -o works fine.
Bundling this to run on Android using tns run android --bundle doesn't work as it can't find the module.
If I change the path to ~/app/products/products.module#ProductsModule, the Android app then runs, but the web application can't find the module.
If I then leave the file watcher running for the Android build and change the path back to ../products/products.module#ProductsModule, both Android and web work fine.
I don't want to move my routing files back to the src folder. I am also reluctant to include any hacks such as platform-driven path string mangling.
If you have any explanations as to why this is happening and/or a robust fix that isn't 'hacky', I'd be keen to hear it.
The problem was stemming from some quirks regarding the file watchers. When I change the path to the following, both platforms work fine:
../../products/products.module#ProductsModule
The reason I didn't select this path from the outset is because I used ~/app/products/products.module#ProductsModule to begin with and edited this to get the web build to work while the Android file watcher was still running.
With both the Android and web file watchers terminated and the path adjusted to the one provided above, they both work.
I am learning to use cordova and i have been just doing a normal install of android platform in my cordova application, everything worked fine except for some errors i don't intent to fix just yet (which are external resource files loaded from javascript). I just installed phonegap-plugin-push for working on a push notification support, i believe i have to first register the device on which the notification should be recieved so i ran the app without any other configuration rather than downloading the libraries and putting the google-services.json file at the root application folder.
I try to find the commands for pushing but i am unabled to do so and i think it might be because of an error thrown in the console
Failed to load resource: net::ERR_FILE_NOT_FOUND /cordova_plugins.js
so i have been searching on google and i have found that i don't need to add anything but cordova.js as i have already done upon cordova application installation in order to work with cordova features.
I don't know if i have to add something else or if i am missing some code in order to make this plugin work, probably this plugin is not compatible with cordova but phonegap is built over cordova so i don't know.
in case it is necessary, this are the versions i am using:
Cordova-CLI: 7.1.0
Google Play Services: 46
Android support repository: 47
Android SDK: 26
I failed to say that the application running in cordova is done with angular and angular-ui-router.
After long hours of testing i've found out that the problem is caused by angular-ui-router, because i was using angular-ui-router i have set a <base href> tag in the head tag which is what is making cordova to fail, this is now actually how cordova is intended to work, it is because of how the files are placed. On android the files are placed in android_asset/www/, i don't know how the files are placed in other platforms, but when <base href> tag is set with a new value then the calls are now trying to be done in a directory where the files are not placed.
The solution in angular is to not set a <base href> tag and disable html5Mode in the config
app.config(["$stateProvider", "$locationProvider", "$urlRouterProvider",
function($stateProvider, $locationProvider, $urlRouterProvider){
// Set the default url state
// NOTE: Do not set <base href> tag, this breaks cordova calls
$urlRouterProvider.otherwise("/");
// Disable html5 native router mode
$locationProvider.html5Mode(false);
......
}
]);
I've realized this because in chrome device remote inspector i was getting error calls to wrong directories, by looking at the url where the application is running i saw that the calls were not in the proper directory
I'm trying to build an application on Sencha Touch for android, so I use Cordova to put it on my device.
The problem I'm facing is that everything works fine on my computer, but on android, the device can not find and read the locales files for each stores (I've already test on other Android device).
Here is the error on logcat:
E/AndroidProtocolHandler: Unable to open asset URL: file:///android_asset/www/app/store/recipes/list.json?_dc=1481398604306&node=ext-data-treestore-1-root&page=1&start=0&limit=25
E/AndroidProtocolHandler: Unable to open asset URL: file:///android_asset/www/app/store/recipes/pates.json
And here is the store that I use to read "pates.json":
var ingredientsData = Ext.create('Ext.data.Store', {
model: 'fr.ESIR.GreenVentory.model.IngredientListModel',
autoLoad: true,
proxy: {
type: 'ajax',
noCache: false,
enablePagingParams: false,
limitParam: null,
url: "./app/store/recipes/pates.json",
reader: {
rootProperty: 'ingredients',
totalProperty: 'totalCount'
}
}
});
And the files that I try to load are locally stored in "app/store/recipes/"
If someone have a solution, it would be cool for me to know it
I resolve my own problem:
All the data was stored on app/store of the sencha application, and when I build the Android application with Cordova, it doesn't take the json file because I haven't specify the file location.
So I create a data folder on the project root, put my json file and the folders that contain them on the data folder.
Don't forget to update the differents references of your json files
After that, it still working on the web version, but not on Android, because cordova don't integrate your files. Cordova reads the app.json file that you have on the root of your project. Go to the "resources" section of the file. Normally you have something like this:
/**
* Extra resources to be copied along when build
*/
"resources": [
"resources/images",
"resources/icons",
"resources/startup",
"data/*",
"data/recipes"
]
Just add the location of the folder that contains your file and cordova should integrate them when it compiles
I am developing an android app based on ionic 2 using typescript.
I would like o open a PDF file inside my app with another app that is registered for the fyletype (e.g. Acrobat Reader).
Therefore i tried the two standard plugins:
https://github.com/disusered/cordova-open
https://github.com/pwlin/cordova-plugin-file-opener2
Although ive added both plugins via "ionic plugin add ..." and of course played around with several combination referencing to it
the result is always that they ere not found
cordova-open
var open = cordova.plugins.disusered.open;
Property 'disusered' does not exist on type 'CordovaPlugins'.
cordova-plugin-file-opener2
cordova.plugins.fileOpener2.open(
filePath,
fileMIMEType,
{
error : function(){ },
success : function(){ }
}
);
Property 'fileOpener2' does not exist on type 'CordovaPlugins'.
I am running the app on an emulator via ionic run android
Could you please give some hint how i can achieve to use one of these plugins?
Thank you very much
Shane
I am new to phone gap and really struggling to get this done.
Basically, the directory structure is like this:
/www
css/*
img/*
js/*
pages/*
config.xml
index.html
When I try to include add images from index.html referenced in img directory, the image loads successfully. But when i try to reference an image from a page within the js directory, it does not load the image. I do it from a index.js within the js directory.
I provide the path like this when inside the js directory:
<img src="../img/abc.jpg">
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
Basically i do not invoke the cordova_plugin.js file. It is invoked by plugin.js that i include in my html.
So basically when in my www/index.html I include
<script type="text/javascript" src="phonegap.js"></script>
and it implicitly invokes the cordova_plugins.js which loads all the plugins. This works fine.
But When inside www/pages directory i reference it like this
<script type="text/javascript" src="../phonegap.js"></script>
and in this case phonegap.js loads successfully but it fails to load the cordova_plugins.js and thus none of the modules load.
Note: I found that the files do not load by debugging it in chrome.
Any help would be highly appreciated
Your javascript files are building html to go into the index.html DOM, so you should include the src as it will be referenced by index.html:
<img src="img/abc.jpg" />
Not sure what you mean here:
When i Debug using the "phonegap app" , it does find the image, but after building the apk using "phonegap run android" , and loading the app on my device the image does not load.
So, maybe I'm misunderstanding your problem.
Also, any page inside the pages directory cannot find the cordova_plugin.js and thus any plugin .js file does not load.
How are you referencing the .js files? For pages/foo.html it would be:
<script type="text/javascript" src="../js/cordova_plugin.js"></script>
But again, not sure exactly what you are after without some code examples.