October 31, 2015

Visual Studio TACO - Cordova WebView containing jQuery

If you're using Visual Studio Tools for Apache Cordova (TACO), you may notice a problem if you want to display an external webpage using the Cordova WebView, if the external page uses jQuery. Once you build and start debugging your app, as soon as you try to display the external page, an exception will be thrown in the jquery.js file used by the external page.

Before we look at what the problem is, here's a quick review of displaying external web pages in a Cordova app:

  • Whitelist the page/domain in config.xml in the Domain Access section under the Common tab

  • In JavaScript, call window.open(whitelistedUrl)

The good news about this problem, is it's not really a problem - except when you're debugging. After failing every time I tried testing opening the new window, I swapped in the non-minified jquery file (in the external page) to take a look at where we were failing. It ends up in the jquery file itself, it does a try-catch that should throw an error for all non-gecko browsers, then swallows the error:

try {
 matches.call( div, "[test!='']:sizzle" );
 rbuggyMatches.push( "!=", pseudos );
} catch ( e ) {}

...But it ends up that even though this error is swallowed, The Visual Studio TACO debugger stops the processing at the point where the error is thrown, and even if you continue processing, it usually won't display the page. Even though this code is executed on any page on the www containing jquery, when those pages are pulled into a Cordova WebView using Visual Studio TACO debugging, processing stops and the app appears to error out for no reason.

But if you run your app in Release Mode, you'll see that the page gets pulled into the Cordova WebView just fine, now that the debugger doesn't halt on the swallowed error. So the answer is that you can't debug past the point where you pull an external page into a Cordova WebView. You'll need to test that part in release mode, and if there are any problems, you can debug the page using Chrome Dev Tools on the site itself.

If this is unacceptable, another alternative would be to look into using the Cordova InAppBrowser plugin, which has no problem with external jQuery files, but the downside is that it does pop up a new browser window.

Share |

October 22, 2015

First Take on Visual Studio Tools for Apache Cordova (TACO)

I installed the Visual Studio Tools for Apache Cordova last week to see how feasible it would be to use with an existing PhoneGap Android codebase.

I still haven't gotten to the point of publishing to Google Play yet (next post), but I thought I'd share a few of the pain points/errors I've encountered during setup and steps to resolve them:

(Note that these are specific to Android)

1) "Could not create the Java Virtual Machine" error

This is a memory issue with the JVM. The recommendation is to set your _JAVA_OPTIONS TO -Xmx512M
Full instructions

2) Error DEP10201 (No device found)

The Android emulator is a slow klunky experience. When you graduate to using your personal device to debug, you'll need to set up USB debugging. First, make sure USB debugging is enabled on your phone. On some Android phones, you first have to go to Apps..Settings..About Phone, then tap 7 times on the Build Number to enable Developer Options.
Full instructions on how to enable USB debugging on an Android phone

After enabling USB debugging on your device you will then need to install a USB driver for debugging.

So now that we're set up to test and debug on our phone, we'll look at some of the TACO nuances and the deployment process next week - hopefully with an app successfully deployed to Google Play.

Share |

July 08, 2014

JavaScript Variable Hoisting

One of the little known nuances of JavaScript, is that the interpreter organizes functions and variables per scope by declaring them at the beginning of the scoping container, regardless of their order in the written script. Here's an example:


Uncaught ReferenceError: y is not defined
In the above example, we're logging the value of variables x and y before they are declared, however, x has a value of
whereas y throws an error. So what's the difference? Neither variable has been declared when we are accessing them. Why do we only get an error when referencing y?

The reason is that the JavaScript interpreter reorganizes the declaration of ALL varibles within a scope to the top of the scope - in our case our scope is the function
. So in reality, our above code will be reorganized as shown below:

Notice that the declaration of var x has been "hoisted" to the top of the scope, but only the declaration. The initialization of the variable remains in its original spot. Once this variable was declared, JavaScript set its value to
- the JavaScript default. So that's why when we write the value of x, it's value is
, whereas y just throws an error because it has not been declared.

So the lesson is: always declare your variables at the beginning of their scope - if you don't, JavaScript will reorganize your code for you. If you think about it, you could probably come up with scenarios with much more confusing results than this simple example.

Share |

February 26, 2014

This Fine Morning

I like V8 juice. Every morning, on the way into work, I drink a glass of V8 juice.

Today was a bit strange - we had some flurries overnight, and I had left my car outside, so it had a coating of snow, so I took a few minutes and brushed the snow off the windows before leaving.

Since I was running late, I had to take our daily Skype call via cell. Usually I do it from my laptop at my desk, but in a pinch like this, I had to take it on my Android in the car.

But during the call, I noticed out of the corner of my eye that someone was gesturing to me from the car beside me...

After watching her for a few seconds, she then started gesturing like she was taking a drink, and pointing to my roof... and it hit me... I'd left my V8 on the roof of my car! Then, double-yikes, we were out of plastic cups, and I'd used a GLASS today! - Holy crap, there was a glass balancing on my roof driving 70 MPH on the interstate!

So the first thing I did was try to get as far ahead / away from everyone else as I could, and look for the first place I could C-A-R-E-F-U-L-L-Y pull over.

When I finally was able to pull over and come to a stop, I got out among some curious looks, and sure enough my glass of V8 was still precariously perched on my roof. Between the snow on my roof, the wetness of the glass, and the cold temperature, the glass had become soldered to my roof with ice. In fact, it was attached so firmly that I had to pry it off. I probably could have done donuts and would have only spilled the juice. Happy ending.

Share |

January 21, 2014

Using custom binding to manage large datasets with the Kendo Grid

The KendoUI grid comes with robust client-side functionality, and Ajax-capabilities - sorting, filtering, paging is all just built in. With the Razor wrapper, the .Pageable(), .Sortable(), and .Filterable() extension methods take care of it all. If the data you’re displaying is minimal or even a few thousand rows, this is probably the route to go – just set the grid's dataSource to Ajax, create a read action on your controller, and you’ve got a pretty robust grid.

But once you get into dealing with “large” datasets, you may want to consider implementing custom binding to get data in front of the user without the wait. When I say “large”, I mean data that takes more than a few seconds to display, or data that is likely grow quickly to an unmanageable size. In our scenario the size of the dataset could be up to 25 Mb, but even after compressing it to 800k, it was taking several seconds to send the data from the server to the browser and then display the data in the grid. After the painful initial wait though, paging, sorting, filtering was then instantaneous since the data was all client side. But what to do about the initial wait?

That’s where custom binding can help out. By implementing custom binding, you can combine the best of Ajax and Server binding to quickly deliver large datasets to your users. A small drawback is that all the sorting, filtering, paging has to be handled in the controller method. Fortunately Kendo makes this fairly easy by automatically passing collections of criteria on the request object – here’s a quick overview of server code required to manually implement paging, sorting and filtering when implementing custom binding.

The sorts collection on the request object contains the fields and directions of all sorts that are currently applied to the grid.

This is beautiful – I was expecting to have to write code to handle all possible operators and fields, but Kendo’s ExpressionBuilder class will take the filters collection from the request and convert it to a lambda expression to be applied to your dataset! Way easy.

Based on the page number and the page size, determine the subset of data to return to the client.

One other thing to remember when implementing custom binding is that Server caching of the dataset is something to keep in mind – especially if the db call takes more than a second or two. With custom binding, we’re calling back to the server on every filter, page, or sort event – so we don’t want to make a db call on top of that every time. This is true even (and especially) if we use Kendo’s Server databinding instead of Ajax databinding. So anyway, if you’re using Kendo’s data grids, the out of the box Ajax binding is a good, easily implementable solution, but if you’re dealing with large amounts of data, you’ll want to look into custom binding.

Full Razor code for grid with custom binding enabled:

Full controller method for grid Read event:

Share |