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).

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 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 Azure Dark Theme

Orchard Theme

Orange Pastel Greens theme

VS2012C Theme

Blue Purple Dark 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.

Advertisement

Hello, Colors and more

MSDN Magazine > Issues and Downloads > 2013 > May 2013 Issue

Leading LightSwitch – Hello, Colors

Jan Van der Haegen

o

If you have not taken the time to read through and try the above sample written by Jan in his MSDN Magazine column then you should do so. As Jan says, if you are new to VisualStudio LightSwitch then visit the LightSwitch development center. LightSwitch has shallow learning curve, so you should be following through the ‘Hello, Colors’ article in no time.

o

For some reason MSDN Magazine web site refuses to let me post feedback so I decided to publish this blog post. Well done Jan, great article!

Following on, here are my attempts to implement colour-coding inside a sample LightSwitch HTML Client:

Picture 1: Sample form with colour picker

o

Picture 2: Sample popup dialog with colour picker

o

Picture 3: Colour-coded tiles

o

I think that is not too bad at all, however it was not all straightforward. I arrived at this point expecting success provided there were no typo’s:

Picture 4: Colour picker style at odds with the theme

o

So that did not work as expected. The input textbox gets focus and nothing shows. Jan’s examples usually work so I figured I must be missing some tweaks to the UI elements. Firstly, lets style the input textbox to match my JQuery Mobile ThemeRoller theme:

Picture 6: HTML element does not expand

o

To fix the problem I had to adjust the minimum width and height settings in the LightSwitch designer for the colorpicker custom control. I wonder if Jan did that or is there a problem with changes with the latest release of the software?

Picture 7: Setting minimum width and height

o

For those wishing to alter the style of the input textbox, here is the JavaScript code:

myapp.AddEditProduct.Color_render = function (element, contentItem) { setTimeout(function () { var colorPicker = $("<input class="id-element ui-input-text ui-body-a ui-corner-all ui-shadow-inset ui-mini"" + " id="cpFocus" type="text" maxlength="255"" + " value="" + contentItem.value + "" data-mini="true" />"); colorPicker.appendTo($(element)); colorPicker.colorpicker({ showOn: 'focus' }) .on('change.color', function (evt, color) { contentItem.value = color; }); contentItem.dataBind("value", function () { colorPicker.colorpicker("val", contentItem.value); }); }, 0); };

Code 1: The class tag for picking up the JQuery mobile styling

o
That is all for now! Many thanks to Jan Van der Haegen and the Visual Studio LightSwitch team.

o

Theme rolled courtesy of and at JQuery Mobile ThemeRoller – get rolling!

o