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.