Whether it is a native application, a mobile-optimized Web site, or a hybrid solution, mobile development is taking place at a breathtaking speed. Native applications were the natural choice for many application developers in the past. They still have their place, but increasingly, the number of different device types, operating systems, and screen sizes makes developing optimized mobile Web apps more and more attractive. The fast adaptation of HTML5 in addition to JavaScript libraries like jQuery and with the graphical power of CSS3, is now shaping up to bridge the gap between the Web and the smartphone.
MonoX users were frequently asking about the best approach for delivering content and services to their audiences over the mobile devices. We are happy to announce that starting from the version 4.5 (to be released on September 9th), MonoX allows users to create Web sites optimized for such devices. You can easily create content once and re-use it for both main site and for the mobile version.
Home page of the mobile section of MonoX. It can be found in the default instalation package at /MonoX/Mobile/Default.aspx.
MonoX Mobile is built on top of the powerful
jQuery Mobile framework, which owes much of its functionality to the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. It is easy to use the existing MonoX infrastructure and web parts to develop modern applications targeted at mobile devices. All MonoX parts support templating of user interface elements, which allows users to ripe the benefits of jQuery mobile features. You do not need to learn the new programming languages or frameworks - our mobile approach relies on a standard HTML5 syntax.
Since MonoX allows developers to easily inherit from the existing parts and override the functionality they need, it requires a minimal effort to develop the mobile versions of MonoX Web parts.
All mobile pages in your application should inherit from the MonoSoftware.MonoX.BaseMobilePage, as it sets up the neccessary infrastructure (CSS and javascript references and jQuery mobile configuration code). After that, you can use any of the existing mobile Web parts, modify the existing "desktop" parts, or start building your own modules from scratch. The first two scenarios are more common, and they allow you to have a practically identical code base for both desktop and mobile versions of your parts. Let's take a look at one of the simple Web part to see how it works. The "Comments" Web part consists of a simple paged list view that needs a few adjustments in both front end (ascx) and back end (ascx.cs) to be 100% compatible with jQuery syntax and GUI design practice for mobile devices.
- MonoX styled button needs to be set to the native mode (EnableNativeButtonMode=true), as it is styled incorrectly by jQuery mobile when in the default mode (due to the fact that at this time jQuery Mobile does not work correctly with several HTML elements having display CSS attribute set to none)
- pager is switched from the default mode (numbered links which are difficult to use on mobile devices due to their size) to the Facebook-style ("read more") mode - more details on this can be found in the article "How to: Create a custom pager template"
- various jQuery mobile attributes (data-role, data-inline) are added to action links ("Delete"), to allow them to be rendered as large buttons which are displayed in line with other elements.
Here is the code for a finished mobile version of our Comments part:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Comments.ascx.cs" Inherits="MonoSoftware.MonoX.ModuleGallery.Mobile.Comments" %>
<%@ Register Namespace="MonoSoftware.Web.Pager" Assembly="MonoSoftware.Web.Pager" TagPrefix="mono" %>
<%@ Register TagPrefix="MonoX" TagName="LightBox" Src="/MonoX/controls/LightBox.ascx" %>
<%@ Register TagPrefix="MonoX" TagName="StyledButton" Src="/MonoX/controls/StyledButton.ascx" %>
<asp:ScriptManagerProxy ID="scriptManagerProxy" runat="server"></asp:ScriptManagerProxy>
<asp:Panel ID="pnlContainer" runat="server">
<asp:Panel runat="server" ID="pnlCommentBox" CssClass="jq_wallCommentBox">
<asp:TextBox runat="server" ID="txtInput" CssClass="jq_expandingTextBoxSmall" TextMode="MultiLine" ></asp:TextBox>
<MonoX:StyledButton ID="btnSave" runat="server" CssClass="CommentButton" OnClick="btnSave_Click" EnableNativeButtonMode="true" />
</asp:Panel>
<asp:ListView ID="lvItems" runat="server">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
</LayoutTemplate>
<ItemTemplate></ItemTemplate>
</asp:ListView>
<mono:Pager runat="server" ID="pager" PageSize="10" NumericButtonCount="5" AllowCustomPaging="true" AutoPaging="false">
<PagerTemplate></PagerTemplate>
</mono:Pager>
</asp:Panel>
using System;
using System.Collections;
using System.Web.UI.WebControls;
namespace MonoSoftware.MonoX.ModuleGallery.Mobile
{
[WebPartCatalogCategory("Mobile")]
public partial class Comments : MonoSoftware.MonoX.ModuleGallery.SocialNetworking.Comments
{
public Comments()
: base()
{
Title = "Comments - mobile version";
this.CatalogIconImageUrl = Paths.App_Themes.All.Common.img.parts.SocialNetworking.comments_png;
}
protected override void ExecutePagerTemplateInit(MonoSoftware.Web.Pager.Pager pager, string pagerQueryString, string pagerQueryStringSuffix, string pagerTemplateName)
{
base.ExecutePagerTemplateInit(pager, pagerQueryString, pagerQueryStringSuffix, "DynamicPager");
}
protected override System.Collections.Hashtable ParseTemplateTags(MonoSoftware.MonoX.Repositories.SnCommentDTO comment)
{
Hashtable tags = base.ParseTemplateTags(comment);
if (tags.Contains("<# Delete #>") && tags["<# Delete #>"] is LinkButton)
{
LinkButton lnkDelete = tags["<# Delete #>"] as LinkButton;
lnkDelete.Attributes.Add("data-role", "button");
lnkDelete.Attributes.Add("data-inline", "true");
}
return tags;
}
}
}
As you can see, MonoX templating allows you to easily change the code rendered by the standard Web parts. Alternatively, for simple, nonrepeatable scenarios, you could put all of the changes directly in the template and/or front end ascx part file. Our demo site includes everything you need to build a social networking site targeted at mobile devices: a complete membership infrastructure (login, user profile, registration, password reminder,...), mobile-enabled HTML editor, wall, friend and invitation lists, blogs, etc.
Device support
MonoX relies on jQuery mobile to support all "A grade" browsers on mobile devices. At this stage, jQuery Mobile works on the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are also supported because of their progressive enhancement approach.
The visual fidelity of the experience is highly dependent on CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that’s the nature of the web. jQuery mobile will be adding additional vendor-prefixed CSS rules to bring transitions, gradients and other visual improvements to non-WebKit browsers in future releases.