How to create my own shell for LightSwitch 2011

In this article we shall discuss about how to create shell extension for LightSwitch 2011.


Prologue:

In this article we shall discuss about how to create shell extension for LightSwitch 2011. In my previous article we discussed about the way to setup the atmosphere for creating extensions for LightSwitch 2011.

What is LightSwitch shell?

The shell for a Visual Studio LightSwitch 2011 application enables users to interact with the application. It manifests the navigable items, running screens, associated commands, current user information, and other useful information that are part of the shell's domain.

While LightSwitch provides a straightforward and powerful shell, you can create your own shell that provides your own creative means for interacting with the various parts of the LightSwitch application.

Main three parts of LightSwitch shell

There are three main parts in LightSwitch shell,

  1. The Managed Extensibility Framework (MEF), which is responsible for shell contract.
  2. The Extensible Application Markup Language (XAML), which describes the controls that are used for the shell UI.
  3. The Code behind of the XAML, which implements the behavior of the controls and interacts with the LightSwitch run time.

So let create a demo LightSwitch shell which simply displays a message in a screen.

Preparing the solution

Before getting started, we need to verify that whether we are having all the prerequisites installed. Please read my previous article.   Please follow the installation instructions for installing extensibility tool kit.

Startup the visual studio LightSwitch 2011; create an extension project called "HowToCreateExtensionForLS" as shown in the below figure.

d1.gif

Once we have installed all prerequisites, then we will get the Extension library project type and follow the figure.

The project which we created just now will have some project templates as shown in the figure.

d2.gif

Here,

  1. The .Vsix project packages the generated .Lspkg file into a .Vsix package so that it can be added to LightSwitch through the Extension Manager.
  2. The .Lspkg project packages the previous five projects so that LightSwitch can unpack and reference them when the package is installed.
  3. The .Common project will have Meta data about shell which we are going to create.
  4. The .Client project will have the Xaml files for the shell.

Creating shell file

            To create a shell file, follow steps shown in the figure below.

d3.gif

Here,

  1. Select the .Lspkg project.
  2. Click on add option in the popup menu.
  3. Select New Item option.

It will display a window as shown in the below figure.

d4.gif

Form this window, we need to select shell template as highlighted in the above figure and give name as SampleShell.

Once we created a shell, then the some files will be created in .Common and .Client project.

d5.gif

Here,

  1. When we created the shell template file in .Lspkg project, it will create the folder "Presentation" and "Shells". Then the shell file will be moved to "Shells" folder.
  2. The SampleShell.lsml will have the Meta data about the shell.

Designing the Shell

Simply design the shell as shown in the below figure.

d6.gif

This shell will simply display the message "This is my Sample Shell Extension for LightSwitch".

Now our LightSwitch shell is ready.

Just build the project.

d7.gif

As shown in the above figure, we will be getting a link to VSIX file which is installable file for our extension. Just go to the path displayed in the output screen or simple press control key and the link it will navigate to the VSIX file path.

Installing shell extension

Double click on the VSIX extension install file. The install window will appear.

d8.gif

If installation is successful then we will be getting a window saying that installation is successful.

d9.gif

Now create a new LightSwitch Application [not extension library] called ShellTest.

d10.gif

Go to the project properties window.

  1. Select the Extensions tab.
  2. In the extensions part, it will list the all extensions installed. Just select our sample extension and deselect the first shell extensions. It's important to deselect the Microsoft extension.


d11.gif

Now,

  1. Select the general properties tab.
  2. Select the SampleShell which we have created.

Save the changes and simple run the project. Press F5

Application in Action 

d12.gif
          

This is the shell which we have created.

Summary:

In this article, we have seen about how to create shell extension for Visual Studio LightSwitch 2011 using Visual Studio LightSwitch 2011 extensibility tool kit.

Thanks for spending your precious time here. Please provide your valuable feedbacks and comments, which make me to give a better article next time.