<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:copyright="http://blogs.law.harvard.edu/tech/rss" xmlns:image="http://purl.org/rss/1.0/modules/image/">
    <channel>
        <title>MS Ajax</title>
        <link>http://theruntime.com/blogs/jaykimble/category/192.aspx</link>
        <description>MS Ajax</description>
        <language>en-US</language>
        <copyright>Jay Kimble</copyright>
        <managingEditor>jkimble@gmail.com</managingEditor>
        <generator>Subtext Version 1.9.5.0</generator>
        <item>
            <title>Better JavaScript class generation</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/06/24/better-javascript-class-generation.aspx</link>
            <description>&lt;p&gt;For years, I have been espousing how great Script# is. I often do an advanced MS ASP.NET Ajax client talk and end it with a Script# talk. Mainly because I think that the idea of learning the nuances of JavaScript OO techniques can be a little confusing. It’s really the challenge (All you need to do is search the archives of my blog and you’ll see my own confusion on this topic).&lt;/p&gt;
&lt;p&gt;I think many web developers can wrap their heads around building the functionality, but making something private/public/static can get a little confusing. Especially if you are used to using something like C# or VB to do it.&lt;/p&gt;
&lt;p&gt;&lt;a href="http://new.efficientcoder.net/"&gt;Kevin “ByteMaster” Wolf&lt;/a&gt; and I have been talking about this. As a result of those talks I started playing with an idea of allowing developers create something that feels more like OO… Anyway, I have come up with a very alpha version. &lt;/p&gt;
&lt;h3&gt;A Better OO For JavaScript??&lt;/h3&gt;
&lt;div style="BORDER-BOTTOM: silver 1px solid; TEXT-ALIGN: left; BORDER-LEFT: silver 1px solid; PADDING-BOTTOM: 4px; LINE-HEIGHT: 12pt; BACKGROUND-COLOR: #f4f4f4; MARGIN: 20px 0px 10px; PADDING-LEFT: 4px; WIDTH: 97.5%; PADDING-RIGHT: 4px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; MAX-HEIGHT: 200px; FONT-SIZE: 8pt; OVERFLOW: auto; BORDER-TOP: silver 1px solid; CURSOR: text; BORDER-RIGHT: silver 1px solid; PADDING-TOP: 4px" id="codeSnippetWrapper"&gt;
&lt;div style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px" id="codeSnippet"&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum1"&gt;   1:&lt;/span&gt; compileClasses({    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum2"&gt;   2:&lt;/span&gt;     testClass: {        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum3"&gt;   3:&lt;/span&gt;         ctor: &lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum4"&gt;   4:&lt;/span&gt;             &lt;span style="COLOR: #008000"&gt;// this is a test        &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum5"&gt;   5:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum6"&gt;   6:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;private&lt;/span&gt;: {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum7"&gt;   7:&lt;/span&gt;             privateVar:1,            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum8"&gt;   8:&lt;/span&gt;             privateMethd:&lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {                &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum9"&gt;   9:&lt;/span&gt;                 &lt;span style="COLOR: #008000"&gt;// test method            &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum10"&gt;  10:&lt;/span&gt;             }        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum11"&gt;  11:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum12"&gt;  12:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;public&lt;/span&gt;:{            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum13"&gt;  13:&lt;/span&gt;             &lt;span style="COLOR: #008000"&gt;// public stuff here            &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum14"&gt;  14:&lt;/span&gt;             publicVar:&lt;span style="COLOR: #006080"&gt;"2"&lt;/span&gt;        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum15"&gt;  15:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum16"&gt;  16:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;static&lt;/span&gt;:{            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum17"&gt;  17:&lt;/span&gt;             &lt;span style="COLOR: #008000"&gt;//public statics            &lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum18"&gt;  18:&lt;/span&gt;             staticVar:&lt;span style="COLOR: #006080"&gt;"test"&lt;/span&gt;        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum19"&gt;  19:&lt;/span&gt;         }    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum20"&gt;  20:&lt;/span&gt;     },    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum21"&gt;  21:&lt;/span&gt;     testClass2: {        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum22"&gt;  22:&lt;/span&gt;         ctor: testFunc,        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum23"&gt;  23:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;private&lt;/span&gt;: {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum24"&gt;  24:&lt;/span&gt;             privateVar2:&lt;span style="COLOR: #006080"&gt;"2"&lt;/span&gt;        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum25"&gt;  25:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum26"&gt;  26:&lt;/span&gt;         &lt;span style="COLOR: #0000ff"&gt;public&lt;/span&gt;:{            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum27"&gt;  27:&lt;/span&gt;             publicMethod:&lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {                &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum28"&gt;  28:&lt;/span&gt;                 &lt;span style="COLOR: #0000ff"&gt;return&lt;/span&gt; &lt;span style="COLOR: #0000ff"&gt;true&lt;/span&gt;;            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum29"&gt;  29:&lt;/span&gt;             },            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum30"&gt;  30:&lt;/span&gt;             myVar:&lt;span style="COLOR: #006080"&gt;"this is a test"&lt;/span&gt;,            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum31"&gt;  31:&lt;/span&gt;             dispose:&lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {            &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum32"&gt;  32:&lt;/span&gt;             }        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum33"&gt;  33:&lt;/span&gt;         },        &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum34"&gt;  34:&lt;/span&gt;         implements:[&lt;span style="COLOR: #006080"&gt;"Sys.IDisposable"&lt;/span&gt;]    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum35"&gt;  35:&lt;/span&gt;     }&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum36"&gt;  36:&lt;/span&gt; });&lt;/pre&gt;
&lt;!--CRLF--&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Two classes are defined here.. the first one is the testClass. you will see that I’m creating a JSON object that has members called “&lt;em&gt;ctor&lt;/em&gt;” (constructor), “&lt;em&gt;private&lt;/em&gt;” (private members are contained within this object), “&lt;em&gt;public&lt;/em&gt;” (public members are contained within this object),”&lt;em&gt;static&lt;/em&gt;” (static public members are contained within this object), and “&lt;em&gt;implements&lt;/em&gt;” (“array of interfaces that are implemented). I also will handle single inheritance using a member called “&lt;em&gt;inherits&lt;/em&gt;.” &lt;/p&gt;
&lt;p&gt;I think this makes class definition a little more straightforward for those of us who aren’t closure gurus, and it just might replace the pull of Script# on my life.&lt;/p&gt;
&lt;p&gt;Right now this all works with a simple function that uses the MS Ajax Client framework. I’m considering doing this for other frameworks (so if you love some other framework, never fear I’m considering your framework as well).&lt;/p&gt;
&lt;p&gt;I created a codeplex project which contains a single release that contains a simple ASP.NET project (could have been a simple html page too).. Don’t fret I expect the code to be a ton cleaner in the next version (I’m reading the MEAP version of John Resig’s &lt;a href="http://www.manning.com/resig/"&gt;Secrets of the JavaScript Ninja&lt;/a&gt; (and am learning a ton!)&lt;/p&gt;
&lt;p&gt;Here’s the link: &lt;a href="http://JsClassDef.codeplex.com"&gt;JsClassDef Project&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Let me know what you think.. does it stink? is it cool? I know it ain’t Resig-like, but both Kevin and I think the simplified structure is nice and not un-JavaScript-like&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2808.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/06/24/better-javascript-class-generation.aspx</guid>
            <pubDate>Wed, 24 Jun 2009 21:15:32 GMT</pubDate>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/06/24/better-javascript-class-generation.aspx#feedback</comments>
            <slash:comments>2</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2808.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Using the Ajax control toolbox with jQuery (and ASP.NET MVC)</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/06/09/using-the-ajax-control-toolbox-with-asp.net-mvc-and-jquery.aspx</link>
            <description>&lt;p&gt;[Here’s a preview of something I’m going to show Thursday night at the Tampa MVC group.]&lt;/p&gt;
&lt;p&gt;You may have thought that by jumping on ASP.NET MVC that you have to leave behind all the cool Ajax Control Toolbox controls.. or more than likely you realize that it’s possible to use them, but one has to be a “JavaScript Rocket Scientist” to use them..&lt;/p&gt;
&lt;p&gt;It’s really not, but you do need a couple things to use them.. First of all go &lt;a href="http://weblogs.asp.net/bleroy/archive/2009/05/04/creating-jquery-plug-ins-from-microsoftajax-components.aspx"&gt;&lt;strong&gt;here (Bertrand Le Roy’s blog)&lt;/strong&gt;&lt;/a&gt; and pick up the jQuery plugin that let’s you instantiate MS Ajax Behaviors. Next go &lt;strong&gt;&lt;a href="http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326"&gt;here to the Ajax Control Toolbox project and get both the ScriptFilesOnly project and the Source code&lt;/a&gt;&lt;/strong&gt; as with MVC you won’t need anything but the JS files since the source/DLLs are for WebForms-related controls, but the Source code contains the debug version of the JS files which we’ll need (By the way, 6 months from now that link to the Ajax Control Toolbox will be old so you’ll probably want to get the latest release, and not the release I pointed at).&lt;/p&gt;
&lt;p&gt;Now let’s look at how you would wire up the DropShadow behavior (aka the DropShadow Extender). First of all, we need to figure out the references. Thanks to Visual Studio 2008, this is easy. Using the text editor/view of your choice, open up the DropShadowBehavior.Debug.js from the Source project (not the ScriptOnly zip); this is located under the zip file at .\AjaxControlToolkitSource\AjaxControlToolkit\DropShadow. When you open up the file you will see the following at the top of the file:&lt;/p&gt;
&lt;p&gt; &lt;/p&gt;
&lt;div style="BORDER-BOTTOM: silver 1px solid; TEXT-ALIGN: left; BORDER-LEFT: silver 1px solid; PADDING-BOTTOM: 4px; LINE-HEIGHT: 12pt; BACKGROUND-COLOR: #f4f4f4; MARGIN: 20px 0px 10px; PADDING-LEFT: 4px; WIDTH: 97.5%; PADDING-RIGHT: 4px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; MAX-HEIGHT: 200px; FONT-SIZE: 8pt; OVERFLOW: auto; BORDER-TOP: silver 1px solid; CURSOR: text; BORDER-RIGHT: silver 1px solid; PADDING-TOP: 4px" id="codeSnippetWrapper"&gt;
&lt;div style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px" id="codeSnippet"&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum1"&gt;   1:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;/// &amp;lt;reference name="MicrosoftAjax.debug.js" /&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum2"&gt;   2:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;/// &amp;lt;reference name="MicrosoftAjaxTimer.debug.js" /&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum3"&gt;   3:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;/// &amp;lt;reference name="MicrosoftAjaxWebForms.debug.js" /&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum4"&gt;   4:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;/// &amp;lt;reference path="../ExtenderBase/BaseScripts.js" /&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum5"&gt;   5:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;/// &amp;lt;reference path="../Common/Common.js" /&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum6"&gt;   6:&lt;/span&gt; &lt;span style="COLOR: #008000"&gt;/// &amp;lt;reference path="../RoundedCorners/RoundedCornersBehavior.js" /&amp;gt;&lt;/span&gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum7"&gt;   7:&lt;/span&gt; /// &amp;lt;reference path=&lt;span style="COLOR: #006080"&gt;"../Compat/Timer/Timer.js"&lt;/span&gt; /&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;The first 3 items are all the standard MS Ajax client library, so we’ll need to reference those. Now we need to look at the last 4 items. If you open up the files from the ScriptOnly zip file, you aren’t going to find these exact named files; to find the right file look at the end of the file name to find the actual file you need to reference. You’ll also need to reference jQuery and Bertrand Le Roy plugins. Here’s what the references look like:&lt;/p&gt;
&lt;div style="BORDER-BOTTOM: silver 1px solid; TEXT-ALIGN: left; BORDER-LEFT: silver 1px solid; PADDING-BOTTOM: 4px; LINE-HEIGHT: 12pt; BACKGROUND-COLOR: #f4f4f4; MARGIN: 20px 0px 10px; PADDING-LEFT: 4px; WIDTH: 97.5%; PADDING-RIGHT: 4px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; MAX-HEIGHT: 200px; FONT-SIZE: 8pt; OVERFLOW: auto; BORDER-TOP: silver 1px solid; CURSOR: text; BORDER-RIGHT: silver 1px solid; PADDING-TOP: 4px" id="codeSnippetWrapper"&gt;
&lt;div style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px" id="codeSnippet"&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum1"&gt;   1:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/MicrosoftAjax.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum2"&gt;   2:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/jquery-1.3.2.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum3"&gt;   3:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/JqueryPlugin/jquery.MicrosoftAjax.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum4"&gt;   4:&lt;/span&gt;  &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum5"&gt;   5:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/MicrosoftAjaxTimer.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum6"&gt;   6:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/MicrosoftAjaxWebForms.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;    &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum7"&gt;   7:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/AjaxCT/AjaxControlToolkit.ExtenderBase.BaseScripts.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum8"&gt;   8:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/AjaxCT/AjaxControlToolkit.Common.Common.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum9"&gt;   9:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/AjaxCT/AjaxControlToolkit.RoundedCorners.RoundedCornersBehavior.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum10"&gt;  10:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/AjaxCT/AjaxControlToolkit.Compat.Timer.Timer.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum11"&gt;  11:&lt;/span&gt; &amp;lt;script src=&lt;span style="COLOR: #006080"&gt;"Scripts/AjaxCT/AjaxControlToolkit.DropShadow.DropShadowBehavior.js"&lt;/span&gt; type=&lt;span style="COLOR: #006080"&gt;"text/javascript"&lt;/span&gt;&amp;gt;&amp;lt;/script&amp;gt;&lt;/pre&gt;
&lt;!--CRLF--&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;Here’s how we can then make every div with a “box” class to have a drop shadow:&lt;/p&gt;
&lt;div style="BORDER-BOTTOM: silver 1px solid; TEXT-ALIGN: left; BORDER-LEFT: silver 1px solid; PADDING-BOTTOM: 4px; LINE-HEIGHT: 12pt; BACKGROUND-COLOR: #f4f4f4; MARGIN: 20px 0px 10px; PADDING-LEFT: 4px; WIDTH: 97.5%; PADDING-RIGHT: 4px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; MAX-HEIGHT: 200px; FONT-SIZE: 8pt; OVERFLOW: auto; BORDER-TOP: silver 1px solid; CURSOR: text; BORDER-RIGHT: silver 1px solid; PADDING-TOP: 4px" id="codeSnippetWrapper"&gt;
&lt;div style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px" id="codeSnippet"&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum1"&gt;   1:&lt;/span&gt; $().ready(&lt;span style="COLOR: #0000ff"&gt;function&lt;/span&gt;() {&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum2"&gt;   2:&lt;/span&gt;     $(&lt;span style="COLOR: #006080"&gt;".box"&lt;/span&gt;).create(AjaxControlToolkit.DropShadowBehavior,&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum3"&gt;   3:&lt;/span&gt;             { &lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum4"&gt;   4:&lt;/span&gt;                 Opacity: 0.3,&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum5"&gt;   5:&lt;/span&gt;                 Rounded: &lt;span style="COLOR: #0000ff"&gt;false&lt;/span&gt;,&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum6"&gt;   6:&lt;/span&gt;                 TrackPosition: &lt;span style="COLOR: #0000ff"&gt;true&lt;/span&gt;,&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum7"&gt;   7:&lt;/span&gt;                 Width: 5&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: #f4f4f4; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum8"&gt;   8:&lt;/span&gt;             });&lt;/pre&gt;
&lt;!--CRLF--&gt;
&lt;pre style="BORDER-BOTTOM-STYLE: none; TEXT-ALIGN: left; PADDING-BOTTOM: 0px; LINE-HEIGHT: 12pt; BORDER-RIGHT-STYLE: none; BACKGROUND-COLOR: white; MARGIN: 0em; PADDING-LEFT: 0px; WIDTH: 100%; PADDING-RIGHT: 0px; FONT-FAMILY: &amp;quot;Courier New&amp;quot;, courier, monospace; DIRECTION: ltr; BORDER-TOP-STYLE: none; COLOR: black; FONT-SIZE: 8pt; BORDER-LEFT-STYLE: none; OVERFLOW: visible; PADDING-TOP: 0px"&gt;&lt;span style="COLOR: #606060" id="lnum9"&gt;   9:&lt;/span&gt; });&lt;/pre&gt;
&lt;!--CRLF--&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p&gt;See that JSON string (lines 3-8). If you look at those settings closely and compare them to the Ajax Control Toolbox documentation web site, you’ll see that these are the same settings that the extender uses which should make everything easy.&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2806.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/06/09/using-the-ajax-control-toolbox-with-asp.net-mvc-and-jquery.aspx</guid>
            <pubDate>Wed, 10 Jun 2009 02:19:30 GMT</pubDate>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/06/09/using-the-ajax-control-toolbox-with-asp.net-mvc-and-jquery.aspx#feedback</comments>
            <slash:comments>5</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2806.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Client-side Scripting 101 Part 2: JavaScript OOP Basics</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/02/03/client-side-scripting-101-part-2-javascript-oop-basics.aspx</link>
            <description>&lt;p&gt;[Sorry this took so long to get out… I have been distracted by Windows 7 and am working between 2 OS’ on 1 machine… Win7 is now my primary OS and I didn’t have this post here… that and I’m now twittering doesn’t help either]&lt;/p&gt;  &lt;p&gt;Ok, since in the first version of my last &lt;a href="http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx"&gt;article&lt;/a&gt; I referenced the "prototype" property, it felt natural to begin by talking about JavaScript OOP basics. Now, I’m not going to try to define all the terms that usually get associated with the type of OOP used in JavaScript ("JS" hereafter). I want to give you --my valued reader-- with the practical knowledge. So let’s go over how JS as a language works:&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;JavaScript objects and types are extensible simply through use&lt;/strong&gt;     &lt;br /&gt;What this means that to add a field to a JS object you need only reference the field. As a result there are 3 states of any value that you interrogate in JS: has a value (like 2, "v2", etc), is null, is undefined. "Null" means that the type member (property, field, method) is defined, but as of yet there is no value here. "Undefined" means that a type member does not exist as of yet. So let’s illustrate this with some code:&lt;/p&gt;  &lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;   &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;     &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; myObj = &lt;span style="color: #0000ff"&gt;{}&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; myObj.myNewProperty = &lt;span style="color: #0000ff"&gt;null&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; test1 = &lt;span style="color: #0000ff"&gt;typeof&lt;/span&gt;(myObj.myNewProperty) == &lt;span style="color: #006080"&gt;"undefined"&lt;/span&gt;; &lt;span style="color: #008000"&gt;// returns false&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; test2 = &lt;span style="color: #0000ff"&gt;typeof&lt;/span&gt;(myObj.myOtherNewProperty) == &lt;span style="color: #006080"&gt;"undefined"&lt;/span&gt;; &lt;span style="color: #008000"&gt;// returns true&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; test3 = (myObj.myNewProperty == &lt;span style="color: #0000ff"&gt;null&lt;/span&gt;); &lt;span style="color: #008000"&gt;// returns true&lt;/span&gt;&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;So what did we do there? Well, we created a new object; the "{}" is short hand for "new object()." BTW, that’s really JSON syntax (there’s more to that and we’ll cover it much later in another column). After creating an empty object we create a "myNewProperty" field and set it’s value to null (this field is created and is "defined"). Next we do a couple tests on the variable. The first test checks to see if the "myNewProperty" field on the created object is undefined (it is defined so test1 is false). The next test checks to see if the "myOtherNewProperty" field on the created object is undefined (since this is the first time we referenced it, the field is in fact undefined, so test2 is true). Finally we test to see if the "myNewProperty" field on the created object is null (which it is).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;JavaScript object’s members can be referenced like a dictionary&lt;/strong&gt; 

  &lt;br /&gt;In the example above we could have referenced the "myNewProperty" field like this:&lt;/p&gt;

&lt;div&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;myObj[&lt;span style="color: #006080"&gt;"myNewProperty"&lt;/span&gt;] = &lt;span style="color: #0000ff"&gt;null&lt;/span&gt;;&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div&gt;What this means that with JS we can sometimes reference object members as if they were an array or more like a HashTable in .NET. The real importance of this is that JS objects are really strange characters in that they can be manipulated like both an object and an array/dictionary/hashtable. We’ll be briefly revisiting this syntax at the end of the Prototype section (but don’t blink… it’s really fast). &lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Function is used to create a class  &lt;br /&gt;&lt;/strong&gt;So thus far, we have extended objects and not classes. In JS we can use the Function type to define a class (I know that seems weird, but bear with me). Functions can contain other functions which have access to all the variables within them and any variable that it’s parent function can access. The constructor is actually the parent function. Let’s look at an example:&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;function&lt;/span&gt; myClass()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt;   &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; privateVar = &lt;span style="color: #006080"&gt;"Private variable"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt;   &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicVar = &lt;span style="color: #006080"&gt;"public variable"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt;   &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicFn = &lt;span style="color: #0000ff"&gt;function&lt;/span&gt;() {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   6:&lt;/span&gt;     &lt;span style="color: #008000"&gt;// this fn can manipulate any of the above vars including the private ones&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   7:&lt;/span&gt;     privateVar = &lt;span style="color: #006080"&gt;"Private accessed by publicFn"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   8:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; &lt;span style="color: #006080"&gt;"Public Function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   9:&lt;/span&gt;   }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  10:&lt;/span&gt; }&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;myClass is a class that has a single private variable called “privateVar”. It has 1 public variable/field called “publicVar” and a public function called “publicFn.” We can create a variable of this type by doing the following:&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; myNewObject = &lt;span style="color: #0000ff"&gt;new&lt;/span&gt; myClass();&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;The above example isn’t the way this is normally done though. Here’s why. That initial function/constructor looks really weird with the function declaration inside of it (imagine a public field declared after the a function declaration. It would get really messy quickly).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prototype&lt;/strong&gt; 

  &lt;br /&gt;So instead there is a special properties called “prototype” which can be used to add additional members to a function. Here’s an example of what that looks like:&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; myClass = &lt;span style="color: #0000ff"&gt;function&lt;/span&gt;()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;var&lt;/span&gt; privateVar = &lt;span style="color: #006080"&gt;"Private Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicVar = &lt;span style="color: #006080"&gt;"Public Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt; }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   6:&lt;/span&gt; myClass.prototype.publicFN = &lt;span style="color: #0000ff"&gt;function&lt;/span&gt;()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   7:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   8:&lt;/span&gt;     privateVar = &lt;span style="color: #006080"&gt;"Private var accessed by function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   9:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; &lt;span style="color: #006080"&gt;"Public Function"&lt;/span&gt;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  10:&lt;/span&gt; }&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;&lt;/p&gt;

&lt;p&gt;We made a couple changes here. First we switched the order around for the function declaration. This is all perfectly legal. The function syntax creates an anonymous function and assigns it to the myClass (for instance). As you can see from the prototype syntax on line 6 that you simply extend the prototype object like we did earlier in the first code example.&lt;/p&gt;

&lt;p&gt;We’re almost done. Let’s make a slight change to the more preferred syntax(and see our first very small example of JSON):&lt;/p&gt;

&lt;div style="border-bottom: gray 1px solid; border-left: gray 1px solid; padding-bottom: 4px; line-height: 12pt; background-color: #f4f4f4; margin: 20px 0px 10px; padding-left: 4px; width: 97.5%; padding-right: 4px; font-family: consolas, 'Courier New', courier, monospace; max-height: 200px; font-size: 8pt; overflow: auto; border-top: gray 1px solid; cursor: text; border-right: gray 1px solid; padding-top: 4px"&gt;
  &lt;div style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;
    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   1:&lt;/span&gt; myClass = function()&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   2:&lt;/span&gt; {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   3:&lt;/span&gt;     var privateVar = &lt;span style="color: #006080"&gt;"Private Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   4:&lt;/span&gt;     &lt;span style="color: #0000ff"&gt;this&lt;/span&gt;.publicVar = &lt;span style="color: #006080"&gt;"Public Var"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   5:&lt;/span&gt; }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   6:&lt;/span&gt; myClass.prototype = {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   7:&lt;/span&gt;     publicFn : function() {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   8:&lt;/span&gt;         privateVar = &lt;span style="color: #006080"&gt;"Private Var changed by function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;   9:&lt;/span&gt;         &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; &lt;span style="color: #006080"&gt;"Public Function"&lt;/span&gt;;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  10:&lt;/span&gt;     },&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  11:&lt;/span&gt;     get_PrivateVar : function() {&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  12:&lt;/span&gt;         &lt;span style="color: #0000ff"&gt;return&lt;/span&gt; privateVar;&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: white; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  13:&lt;/span&gt;     }&lt;/pre&gt;

    &lt;pre style="border-bottom-style: none; padding-bottom: 0px; line-height: 12pt; border-right-style: none; background-color: #f4f4f4; margin: 0em; padding-left: 0px; width: 100%; padding-right: 0px; font-family: consolas, 'Courier New', courier, monospace; border-top-style: none; color: black; font-size: 8pt; border-left-style: none; overflow: visible; padding-top: 0px"&gt;&lt;span style="color: #606060"&gt;  14:&lt;/span&gt; }&lt;/pre&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;p&gt;Not much has changed from the last version except one thing, and we’re setting the prototype function to an object (remember that the squiggly brackets are JSON syntax for object). The methods are mapped out using a “name:value” syntax. and is comma separated (you get a weird error if that comma is missing). We also went ahead and added one more new member which now exposes our private variable via a “property” get function.&lt;/p&gt;

&lt;p&gt;There’s actually another variation on the syntax, but this is good enough for now. With this in hand you should be able too read just about any JavaScript object library and figure out where you can call things.&lt;/p&gt;

&lt;p&gt;You might also notice that inheritance doesn’t look like it’s baked in… which is absolutely correct! Inheritance is not baked in. You have to use a separate framework to get it (it shouldn’t be that hard to see how one would get inheritance. One way would be to simply query the Parent type’s prototype and add those methods/properties to the child class; we can do all this by using that dictionary/HashTable syntax we mentioned above and a foreach loop. There are other ways as well but that is way beyond the scope of this tutorial --and really isn’t something you should care all that much about right now).&lt;/p&gt;

&lt;p&gt;After all, being able to read this syntax was our overall goal (we want to use Script# to actually do our programming).&lt;/p&gt;

&lt;p&gt;Next time we’ll cover Script# basics. (I’ll try not to take 3 weeks to get you the next installment)&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2740.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/02/03/client-side-scripting-101-part-2-javascript-oop-basics.aspx</guid>
            <pubDate>Tue, 03 Feb 2009 21:50:02 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2740.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/02/03/client-side-scripting-101-part-2-javascript-oop-basics.aspx#feedback</comments>
            <slash:comments>1</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2740.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Client-side Scripting 101 Part 1: The Reasons</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx</link>
            <description>&lt;p&gt;[Welcome to my multi-part tutorial on. I know I did an introduction earlier in the month, but before we dig in deep into this I thought it would be good to get a few questions out of the way.]&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;font size="4"&gt;Why is this (Client-side Scripting) all that important to me?&lt;/font&gt;&lt;/strong&gt; &lt;br /&gt;
You may be thinking "&lt;em&gt;Hey Jay, my company bought Telerik/Component Arts/Component One/{fill in some other ASP.NET tools suite} and it seems to do everything I need and more. I can see some places where a little client-side code is helpful, but it’s not that important, is it?&lt;/em&gt;"&lt;/p&gt;
&lt;p&gt;Well, I’m definitely not one to criticize the third party tools vendors, but their tools are just that tools. If your site grows large enough you will run into a place where you need to tweak their tools, and my experience is that all the ones I’ve mentioned have really nice client-side APIs that underlie their server-side components. Stuff that will really let you push the envelope of their tools. But, you probably already know that. The hard part is for all the great things these tools can do, sometimes you need something else (usually a little more light weight). In order to do this you need a background in client-side technologies so that you are able to assess your solutions.  &lt;/p&gt;
&lt;p&gt;For instance, in my day job I created an MS Ajax behavior that takes a regular HTML table and adds a selection behavior. We did this to replace the big name grid we are using because, while this grid does amazing things, it also comes with a price of a heavy footprint and a larger than desired viewstate (we’re trying to slim our pages for performance sake). I also have created 2 additional behaviors: one injects client-side paging to a regular HTML table, and the other provides sorting functionality via the column header row. All of these behaviors inherit from a common class that wraps the table. My lightweight behaviors are simple components that can handle up to about 1000 rows which make them really useful for smaller sets of data. I tried them on as many as 5000 rows which gave OK but sluggish performance, and with 10,000 rows was simply unusable (I was using all three components, so it might be possible to use say just the paging and get decent performance). &lt;/p&gt;
&lt;p&gt;It comes in handy to be able to build these types of lightweight components (which incidentally only took me about 40 hours to build all 3 which included server-side extenders).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Our first term: &lt;em&gt;Client-side (or Ajax) Behavior &lt;br /&gt;
&lt;/em&gt;&lt;/strong&gt;Since I have thrown the term "&lt;em&gt;behavior&lt;/em&gt;" out a couple of times, let’s go ahead and define what it is exactly. In the realm of MS Ajax (and other frameworks), a client-side behavior is a client-side component/class that injects functionality into an HTML element. In MS Ajax, it is a separate component that is associated with an HTML element. When activated, it usually sets up UI events (onclick, onfocus, etc.) to intercept some UI interaction and apply new interactions. It can also inject additional css classes/styles or html elements on the page to apply a particular look (which is what the Ajax Control Toolbox’s Drop Shadow and the Rounded Corners behaviors do). It all depends on what the component needs to do. If you have played with any MS Ajax toolbox on the server side, you have probably throw Ajax Extender controls on a form; extenders are a server-side wrapper for the client behaviors. I hope that’s clear. If not fire off some comments to me at the bottom of this post and I’ll try to better explain in the comments (and will update this accordingly).&lt;/p&gt;
&lt;p&gt;One of my goals for this blog series is to take you from knowing a little bit about client-scripting (and maybe nothing) to being able to build your own behaviors and extenders.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;font size="4"&gt;JavaScript is like a foreign language to me... Why couldn’t this be easier?&lt;/font&gt;&lt;/strong&gt; &lt;br /&gt;
This may shock you, but I struggle with it too -- and I’m a(n admittedly) self-proclaimed guru with it. Two weeks ago (I was off last week) I wrote a very simple JavaScript component/class and I forgot something. I set up a timer event and it wasn’t making the call correctly into my class. Eventually I realized that what was happening was that I was calling a method within my JavaScript class and the instance of that class was being lost. I needed to use the MS Ajax "Function.createDelegate" function to get a wrapper function that wouldn’t lose the instance of my class. This is a total pain in the you-know-where. I actually told my boss that this is the exact reason I use &lt;a href="http://projects.nikhilk.net/ScriptSharp"&gt;Script#&lt;/a&gt; since it takes care of this stuff for me. &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;What the Heck is Script#?&lt;/strong&gt; &lt;br /&gt;
&lt;a href="http://projects.nikhilk.net/ScriptSharp"&gt;Script#&lt;/a&gt; is a life saver! It is the invention of Nikhil Kothari (MS Ajax Architect and SilverLight2 Architect, and he is one of my heroes... I hope I get to meet him at Mix09). What it does is let you write C# code in Visual Studio against a framework (either Nikhil’s or MS Ajax... there are also jQuery extensions and a few others for it as well). This framework has a set of CoreLib replacements (System, etc.) that consist of set of .NET dlls and a set of JS client libraries. When you compile this code, you get a DLL which can be used in other Script# projects (yes, there are VS templates for creating a new Script# project), and  a set of JS files (debug and shrunk runtime versions). Script# makes it easy to create multiple inherited classes (an object tree if you will) as well as it handles things like passing functions around. &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;So that means I don’t have to know anything about JS right? Cool!&lt;/strong&gt; &lt;br /&gt;
Hang on there! You will need to know a little bit about this stuff as it will help you read the code generated by JS. You can always patch bugs with Script#, but testing will (at this time) always exist in the JS side (in a browser), so you need to know enough to get around the source code that gets generated. The line numbers will always point to a line in the generated JavaScript (for instance), so your going to need to be able to read the JavaScript file and determine where the problems exist (you can still fix the code in your C# code, and can write debug messages that show up in the JavaScript console (or in VS if you are debugging the script running in IE).&lt;/p&gt;
&lt;p&gt;So next up will be a column on JS OOP Basics.&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2729.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx</guid>
            <pubDate>Sat, 03 Jan 2009 03:13:43 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2729.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2009/01/02/client-side-scripting-101-part-1-the-reasons.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2729.aspx</wfw:commentRss>
        </item>
        <item>
            <title>PDC2008: Reactions to ASP.NET 4.0 upcoming features presentation</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/10/30/pdc2008-reactions-to-asp.net-4.0-upcoming-features-presentation.aspx</link>
            <description>&lt;p&gt;I’m listening/watching this &lt;a href="http://channel9.msdn.com/pdc2008/PC20/"&gt;video&lt;/a&gt; on Channel9 which is on the ASP.NET 4.0 preview. Scott Hunter is the main presenter (at least at the beginning). This will probably be a little different of a post by me...&lt;/p&gt;  &lt;ul&gt;   &lt;li&gt;Web Forms&lt;/li&gt;    &lt;ul&gt;     &lt;li&gt;Did he say "HTML Standards Compliant?" (cool!)&lt;/li&gt;      &lt;li&gt;ClientIDs will be controlled by us (no more mangling... Hurray!)&lt;/li&gt;      &lt;li&gt;Moving away from table-based controls and using CSS2 adapters (sort of... invisibly)&lt;/li&gt;      &lt;li&gt;URL Routing (yawn... We have this in SP1... It’ll probably be easier to use)&lt;/li&gt;      &lt;li&gt;Supposedly better View-state controls (I’m dubious about this)&lt;/li&gt;      &lt;ul&gt;       &lt;li&gt;More granular control&lt;/li&gt;        &lt;li&gt;Ability to turn off Viewstate on Gridview/Listview without issues&lt;/li&gt;     &lt;/ul&gt;   &lt;/ul&gt;    &lt;li&gt;Client Script&lt;/li&gt;    &lt;ul&gt;     &lt;li&gt;jQuery intellisense (did he go to a Google site?)&lt;/li&gt;      &lt;li&gt;Ajax Control Toolkit will be adopted by MS (it will be a part of ASP.NET in 4.0)&lt;/li&gt;      &lt;ul&gt;       &lt;li&gt;MS will support it.&lt;/li&gt;        &lt;li&gt;MS will enhance it&lt;/li&gt;     &lt;/ul&gt;      &lt;li&gt;Rich Client-side templating controls (I’m already embedded in this stuff)&lt;/li&gt;      &lt;ul&gt;       &lt;li&gt;[Wow.. Bertrand is up..]&lt;/li&gt;        &lt;li&gt;[I wish I could see the source code... I hope they give that away]&lt;/li&gt;        &lt;li&gt;The big thing is that JS it’s pretty easy to do and it minimizes the amount code you need to write on the client&lt;/li&gt;     &lt;/ul&gt;      &lt;li&gt;Phil’s demo (mentioned below) reiterates that MS Ajax and jQuery work well together&lt;/li&gt;   &lt;/ul&gt;    &lt;li&gt;ASP.NET MVC [not something I’m extremely excited about, but I am interested in it]&lt;/li&gt;    &lt;ul&gt;     &lt;li&gt;Hint at a auto build of pages when you point at an object... (Dynamic Data??)&lt;/li&gt;      &lt;li&gt;Ajax in MVC with MVC &lt;/li&gt;      &lt;ul&gt;       &lt;li&gt;[It’s Phil Haaack...]&lt;/li&gt;        &lt;li&gt;Phil demos Partial rendering &lt;/li&gt;        &lt;ul&gt;         &lt;li&gt;returning a couple items in a JSON string &lt;/li&gt;          &lt;li&gt;[Actually in some respects Ajax can be easier in an MVC app... in any MVC app not just MS' ASP.NET MVC]&lt;/li&gt;          &lt;li&gt;[Phil blew up his text... I can actually read it]&lt;/li&gt;          &lt;li&gt;Next demo is sort of an UpdatePanel-like demo [simple To Do list updated without a page render by the browser]&lt;/li&gt;          &lt;ul&gt;           &lt;li&gt;Uses "using Ajax.BeginForm" to define the scope of the form tag [very cool IMO]&lt;/li&gt;            &lt;li&gt;BeginForm has some options that let you define what you want to happen when the form is submitted and returns and then what you can execute something after the submit is done [in this case a background call is made and a specified DOMElement is updated and then jQuery effect is called]&lt;/li&gt;         &lt;/ul&gt;       &lt;/ul&gt;     &lt;/ul&gt;   &lt;/ul&gt;    &lt;li&gt;ASP.NET Dynamic Data&lt;/li&gt;    &lt;ul&gt;     &lt;li&gt;More than Scaffolding [Not to self I need to check this out some more]&lt;/li&gt;      &lt;ul&gt;       &lt;li&gt;[Scott Hunter is demoing this]&lt;/li&gt;        &lt;li&gt;Demo is a blog app [same as one of the initial Rails tutorials]&lt;/li&gt;        &lt;li&gt;It builds a set of templates for your data model&lt;/li&gt;        &lt;li&gt;It uses these templates for the data display/edit/etc.&lt;/li&gt;     &lt;/ul&gt;      &lt;li&gt;Enhancing (surprise, surprise) MVC [for those who don’t know this makes ASP.NET MVC a real competitor to Rails]&lt;/li&gt;      &lt;li&gt;Supports custom Data Layer aka Business Logic Data Source&lt;/li&gt;      &lt;li&gt;Better filtering&lt;/li&gt;      &lt;li&gt;Better control over column order, and columns that are shown&lt;/li&gt;      &lt;li&gt;Dynamic Data to ADO.NET Data Services [Pronounced "Astoria"]&lt;/li&gt;      &lt;li&gt;[Another demo to show the last 3]&lt;/li&gt;      &lt;ul&gt;       &lt;li&gt;Search screen [a lot of which is automated if not all... he doesn’t show how we get here... just the code that is here]&lt;/li&gt;        &lt;li&gt;Created via LinqDataSource with a where child tag that has additional child tags defining fields to search on&lt;/li&gt;        &lt;li&gt;Same LinqDataSource can control the visibility of fields&lt;/li&gt;     &lt;/ul&gt;      &lt;li&gt;Dynamic Data works against IQueryable Data source : LinqDataSource (EF, LINQ to SQL, etc.),  AstoriaDataSource, Business Logic DataSource (sort of like the Object DataSource except that the class is IQueryable aka usable from a LINQ query [Cool!])&lt;/li&gt;   &lt;/ul&gt;    &lt;li&gt;Astoria DataSource which allows an Astoria service as the source of data in a server-side app [Yay!]&lt;/li&gt;    &lt;li&gt;ASP.NET Core changes&lt;/li&gt;    &lt;ul&gt;     &lt;li&gt;Swap out the Cache mechanism via a provider mechanism [Yay!]&lt;/li&gt;      &lt;li&gt;Fixes to pain points&lt;/li&gt;   &lt;/ul&gt; &lt;/ul&gt;  &lt;p&gt;[I skipped the questions] &lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2705.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/10/30/pdc2008-reactions-to-asp.net-4.0-upcoming-features-presentation.aspx</guid>
            <pubDate>Thu, 30 Oct 2008 16:05:13 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2705.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/10/30/pdc2008-reactions-to-asp.net-4.0-upcoming-features-presentation.aspx#feedback</comments>
            <slash:comments>2</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2705.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Tampa UX (TUX) First Meeting Tomorrow Night (Sept. 10th, 2008)!</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/09/09/tampa-ux-tux-first-meeting-tomorrow-night-sept.-10th-2008.aspx</link>
            <description>&lt;p&gt;Since we are still waiting on the website to go live (it will be at &lt;a href="http://www.tampaux.org"&gt;http://www.tampaux.org&lt;/a&gt; once the files get copied up), here’s some detailed info on the TUX meeting tomorrow ay 6:30 (for food) with the actual meeting starting around 7:00pm (we should be done around 9:00pm)&lt;/p&gt;  &lt;p&gt;Here’s Answers Systems (where we’re meeting) on Virtual Earth&lt;/p&gt;  &lt;div class="wlWriterSmartContent" id="scid:84E294D0-71C9-4bd0-A0FE-95764E0368D9:926223b2-f2ec-40bc-ae3e-44751ae34e87" style="padding-right: 0px; display: inline; padding-left: 0px; float: none; padding-bottom: 0px; margin: 0px; padding-top: 0px"&gt;&lt;a href="http://maps.live.com/default.aspx?v=2&amp;amp;cp=28.03562~-82.65376&amp;amp;lvl=13&amp;amp;style=r&amp;amp;sp=aN.28.03668_-82.65289_Answer%2520Systems_Next%2520to%2520McDonald’s&amp;amp;mkt=en-US&amp;amp;FORM=LLWR" id="map-ada06814-4816-4d8c-a9b0-1f4701777f7a" alt="Click to view this map on Live.com" title="Click to view this map on Live.com"&gt;&lt;img src="http://theruntime.com/blogs/images/theruntime_com/blogs/jaykimble/WindowsLiveWriter/TampaUXTUXFirstMeetingTomorrowN.10th2008_CB9F/map-51b5592a42c6.jpg" width="320" height="240" alt="Map image" /&gt;&lt;/a&gt;&lt;/div&gt;  &lt;p&gt;That address is &lt;/p&gt;  &lt;p&gt;4029 Tampa Rd, Oldsmar, FL 34677-3206.&lt;/p&gt;  &lt;p&gt;Basically, if you are coming from Tampa, take Hillsborough Ave. to Oldsmar. We’re the bullding (on the same side of the street) just past the McDonald’s that you come to after passing RaceTrack Rd.&lt;/p&gt;  &lt;p&gt;If you are coming from Pinellas, take 580 (or Tampa Rd) east. Look for right after 580 merges with Tampa Rd, look for the McDonald’s on the left (you can also turn at the light right after the merger with Tampa Rd. (but then you have to drive clear through the parking lot to get to our building).&lt;/p&gt;  &lt;p&gt;Answers Systems is the building next to McDonald’s (actually it is across the little side road there... not sure of the name... the back of our building faces McDonald’s).&lt;/p&gt;  &lt;p&gt;BTW, if you get lost my cell phone is 727.608.6453 (feel free to call me if you get lost).&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;PS Contest!&lt;/strong&gt;&lt;/p&gt;  &lt;p&gt;In case you forgot, some lucky winner will walk away with an MSDN Premium Subscription (thanks to Bill Reiss)&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2675.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/09/09/tampa-ux-tux-first-meeting-tomorrow-night-sept.-10th-2008.aspx</guid>
            <pubDate>Tue, 09 Sep 2008 18:28:54 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2675.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/09/09/tampa-ux-tux-first-meeting-tomorrow-night-sept.-10th-2008.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2675.aspx</wfw:commentRss>
        </item>
        <item>
            <title>TUX Update... (AKA I missed something)</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/09/04/tux-update.-aka-i-missed-something.aspx</link>
            <description>&lt;p&gt;&lt;strong&gt;MSDN Premium Subscription is up for grabs&lt;/strong&gt;&lt;/p&gt;  &lt;p&gt;I forgot to mention this &lt;a href="http://theruntime.com/blogs/jaykimble/archive/2008/09/03/tux-tampa-ux-is-next-wednesday-sept.-10th-at-630pm.aspx"&gt;yesterday&lt;/a&gt;. Bill Reiss our resident MVP is giving away an MSDN Premium Subscription. So if you come you have a chance at &lt;img height="154" src="http://theruntime.com/blogs/images/theruntime_com/blogs/jaykimble/WindowsLiveWriter/TUXTampaUXisnextWednesdaySep.10that630pm_125D9/tux%20penguin_4.png" width="169" align="right" /&gt;getting it.&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;Multi-location&lt;/strong&gt;&lt;/p&gt;  &lt;p&gt;BTW, we are working toward being multi-location, so if you are in another state in the US (probably more of an East Coast thing) or in Florida, one of our goals is to make our meetings available via streaming (but only to groups... sorry you won’t be able to just dial up our stream from your desk at home)&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2673.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/09/04/tux-update.-aka-i-missed-something.aspx</guid>
            <pubDate>Thu, 04 Sep 2008 20:27:56 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2673.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/09/04/tux-update.-aka-i-missed-something.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2673.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Writing Better JS Components</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/08/12/writing-better-js-components.aspx</link>
            <description>&lt;p&gt;Perry (my boss... a developer/manager... he codes and manages) and I have been having a recurring conversation lately. One that keeps bringing to my mind a product that I knew about when I worked for ZAC Catalogs (way back in the day). I would daresay that none of you had even heard of it (although we did pick it up as a result of Xtras carrying it, so maybe a few of you knew about it). I believe it was a called "MFC DataGrid Wizard" or something like that. Anyway what it did was build a custom DataGrid component for you based on selections in a wizard. You selected what features you needed and then it would take it’s full-featured Grid source code (which came with the component) and would dynamically generate a full blown component for you with just the features you needed. &lt;/p&gt;  &lt;p&gt;There are two reasons this has become a topic for discussion for me. The first is that we are currently struggling with a set of third party components that a prior developer/manager pushed all over our main site. The components are ones that you have probably heard great things about them and they are pretty cool. The problem is when you shove these components everywhere! We are having ViewState issues among other things... One of the components is a full-featured Grid control (client-side) that while nice we usually only use as a glorified listbox (we use it for selecting an item). As a result I built a specialized DataGrid for our company (one that I’ll be doing a walkthrough on its codebase at the first &lt;a href="http://theruntime.com/blogs/jaykimble/archive/2008/07/17/tampa-user-experience-tux-user-group-is-coming-september-10th.aspx"&gt;TUX user group meeting next month&lt;/a&gt;)&lt;/p&gt;  &lt;p&gt;The other reason is this &lt;a href="http://weblogs.asp.net/bleroy/archive/2008/08/05/need-a-simple-grid-for-asp-net-ajax.aspx"&gt;post from Bertrand LeRoy&lt;/a&gt; where he talks about a &lt;a href="http://weblogs.asp.net/bleroy/archive/2008/08/05/need-a-simple-grid-for-asp-net-ajax.aspx"&gt;simple grid for ASP.NET&lt;/a&gt;. Here’s my problem with Bertrand’s post. The grid he talks about as being simple really doesn’t sound all that simple to my ears. Let me list a couple features:&lt;/p&gt;  &lt;ul&gt;   &lt;li&gt;Column drag/drop&lt;/li&gt;    &lt;li&gt;Different column types&lt;/li&gt;    &lt;li&gt;Data Sorting/Paging&lt;/li&gt;    &lt;li&gt;Inline editing&lt;/li&gt; &lt;/ul&gt;  &lt;p&gt;Now mind you these are awesome features if you need them all then you would want to use something like this, but a lot of times what we need is something simpler. You could use the aforementioned grid for this, but the grid will probably still use ViewState (because it needs it maintain state for the paging, sorting, and editing features). It might need several more scripts or &amp;lt;shudder /&amp;gt; it’s script might be 500-1000 lines longer because of the added features.&lt;/p&gt;  &lt;p&gt;&lt;strong&gt;A Better Way&lt;/strong&gt;&lt;/p&gt;  &lt;p&gt;I have been thinking about a better way to "do" script components. We really need to have a wizard that asks us what we will be needing in the components and then the main script file can be customized (as can the server side code) to remove certain things. It could be done really easy with templates for the script. You need a template for the main file, and additional includes based on features. The server side would work pretty much the same way. I know that no company really wants to give away their source, but even if they were able to do this for script code that would make our lives a lot easier.&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2658.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/08/12/writing-better-js-components.aspx</guid>
            <pubDate>Tue, 12 Aug 2008 12:04:33 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2658.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/08/12/writing-better-js-components.aspx#feedback</comments>
            <slash:comments>2</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2658.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Tampa User eXperience (TUX) User Group is coming September 10th, 2008&amp;hellip;</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/07/17/tampa-user-experience-tux-user-group-is-coming-september-10th.aspx</link>
            <description>&lt;p&gt;I am proud to announce that I and a couple other guys are starting User Group that revolves around User Experience (or UX) in the MS tools eco-system. The other guys are Shawn Cady, Perry Panagopoulos, and Bill Reiss (MVP) [Bill always gets his MVP props].&lt;/p&gt;
&lt;p&gt;I could give you all their backgrounds, but I’ll make them do it at the first meeting. I’m sure Papa Fish (aka &lt;a href="http://www.devfish.net"&gt;www.devfish.net&lt;/a&gt;) the local MS Dev Evangelist (my Blog Father) Joe Healy will be around (at least for the first meeting).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;TUX' Focus &lt;br /&gt;
&lt;/strong&gt;Our focus will be on the "now" of Ajax and how it integrates with ASP.NET (in all its various forms), and the "future" of Silverlight2, and anything in between (like adding Silverlight2 controls to Ajax sites, etc); we’ll not be stuck in just Web either... we’ll probably do some WPF as well. We’ll also be  dealing with some of those more abstract things that you need to get better at (like how to be a better designer, creating good user experiences, etc.), and we will do our best to keep this group "devsigner-friendly" (devsigner is a developer who is also a designer).&lt;/p&gt;
&lt;p&gt;We have a lot of really creative ideas to make this fun and useful to you today as well as with an eye for the future (but I don’t want to blow them all)... We will definitely keep this interactive and will try to help you solve your problems as well (at least we’ll be around to chat with you before and afterward).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;First Talk: Intro To MS Ajax Scripting&lt;/strong&gt; &lt;br /&gt;
The first person to present will be me. I will be pulling a talk out of my paid pile which means that you have probably never seen me give this talk (unless you work at one of the companies I gave it at)... this is very special and will never be repeated (well, maybe). This talk is one that I have yet to see anyone give (for free). It’s an introduction to the MS Ajax scripting framework. Oftentimes you see a demo where someone shows you how to build an Ajax Extender control where a JavaScript is thrown in, but rarely (I’ve never seen it done) does someone talk to you about building the script behavior which is used to create the Server-Side Extender (I will in fact be doing just this). You will leave this talk with the knowledge of how to do it. As is often the case when I talk about JavaScript, I’ll end with a Script# demo which will make your life a lot easier (so we’ll build the last demo in C# which will be compiled to MS Ajax-style JavaScript); this big demo is a selection grid behavior that I built for my employer to replace a commercial grid component that we were using; you’ll definitely have a use for it.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Bonus&lt;/strong&gt; &lt;br /&gt;
We’ll have Pizza provided by Answers Systems, so just get there after work... you don’t need to eat first.&lt;/p&gt;
&lt;p&gt;AND!!!! Bill Reiss (MVP) has graciously given us an &lt;strong&gt;&lt;em&gt;MSDN Premium Subscription&lt;/em&gt;&lt;/strong&gt; (used to be MSDN Universal) to &lt;strong&gt;&lt;em&gt;give away&lt;/em&gt;&lt;/strong&gt;, so don’t miss it.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Where/When will it be?&lt;/strong&gt; &lt;br /&gt;
We will be holding these events at my workplace: Answers Systems in Oldsmar, FL. Better directions than this will follow in the near future (we will have a web site soon), but it’s right next to (West of) the Oldsmar Fleamarket on Tampa Rd (aka Hillsborough Ave). We plan to open the doors at 6:30pm with the activities starting at 7:00pm.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Can’t make it, but you really wanted to see my session?&lt;/strong&gt; &lt;br /&gt;
&amp;lt;sarcasm&amp;gt;So you are in my fan club (Eric Wise, I know that’s you since you maintain some of my stellar code), but you live in another state (like say the cold state of Ohio... where it’s 40 degrees Fahrenheit in August) so there is no way you could see this session by me, but you really, really want to see it, but the plane ticket is so expensive.&amp;lt;/sarcasm&amp;gt;&lt;/p&gt;
&lt;p&gt;Well, we plan on videoing our sessions and making them available online (as long as the speaker is OK with it, and I am... SO this is the LAST time I’ll be able to charge for this session... unless I revamp it which I will).&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Afterwards...&lt;/strong&gt; &lt;br /&gt;
I’m not Joe Healy so I can’t pick up the tab, but there is a Starbucks down the street that many of my colleagues and I like to frequent (Stimulants... I need a good stimulant not a depressant... but we could be talked into depressants), so don’t be surprised if we all end up somewhere afterwards or maybe somewhere else... &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;RSVP&lt;/strong&gt; &lt;br /&gt;
If you plan on coming please drop me a line via the contact form on this site. We need this to help us figure out how much Pizza to buy. &lt;/p&gt;
&lt;p&gt;&lt;strong&gt;PS&lt;/strong&gt; &lt;br /&gt;
In October (the 2nd Wednesday), Bill will be doing a Silverlight2 talk (He’s a Silverlight MVP and a soon-to-be Silverlight book author). It will be more of an intro, but he plans on really giving a nice overview from both the diesgn standpoint and the development standpoint.&lt;/p&gt;
&lt;p&gt;And, yes, we actually have a a list of things we’re thinking about for November... nothing definitive (yet), but we plan on being way ahead of the game (as best as we can).&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2645.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/07/17/tampa-user-experience-tux-user-group-is-coming-september-10th.aspx</guid>
            <pubDate>Fri, 18 Jul 2008 03:35:18 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2645.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/07/17/tampa-user-experience-tux-user-group-is-coming-september-10th.aspx#feedback</comments>
            <slash:comments>8</slash:comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2645.aspx</wfw:commentRss>
        </item>
        <item>
            <title>Types of Silverlight2 apps</title>
            <link>http://theruntime.com/blogs/jaykimble/archive/2008/07/07/types-of-silverlight2-apps.aspx</link>
            <description>&lt;p&gt;I want to go on record for a prediction. I believe when the dust settles with Silverlight2 (SL2, hereafter), we will have 2 major types of apps. To me this is fairly obvious, but if all you did was look at SL2 tutorials you would get a different view altogether. You see all the tutorials that exist out there show you what I think is the preferred way: a single application that lives in the browser as a plugin.&lt;/p&gt;  &lt;p&gt;I also see another SL2 type of app: the SL2 enhanced Ajax App. Seriously, there will be those who will use some of the fancy SL2 controls (and I’m talking about the third party ones that will be developed) to bring their Ajax apps into a new domain. So from a plumbing perspective they will stick with the familiar page model we have today. I think the draw of Ajax is strong and I would rather this not happen because it is my view that the SL2 framework is way better than classic DHTML/Ajax/Web2.0. There are those who will say, "I can’t leave the rich experience of JS on the client." (phooey... just code in DLR JScript instead if you want JavaScript).&lt;/p&gt;  &lt;p&gt;BTW, I also see a third model. The old model built with a single Sl2 applet on each page. I think this will be a minor idea, but I see it coming.&lt;/p&gt;  &lt;p&gt;-----------&lt;/p&gt;  &lt;p&gt;On another note, I’ll be putting up a few SL2 posts. I have been doing a fair bit of work with it in the last month or so. It definitely involves a slightly different mentality than classic web apps. &lt;/p&gt;  &lt;p&gt;My SL2 prototype actually uses a REST service built with MS MVC and with the MVC Contrib project’s Restful feature. I will write some on this in the not too distant future. I have really grown to like REST (and building a service the way I have is really great for quick prototyping).&lt;/p&gt;  &lt;p&gt;I’m actually starting to chew on Databinding (and doing CRUD operations on the data), so in time I’ll be writing about some of that stuff too.&lt;/p&gt;  &lt;p&gt;--------------&lt;/p&gt;  &lt;p&gt;Additionally, I am also working on starting a .NET UX user group here in Tampa Bay. I’m working with a couple of the local personalities to bring together a really good group. The group would focus on MS Ajax (and other Ajax Frameworks with ASP.NET and MS MVC) and Silverlight2 based apps. I can’t wait. It’s really exciting!&lt;/p&gt;&lt;img src="http://theruntime.com/blogs/jaykimble/aggbug/2641.aspx" width="1" height="1" /&gt;</description>
            <dc:creator>Jay Kimble</dc:creator>
            <guid>http://theruntime.com/blogs/jaykimble/archive/2008/07/07/types-of-silverlight2-apps.aspx</guid>
            <pubDate>Mon, 07 Jul 2008 21:03:02 GMT</pubDate>
            <wfw:comment>http://theruntime.com/blogs/jaykimble/comments/2641.aspx</wfw:comment>
            <comments>http://theruntime.com/blogs/jaykimble/archive/2008/07/07/types-of-silverlight2-apps.aspx#feedback</comments>
            <wfw:commentRss>http://theruntime.com/blogs/jaykimble/comments/commentRss/2641.aspx</wfw:commentRss>
        </item>
    </channel>
</rss>