jQuery Mobile Themes suitable for LightSwitch HTML Apps

Xpert360Lightning.HTMLThemes

This is a Visual Studio extension that provides a collection of jQuery Mobile CSS templates designed and tested for Visual Studio LightSwitch HTML Client and Cloud Business Apps (see below).

jQuery Mobile HTML Tthemes

Sample of jQuery Mobile HTML Themes for LightSwitch

The Xpert360Lightning.HTMLThemes extension is bundled with AIDE 2013 for Visual Studio for now and is not available separately though this may change (see below for more information).

See the new Screen Templates and Themes in action >

New JavaScript Item Templates

The purpose of these CSS themes is to provide a starting point for selecting jQuery Mobile themes within Visual Studio 2012 and 2013. The themes are suitable for any jQuery Mobile web application and can be inspected and changed with the jQuery Mobile Theme Roller.

To use in your LightSwitch HTML apps it is usually to select ‘Add New Item‘ for the client project’s ‘Content‘ folder and choose a theme from ‘/JavaScript/Themes/’. Then edit the client project’s ‘default.htm’ file and change the theme reference to use the new theme. The theme name prefix indicates whether it works best with the ‘msls-dark…’ or ‘msls-light..’ style sheet.

Design-Time

The themes are accessible from the ‘Add New Item’ dialog.

Add New Item - JavaScript Themes

Add New Item – JavaScript Themes for jQuery Mobile

Most of the themes contain two swatches. You can browse through the themes in Visual Studio. You are welcome to modify the themes for your own use. If you have any suggestions for more themes then please contact us.

Run-Time

You may have to adjust the supplied ‘msls’ style sheets if you want to implement correct rendering of the header. see this article: Vs2013 LightSwitch HTML Themes – Headers

If you want to use other swatches other than ‘A’ then the ‘msls’ script needs a simple change to expose the setting.

Here are some of the themes in use:

Office Brown Themed Auto-Tile Menu

Office Brown Themed Auto-Tile Menu

New Screens in Office Azure Dark Theme

Office Azure Dark Theme

Tablet List and Details Screen in Orchard Theme

Orchard Theme

Auto-Tile Menu Screen in Orange Pastel theme

Orange Pastel Greens theme

New Screens in VS2012C Theme

VS2012C Theme

Blue Purple Dark Theme - Swatch-B

Blue Purple Dark Theme – Swatch-B

Office Blue Theme - Swatch-B

Office Blue Theme – Swatch-B

There are currently 19 themes and some 40 or so swatches to choose from. Go style you LightSwitch HTML Apps!

Plans

There are plans to add some themes for use with Office 365 and SharePoint on-line. We will fill out the pack of themes with a wider palette range and introduce some themes with background imagery (not strictly for low-power mobile devices). We will also release a theme previewer LightSwitch HTML application that is able to dynamical switch themes and allow you to browse theme preview images.

We will review the themes based on any feedback from users.

Screen Templates

We are open to the idea of providing advanced screen templates for all LightSwitch client types though the initial focus is on the MobileWeb client. We are currently working on new screen templates to expand this collection.

HTML Screen Templates

The screen shots that accompany the screen template blog posts make use of many of the themes contained in the Xpert360Lightning.HTMLThemes Visual Studio extension.

The LightSwitch client only has 3 basic default screen templates. This collection of templates is intended to provide screens with more functionality that require less manual changes to turn them into end product. The collection consists of:

Auto-Tile Menu Template

Browse Data Tabs Template

Tablet List and Details Template

Mobile List and Details Template

Cloud Business Apps in VS2013

Visual Studio 2013 introduces a new application type called a Cloud Business App. This brings together LightSwitch RAD platform and Office 365.

LightSwitch, launched in 2010, simplifies the creation of line of business forms over data apps using a visual designer to manage app metadata. The original version created Silverlight clients, but it now supports responsive HTML clients. You can extend with code, using JavaScript/C#/VB on the client or C#/VB in the service layer. For more advanced extension and integration, LightSwitch projects easily integrate with other technologies and frameworks (ASP.NET Web API, MVC 5, Angular.js ...).

The Cloud Business App template adds SharePoint and Office 365 into the mix. The ease of use is improving as better integration arrives as other components such as the Windows Azure SDK catch up.

Will 2014 be a big year for Cloud Business Apps? Building LOB applications on Microsoft’s platform is in some respects harder and more complex today than it was a decade ago, and looking ahead, Office 365 and Azure are a strategic platform for Microsoft. Simplifying LOB app development and deployment to support diverse devices is surely a winner.

AIDE 2013 for Visual Studio

AIDE 2013 is the market leading set of productivity power tools for Cloud Business and LightSwitch applications. The only supported way to clone, import/export, local backup/restore screens and code. Visualize hard-to-access metadata to complement working with the standard LightSwitch designers.

ooo

Failed upgrades, unloadable projects, old extensions, AIDE for LightSwitch will be there to help you through! Xpert360 consultants have real-world experience of reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting your LightSwitch projects.

ooo

Company information: Xpert360 Ltd, founded in 2009, based upon three decades of IT experience, is an Independent Software Vendor and Custom Solution Provider based in the United Kingdom.

Xpert360 Lightning“, “AIDE for LightSwitch“, “AIDE 2013 for Visual Studio” are trademarks of Xpert360 Ltd, copyright 2012 – 2014.

About these ads

4 responses to “jQuery Mobile Themes suitable for LightSwitch HTML Apps

  1. Pingback: Guide to VS2013 LightSwitch HTML Themes | Xpert360 Ltd Development Blog

  2. Pingback: Dew Drop – January 8, 2014 (#1697) | Morning Dew

  3. Pingback: LightSwitch Community & Content Rollup–January 2014 - Beth Massi - Sharing the goodness - Site Home - MSDN Blogs

  4. Pingback: VS2013 LightSwitch HTML Themes – Headers | Xpert360 Ltd Development Blog

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