You are here:   Blog
Register   |  Login

 

May 26

Written by: Michael Washington
5/26/2013 8:32 AM  RssIcon

image

Microsoft MVP and Visual Studio LightSwitch Insider, Alessandro Del Sole recently released an extension that “provides an easy way to install a number of JavaScript code snippets for the LightSwitch HTML Client created by the LightSwitch Team at Microsoft”.

image

When you install the extension, you can right-click in your code files in Visual Studio and select a code snippet. After you select the code snippet, you alter it to fit your particular program.

This saves you a lot of time.

Making Your Own Code Snippets

Alessandro has created a Snippet Package Builder to allow you to package your own code snippets.

image

I decided to use it to help you create the code to implement the JQuery Mobile Reflow Table in Visual Studio LightSwitch that was covered in the article: LightSwitch HTML Client For The Desktop Web Browser.

image

The first step was to install a plug-in that would allow me to make code snippets. I used Snippet Designer.

image

In Visual Studio LightSwitch, I highlight the code I want to use as a snippet, I right-click on it and select Export as Snippet.

image

This causes the code to show in the snippet designer.

I use the designer to make the snippet customizable.

image

The Save button saves the snippet.

image

I test the snippet by right-clicking on a code file and selecting Insert Snippet.

image

I will be able to navigate to any saved snippet and implement it.

image

To package it, I select View > Other Windows > Snippet Package Builder.

 image

I enter the information for the package.

image

I add the snippets.

image

I then click Build VSIX to build the package.

image

Now I can redistribute the VSIX.

To use it, just run it and it will install.

Using The Reflow Table Snippet

Create a LightSwitch project and update it to JQuery Mobile 1.3.0 (or higher).

image

Use a Custom Control for a collection and select Edit Render Code.

image

Right-click on the code file and select the reflow table snippet (under LightSwitch – JavaScript).

image

The replaceable sections will be highlighted. Replace the sections to match the elements of your page.

image

When complete, remove the original method declaration.

image

When you run the project, the table will display.

This snippet only gets you started, you will still need to see the article:

LightSwitch HTML Client For The Desktop Web Browser

to enhance the table and implement paging.

Special Thanks

A very special thanks to Alessandro Del Sole.

Download Code

The VSIX extension is available at:

http://silverlight.adefwebserver.com/Files/LightSwitch/lsReflowTable.zip

(you must have Visual Studio 2012 Update 2 installed to run the code)

Tags: Utility
Categories:

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation