I develop an app for Android with Sencha Touch and Phonegap (cordova-2.0.0).
I have an Ext.Panel with some HTML in it, For Instance:
<body>
MyPage
</body>
My Problem: When I run the app on device and tap the link, Android browser opens the URL and it quits the app.
My Aim: When I run the app on device and tap the link, the app should show the tapped link, For Instance:
navigator.notification.alert(MyPage.html);
My Phonegap code(shows the uniqueid.html in the HTMLPanel):
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onRequestFileSystemSuccess, null);
function onRequestFileSystemSuccess(fileSystem) {
fileSystem.root.getDirectory(Ext.ComponentQuery.query('#bibliothekDataView')[0].getSelection()[0].get('directory'), null, SelectedItemSuccess, SelectedItemFail);
}
//shows the uniqueid.html in the HTMLPanel
function SelectedItemSuccess(dir) {
dir.getFile(record.get('id') + '.html', null, gotFileEntry, fail);
}
function SelectedItemFail() {
navigator.notification.alert("Failed to read file contents: " + error.code);
}
function gotFileEntry(file) {
file.file(gotFile, fail);
}
function gotFile(file) {
readAsText(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onload = function (evt) {
Ext.ComponentQuery.query('#mainHTMLPanel')[0].setHtml(evt.target.result);
};
reader.onerror = function () {
navigator.notification.alert("Failed to read file!");
};
reader.readAsText(file);
}
function fail(error) {
navigator.notification.alert("Failed to read file contents: " + error.code);
}
My HTMLPanel (View):
Ext.define('myApp.view.HTMLPanel', {
extend: 'Ext.Panel',
xtype: 'mainhtmlpanel',
config: {
id: 'mainHTMLPanel',
scrollable: 'vertical',
}
});
Do you have control over HTML content displayed in Ext.Panel? If yes, then change MyPage to MyPage.
Related
I am simply trying to read a text file on my Android with Phonegap. I have looked at all of the examples and I don't see a difference in my code. The file has lines of text. onloadend results in length of 0. There are no errors. What am I missing here?
function readTextFile(fileName) {
window.requestFileSystem(LocalFileSystem.TEMPORARY, 5*1024*1024,
successCallback, errorCallback);
function successCallback(fs) {
fs.root.getFile(fileName, {}, function(fileEntry) {
fileEntry.file(function(file) {
var reader = new FileReader();
reader.onloadend = function(e) {
console.log("TEXT FILE LENGTH: " + this.result.length);
};
reader.readAsText(file);
}, errorCallback);
}, errorCallback);
}
function errorCallback(error) {
console.log("ERROR: " + error.code);
}
}
I'm try to create a config file to keep some configurations of my app. I'm using SAPUI5 and cordova file.
The intention is create a conf.txt to keep the URL, PORT and LDAP data to access my system. However, these information can change, so I need to update the file.
In my app, I've made the function deviceready when the application starts, and created the conf.txt:
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
/*jQuery.sap.require("model.Config");
var conf = new Configuration();
conf.init();*/
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("conf.txt", {create : true,exclusive : false},gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
//alert(fileEntry.fullPath);
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.onwriteend = function(evt) {
alert("OK");
};
var conf = "URL=\r\nPORT=80\r\nLDAP=false";
writer.seek(writer.length);
writer.write(conf);
}
function fail(error) {
alert(error.code);
}
I didn't do nothing different of other examples. But, as I've commented in onDeviceReady function, I tried to create a class to use to create the file, read and update it.
All examples that I found reference the deviceready event. Can I just use the methods of FileWriter and FileReader on this event?
It's my Configuration Class:
function Configuration() {
this.fileName = "conf.txt";
this.init = function() {**How to use the cordova API here**};
this.read = function(){**How to use the cordova API here**};
this.update= function(){**How to use the cordova API here**};
}
Thanks for help!
As suggested by Njtman, I got to save the informations in file without cordova file plugin just using localstorage.
I'd like to share the solution found.
index.html on deviceready event:
jQuery.sap.require("model.Config");
var conf = new Configuration();
sap.ui.getCore().setModel(conf, "Config");
conf.init();
Configuration class:
sap.ui.model.json.JSONModel.extend("Configuration", {
url: "",
port: "80",
defaultport: true,
ldap: false,
init : function() {
var deferred = $.Deferred();
console.log("INITIALIZING...");
var config = JSON.parse(window.localStorage.getItem("config"));
if(config == null){
console.log("CONFIG IS NULL");
window.localStorage.setItem("config", JSON.stringify(
{"URL": this.url, "PORT": this.port, "DEFAULTPORT": this.defaultport, "LDAP": this.ldap}
));
}
deferred.resolve();
this.setData(JSON.parse(window.localStorage.getItem("config")));
this.setVars();
console.log(this.getJSON());
return deferred.promise();
},
save: function(url, port, defaultport, ldap){
var deferred = $.Deferred();
console.log("SAVING...");
window.localStorage.setItem("config", JSON.stringify(
{"URL": url, "PORT": port, "DEFAULTPORT": defaultport, "LDAP": ldap}
));
deferred.resolve();
this.setData(JSON.parse(window.localStorage.getItem("config")));
this.setVars();
return deferred.promise();
},
setVars: function(){
this.url = this.getProperty("/URL");
this.port = this.getProperty("/PORT");
this.defaultport = this.getProperty("/DEFAULTPORT");
this.ldap = this.getProperty("/LDAP");
}
});
Now I can read and update my json file.
I am creating an app in android using phonegap and ionic , to retrieve images from sdcard and display it.So i have been able to retrieve all the images but it takes more time to display these images.scrolling is also very slow and clicks take over a second for anything to happen. I am using collection -repeat for displaying these images.This is my code :
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
window.fileSystem = fileSystem;
fileSystem.root.getDirectory("", {
create: false,
exclusive: false
}, getsubdirectry, onError);
}
function getsubdirectry(dirEntry, onComplete) {
try {
var directoryReader = dirEntry.createReader();
} catch (e) {
alert(e);
}
directoryReader.readEntries(function(entries) {
for (i = 0; i < entries.length; i++) {
if (entries[i].name.indexOf(".jpg") == -1) {
if (entries[i].isDirectory) {
entries[i].getDirectory("", {
create: false,
exclusive: false
}, getsubdirectry, onError);
}
} else {
imagedetails.push({
id: i,
url: entries[i].toURI(),
tag: ""
});
}
}
onComplete();
}, function(error) {
alert("Error: = " + error.code);
});
}
In html
<a href="#/tab/photo/{{friend.id}}" class="gallery-item" collection-repeat="friend in outputphotos | myFilter:text track by $index" collection-item-width="'33%'"
collection-item-height="'33%'">
<img ng-src="{{friend.url}}" id="imageviewmainpage">
</a>
So what changes should i add to make the loading fast or is there any other way???
using PhoneGap (3.0.0) Camera plugin, one can capture new video or select one from the camera roll or album
however is it possible to create a new album via API ?
In our mobile app project, during the init phase, we want to check if 'swingAlbum' exist and if not create it directly. Then the user will be able to store clips into this 'swingAlbum' using the standard device camera capture feature for later use with our app.
Try This:
<button onclick="capture()"></button>
function capture() {
navigator.camera.getPicture(getImageURI, function (message) {
alert('Image Capture Failed');
}, {
quality: 100,
destinationType: Camera.DestinationType.FILE_URI,
correctOrientation: true
});
}
function getImageURI(imageURI) {
var gotFileEntry = function (fileEntry) {
// alert("got image file entry: " + fileEntry.fullPath);
var gotFileSystem = function (fileSystem) {
fileSystem.root.getDirectory('swingAlbum', {
create: true
}, function (dataDir) {
fileName = "myfile.jpg";
fileEntry.moveTo(dataDir, fileName, success, fsFail);
}, dirFail);
};
// get file system to copy or move image file to
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFileSystem, fsFail);
};
// resolve file system for image
window.resolveLocalFileSystemURI(imageURI, gotFileEntry, fsFail);
// file system fail
var fsFail = function (error) {
alert("failed with error code: " + error.code);
};
var dirFail = function (error) {
alert("Directory error code: " + error.code);
};
}
I am working on a worklight application which needs file IO in it. I have written that code in an android project separately. Can anyone tell me how I can combine the both of them into one?
Like Idan said, there's no way to port your existing native application to a Worklight Hybrid Application. However, you can take advantage of the File API that works out of the box with Worklight Hybrid Applications in different environments, such as Android and iOS. If you create a Cordova Plugin you will need to create a plugin for all the environments you wish to support.
Here's a quick example of the File I/O API for Writing a file:
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.onwriteend = function(evt) {
console.log("contents of file now 'some sample text'");
writer.truncate(11);
writer.onwriteend = function(evt) {
console.log("contents of file now 'some sample'");
writer.seek(4);
writer.write(" different text");
writer.onwriteend = function(evt){
console.log("contents of file now 'some different text'");
}
};
};
writer.write("some sample text");
}
function fail(error) {
console.log(error.code);
}
Here's an example of Reading a file:
// Wait for Cordova to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is ready
//
function onDeviceReady() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.file(gotFile, fail);
}
function gotFile(file){
readDataUrl(file);
readAsText(file);
}
function readDataUrl(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as data URL");
console.log(evt.target.result);
};
reader.readAsDataURL(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as text");
console.log(evt.target.result);
};
reader.readAsText(file);
}
function fail(evt) {
console.log(evt.target.error.code);
}
There is no way to combine an existing Worklight Hybrid application with an existing Native application. The correct approach for a Worklight application would be to write a Cordova plug-in to do what you want on the native side of things.
Please see these training modules which explain how to do just that: http://www.ibm.com/developerworks/mobile/worklight/getting-started.html#cordova