VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Theme Headers

New Screens in Office Azure Dark Theme

Some sample screens with standard jQuery header formatting.

Headers, Footers and Toolbars

Here is a LightSwitch HTML client screen sporting the default light theme.

Auto-Tile Menu Default Light theme

Then here is a HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support. The LightSwitch implementation does not use the JQuery Mobile header classes by default.

LightSwitch HTML Client Orchard theme drag and drop list items

The default Microsoft LightSwitch msls-dark-2.0.0.css and msls-light-2.0.0.css style sheets have a definition to override the msls-header.ui-bar background style and set it to ‘inherit‘ from the body color.

msls-header.ui-bar background styles

To make the header bar styled as expected comment out the line:

background: inherit;

The header bar colour will then be set by your jQuery Mobile theme and swatch.

See this blog article for the menu template: LightSwitch HTML Screen Template – Auto-Tile Menu

See this blog article for sample themes: jQuery Mobile Themes suitable for LightSwitch Apps

Conclusions

We take you through all the shortcuts and tweaks to give style to your LightSwitch HTML applications and Cloud Business Apps! This article shows how to tweak the header bar style.

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.

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.

Guide to VS2013 LightSwitch HTML Themes

Guide to VS2013 LightSwitch HTML Client Themes

LightSwitch HTML Themes, tweaks and Tools

Visual Studio 2013 was published on Friday 18th October 2013. This blog post is the anchor to a series of articles covering the A-Z of themes that we are editing and evolving over time.

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

The LightSwitch HTML Client in VS2013 targets the jQuery Mobile framework and the themes are implemented as Cascading Style Sheets (CSS).

Headers, Footers and Toolbars

Here is a HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support. The LightSwitch implementation does not use the JQuery Mobile header classes by default. See this post:

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Client Orchard theme drag and drop list items

Selection List and Options

The HTML SELECT element is not easy to style and control through just CSS markup. For full control it is usual to use a custom control that mimics the SELECT element by using DIV’s and SPAN’s.

Styled LightSwitch HTML Choice List

The SELECT element popup is implemented outside of the browser. The blue selection rectangle is not controllable in CSS and by default your themes will always be black, white and blue. We will extend the theme mark-up to do better styling in LightSwitch as in the above screen shot.

Rounded Corners

The use of rounded corners in themes can be aesthetically pleasing. The LightSwitch themes need extending to properly support them.

Clipped text and rounded corners

The screen shots above show the adjusted rounded corner support.

Previewing LightSwitch Themes

We have an easy implementation of theme swapping and view port selection for different form factors.

Swatches

What are they and how can they be used in LightSwitch HTML applications.

Cloud Business Apps and Site Chrome

Creating dynamic themes and features to integrate with SharePoint and site chrome.

Mega-Theme Pack

It would not be complete without a theme starter pack. The preview containing 19 themes was released soon after the VS2013 in December 2013 and is currently available in a bumper bundle offer of AIDE 2013 for Visual Studio which also include a preview of 4 new Advanced Screen Templates.

The themes target jQuery Mobile and are not specific to LightSwitch. They are integrated into the Visual Studio IDE as new JavaScript Item Templates with supporting short descriptions and preview images. This extension supports VS2012 and VS2013. The themes are widely used in our other blog articles.

See this blog article: LightSwitch HTML Screen Template – Auto-Tile Menu

See this blog article: jQuery Mobile Themes suitable for LightSwitch Apps

Conclusions

The Visual Studio 2013 RTM was released in late 2013 and Xpert360 joined the party upgrading samples, themes, extensions and tools to support VS2013. We will take you through all the shortcuts and tweaks to give style to your LightSwitch HTML applications and Cloud Business Apps!

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.

News on Software Previews for Visual Studio 2013 LightSwitch

Preparations for the Launch of VS2013

When Visual Studio 2013 RTW is published (scheduled for Friday 18th October 2013), it will trigger a round of regression testing and final adjustments for third-party Visual Studio tool vendors.

