Develop Reference

How do I read a deployed file in MAUI/Xamarin on Android

I have a small MAUI app i'm testing with. Im trying to read a file that was part of the deployment. I have the code below, which works great in a Windows deploy of the MAUI app, but crashes in Android. What is the proper cross-platform way to do this?
// TODO get from service or xml
var path = AppDomain.CurrentDomain.BaseDirectory;
//var path = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetEntryAssembly().Location);
var fullpath = Path.Combine(path, "Services\\questions.json");
var json = File.ReadAllText(fullpath);

MAUI has a new way to access files included with the app: MauiAsset.
Described in blog Announcing .NET MAUI Preview 4, Raw Assets:
.NET MAUI now makes it very easy to add other assets to your project and reference them directly while retaining platform-native performance. For example, if you want to display a static HTML file in a WebView you can add the file to your project and annotate it as a MauiAsset in the properties.
<MauiAsset Include="Resources\Raw\index.html" />
Tip: you can also use wildcards to enable all files in a directory:
... Include="Resources\Raw\*" ...
Then you can use it in your application by filename.
<WebView Source="index.html" />
UPDATE
However, the feature MauiAsset apparently still needs improvement:
open issue - MauiAsset is very hard to use.
There we learn that for now:
Set BuildAction in each file's properties to MauiAsset.
That is, its not recommended to use the "wildcard" approach at this time. Set that build action on each file in solution explorer / your project / the file.
Accessing on Windows requires a work-around:
#if WINDOWS
var stream = await Microsoft.Maui.Essentials.FileSystem.OpenAppPackageFileAsync("Assets/" + filePath);
#else
var stream = await Microsoft.Maui.Essentials.FileSystem.OpenAppPackageFileAsync(filePath);
#endif
NOTE: This will be simplified at some point; follow that issue to see progress.
UPDATE
The current MAUI template is missing some platform-specific flags. For now, add your own flag to identify when the code is running on Windows:
Complete example in ToolmakerSteve - repo MauiSOAnswers. See MauiAssetPage.
MauiAssetPage.xaml:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiTests.MauiAssetPage">
<ContentPage.Content>
<!-- By the time Maui is released, this is all you will need. -->
<!-- The Init code-behind won't be needed. -->
<WebView x:Name="MyWebView" Source="TestWeb.html" />
</ContentPage.Content>
</ContentPage>
MauiAssetPage.xaml.cs:
using Microsoft.Maui.Controls;
using System.Threading.Tasks;
namespace MauiTests
{
public partial class MauiAssetPage : ContentPage
{
public MauiAssetPage()
{
InitializeComponent();
Device.BeginInvokeOnMainThread(async () =>
{
await InitAsync();
});
}
private async Task InitAsync()
{
string filePath = "TestWeb.html";
#if WINDOWS
var stream = await Microsoft.Maui.Essentials.FileSystem.OpenAppPackageFileAsync("Assets/" + filePath);
#else
var stream = await Microsoft.Maui.Essentials.FileSystem.OpenAppPackageFileAsync(filePath);
#endif
if (stream != null)
{
string s = (new System.IO.StreamReader(stream)).ReadToEnd();
this.MyWebView.Source = new HtmlWebViewSource { Html = s };
}
}
}
}
TestWeb.html:
(whatever html you want)
In Solution Explorer, add TestWeb.html to your project. In its Properties, select Build Action = MauiAsset.

I tried looking for a solution to this for months. I ended up hosting the file online then creating a method to download the file during runtime
public async Task DownloadFile(string fileName)
{
if (File.Exists(FileSystem.Current.AppDataDirectory + $"/{fileName}"))
{
return;
}
else
{
try
{
NetworkAccess networkAccess = Connectivity.Current.NetworkAccess;
if (networkAccess == NetworkAccess.Internet)
{
await Task.Run(() =>
{
var uri = new Uri($"https://myhostedfile.com/{fileName}");
WebClient webClient = new WebClient();
webClient.DownloadFileCompleted += new AsyncCompletedEventHandler(DownloadFileCallback2);//checking if download is complete
webClient.DownloadProgressChanged += new DownloadProgressChangedEventHandler(MaintainProgress);//event handler to check download progress
webClient.DownloadFileAsync(uri, FileSystem.Current.AppDataDirectory + $"/{fileName}");
});
}
else
await Shell.Current.DisplayAlert("No Internet", "Failed to get some files from the internet, confirm if your internet is" +
"working", "OK");
}
catch (Exception)
{
await Shell.Current.DisplayAlert("Error", "Failed to get some files from the internet, confirm if your internet is" +
"working", "OK");
}
}
}
Then you can access your file URL using:
string filePath = FileSystem.Current.AppDataDirectory + $"/myfile.pdf;

