• About Us
  • Blog
  • Basket
  • Account
  • Sign In
  •  

Blog

Published on Thursday, July 28, 2011

Using 51Degrees.mobi within Sharepoint

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.

Requirements

The guide assumes Sharepoint has been installed and that you're familiar with both that and ASP.NET.

Guide

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.



Comments (0)

Author: Anonym

Categories: Development

Tags: Framework

Name:
Email:
Subject:
Message:
x

Tags

.NET 4G 51Degrees 5G Acer Adform Adtech Advertising Afilias Alcatel Amazon AMP Analysis Analytics Android Apache API Apple Asian Market ASP.NET Asus Blackberry Browser C C# Centro Chrome Cloud CMS CPU CSS3 Data Data Blog Data File Daydream Design Detection Developers Device Device Data Device Detection Device Intelligence Device Models Device property DeviceAtlas Disney dmexco DotNetNuke Download ebay Ericsson Event Facebook Firefox Foundation Framework Galaxy git repositories Google Google Analytics Google Daydream GPU GSMA Guess HAProxy Hash Trie HTC HTML5 HTTP HTTP Headers Huawei Infinix Ingeniux Internet usage iOS iOS 13 ipad iPadOS iPhone iPhone 11 Java Javascript Kentico LG Liferay LTE m.dot Memory Memory leak Meta Data Microsoft Mobile Mobile Analysis Mobile Analytics Mobile Devices Mobile Marketing Mixer Motorola Mozilla MWC MWC 2017 MWC16 Native Apps NET New Release News Nexus NFC NGINX Nokia OnePlus 5 Opera Operating System Oppo Optimisation OS Patent Performance PHP Press Release Price Band programmatic Publishers Python Redirection Research Responsive Images Responsive web design RESS Review RTB RWD Safari Samsung Scala ScientiaMobile SEO Server Server-side optimisation Seznam.cz Sitecore Smart TV Smartphone Smartwatches Sony Swedish Beers Tablet Tencent Testing Tips Tutorial Umbraco Update User Agent User-Agent Valgrind Varnish Varnish Cache Video Vodafone VoLTE Web Web Apps Web content management Webtrekk White Paper Widgets WiFi Windows WURFL Xiaomi Xperia ZTE