Category Archives: Cordova

Ionic2: if … else … template blocks in Angular2

Leave a reply

Angular2 supported an if-condition via the *ngIf directive.

<div *ngIf="edit == false">
VIEW
</div>
<div *ngIf="edit == true">
EDIT
</div>

Since Angular2 v4, the ngIf directive was extended with an ‘then.. else..’ syntax, in which you can reference the identifier of the HTML tags to include.

<div *ngIf="edit; then editDiv else viewDiv"></div>
<ng-template #editDiv>
EDIT
</ng-template>
<ng-template #viewDiv>
VIEW
</ng-template>

Another way to control HTML input-tags to be editable or disabled, is to use the [attr.disabled] syntax.

<input [attr.disabled]="edit ? null : true">

When using Ionic2, this translates to the following code.

<ion-input [disabled]="!edit"><ion-input>

In the TypeScript component, then in the control the ‘edit’ boolean variable.

I use the [attr.disabled] syntax for instance to display a detail page of an object in view (Read) or edit (Create/Update) form, and adding a Delete option to the view modus to complete a CRUD option. This simplifies my application development, imo, cause now the navigation in my application is mostly from List to Detail pages.

See also: NgIf Else lands in Angular 2.x+/4.0, Ashish Singh (Dec 18, 2016)

Cordova: Install or Update Cordova on Windows with Visual Studio

1 Reply

To install Apache Cordova on Windows and to use it with Visual Studio 2010 Express for Windows Phone, follow these steps:

  1. Get the source code for the latest version from the Cordova project page or for older versions go to the Cordova distribution archive.
  2. Unzip the source archive cordova-3.4.0-src.zip.
    C:/>unzip cordova-3.4.0-src.zip
  3. Locate the file cordova-wp8.zip in the extracted directory, and unzip the archive.
    C:/>cd cordova-3.4.0
    C:/cordova-3.4.0>unzip cordova-wp8.zip
  4. Change directory to cordova-wp8 and run the createTemplates.bat script.
    C:/cordova-3.4.0>cd cordova-wp8
    C:/cordova-3.4.0/cordova-wp8>createTemplates.bat
  5. Copy the generated template files CordovaWP7_3_4_0.zip and CordovaWP8_3_4_0.zip to the Visual Studio Templates directory in the users My Documents folder ~/Document
    s\Visual Studio 2010\Templates\ProjectTemplates.
    C:\cordova-3.4.0\cordova-wp8>copy CordovaWP8_3_4_0.zip "C:\Users\user1\Document
    s\Visual Studio 2010\Templates\ProjectTemplates"

Now, start Visual Studio 2010 Express for Windows Phone, and in the File menu, select New Project…. In the Installed Templates select the Cordova template you just copied.

To add Cordova plugins on Windows with Visual Studio, go here.

Cordova: adding camera plugin to wp7 in Visual Studio Express on Windows 7 Pro

1 Reply

To see how to install Cordova on Windows with Visual Studio, go here.

After you created the Cordova app using the generated Template in Visual Studio, you must use the plugman package instead of the cordova tool to install plugins. If you didn’t install plugman, first install plugman using npm.
>npm install -g plugman

To add the plugin camera use the following code inside the root of the solution.
C:\>cd \dev\mobile\CordovaWP7_3_4_0_App1
C:\dev\mobile\CordovaWP7_3_4_0_App1>plugman install --platform wp7 --project CordovaWP7_3_4_0_App1 --plugin org.apache.cordova.camera
Fetching plugin "org.apache.cordova.camera" via plugin registry
Starting installation of "org.apache.cordova.camera" for wp7
Preparing wp7 project
org.apache.cordova.camera installed on wp7.

Cordova: submit multipart form with additional parameters

1 Reply

With the Cordova plugin File-Transfer you can submit a multipart form with additional parameters. To read an image file as a binary string, you can use the HTML5 FileReader syntax from the File API by using the Cordova plugin File.

For instance, the following example uses Idol On Demand‘s APIs to analyze images for barcodes.

Add the required plugins.
$cordova plugin add org.apache.cordova.console
$cordova plugin add org.apache.cordova.file
$cordova plugin add org.apache.cordova.file-transfer

This is the code to submit a multipart form in Cordova. Note that the additional parameters are added to the form by using the options.params property with an associative array of parameters.

var formURL = "https://api.idolondemand.com/1/api/sync/readbarcode/v1";
var encodedURI = encodeURI(formURL);
// add additional parameters 'file' and 'apikey' to the multipart form
var options = new FileUploadOptions();
options.fileKey = "file";
// strip the filename from the full path
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
var imgData = readFileAsBinaryString(fileURI);
options.params = { 'apikey': apikey, 'file': imgData };
// create the FileTransfer object
var ft = new FileTransfer();
// submit the multipart form
ft.upload(fileURI, encodedURI, fnOnSuccess, fnOnError, options, false);

The readFileAsBinaryString(file) is implemented like this:

function readFileAsBinaryString(file) {
 console.log("readFileAsBinaryString(: "+file+")");
 var reader = new FileReader();
 reader.onloadend = function(e) {
  console.log("Successfully read file as binary string");
  var imgData = e.target.result;
  return imgData;
 };
 reader.onerror = function(e) {
  console.log("Error while reading file as binary string: "+e.target.error.code);
 };
 reader.readAsBinaryString(file);
}