Camera not working using phonegap build

I'm making an app capable of take photos and upload them to a server. The phone will save the id generated.
I made a class abstractApp that creates an App object with a couple of helpers and variables. I'm using Framework7.
var App;
document.addEventListener("deviceready", function() {
App = new abstractApp();
var i;
App.f7Ref = new Framework7({init: false});
for (i = 0; i < App.constants.views.length; i++)
{
if (i==0)
App.mainView = App.f7Ref.addView (
App.constants.views[i].selector,
App.constants.views[i].settings );
else
App.f7Ref.addView (
App.constants.views[i].selector,
App.constants.views[i].settings );
}
// Checks if there exists register of remote photos
if ( App.local.get('remotephotos', false) == null || App.local.get('remotephotos', false) == '' )
{
App.remotephotos = [];
App.local.set('remotephotos', []);
}
else
{
App.remotephotos = App.local.get('remotephotos');
}
// Checks if there exists register of local photos
if ( App.local.get('localphotos', false) == null || App.local.get('localphotos', false) == '' )
{
App.localphotos = [];
App.local.set('localphotos', []);
}
else
{
App.localphotos = App.local.get('localphotos');
}
for (i = 0; i < appControllers.length; i++)
{
appControllers[i].apply(App);
}
console.log(App);
}, false);
In appControllers I'm saving functions related to each page (so it is a bit more organized). With only index and new-photo controllers I have no problem, I can attach events to elements and navigate between views. The problem is calling the camera object.
window.appControllers.push(function()
{
var $$ = Dom7;
var Ref = this.f7Ref;
var server = new serverInterface();
var photos = this.remotephotos;
var App = this;
Ref.onPageInit('new', function (page) {
Ref.alert('entra', 'entra');
$$('.capture').on('click', function () {
Ref.alert('Click', 'Click detected');
navigator.camera.getPicture(onSuccess, onFail,
{
quality: 20,
destinationType: destinationType.FILE_URI
});
function onSuccess(imageURI) {
Ref.alert('Photo captured.', 'Bien');
}
function onFail(message) {
Ref.alert('There was a problem.', 'Ups');
}
});
});
});
So, I enter the new page and I click the button with cass capture and the alert (click detected) appears, but it doesn't show the camera to take the photo.
I'm using Phonegap Build and an android phone, do you have any idea of what's happening?
Thank you very much in advance

The problem wasn't the javascript code I quoted.
I was loading the camera plugin in the config.xml like this
<gap:plugin name="org.apache.cordova.camera" />
But it should be loaded this way:
<plugin name="cordova-plugin-camera" />
If the plugin is not loaded correctly, in Phonegap Build appears: version n/a installed. In this case, when it is correctly loaded, appears: version 2.1.0 installed.
More information about this thread can be found here: http://phonegap.com/blog/2015/11/19/config_xml_changes_part_two/
Hope it helps someone else too
Regards

File Explorer for android and iOS

