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

Free LightSwitch Holiday Theme – Pumpkin

  Lightning Series – Pumpkin Theme

To celebrate the re-release of the  Xpert360 theme packs with VS2013 support, Xpert360 have released this free theme based around Halloween with spooky shades of pumpkin with witchy greens and blacks. This theme can be downloaded from here.

Pumpkin Theme

Pumpkin Theme Calendar

Nobody wants a Pumpkin Validation Error

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012 and 2013. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

Install Pumpkin Theme vsix to VS2012 and VS2013

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch. The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning -Pumpkin Theme We hope you like it!

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” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2012 – 2013.

Xpert360 Lightning Emerald Theme Pack Released

Lightning Series – Emerald Theme Pack

Another new pack of 8 Lightswitch Themes has been released!

Simple, elegant and unique  themes inspired by shades of green are compatible with all Standard Shells. These 8 Themes add a professional, business flavour to your Lightswitch application.

The theme pack contains the following 8 themes

• Emerald Dark
• Emerald Dark Lite
• Apricot
• Watermelon
• Avocado
• Shamrock
• Light Green
• Grape

For more screen shots please go to the Xpert360 Theme Pack Gallery.

It is the third Theme Pack to be released by Xpert360 and can be downloaded here.

The themes in the pack target the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. They have been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme pack can be obtained from the XPert360 Product page. This is the gallery posting – Xpert360 Lightning – Emerald Theme Pack[V2,V3,SL]

Xpert360 Lightning Office Theme Pack Released

Lightning Series – Office Theme Pack

Another new pack of 8 Lightswitch Themes has been released!

Simple, elegant and unique Office inspired themes which are compatible with all Standard Shells. These 8 Themes add a professional, business flavour to your Lightswitch application.

The theme pack contains the following 8 themes

• Office Blue
• Office Silver
• Light Blue
• Light Blue (Lite)
• Office Black
• Visual Studio 2012
• Dark Blue
• Dark Blue (Lite)

For more screen shots please go to the Xpert360 Theme Pack Gallery.

It is the second Theme Pack to be released by Xpert360 and can be downloaded here.

The themes in the pack target the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. They have been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme pack can be obtained from the Xpert360 Product Page. This is the gallery posting – Xpert360 Lightning – Office Theme Pack[V2,V3,SL]

Chocolate Theme Pack Sample – Mint Choc Chip

Lightning Series – Mint Choc Chip Theme

To celebrate the release of the  Xpert360 Chocolate theme pack Xpert360 have released this free theme based around mint choc chip and shades of green and chocolate with an added chocolate image. It is the third free chocolate theme and the fifth in a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

Mint Choc Chip Theme

Mint Choc Chip Validation error

Mint Choc Chip Calendar

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch. The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning -Mint Choc Chip Theme[V2,V3,SL] We hope you like it!

Xpert360 Lightning Chocolate Theme Pack Released

Lightning Series – Chocolate Theme Pack

A pack of 8 Lightswitch Themes has been released!

Simple, elegant and unique Shades of Chocolate and compatible with all Standard Shells. These 8 Themes  add a professional, business flavour to your application.

The theme pack contains the following 8 themes

• Easter Egg
• Dark Chocolate
• Chocolate Orange
• Mint Chocolate
• Milk Chocolate
• Chilli Chocolate
• Chocolate Lite
• Dark Chocolate Lite

Easter Egg Theme

Dark Chocolate Theme

Chocolate Orange Theme

Mint chocolate theme

Milk Chocolate Theme

Chilli Chocolate Theme

Chocolate Lite Theme

Dark Chocolate Lite theme

For more screen shots please go to the Xpert360 Theme Pack Gallery.

It is the first Theme Pack to be released by Xpert360 and can be downloaded from here.

The themes in the pack target the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. They have been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme pack can be obtained from the Xpert360 Product Page. This is the gallery posting – Xpert360Lightning – Chocolate Theme Pack[V2,V3,SL]

Spring Time Flowers Theme

Lightning Series – Spring Time Theme

This theme is based around  spring time flowers with vibrant shades of spring. It is the fifth in a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

Spring Flowers Theme

Validation error

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch. The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning – Spring Flowers Theme [V2,V3,SL] We hope you like it!

Chocolate Theme ready for Easter

Lightning Series – Easter Theme

This theme is based around Easter eggs and shades of chocolate, ready for Easter. It is the first of two Easter themes and the second in a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

Easter Theme with Validation error

Easter Theme calendar

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning – Easter Theme[V2,V3,SL]

We hope you like it!

Shamrock Theme ready for St Patrick’s Day

Lightning Series – Shamrock Theme

This theme is based around shamrocks and shades of green, ready for St  Patrick’s day. It is the first of a collection of free holiday and festive themes to be released by Xpert360 and can be downloaded from here.

Shamrock theme

The theme targets the LightSwitch Silverlight Client v2+ that comes with Visual Studio 2012. It has been tested against the LightSwitch Cosmopolitan Shell and the LightSwitch Standard Shell.

Shamrock Theme Extension

We have an internal application to import, edit and generate LightSwitch themes to make the work a lot easier and faster. The Cosmopolitan theme contains references to more than 500 colors! The Theme Generator application is itself written in LightSwitch.

LightSwitch Theme Generator

The theme is free and can be obtained from the Visual Studio Extensions gallery. This is the gallery posting – Xpert360Lightning – Shamrock Theme [V2,V3,SL]

We hope you like it!

Adventures with PivotViewer Part 6: Pimp it sample code

Light up your Silverlight skills with the all-new Global Silverlight Firestarter!

 

So let’s continue where the last post left off and finish the high-level pimping of the PivotViewer control…

If you want to follow along then you need to locate the PivotViewerSample code that shipped with the control. By default it is here for the August 2010 release:

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Aug10\Source\PivotViewerSampleXapCode.zip


In the previous post the sample code showed you how to hide the left side Filters Panel and the right side Info Panel. It showed you also how to alter the background to help brand the control’s appearance.

The original code was a bit raw so I have put together a small demo application that wraps the functionality up into the custom PivotViewer class override. The sample allows you to toggle the Visibility of the tiles as well as the filters and information panels.

The custom properties can simply be used as in this sample:

...
if (PivotViewer.TileVisibility == Visibility.Visible)
{
PivotViewer.TileVisibility = Visibility.Collapsed;
}
else
{
PivotViewer.TileVisibility = Visibility.Visible;
}


C# Sample: Hide/Show the collection tiles

And the background can be set to ImageBrush like this:

...
// Main tile view background - ImageBrush
StreamResourceInfo sr = Application.GetResourceStream(new Uri("PimpThePivotViewer;component/Resources/Island.jpg", UriKind.Relative));
BitmapImage bmp = new BitmapImage();
bmp.SetSource(sr.Stream);
PivotViewer.GridBackground = new ImageBrush() { ImageSource = bmp };
sr.Stream.Close();


C# Sample: ImageBrush

The sample has a button to toggle the background between:

SolidColorBrush = Colors.Black

SolidColorBrush = Colors.Transparent

RadialGradientBrush

LinearGradientBrush

ImageBrush

You can try out the sample Silverlight application here:
Pimp-the-PivotViewer

Here is the source code for you to play with, if you find it useful, let us know. We have extended the PivotViewer control in other ways to.

Pimp-the-PivotViewer source code ZIP.

PivotViewer Yoga Theme