Extensions made easy: Debugging your custom LightSwitch shell extension

Ouch… Computers never make mistakes, but humans often do. There was a typo in the ExtensionsMadeEasy extension that caused shells not to load… Well, typo / bug, tomato / tomato…

I have pushed an update where this is fixed, so allow me to post my 5 steps to debugging your custom LightSwitch shell extension, with pictures to prove the TypoFix. ๐Ÿ˜‰

Step 1: Create a LightSwitch shell sample.

Follow the guide at MSDN which walks you through the long process of creating a shell example. ย I named my extension DynamicsMadeEasy instead of ShellExtension… Hint hint…

To make it easy to export your shell (step 4), go to the ShellSample.cs you have created. ย The class, by default, is internal, and you should change it to public. ย To make this 100% foolproof, I’m talking about the ShellSample.cs file in your extensions client project, in the folder Presentation/Shells/Components. ย I am not talking about the ShellSample.xaml.cs file inside the Presentation/Shells folder…

There is no need to build your shell extension.

Step 2: Create a LightSwitch application.

Now, for some reason, I suspect you already know how to create a LightSwitch application and don’t need a long walkthrough on how to accomplish this. I called mine “ShellinTestArea”.

Step3: add the sources you want to debug.

Right click on the solution, select add > existing project… and navigate to your extensions client project.

Next up, select your ShellinTestArea in the solution explorer, and flip to File View. ย Right-click on the client project and add a project reference to the extensions client project we just added.

If you followed all steps, your solution will be similar to this:

 

Step 4: Export your shizzle to my shizzle.

Now, if you have read how the ExtensionsMadeEasy works, you know that we have to export your shell to the ExtensionsMadeEasy shell before we can debug it.

In the solution explorer, select your LightSwitch application and switch to File View.

Right click on the ShellinTestArea.Client project (once again, your LightSwitch application might be named differently), and add a new class:

    public class ShellSampleExporter : ExtensionsMadeEasy.ClientAPI.Shell.EasyShellExporter<
            DynamicsMadeEasy.Presentation.Shells.Components.ShellSample
        > { }

This class makes sure that the EasyShell in my ExtensionsMadeEasy uses your shell, so we can now effectively start using the EasyShell… ย Go back to the properties of your LightSwitch application and select the EasyShell as the shell to use.

Step 5: Debug your shell extension

Go ahead and put a breakpoint in your shell (ShellSample.xaml.cs) and hit F5.

Look mon, I'm debugging!

Look mon, I'm debugging!

Advertisements

