May
26
Written by:
Michael Washington
5/26/2013 8:32 AM
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_4dc85c16-62d6-47e0-9d62-1528f8a7e821.png)
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 image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_c5b8265c-4ee8-4f8a-b27d-ea605e20bf64.png)
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 image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_a89cb100-9187-4dc9-8d11-5a70d97c15d4.png)
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 image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_dcb58ce8-c850-40db-9f20-3e06a59269d2.png)
The first step was to install a plug-in that would allow me to make code snippets. I used Snippet Designer.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_81e78fea-5cc0-41ed-9d3a-2faea11bce8a.png)
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 image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_35989c3c-562c-4456-8f05-a4d05f663946.png)
This causes the code to show in the snippet designer.
I use the designer to make the snippet customizable.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_7302d2cb-758c-4312-abba-f56a3f0f9945.png)
The Save button saves the snippet.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_2fb272fd-4fa4-4067-abe2-e0acdd85b02e.png)
I test the snippet by right-clicking on a code file and selecting Insert Snippet.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_c7d679f4-4d2d-4a90-b65f-92129f4a3b6f.png)
I will be able to navigate to any saved snippet and implement it.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_495c9049-2bf8-4523-9519-963715d53429.png)
To package it, I select View > Other Windows > Snippet Package Builder.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_6c230bbc-19de-4d16-a483-4e29094b4321.png)
I enter the information for the package.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_b900f20e-6e0d-4455-83e7-e0f6d5afeab0.png)
I add the snippets.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_0639e5b9-a885-4588-88a0-862cc7e5ef02.png)
I then click Build VSIX to build the package.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_3c1d5b3f-e4c5-403d-b296-2f09963e1310.png)
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 image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_d32fdfa2-2128-4421-bfa1-701dcbc53db2.png)
Use a Custom Control for a collection and select Edit Render Code.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_64cbf4f3-263b-417d-adf1-09f8baf7d165.png)
Right-click on the code file and select the reflow table snippet (under LightSwitch – JavaScript).
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_f0bdbf77-6fa2-4f01-8434-be504aaaff14.png)
The replaceable sections will be highlighted. Replace the sections to match the elements of your page.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_63388a3a-6b4d-4cd0-b8cb-ea1028342908.png)
When complete, remove the original method declaration.
![image image](/Portals/0/Blog/Files/1/1202/Windows-Live-Writer-Creating-Visual-Studio-LightSwitch-Code-_6C6A-image_45424df3-2729-405d-88e7-b11e7fff2eea.png)
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)