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.

Advertisement

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.

Lightning Series for Salesforce CRM released

Xpert360 Lightning Series for Salesforce released!

This week saw the release of the next Lightning Series product aimed at bringing together Microsoft Visual Studio LightSwitch with Salesforce. We are expecting to see a surge in uptake of LightSwitch as VS11 beta approaches release. Add to that Office365, the rollout of Windows 8 and the next version of Visual Studio. The Lightning Series products will be addressing the integration and productivity needs of this market space bringing together disparate data from Microsoft Dynamics CRM online/on-premise, Salesforce, Zendesk, HubSpot, Nimble, Office365 and more…

The products are professionally developed commercial software with support contracts available. The difference is the commitment of Xpert360 to deliver FREE product licenses for everyone. This policy will continue provided that there is enough interest from the communities and enough revenue is raised from add-on work and custom versions for Enterprise use. The more people use the Lightning Series products, the better they will get and everyone will benefit.

We develop and use code generation technology rather than purely develop the actual products themselves. This helps us to drive down development costs and is allowing us to transition these activites to the cloud and SaaS over the next year.

The next release of the Salesforce adapter is expected by the end of June 2012 and there is still time for user feedback into the release program.

The next Lightning Series LightSwitch Data Source to be released will support zendesk. We decided that because we are using it ourselves. After that we will be looking for feedback to gauge the demand to prioritize the release other data adapters for the likes of HubSpot, nimble and Office365. The series will soon include other custom controls and very importantly, Enterprise-class productivity tools aimed at LightSwitch to make the platform irresistible.

For more information visit the Xpert360 Support and Forums and follow this blog to see how the story unfolds.

• Further details: XPERT360 LIGHTNING SERIES
• Getting started: QUICK START GUIDES
• Working with Salesforce and Dynamics CRM in VS11
• Using Salesforce and Dynamics CRM with LightSwitch
• Visual Studio Gallery: View and Download

Visual Studio Gallery – Xpert360 Lightning Series for Salesforce

Visual Studio Gallery entry

Working with SalesForce and Dynamics CRM data in Visual Studio 11 Beta

Microsoft Visual Studio 11 beta and Windows 8 Consumer Previews were made available on Feb 29th 2012. They will be valid through to June 2012.

The Xpert360 development team took the beta for a spin with the latest versions of the Xpert360 Lightning Series product builds: WCF Ria Service data source extensions for LightSwitch and .NET 4 that connect to salesforce and Dynamics CRM Online instances.

VS11 Beta Premium Applying: LightSwitch Beta Core

After the VS11 install a quick rebuild of the data extensions VSIX in VS2010 pulled in the latest software versioning as shown below:

Clip for LightSwitch Data Extension vsixmanifest

The new VSIX files now prompt for the version of Visual Studio if not already installed and within ten minutes of the VS11 install we are building our first Visual Studio LightSwitch 11 application to interact with our CRM test systems.

LightSwitch project templates in VS11 Beta

Then we create new data connections with the Xpert360 Lightning Data Extensions.

LightSwitch designer - Choose a WCF Ria Service!

… and we move on and choose some of the CRM entities exposed by the service.

LightSwitch designer - Select Data Source Objects from Dynamics CRM Online

The chosen entities appear against the data source in the LightSwitch designer and can be explored and manipulated as usual. Notice the automatically available entity relationships between the salesforce entities.

LightSwitch designer - SalesForce Opportunity Entity with chosen subset fo relationships

A few more clicks to build a list detail screen…

LightSwitch designer - Xpert360 Lightning Data Extensions

Ten minutes later we have our first CRM data from salesforce and Dynamics CRM Online.

LightSwitch - SalesForce Opportunities List Details at your disposal

Looking around in the VS11 IDE the default theme has faded to grey, perhaps its vying for an Oscar with “The Artist”. Here are the two LightSwitch project views available in solution explorer:

LightSwitch designer - Logical and File views

If you are embarking on custom UI controls with Silverlight 5 then here are the available project templates in VS11:

VS11 Beta Silverlight project templates

We are also eagerly awaiting the VS11 LightSwitch Extensibility Toolkit which has been indicated to be ready in a few weeks by Beth Massi:

• Visual Studio LightSwitch Team Blog

The Xpert360 Lightning Series data extensions will unleash the true power of LightSwitch onto your salesforce CRM and Dynamics CRM Online data very soon. They are currently undergoing private beta testing which will now be extended to include the VS11 Beta as this platfrom has a go-live license.

If you somehow missed all the anouncements here are the links:

• Announcing LightSwitch in Visual Studio 11 Beta! – LS Team blog
• Welcome to the Beta of VS11 and .NET 4.5 – Jason Zanders Weblog
• Visual Studio 11 Beta downloads – Microsoft Visual Studio

Any feedback or enquiries welcome at mailto:info@xpert360.com