29 thoughts on “Extensions made easy: Debugging your custom LightSwitch shell extension

  1. Hallo Jan, ik krijg het helaas niet voor elkaar om de shell aan te sturen.
    Ik heb versie 1.2

    Krijg de foutmelding: The selected EasyShell could not find an IShellExporter and does not have a default implementation.

    Ik heb precies gedaan wat hierboven staat. Aanmaken van public class ShellSampleExporter : ExtensionsMadeEasy.ClientAPI.Shell.EasyShellExporter { }

    En heb public class ShellSample : IShell.

    Meer is er toch niet nodig?

  2. Hallo Jan,

    Ik heb wederom een nieuw project aangemaakt en de stappen doorgelopen, maar krijg dezelfde foutmelding. Heb je nergens een voorbeeld waar een shell en theme zijn geimplementeerd?
    Een garageapplication ofzo?
    Het voorbeeld project ThemeWithControlTemplates vond ik bijvoorbeeld erg verhelderend.
    Kun je deze maybe met een shell uitbreiden ofzo?

    de foutmelding: The selected EasyShell could not find an IShellExporter and does not have a default implementation.
    Snap ik niet, omdat het project met IShell toch wordt gebruikt? Die IShellExporter wordt toch onderliggend gebruikt? Misschien heb ik toch niet de laatste versie (1.2)?

    Thanx, Dennis

    • Hey Dennis!

      O wow het lijkt erop dat je een hele tijd bezig bent geweest vanmiddag.. ๐Ÿ˜ฆ Ik zat niet achter me pc, sorry!
      De typo zat nog steeds in v 1.2 die was upgeload… Aaaargh! Om gek van de komen.
      Net even v 1.4 upgeload met opnieuw de bugfix, en een nieuw testproject aangemaakt MET de versie 1.4 die ik via MSDN heb downgeload, en het ziet er opnieuw goed uit. Sorry voor al de tijd die je ondertussen hieraan kwijt bent ๐Ÿ˜ฆ

      De hardgecodeerde pathnames zitten erin omdat ik lokaal aan een nieuw projectje bezig ben, maar eigenlijk heb ik de sources enkel “ter info” upgeload, heb er zeker niet aan gedacht dat er iemand ze echt zou downloaden, hah! En al zeker m’n testprojectje niet!

      Anyways, v1.3 bevat een “specialleke”, ga er vanavond over bloggen.

      Groetjes en veel succes!

      Jan

  3. Hallo Jan, ik heb er inderdaad tijd in gestoken. Ik begreep er al niks meer van. Om idd gek van te worden. Tja, ik ging er niet vanuit dat die fout er nog in zat. Maar goed, ik ga updaten en nog een poging wagen.

    Bedankt voor je snelle response in ieder geval en dat foutje.. tja… shit happens he!

    • Hey Dennis!
      Nee moest even de noodzakelijke huishoudelijke taken doen, en ben dan met Mojo een eindje gaan wandelen.
      Code check ik opnieuw in nadat ik heb geblogd vanavond over de nieuwe feature ๐Ÿ™‚
      Hopelijk ben je ondertussen goed bezig met je eigen shell!

      Groetjes

      Jan

  4. Hallo Jan,

    Ik heb een vraag over de architectuur van made easy:

    In het voorbeeld van het tabblad met de mooie icoontjes heb je een los project voor gemaakt.
    Voor de shell ga je eerst uit van LightSwitchExtension project om de shell op te bouwen.

    Ik wil deze graag combineren natuurlijk. Wil mijn eigen shell maken en de mooie icoontjes in de tabbladen. Los van elkaar werkt het wel, maar krijg het niet gecombineerd.
    Als je een LightSwitchExtension maakt, kun je ook een theme aanmaken en vanuit daar werken. Maar volgens mij communiceert dat niet goed.

    Heb je maybe een tip voor me? Praktisch gezien is de vraag dus: hoe krijg ik de icoontjes in de tabbladen van mijn eigen shell ๐Ÿ™‚
    Toch 2 projecten? Eentje voor de shell en een losse voor de theme, of kan de them bij de shell erbij?

    Thanx!

    • Hey Dennis!
      Normaal gezien kan je zowel de shell als de theme:
      * rechtstreeks in je LightSwitch applicatie aanmaken
      * in een apart Silverproject steken (รฉรฉn per of beiden samen)
      * in een LightSwitch extension steken (รฉรฉn per of beiden samen)
      * combinatie van bovenstaande

      Ik maak vanavond even een sample van shell en theme samen voor je!
      Stay tuned!

  5. Hoi Jan,
    Ik dacht precies hetzelfde en had zelf al een poging gedaan, maar hij pakte de icoontjes van de tabbladen niet op.
    Ben benieuwd naar je sample! Ook of je beide in een silverlight class libary gaat zetten of in een project die je eerst als extension hebt aangemaakt.
    Voordeel van apparte extensions projecten kan maybe zo zijn, dat je kunt switchen tussen de themes en shells… Dat zou natuurlijk wel cool zijn!
    Zo min mogelijk integreren in het lightswitchproject.

    Ik check vanavond je oplossing en alvast erg bedankt! Dan kan ik dat mooi gebruiken in mijn projectje voor mijn collega’s.

  6. Hello, the shell is well debugged, but if we try to test the project ShellSample of lightswitch it can not find the item IServiceProxy

    private IServiceProxy ServiceProxy // blocked here
    {
    get
    {
    // Get the service proxy which provides access to the needed LightSwitch services.
    if ( null == this.serviceProxy )
    this.serviceProxy = VsExportProviderService.GetExportedValue();

    return this.serviceProxy;
    }
    }

  7. Hoi Jan,

    I have uploaded a sample for you:
    https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B2IORNK-WVjsMGIyNmUxMzUtNzRjOS00NjJkLWI2YTAtZThiZTNmZDQwZjRi&hl=nl

    The only thing not working is your Tabs.xaml from your example.
    Can you see why?
    As you can see it works well with accordion control icons ๐Ÿ™‚

    In some way, it is not applying the default shell: ActiveScreenTabItem.
    Thanks and hopefully you can help me ๐Ÿ™‚

    Greetings, Dennis

    • Hey Dennis,

      The “ActiveScreenTabItem” is part of the default shell. If you want to use a custom shell, you’ll have so supply a new datatemplate for how you want your tabitems to look…
      Yours is in the WcmsShell.xaml”, just below “Template that is used for the header of each tab item”. So you’ll have to add an image + the converter to that datatemplate.
      This may mean you have to create a new silverlight control library and put the actual NavigationItemToIconConverter in it, so you can share it between shell & theme extension (it’s inside the theme now, thus the shell can’t use it).

      Good luck & stay tuned!

      Jan

  8. Hi Jan, how are you doing?

    I have implemented the Jet Pack theme in my project, allmost perfect! But the only items the theme does not pickup are the List and the Detail. Here is the link to the latest version:

    https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B2IORNK-WVjsNzA1OTkxMDgtYjdiMi00NjA3LWIzZmItM2U5NjM5NDU2MDQ2&hl=nl

    I want to style the list and detail offcourse. Do you know how? If you run the project and open CursusDefinities, than you see the labels are white, and the background too. The tabcontrol works fine as you can see.
    The background should be dark like the rest.
    I have tried very much options, but i cannot manage it.
    Maybe this is for you a piece of cake ๐Ÿ™‚ Are these special controls or something like that? I googled a lot, but did not find something. Some themes have implemented colors in these controls. So it should be possible offcourse ๐Ÿ™‚

    Thanx in advance!

    Groeten, Dennis

    • Hey Dennis!
      Good to see you’re making such progress!
      Kind of an extremely busy couple of days at the moment (my blog has been really quiet I know :(), but will have a look a bit later this week! Looking forward to it actually!

      Stay tuned!
      Jan

  9. We stumbled over here different web address and thought I may as
    well check things out. I like what I see so now i am
    following you. Look forward to exploring your web page for a second time.

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