Category: Coding

This is part 2 in a series of posts about creating a mobile web app for browsing music databases. Part 1 can be found here.

The first task in building the front end was testing my API to make sure I knew what was being returned by Rovi and that it had everything I wanted. I added some test JavaScript to the default MVC view that would call my API. It was a bit of trial and error going through the data and seeing where I needed to adjust my requests on the back end. My plan was to simply copy the test code into the official script files. The Rovi service itself is easy to use and well documented.

Next was setting up the base AngularJS implementation. I fired up Google to try and find a good online example of how to structure the app. The web site has a tutorial so I started stepping through it. But as I began to have questions on how to do certain things, and what the best practices are, I noticed the code I found online differed from what the tutorial was doing. More searching uncovered tools like angular-seed and angular-enterprise-seed. They were comprehensive but included way too much stuff to absorb for someone just learning the framework. They seem to be more for large scale web applications. I eventually came up with what looked like a good way to set up my module, controller, and service declarations, along with the source file structure to use. I followed suggestions from places like yeoman.io and various others found online. I don’t know if it’s exactly what is considered good by the Angular community but it’s close. My main app script ended up looking like this:

What to say about Angular? I like it. The framework strives to make it easy to separate your app logic from your markup from your data access, and largely succeeds. It includes tons of built-in stuff to further that goal. I ended up creating two custom Angular services, one for common code and one for data access. The latter looked like this:

The data service uses the built-in Angular $http service and does any required massaging of the data before handing it off to the controller that called it. The controllers then set various properties of the current scope as needed.

I created several different views based on what needed to be shown; one for artist search results, one for data on a specific artist, etc. Whenever I ran into a case where I needed the markup to be different based on the data, I was pleasantly surprised to find an Angular directive that would allow it to be driven by the model. Things like ng-show and ng-href were invaluable. The general rule in the Angular world is that you shouldn’t make any changes to the DOM in your controllers, and if you find yourself reaching for jQuery you might be doing something wrong. I’m happy to say I didn’t have any need to use jQuery to manipulate the DOM.

One of my favorite aspects of some directives is that Angular will react based on whether the expression in the directive is truthy. It makes me wonder if Stephen Colbert had some influence on the framework’s design, or at least the documentation.

Next is incorporating animations for view transitions, adding something to the options page, and filling out some missing features.

Coding

This is part 1 in a series of posts about creating a mobile web app for browsing music databases.

In my continuing quest to up my web/mobile game, I decided to build a web app for searching the All Music database. There are a number of music metadata repositories on the web, some robust and some paltry. The one I like the best is run by Rovi and powers All Music, along with iTunes and several other big name media products. They have an iOS app that allows you to access all parts of the data store. It’s a great thing, but the search portion is not very user friendly and doesn’t always work the way you expect.

My goal was to create a basic search form that allows you to look up an artist, album, or song title. The native app had an all-in-one search feature where it tried to dynamically show you results for what it thought you were looking for, but it often failed to return what I wanted. I understand the ease and utility of having a single field for different types of information, but I wanted to run specific searches.

The first step was creating an API that would essentially wrap the calls to Rovi’s RESTful API. I didn’t want to interface directly with Rovi for several reasons: to allow the results to be formatted differently if I wanted, to make it easier to switch to a different data store in the future, and so I wouldn’t have to allow cross-origin requests. I went with the standard Web API project in Visual Studio 2013.

Getting the routing to work properly was the only real hurdle with the API. The default Visual Studio template sets up routes that include /api/<controller>. But I just wanted /api and not the <controller> part. It’s tricky because the base controller class is ApiController. The MVC convention is controller class names are of the form <my_ctl_name>Controller and then my_ctl_name becomes part of your route. Having my own class called ApiController wasn’t possible, so I called it SiteApiController. But how to tell all requests to use that controller? Enter WebApiConfig.

I removed all the default routes and added two new ones: one for searching and one for lookups. I was able to specify the exact controller class and a route template that only included /api and not a controller designation. Bonus points to Microsoft for allowing lots of route configuration options.

Even though I only needed to make single, synchronous requests to Rovi, I used HttpClient to do it. There might be a need in the future to make multiple simultaneous requests to build a query result, if so it will be easy to make them async. The next step was the front end.

Coding

This is part 4 in a series of posts about creating a web-based replacement for the Firefox Home iOS app. Part 3 can be found here.

Now that I had an ironclad way of getting bookmark data, I needed to display it and provide a clean method of navigating through it. I looked around the web for a suitable client-side data binding solution, and KnockoutJS seemed like a good way to go. I wasn’t familiar with the MVVM pattern but thought it would be a good learning experience. In a nutshell, the way I understand MVVM is you have a model of your data that is kept strictly separate from the client-side view of it. A view model lives on the client that takes in the data itself and knows where to put it in the UI (admittedly, I may be simplifying or leaving something out).

A quick note about how Firefox organizes bookmarks: it stores them in two high-level containers, the bookmarks toolbar and the bookmarks menu. No big mystery where these are: it’s the built-in toolbar for single-click access to bookmarks, and the Bookmarks menu in the main menu bar at the top of the window.

I set up an unordered list for the bookmarks that looked like this:

I went with the foreach binding in Knockout, since it made the most sense for what I was doing. I briefly tried the template binding but it turned out to be more involved than necessary. I initially tried to have a single unordered list that held everything, including the dividers for toolbar bookmarks and menu bookmarks. But I had a hard time changing the theme for the divider items on the fly, which I wanted to be a different color. Knockout lets you define binding event handlers, like this one:

Here I’m basically setting attributes on the elements in each list item based on whether it’s a directory or an actual bookmark. I tried modifying the data-theme attribute used by JQM to indicate a list divider, but the change never seemed to get applied. Fortunately Knockout lets you apply the binding logic to a subset of items in a ul via containerless control flow syntax. There was some duplication of markup, but not enough to worry about.

The various samples at knockoutjs.com and the web at large had two different ways of setting up the view model: as a JavaScript variable or a function. I went the function route since I needed to do a bit of data manipulation before assigning the bookmark data. Knockout has the capability of updating the UI automatically when the bound data changes, such as in response to a user clicking on something. That sort of fit my usage pattern, though I would be updating the data via code. The mechanism Knockout uses is observables, and you simply declare them in your view model. Mine looked like this:

The initial state of the app would always be to show everything in the bookmarks toolbar followed by everything in the bookmarks menu, which matches how Firefox Home shows things. I set up two observable arrays holding each of those sets. The trickiest part was how to go about updating that data when the user wanted to navigate into a directory. The rule in Knockout is you only apply the bindings once, then let the framework update the UI for you when things change. And since references to the two observable arrays will be maintained by the framework, I would need to replace their contents rather than assign completely new arrays.

Several failed attempts ensued. I tried using the removeAll() method that is available on observable arrays, then the push() method which is also available on observable arrays but is slightly different than the native JavaScript one (it turns out to only take single elements rather than an array of elements). I finally found the best way to do it via a blog post from Ryan Niemeyer, who totally has the title of Knockout expert locked up.

So the setBookmarks() function in my view model allows me to update the bound data at any time. I wrote the following function to handle the navigation when the user selected a directory rather than an actual bookmark:

The bookmark data itself was an object that contained a list of directories and bookmarks. Each directory had a list of subdirectories and bookmarks, while bookmarks had just a name and URL. The list was stored as an array on the client, so it was just a matter of finding the right one to use in my Knockout view model. The idea in doNavigation() was to take the path to the node the user just pressed and get the bookmark items assigned to it, or if Back was pressed get the bookmark items for its parent.

Each time the user selected a bookmark a new page would be opened, and if they selected a directory I needed to bind to the proper array in my main data object. I wrote the following function to search that object to find the exact items to display:

Putting it all together gave me a reasonable imitation of the navigation in Firefox Home. The speed of the navigation wasn’t too bad, though I have an idea of how I might improve it (Update: the ‘idea’ was a CSS rule to reduce the animation duration. It didn’t work, but I suspect it might be because my rule is incomplete). I’d like to get as close to native app response time as possible. The full source is posted at GitHub.

I feel I have a fairly good grasp on jQuery Mobile now. It would be interesting to try to incorporate PhoneGap into the project and see how it works.

Coding

This is part 3 in a series of posts about creating a web-based replacement for the Firefox Home iOS app. Part 2 can be found here.

What I wanted to do next was write enough code to save Sync settings and load bookmarks, log out as the current Sync user and wipe out the locally stored bookmarks and credentials in the process, and refresh bookmark data, all without any problems of any kind. Basically everything the user could do on the settings page. I planned to do as much work on the client as possible, since that is where the bookmark data would be stored. When the user saved new credentials I wanted them to be directed to the bookmark page, and if they were simply refreshing they would stay on the settings page but would see an updated count of their bookmarks.

