Achieving Broad Reach with Responsive Design + PhoneGap

The committee for The M3 Mobile Conference was kind enough to allow me to speak about creating cross-platform mobile applications using PhoneGap last week, so I thought I'd share some points from the talk here.

When you need to create an application with a specific look and feel across multiple platforms and devices, PhoneGap can be the perfect tool. But before you just wrap your application up and ship it, you'll want to use Responsive Design techniques to ensure all users get an appropriate experience regardless of their device. For instance, you don't want the 320 x 480 version of your app appearing scrunched to that size in the middle of an iPad, or even worse, in the upper left corner. Conversely, you don't want your beautiful iPad app scrolling horizontally and vertically on every smaller device. So you'll want to use Responsive Design to tailor your HTML5 application to as many devices as possible, and then use PhoneGap to progressively enhance the experience when viewed natively on mobile devices as well.

Flexible grids and media queries are important part of implementing Responsive Design in your website/application. Once the application is looking and functioning the way we want it on our desired device(s), we can use PhoneGap to access additional functionality if we are being viewed on a mobile device, and PhoneGap Build to automatically generate the native binaries for many smartphone devices using our single HTML5 codebase.

We're going to target Android and iPhone devices, including tablets, as well as most current web browsers, and the Chrome Web Store for our HTML application.

Our sample app (links to all versions below) is going to call the Google Geocode API as well as the Heavens Above API to display viewing information for the next pass of the International Space Station based on the desired position. For progressive enhancement, our app will allow mobile device users to merely use their device coordinates, and allow HTML5-enabled users to have access to their history of locations using HTML5 LocalStorage.

PhoneGap Build then compiles the latest version of the application checked into the Git repository, but most intrepid web developers can access all the necessary source code using any web browser.

The Sample Application:
(All versions compiled using identical codebase)

Android Market version

Chrome Web Store version

iPhone/iPad/iPod version

(Add to home screen to install)

Android native .apk

Sybian version

WebOS version

Web version
(all browsers and devices)

Issues, feedback, suggestions most welcome - especially on the Sybian and WebOS versions.

Installing Windows 8 Developer Preview on VirtualBox (and resolving error 0x8007045D)

I was disappointed to find out that you can't run the developer preview of Windows 8 using Microsoft Virtual PC. But after reading several success stories about installing Windows 8 on Oracle's VirtualBox VM I decided to give it a try using this walk-through. During my first attempts I was greeted with this cryptic error message each time:

"Windows cannot install the required files. Make sure all of the files required for installation are available, and restart the installation. Error code: 0x8007045D".

