jQuery Mobile Displaying A Dialog

While working on a mobile web app that is using jQuery Mobile I wanted to display a dialog without making an Ajax call to the server to load it which is the "out of the box" way to do it.

Initially I couldn't figure out how to do this but after some reading and thinking it's ridiculously easy.

You have to use a multi-page template which means you have more then one jQuery Mobile "page" container. Example:

<div data-role="page" data-theme="a">
    <div data-role="header" class="header">
        <a href="#menu" data-icon="grid" data-theme="b" data-iconpos="notext" data-transition="pop">&nbsp;</a>
        <h1>My Web App</h1>
        
    </div>

    <div id="map" data-role="content" data-theme="d">
        <p>This is my main content</p>
    </div>
    
    <div data-role="footer">
        <div>
        by <a href="http://cdeutsch.com" rel="external">CDeutsch</a>
        </div>
    </div>
</div>

<!--start menu-->
<div id="menu" data-role="dialog" data-theme="a" data-url="menu">
    <div data-role="header" class="header">
        <h1>Main Menu</h1>
    </div>
    <div data-role="content" data-theme="d">
        <ul data-role="listview" data-theme="c">
            <li><a href="http://blog.cdeutsch.com" rel="external">My Blog</a></li>
            <li><a href="http://twitter.com/cdeutsch" rel="external">Twitter</a></li>
        </ul>
    </div>
</div>

I'm using a button on the left side of the header to trigger showing the dialog. Just set the href to the id of the dialog (in this case menu) and you're all set. No more repeatedly hitting the server for a frequently used resource.

See this jsfiddle for a working example.

Entity Framework Code First Error: Could not create constraint

While using Entity Framework Code First you will run into an error similar to the one below if you create objects that have a circular reference.

Introducing FOREIGN KEY constraint 'File_Folder' on table 'Filess' may cause cycles or multiple cascade paths. Specify ON DELETE NO ACTION or ON UPDATE NO ACTION, or modify other FOREIGN KEY constraints.
Could not create constraint. See previous errors.


The fix is pretty simple but not very intuitive.

Add the following line to your OnModelCreating override of your DbContext:

modelBuilder.Entity<File>().HasRequired(oo => oo.Folder).WithMany(oo => oo.Files).WillCascadeOnDelete(false);

So it looks something like this:

public class FilesystemDB : DbContext
{
 public DbSet<File> Files { get; set; }
 public DbSet<Folder> Folders { get; set; }
 
 protected override void OnModelCreating(DbModelBuilder modelBuilder)
 {
  modelBuilder.Entity<File>().HasRequired(oo => oo.Folder).WithMany(oo => oo.Files).WillCascadeOnDelete(false);
 }

}

For the best information on Entity Framework Code First read Morteza Manavi's blog.

Remove Duplicates From Rdio Playlists

This has driven me nuts ever since I started using Rdio (sign up using this link to support me). I like to listen to other peoples playlists to find new music and if I hear something I like I add the track to my "favorites" playlist. Unfortunately Rdio lets you add the same song multiple times to the same playlist and there isn't an easy way to find and remove duplicates so I end up with Ice Cube's Check Yo Self in my favorites 5 times.

Here's my solution.
1) Install this bookmarklet by dragging it to your bookmarks or right clicking and selecting "add to bookmarks"
2) Browse to the playlist you want to cleanup in Rdio
3) Run the bookmarklet.

If you're interested in other Rdio hacks be sure to checkout my Rdio remote control PartyQ

OSX Crashes More Then Windows

There! I said it!

For the record, all my computer hardware, phones, and tablets have been Apple for years; but I primarily do programming in .NET which means I still need to use Windows.

I'm on my 3rd Macbook Pro since Sept of 2007 and over that time OSX has consistently crashed more then Windows XP and Windows 7. Up until April of this year, I was primarily booting directly into Windows using Bootcamp and only using OSX 5% of the time and even with 5% use it had more complete lock ups!

Since April I've started running OSX 100% of the time and run Windows 7 off the Bootcamp partition using Parallels.

Since making the switch to 100% of the time I'd estimate OSX does a Black Screen of Death on average 3-4 times per month. I had one waiting for me this morning after leaving the computer on over night.

People think I'm making this up, so I plan to start tweeting every time it crashes for a historical record.

Granted I have a ton of software loaded on OSX, I'm running Parallels, and I use a Diamond BVU195 USB Display Adapter for a second monitor, BUT other then Parallels these are all things I did on Windows as well so I feel it's a fair comparison.

I've had Windows get slow, or weird, or need a reboot. But I can't remember the last Blue Screen of Death I've had, I can usually kill enough process where I can shut down the OS gracefully. I can't say the same for OSX.

I don't plan on switching away from my current setup and I'll be installing Lion soon. I just want people to STFU about how stable OSX is versus Windows, because it's simply not true.

Crash Log

• 7/30/2011
• 8/17/2011 (Milestone: first crash of OSX Lion)
• 9/8/2011
• 9/19/2011
• 9/25/2011
• 9/30/2011
• 10/14/2011
• 11/3/2011
• 5/25/2012
• 6/22/2012
• 8/3/2012 (Milestone: first crash of OSX Mountain Lion)
• 8/9/2012
• 8/16/2012
• 8/17/2012
• 8/17/2012 (second time in one day, grrr)
• 8/20/2012
• 8/22/2012
• 10/14/2012
• 10/17/2012