The biggest issue was doing the form submissions and getting the UI to behave accordingly, including when an error occurred on the server. What was tricky was the fact that to get bookmark data from the Sync servers I made an Ajax call to a server-side function, and JQM relies mainly on Ajax calls to do its thing. That coupled with the fact that my Ajax call was non-blocking made the UI flow have a bunch of niggling problems. Mostly it wouldn’t show the right things at the right time.

The best way I found to make it all work correctly was to disable the JQM Ajax handling of the button clicks. I added data-ajax=”false” to the form element, then canceled the posting to the server and did everything manually. Essentially I took JQM out of the equation. In keeping with the credo of the framework that you work with pure HTML elements and not server-based ones, I replaced the asp:Button controls with input elements and made the form element a regular client element, like so:

The Save onclick handler looked like this:

It called this common function for getting bookmark data:

I added a handler for the jQuery ajaxCompleted event and used that to handle the post-retrieval stuff, like hiding the input controls or updating the bookmark count.

At this point I tried everything out in Electric Plum to get an idea of how it might look on an actual iPhone. It was fairly good, only a couple of cosmetic issue came up that might not even be issues on a real phone.

Next, listviews and data binding.

Coding

This is part 2 in a series of posts about creating a web-based replacement for the Firefox Home iOS app. Part 1 can be found here.

I set up my bookmark browser web app project and started reading through the excellent jQuery mobile site. I planned to have a home page, a page for settings, an About page, and one to show the actual bookmarks. So I created separate .aspx pages, each set to use a single master page, and added a page template to each one. The master page had a link to a CSS file I created and links to all the jQuery mobile scripts hosted at code.jquery.com. It also had a single JQM header and footer since I didn’t want to have to duplicate markup over several pages. I put in a few text boxes on the settings page and added a button for saving Sync credentials to local storage. I made it so when your credentials were saved, it would hide the input controls via Javascript and show a button for refreshing the data.

When I ran it and tried out the navigation, things were not working as expected. The page state wasn’t being saved when I would browse from the settings page to the home page and back, meaning my hiding and showing of elements was failing. I had put links to each page in the main footer, and they would take you to the respective page, but old content was being shown. I was adjusting styles between each build, and those changes weren’t being reflected properly. In short, it was a mess.

After more reading through the JQM site, I realized I was going to have to change my approach. Probably the most unique thing about JQM is the navigation paradigm. It’s very different from what I was used to. Each time it needs to access content, it will make an AJAX call behind the scenes and insert that content into the DOM. There are ‘transitions’ between pages, but they are not pages in the sense of separate files in your project. They can be, but everything ends up in one big container anyway.

I ended up using multi-page templates, all housed in default.aspx. I ditched my master page and set up separate div elements for each page. I had to duplicate the header and footer markup, which I’m not thrilled about, but it isn’t much and I might find a better solution in the future. I experimented with using true single-page templates, but they just didn’t work how I wanted, whereas in the multi-page scenario everything flowed as I expected. DOM size wasn’t too much of a concern because apart from the page for bookmarks, the other pages have little markup in them. It may be possible to incorporate a master page into the JQM navigation model, but I’d rather press on with the actual functionality.

Next, how to handle transitions to the current page, and others in the DOM.

Coding

This is part 1 in a series of posts about creating a web-based replacement for the Firefox Home iOS app.

I installed the Firefox Home iOS app shortly after I got an iPhone 4S in late 2011. It provided access to my 1500+ bookmarks from my phone, and it has a nice feature where it can be set to use Safari as the browser rather than a UIWebView. However, that version, and still the current one as of this writing, has some sort of bug which is horribly annoying.

Occasionally I would add a new bookmark from my desktop, Firefox Home would refresh its data, and then its ordering of bookmarks would get messed up. It was most prevalent in the Bookmark Toolbar directory, in which I have subdirectories and individual bookmarks. I have all of the subdirs positioned at the far left end of the toolbar in Firefox itself, and they are shown at the top of the main UI in Firefox Home. But when this problem occurred, they would get shuffled around in the UI with no apparent rhyme or reason. It would even happen if I didn’t explicitly add something to the toolbar directory. I haven’t been able to figure out the exact circumstances that cause it, but it has happened enough that I decided to create a replacement, as a personal project.

Unfortunately I don’t own a Mac or know Objective-C, so I decided to create a mobile web app using ASP.NET, C# and jQuery Mobile, and to document the process. My first goal was to successfully get data out of my own Sync account. Sadly, the Sync API is not as well documented as it could be. What documentation does exists is fairly spread out, and there aren’t any canonical examples of how to write clients for it. Plus it has a complex security design; a specific series of decryption steps are needed to read data from a Sync account.