Somasegar’s blog article announcing Visual Studio 2013 RC contains a good overview of key features if you are playing catch-up. At the end he mentions the official VS2013 Launch Party is scheduled for Wednesday 13th November 2013. You can see the countdown to launch ticking down there.

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

Our product team is making steady progress towards releasing all our LightSwitch tools and extensions in the same timeframe as VS2013.

We needed to try some new VS2013 features and work through implementing some new features in AIDE for LightSwitch and the Xpert360 Lightning Dynamics CRM and Salesforce data adapters. We also needed to upgrade samples, themes and other extensions.

Working with multiple versions of Visual Studio side-by-side has gotten a lot easier over the years. We have machines with VS2012, VS2012 and VS2013 RC.

In this instance we needed to debug VS2012 VSIX extensions in the VS2013 RC experimental instance while testing LightSwitch VS2013  applications. Fortunately this works after a few adjustments to debug and VSIX settings.

VS2012 VS2013 LightSwitch family photo!

So here we have AIDE for LightSwitch running in debug in VS2012 Update 3 launching the VS2013 RC experimental instance then running a LightSwitch desktop application. We thought it was quite cool anyway.

Our LightSwitch Silverlight themes worked nicely with VS2013 Preview but not so with VS2013 RC. Our HTML CSS themes needed some work as the leap from VS2012 to VS2013 RC involved big changes in the LightSwitch HTML Client.

LightSwitch HTML Mobile Salesforce app in Office 365

We can see that not surprising some of the styling changed but here is a VS22013 RC LightSwitch HTML Client application deployed in Office 365 SharePoint on-line. The JQuery Mobile CSS theme was inspired by VS2012 IDE and sports rounded corners (no big deal really). The other interesting item here is the preview version of the soon to be released LightSwitch salesforce data adapter running in the Cloud.

Here is another HTML client application with a theme called ‘Orchard’. Notice the correct rendering of the header after adjusting msls-light-2.0.0.css and msls-2.0.0.js for swatch support.

LightSwitch HTML Client Orchard theme drag and drop list items

We are adding final touches to the first release of AIDE for LightSwitch for VS2013.

AIDE for LightSwitch Exchange Hub in VS2013 RC

There was more work to do for the Exchange Hub and Clone Screen due to the LightSwitch LSML structural changes. The LightSwitch Explorer is working well here:

AIDE for LightSwitch Explorer in VS2013 RC

The LightSwitch Screen Workbench and Entity Workbench windows are complete too.

AIDE for LightSwitch Entity Workbench – Related items/screens

Xpert360 are providing a free upgrade to the new version of AIDE for LightSwitch for all existing customers.

The facility to exchange screens between LightSwitch projects (V1, V2, V3 and V4 projects with a few restrictions) is predicted to be a great help for those users upgrading LightSwitch 2010 and LightSwitch 2012 projects to VS2013.

When upgrades fail, projects become unloadable, extensions are outdated, AIDE for LightSwitch will be there to help you through! Our consultants and support staff have real-world experience of tricky LightSwitch project upgrades, including reconstruction and resurrection of corrupt projects. Contact us if your need help troubleshooting.

The next Vs2013 update on the blog will be for the VS2013 RTW release next week. We will have final news of all the upgrades and confirmation of release dates shortly afterwards.

Conclusions

The Visual Studio 2013 RTW date and official virtual launch day are fast approaching. Xpert360 have been busy upgrading samples, themes, extensions and tools ready for VS2013. It is going really well and we eagerly await the launch!

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.

Something you should know about LightSwitch Screens – Part 1

Hidden secrets of LightSwitch Screen Contents!

So you think you know your screens, what is the point of this post? No, seriously, look again real close. Notice anything… odd, out of place, you should. Test your powers of observation and be more inquisitive. Do you have a LightSwitch Rich Client application? If so you had better read on…

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications. Brought to you by the original and genuine Power Tools for Visual Studio LightSwitch!

