One of the things I have always wanted to do was write the Mobile LOB Accelerator as multi-device application. One of the things that has held me back is the lack of ADO.NET in Silverlight. Yes I know I can use a lot of database implementations for Silverlight. The problem is that I have yet to find a way to spoof in ADO.NET. I would like a class library that device specific UI then consumes. Ah but how about a web site with device specific UI. This is very doable.
The database is the easy part. What you want is a Wireless Universal Resource File (WURFL). And it turns out you can get that from a SourceForge project by the same name. Here is the catcha. The project is very Java and PHP focused. So what is a .NET developer suppose to do? In comes 51Degrees.mobi with a Codeplex project that uses the WURFL database and implements it ASP.NET style.
But wait there is more. "The latest version of WebMatrix actually includes a Nuget package for 51degrees.mobi for WebMatrix. How sweet is that! So fire up WebMatrix and lets get started.
- Launch WebMatrix
- From the WebMatrix Welcome Screen select "Site from Template".
- Select "Empty Site" and name it. I named my site RazorDevice.
- Add a new file called Default.cshtml. GIve the page a title like "Detect Device" and put "Hi Desktop" in the body.
- Now run the site. Note this is important. You actually cannot get to the administration site without running the site with an actual return before calling, http://localhost:portid/_Admin.
- Once you run the web page go to the Administration site. After creating the password you need to go find the password file and rename it. The password file is under App_Data/Admin and currently called _Password.config. Rename the file by removing the underscore (_).
- Now reload the administration site and login. You should see a list of packages to install. If not make sure you have Show set to Online. The first one should be "51Degrees.mobi-WebMatrix - Beta 1.0.1.6". Install that package.
- Refresh the file set and you should see more directories
- Move 51Degrees.mobi.config to the root.
- Rename 51Degrees.mobi.config to web.config.
<html lang="en"> <head> <meta charset="utf-8" /> <title>Detect Device</title> </head> <body> Hi Desktop </body> </html>
The site is now ready to route requests from browsers based on browser characteristics. As a requests come in a new HTTP Handler looks at the web.config and reroutes the request. The routing information is held under the redirect node in web.config. To test you will need to fire up an emulator. If you do not have one you might try the Opera Mobile Emulator. You can download it on to the desktop. Just look for Opera Mobile Emulator.
Running the site from Opera yielded a different page that what I had created. The Nuget package added a device test page. And the web.config routes all mobile devices in the current device database to the test page.
Now here is where it gets complicated. In order to get this to work with other emulators I had to jump through some hoops. The first is getting IISExpress to accept remote connections.
- Setup HTTP.Sys to allow remote connections. This is accomlished by adding to the URL access list. From an elevated command prompt
netsh http add urlacl url=http://hostname:port/ user=everyone - Next restart WebMatrix. This time start WebMatrix as administrator. This is important as only an administrator can change the hostname setting.
- Bring up the setting tab. Replace localhost with the fully qualified DNS name of your computer.
Test that it works by clicking run. If your local browser works then Android and Windows Phone 7 emulators will work.
Now for the bad news. To test emulators and devices you will have to always run WebMatrix with elevated privileges. Hopefully this will be fixed in future versions of WebMatrix.
The next step is building the screens. Stay tuned.
Comments