Developer docs by Indraneel Pole : Cordova

How to add icon to your Cordova App with Visual Studio Tools for Apache Cordova

Indraneel Pole — Thu, 02 Jun 2016 14:45:36 GMT

Setting app icon is usually very straight forward task in application development, and thus should not require a dedicated blogpost for this. However, while using Apache Cordova in Visual Studio environment, it becomes slightly tricky.

So, why is it tricky? That is because Visual Studio TACO (Tools for Apache COrdova) shows the config.xml file differently than you usually see XML file. It shows all the important configurations such as plugins, version, name of the application etc. in a user friendly interface -

However this doesn’t show where the icon should be set. To do so, you need to see the actual XML code and make changes there.

First, add the icon image in your application’s res folder under the platform that you are using. for me it is Android.

Once that is done, right click on config.xml and click on view code (Can also be done with F7) Now here, inside every platform attribute, you will have an icon attribute. Add your icon path as source here. You can optionally select density (For Android) or width and height (For iOS and Windows).

And that’s all. The icon is set for the application.

Hiding notification bar for Android Apps using Visual Studio tools for Apache Cordova

Indraneel Pole — Sat, 23 Jan 2016 17:32:09 GMT

While making your Android app full-screen (hiding the notification bar on the top) is quite easy in the Native environment where you can simply add the configuration in Manifest.xml file, if you are doing the cross-platform application development using some tool such as Apache Cordova, things become a little bit trickier.

I am using EXT JS and Sencha Touch as the web framework for my Mobile Application and Cordova just as a platform for compilation, peripheral support and so on. So my first idea was to look for the configuration in Sencha Touch framework, however a simple search on Sencha Forum showed me that it is not possible to do this through Sencha as Ext JS does not provide any meta tag for this, and is dependent on UI’s web view to do this. It is possible to access the manifest.xml file using Sencha CMD, but if you are using Sencha Touch with Cordova in Visual Studio, and you are not using Sencha CMD, things become tricky.

Thankfully, Cordova has made it very easy to do so. All you have to do is, go to config.xml file in of your solution. If you use Visual Studio tools for Apache Cordova, you will see something like this -

You simply need to select the Fullscreen option to yes or no, and it will make the desired change for you. If you want to hide the navigation bar select yes, otherwise simply select no (It is by default no in my knowledge).

I hope this helps!

JavaScript runtime error - Unable to add dynamic content

Indraneel Pole — Tue, 20 Oct 2015 15:35:27 GMT

So, lately I am working on Cordova (Or previously known as Phonegap) tools for Visual Studio to build a cross platform application using JavaScript and HTML. I imported some pre-written JavaScript code to Cordova and while it worked for me on Android Emulators, trying to run it on Windows Phone was a bit struggling. While trying to deploy it on Windows device, it threw an exception saying "JavaScript runtime error - Unable to add dynamic content."

After a little more probe (By commenting/uncommenting some lines basically), I realized that it is happening every time I try to dynamically load html page from JavaScript. (Which is also basically what the exception says but I had to do it myself).

When I Googled about it, I found out that when you try to deploy some JS code on Windows devices, Microsoft uses some security principles to prevent un-sanitized markup which literally means adding HTML dynamically such as using innerHTML, outerHTML, document.write (That's where exactly I stumbled) and so on will not be so easy in Cordova when using it on Windows devices. Thankfully I found an MSDN page that states how to tackle this issue.

How: All the code that you are using to load HTML dynamically should be called inside a function of the MSApp called execUnsafeLocalFunction.

Syntax: E.g. I want to use document.write inside my script.

document.write('<meta name="'+example+'" content="'+someContent+'">')

This should be called inside:

MSApp.execUnsafeLocalFunction(function () {
document.write('<meta name="'+example+'" content="'+someContent+'">')
});

And its works perfect!