Category Archives: Visual Studio

Section Expanders in LightSwitch HTML

Section Expanders in LightSwitch HTML

Section Expanders in LightSwitch HTML

Overview

Apps created with LightSwitch HTML client are mobile first as the UI is based on jQuery Mobile. This post introduces a way to organise form data with section expanders that are often found in desktop app scenarios.

Default Mobile First Style

In the mobile style of pages the data is typical displayed in one or two columns and related data is visualized in tab sections. Here is an example of a default View screen with details on the first tab and related information located on separate tabs.

Tab Sections in LightSwitch HTML

Tab Sections in LightSwitch HTML

In many ways the styling is a matter of taste and there are several ways of presenting larger volumes of information in common use. Using the in-built View Details Screen template the screen content layout looks like this:

View Details Screen Layout

View Details Screen Layout

The screen content is organized into parent tabs and the tab layout uses the Columns and Rows Layout controls.

Designing the Layout and Behaviour

In desktop application scenarios the answer to how to display large amounts of data fields has often been to use section expanders. Very often for line-of-business apps a combination of tabs, expanders and pop-ups is used to try and provide an optimal user experience.

If you want to give your LightSwitch apps a more Desktop UX feel there is nothing stopping you from implementing similar styles and behaviours.

The first step is to organise the screen content layout into sections. Each section will have a visible border box to group related information. The first header section in this example will be static. Subsequent sections will be expandable and will be displayed by default as collapsed.

Screen Content Layout for Expanders

Screen Content Layout for Expanders

The sections are marked up: Header, Attributes and Tracking

The expandable sections contain a custom control for the expander header and the rest of the section content is (Not Visible) to start. Let us take the first example above, with the layout hierarchy:

Expander Content Items Layout

Expander Content Items Layout

The section’s top Rows Layout will:

  • Handle _tap event to toggle the section details visibility

The section’s Custom Control will:

  • Render the expander header

The section details Rows Layout will:

  • Block _tap events from bubbling up to its parents
  • Display the section border box in _postRender

Implementing the Expander

Firstly we will attend to the rendering of the expander header:

Render Expander Header Custom Control

Render Expander Header Custom Control

I have set all the CSS attributes in the _render code here for directness. You should really use a custom CSS class. You can experiment with the CSS attributes for different visual impact. The sample variable _attributeExpanderHeader should be scoped to the screen. You could include icons as part of the visual feedback.

Then complete the visual changes by adding code to the section details group content item like this:

Expander Section Details

Expander Section Details

The CSS styles place a border box around the sections details. The Tap action is bound to showTab Details – this stops the tap event bubbling up.

Then finally on to the section’s top level group control to handle the tap event to expand and collapse the section details.

Toggle the Expander Section Visibility

Toggle the Expander Section Visibility

The toggle event flips the isVisible setting and handles the rendering of the bottom border of the expander hander. You could experiment with icons here.

Conclusion

With a little screen content layout design work, some CSS styles and a toggle event you can introduce section expanders to you control portfolio in LightSwitch TML client apps.

Tab Header Styling in LightSwitch HTML Apps

Tabs Style in LightSwitch HTML App

Tabs Style in LightSwitch HTML App

Overview

The default appearance of the tab headers in your Cloud Business Apps and LightSwitch HTML Apps can be customized to make them look more appealing and looking a lot more obvious to the end-users.

This post shows you which CSS classes and attributes to change to achieve tab headers that look like retro card index tabs.

Examples and Samples

This is the style of tab headers that we will show to create.

Rounded Corner Tabs Styling

Rounded Corner Tabs Styling

Some simply rounding of a corner can give a card index file type appearance.

Casrd Index File Style Tabs

Card Index File Style Tabs

The CSS styling customizations required can be made in one place that is then picked up by all screens and pop-up dialogs. Here is a similar styling in another app but with a more rounding to blend in with the apps style.

Round Tab Headers

Round Tab Headers in a Pop-up Dialog

You can see the visual impact readily. Clearly you can use any HTML5 CSS styling that you like once you have access to the classes and elements. The simplest way to do this is to override some of the CSS styling by editing the ‘user-customization.css‘ file located in the HTML Client ‘Content‘ folder.

user-customization.css in solution explorer

user-customization.css in solution explorer

At the top of this file you can add a section to change the styling of your project’s tab headers. Here is the first example:

msls-screen-tab css class

msls-screen-tab css class

The CSS classes involved are:

  • msls-screen-tab
  • msls-screen-tab-active
  • ui-btn-inner

In this case the border-top-right-radius is setting the rounding effect. The CSS attributes needed will vary based on the complexity of your apps style sheets. In this example the existing style sheets have no border rounding.

In the second sample, where the app’s border styling is already rounded, a few more attributes need to be overridden for the full effect.

msls-screen-tab complete border rounding

msls-screen-tab complete border rounding

In this case the border top left radius continues to be inherited from the main style sheet and so matches the apps other visual elements, such as buttons. The top right border is given more rounding to extenuate the visual effect of a card index header. To finish the look, the apps default rounded styling is overridden in the bottom border corners.

You can experiment with other attributes from font properties to background effects.

Conclusion

A simple way to add a bit of card index style to your tab headers. Not all Cloud Business Apps and LightSwitch HTML Apps need to look the same.

Visual Studio 2015 and LocalDB instance for LightSwitch

Purpose

With Visual Studio 2015 RTM the database tooling has changed. How LightSwitch uses LocalDB has changed too. Remember the issue with VS2013 and LightSwitch SQL Server Project references being blank? Let us take a look and see what changed in this area and determine if LightSwitch and SQL Database Projects work better together.

Background

How and why have things changed with LocalDB? I will refer to this Microsoft Connect feedback from 2014:

SQL Server 2014 Express LocalDB does not create automatic instance v12.0

In SQL14, we moved away from the numbering/versioning for the automatic instance and named itMSSQLLocalDBinstead of “v12.0”. The name of the automatic instance in the SQL14 documentation for LocalDB at http://msdn.microsoft.com/en-us/library/hh510202(v=sql.120).aspx has been fixed. If you require an instance to be named “v12.0”, you can create a named instance with that name.
Thanks & Regards, Pooja Harjani, Sr. Program Manager, SQL Server, Microsoft.”

A SQL 2014’s Local DB sample connection string looks like this:

Data Source=(localdb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\mydb.mdf;Initial Catalog=mydb;Integrated Security=True;MultipleActiveResultSets=True

How this surfaces in LightSwitch

So, the name for the automatic instance is MSSQLLocalDB. This is the instance that LightSwitch in Visual Studio 2015 now uses to create intrinsic databases for projects.

Here is a screenshot of the SQL Server Object Explorer window in VS2015 showing two intrinsic databases underlying LightSwitch projects:

LightSwitch LocalDB use in Visual Studio 2015

LightSwitch LocalDB use in Visual Studio 2015

The ‘UserVoice‘ test project was created using VS2015 RC and is uppercase. The LightSwitch test project ‘ResearchDatabaseApp‘ was created using VS2015 RTM. This is where we can find our development time intrinsic databases.

Refer to SQL Server Data Tools RTM update for July 2015 blog post for final details with respect to Visual Studio 2015 RTM.

LightSwitch and SQL Database Projects

Next, I created a new SQL Database Project called ‘ResearchDatabase‘ in the same solution as the LightSwitch ‘ResearchDatabaseApp‘ project. Here is a screenshot showing the default target platform as SQL Server 2014.

LightSwitch-ResearchDatabase-project

Then moving to the LightSwitch project properties straight away we see:

LightSwitch SQL Database Project reference working in Visual Studio 2015

LightSwitch SQL Database Project reference working in Visual Studio 2015

The new project shows up immediately in the LightSwitch project properties. You can write scripts to manage the intrinsic database whenever you build or deploy the LightSwitch application. With post-deployment scripts, you can populate data, enhance the schema or add an index. Refer to the MSDN LightSwitch documentation for details: Managing the Intrinsic Database for LightSwitch.

Summary

So with Visual Studio 2015 and new LightSwitch projects the linking to SQL Database Projects is back working as it should! Another sign of continuing maintenance support for LightSwitch.

Visual Studio 2015 Launch – AIDE for LightSwitch sim-ships

We are happy to announce that a new release of AIDE for LightSwitch will sim-ship with VS2015 RTM. Xpert360 are Microsoft Partners in the VSIP program. We have committed to support VS2015 RTM within 30 days of release across all Visual Studio paid and free offerings.

AIDE Studio for LightSwitch

AIDE Studio for LightSwitch

With this refresh, all our LightSwitch desktop themes and theme packs are free for run-time use. The vNext AIDE will be made available as AIDE Studio 2015 with free-use Community and paid Enterprise editions. No more trial editions, a simplification in the licensing and packaging, fully integrated with Visual Studio Gallery for discovery and upgrades. Watch out for more announcements and materials in the coming weeks.

Today , Monday 20th July 2015 and it is time for the final release of Visual Studio 2015. The keynote starts at 08:30AM PST (UTC -7) so set your reminders

15:30 GMT/UTC  16:30 BST  11:30 EST  08:30 PST

The event includes 4 hours of live streaming of sessions via channel9 and 20 or so pre-recorded video sessions.

Live Visual Studio 2015 Final Release Event via Channel9 @ch9

The live streaming will give a great overview of getting started with Visual Studio 2015 , .NET 4.6 and Visual Studio Online. Packed with demo’s showing improved productivity, cross-platform development and new opportunities.

It is anticipated that the Visual Studio 2015 RTM will be announced as available to download. The VS2015 pre-RTM release has been with the Xpert360 Development Team for some time as we test and build the latest releases of our tools ready to Sim-Ship as a member of the Visual Studio Industry Partner program (VSIP).

The editions of Visual Studio 2015 available is different from previous release and you can compare the editions here. In our eyes the key change is availability of the Community edition continuing with support for LightSwitch and extensions available from the Visual Studio Gallery. This considerably expands the reach of the Visual Studio platform.

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 Studio for LightSwitch” are trademarks of Xpert360 Ltd, copyright 2012 – 2015.

VS2013 LightSwitch HTML Themes – Headers

LightSwitch HTML Theme Headers

New Screens in Office Azure Dark Theme

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.

Menu

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 drag and drop

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

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.

VS2013 LightSwitch Jsproj Unsupported Incompatible and could not be loaded

Corrupt Visual Studio 2013 Environment?

The other day whilst testing AIDE for Visual Studio 2013 I came across this problem. At first I thought it was something similar to another VS2010/Vs2012 .LSPROJ launcher problem (Error: this template attempted to load component assembly) but that turned out not to be the case.

Unable to open the following projects: *.jsproj

Unable to open the following projects: *.jsproj

I tried not to panic as my plans for the day started to fall apart. It was most peculiar. Repairing VS2013 crossed my mind but you don’t embark on that route unless you are really have no other option and it has no guarantee of fixing your problem. I had three VS2013 instances running LightSwitch projects with HTML client and they continued to work fine. Try to open another LightSwitch project, #fail. What next? Close one Vs2013 instance, then restart and load the project, #fail. Close everything, reboot, open VS2013 project fail!

Copy project to another machine, open, #success! So as expected projects are ok and not corrupt.

Try something crazy? Debug VS2012 AIDE project running VS2013 experimental instance, load LightSwitch project, #success!

So experimental instance good, standard development instance bad.

ooo

Let us walk through the scenario of what happened for me and how to resolve the problems. To reproduce, try opening three LightSwitch projects within a few seconds one after another. This multi-tasking and multi-threading Visual Studio 2013 start-up just does not work well and the best advice is don’t do it. This likely applies to two or more solutions containing other project types, it is just that I was using LightSwitch projects.

Package did not load correctly!

Package did not load correctly!

The ‘Microsoft.VisualStudio.ProjectSystem.VS.Implementation.Package.ProjectPackage, Microsoft.VisualStudio.ProjectSystem.VS.Implementation, Version=12.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a’ package did not load correctly.

The problem may have been caused by a configuration change or by the installation of another extension. You can get more information by examining the file ‘…VisualStudio\12.0\ActivityLog.xml’.

This generic message turns out to not be very helpful. Then when you try to open a LightSwitch project:

Failed to load

Project could not be loaded because one or more projects it references failed to load.

This looks like this in solution explorer:

Solution explorer HTML client project incompatible

Solution explorer HTML client project incompatible

The problem stemmed from file contention when more than one Visual Studio instance is loading. Fortunately, the issue can be resolved by encouraging Visual Studio to rebuild its component cache.

Microsoft.VisualStudio.Default.cache

Microsoft.VisualStudio.Default.cache

Locate the ‘Microsoft.VisualStudio.Default.cache’ file in ‘ComponentModelCache’ directory and delete it. Restart one instance of Visual Studio 2013 and it rebuilds the cache and all is well. It is worth noting that there are other details cached here, such as SharePoint and LightSwitch ManifestCache files. You can safely clear out these files too should they ever cause similar Visual Studio environment issues.

I wish I had known about this back when using Visual Studio 2012 lots and resorting to ‘Repair’ several times.

ooo

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 and import/export screens! Local backup/restore and much more. 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.

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.