|
| 1 | +<html> |
| 2 | + |
| 3 | +<head> |
| 4 | +<title>Dynamic Template plug-in for Windows Live Writer</title> |
| 5 | +<style type="text/css"> |
| 6 | +body { |
| 7 | + font-family: Georgia; |
| 8 | + margin: 0; |
| 9 | + padding: 0; |
| 10 | + padding-bottom: 30px; |
| 11 | +} |
| 12 | +h1 { |
| 13 | + font-family: Arial, Helvetica, sans-serif; |
| 14 | + font-size: 16pt; |
| 15 | +} |
| 16 | +h3 { |
| 17 | + font-size: 16pt; |
| 18 | + color: #006699; |
| 19 | +} |
| 20 | +#header * { |
| 21 | + margin: 0; |
| 22 | + padding: 0; |
| 23 | +} |
| 24 | +#header { |
| 25 | + background-color: #006699; |
| 26 | + padding: 15px; |
| 27 | + margin-bottom: 30px; |
| 28 | + color: white; |
| 29 | +} |
| 30 | +@media screen { |
| 31 | + #header { |
| 32 | + padding-left: 100px; |
| 33 | + } |
| 34 | + #bodice { |
| 35 | + padding-left: 100px; |
| 36 | + width: 800px; |
| 37 | + } |
| 38 | +} |
| 39 | +#download { |
| 40 | + float: right; |
| 41 | + background-color: #CCFF99; |
| 42 | + padding: 15px; |
| 43 | + border: 1px solid #336600; |
| 44 | + margin-left: 5px; |
| 45 | +} |
| 46 | +#download a { |
| 47 | + font-weight: bold; |
| 48 | +} |
| 49 | +.infobox { |
| 50 | + padding: 1em; |
| 51 | + margin-left: 2em; |
| 52 | + margin-right: 2em; |
| 53 | +} |
| 54 | +.infobox a { |
| 55 | + font-weight: bold; |
| 56 | +} |
| 57 | +.warn { |
| 58 | + color: red; |
| 59 | +} |
| 60 | +.screencast { |
| 61 | + display: none; |
| 62 | +} |
| 63 | +</style> |
| 64 | +</head> |
| 65 | + |
| 66 | +<body> |
| 67 | + |
| 68 | +<div class="container"> |
| 69 | + <div id="header"> |
| 70 | + <h1>Dynamic Template Plugin for Windows Live Writer</h1> |
| 71 | + <p>by Joe Cheng |
| 72 | + <script type="text/javascript" language="javascript"> |
| 73 | + var addr = "joecheng" + "." + "com"; |
| 74 | + addr = "code@" + addr; |
| 75 | + document.write("<"); |
| 76 | + document.write(addr); |
| 77 | + document.write(">"); |
| 78 | + </script> |
| 79 | + </p> |
| 80 | + </div> |
| 81 | + <div id="bodice"> |
| 82 | + <div id="download"> |
| 83 | + <a href="http://www.codeplex.com/wlwtemplate/Release/ProjectReleases.aspx"> |
| 84 | + Download Now</a><br> |
| 85 | + <span style="font-size: 0.8em">from CodePlex</span></div> |
| 86 | + <div class="main"> |
| 87 | + <p><strong>Dynamic Template</strong> is a powerful plugin for Windows |
| 88 | + Live Writer. You can use templates to easily insert oft-used snippets |
| 89 | + of HTML or text.</p> |
| 90 | + <p>Or you can write templates that are powerful enough to be considered |
| 91 | + "mini-plugins" in their own right, while being radically simpler to |
| 92 | + write and distribute than traditional Windows Live Writer plugins. |
| 93 | + If you have ever written a PHP, JSP, or ASP page, you already have a |
| 94 | + good idea of how to write these kind of templates!</p> |
| 95 | + <h3>For example?</h3> |
| 96 | + <p><strong>Level 1 - Plain HTML:</strong> Let's start with the |
| 97 | + simplest possible scenario: you just want to insert the same snippet |
| 98 | + of HTML into your posts on a regular basis, and you don't want to |
| 99 | + have to leave Writer to do it. For this example, imagine you want to |
| 100 | + "Powered by Windows Live Writer" at the bottom of your posts. |
| 101 | + <a href="screencasts/level1.swf">Watch Example 1.</a> (All videos linked |
| 102 | + from this page are very short Flash movies, created using |
| 103 | + <a href="http://www.jingproject.com">Jing</a>.)</p> |
| 104 | + <p><strong>Level 2 - HTML + Code:</strong> OK, that's useful, but |
| 105 | + it's been <a href="http://www.codeplex.com/wlwTextTemplate">done |
| 106 | + before</a>. What sets my plugin apart is that dynamic templates can |
| 107 | + contain snippets of C# code, like an ASP page! For this next |
| 108 | + example, imagine you're an Engadget blogger, liveblogging the latest Steve Jobs keynote (like |
| 109 | + <a href="http://www.engadget.com/2007/06/11/steve-jobs-live-from-wwdc-2007/"> |
| 110 | + this one</a>). Every second counts, and the time spent inserting the |
| 111 | + little timestamp is time wasted. Let's write a template to automate |
| 112 | + that. <a href="screencasts/level2.swf">Watch Example 2.</a></p> |
| 113 | + <p><strong>Level 3 - Using Selection:</strong> It's much easier to |
| 114 | + come up with useful scenarios once we introduce the ability to |
| 115 | + access what's currently selected in Windows Live Writer. Just use |
| 116 | + the built-in variable <tt>_selection</tt> in your template. This is |
| 117 | + incredibly useful for adding HTML formatting that isn't included |
| 118 | + with Windows Live Writer out of the box--for example, small caps. |
| 119 | + <a href="screencasts/level3.swf">Watch Example 3.</a> Or here's a |
| 120 | + cool idea: take whatever text you've entered into Writer, and treat |
| 121 | + it as HTML. <a href="screencasts/level3a.swf">Watch Example 4</a>.</p> |
| 122 | + <p><strong>Level 4 - Taking Input:</strong> Alright, that's cool, |
| 123 | + but what really makes things interesting is when you start asking |
| 124 | + the user for information. How about a template for highlighting text |
| 125 | + in a color of the user's choice? <a href="screencasts/level4a.swf"> |
| 126 | + Watch Example 5.</a></p> |
| 127 | + <p>As you can see in Example 5, to ask for user input you just need |
| 128 | + to fill out a row in the Template Variables grid. The <em>Variable |
| 129 | + Name</em> is the name you will use to reference the value in your |
| 130 | + template—it must be a valid C# identifier. The <em>Data Type</em> |
| 131 | + affects both the type of that variable (Integer will be an <tt>int</tt>, |
| 132 | + Boolean will be a <tt>bool</tt>, etc.) and the appearance of the |
| 133 | + input dialog. The <tt>Label</tt> is the "friendly name" that will be |
| 134 | + displayed to the user in the input dialog.</p> |
| 135 | + <h3>Basic Syntax</h3> |
| 136 | + <p>Templates are primarily composed of HTML. You can embed C# |
| 137 | + statements using <tt><%</tt> and <tt>%></tt>. You can output C# expressions using <tt><%=</tt> |
| 138 | + and <tt>%></tt>. For example:</p> |
| 139 | + <code><% string currentTime = DateTime.Now.ToString("HH:mm:ss"); %><br> |
| 140 | + <b><%= currentTime.ToUpper() %></b></code> |
| 141 | + <p>Note that expressions are not terminated with a semicolon, as |
| 142 | + that would make them a statement. Conversely, statements must be |
| 143 | + terminated with semicolon. If you get a confusing compile error when |
| 144 | + you try to save your template (like "CS1026: ) expected"), check for |
| 145 | + this first.</p> |
| 146 | + <h3>Built-in Functions and Variables</h3> |
| 147 | + <p>In Example 4 above, a function called <tt>HtmlDecode</tt> |
| 148 | + is used. That’s one of several built-in functions available to templates. |
| 149 | + The complete list follows:</p> |
| 150 | + <ul> |
| 151 | + <li><tt>HtmlEncode(string)</tt> </li> |
| 152 | + <li><tt>HtmlAttributeEncode(string)</tt> </li> |
| 153 | + <li><tt>HtmlDecode(string)</tt> </li> |
| 154 | + <li><tt>UrlEncode(string)</tt> </li> |
| 155 | + <li><tt>UrlPathEncode(string)</tt> </li> |
| 156 | + <li><tt>UrlDecode(string)</tt></li> |
| 157 | + </ul> |
| 158 | + <p>These pass straight through to the |
| 159 | + <a href="http://msdn2.microsoft.com/en-us/library/system.web.httputility_methods.aspx"> |
| 160 | + corresponding methods on HttpUtility</a>.</p> |
| 161 | + <p>There’s also one built-in string variable, <tt>_selection</tt>. If |
| 162 | + the user has anything selected when the template is inserted, the HTML |
| 163 | + of the selection will be assigned to this variable (requires Windows |
| 164 | + Live Writer Beta 2 or later).</p> |
| 165 | + <h3>Sharing Templates</h3> |
| 166 | + <p>Templates are stored as .wlwtemplate files, in your Application |
| 167 | + Data\WLWTemplates directory. You can e-mail these files to anyone |
| 168 | + who has the plugin installed—simply double-clicking the file will |
| 169 | + bring up a template installation prompt.</p> |
| 170 | + <p>You can see the same prompt yourself by clicking on any of the |
| 171 | + samples below.</p> |
| 172 | + <h3>Samples</h3> |
| 173 | + <p>If you have the plugin installed, clicking on a link below will |
| 174 | + install the template.</p> |
| 175 | + <p><a href="templates/Abbreviation.wlwtemplate">Abbreviation</a>: |
| 176 | + Creates an abbreviation that shows a definition on mouse hover. |
| 177 | + Example: <abbr title="Windows Live Writer" style="border-bottom: navy 1px dotted">WLW</abbr> |
| 178 | + <br> |
| 179 | + <a href="templates/HTMLize.wlwtemplate">HTMLize</a>: Takes selected |
| 180 | + text and HTML-decodes it (as seen in the |
| 181 | + <a href="screencasts/level3a.swf">Example 4 video</a>).<br> |
| 182 | + <a href="templates/Repeat.wlwtemplate">Repeat</a>: Repeats a string |
| 183 | + multiple times.<br> |
| 184 | + </p> |
| 185 | + </div> |
| 186 | + </div> |
| 187 | +</div> |
| 188 | + |
| 189 | +</body> |
| 190 | + |
| 191 | +</html> |
0 commit comments