Category Archives: WP7

Using jQuery Mobile in an ASP.NET MVC 4 and SignalR Application

source : dotnetcurry
Abstract: The recently released ASP.NET MVC 4 beta has enhanced mobile support through the introduction of new APIs and out of box support for jQuery Mobile. In this article, we will explore how jQuery.Mobile.MVC package, that is a part of MVC4, leverages jQuery.mobile and HTML5 to create targeted views for each device

The recently released ASP.NET MVC 4 beta has enhanced mobile support through the introduction of new APIs and out of box support for jQuery Mobile. The Mobile web project template helps you develop targeted mobile web applications ground up.

MVC 4 also has a new ‘View Switching’ functionality that helps adding Mobile capabilities to an existing site in a very clean way. In this article, we will see how we can take an existing MVC 4 application that is built for the desktop browser only and add mobile views to it.

Download the non-mobile site’s code from here and follow along to make it mobile enabled.

Starting off

If we run the code now in a mobile browser, we will see the following Home page. As we can see, this is just a ‘re-arranged’ version of the desktop site. The following meta tag (in _Layout.cshtml) helps scale things to the smaller view port of the mobile device.

<meta name=”viewport” content=”width=device-width” />

initial-index-page-iphone-wp7

If we navigate to the ‘Review’ or ‘Edit’ pages, we will see due to the styles applied to the text area, the mobile views are warped. WP7 (Mango) emulator’s IE and an iPhone’s Safari render the ‘Review’ page as follows. Thus, dynamic views using CSS can only go so far.

initial-review-page-iphone-wp7

Bringing in jQuery Mobile

Nuget has two packages for jQuery mobile

  • jQuery.mobile – Pulls in only the jQuery Mobile js and css dependencies.
  • jQuery.Mobile.MVC – Pulls in all jQuery.mobile and MVC4 goodies like adding the ViewSwitcherController, adding the _Layout.mobile.cshtml

Through the Package Manager Console let’s install jQuery.Mobile.MVC. The following dependencies should get installed.

install-jquery-mobile-mvc-from-nuget

Patching a minor gotcha

Once you install jQuery mobile, since all the JavaScript’s get downloaded in the Scripts folder due to the bundling and minification setup by default (in _layout.cshtml), the jquery.mobile behavior will kick in for certain components like buttons and text boxes in non-mobile sites too.

update-web-config-for-mobile-dependencies

To fix this, we simply create a Mobile folder under Scripts folder and move the mobile related js into it.

mobile-dependencies-solution-explorer

Similarly for Content folder, create a mobile sub-folder and move the mobile related classes in it. Also copy the Content/images into Content/mobile/images.

mobile-content-solution-explorer

Now open the _Layout.mobile.cshtml and change the references to point to the correct ‘mobile’ folder.

image

Getting the View Switcher in Action

With the mobile references in place, let’s run the app and refresh our Mobile view. We will see a slightly different view. The original CSS has been stripped and we have a little heading that tells us that currently the Mobile View is being shown and we could toggle back to ‘Desktop View’ if we wanted. However rest of the page is pretty messed up.

display-view-switcher-wp7

Clicking on Desktop view at this point will throw an error saying ViewSwitcher controller not found. This is not the fault of MVC. It’s our code that bombed. Remember we have a custom controller factory that creates Controllers as required. We have not added the ViewSwitcher controller in the BlogControllerFactory class.

add-view-switcher-to-controller-factory

With that piece of code in place, we can now switch between Desktop and Mobile views, except that the mobile view looks tad worse than the Desktop view.

Adding Mobile specific Views

To introduce specific mobile views that are custom made for mobile screens, MVC4 allows you to add views with a custom display mode by appending ‘.displaymode’ to a view. We take advantage of this by adding Index.mobile view for the Index page. The ‘.mobile’ display mode comes by default with the jQuery.Mobile.MVC package. Later we will see how we can target different mobile browsers differently.

We use the standard MVC scaffold tooling to generate a ‘List’ type view for our BlogPost model class.

add-mobile-index-view

Now when we view the application instead of the modified desktop view, we get a custom Mobile view.

mobile-index-view-wp7

If you click on the ‘Desktop View’, you will see the original desktop view which is also available at the same URL on your desktop browser.

Recap

Let’s do a quick recap here, because what we’ve got here is the crux of mobile support in MVC.

  • We added jQuery.Mobile.MVC from Nuget
  • We added a custom view with a .mobile appended to the View’s name

And just like that we now can have two different views for the exact same Action or URL.