This error would appear during the second step in the Windows 8 installation process, right after "Expanding Windows Files..." hit about 80%. After researching VirtualBox settings, I found that the first English comment on the bottom of this post resolved my issue. (So it's worked for at least two people now).

Basically, the fix is to make sure to check "Use host I/O cache" under Admin...Storage...(highlight SATA Controller):

Once I changed this setting Windows 8 installed just fine, and the "Expanding Windows Files..." step of the installation took about 1 minute, compared to 15-20 minutes during the failed installations.

Sitefinity 4 News Items Not Displaying Author Name

We just got through a minor issue involving NewsItems in a Sitefinity 4.1 implementation. The problem is that even though the administrators were specifying an author when creating NewsItems, THEIR NAME was being displayed instead of the author no matter what.

The solution is actually pretty straightforward - The layouttemplate for news items doesn't contain a field for author, even though it's entered on the back end. Instead it uses <sf:personprofileview runat="server"> which displays the first name and last name of the user posting the NewsItem. You'll have to go into the LayoutTemplate for single NewsItems (Design..WidgetTemplates...FullNewsItem in Sitefinity admin) and replace the personprofileview tag with the author name:

Default layouttemplate code:
<div class="sfnewsAuthorAndDate">
<asp:literal runat="server" text="<%$ Resources:Labels, By %>">
<sf:personprofileview runat="server">|<sf:fieldlistview format="{PublicationDate.ToLocal():MMM dd, yyyy}" id="PublicationDate" runat="server">
</sf:fieldlistview>
</div>

Revised:
<div class="sfnewsAuthorAndDate">
<asp:literal runat="server" text="<%$ Resources:Labels, By %>">
<asp:Literal runat="server" Text='<%# Eval("Author")%>' /> | <sf:fieldlistview format="{PublicationDate.ToLocal():MMM dd, yyyy}" id="PublicationDate" runat="server">
</sf:fieldlistview>
</div>

ASP.Net Duplicate Section Defined Error - Is Only Defined Once

I had just set up a new local development environment for a solution already up and running in a staging environment.

The first time I tried to run the app, I got this error message:

Config Error There is a duplicate 'system.web.extensions/scripting/scriptResourceHandler' section

Here are the exception details:

HTTP Error 500.19 - Internal Server Error
The requested page cannot be accessed because the related configuration data for the page is invalid.
Detailed Error Information
Module IIS Web Core
Notification Unknown
Handler Not yet determined
Error Code 0x800700b7
Config Error There is a duplicate 'system.web.extensions/scripting/scriptResourceHandler' section defined
Config File \\?\C:\SVN\TestSite\web.config

...but if you look in the web.config, the scriptResourceHandler is only defined once. However, if you're using .Net Framework 4.0, this entry already exists in the machine.config - hence the error. So the solution is, either remove this and other duplicate entries from your web config, or if it's an option, change your site in IIS from using the Framework 4.0 application pool back to the Framework 2.0 application pool.

Creating a Sitefinity 3.7 Custom ControlDesigner

Here’s a simplified summary of the process of creating a custom designer to edit properties for a Sitefinity control:

For simple text fields, edit fields are automatically generated just by exposing properties of type string on the user control.

...but for an elaborate field editing interface on a Sitefinity control here's a diagram and overview:

(apologies for the VB code :))
In App_Code
BaseControl.cs (contains the properties on our usercontrol we need to edit)
Inherits UserControl
ControlDesigner.cs (control displays the editing UI and sets the properties on BaseControl)
Inherits Telerik…ControlDesigner

The control itself must inherit from BaseControl.cs - this later allows it to be cast to type DesignedControl from the ControlDesigner.

It must also have a control designer specified as a class attribute. ex:
[Telerik.Framework.Web.Design.ControlDesigner("ControlDesigner")]

To layout the UI for the Control designer, you need to create a separate LayoutTemplate user control, and specify it’s path as the ControlDesigner’s LayoutTemplatePath property.

The ControlDesigner references the LayoutTemplate’s properties like:
base.Container.GetControl("litDataString", true)

and sets the property on the usercontrol like:
((DesignedControl)BaseControl).Data = “xyz”

For simpler, unstyled layouts, you can get away without a LayoutTemplate and just specifying the controls’ positions via css in the ControlDesigner.

Here’s a more in-depth Sitefinity walk-through and sample code.

Sitefinity 4.1 problem uploading images with admin tools

We suddenly encountered an issue when uploading images using the Sitefinity 4.1 back-end admin tools. Now suddenly, when the content creators attempted to upload an image, they were suddenly getting a 404 error with the message:

Please review the following URL and make sure that it is spelled correctly.
Requested URL:
/Telerik.Sitefinity.AsyncImageUploadHandler.ashx

...Of course this functionality worked just fine in the development environment. The entire site was republished to staging, but they still were experiencing this issue of not being able to locate AsyncImageUploadHandler.ashx.

After examining everything, it ends up that there were several new httphandlers added in the system.webServer section in the local web.config that needed to be added to the staging site's config, specifically in this case the missing offender was:

<add name="Telerik.Sitefinity.AsyncImageUploadHandler" path="Telerik.Sitefinity.AsyncImageUploadHandler.ashx" verb="*" type="Telerik.Sitefinity.Modules.Libraries.Web.AsyncImageUploadHandler, Telerik.Sitefinity" />

I assume these settings were added when we upgraded to 4.1, SP1. According to the upgrade instructions, upgrading locally and then publishing everything except the Sitefinity configuration files to staging will automagically update the remote site to SP1. But you also need to make sure to merge the updates to your web.config as well.

Referencing Sitefinity 4.1 Themes, CSS From External Pages

Global styling in Sitefinity 4+ is handled by creating and registering a theme, and then applying it using the admin tool to your Sitefinity page templates:

