Developing Gadgets for EpiServer MobileCenter iOS

Gadgets on the iOS device are shown in HTML using a UIWebView similar to Safari. Note the following when creating a specific gadget for a iOS device:
  • The Safari browser on the device cannot show Silverlight or Flash
  • The screen is limited to a width of 320 pixels and a height of 436 pixels
  • There is no feature for hovering over an object to reveal a tooltip, double-clicking and right-clicking. Testing can either be done on an actual iPhone 3G, 3GS, 4, Simulator in Mac OS, Safari or Android simulators.
Gadgets are developed using the MVC pattern in the same way as for EPiServer OnlineCenter, and are often made to exist in OnlineCenter and on the device. The simplest way to accomplish this is to have your gadget return one single view with styles based on percentage. If there are significant differences between what is shown in OnlineCenter and on the device, you can simply check if the request is coming from the iPhone/iPad and then show a different view. The simplest way is to check the user agent of the browser requesting the information.

HTTP_USER_AGENT=Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) 
AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

if(Request.UserAgent.IndexOf("iPhone") > 0) 

Normally a Gadget Controller Class will look as follows:

    public class iPhoneChangedPagesController : Controller

It is a normal gadget with the Gadget attribute on the top. When you develop for iOS, you can provide more information about your gadget. As a developer you can add either a list or a WebView. By providing a list you can give more native information to the iPhone improving the experience. In order to make your gadget specific for the iPhone, have your Controller inherit from iPhoneJsonBase.

   public class iPhoneChangedPagesController : iPhoneJsonBase    { 

This will add the option of overriding three different functions:

public abstract class iPhoneJsonBase : Controller
     protected iPhoneJsonBase();

     public abstract List<CellView> GetListView();
     public abstract WebView GetWebView();
     public abstract bool ShouldReturnList; 

GetListView will return a list of different NativeCell. CellView will also have another list of cells if you want nested list view or a WebViewToPush:

public string Name { get; set; }
        public List<CellView> ChildCells { get; set; }
        public WebView WebViewToPush { get; set; } 

A WebView consists of a name and if it will use a custom URL or a default URL.

      public string Name { get; set; }
        public string CustomUrl { get; set; }
        public bool UseDefaultUrl { get; set; } 

The difference between CustomUrl and DefaultUrl is that default will give a direct link to the gadget just as you would on a normal gadget. CustomUrl is if your view is not connected to a gadget and therefore does not have a URL routing set up.

routes.MapRoute("GetRecently", "recently/{pageid}", new
  { controller = "iPhoneChangedPages", action = "Index", pageid = (string)null }); 

If your view is not a gadget and you want to use some of the dashboard functionality, there is a MasterPage with the scripts and styles added.


  • In this version one app can upload pictures to EPiServer OnlineCenter.
  • Not all functionality in the dashboard is available on the device. Due to performance issues the scripts related to the dashboard have been downloaded and stripped of functionality not needed when showing a single gadget.

Last edited Oct 1, 2010 at 10:08 AM by Heal686, version 1


No comments yet.