LightSwitch Extensions Made Easy VS2012

Lightswitch Extensions Made Easy by Jan Van der Haegen addresses some of the major pain points in developing LightSwitch Extensions. This extension tightens the edit-debug cycle. If you are in the business of developing shells, you owe a closer look at what Jan has done and use it in your workflow. It is a brilliant implementation.

Prerequisites

  1. Microsoft Visual Studio Premium
  2. Microsoft Visual Studio SDK (install via Tools/Extensions and Updates)
  3. Microsoft Lightswitch Extensions (install via Tools/Extensions and Updates)

Step 1: Installing the extension

The Lightswitch Extensions Made Easy provides a prebuilt extension that will load your custom classes via MEF. This means for most time, you will only need to build your dll, and not having to rebuild and reinstall an extension each time.

In Visual Studio 2012, under the Tools menu, select Extensions and Updates then in the Online category, search for “Lightswitch Extensions Made Easy”

ls-01

Step 2: Enabling the extension in your Lightswitch project

Select the Lightswitch project, and in the Properties context menu, enable the Lightswitch Extensions Made Easy project.

ls-02

Step 3: Set the shell

In the General Properties tab, select Edit Client Properties. Then set the Shell and Theme to “EasyShell” and “EasyTheme

ls-03

Step 4: Switch to File View in Solution Explorer

If you are a seasoned visual studio developer, you are probably wondering where are your normal project files. LightSwitch has hidden these away. This can be enabled in the Solution Explorer (see diagram).

ls-04

Step 5: Create a Lightswitch Extensions Project

Open an existing Lightswitch project, create your new Lightswitch Extensions Project and add it to your existing solution. This adds seven projects. Don’t get worried as you need to be only concerned with the Lspkg one:

  1. LightSwitchExtension1.Client
  2. LightSwitchExtension1.Client.Design
  3. LightSwitchExtension1.Common
  4. LightSwitchExtension1.Design
  5. LightSwitchExtension1.Lspkg
  6. LightSwitchExtension1.Server
  7. LightSwitchExtension1.Vsix

Step 6: Add a Shell item

Select the LightSwitchExtension1.Lspkg project, and Add New Item. Select “Shell”. This will add a shell xaml to your LightSwitchExtension1.Client project.

Step 7: Set the shell’s access to public

Change the shell’s access modifier from internal to public. This will enable EasyShell to load your code.

namespace LightSwitchExtension1.Presentation.Shells.Components
{
    [Export(typeof(IShell))]
    [Shell(DockableShell.ShellId)]
    <del>internal</del> public class DockableShell : IShell
    {
    }

Step 8: Reference the LightswitchExtension1.Client project

In the Lightswitch project, add a reference to the LightswitchExtension1.Client project.

Add an EasyShellExporter class to the Lightswitch project’s Client subproject

namespace LightswitchTest
{
    using ExtensionsMadeEasy.ClientAPI.Shell;
    using LightSwitchExtension1.Presentation.Shells.Components;
    
    public class DockableShellExporter: EasyShellExporter<DockableShell>
    {

    }
}

Step 9: Design the shell

Refer to MSDN’s Creating Shell Extension Walkthrough. In particular, look at the second listing at Define a Shell.

In particular, you should observe that the sample shell contains the following items:

<ListBox x:Name="CommandPanel" 
  ShellHelpers:ComponentViewModelService.ViewModelName="Default.CommandsViewModel"
  ItemsSource="{Binding ShellCommands}" />

<controls:TreeView x:Name="ScreenTree"
   ShellHelpers:ComponentViewModelService.ViewModelName="Default.NavigationViewModel"
   ItemsSource="{Binding NavigationItems}" />

<!-- The individual TabItem         -->
<!-- controls are created in code.  -->
<controls:TabControl x:Name="ScreenArea" />