ASP.NET MVC3 App Using plupload to Upload Directly to Amazon S3

UPDATE 8/15/2011:
I can't recommend using this for large files (video files). It's very unreliable. Web size image files and normal email attachment sized files would probably do fine. What I ended up doing to get around it was creating a web app on AppHarbor (which runs on EC2) that I upload the files to and it saves them to S3. Since the AppHarbor app is on a different domain you are still limited to Flash and Silverlight support but you do gain file chunking which brings back some reliability. Alternatively to AppHarbor you could setup your own server on Amazon as well.

I created a working example of using plupload to upload files directly to Amazon S3 and threw it on github, since the .NET examples I found on the web we're incomplete or broken.
https://github.com/crdeutsch/MVC3PluploadToAmazonS3

The files that are being uploaded do not even touch your web server. They are posted directly to Amazon. At the moment plupload only supports the Flash and Silverlight plugins as far as I can tell.

The AmazonS3Helper.cs library originated from Cary Abramoff off of this plupload forum thread.

I've made some changed based on iwasrobbed's excellent Ruby on Rails example.

Usage

Upload the crossdomain.xml found in the root of the site to your Amazon S3 Bucket.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" secure="false" />
</cross-domain-policy>

Modify the settings in HomeController.cs to use your Amazan credentials and set your S3 bucket.

public ActionResult Index()
{
 string acl = "private";
 string bucket = "YOUR S3 BUCKET NAME";
 string accessKeyId = "YOUR AMAZON ACCESS KEY ID";
 string secret = "YOUR AMAZON SECRET ACCESS KEY";
 string policy = AmazonS3Helper.ConstructPolicy(bucket, DateTime.UtcNow.Add(new TimeSpan(0, 10, 0, 0)), acl, accessKeyId);
 string signature = AmazonS3Helper.CreateSignature(policy, secret);

 var model = new PluploadAmazonS3Model()
 {
  AWSAccessKeyId = accessKeyId,
  Policy = policy,
  Signature = signature,
  Bucket = bucket,
  Acl = acl
 };

 return View(model);
}

On the View side you could just use Razor to dump the Model variables directly into your javascript, but I decided to use hidden form variables instead in case you want to move the javascript to its own file where embedding Razor syntax won't work.

Hope this saves somebody else some time!

ASP.NET & IIS7 Error: Could not load file or assembly 'System.Data.SQLite'

This was annoying. I setup an ASP.NET MVC3 web application on a fresh install of Windows 2008 R2 and got the following error:

Could not load file or assembly 'System.Data.SQLite' or one of its dependencies. An attempt was made to load a program with an incorrect format.

I wasn't even using SQLite in my project; at least that's what I thought. Turns out ELMAH was trying to load it.

The error is due to trying to load the 32bit SQLite.dll on a 64 bit server.

To fix the error set Enable 32-Bit Applications to True for your Application Pool under Advanced Settings.

Introducing Nodeler

After over a month of work I'm ready to subject my latest work, Nodeler, to the criticisms of the first 50 people who sign up using the Invite Code MakeRocketGoNow. ;)

Here's a video introduction to Nodeler. Otherwise read on...



What is it?
At it's heart I kind of think of it as a higher level, zero configuration service (Apple calls theirs Bonjour).

What good does that do me?
If you're a developer, it will allow you to register your application or game as a "node" that can request to be paired with other "nodes". A node can be anything from a game node requesting to be paired with a controller node to a video web site node requesting a remote control node.

You're not a developer?
Today, there are three Chrome extensions plus a Pacman game you can try.

1. Nodeler Keyboard: allows you to accept keyboard input on any web page from a remote device.
2. Nodeler Rdio Remote: allows you to remotely control the Rdio player. Play, pause, mute, and skip forward and back are currently supported.
3. Nodeler Amazon Video Remote: allows you to remotely control the Amazon Video On Demand player. Play, pause, skip forward and back are currently supported.
4. Pacman: I've modified Dale Harvey's excellent HTML5 Pacman app to be controllable via a Nodetroller (what I like to call the applications used to provide input to the above Chrome extensions).

You are a developer?
Send me an email if you're interested in using the Nodeler API. Once your Nodes are registered and authenticated via OAuth there are currently just two API calls. Node A submits a PairRequest and then Node B calls GetPairRequests.  The protocol used to communicate between nodes is up to you. If you need a central communication server I hope to offer the Nodeler Central's Node.js server in the near future. This is what the current nodes use. I'm still working out how I want to charge for usage of the Nodeler Central communication server but I do plan to have a free plan.

You're still reading and want to know what technologies this was built with?
Just C# and Javascript. ;)

The Nodeler web site and API are hosted at AppHarbor and were built with:

• ASP.NET MVC3
• Entity Framework Code First
• MVC3 Boilerplate
• DotNetOpenAuth

The server the Nodes communicate through is built using:

• Node.js
• Socket.IO

The Chrome Extensions use:

• jQuery
• Socket.IO

The iPhone app that I'm just finishing up was built using:

• MonoTouch
• MonoTouch.Dialog
• RestSharp

How can I find out more?
Follow me or Nodeler on Twitter for updates.

Would love to hear feedback on how I can improve the product!