Home » HTML5 et al » Microsoft and jQuery Mobile, PhoneGap

Microsoft and jQuery Mobile, PhoneGap

Prerequisites (June 2015⇒):

Welcome to technologies trend tracking for 2015⇒2019 !!! v0.7
5G: 2015⇒2019 5G Technologies for the New Era of Wireless Internet of the 2020’s and 2030’s
Networked Society—WTF ??? v0.5
Microsoft Cloud state-of-the-art v0.7
• Service/telco for Networked Society
• Cloud for Networked Society
• Chrome for Networked Society
• Windows for Networked Society

Opportunity for Microsoft and its Partners in FY17:

As progressed since FY15:

Or enter your email address to subscribe to this blog and receive notifications of new posts by email:

Join 94 other followers

2010 – the 1st grand year of:

3.5G...3.9G level mobile Internet
• system-on-a-chip (SoC) and
reflective display technologies

Why viewed most (till Feb 1):

Marvell SoC leadership
Android 2.3 & 3.0
Hanvon's strategy
Welcome! or Home pages
Treesaver (LATELY #2!) and
IMT-Advanced (4G)
MORE ON THE STATISTICS PAGE

Core information:

UpdatesPhoneGap, Cordova, and what’s in a name? [March 19, 2012]
– PhoneGap for Windows Phone Dissected [Dec 19, 2011]
– Tombstoning with PhoneGap for Windows Phone 7 (and KnockoutJS) [Oct 24, 2011]

A few weeks back I wrote a blog post about how the recent announcement of PhoneGap support for Windows Phone 7 (WP7) which makes it possible to develop HTML5-based applications. In my previous blog post I showed the development of a simple HTML5 / JavaScript application which PhoneGap wraps up within a Silverlight application ‘shell’ allowing it to be deployed to your phone and potentially submitted to the Marketplace.

However, in order to pass the various Marketplace requirements and gain certification, your application must correctly handle the application lifecycle. With the recent Mango release, the lifecycle has become a little more complicated (although better! in that it adds multi-tasking / fast-app switching). I have also covered the lifecycle in a previous blog post and demonstrated how you can handle the various lifecycle events within an MVVM application.

The most tricky part of the application lifecycle that as a developer you need to handle is the tombstoned state, where your application is terminated (i.e. stopped and removed from memory). It is your responsibility to save enough state in order that when your tombstoned application is restarted, it looks to the user as if your application never stopped running, i.e. you restore your application UI to its original state.

My Take on jQuery Mobile [Oct 25, 2011]

When I first saw the demo of jQuery mobile I was super impressed. Every buttons and gesture feels like a native app. Elements such as the header and footer gives it a strong sense of iOS feel. One couldn’t tell the difference if they didn’t see the address bar. However, after coding HTML 5 mobile apps for assignment 2 and final assignment, the flaws of jQuery mobile starts to surface.
1. Bad documentation
2. Page transition
3. Persistent footer
4. Platforms
HTML 5 mobile app is the future but not now.

jQuery Mobile 1.0RC2 Released! [Oct 19, 2011]

… We plan on this being the last RC before moving to the final 1.0 release within the next few weeks. This plan may change if we run into any major issues that will require broader testing and another RC. …

Platform support in 1.0 RC2

We’re excited to announce that as of 1.0 RC2, we’ve covered all our target platforms for the project. At this stage, we have broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We’re very proud of our commitment to universal accessibility through our broad support for all popular platforms.

Our graded support matrix was created over a year ago based on our goals as a project and since that time, we’ve been refining our grading system based on real-world device testing and the quickly evolving mobile landscape. To provide a quick summary of our browser support in Beta 1, we’ve created a simple A (full), B (full minus Ajax), C (basic) grade system with notes of the actual devices and versions we’ve been testing on in our lab.

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.

End of Updates

Satya Nadella, Jason Zander, Scott Guthrie, and Steve Ballmer: BUILD Keynote – Day 2 [Sept 14, 2011]

Scott Guthrie:

… when you create a new MVC 4 project, you’ll notice that there’s actually now a mobile application project template that you can use, so that if you want to build a standalone app specifically for mobile devices, it’s really easy to get started and do that.

What we’re also doing though is making it possible so that you can start with a project like I have here, which is built for desktop browsers, and easily mobile-extend it. So, I’m going to actually take advantage of that technique.

So, to that I’m just going to import a NuGet package called jQuery.Mobile.MVC. This is going to import a couple files into my project here, and let’s take a look at those.

So, the first one that it imported is a couple new JavaScript files, which is jQuery.mobile. And so we’ve been huge fans of the jQuery project for several years now, and really excited to announce this week that we’re going to be shipping jQuery Mobile as part of ASP.NET and Visual Studio going forward. (Applause.)

Even better though is some of the server support that we’re adding to ASP.NET to allow you to easily take advantage of that.

And so one of the things that we’ve done here if you look inside our project again is you’ll notice that there’s a new file that’s also been added by that NuGet package called layout.mobile. And what we’re doing is we’re — in the model view controller world, you can have clean separation between your controllers, your models, and your views. With MVC 4 we’re making it possible so that you can easily override any of the views inside your project to have device-specific optimizations within it.

So, for example, this layout.mobilewill basically override when a phone hits the site, and actually has a layout that’s kind of optimized for a smaller screen real estate. And the cool thing is you can do that on any individual view, partial, or layout.

So, if I wanted to, I could, for example, override the index.CSS HTML to have a mobile-specific view, but I don’t need to do that. So, I can choose which files I want to. In this case I’m just going to use the standard HTML app here, but I am going to go ahead and annotate it with a few jQuery Mobile annotations. So, I’m going to basically say I want this thing to be a list view style rendering, I want to enable filtering on it, and I want to inset it slightly so it looks a little better on a really small screen real estate.

And then I’m going to rerun this application. On my desktop browser it’s going to look exactly the same because I’m using the standard desktop layout, and those annotations are just going to be ignored, and they’re perfectly valid HTML5 annotations.

But if we switch gears here and hit it with a phone, and so I’m going to show here an iPhone emulator. We’re going to hit that exact same app, and one of the things you’ll notice now is we’re taking advantage of that new mobile layout, and we’re taking advantage of those data annotations to have a much smoother look and feel across that experience that’s optimized for a small form factor.

I could go ahead and do filtering. This is all client side. So, I can filter to see just the JAs or the SCs. Again you’ll notice full logon registration capabilities built into the template, and again I can click on say the about link and go back and forward within my site. And with only a few lines of code it’s super easy for me now to mobile optimize my site, and have it work across any phone, whether it’s a Windows Phone, an iPhone, Android, or any other type of device. (Applause.)

BUILD Day #2 in Review According to MVPs [Sept 15, 2011]

… Windows Phone team is creating CSS skins for jQuery Mobile that look WinPhone native. #bldwin …

ASP.NET MVC 4 Release Notes [Sept 14, 2011]

New Features in ASP.NET MVC 4 Developer Preview

This section describes features that have been introduced in the ASP.NET MVC 4 Developer Preview release.

Enhancements to Default Project Templates

The template that is used to create new ASP.NET MVC 4 projects has been updated to create a more modern-looking website:

In addition to cosmetic improvements, there’s improved functionality in the new template. The template employs a technique called adaptive renderingto look good in both desktop browsers and mobile browsers without any customization.

To see adaptive rendering in action, you can use a mobile emulator or just try resizing the desktop browser window to be smaller. When the browser window gets small enough, the layout of the page will change.

Another enhancement to the default project template is the use of JavaScript to provide a richer UI. The Login and Register links that are used in the template are examples of how to use the jQuery UI Dialog to present a rich login screen:

Mobile Project Template

If you’re starting a new project and want to create a site specifically for mobile and tablet browsers, you can use the new Mobile Application project template. This is based on jQuery Mobile, an open-source library for building touch-optimized UI:

This template contains the same application structure as the Internet Application template (and the controller code is virtually identical), but it’s styled using jQuery Mobile to look good and behave well on touch-based mobile devices. To learn more about how to structure and style mobile UI, see the jQuery Mobile project website.

If you already have a desktop-oriented site that you want to add mobile-optimized views to, or if you want to create a single site that serves differently styled views to desktop and mobile browsers, you can use the new Display Modes feature. (See the next section.)

Display Modes

The new Display Modes feature lets an application select views depending on the browser that’s making the request. For example, if a desktop browser requests the Home page, the application might use the Views\Home\Index.cshtml template. If a mobile browser requests the Home page, the application might return the Views\Home\Index.mobile.cshtml template.

Layouts and partials can also be overridden for particular browser types. For example:

  • If your Views\Shared folder contains both the _Layout.cshtml and _Layout.mobile.cshtml templates, by default the application will use _Layout.mobile.cshtml during requests from mobile browsers and _Layout.cshtml during other requests.
  • If a folder contains both _MyPartial.cshtml and _MyPartial.mobile.cshtml, the instruction @Html.Partial(“_MyPartial”) will render _MyPartial.mobile.cshtml during requests from mobile browsers, and _MyPartial.cshtml during other requests.If you want to create more specific views, layouts, or partial views for other devices, you can register a new DefaultDisplayMode instance to specify which name to search for when a request satisfies particular conditions. For example, you could add the following code to the Application_Startmethod in the Global.asax file to register the string “iPhone” as a display mode that applies when the Apple iPhone browser makes a request:
    DisplayModes.Modes.Insert(0, new DefaultDisplayMode("iPhone"){    ContextCondition = (context => context.Request.UserAgent.IndexOf        ("iPhone", StringComparison.OrdinalIgnoreCase) >= 0) });

    After this code runs, when an Apple iPhone browser makes a request, your application will use the Views\Shared\_Layout.iPhone.cshtml layout (if it exists).

    jQuery Mobile, the View Switcher, and Browser Overriding

    jQuery Mobile is an open source library for building touch-optimized web UI. If you want to use jQuery Mobile with an ASP.NET MVC 4 application, you can download and install a NuGet package that helps you get started. To install it from the Visual Studio Package Manager Console, type the following command:

    Install-Package jQuery.Mobile.MVC

    This installs jQuery Mobile and some helper files, including the following:

     

  • Views/Shared/_Layout.Mobile.cshtml, which is a jQuery Mobile-based layout.
  • A view-switcher component, which consists of the Views/Shared/_ViewSwitcher.cshtml partial view and the ViewSwitcherController.cs controller.After you install the package, run your application using a mobile browser (or equivalent, like the Firefox User Agent Switcher add-on). You’ll see that your pages look quite different, because jQuery Mobile handles layout and styling. To take advantage of this, you can do the following:
  • Create mobile-specific view overrides as described under Display Modesearlier (for example, create Views\Home\Index.mobile.cshtml to override Views\Home\Index.cshtml for mobile browsers).
  • Read the jQuery Mobile documentationto learn more about how to add touch-optimized UI elements in mobile views.A convention for mobile-optimized web pages is to add a link whose text is something like Desktop view or Full site mode that lets users switch to a desktop version of the page. The jQuery.Mobile.MVC package includes a sample view-switcher component for this purpose. It’s used in the default Views\Shared\_Layout.Mobile.cshtml view, and it looks like this when the page is rendered:If visitors click the link, they’re switched to the desktop version of the same page.Because your desktop layout will not include a view switcher by default, visitors won’t have a way to get to mobile mode. To enable this, add the following reference to _ViewSwitcher to your desktop layout, just inside the <body>element:
    <body>    @Html.Partial("_ViewSwitcher")    ...

    The view switcher uses a new feature called Browser Overriding. This feature lets your application treat requests as if they were coming from a different browser (user agent) than the one they’re actually from. The following table lists the methods that Browser Overriding provides.

    HttpContext.SetOverriddenBrowser(userAgentString)

    Overrides the request’s actual user agent value using the specified user agent.

    HttpContext.GetOverriddenUserAgent()

    Returns the request’s user agent override value, or the actual user agent string if no override has been specified.

    HttpContext.GetOverriddenBrowser()

    Returns an HttpBrowserCapabilitiesBase instance that corresponds to the user agent currently set for the request (actual or overridden). You can use this value to get properties such as IsMobileDevice.

    HttpContext.ClearOverriddenBrowser()

    Removes any overridden user agent for the current request.

    Browser Overriding is a core feature of ASP.NET MVC 4 and is available even if you don’t install the jQuery.Mobile.MVC package. However, it affects only view, layout, and partial-view selection — it does not affect any other ASP.NET feature that depends on the Request.Browser object.

    By default, the user-agent override is stored using a cookie. If you want to store the override elsewhere (for example, in a database), you can replace the default provider (BrowserOverrideStores.Current). Documentation for this provider will be available to accompany a later release of ASP.NET MVC.

    Azure SDK

    ASP.NET MVC 4 Developer Preview supports the September 2011 1.5 release of the Windows Azure SDK.

Progressively enable the mobile web with ASP.NET MVC 4, HTML5, and jQuery Mobile [BUILD2011 session TOOL-803T, video record on Channel 9, by Phil Haack, Sept 15, 2011]

There are over a billion mobile devices with rich Web capabilities, yet many Websites look terrible on such devices, or worse, fail to work at all. As mobile devices become the primary way that most people access the Web, having a site that fails to deliver a rich experience on the Web using HTML5, JavaScript and jQuery Mobile is missing out on a huge opportunity. In this session, learn how ASP.NET MVC 4 leverages these next generation technologies enabling developers to build a single solution that targets multiple platforms and form factors such as mobile, tablet and desktop devices.

51Degrees.mobi and MVC4 [Sept 23, 2011]

The annual Build conference announced and showcased many exciting innovations from Microsoft, but what interests us the most is the latest version of MVC.

Many of the changes to MVC4 are trying to make it more mobile friendly. As can be seen from Phil Haack’s presentation at Build, MVC now has jQuery Mobile in the box and allows multiple views for each controller depending on the device the server detected; and as Phil said at his talk, “Device detection is not trivial…[51Degrees]… adds a ton of device info to the browser files”.

So exactly how would you integrate 51Degrees with MVC4? The Nuget repository along with the manner in which Views can be configured makes the whole process a breeze. This guide describes how to install 51Degrees from Nuget and then how to setup a view for a mobile device.

ASP.NET MVC 4 Mobile Features [Tutorial with the same content as the Phil Haack’s session above, Sept 14, 2011]

… For this tutorial, you’ll add mobile features to the simple conference-listing application that’s provided in the starter project.  …

Skills You’ll Learn

Here’s what you’ll learn:

  • How the ASP.NET MVC 4 templates use the HTML5 viewport attribute and adaptive renderingto 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.

CSS Media Queries

CSS media queries are an extension to CSS for media types. They allow you to create rules that override the default CSS rules for specific browsers (user agents). A common rule for CSS that targets mobile browsers is defining the maximum screen size. …

The Viewport Meta Tag

Most mobile browsers define a virtual browser window width (the viewport) that’s much larger than the actual width of the mobile device. This allows mobile browsers to fit the entire web page inside the virtual display. Users can then zoom in on interesting content. However, if you set the viewport width to the actual device width, no zooming is required, because the content fits in the mobile browser.

The viewport <meta> tag in the ASP.NET MVC 4 layout file sets the viewport to the device width. …

Examining the Effect of CSS Media Queries and the Viewport Meta Tag

The viewport <meta> tag and the CSS media query are not specific to ASP.NET MVC 4, and you can take advantage of these features in any web application. But they are now built into the files that are generated when you create a new ASP.NET MVC 4 project.

For more information about the viewport <meta> tag, see A tale of two viewports — part two.

In the next section you’ll see how to provide mobile-browser specific views.

Overriding Views, Layouts, and Partial Views

A significant new feature in ASP.NET MVC 4 is a simple mechanism that lets you override any view (including layouts and partial views) for mobile browsers in general, for an individual mobile browser, or for any specific browser. To provide a mobile-specific view, you can copy a view file and add .Mobile to the file name. For example, to create a mobile Index view, copy Views\Home\Index.cshtml to Views\Home\Index.Mobile.cshtml.

In this section, you’ll create a mobile-specific layout file.

Browser-Specific Views

In addition to mobile-specific and desktop-specific views, you can create views for an individual browser. For example, you can create views that are specifically for the iPhone browser. In this section, you’ll create a layout for the iPhone browser and an iPhone version of the AllTags view.

In this section we’ve seen how to create mobile layouts and views and how to create layouts and views for specific devices such as the iPhone. In the next section you’ll see how to leverage jQuery Mobile for more compelling mobile views.

Using jQuery Mobile

The jQuery Mobile library provides a user interface framework that works on all the major mobile browsers. jQuery Mobile applies progressive enhancement to mobile browsers that support CSS and JavaScript. Progressive enhancement allows all browsers to display the basic content of a web page, while allowing more powerful browsers and devices to have a richer display. The JavaScript and CSS files that are included with jQuery Mobile style many elements to fit mobile browsers without making any markup changes.

In this section you’ll install the jQuery.Mobile.MVC NuGet package, which installs jQuery Mobile and a view-switcher widget.

Improving the Speakers List

Creating a Mobile Speakers View

Improving the Tags List

Improving the Dates List

Improving the SessionsTable View

Improving the SessionByCode View

Wrapup and Review

This tutorial has introduced the new mobile features of ASP.NET MVC 4 Developer Preview. The mobile features include:

  • The ability to override layout, views, and partial views, both globally and for an individual view.
  • Control over layout and partial override enforcement using the RequireConsistentDisplayModeproperty.
  • A view-switcher widget for mobile views than can also be displayed in desktop views.
  • Support for supporting specific browsers, such as the iPhone browser.

See Also

Other information:

Anatomy of a Page [jQuery Mobile site]

Building Cross-Platform Apps Using jQuery Mobile [MSDN ScriptJunkie article by Nick Riggs, April 20, 2011]

ASP.NET MVC 4 Article Series by Nandip Makwana:

  • Getting Started With ASP.NET MVC 4(Sep 15th)
  • First look at ASP.NET MVC 4 Templates(Sep 16th)
  • ASP.NET MVC 4 Mobile Project Template(Sep 18th)
  • Display Mode in ASP.NET MVC 4 (Sep 21st)
  • Under the Hood of Display Mode in MVC 4 (Sep 27th)

    PhoneGap

    Announcing PhoneGap for Windows Phone Mango [Jesse MacFadyen, Senior SE, Nitobi, Sept 8, 2011]

    Over the last month and a bit, Nitobi has been working closely with Microsoft to bring PhoneGap to WP7 devices. I am happy to say that it’s now here, and ready for beta exposure.

    Our starting point was the excellent work of Matt Lacey, who created the initial project and did the initial exploration of device functionality. The upcoming Windows Phone Mango update to devices brings a rich set of HTML5 features and IE9 to the device.

    Thanks to Microsoft sponsorship, Sergei Grebnov has been making contributions to the code and has implemented the MediaCapture and Camera APIs. This is Sergei’s first foray into PhoneGap, but he has proven to be a valuable asset to the project and was up to speed quickly.

    Nitobi has dedicated two developers to the project, myself and Herm Wong. We’ve been busy dusting off our Sliverlight+C# skills and implementing the other APIs. ( the infamous Shazron has also jumped in just this week )

    What You’ll Need to Get Started

    Where Are We ? What APIs Are Done?

    Here’s an overview of where we’re at:

    • Accelerometer
    • Camera
    • Compass (unit testing is waiting on us having a device that supports compass)
    • Contacts
    • Events (partial, still underway)
    • GeoLocation
    • MediaCapture
    • Connection
    • Notification

    These have all been implemented per the spec, and function as expected with some quirks being added to the documentation as you read this.

    The ‘deviceready’ event is fired on startup, and like other device platforms, is the signal that you can begin making PhoneGap API calls.

    The GeoLocation API did not require any work, as IE9 implements the spec as defined by W3C.

    Still to come :

    • File
    • Storage

    How Does it Work? A peek under the hood.

    Gotchas + Known Issues

    Reporting issues, tracking progress and keeping up to date.

    Will PhoneGap for WP7 support plugins?

    This was a key focus, as keeping the architecture plug-able is a primary concern, and in my view, where the real power lies.

    PhoneGap-WP7 maintains the plugability of other platforms via a command pattern, to allow developers to add functionality with minimal fuss, simply define your C# class in the WP7GapClassLib.PhoneGap.Commands namespace and derive your class from BaseCommand.

    PhoneGap exec works in exactly the same way as other platforms :

    PhoneGap.exec(callbackSuccessFunction,callbackErrorFunction, PLUGINNAME, PLUGINMETHODNAME, paramObj);

    What is Left to Do? How can You Contribute?

    Sergei has begun working on the File API, so you can expect full file access to create, modify, delete files as well as upload/download to/from a server.

    I am busily trying to wrap up some of the life-cycle events (Events API) so your application can be notified when the app is pushed to the background. I will be looking into exposing mouse events to JavaScript shortly after that.

    roadmap-planning [Brian LeRoux, Senior Architect, Nitobi, Sept 30, 2011]

    Sept 30 – 1.1.0

    • plugins (discussion on Planning: Plugin Packaging)
    • security: child browser investigation / oauth support
      • Android (Simon)
    • performance: first benchmark(s) / resource profiling hooks / capacity tests (maybe identify flagship devices!)
    • cmd line scripts for: build, debug, emulate, release, create, log, test
    • bundle phonegap/wp7 in the download ( FileAPI, MouseEvents, Storage, Template + BuildScripts )

    More information:


4 Comments

  1. […] – PhoneGap: avagy a mobil fejlesztés leghatékonyabb HTML5/JavaScript-ben? (2011. október 5.) – Microsoft and jQuery Mobile, PhoneGap [Oct 13, 2011] – The accelerated Adobe strategy for HTML5 et al [Oct 12, […]

  2. […] és PhoneGap (szolgáltatásokkal bővített Adobe disztribúció) (2012. március 21.) – Microsoft and jQuery Mobile, PhoneGap [Oct 13 – Dec 19, 2011] – PhoneGap 1.2 (2011. november […]

  3. […] – PhoneGap 1.2 (2011. november 16.) – PhoneGap for Windows Phone Dissected [Dec 19, 2011] – Microsoft and jQuery Mobile, PhoneGap [Oct 13 – Dec 19, 2011] Like this:TetszikJelezd elsőként, hogy neked ez tetszik: […]

  4. […] a tavalyi web konferenciához kapcsolódóan ezt a témát (majd követtem is más bejegyzésekben: Microsoft and jQuery Mobile, PhoneGap, PhoneGap 1.2 és Cordova (alapmotor az Apache-től) és PhoneGap (szolgáltatásokkal bővített […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: