{"id":2113,"date":"2010-05-13T11:58:00","date_gmt":"2010-05-13T11:58:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2010\/05\/13\/how-to-create-a-great-online-project-template-or-how-to-make-applications-that-speak\/"},"modified":"2022-10-13T14:42:58","modified_gmt":"2022-10-13T21:42:58","slug":"how-to-create-a-great-online-project-template-or-how-to-make-applications-that-speak","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/how-to-create-a-great-online-project-template-or-how-to-make-applications-that-speak\/","title":{"rendered":"How to create a great online project template (or how to make applications that speak)"},"content":{"rendered":"<p>Like the project templates installed with Visual Studio, online project templates enable people to easily start creating various applications. It\u2019s not just Microsoft that creates these templates &#8212; anyone can create an online template and publish it at the <a href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/\">Visual Studio Gallery<\/a>.\u00a0 Once it\u2019s published, developers can access online project templates by clicking <em>File-&gt;New-&gt;Project<\/em> in Visual Studio and then clicking \u201cOnline Templates\u201d.\u00a0\u00a0 This post will show you how to create an online template that has a clear purpose and that shows you what to do next after you install it.\u00a0 In other words, how to create a great online project template!<\/p>\n<p><strong>An Example<\/strong><\/p>\n<p>To get started let\u2019s look at the online template IE8 Accelerator (CS).<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_26.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb_12.png\" alt=\"image\" width=\"533\" height=\"302\" border=\"0\" \/><\/a><\/p>\n<p>Even though you may not know exactly <i>what <\/i>an IE8 accelerator is, the inclusion of a thumbnail icon + a preview image + a description help to explain the purpose of this application. The purpose was clear and it sounded useful so I decided to give it a try.<\/p>\n<p>I clicked \u201cOK\u201d to install the template and once the download and install completed I was presented with a \u201cReadme\u201d welcome page to instruct me on how to get started.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_2.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb.png\" alt=\"image\" width=\"529\" height=\"218\" border=\"0\" \/><\/a><\/p>\n<p>Most project templates that I\u2019ve seen create a project and leave me hanging without any idea of what to do next.\u00a0 But this one was different.\u00a0 It gave me a welcome page that told me exactly what to do next.\u00a0 Not only was I able to install and use the MSDN Accelerator that came with the template, I was also able to create quickly two more projects: one accelerator for Visual Studio Gallery, and another for an internal search tool that our team uses a lot.\u00a0 I had some suggestions for the author of the template, so I left a comment in the <a href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/en-us\/2f321e5e-4db5-4aa1-a6e9-25619d3153dd\/view\/Discussions\">Discussion<\/a> which you can reach from the More Info link in the New Project dialog.<\/p>\n<p>The IE 8 Accelerator template is a great template because<\/p>\n<ul>\n<li>It includes a thumbnail icon, a preview image, and a short description about what the template does, and<\/li>\n<li>It shows you what to do next after you install it via a welcome page.<\/li>\n<\/ul>\n<p><strong>How to create a great online project template<\/strong><\/p>\n<p>Here\u2019s how you can create an online project template like IE 8 Accelerator that has a clear purpose and shows you what to do next.<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>In Visual Studio Pro or above go to <i>Tools<\/i> -&gt; <i>Extension Manager<\/i>, click on the \u201cOnline Gallery\u201d and type \u201cExport Template\u201d into the search bar. The result list should display the Export Template Wizard. .\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_4.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb_1-1.png\" alt=\"image\" width=\"534\" height=\"265\" border=\"0\" \/><\/a><\/li>\n<li>Click \u201cDownload\u201d to install and then restart Visual Studio in order to finish installing the extension.<\/li>\n<li>Create the project that will be the basis for your template.\u00a0 I decided to create a template for a talking program in which the consumer can replace \u201cHello World\u201d with anything he or she wants the program to say.\u00a0 Here are the steps I used:\na. <em>File \u2013&gt; New \u2013&gt; Project -&gt; C# (or VB) -&gt; Console Application<\/em>\nb. <em>Right click on the project name -&gt; Add Reference -&gt; .NET -&gt; System.Speech<\/em>\nc. Use the System.Speech.Synthesis namespace in Program.cs:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><code>using System.Speech.Synthesis; <\/code><\/p>\n<p>d. Add the code below into the Main method of Program.cs.\u00a0 (The &#8220;using&#8221; statement automatically takes care of disposing of all the resources used by the speech synthesizer when it is done.)<\/p>\n<p><code>using (SpeechSynthesizer synth = new System.Speech.Synthesis.SpeechSynthesizer())\n{\nsynth.Speak(\"Hello World\");\n}<\/code><\/p>\n<p>e. Turn up the volume and debug your project.\u00a0 \ud83d\ude42<\/p>\n<ol>\n<li>Now let\u2019s create a Welcome Page for your template.\u00a0 We want to give the best possible experience to the consumer of the template, so what we need to do as a template author is a little tricky.\na. In a folder outside your project create a welcome.htm file.\nb. If you link images (using the &lt;IMG&gt; tag) then put those images in a welcomeimages subdirectory.\nc. Add your content to welcome.htm and get all your images ready in welcomeimages.\nd. Open welcome.htm in a browser or Visual Studio and verify that everything looks as expected.\ne. Copy welcomeimages into the project, but do not copy welcome.htm.\u00a0 The template will create welcome.htm when a project is created from it.<\/li>\n<li><em>File -&gt; Export Template as <\/em><a href=\"https:\/\/learn.microsoft.com\/en-us\/archive\/blogs\/quanto\/what-is-a-vsix\"><em>VSIX<\/em><\/a><\/li>\n<li>On the first screen of the wizard, select the project you are exporting as a template.\u00a0 Item templates can also be exported on this screen, but they are outside the scope of this post.\u00a0 For more information about project and item templates see <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/6db0hwky(v=VS.100).aspx\">Visual Studio Templates<\/a>.<\/li>\n<li>On the second screen of the wizard, enter the following:\na. Template Name: projects created from this template will have this default name\nb. Template Description: this description will appear when users browse templates in Visual Studio.\u00a0 It should concisely explain the purpose of your template so that consumers can decide whether they are interested.\nc. Icon Image: Appears to the left of the template name when selecting the template.\u00a0 A good source of icon images is the <a href=\"https:\/\/devblogs.microsoft.com\/visualstudio\/tips-and-tricks-visual-studio-2010-image-library\/\">Visual Studio Image Library<\/a>\nd. Preview Image: Larger image that gives a preview of the template\u2019s purpose.\u00a0 If your application has UI, a screenshot is usually a great preview image. If it doesn\u2019t have UI, a good source of images is <a href=\"http:\/\/office.microsoft.com\/clipart\">Office Clipart<\/a>.\ne. (optional) <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ms185301.aspx\">Wizard Assembly<\/a>: enables you to execute custom code when a project is created from your template; wizards are out of scope of this post.\nf. Welcome page: browse to your welcome.htm file.\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_23.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb_7.png\" alt=\"image\" width=\"512\" height=\"402\" border=\"0\" \/><\/a><\/li>\n<li>On the third screen of the wizard you can enter the following:\na. VSIX Id: Uniquely identifies your template in Visual Studio and on the Visual Studio Gallery.\u00a0 This will be auto-generated for you.\nb. Product Name:\u00a0 this name shows up on the Visual Studio Gallery web site and in the list of Online Templates, so it\u2019s a good idea to include spaces in the name to make it look good.\nc. Company Name: Your company name or your name. This will show up as Created By in Visual Studio when consumers browse online templates.\nd. Version: Higher numbered versions supersede lower numbers in Visual Studio and the Visual Studio Gallery.\ne. License: When you distribute a template through the Visual Studio Gallery, it is covered automatically under the terms of the <a href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/en-us\/site\/documents\/contributionAgreement\">Contribution Agreement<\/a>.\u00a0 Therefore, for online templates leave the License field blank.\nf. Getting started guide URL: this only shows up in the Extension Manager so it isn\u2019t terribly useful.\u00a0 However, I put in a reference to <a href=\"http:\/\/www.codeproject.com\/KB\/dotnet\/Speech_Sample.aspx\">A Very Easy Introduction to Microsoft.NET Speech Synthesis<\/a>.\ng. Supported VS Editions: VS 10.0 Professional includes VS Professional, Premium, and Ultimate.\u00a0 Click Select to choose other additions as well such as C# Express.\nh. Output Location: Auto-generated for you.\u00a0 You\u2019ll browse to this location later when uploading the VSIX file into Visual Studio Gallery\ni. Automatically import the template into Visual Studio: Check this so that you can immediately verify your template.\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_13.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb_4.png\" alt=\"image\" width=\"518\" height=\"407\" border=\"0\" \/><\/a><\/li>\n<li>Now verify that your template works as expected in Visual Studio:\na. Find the template under Installed Templates and create the project.\nb. Verify that the Welcome Page opens and looks as expected\nc. Debug the project \u2013 verify that it builds successfully and that the application works as expected.<\/li>\n<li>Publish your template to Visual Studio Gallery\na. Browse to <a title=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/\" href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/\">http:\/\/visualstudiogallery.msdn.microsoft.com\/<\/a>\nb. Click the Upload button\nc. Log in with your Windows Live ID. (If you don\u2019t have one you can sign up for one.)\nd. Select \u201cProject or Item Template\u201d and click Next.\ne. Browse to the .vsix file that you exported above and click Open\nf. Click Next\ng. Click the check box on up to 3 categories.\u00a0 These categories determine where your template will appear in the New Project dialog.\nh. Enter Tags.\u00a0 Template consumers can find your template using these tags.\ni. Cost Category: Only Free is supported at this time.\nj. Allow discussions for your extension: Check this so that you will be able to get feedback from users of your extension.\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_15.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb_5.png\" alt=\"image\" width=\"519\" height=\"330\" border=\"0\" \/><\/a>\nk. Scroll down and enter a description.\u00a0 This description will appear when the consumer clicks More Info for your template in the New Project dialog.\u00a0 I like to capture here the purpose and pointers for what to try next.\nl. Agree with the Contribution Agreement, enter the encoded words, and click Create Contribution.\nm. Click \u201cpublish it\u201d to make your extension visible to others!\n<a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_21.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb_6.png\" alt=\"image\" width=\"516\" height=\"315\" border=\"0\" \/><\/a><\/li>\n<li>Verify that your template appears and works as expected in Visual Studio.\na. Browse to your template in the New Project Dialog.\nb. Select the template and OK to install it.\nc. Verify that the welcome page looks as expected.\nd. Debug \u2013 verify that the project builds and works as expected.\ne. Pretend you are a consumer of the template: modify Hello World to display something else; browse to some of the information links on the welcome page and see how easy it is to extend the project.<\/li>\n<\/ol>\n<p>To see the online template created above look at <a href=\"http:\/\/visualstudiogallery.msdn.microsoft.com\/en-us\/908c4be4-7300-46d3-bd0a-45371a84c978\">Hello World Out Loud<\/a>.<\/p>\n<p>We hope these resources will be of great help to you. As always, we are happy to hear your feedback. Please comment on this blog post to do so.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/4\/2019\/06\/image_6.png\"><img decoding=\"async\" title=\"image\" src=\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2010\/05\/image_thumb_2.png\" alt=\"image\" width=\"112\" height=\"112\" align=\"left\" border=\"0\" \/><\/a><strong>Michael Leonard<\/strong>, Software Design Engineer in Test, Visual Studio Platform.\n<strong>Short Bio<\/strong>: Michael was responsible for testing the New Project Dialog and the Visual Studio 2010 Express editions.\u00a0 His passion is for smoothing the learning curve for Visual Studio users of all levels.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Like the project templates installed with Visual Studio, online project templates enable people to easily start creating various applications. It\u2019s not just Microsoft that creates these templates &#8212; anyone can create an online template and publish it at the Visual Studio Gallery.\u00a0 Once it\u2019s published, developers can access online project templates by clicking File-&gt;New-&gt;Project in [&hellip;]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[5],"class_list":["post-2113","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-csharp"],"acf":[],"blog_post_summary":"<p>Like the project templates installed with Visual Studio, online project templates enable people to easily start creating various applications. It\u2019s not just Microsoft that creates these templates &#8212; anyone can create an online template and publish it at the Visual Studio Gallery.\u00a0 Once it\u2019s published, developers can access online project templates by clicking File-&gt;New-&gt;Project in [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/2113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=2113"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/2113\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=2113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=2113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=2113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}