I am developing hybrid application (POC) using Cordova and Sencha Touch 2.4, Objective is to develop file explorer.
Actually i did it using Cordova File API and I can able to access all the folders and files in Android, But in iOS i can able to read only No Cloud Folder (Don't know what is that folder).
I want to access complete folder structure in iOS, Just like Android.
After number of search i got info that in IOS we can't access file system using Safari browser, Is it same for Hybrid App ?
Is there any other way to achieve this ?
This is what i am doing, Using File API i am requesting file system (ROOT Folder) and when the user tap any folder, i am reading files and folders in that folder. When the user tap file i am simply showing an alert that the user selected File.
Cordova [config.xml]
<preference name="iosExtraFilesystems"
value="library,library-nosync,documents,documents-nosync,cache,bundle,root" />
<preference name="AndroidExtraFilesystems"
value="files,files-external,documents,sdcard,cache,cache-external,root" />
Controller Code
browseFs : function(button, e, eOpts){
Ext.Viewport.add(this.getFileBrowserWindow());
this.getFileBrowserWindow().show();
this.getFileBrowserWindow().mask();
this.createFileSysList(MTDProduct.app.currentDir);
},
fileBack : function(button, e, eOpts){
this.getFileBrowserWindow().mask();
this.createFileSysList(MTDProduct.app.parentDir);
},
createFileSysList : function(currentDir){
console.log(currentDir);
var me = this;
if(!currentDir){
currentDir = MTDProduct.app.rootFolder;
}
MTDProduct.app.currentDir = currentDir;
var directoryReader = currentDir.createReader();
Ext.getStore('filesList').removeAll();
directoryReader.readEntries(function(entries){
var dirArr = new Array();
var fileArr = new Array();
for(var i=0; i<entries.length; ++i){
var entry = entries[i];
var data;
if( entry.isDirectory && entry.name[0] != '.' ) {
data = { name: entry.name, type: 'Directory'}
}
else if( entry.isFile && entry.name[0] != '.' ){
data = { name: entry.name, type: 'File'}
}
Ext.getStore('filesList').add(data);
Ext.getStore('filesList').sync();
}
currentDir.getParent(function(parent){
MTDProduct.app.parentDir = parent;
me.getFileBack().show();
},
function(error){
me.getFileBack().hide();
alert('Get parent error: '+error.code);
});
me.getFileBrowserWindow().unmask();
}, function(error){
me.getFileBrowserWindow().unmask();
alert('listDir readEntries error: '+error.code);
});
},
fileTap : function( list, index, target, record, e, eOpts ){
this.getFileBrowserWindow().mask();
var data = record.getData();
var currentDir = MTDProduct.app.currentDir;
var me = this;
if( data.type == 'Directory' && currentDir != null ){
console.log('Directory');
currentDir.getDirectory(data.name, {create:false},
function(dir){
me.createFileSysList(dir);
},
function(error){
alert('Unable to find directory: '+error.code);
}
);
}
else if(data.type == 'File' && currentDir != null){
alert('Selected a file');
me.getFileBrowserWindow().unmask();
me.getFileBrowserWindow().hide();
}
}

This is not possible, Apple has limited the file access to just the app itself's. So there is no other way of accessing it.
You can view files only in that your App's sandbox. Every App has got a Documents, Cache and temp folders. I think the first two are automatically backed up by iTunes when you connect your device, the latter is not backed up.
Example, to get files in Cache directory path -
NSError *err = nil;
NSArray *myPathList = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);
NSString *myPath = [myPathList objectAtIndex:0];
NSArray *dirContent = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:myPath error:&err];
if(err) NSLog(#"ERROR: %#",[err localizedDescription]);
NSMutableArray *filePaths = nil;
int count = (int)[dirContent count];
for(int i=0; i<count; i++)
{
[filePaths addObject:[dirContent objectAtIndex:i]];
}
return filePaths;

Issue with existing phone gap code demonstrated by adobe

These days i am trying to run an existing code from Adobe's Technical Evangelist Andrew Trice. The concept is to connect a database.com DB to phone gap application. here is the tutorial with the source code :
http://wiki.developerforce.com/page/Building_PhoneGap_Mobile_Applications_Powered_by_Database.com
THE ISSUE :
AFTER SUCCESSFUL INSTALLATION OF THE Childbrowser there is a specific error in the code :
Uncaught type error: cannot read property "ChildBrowser" of undefined at file:///android_asset/www/js/salesforceWrapper.js:17
here is the full code : ( i put comment in the line with the error)
function SalesforceWrapper() {
/* AUTHENTICATION PARAMETERS */
this.loginUrl = 'https://login.salesforce.com/';
this.clientId = '3MVG99qusVZJwhsmjZIlEaUsFRnadOib8Kv_MPwooFMEi.XpChrZ5cVEcKU_7NR1zfQjjmdHI7wMARXnLlgku';
this.redirectUri = 'https://login.salesforce.com/services/oauth2/success';
/* CLASS VARIABLES */
this.cb = undefined; //ChildBrowser in PhoneGap
this.client = undefined; //forceTk client instance
this.init();
}
SalesforceWrapper.prototype.init = function() {
this.client = new forcetk.Client(this.clientId, this.loginUrl);
// line 17 with the error
this.cb = window.plugins.childBrowser;
}
SalesforceWrapper.prototype.login = function (successCallback) {
this.loginSuccess = successCallback;
var self = this;
self.cb.onLocationChange = function (loc) {
if (loc.search(self.redirectUri) >= 0) {
self.cb.close();
self.sessionCallback(unescape(loc));
}
};
self.cb.showWebPage(self.getAuthorizeUrl(self.loginUrl, self.clientId, self.redirectUri));
}
SalesforceWrapper.prototype.getAuthorizeUrl = function (loginUrl, clientId, redirectUri) {
return loginUrl + 'services/oauth2/authorize?display=touch' + '&response_type=token&client_id=' + escape(clientId) + '&redirect_uri=' + escape(redirectUri);
}
SalesforceWrapper.prototype.sessionCallback = function(loc) { var oauthResponse = {};
var fragment = loc.split("#")[1];
if (fragment) {
var nvps = fragment.split('&');
for (var nvp in nvps) {
var parts = nvps[nvp].split('=');
oauthResponse[parts[0]] = unescape(parts[1]);
}
}
if (typeof oauthResponse === 'undefined' || typeof oauthResponse['access_token'] === 'undefined') {
console.log("error");
} else {
this.client.setSessionToken(oauthResponse.access_token, null, oauthResponse.instance_url);
if ( this.loginSuccess ) {
this.loginSuccess();
}
}
this.loginSuccess = undefined;
}
ADOBE'S PHONE GAP IS A DANGEROUS TOOL , BUT IT IS STILL SO TOUGH TO MANIPULATE.
THANK YOU APRIORI FOR YOUR POSSIBLE PROPOSALS . AT THIS POINT I DON'T EXPECT TO GET THE ANSWER. I KNOW THAT THERE IS A BIG DISTANCE...

well people the problem was caused because of the index.html in which the reference of the childbrowser.js was in different folder.
it was in :
<script type="text/javascript" src="js/libs/ChildBrowser.js"></script>
instead of :
<script type="text/javascript" src="js/ChildBrowser.js"></script>
SO PEOPLE BE CAREFULL!!!
NOW MY PROBLEM HAS TO DO WITH ANOTHER FUNCTION BUT I THINK THAT IT IS SOMETHING SIMILAR.
THANK YOU ALL!
PLEASE TRY TO ANSWER IF YOU KNOW SOMETHING.

Pull to refresh in Titanium for Android

How to pull to refresh?
In Titanium appcelerator I need to show a list of content in tableview. If I pull the view it needs to update. In iPhone I complete but in Android it won't work. Please any one help to solve this problem in Android.
My Android code:-
tableView.addEventListener('scroll',function(e)
{
var offset = e.contentOffset.y;
if (offset < -65.0 && !pulling && !reloading)
{
var t = Ti.UI.create2DMatrix();
t = t.rotate(-180);
pulling = true;
arrow.animate({transform:t,duration:180});
statusLabel.text = "Release to refresh...";
}
else if((offset > -65.0 && offset < 0 ) && pulling && !reloading)
{
pulling = false;
var t = Ti.UI.create2DMatrix();
arrow.animate({transform:t,duration:180});
statusLabel.text = "Pull down to refresh...";
}
});
tableView.addEventListener('dragEnd', function(e)
{
if(pulling && !reloading)
{
reloading = true;
pulling = false;
arrow.hide();
actInd.show();
statusLabel.text = "Reloading...";
tableView.setContentInsets({top:60},{animated:true});
tableView.scrollToTop(-60,true);
arrow.transform=Ti.UI.create2DMatrix();
beginReloading();
}
});

Titanium now supports pull to refresh for BOTH Android (> v6.2.0) and iOS (>3.2.0) with a Titanium.UI.TableView, Titanium.UI.ListView or Titanium.UI.ScrollView object.
See the docs:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.RefreshControl
Sample code taken from the docs:
var win = Ti.UI.createWindow({
fullscreen:true
});
var counter = 0;
function genData() {
var data = [];
for (var i=1; i<=3; i++) {
data.push({properties:{title:'ROW '+(counter+i)}})
}
counter += 3;
return data;
}
var section = Ti.UI.createListSection();
section.setItems(genData());
var control = Ti.UI.createRefreshControl({
tintColor:'red'
})
var listView = Ti.UI.createListView({
sections:[section],
refreshControl:control
});
control.addEventListener('refreshstart',function(e){
Ti.API.info('refreshstart');
setTimeout(function(){
Ti.API.debug('Timeout');
section.appendItems(genData());
control.endRefreshing();
}, 2000);
})
win.add(listView);
win.open();

Is this just the IOS code form the Kitchen Sink example?
There are a couple of attempts at getting this working on Android, though I haven't confirmed that any of them work as expected. From what I understand, the problem is that you can't get the offset the same way in Android as in IOS.
A quick Google search turned up this link, which was referenced from the official Appcelerator forums.
https://gist.github.com/903895