Project Description

This project wraps around WURFL, a mobile detection database and API, to provide some additional features to the framework, such as in-built controls/helpers for showing and hiding content, mobile simulation (simple for now, but in the future will include device detection), and direct access to the device/mobile request through the HTTP context (via extension methods).

NOTE: This framework does not modify the existing WURFL database or API. It only creates a wrapper component around the API and will return the WURFL device.

This project supports by ASP.NET web forms and ASP.NET MVC 3.

Getting Started

  • To get started, download the latest WURFL database from http://wurfl.sourceforge.net/. Save the files in the project to the App_Data folder. Or, grab the files from the demo project, which may be outdated.
  • Incorporate the WURFL DLL's into your project, as well as the following DLL's:

- Nucleo.MobileDetection
- Nucleo.MobileDetection.Web.Core
- Nucleo.MobileDetection.Mvc or Nucleo.MobileDetection.WebForms

The framework is fully customizable, similar to the approach that ASP.NET MVC takes. We'll get into those customizations later.
  • We need to setup the core components for creating the WURFL manager, and a data store for retaining it (optional). A third reference exists to attach a simulator, in scenarios where you want the framework to simulate a mobile device. More on this later.

// Defined in Nucleo.Wurfl
WurflDeviceManager.Creator = new HttpContextWurflCreator();
WurflDeviceManager.Store = new HttpContextWurflStore();
  • To use the framework can be done in many ways. To determine if the request is a mobile request by WURFL, and not ASP.NET, use the following method:

HttpContext.Request.IsMobileDeviceRequest()

To get the device itself, use the following method:

HttpContext.GetDevice();

These extension methods work for both HttpContext and HttpContextBase (same for the request). Once you have the request, you can work with it however you like. For instance, to print out its entire capability, use the following:

<p>
User Agent: @device.UserAgent
</p>
<p>
@{ var caps = device.GetCapabilities(); }

@foreach (var cap in caps)
{
<div>@cap.Key = @cap.Value</div>
}
</p>

Additionally, to render a specific view when in a mobile device or a desktop browser, you can use the following methods:

@Html.MobileView(@<div style="border:1px solid black;">
<h1>This is a Mobile View</h1>

<p>
A mobile view was determined by the browser, and displayed here.
</p>
</div>
)

@Html.DesktopView(@<div style="border:1px solid black;">
<h1>This is a view for a desktop browser.</h1>

<p>
A desktop view was determined by the browser, and displayed here.
</p>
</div>
)

These methods vary slightly from the web forms counterparts. In web forms, we have two panel controls that appear when the appropriate setting is established:

<n:MobilePanel ID="mp" runat="server">
<div style="border:1px solid black;">
<h1>This is a Mobile View</h1>

<p>
A mobile view was determined by the browser, and displayed here.
</p>
</div>
</n:MobilePanel>

<n:DesktopPanel ID="dp" runat="server">
<div style="border:1px solid black;">
<h1>This is a view for a desktop browser.</h1>

<p>
A desktop view was determined by the browser, and displayed here.
</p>
</div>
</n:DesktopPanel>

Last edited Jun 11, 2012 at 12:47 AM by bmains, version 5