Pretty easy, but what about if you need to reference that style sheet from an external web page that wasn't created within Sitefinity? Or to reference it right from the markup of your page templates/master pages? Looking at the solution the path will be something like:

/App_Data/Sitefinity/WebsiteTemplates/HomePage/App_Themes/Teal/Global/main.css

But we know the ASP.Net App_Data folder has special permissions that will not allow us to directly reference files within it... if we try to use this path to reference the stylesheet, we'll get a 403 error.

Fortunately, after you register a theme, Sitefinity will automatically re-route directly from the /Sitefinity folder at the root of the application into the /Sitefinity folder that exists at /App_Data/Sitefinity... kind of a client-side backdoor into your themes and templates.

So the easy answer to referencing your Sitefinity themes client-side, is just remove the "/App_Data" from the path. You can see this pathing structure if you look at the source code of your Sitefinity pages as well - example:

<link href="/Sitefinity/WebsiteTemplates/HomePage/App_Themes/Teal/global/main.css" type="text/css" rel="stylesheet" />

Sitefinity 4 "ExceptionManager Cannot be Constructed" error

If you're using Sitefinity 4.x and suddenly begin seeing this curious ASP.Net error:

"The type ExceptionManager cannot be constructed. You must configure the container to supply this value."

...this error results when the App_Data folder, and files within, are marked Read Only - if you're using TFS for source control, make sure your App_Data folder has been Checked Out. Your app should then launch normally.

Resolving Sitefinity 4 Search Not Including Content Pages

I recently encountered an issue where, after creating a Sitefinity SearchIndex for NewsItems, Static HTML and all Content, only the NewsItems were being returned - no Content Pages or Static HTML pages appeared in the results. The response I got was to upgrade to Sitefinity 4.1, SP 1, which wasn't the complete answer, but at least the newer admin UI helped to troubleshoot the problem:

(SearchIndex creation screen)


After going through the upgrade process, helpful error messages began to appear when I re-indexed my SearchIndex, indicating errors were being thrown when certain pages were being crawled.

So the problem really was that one particular call, in this case:
SiteMapBase.GetCurrentNode();
was throwing a null reference exception, only during the Sitefinity crawling process, and quietly killing the addition of the Content Pages to the SearchIndex. After resolving the issue, the full site indexed correctly, and searching returned results as expected. There's no feedback when the SearchIndex is successfully reindexed, however, but you'll see the page subtly refresh. (Maybe a good feature for 4.2)

(SearchIndex admin screen)


After going through this process, I found that you could also troubleshoot indexing issues by launching your app in debug mode, going to the admin tool and re-indexing your problem SearchIndex... The Visual Studio debugger will then point out any problem code.

Styling / Formatting Sitefinity 4 controls

One of the big differences between Sitefinity 3.x and 4 is in the way the style and layout of the controls is handled. In the older versions, you had direct access to the .ascx code in either the ControlTemplates folder or the UserControls folder. In 4.x, all Sitefinity widgets have been compiled into .dlls, with each widget exposing a LayoutTemplatePath property, which allows you to specify a path to your own .ascx file if you need to change the layout beyond what is possible via the other widget properties. It's a cleaner way to do it - in the past, upgrades could overwrite revised template code - now your revised layouts are preserved when upgrading.

You can get to the default LayoutTemplates at Design > WidgetTemplates in the Sitefinity admin area. But here's one problem - many controls, like in my case the Login control, don't have any sample layout code exposed. The first thing I tried was to use the LoginControl ascx from Sitefinity 3.7. The first error message you'll get is:

C001: LayoutTemplate does not contain an IEditableTextControl with ID UserName for the username.

You can rename your controls to get through these errors, but you'll eventually hit a brick wall, as you really need the layout code. Fortunately, Grigori at Sitefinity was good enough to send me the actual LayoutTemplate code, which is not exposed anywhere within Sitefinity. Here is the actual Sitefinity 4 LoginControl LayoutTemplate Code. Grigori tells me this will be included in the next release.

Adding this code to your project, and pointing your LoginControl's LayoutTemplatePath to this ascx will allow you to format your login control any way you want:

Default LayoutTemplate appearance:


Login control using custom theme, css: