Announcing Runtime Update 1 - Supporting jQueryMobile 1.3

Announcing Runtime Update 1 - Supporting jQueryMobile 1.3

Rate This
  • Comments 14

When we took a bet on jQuery, jQueryMobile, and datajs for our HTML client, we recognized that we’d need to adapt to the rapid release cadence these frameworks employ.  At the same time, we know that small issues in our application runtime can cause considerable strife.  Our response is to start delivering a series of small, servicing releases for our HTML client runtime via NuGet that address known bugs and compatibility issues with emerging versions of jQuery, jQueryMobile, and datajs.  Today we’ve released the first update onto the NuGet gallery—Microsoft.LightSwitch.Client.JavaScript.Runtime update 1!

This first update adds support for jQueryMobile 1.3 and jQuery 1.9. Especially jQueryMobile 1.3 brings a lot of improvements and bug fixes. Embracing the mobile-first, instead of mobile-only, approach was the main focus of this release. This was achieved by implementing a popular technique called responsive design. New widgets like tables and panels work efficiently on large screens as well as small phones, enabling data-richer scenarios. Also jQueryMobile and jQueryUI are working closer together with the goal of having even more shared code and conventions.

jQueryMobiles new responsive table widget

(picture taken from the jQueryMobile 1.3 announcement)

While we cannot add new design time features as part of a runtime update, you can still start using these new controls today by utilizing the power of our custom controls. A combination of our blog posts around custom controls and jQueryMobile’s excellent documentation will help you to get started. Michael dedicated a complete post to the integration of jQueryMobile controls as custom controls and our post about using a maps control to visualize list data explains the API of the LS collection which you need to implement your own table control.

How to update?

Thanks to NuGet the installation of a runtime update is a simple, two-step process. First, you update the “Microsoft.LightSwitch.Client.JavaScript.Runtime” package, which will automatically pull in the latest supported versions of our dependencies. Second, you bump the version numbers of the updated JavaScript and CSS files in the default.htm.

Important: Due to a known bug with NuGet, JavaScript projects and source control you need to unbind your solution from source control before updating the NuGet packages. Open File –> Source Control –> Advanced –> Change Source Control and unbind your solution and the projects it contains. After performing the following steps bind it again and merge in the new changes.

Start by switching to the file view of the solution explorer. The context menu of the HTML client project contains the entry “Manage NuGet Packages…”. Selecting the “Updates” section of the package manager will show the following screen:

nuget-update

Updating the LightSwitch runtime will automatically update jQuery and jQueryMobile for you. After a quick restart of Visual Studio and reopening the project you need to make a few changes in the default.htm:

  • light-theme.css to light-theme-1.0.1.css
  • mlsls-light.css to msls-light-1.0.1.css
  • jquery.mobile.structure-1.2.0.min.css to jquery.mobile.structure-1.3.0.min.css
  • msls-1.0.0.min.css to msls-1.0.1.min.css
  • jquery-1.8.2.min.js to jquery-1.9.1.min.js
  • jquery.mobile-1.2.0.min.js to jquery.mobile-1.3.0.min.js
  • msls-1.0.0.min.js to msls-1.0.1.min.js

F5 and you are done. Since NuGet packages are defined on a per project basis, you need to perform those steps for every project you have. Also keep in mind that jQuery and jQueryMobile remove functionality that was previously deprecated with every release. If you are heavily customizing your LightSwitch application using JavaScript code this might affect you. Make sure to carefully study their release notes in order to learn about new features and removed functionality:

If you have any problems with the upgrade or want to learn more about using some of the new features you can find us in the forums or the comments section below.

- Heinrich Wendel, Program Manager LightSwitch Team

Leave a Comment
  • Please add 1 and 1 and type the answer here:
  • Post
  • Do you guys have any thoughts on implementing bundling, which would make these updates possibly without modifying the references to the js and css files?

  • Any chance we will be able to use the htmlclient with Windows phone 7.8? I may have been naive but I did instruct my company to buy Windows phones a year ago on the hope that we would have better compatibility with Microsoft development tools. To see that early Android phones work with htmlclient and Windows phone 7.8 doesn't was very disapppointing.

  • My lightswitch project claims it doesn't have any nuget packages associated with it at all. Can't update what isn't there :\

  • Thanks for the comments all.

    @Devin: We have looked at bundling and verified that you can use MVC-style bundling/web optimization with LightSwitch.  We stopped short of using this approach in the box for now because it introduces a level of complexity that only really benefits a certain class of web apps--in practice it did not offer sizable perf gains for our apps because we already bundle and minify all user/generated code into a single file, and out dependencies are referenced in minified form.  That said, you're absolutely correct that bundling has other benefits--most notably maintaining references--and we do hope to incorporate and "auto-update" experience for references in the future.  Thanks for the question.

    @Marcelo: Please file a connect bug for Win phone 7.8 and we can have a look. If it's something that's garners passion from the community, we can consider it another update.  (It's a good candidate for these NuGet updates as it's largely a runtime issue.

    @Richard: Two possible causes come to mind--(1) Can you make sure you are invoking the NuGet package manager from the .jsproj file node in Solution Explorer, not the .lsproj node?  The NuGet package is part of the HTML client project (.jsproj), so you won't see anything for the LightSwitch project itself or the web project/middle tier. (2) If you upgraded the project from a preview release then the NuGet package info may not be part of your project--you'll have to add it manually.  Please feel free to follow-up on the forums and we'll help track this down for you.

  • @Joe Binder:

    Will do! I start a thread in a little. I think it may be the later.

  • After update I'm getting:

    SCRIPT5007: Unhandled exception at line 5, column 17734 in http://localhost:4109/HTMLClient/Scripts/msls-1.0.1.min.js

    0x800a138f - JavaScript runtime error: Unable to get property 'cultures' of undefined or null reference

    My 'culture' is PT-PT

  • @João: Can you please make sure that globalize.js has been successfully loaded. It is served from a CDN by default.

  • It's working. Probably a temporary problem loading globalize.js just after update :-(

    Thanks.

  • ?

    'Microsoft.LightSwitch.Client.JavaScript.Runtime' could not be installed because it is not compatible with any project in the solution.

    Advice?

    Pat NHU SA

  • ? could not be installed because it is not compatible

    Problem solved with

    Install-Package Microsoft.LightSwitch.Client.JavaScript.Runtime

    Thanks

    Pat NH USA

  • What is your solution for disconnected development environments, such as VMs ? Thanks

  • I haven't messed with NuGet packages much, but my understanding is that they're able to run bits of PowerShell on install/update.  Off-hand it seems like this could be used to do the necessary search-and-replace operations in the default.htm file?

    Not that big of a deal to make them ourselves, more just curious. :)

  • Test

  • The context menu that is used for the update is ONLY visible if you toggle your view to File View. Then right click on YourAppName.HTMLClient or References, and select "Manage NuGet Packages"

Page 1 of 1 (14 items)