Extensions made easy: Debugging your custom LightSwitch extension

On July 27th, I started my little-o-blog with a post on how to debug your custom extensions.  A colleague and good friend of mine actually convinced me to post the trick of adding an after-build command asap, because if I didn’t and someone else did, I would never be “the guy that made debugging easy”, just “the guy that wrote yet another blog post on debugging LightSwitch extensions”.  So I did.  And shortly after that, I found another blog worthy subject.  Before I knew it, 42 days passed and I find myself addicted to learning LightSwitch more than ever.

One of the tricks I learned, is that there is an ever simpler way to debug your shell or theme extension, and here it is: my 5 easy steps to debugging…

  1. Create a new extension (shell or theme are supported at the moment…).  Most likely, you already created one and are having trouble debugging it, what brought you to this post…
  2. Create a new LightSwitch project where you can test your extension.  Do not install your extension in the test application, it can lead to breakpoints not being hit.  However, right-click on your solution folder, and select Add existing, then select the client project from your extension.  To complete the solution setup, select your LightSwitch application in the solution explorer, and flip to file view.  Select the LightSwitch applications client project, right-click and add a project reference  to the extension’s client project you have just created.
  3. Download and activate the ExtensionsMadeEasy extension.  Once again, you most likely already downloaded it before because it’s small, simple and sexy, so you just need to activate it in your LightSwitch project. ;-)
  4. Export your shizzle to my shizzle.
  5. Add the Extensions.Client project to your solution
  6. Press F5 –  Look Mon, I’m debugging!

Now, because the ExtensionsMadeEasy extension is fairly new, so I’ll cut you some slack and explain the fourth step, “Export your shizzle to my shizzle”, a bit more in detail.

The ExtensionsMadeEasy has a theme (EasyTheme) and a shell (EasyShell) at your convenience.  These two don’t have an implementation theirselves, they instead use MEF to find your theme.

A little walktrough, suppose you are making a theme extension called “MyTheme”.

  1. Make sure the “MyTheme” class, inside your extensions project “MyTheme.Client” project, found in the folder “Presentation/Themes”, is public.
  2. Select your LightSwitch application and in the solution explorer, switch to “File View”.
  3. Add a new class called “ThemeProvider” to the LightSwitch.Client application.
  4. Copy & paste below
  5. Done
    public class ThemeProvider : EasyThemeExporter< //Abstract theme exporter
            MyExtension.Presentation.Themes.MyTheme //Your theme
        >{}

If your theme also styles controls, there's a version for that too...

    public class ThemeProvider : EasyThemeWithExtensionsExporter< //Abstract theme + control templates exporter
            MyExtension.Presentation.Themes.MyTheme, //Your theme
            MyExtension.Presentation.Themes.MyThemeExtension //Your themeExtension
        > { }

And if your theme is not a theme at all, but you were trying to create a shell extension... (God knows why, theming is so much more powerful than shelling, but anyways...)  I also created a seperate blog post on Shells, that explains how to debug your shell extension in detail.  The short version:

    public class ShellProvider : ExtensionsMadeEasy.ClientAPI.Shell.EasyShellExporter< //Abstract shell exporter
            MyExtension.Presentation.Shells.Components.MyShell //Your shell
        >{}

At this point, I'm seriously rethinking the name "ExtensionsMadeEasy".  I wrote the word Easy so many times on my blog now, that if you Google or Bing "Easy", "Jan Van der Haegen" is the first search result.  Not good... :-)

If you want to see this technique in action, feel free to rewind to yesterday, where I posted a sample that uses this already.  The plan for tomorrow is to use the provider we made, to create a Nuget package and upload our LightSwitch theme to the Nuget feed...

About these ads

One thought on “Extensions made easy: Debugging your custom LightSwitch extension

  1. Pingback: Windows Azure and Cloud Computing Posts for 4/6/2012+ - Windows Azure Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s