Posted in Cordova/PhoneGap

[Cordova] Display Onsen UI popover as dropdown

It is very easy to display an Onsen UI popover as dropdown.

For full example, please refer here

Below is detail of code to display popover using Onsen UI

  • HTML
<body ng-controller="DropdownController">
<ons-page>
  <ons-toolbar>
Dropdown example
</ons-toolbar> </ons-page> <ons-template id="popover.html"> <ons-popover cancelable direction="down"> <ons-list> <ons-list-item ng-repeat="option in options" modifier="tappable"> {{ option }} </ons-list-item> </ons-list> </ons-popover> </ons-template> </body>
  • JS
.controller('DropdownController', function($scope) {
  ons.ready(function() {
    ons.createPopover('popover.html').then(function(popover) {
      $scope.popover = popover;
    });
  });

  $scope.options = ['Load', 'Sync', 'Settings'];
});
Posted in Cordova/PhoneGap

[Cordova] How to download a file

cordova_logo

To download a file from given URL, we need the cordova-plugin-file-transfer plugin. You also install this plugin by command:

cordova plugin add cordova-plugin-file-transfer

Then, use below code:

 function downloadFile(downloadedFileName, downloadLink) {

var fileURL;
if (monaca.isAndroid === true) {
var androidDownloadPath = ‘/storage/emulated/0/path/to/’;
fileURL = androidDownloadPath + downloadedFileName;
} else {
var iosDownloadPath = cordova.file.documentsDirectory;
fileURL = iosDownloadPath + downloadedFileName;
}
var uri = encodeURI(downloadLink);
processDownloadFile(uri, fileURL);

}

function processDownloadFile(uri, fileURL) {
var encodedFileURL = encodeURI(fileURL);
var fileTransfer = new FileTransfer();
fileTransfer.download(
uri,
encodedFileURL,
function(entry) {
console.log(“Download complete ! Place of downloaded file: ” + entry.toURL() + ” – Source: ” + uri);
},
function(error) {
console.error(“error source ” + error.source + ” – download error target ” + error.target + ” – upload error code” + error.code);
},
false, {
headers: {
“Authorization”: “Basic false headers”
}
}
);
}

Posted in Android Programming, Cordova/PhoneGap, iOS Programming, Mobile_Tips

[Cordova] Tips: How to delete a file

cordova_logo

Actually, it is very easy and simple because you can use the cordova-plugin-file

You can download the file plugin with command:

cordova plugin add cordova-plugin-file

Demo code:

var path = "file:///storage/emulated/0";
var filename = "myfile.txt";

window.resolveLocalFileSystemURL(path, function(dir) {
	dir.getFile(filename, {create:false}, function(fileEntry) {
              fileEntry.remove(function(){
                  // The file has been removed succesfully
              },function(error){
                  // Error deleting the file
              },function(){
                 // The file doesn't exist
              });
	});
});

Hope it is useful🙂

Posted in Cordova/PhoneGap

How create Android using Ionic + Cordova + Android Studio

If you want to create an Android application using Ionic + Cordova + Android Studio. You can refer below steps:

– Step 1: open “Git Bash” application

Featured image

– Step 2: run command: ionic start <app_name> <app_type> .Example: ionic start myApp sidemenu

Featured image
– Step 3: move tp <app_name> folder and add android/ios platform for it by command: “ionic platform add <android/ios>”. Example: ionic platform add android
– Step 4: build project by command: ionic build <android/ios> . Example: ionic build android
– Step 5: open the project by Android Studio (open not import)

Featured image

– Step 6: configure for run app

Featured image

Featured image

Featured image

  • Result on Brower:

Step_Result_on_Brower

You can refer this link for other reference.

Hope this help :).