Let us start by looking at a Contoso based LightSwitch application. Here it is looking rather fetching in its Jetpack-style theme.

Contoso Home Screen – Jetpack Theme

Could this simple screen be hiding any secrets? You would think not. Hats off to you if you do know the hidden secret behind this home screen. Here it is again in screen designer.

Design view of Contoso Home Screen

Look closer. No, the secret is not the globalised labels. In fact we cannot see the hidden secret in the above screen shot. We need to take a different view.

LightSwitch Screen Workbench -Contoso Home Screen Content

If you use AIDE for LightSwitch Explorer or Screen Workbench you can obtain a list of the screen contents. In the above example I have exported the list to Excel and marked up the content for easier viewing.

Look closely at the screen content items and match them up with the designer view. Hidden underneath the RowTemplate item we have 15 other items that correspond to the properties of the Appointment entity.

These screen items are expected, they seem kind of plausible, they are necessary to the functioning of the screen. Is any of this statement correct? Err… No! Take a look at this modified set of screen contents taken from AIDE Screen Workbench.

Contoso Home Screen Content Optimised

With these screen contents the resulting Home screen appearance is the same as before. Really it is, it works fine. It did not need the hidden items. I use the LightSwitch Exchange Hub for quick backup and restore and in this case it shows the real size difference in the Home screen metadata.

Exchange Hub Home Screen change detectedand backed-up

Then looking at the before and after Home screen metadata backup-ups.

Backup Home Screen metadata size

So this simple Home screen’s metadata has shrunk from 19KB to 11KB. You may be asking yourself, did I edit the Client.lsml file, well did I?

Until next time…

[continue to Part #2]

ooo

Try them and support your LightSwitch tooling ISVs.

Also, do participate in forums and vote on your desired AIDE features. Help us to help you by prioritising the features in the product roadmap. VS2013, check! Export/Import entities and settings, check! Do you want to shape data to exclude columns? How about a localization workbench? Optimization workbench? Update metadata in bulk? That is a flavour of a few forthcoming features and ideas, we always keep a few things secret to surprise you!

ooo

Company information: Xpert360 Ltd, founded in 2009, 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 2013.

Backup – AIDE for LightSwitch Exchange Hub

This article is part of a series of posts from Xpert360 Development Team to address real world scenarios and problems faced when designing, creating and implementing Visual Studio LightSwitch applications.

Exchange Hub in Xpert360 Lightning AIDE V1.1 Release

The original and genuine Power Tools for Visual Studio LightSwitch!

The Exchange Hub is a feature new to AIDE for LightSwitch V1.1. This release of the power tools is being packaged as I write. The upgrade is free to existing users who will be contacted in the coming days. The next version targets VS2013 and we are pleased to announce that our loyal customers will also receive this at no additional cost (subject to license purchased by end of September 2013). In this post we will demonstrate the features and usage of backup.

AIDE for LightSwitch is supplied as a signed Visual Studio Extension. The AIDE software is integrated into the Visual Studio IDE as standard and familiar dockable windows. It now supports VS2012 themes: light, dark and blue.

New AIDE for LightSwitch Menu

All the AIDE windows including the Exchange Hub can be accessed from the ‘Tools’ menu (also from ‘View’ menu ‘Other Windows’ by default).

Upon first launch you will need to dock the Exchange Hub window in a suitable location in the Visual Studio IDE.

Using AIDE to detect screen changes

The Backup tab manages screen backups and detects modifications made since the last backup. To take a backup you simply need to select all items using the top checkbox and click on Backup. The Exchange Hub looks after all the behind the scenes work and only backs up screens that have been modified. It skips past screens not changed since the last backup.

Exchange Hub backup run – dark theme

The backup runs are very fast and take less than a second for this Contoso application. In this screen shot, the Exchange Hub detected changes to the screens highlighted in green and backed them up. I popped-up the VS2012 output pane so that you can see the logged details of the backup. Information is  logged here from all corners of AIDE for LightSwitch.

Screen backups are stored one per file, very similar to the new metadata storage structure coming in Visual Studio 2013.

The in-built Restore feature allows for screens to be modified and rolled-back if you want to discard changes made since the last backup. The Exchange Hub does keep multiple backups.

Under the covers here is the additional folder structure automatically created and managed by the Exchange Hub.

Backup folder structure

You don’t need to look here in normal day-to-day usage. The ‘_AIDE‘ folder stores all the files necessary. There are further sub-folders, ‘_Client‘ and ‘_HTMLClient‘, one for each LightSwitch client, that hold backup files.

The source code control folders can be added to TFS or similar to track changes to individual screens, not the larger full ‘Client.lsml‘ metadata file. This is unique to VS2012. The ‘Export‘ folder is the default location for the Export and Import features that will be demonstrated in later blog articles.

Try them and support your LightSwitch tooling ISVs.

Also, do participate in forums and vote on your desired AIDE features. Help us to help you by prioritising the features in the product roadmap. VS2013, check! Export/Import entities and settings, check! Do you want to shape data to exclude columns? How about a localization workbench? Optimization workbench? Update metadata in bulk? That is a flavour of a few forthcoming features and ideas, we always keep a few things secret to surprise you!

ooo

Company information: Xpert360 Ltd, founded in 2009, is an Independent Software Vendor and Custom Solution Provider base in the UK.

“Xpert360 Lightning” and “AIDE for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2013.

Second Look at LightSwitch in VS2013 Preview

More Impressions OF LightSwitch

And Visual Studio 2013 Preview

This week has been very busy for most people involved with Microsoft technologies as the BUILD 2013 ( #BLDWIN ) and TechEd 2013 draw to a close.

Our teams have been busy evaluating and testing. As most activities have been successful and gratifyingly trouble free, some more feedback is available for LightSwitch V4 Preview and Visual Studio Extensions.

Xpert360 Lightning Series in VS2013 Preview

Above is a screen of a preview of the AIDE power tool running in Visual Studio 2013, an upgraded LightSwitch Rich-Client (V2 > V4) application, our LightSwitch Theme Generator tool, and four of our LightSwitch extensions migrated to VS2013.

For extensions the targeted version range in the manifest needed to include the internal version number ‘12.0’. So now the range is ‘[11.0, 12.0]’ in the manifests. The Dynamics adapter is slightly different as it is built in VS2010 so targets ‘VSLS’ and ‘10.0’ as well.

The LightSwitch theme packs worked straight away but the other extensions required some additional changes and testing.

Xpert360 Office Theme Pack Install for LightSwitch

The ThemeGen application is what we use internally to edit and validate LightSwitch themes for Rich-Client/Desktop/Silverlight clients. When dealing with the 600+ colors in the Cosmopolitan styles it is a big time saver.

In an unusual take on ‘eat-your-own-dog-food’ style, the upgraded ThemeGen is sporting themes from our VS2013 preview of Office Theme Pack, that was created using its self. For anyone new to LightSwitch, yes these are real screens of a real LightSwitch app delivered in true RAD-fashion.

VS2013 LightSwitch app in VS2012 Color Theme

VS2013 LightSwitch app in Dark Blue theme

The theme pack contains a total of eight themes.

Office Themes in VS2013 LightSwitch

Our remaining themes, theme packs, extensions and samples are in the queue to be upgraded and should be available over the coming weeks.

Conclusions

We have successfully upgraded some LightSwitch applications (Rich-Client and Mobile-Client) from V2 to V4 and V3 to V4.

Apart from the issues already noted by bloggers and the LightSwitch team, the process has been relatively smooth to-date.

We are running VS2012 Update 3 and VS2013 Preview side-by-side on Windows 7 and Windows 8 OS platforms.

We are in the process of upgrading Visual Studio extensions to VS2013 Preview and this process is also going well.

Good job all around!

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

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]