Introduction
The 51Degrees.mobi Framework is a comprehensive set of ASP.NET components designed to detect mobile devices, provide your web pages in a format that will work on them all, and improve performance compared to standard ASP.NET and Sharepoint. Our controls plug straight into Visual Studio, but that doesn't mean other development environments should miss out on the ever growing mobile audience. Here are the steps that will enable 51Degrees.mobi controls to work on the Sharepoint platform. This guide uses the native Sharepoint 2010 manager, but other versions of Sharepoint should be similar.
The guide assumes Sharepoint has been installed and that you're familiar with both that and ASP.NET.
Step 1
The first step is putting the Framework files and their dependencies in the right place. When using the Visual Studio to build a mobile web template this is done for you but in Sharepoint it has to be done manually. Create a mobile web project in Visual Studio using .NET 2 (to create the source files) and navigate to the web project directory and the Sharepoint site directory. My installation the directory was C:\inetpub\wwwroot\wss\VirtualDirectories\80. The App_Data, App_Themes, Images and bin folders all need to need to be copied from the project directory to the Sharepoint directory.
The Framework also needs a licence file. If you are using the trial it can be found in the 51Degrees.mobi installation, typically at C:\Program Files (x86)\51Degrees.mobi\.Net Mobile Framework\Framework.lic. If you are not using a trial licence the licence key needs to put in a plain text file and named ‘framework.lic'. Either way, that file needs to be copied into the Sharepoint bin folder.
The Sharepoint web.config then needs extra configuration to cope with the Framework. Add these sections in the relevant places. The directories should already exist.
<System.webserver>/<modules>
<modules runAllManagedModulesForAllRequests="true">
<add name="51degrees.mobi Device Detector" type="FiftyOne.Foundation.Mobile.Detection.DetectorModule, FiftyOne.Foundation" />
<system.webserver>/<handler>
<add name="Includes" verb="GET" path="I.axd" type="FiftyOne.Framework.Mobile.Includes.IncludesHandler, FiftyOne.Framework" />
<add name="Image" verb="GET" path="P.axd" type="FiftyOne.Framework.Image.ImageHandler, FiftyOne.Framework" />
<system.web>/<pages>/<controls>
<add tagPrefix="mob" namespace="FiftyOne.Framework.Mobile.Controls" assembly="FiftyOne.Framework" />
<system.web>
<trust level="Full" originUrl="" />
<Sharepoint>/<SafeControls>
<SafeControl Assembly="FiftyOne.Framework" Namespace="FiftyOne.Framework.Mobile.Controls" TypeName="*" Safe="True" />
The last configuration line doesn't feature in other 51Degrees.mobi implementations. This tells the Sharepoint server that our controls are not malicious and are safe to be used.
Now that those changes are in place try to load your site. If it works the web.config is still valid. If it fails the web.config is probably malformed. Check it for duplicate sections and invalid syntax.
Step 2
Presuming there were no problems it is now time to add parts to pages. The first barrier with using our controls in Sharepoint is that they don't appear in the Web Parts menu. They instead need to be placed without any designer tools. The first step will be exposing a page's source code. Create a Sharepoint site (or load an old one, but this guide uses a completely new blog site) open a page to edit then edit with Sharepoint designer by selecting ‘Site Actions' in top left hand corner and choosing ‘Edit in Sharepoint Designer'. While creating this guide I had a completely new Sharepoint installation so I was prompted to download and install the designer separately.
With this utility you can change page's markup. This can be used to add ASP.NET components, or in our case, Mobile Toolkit components:
Before adding components mob prefix (as opposed to the asp prefix) needs to be tied to the assembly. Add the following line to the top of the page:
<% @ Register TagPrefix="mob" Assembly="FiftyOne.Framework" Namespace="FiftyOne.Framework.Mobile.Controls"%>
Finally, the xmlns:mob="FiftyOne.Framework" attribute has to be added to ‘xsl:stylesheet'. So that part of code will look like:
<Xsl>
And that page should now be able to display 51Degrees.mobi controls. They can either be setup using the code or by using the ASP.NET designer in the insert ribbon to drag and drop the controls where needed then changing the prefix later (from asp to mob).
The 51D control will not show in the design window, but will be rendered in the browser.
Design view:
From IE8:
And there it is! Mobile controls in Sharepoint. Of course to properly utilise the rich features of both 51Degrees.mobi and Sharepoint it may be necessary to create different templates. For instance, the screenshot above has four distinct panes (top pane, left pane, right pane and content pane), but many phone won't have enough screen space to properly show this.
Greater integration is in the pipeline so watch this space for more on 51Degrees.mobi in Sharepoint. Now that that is working, you'll want to see here for more on controls and how to use them.