Under the Covers

The MVC4 infrastructure has under the covers done quite a bit of work for us here. There is a new DisplayModeProvider that by default ships with two modes, desktop and mobile. For desktop it checks browser agent information to see if the browser is on a mobile device or desktop device. To pick up the mobile view it checks if a corresponding .mobile view exists and if it does, uses that view.

Unless you want to add your custom views the DisplayModeProvider stays out of the picture. We will see a sample of how to use DisplayModeProvider a little later. For now let’s deep dive into jQuery mobile techniques to make our mobile views more attractive.

Enabling switching from Desktop to Mobile view on Desktop Browser

Now if you visit the application from the desktop browser you will not see a switch to mobile view link because no one really wants to see the mobile view on a desktop browser. But it is an awfully handy thing to do when debugging. To enable the view switcher in Desktop browser, open _ViewSwitcher.cshtml and in the first line’s if(…) condition, remove ‘Request.Browser.IsMobileDevice &&’. If we remove this we will see the view switcher in desktop browser as well.

Using jQuery.mobile

Since mobile views usually have lesser screen-space showing a table/grid layout isn’t usually an effective presentation layout. Instead, we keep things at a minimal and try to get users to navigate in small steps.

For our home screen instead of showing Details, Edit, Review, Delete for each row we let user navigate to a ‘Details’ page where there will be additional controls to do the Edit, Review and Delete. The markup for the Index.mobile.cshtml is thus reduced to the following.

index-mobile-markup

Understanding the Markup

– The ‘@section header’

The ‘@section header’ markup encapsulates a section that is designated as the ‘header’ tag in HTML5.

– <h1>@ViewBag.Title</h1>

Shows the title of the page.

– <div data-role=”button” data-icon=”plus”>

This is the line where we first encounter jquery mobile custom attributes. Here ‘data-role’ is an attribute that indicates to jQuery how the content in the container should be rendered. ‘data-icon’ is an attribute that defines the icon to use on the button. The various types of icons are defined here. Through all our walkthrough we will see various custom attributes that add meta information that helps jquery render the UI.

The section in this div gets rendered as a button to the right of the header.

– <div data-role=”content”>

This section indicates to jQuery.mobile that this div is the container for content

– <ul data-role=”listview”>

The data-role=”listview” indicates that jquery should apply special rendering for the list.

– <li data-role=”list-divider”>Current Posts</li>

The first list time has the data-role of a list-divider. This makes the list item un-clickable and it gives it different visual cues.

– Using razor sytax we add the rest of the posts. To keep things short, we only show the post.Title property.

Now when we browse to the Index page on a mobile browser the page looks as follows

new-mobile-index-view-wp7

As we see above this is a standard and easy on eyes view that provides a clean way to invoke the ‘Create’ action (header button) and the ‘Details’ action (list item). Next we create a Details.mobile.cshtml to create the mobile view.

Adding a Mobile Details View

When the user clicks or taps on the list items we take them to a details page where they see the entire post and can do Edit/Delete/Review if required.

We start off with a standard MVC view called Details.mobile.cshtml

We then modify the markup to give it a ‘mobile’ look.

The final markup looks as follows:

details-mobile-markup

– The header section has the data_icon attribute set to arrow-l (arrow left) and the data_rel attribute set to back. This means the button will mimic the browser back button and also the button is to the left of the header.

– The content section is standard

– I have used a List view here though we don’t really have a list, I just used the list-divider rendering to give the post title a different look from the post content.

– <pre style=”white-space: pre-line”>

This tag encapsulates the post content while maintaining the linefeeds.

– Button Rendering

We have three buttons for three different actions. Each with a built-in icon.

The final UI looks as follows on a mobile browser

details-mobile-wp7

Now arguably that’s not the best mobile UI by far, however we get an idea of how jQuery mobile helps us build a Mobile specific page.

Using similar markup we create the Review, Edit and Delete pages and when done they looks as follows:

edit-mobile-wp7

delete-mobile-wp7

Adding a view specifically for a Device

So far we have seen how we can add views that simply go by whether the browser is on a Mobile or Desktop device. What if we want to handle different devices separately; For example target WP7 separate from iOS? This is where we get DisplayModeProvider in the play.

We have to register a new DisplayMode in the Global.asax. To register the mode we have to give it a name and provide a condition that will help determine the device that we are targeting.

Let us say we want to add a special mode for iPhones only. The following code registers the new display mode

register-iphone-display-mode

We are providing a lambda expression that checks the HttpContext’s User Agent for the term iPhone, through do a case insensitive search. If the condition is satisfied the DisplayProvider will look for a view that ends with iphone.cshtml. Note we are inserting it at position 0 of all the modes so, this condition is evaluated first. If this condition fails the generic ‘mobile’ view kicks in which falls through to the generic view.

Adding an iPhone View

Just to test it out, we will add a Index view for the iphone that has two lines per list instead of the one line per list we have here.

Add a new Index view with the name Index.iphone.cshtml. The following markup adds two lines for each Post in the application.

iphone-index-view

There is nothing new from a markup perspective except that for each line item has two lines, one wrapped as header and another as a paragraph.

When we publish this code, it looks as follows on the iPhone:

iphone-screen-index

The same page on Windows Phone (emulator) looks as follows

wp7-screen-index

The same page on IE9 looks as follows

ie9-screen-index

To see the app in action, visit the application from different devices at http://apps.sumitmaitra.com/funwithsignalr/

The best part is SignalR works across ALL these browsers. Isn’t that cool?

Conclusion

We saw how we can use jQuery.Mobile.MVC package, that is a part of MVC4, leverages jQuery.mobile and HTML5 to create targeted views for each device. Best part is the routing is transparent so all devices are actually looking at the same URL.

We should use mobile views because

  1. It helps us tailor views to specific devices
  2. It helps reduce bandwidth usage over mobile devices by giving us option to remove un-necessary graphics from Mobile views.
  3. Gives us the ability to build UI much closer to native mobile devices in look and behavior.

The only major ‘con’ of this approach is initial increase in effort for new views, however this is mostly mitigated in the long run because maintaining separate views usually means lesser ‘cross-platform’ hacks hence cleaner and easier to maintain markup.

With ASP.NET MVC 4, we are really looking at a very powerful framework that enables you to develop rich web applications for any target device (and audience).

The entire source code of this article can be downloaded over here

Advertisements

Hello World WP7 – Silverlight Style Mobile Tools Team Windows Phone Developer Tools Team Blog

If you are a Silverlight programmer, you already know a lot about Windows Phone 7 programming. If you are new to Silverlight or to Windows Phone 7, don’t worry, we will go over several easy to use concepts using this fun littleHello Word application, Silverlight style. What do I mean by that you might ask? We are bored of the Hello World apps. Let us create an exciting simple video player that will rotate as our Hello World application, Silverlight Style.

Let us get started. First install the Windows Phone Developer Tools Beta. You will get everything you need to get started with Windows Phone 7 development. Even if you are new to Microsoft platforms or tools, follow along with this step by step guide. Final solution is attached at the bottom of this page.

Step1 : Create a new Windows Phone Application

Open Microsoft Visual Studio 2010 Express for Windows Phone or VS2010 pro/premium/ultimate. I am using Visual Studio 2010 Express for Windows Phone. Also, I have enabled Expert Settings under Tools > Settings > Expert Settings. Select File > Create New Project (Ctrl+Shift+N). Select the Windows Phone Application template and give the application name as CrazyVideoApp.

You will see Designer where the Application UI is displayed, XAML editor that shows the UI definition and several tool windows around.

Step2: Customize UI

Select page name TextBlock in the designer and edit the name in the Property tool window. If the Property tool window is not visible, you can right click in the designer and select Properties. Change the Text property to crazy video. Similarly change the MY APPLICATION to DATA BINDING.

Step3: Add Video clip

From the Toolbox window, drag and drop a MediaElement control (at runtime plays a video) on to the designer. Resize it so that it is a little bigger. If the Toolbox window is not visible, you can select it from the View menu.

Now that we have a MediaElement that can play a video, let us add a video clip. Right click on the Project and select Add -> Existing Item.

In this case I am picking a movie.wmv file on the desktop. You can download this in the attached source code. Currently we support the following video format and codecs on the Emulator: WMV (VC1 – Main and Simple profile). The video provided in the solution is encoded as WMV (VC1-Main profile).  Now we need to wire up the MediaElement to the media file we added. We can do that by simply selecting the MediaElement we added in the designer and changing the Source property to movie.wmv

By default the MediaElement control will start playing the media once the application is launched.

Step 4: Debug It

Let us run it (in debug mode) by hitting F5. You will see the Windows Phone Emulator launch and the app get deployed to it. Then, you will see the app running in the Emulator and the Visual Studio goes into Debug mode.

Step 5: Lets go crazy

Silverlight does not support complete 3D. It supports what is 2.5D through Perspective Transforms to simulate 3D. Let us add some perspective transform to make our video rotate in 3D. Add the following code in the XAML.

<MediaElement Height=”233″ HorizontalAlignment=”Left” Margin=”24,33,0,0″ Name=”mediaElement1″ VerticalAlignment=”Top” Width=”383″ Source=”movie.wmv”>
<MediaElement.Projection>
<PlaneProjection x:Name=”projector” />
</MediaElement.Projection>
</MediaElement>

All we are doing here is setting up a Plane Projection called projector that we will use to rotate the video in the 3D space.

Add a Slider control below the MediaElement and set its Maximum to 360 so that we can rotate from 0 to 360 degrees.

We want to rotate the MediaElement when we drag the slider. So we use Element to Element Databinding to do this trick easily.

Let us use the Property editor to app databinding. Select the little square next to the Value property and selectApply Data Binding… option.

In the popup window, select ElementName in the first listbox and projector in the second listbox.

Now select Path: expandable property shown above and Select RotationY property. This will generate the following code in the Slider XAML tag: Value=”{Binding Path=RotationY, Mode=TwoWay, ElementName=projector}”

What we did so far is to tell SL engine “Whenever the slider1’s Value property changes, take that value and set it as the projector’s RotationY property”. So, when we drag the slider, the video rotates on tis Y Axis.

Add another slider next to the MediaElement, set the Orientation to Vertical and instead of binding Value toRotationY, bind it to RotationX.

 

Hit F5 to see our crazy video app. Drag the sliders to see the video rotate on X and Y axis.

WP7 Application Icon and Application Tile Icon

What is Application Icon?

Basically the application icon is the image that displays for your application in the phone’s application list.

According to the latest version of the Windows Phone 7 Application Certification Requirements (Here’s a direct link to the PDF file)the application icons should meet the following requirements:

tip52-6 AppIcon

  • PNG file format
  • 62 x 62 pixels

What is Application Tile Icon?

Basically an application tile is the image (of your application) that appears when users pins your application to the start screen. 

According to the latest version of the Windows Phone 7 Application Certification Requirements (Here’s a direct link to the PDF file)the application icons should meet the following requirements:tip52-8

AppTile

  • PNG file format
  • 173x 173pixels

How to add a new Application Icon?

By default when you create a new Windows Phone 7 application a sample ApplicationIcon.png image is automatically generated.  In order to change this image at first we have to add our new image to our project and set its build action to Content.

NOTE: You can also take a look at our article: WP7 working with Images: Content vs Resource build action

tip52-0tip52-3

After that you have two options either to use the VisualStudio Project Designer or WMAppManifest.xml file.

  • Change Application Icon using the VisualStudio Project Designer

In order to change the application icon just follow the steps:

1. Right click on your project in VisualStudio and select Properties.

2. Go to Application Tab where you will find a section called  “Icon”.

tip52-1 tip52-2

3.Just select from the combo your new icon:

tip52-4

  • Change Application Icon using WMAppManifest.xml file

Windows Phone projects have an auto-generated XML manifest file that contains phone application metadata. The XML manifest file includes information such as IconPath, product IDs, versioning details, runtime types, paths to resources, phone capabilities, and other application-specific information.

So in order to change the application icon just go to WMAppManifest.xml and change the IconPath tag like for example:

tip52-5

1
<IconPath IsRelative="true" IsResource="false">MyAppIcon.png</IconPath>

NOTE: For any reference you can also take a look at MSDN documentation.

How to add a new Application Tile Icon?

By default when you create a new Windows Phone 7 application a sample Background.png image is automatically generated.  In order to change this image at first we have to add our new image to our project and set its build action to Content. After that you have two options either to use the VisualStudio Project Designer or WMAppManifest.xml file.

  • Change Application Tile Icon using the VisualStudio Project Designer

Go to Application Tab(as explained in the previous point) where you will find a section called  “Background images”.

tip52-7

  • Change Application Icon using WMAppManifest.xml file In order to change the application tile icon just go toWMAppManifest.xml and change the BackgroundImageURI tag like for example:
1
2
3
4
5
6
7
<PrimaryToken TokenID="WP7SampleApp52Token" TaskName="_default">
  <TemplateType5>
    <BackgroundImageURI IsRelative="true" IsResource="false">AppTile.png</BackgroundImageURI>
    <Count>0</Count>
    <Title>WP7SampleApp52</Title>
  </TemplateType5>
</PrimaryToken>

That was all about how to change the Application Icon and Application Tile Icon of a Windows Phone 7 Application with new ones. Here is the source code: