Feeds:
Posts
Comments

Posts Tagged ‘MvcHaack.ViewMobilizer’

While rushing from one XAML session to another at BUILD, I also tried to attend a few HTML5/Javascript/CSS sessions. Today I also made it into the super-crowded “Progressively enable the mobile web with ASP.NET MVC 4, HTML5, and jQuery Mobile” session presented by Phil Haack. The presentation was very informative and I decided to share some of the links and details about the discussed topics.



The session mainly focused on the following topics in ASP.NET MVC 4:

  • How to use the HTML5 viewport attribute and adaptive rendering to improve display on mobile devices
  • How to create mobile-specific views
  • How to create a view switcher that lets users toggle between a mobile view and a desktop view of the application



Useful Terms

ViewPort Meta Tag:

Mobile browsers define a virtual browser window width (the viewport), which can be larger than the actual width of the mobile device. The viewport <meta> tag in the ASP.NET MVC 4 layout file sets the viewport to the device width. This tag can be used in any web application and is not ASP.NET MVC 4 specific.

The following line shows the viewport <meta> tag in the ASP.NET MVC 4 layout file: <meta name=”viewport” content=”width=device-width”>

Mobile-specific views

ASP.NET MVC 4 provides a new feature with which you can override layout and partial views for mobile browsers as well as specific browsers. If you need a different view for the mobile browser, you simply copy a view file and add .Mobile to the file name. Then you need to create a mobile-specific view. I provided a link to a sample on ASP.NET/MVC , which outlines the entire process in detail.

MvcHaack.ViewMobilizer: 

This is a package for easily converting views to mobile, when creating mobile-specific views. This package should be available through the new Recipes feature for ASP.NET MVC 4, which can be installed using NuGet.

Jquery Mobile

This library provides a user interface framework that works on all the major mobile browsers; it applies progressive enhancement to mobile browsers that support CSS and JavaScript. With progressive enhancement, all browsers may display the basic content of a web page, however more powerful browsers and devices may display an enhanced version of the page with its actual rich feature-set. The jQuery Mobile’s Javascript and CSS files can style many elements especially for mobile browsers and without any further markup changes.

You can install JQuery.Mobile.MVC  for ASP.NET MVC 4 as a NuGet package.

View-Switcher:

This is a partial view, which provides a link at the top of each page to switch from desktop view to mobile view and vice versa. The desktop layout does not include a view switcher by default, so there is no link to browse to the mobile version of a view from the desktop layout.


Useful Links

Download link for ASP.NET MVC 4 Developer Preview:

http://www.asp.net/mvc/mvc4

Release Notes for ASP.NET MVC 4:

http://www.asp.net/learn/whitepapers/mvc4-release-notes

Link to ASP.NET MVC RoadMap:

http://aspnet.codeplex.com/wikipage?title=ASP.NET%20MVC%204%20RoadMap

Sample to follow along (sample files available for download):

http://www.asp.net/mvc/tutorials/aspnet-mvc-4-mobile-features

Download link for Windows Phone SDK 7.1 (for the emulator):

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27153

Install NuGet for ASP.NET MVC4 recipes:

http://docs.nuget.org/docs/start-here/installing-nuget


On a side note:

I started off web development with HTML and in-house Javascript libraries, then moved to Java/JSP and even did some development with Grails. Grails delivers developer productivity by applying principles like Convention over Configuration and it is built based on the MVC paradigm. It provides view templates, scaffolding, dynamic tag libraries etc. I am not quite certain about the underlying factors, it may be Java and Grails, which make me feel so sympathetic towards ASP.NET MVC. It is surely different from my relation with ASP.NET Web forms; which ever so often gets the cold shoulder from me.

Advertisements

Read Full Post »