Through some Google searching I stumbled upon a sample program a guy had written in Python that did all the proper encryption stuff and was able to retrieve bookmarks. I managed to duplicate the process in C# after some trial and error, to the point where I could see decrypted data from my own account. It was then that I decided, on a lark really, to search the web to see if anybody had written any .NET wrappers for the Sync API. And wouldn’t you know, Pieter De Rycke had. In fact, he had written a complete Windows Phone version of Firefox Home. So I decided that reinventing the wheel wasn’t necessary, and I used the class in his project that wrapped the essential calls to the Sync API (thanks Pieter).

My goal for the front end of my app was to mimic the Firefox Home UI as much as possible. Initially I figured I would do most of the processing on the server then simply use JQM to make the UI mobile-friendly. But there was more to it than that.

Coding

I have written a number of WinForms applications over the years and while I think they’re pretty great, it’s hard to showcase them to the world at large. It occurred to me that it would be fantastic if there was a way to somehow run one of these programs within a web browser. The research I did lead me to WPF XAML browser applications, which it turns out are a nifty way of doing just that.

My first and so far only attempt was a simple hosting application that had a single page with an iframe. Inside that iframe I loaded the XBAP file that referred to my WinForm app. The only real tricky part was retrofitting the app to be able to mostly do its thing in a restricted environment. But still, I’m fairly impressed that Microsoft makes this possible. It seems I should pay closer attention to WPF and what it can do.

Coding

After reading this post at StackOverflow, I realized that I was probably wrong to think it was OK to directly access the registry keys that Windows uses to keep track of installed services. Though the names and locations of the keys probably won’t change any time soon, it’s always better to use a higher level of abstraction when dealing with Windows internals. In this case, WMI fits the bill very nicely.

I had not written any WMI-related code up til now, simply because I’ve always been able to find other methods to get the information I need. But after reading that post and knowing of a particular program of mine that does access the registry directly to determine the start mode for a service, I decided to re-write that code to use WMI via the System.Management namespace in the .NET framework.

I came across a couple of different C# samples on the web and was able to modify them to fit my needs. Below is a new class I created for service management that will hopefully grow over time.

Coding

My thanks go out to Mitchel Sellers for informing me that DotNetNuke has a bulk install feature. I had a need to modify an existing Windows service so it could silently update some DNN modules. I was able to make it work in this same service a couple years ago by modifying the DNN 4.3 source code to allow the main DotNetNuke.dll library to function outside of a web application (no easy feat, that). From there I could use the PaInstaller class to load a module. But then it wouldn’t work against 4.9.0 portals.

When I tried to do the same thing with the 4.9.0 source, it failed miserably. It just wouldn’t create an instance of SqlDataProvider, no matter how much I coaxed it. The better way was to have my service download the new module files (zips) to the install/module folder under the portal’s root, create an HttpWebRequest to http://mysite/install/install.aspx?mode=installresources, then parse the response to check for success.

The response parsing was easier than I thought it would be. I did the bulk update first using a web browser so I could see what I was dealing with. The HTML itself was nice in that it put non-blank space elements between each module name and result, so I could use Split() to break everything out. I ignored the first two elements of the resultant array since it contained all the unimportant stuff before the list of modules, then simply looped over the array and verified the word Success was in each even-numbered element, like so:

I’m not sure why I had never heard of this feature over the course of developing several custom DNN modules, even though I’ve spent untold hours sifting through the forums at dotnetnuke.com and the Internet at large for detailed information on the portal’s architecture. In any case, that was the one new thing I learned that day.

Coding

A recent project of mine required querying Active Directory for all the groups in which a given user is a member, or if there isn’t a domain then searching the local machine. It also had to return all groups defined in a given domain. In the course of putting the code together, I created a library for future projects that needed to perform such queries. I recently made a major improvement to the code that retrieves a user’s AD groups and thought it would be good to share what I have so far.

It’s based on some bits of code I found on the web. Initially GetADGroupMembership would only return the first-level Active Directory groups the user was in, but that’s no good if the user is in a group that is in another group that is in yet another group that’s the one you really care about. So I added some recursion to bring up the entire group chain. It seems to perform well enough with our domain, which admittedly doesn’t have a great deal of nesting.

Update: this library has grown and improved quite a bit over time, and I recently converted it to C# and posted it on CodePlex.

Coding