Jovan's Bloghttp://www.componentart.com/community/blogs/jovan/default.aspxRamblings of a web control developer.enCommunityServer 2008.5 SP2 (Debug Build: 40407.4157)Let us know what you want!http://www.componentart.com/community/blogs/jovan/archive/2009/06/25/let-us-know-what-you-want.aspxThu, 25 Jun 2009 19:49:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:91889jovan8http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=91889http://www.componentart.com/community/blogs/jovan/archive/2009/06/25/let-us-know-what-you-want.aspx#comments<br />ComponentArt UI Framework 2009.2 Beta is now available for download. It includes the much-anticipated Scheduler control for ASP.NET AJAX as well as a number of new Silverlight controls.<br /><br />While the first preview of 2009.2 is out, there is plenty more development going on. In fact, now is your opportunity to choose exactly which features you want to see added! Here is how:<br /><ol><li><a href="http://www.componentart.com/download/beta.aspx">Download the beta version.</a> (You will have to sign up for a free account if you haven&#39;t already done so.)</li><li>Make sure to <a href="http://www.componentart.com/user/edituserprofile.aspx">change your account preferences</a> to indicate that you want to take part in the Beta Tester Program.</li><li>Within a few minutes you will get access to <a href="http://www.componentart.com/forums/ShowForumGroup.aspx?ForumGroupID=25">the beta forums</a>.</li></ol>These forums are actively monitored by the developers and are the quickest way to get your opinions heard by the people who actually write the code. Don&#39;t wait. The beta forums will only be up for a few more weeks, and the sooner you let us know what you want, the sooner we can deliver it.<br /><br /><br /><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=91889" width="1" height="1">ASP.NET AJAXMaskedInput Transform Intellisensehttp://www.componentart.com/community/blogs/jovan/archive/2008/10/27/maskedinput-transform-intellisense.aspxMon, 27 Oct 2008 14:06:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:84624jovan2http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=84624http://www.componentart.com/community/blogs/jovan/archive/2008/10/27/maskedinput-transform-intellisense.aspx#comments<br />MaskedInput class&#39;s Transform property that I described in depth in a few preceding blog posts presented us with an interesting design dilemma. At first it seemed like it should be a typical enumeration property, with one value for each Transform type. However, since the architecture allowed new Transform types to be added in a number of different ways (see the previous blog posts), the enum turned out to be too stifling. For that reason, we opted for a string instead.<br /><br />However, we still wanted to offer some Intellisense, to give the developer a hint at the values he would most likely want to use. We did it by placing the TypeConverterAttribute on the Transform property:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"><span style="color:#0000ff;">public</span> <span style="color:#0000ff;">sealed</span> <span style="color:#0000ff;">class</span> MaskedInput : BaseInput
{
...
[TypeConverter(<span style="color:#0000ff;">typeof</span>(MaskedInputTransformConverter))]
<span style="color:#0000ff;">public</span> <span style="color:#0000ff;">string</span> Transform
{
<span style="color:#0000ff;">get</span> {...}
<span style="color:#0000ff;">set</span> {...}
}
...
}
</pre><br />The implementation of MaskedInputTransformConverter is very simple:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"><span style="color:#808080;">/// &lt;summary&gt;</span>
<span style="color:#808080;">/// Provides Visual Studio intellisense for Transform property.</span>
<span style="color:#808080;">/// The list of StandardValues here corresponds to the properties of client-side ComponentArt_MaskedInput_Transforms object.</span>
<span style="color:#808080;">/// &lt;/summary&gt;</span>
<span style="color:#0000ff;">public</span> <span style="color:#0000ff;">class</span> MaskedInputTransformConverter : TypeConverter
{
<span style="color:#0000ff;">public</span> <span style="color:#0000ff;">string</span>[] StandardValues =
{
&quot;<span style="color:#8b0000;">empty</span>&quot;,
&quot;<span style="color:#8b0000;">CreditCard_VisaMasterCard</span>&quot;,
&quot;<span style="color:#8b0000;">CreditCard_AmEx</span>&quot;,
&quot;<span style="color:#8b0000;">Telephone_NorthAmerica</span>&quot;,
&quot;<span style="color:#8b0000;">ZipCode</span>&quot;,
&quot;<span style="color:#8b0000;">PostalCode</span>&quot;,
&quot;<span style="color:#8b0000;">PostalCode_Australia</span>&quot;,
&quot;<span style="color:#8b0000;">EmailAddress</span>&quot;
};
<span style="color:#0000ff;">public</span> <span style="color:#0000ff;">override</span> StandardValuesCollection GetStandardValues(ITypeDescriptorContext context)
{
<span style="color:#0000ff;">return</span> <span style="color:#0000ff;">new</span> StandardValuesCollection(StandardValues);
}
<span style="color:#0000ff;">public</span> <span style="color:#0000ff;">override</span> <span style="color:#0000ff;">bool</span> GetStandardValuesSupported(ITypeDescriptorContext context)
{
<span style="color:#0000ff;">return</span> <span style="color:#0000ff;">true</span>;
}
}</pre><br />This works really well in ASPX Intellisense, popping up the list of standard values, without forcing you to use one of them - exactly the behaviour we needed. The Intellisense also works for the Properties pane. Unfortunately it does not work in the CodeBehind files, and I don&rsquo;t think there is a way to implement it there.<br /><br /><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=84624" width="1" height="1">ASP.NET AJAXC#Visual StudioComponentArt Web.UIInputMaskedInputBuilding in new MaskedInput Transformshttp://www.componentart.com/community/blogs/jovan/archive/2008/10/24/building-in-new-maskedinput-transforms.aspxFri, 24 Oct 2008 14:05:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:84621jovan3http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=84621http://www.componentart.com/community/blogs/jovan/archive/2008/10/24/building-in-new-maskedinput-transforms.aspx#comments<br />In the previous post I explained how you can customize the behaviour of MaskedInput&rsquo;s Transforms. That should probably cover all your needs. However, MaskedInput&rsquo;s architecture does allow for one more way to customize transforms. You can actually build in your own.<br /><br />As you can see from the MaskedInput_Transforms.js file attached in the previous post, all the built-in transforms are contained in a global JavaScript object named ComponentArt_MaskedInput_Transforms, indexed by Transform name. So building in a new Transform is as easy as adding another property to ComponentArt_MaskedInput_Transforms. You can do that in a few ways:<br /><ul><li>You can completely redefine the object ComponentArt_MaskedInput_Transforms: <pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"> &lt;script type=&quot;<span style="color:#8b0000;">text/javascript</span>&quot;&gt;
<span style="color:#0000ff;">window</span>.ComponentArt_MaskedInput_Transforms =
{
&#39;UpperCaseInput&#39;:
{
&#39;validate&#39;: <span style="color:#0000ff;">function</span>(maskedInput) {<span style="color:#0000ff;">return</span> <span style="color:#0000ff;">true</span>;},
&#39;unmask&#39;: <span style="color:#0000ff;">function</span>(maskedInput) {<span style="color:#0000ff;">return</span> maskedInput.masked.value.toUpperCase();},
&#39;mask&#39;: <span style="color:#0000ff;">function</span>(maskedInput) {<span style="color:#0000ff;">return</span> maskedInput.unmasked.value.toUpperCase();}
}
}
&lt;/script&gt;
<span style="color:#0000ff;">&lt;</span><span style="color:#c71585;">ComponentArt</span>:<span style="color:#800000;">MaskedInput</span> <span style="color:#ff0000;">runat</span>=<span style="color:#0000ff;">&quot;server&quot;</span> <span style="color:#ff0000;">ID</span>=<span style="color:#0000ff;">&quot;MaskedInput1&quot;</span>
<span style="color:#ff0000;">Transform</span>=<span style="color:#0000ff;">&quot;UpperCaseInput&quot;</span>
<span style="color:#0000ff;">/&gt;</span>
</pre><br />Keep in mind that because you are overwriting ComponentArt_MaskedInput_Transforms, the built-in transforms will no longer work.<br /></li><li>A less drastic solution is to just add your new Transform to the existing ones:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"> <span style="color:#0000ff;">&lt;</span><span style="color:#c71585;">ComponentArt</span>:<span style="color:#800000;">MaskedInput</span> <span style="color:#ff0000;">runat</span>=<span style="color:#0000ff;">&quot;server&quot;</span> <span style="color:#ff0000;">ID</span>=<span style="color:#0000ff;">&quot;MyMaskedInput&quot;</span> <span style="color:#0000ff;">/&gt;</span>
&lt;script type=&quot;<span style="color:#8b0000;">text/javascript</span>&quot;&gt;
<span style="color:#0000ff;">window</span>.ComponentArt_MaskedInput_Transforms.UpperCaseInput =
{
&#39;validate&#39;: <span style="color:#0000ff;">function</span>(maskedInput) {<span style="color:#0000ff;">return</span> <span style="color:#0000ff;">true</span>;},
&#39;unmask&#39;: <span style="color:#0000ff;">function</span>(maskedInput) {<span style="color:#0000ff;">return</span> maskedInput.masked.value.toUpperCase();},
&#39;mask&#39;: <span style="color:#0000ff;">function</span>(maskedInput) {<span style="color:#0000ff;">return</span> maskedInput.unmasked.value.toUpperCase();}
}
<span style="color:#0000ff;">window</span>.MyMaskedInput.set_transform(&#39;UpperCaseInput&#39;);
&lt;/script&gt;
</pre></li><li>If you have a source code license and are compiling your own custom builds, you can easily add your transforms directly to the JavaScript file. They will then work just like the original built-in transforms.<br />If you are doing this, you may also want to extend MaskedInput Transform Intellisense, as described in the next blog post. </li><br /></ul><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=84621" width="1" height="1">JavaScriptComponentArt Web.UIInputMaskedInputCustomizing MaskedInput Transformshttp://www.componentart.com/community/blogs/jovan/archive/2008/10/23/customizing-maskedinput-transforms.aspxThu, 23 Oct 2008 13:30:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:84618jovan1http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=84618http://www.componentart.com/community/blogs/jovan/archive/2008/10/23/customizing-maskedinput-transforms.aspx#comments<br />In this blog post I will assume that you understand how MaskedInput Transforms function. It was explained in the <a href="http://www.componentart.com/BLOGS/jovan/archive/2008/10/22/maskedinput-transform-functionality.aspx">previous blog post</a>.<br /><br />Here is the list of currently implemented transforms:<br /><ul><li><strong>CreditCard_VisaMasterCard</strong> - Visa or MasterCard credit card number.</li><li><strong>CreditCard_AmEx</strong> - American Express credit card number.</li><li><strong>Telephone_NorthAmerica</strong> - North American telephone number.</li><li><strong>ZipCode</strong> - American ZIP code.</li><li><strong>PostalCode</strong> - Canadian postal code.</li><li><strong>PostalCode_Australia</strong> - Australian postal code.</li><li><strong>EmailAddress</strong> - e-mail address.</li><li><strong>empty</strong> - accepts all inputs.</li></ul>empty Transform is a special case. It accepts all inputs, and it doesn&#39;t mask or unmask them. Here is how it looks in code: <pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"> <span style="color:#800000;">&#39;empty&#39;</span>:
{
<span style="color:#800000;">&#39;validate&#39;</span>: <span style="color:#0000ff;">function</span>(maskedInput)
{
<span style="color:#008000;">// Accept all input:</span>
<span style="color:#0000ff;">return</span> <span style="color:#0000ff;">true</span>;
},
<span style="color:#800000;">&#39;unmask&#39;</span>: <span style="color:#0000ff;">function</span>(maskedInput)
{
<span style="color:#008000;">// Just pass on the edited displayed text:</span>
<span style="color:#0000ff;">return</span> maskedInput.masked.value;
},
<span style="color:#800000;">&#39;mask&#39;</span>: <span style="color:#0000ff;">function</span>(maskedInput)
{
<span style="color:#008000;">// Just pass on the unmasked value:</span>
<span style="color:#0000ff;">return</span> maskedInput.unmasked.value;
}
}</pre><br />There is not enough space in this blog post to show the code of the rest of the Transforms, but I made <a href="http://blogs.componentart.com/jovan/files/MaskedInput_Transforms.zip">the source code file</a> available for download.<br /><br />Ideally the available transforms will be enough for your requirements. New transforms are very easy to build in, so please don&#39;t hesitate to send in your suggestions.<br /><br />However, for those times when your requirements cannot be met by the built-in transforms, there are a number of ways to customize the MaskedInput.<br /><br />In addition to Transform, MaskedInput exposes three more server-side properties: <strong>TransformValidate</strong>, <strong>TransformUnmask</strong>, and <strong>TransformMask</strong>. These allow you to override the behaviour of any of the three transform functions. For example, to make the Visa card transform featured in the previous blog post mask with dashes instead of masking with spaces, you can do something like this: <pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"> &lt;script type=&quot;<span style="color:#8b0000;">text/javascript</span>&quot;&gt;
<span style="color:#0000ff;">function</span> maskVisaWithDashes(maskedInput)
{
<span style="color:#0000ff;">return</span> maskedInput.unmasked.value.replace(/^(\d{4})(\d{4})(\d{4})(\d{4})$/, &#39;$1-$2-$3-$4&#39;);
}
&lt;/script&gt;
<span style="color:#0000ff;">&lt;</span><span style="color:#c71585;">ComponentArt</span>:<span style="color:#800000;">MaskedInput</span> <span style="color:#ff0000;">runat</span>=<span style="color:#0000ff;">&quot;server&quot;</span> <span style="color:#ff0000;">ID</span>=<span style="color:#0000ff;">&quot;MyMaskedInput&quot;</span>
<span style="color:#ff0000;">Transform</span>=<span style="color:#0000ff;">&quot;CreditCard_VisaMasterCard&quot;</span>
<span style="color:#ff0000;">TransformMask</span>=<span style="color:#0000ff;">&quot;maskVisaWithDashes&quot;</span>
<span style="color:#0000ff;">/&gt;</span>
</pre>This allows you to fully override any of the Transform&#39;s functions. Note that you can also leave the Transform property blank. In that case, the control defaults to the empty transform.<br /><br />In the next blog post, I will introduce another more integrated way to add a new Transform.<br /><br /><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=84618" width="1" height="1">JavaScriptComponentArt Web.UIInputMaskedInputMaskedInput Transform functionalityhttp://www.componentart.com/community/blogs/jovan/archive/2008/10/22/maskedinput-transform-functionality.aspxWed, 22 Oct 2008 14:06:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:84615jovan2http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=84615http://www.componentart.com/community/blogs/jovan/archive/2008/10/22/maskedinput-transform-functionality.aspx#comments<br />The format of the masked input is fully defined by the &quot;Transform&quot; it uses.<br /><br />A Transform is a client-side JavaScript object containing just three functions:<br /><ol><li><strong>validate</strong> &ndash; A function that takes a look at what the user just typed into the masked input box, and returns a boolean value: true if text is valid, false if it isn&#39;t.<br />For example, if the transform is used to accept a Visa card number, and the user types in &quot;4506/00020002-0002&quot;, this function returns true. (It just makes sure that there are exactly 16 digits.) If the user types in &quot;2008-10-14&quot;, the function returns false.</li><li><strong>unmask</strong> &ndash; A function that takes a look at what the user has just typed into the input box, and &quot;unmasks&quot; it. Typically, this means that the text is cleaned of formatting, leaving behind just the raw data. Unmask gets called even when validate does not return true, so it should not assume that the masked text it is working on is valid.<br />In our example, if the user typed in &quot;4506/00020002-0002&quot;, this function will return &quot;4506000200020002&quot;.</li><li><strong>mask</strong> &ndash; A function that takes a look at the raw, clean data, and &quot;masks&quot; it: formats it for display.<br />With our raw data being &quot;4506000200020002&quot;, this function will return &quot;4506 0002 0002 0002&quot;.</li></ol><br />Each of these methods takes only one argument: the reference to the client-side MaskedInput JavaScript object. The function can then easily use this object to get any other information it needs. For example, here is the entire code of the Visa card transform:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"> <span style="color:#800000;">&#39;CreditCard_VisaMasterCard&#39;</span>:
{
<span style="color:#800000;">&#39;validate&#39;</span>: <span style="color:#0000ff;">function</span>(maskedInput)
{
<span style="color:#008000;">// Ensure the unmasked edited text has exactly 16 digits:</span>
<span style="color:#0000ff;">return</span> <span style="color:#0000ff;">this</span>.unmask(maskedInput).<span style="color:#0000ff;">length</span> === 16;
},
<span style="color:#800000;">&#39;unmask&#39;</span>: <span style="color:#0000ff;">function</span>(maskedInput)
{
<span style="color:#008000;">// Simply remove all the non-digits from the displayed text:</span>
<span style="color:#0000ff;">return</span> maskedInput.masked.value.replace(<span style="color:#800000;">/[^\d]/g</span>, <span style="color:#800000;">&#39;&#39;</span>);
},
<span style="color:#800000;">&#39;mask&#39;</span>: <span style="color:#0000ff;">function</span>(maskedInput)
{
<span style="color:#008000;">// Insert spaces between four-digit groups:</span>
<span style="color:#0000ff;">return</span> maskedInput.unmasked.value.replace(<span style="color:#800000;">/^(\d{4})(\d{4})(\d{4})(\d{4})$/</span>, <span style="color:#800000;">&#39;$1 $2 $3 $4&#39;</span>);
}
}</pre><br />Two often used properties of the client-side MaskedInput object are maskedInput.masked and maskedInput.unmasked:<br /><ul><li>maskedInput.masked refers to the display textbox element that the user sees and edits. It contains the masked text.<br />Although the masked text is typically not examined on the server, it can be accessed as MaskedInput&#39;s DisplayText property.</li><li>maskedInput.unmasked refers to a hidden input that contains the unmasked text.<br />The unmasked text is often examined or manipulated on the server, where it can be accessed as MaskedInput&#39;s Text property.</li></ul>Hopefully it is now clear how Transforms function. In the next blog post I will explain how you can customize them.<br /><br /><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=84615" width="1" height="1">JavaScriptComponentArt Web.UIInputMaskedInputMajor input control Gotchahttp://www.componentart.com/community/blogs/jovan/archive/2008/10/14/major-input-control-gotcha.aspxTue, 14 Oct 2008 15:17:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:84274jovan4http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=84274http://www.componentart.com/community/blogs/jovan/archive/2008/10/14/major-input-control-gotcha.aspx#comments<br /><strong>Short Story:</strong><br /><br />This will not work:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"><span style="color:#0000ff;">&lt;</span><span style="color:#c71585;">ComponentArt</span>:<span style="color:#800000;">NumberInput</span> <span style="color:#ff0000;">runat</span>=<span style="color:#0000ff;">&quot;server&quot;</span> <span style="color:#ff0000;">ID</span>=<span style="color:#0000ff;">&quot;MyNumberInput&quot;</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">&quot;button&quot;</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">&quot;+&quot;</span> <span style="color:#ff0000;">onclick</span>=<span style="color:#0000ff;">&quot;MyNumberInput.increaseValue();&quot;</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">&quot;button&quot;</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">&quot;-&quot;</span> <span style="color:#ff0000;">onclick</span>=<span style="color:#0000ff;">&quot;MyNumberInput.decreaseValue();&quot;</span> <span style="color:#0000ff;">/&gt;</span>
</pre><br />This is how to correct it:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"><span style="color:#0000ff;">&lt;</span><span style="color:#c71585;">ComponentArt</span>:<span style="color:#800000;">NumberInput</span> <span style="color:#ff0000;">runat</span>=<span style="color:#0000ff;">&quot;server&quot;</span> <span style="color:#ff0000;">ID</span>=<span style="color:#0000ff;">&quot;MyNumberInput&quot;</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">&quot;button&quot;</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">&quot;+&quot;</span> <span style="color:#ff0000;">onclick</span>=<span style="color:#0000ff;">&quot;<span style="font-weight:bold;background-color:yellow;">window.</span>MyNumberInput.increaseValue();&quot;</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">&quot;button&quot;</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">&quot;-&quot;</span> <span style="color:#ff0000;">onclick</span>=<span style="color:#0000ff;">&quot;<span style="font-weight:bold;background-color:yellow;">window.</span>MyNumberInput.decreaseValue();&quot;</span> <span style="color:#0000ff;">/&gt;</span>
</pre><br /><br /><strong>Long Story:</strong><br /><br />This will work:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"><span style="color:#0000ff;">&lt;</span><span style="color:#c71585;">ComponentArt</span>:<span style="color:#800000;">NumberInput</span> <span style="color:#ff0000;">runat</span>=<span style="color:#0000ff;">&quot;server&quot;</span> <span style="color:#ff0000;">ID</span>=<span style="color:#0000ff;">&quot;MyNumberInput&quot;</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">&quot;button&quot;</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">&quot;+&quot;</span> <span style="color:#ff0000;">onclick</span>=<span style="color:#0000ff;">&quot;increase();&quot;</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">script</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">&quot;text/javascript&quot;</span><span style="color:#0000ff;">&gt;</span>
function increase()
{
MyNumberInput.increaseValue();
}
<span style="color:#0000ff;">&lt;/</span><span style="color:#800000;">script</span><span style="color:#0000ff;">&gt;</span>
</pre><br />But, as mentioned before, this:<br /><pre style="font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;"><span style="color:#0000ff;">&lt;</span><span style="color:#c71585;">ComponentArt</span>:<span style="color:#800000;">NumberInput</span> <span style="color:#ff0000;">runat</span>=<span style="color:#0000ff;">&quot;server&quot;</span> <span style="color:#ff0000;">ID</span>=<span style="color:#0000ff;">&quot;MyNumberInput&quot;</span> <span style="color:#0000ff;">/&gt;</span>
<span style="color:#0000ff;">&lt;</span><span style="color:#800000;">input</span> <span style="color:#ff0000;">type</span>=<span style="color:#0000ff;">&quot;button&quot;</span> <span style="color:#ff0000;">value</span>=<span style="color:#0000ff;">&quot;+&quot;</span> <span style="color:#ff0000;">onclick</span>=<span style="color:#0000ff;">&quot;MyNumberInput.increaseValue();&quot;</span><span style="color:#0000ff;">/&gt;</span>
</pre>will instead produce a JavaScript error: <span style="font-style:italic;font-family:courier new;">MyNumberInput.increaseValue is not a function</span><br /><br />But isn&#39;t that the exact same code?? What is going on?<br /><br /><span style="font-weight:bold;">It turns out that in the second case &quot;MyNumberInput&quot; is not referring to the client-side NumberInput object. Instead it is referring to a DOM element of the same name.</span><br /><br />Like most ComponentArt controls, input controls create a number of client-side DOM elements and JavaScript objects.<br />In this particular example, with a NumberInput named MyNumberInput:<br />In JavaScript, the most important object is named <span style="font-family:courier new;">MyNumberInput</span>, and is an instance of client-side class <span style="font-family:courier new;">ComponentArt.Web.UI.NumberInput</span>.<br />In the DOM, there are a number of different elements, including a text input with the id <span style="font-family:courier new;">MyNumberInput</span>.<br /><br />This results in a very unusual naming conflict. Normally, when you write <span style="font-family:courier new;">MyNumberInput</span> in client-side code, you expect it to refer to the global JavaScript object of that name. And it does. <span style="font-weight:bold;font-style:italic;">Except</span> when the code is running in the event handler of an HTML tag. Then <span style="font-family:courier new;">MyNumberInput</span> refers to the DOM element with that id. Which is probably not what you want.<br /><br />To avoid ambiguity, you can use <span style="font-family:courier new;">window.MyNumberInput</span> to refer to the JavaScript object, and <span style="font-family:courier new;">document.getElementById(&#39;MyNumberInput&#39;)</span> to refer to the DOM element.<br /><br />So why don&rsquo;t we fix this? Well, it turns out that there is no real bug here.<br />First of all, this is not a design that is unique to ComponentArt input controls. In fact, most ComponentArt controls produce JavaScript objects and DOM elements with matching identifiers, for a number of reasons. What is different with input controls is that the DOM element in question happens to be a form element. This triggers the naming conflict.<br />However, having these matching identifiers turns out to be needed for the input controls to work smoothly with ASP.NET&rsquo;s client-side validation, which is a very important feature.<br />So it is unlikely that we will be able to &quot;fix&quot; this. Instead, just please keep this gotcha in mind.<br /><br /><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=84274" width="1" height="1">JavaScriptComponentArt Web.UIInputNumberInputMaskedInputMultiline strings in JavaScripthttp://www.componentart.com/community/blogs/jovan/archive/2007/10/17/multiline-strings-in-javascript.aspxWed, 17 Oct 2007 23:53:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:67716jovan12http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=67716http://www.componentart.com/community/blogs/jovan/archive/2007/10/17/multiline-strings-in-javascript.aspx#comments<br />Myth: You can&#39;t have a string literal stretch across two lines of text in JavaScript.<br /><br />Fact: You can have multiline string literals in JavaScript in all browsers.<br /><br /><br />Multiline (or is it &quot;multi-line&quot;?) strings are a fringe feature of programming languages. They are very rarely needed, so a lot of languages don&#39;t support them at all (VB.NET). And even when a language does support them (C#), most programmers are not even aware of that. How often have you seen something like this in real code:<br /><pre style="line-height:120%;font-family:Courier New;">string myStr = @&quot;This is a C#
multiline string
just because I can!&quot;;</pre>I think I used that only once. Old <span style="font-family:Courier New;">&quot;\n&quot;</span> would have worked alright, but in that case the string was very long. Multiline option was much more readable and also gave me a chance to show off my incredibly amazing super knowledge of this marginal feature. It is this very marginality and near-uselessness that makes multiline strings a topic I want to blog about.<br /><br />Actually, JavaScript, being a tricky little scripting language, has an increased need for multiline strings. Use it in depth and you will need statements like eval, which evaluates a string of code, or this textbook example:<br /><br /><pre style="line-height:120%;font-family:Courier New;">var square = new Function(&#39;x&#39;,&#39;return x*x;&#39;);
alert(square(5)); // alerts 25</pre><br />This is actually a very useful feature of the language. Being able to construct code on the fly is certainly not your run-of-the-mill onclick-change-image JavaScript. But if you get deep into the language, the need for it does arise. Problem is, what if the function you want to create is more complex than x*x?<br /><br /><pre style="line-height:120%;font-family:Courier New;">var factorial = new Function(&#39;n&#39;,
&#39;var result=1; for (var i=1; i&lt;=n; i++) result *= i; return result;&#39;);
alert(5)); // alerts 120</pre><br />That works, but man is it ugly. Too hard to read. Multiline strings to the rescue:<br /><br /><pre style="line-height:120%;font-family:Courier New;">var factorial = new Function(&#39;n&#39;, &#39;\
var result = 1; \
for (var i=1; i&lt;=n; i++) \
result *= i; \
return result; \&#39;);
alert(factorial(5)); // alerts 120</pre><br />Yes, that works! And it&#39;s exactly the same as the previous piece of code (aside for extra white space to make it more readable).<br /><br />Simply put, you can use backslash character to ignore end of line in JavaScript strings. This directly contradicts my JavaScript books. For example, David Flanagan&#39;s <a href="http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/ref=pd_bbs_sr_1/102-3512757-8924107?ie=UTF8&amp;s=books&amp;qid=1190917927&amp;sr=8-1">[JavaScrip<span></span>t: The Definitive Guide]</a>, my JavaScript bible for almost a decade and counting, specifically says: <span style="font-style:italic;">backslash escape cannot be used before a line break to continue a string</span>. This is clearly incorrect. (I am so proud to have found an error in that book, I want to let everyone know.) I tested this technique in all browsers I could think of, and it works in all of them.<br /><br />I learned this technique from a Google search that turned up some <a href="http://forums.whirlpool.net.au/forum-replies-archive.cfm/487804.html">[post on an obscure Australian forum]</a>. How this one guy was the only enlightened individual is still a mystery.<br /><br />Note that the strings will not contain newline characters, unlike the C# multiline example from the beginning of this post. In particular in JavaScrip<span></span>t:<br /><br /><pre style="line-height:120%;font-family:Courier New;">alert(&#39;foobar&#39; == &#39;foo bar&#39;); // false
alert(&#39;foobar&#39; == &#39;foobar&#39;); // true
alert(&#39;foobar&#39; == &#39;foo\
bar&#39;); // true!</pre><br />So end of line is simply magically ignored. If you really want to have new line characters, you will have to run something like:<br /><br /><pre style="line-height:120%;font-family:Courier New;">var myStr = &#39;line one\n\
line two&#39;;</pre><br /><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=67716" width="1" height="1">JavaScriptC#Tackling Stubborn TD Style Definitionshttp://www.componentart.com/community/blogs/jovan/archive/2007/06/18/tackling-stubborn-td-style-definitions.aspxMon, 18 Jun 2007 21:05:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:64606jovan2http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=64606http://www.componentart.com/community/blogs/jovan/archive/2007/06/18/tackling-stubborn-td-style-definitions.aspx#comments<p><strong><br />&quot;</strong><em>If you set a default style for the td tag in your stylesheet, like this,<br />td {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;}<br />then this will be used in your tab strip, no matter what style you create for the tab items</em><strong>&quot;</strong><br /><br />Questions like this are quite common in forums and support calls.&nbsp; An obvious way to avoid this conflict is to not have a default style for TD tags. However, this is not always practical - default TD style definitions are quite common, sometimes even mandated by corporate policy.&nbsp; Instead, there is a lot less intrusive way to get this to work.&nbsp; First let&#39;s take a look at an example of how this happens.</p><p>Suppose we have a page which contains a CSS definition like this, instructing table cells to use Comic font:</p><pre style="line-height:100%;font-family:Courier New;">TD
{
font-family:&quot;Comic Sans MS&quot;;
}</pre><p>However we want to show menu items in Courier font:</p><pre style="line-height:100%;font-family:Courier New;">.myMenuItem
{
font-family:&quot;Courier New&quot;;
}</pre><p>This looks like it should work, and it sometimes does. But more often it doesn&#39;t: Menu items (or TabStrip tabs, or NavBar items...) use Comic Sans font from the default TD style, instead of Courier New from myMenuItem CSS class.&nbsp; To understand why, let&#39;s take a look at a (simplified) sample of HTML that is rendered by the menu for its item:</p><pre style="line-height:100%;font-family:Courier New;">&lt;td class=&quot;myMenuItem&quot;&gt;
ITEM TEXT
&lt;/td&gt;</pre><p>In this first case definitions applied in myMenuItem CSS class will correctly take effect.&nbsp; However, in many cases - for example, when the item has an icon -&nbsp;the rendered HTML is more complex:</p><pre style="line-height:100%;font-family:Courier New;">&lt;td&gt;
&lt;table class=&quot;myMenuItem&quot;&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;img src=&quot;icon.gif&quot; mce_src=&quot;icon.gif&quot;&gt;
&lt;/td&gt;
&lt;td&gt;
ITEM TEXT
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;</pre><p>In this case, style definitons for default TD element will take precedence over definitions for myMenuItem CSS class. The item will show in Comic font instead of the desired Courier.</p><p>There is a very simple CSS workaround for this situation. Just slightly modify the original definition to get:</p><pre style="line-height:100%;font-family:Courier New;">.myMenuItem <strong>TD</strong>
{
font-family:&quot;Courier New&quot;;
}</pre><p>The meaning of this defintion is: <strong>if a TD tag is within a tag of class myMenuItem</strong>, show it in Courier New font. &nbsp;This is more specific than the default TD style we&#39;re trying to overrule, so it will win out.&nbsp; Note however, that while this definition will work in the second case (the more complex item), it will not work in the first (the simple item).&nbsp; So finally the solution that works for all cases is a combination of the two:</p><pre style="line-height:100%;font-family:Courier New;"><strong>.myMenuItem, .myMenuItem TD
{
font-family:&quot;Courier New&quot;;
}</strong></pre><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=64606" width="1" height="1">ComponentArt Web.UICSSClient-side Date Format Localization in ASP.NET AJAXhttp://www.componentart.com/community/blogs/jovan/archive/2006/12/01/client-side-date-format-localization-in-asp-net-ajax.aspxSat, 02 Dec 2006 06:03:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:60058jovan1http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=60058http://www.componentart.com/community/blogs/jovan/archive/2006/12/01/client-side-date-format-localization-in-asp-net-ajax.aspx#comments<p>Much buzz has already been created around new client-side localization features introduced with ASP.NET AJAX Beta 2. Most of it has focused on localized resources, which can now easily be retrieved from the server by client scripts. This makes sense - resources are arguably the most important aspect of localization. But not from a web control developer&#39;s point of view. When developing web controls, we deal with little actual content - for the most part, we are providing form for our customers&#39; content. Having worked on ComponentArt.Web.UI Calendar control in particular, I was especially interested in localization features that deal with date and time formats. </p><p><strong>How Calendar Works Today</strong></p><p>In order for Calendar control to be customizable and culture-independent, we send information about date settings to the client, where the rendering is to take place. Examine the HTML source of a page that contains a Calendar control and you will see excerpts like these: </p><pre style="padding-right:5px;padding-left:15px;font-size:8pt;padding-bottom:5px;margin:5px;padding-top:5px;font-family:Courier New;">[&#39;AbbreviatedDayNames&#39;,[&#39;Sun&#39;,&#39;Mon&#39;,&#39;Tue&#39;,&#39;Wed&#39;,&#39;Thu&#39;,&#39;Fri&#39;,&#39;Sat&#39;]]
[&#39;AbbreviatedMonthNames&#39;,[&#39;Jan&#39;,&#39;Feb&#39;,&#39;Mar&#39;,&#39;Apr&#39;,&#39;May&#39;,&#39;Jun&#39;,&#39;Jul&#39;,
&#39;Aug&#39;,&#39;Sep&#39;,&#39;Oct&#39;,&#39;Nov&#39;,&#39;Dec&#39;]]
[&#39;DayNames&#39;,[&#39;Sunday&#39;,&#39;Monday&#39;,&#39;Tuesday&#39;,&#39;Wednesday&#39;,&#39;Thursday&#39;,
&#39;Friday&#39;,&#39;Saturday&#39;]]
[&#39;MonthNames&#39;,[&#39;January&#39;,&#39;February&#39;,&#39;March&#39;,&#39;April&#39;,&#39;May&#39;,&#39;June&#39;,
&#39;July&#39;,&#39;August&#39;,&#39;September&#39;,&#39;October&#39;,&#39;November&#39;,&#39;December&#39;]]</pre><p>These are portions of JavaScript arrays with relevant date format information. They are put together by the Calendar control on the server, to be used by the control&#39;s rendering engine on the client. The original source of information is ASP.NET&#39;s System.Globalization namespace (unless, of course, the developer specifically instructs the Calendar control instance to use some custom date formats). It is the wealth of information in the framework that enables the Calendar to seamlessly switch between various cultures as seen in the <a href="http://www.componentart.com/entry.aspx?id=71&amp;page=http://webui.componentart.com/calendar/features/globalization/WebForm1.aspx">[Globalization demo]</a>. </p><p><strong>What ASP.NET AJAX Brings</strong></p><p>So I was really delighted to hear that as of ASP.NET AJAX Beta 2, this information is also available on the client. Only information for current culture (on the server: <span style="font-family:courier new;">System.Globalization.CultureInfo.CurrentCulture</span>) is being propagated to the client, which makes perfect sense with - count them - 134 cultures and growing. Full documentation on this feature is not yet available, but I did a little snooping around - using the good old for/in loop mentioned in <a href="http://www.componentart.com/entry.aspx?id=71&amp;page=http://blogs.componentart.com/jovan/archive/2006/11/28/quick-conversions-to-simple-types-in-javascript.aspx">[my previous blog post]</a>, and here&#39;s what I found out. The relevant client-side object is called <span style="font-family:courier new;">Sys.CultureInfo.CurrentCulture.dateTimeFormat</span>, and its contents for my English (Canada) culture are: </p><pre style="padding-right:5px;padding-left:15px;font-size:8pt;padding-bottom:5px;margin:5px;padding-top:5px;font-family:Courier New;">AMDesignator: AM
Calendar: [object Object]
DateSeparator: /
FirstDayOfWeek: 0
CalendarWeekRule: 0
FullDateTimePattern: dddd, MMMM dd, yyyy h:mm:ss tt
LongDatePattern: dddd, MMMM dd, yyyy
LongTimePattern: h:mm:ss tt
MonthDayPattern: MMMM dd
PMDesignator: PM
RFC1123Pattern: ddd, dd MMM yyyy HH&#39;:&#39;mm&#39;:&#39;ss &#39;GMT&#39;
ShortDatePattern: M/d/yyyy
ShortTimePattern: h:mm tt
SortableDateTimePattern: yyyy&#39;-&#39;MM&#39;-&#39;dd&#39;T&#39;HH&#39;:&#39;mm&#39;:&#39;ss
TimeSeparator: :
UniversalSortableDateTimePattern: yyyy&#39;-&#39;MM&#39;-&#39;dd HH&#39;:&#39;mm&#39;:&#39;ss&#39;Z&#39;
YearMonthPattern: MMMM, yyyy
AbbreviatedDayNames: Sun,Mon,Tue,Wed,Thu,Fri,Sat
ShortestDayNames: Su,Mo,Tu,We,Th,Fr,Sa
DayNames: Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday
AbbreviatedMonthNames: Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,
Dec,
MonthNames: January,February,March,April,May,June,July,August,
September,October,November,December,
IsReadOnly: false
NativeCalendarName: Gregorian Calendar
AbbreviatedMonthGenitiveNames: Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,
Oct,Nov,Dec,
MonthGenitiveNames: January,February,March,April,May,June,July,
August,September,October,November,December,</pre><p>Further drilling into <span style="font-family:courier new;">Sys.CultureInfo.CurrentCulture.dateTimeFormat.Calendar</span>, we find:</p><pre style="padding-right:5px;padding-left:15px;font-size:8pt;padding-bottom:5px;margin:5px;padding-top:5px;font-family:Courier New;">MinSupportedDateTime: Thu Dec 31 19:00:00 EST 99
MaxSupportedDateTime: Fri Dec 31 18:59:59 EST 9999
AlgorithmType: 1
CalendarType: 1
Eras: 1
TwoDigitYearMax: 2029
IsReadOnly: false</pre><p>As you can see, a lot of this information duplicates the settings propagated by the Calendar control. This is great, because I love to throw code away. In the near future, we will hopefully be able to rely on the client-side framework to provide date and time format information, and only propagate it ourselves when necessary. </p><p>You can use this data for your own needs with confidence. While it is not yet documented, and has the appearance of some internal code, good folks of the ASP.NET AJAX team confirm that it will be in this same form and public, supported, and documented when ASP.NET AJAX is released. Until client-side docs are available, you can rely on the server-side documentation for DateTimeFormatInfo. Client-side object is designed to duplicate it. </p><p>It feels great to see more and more of the ASP.NET framework migrate (or rather replicate itself) to the client. Soon we will all benefit from building and using a much better interweb. </p><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=60058" width="1" height="1">ASP.NET AJAXCalendarQuick Type Conversions and Other JavaScript Trickshttp://www.componentart.com/community/blogs/jovan/archive/2006/11/28/quick-conversions-to-simple-types-in-javascript.aspxWed, 29 Nov 2006 07:28:00 GMT9ff84d31-80d1-44bd-98c8-eba0322b9d03:60056jovan0http://www.componentart.com/community/blogs/jovan/rsscomments.aspx?PostID=60056http://www.componentart.com/community/blogs/jovan/archive/2006/11/28/quick-conversions-to-simple-types-in-javascript.aspx#comments<p>I recently read a post in <a href="http://weblogs.asp.net/bleroy/">[Bertrand Le Roy&#39;s blog]</a> titled <a href="http://weblogs.asp.net/bleroy/archive/2006/09/29/A-nice-and-compact-way-to-coerce-to-Boolean-in-JavaScript.aspx">[A nice and compact way to coerce to Boolean in JavaScript]</a>. Having used JavaScript extensively for the past few years, I knew from the title what the post would be about - the lovely double negation: <span class="SourceCode">!!somevariable</span> - the shortest way to say &quot;parse boolean&quot; in JavaScript. While the trick was not new to me, the blog post did give me the idea to share a couple of similar tips:</p><p><strong>Type Conversions</strong></p><p>A compact way to convert to integer: <span class="SourceCode">somevariable - 0</span><br /><br />A compact way to convert to string: <span class="SourceCode">somevariable + &#39;&#39;</span> </p>None of these may be very readable at first, but I found them very easy to get used to. They certainly are short to write, which counts when writing web controls. And frankly, I never was a big fan of &quot;parseInt&quot;.<br /><br />Note also that <span style="font-family:courier new;">parseInt(somevariable)</span> and <span style="font-family:courier new;">somevariable-0</span> are not equivalent. For example, <span style="font-family:courier new;">parseInt(true)</span> evaluates to <span style="font-family:courier new;">NaN</span>, while <span style="font-family:courier new;">true-0</span> evaluates to <span style="font-family:courier new;">1</span>. I prefer the latter.<br /><p>I first learned these three tricks from David Flanagan&#39;s <a href="http://www.amazon.com/JavaScript-Definitive-Guide-David-Flanagan/dp/0596101996/sr=8-1/qid=1164781291/ref=pd_bbs_sr_1/102-3512757-8924107?ie=UTF8&amp;s=books">[JavaScr<span></span>ipt: The Definitive Guide]</a>, a terrific book.</p><p>Here are a couple more tricks I learned from that book (or was it somewhere else?):</p><p><strong>Undefined vs <span style="font-family:courier new;">null</span> and </strong><span style="font-family:courier new;">===</span><strong> vs </strong><span style="font-family:courier new;">==</span></p>When you just a declare a variable <span style="font-family:courier new;">foo</span>, but you do not assign a value to it, what is its value? You may think it is <span style="font-family:courier new;">null</span>, because <span style="font-family:courier new;">foo==null</span> evaluates to <span style="font-family:courier new;">true</span>, but this is not exactly correct. The value is actually undefined - or unassigned, if you prefer. You can prove this by using the identity operator, <span style="font-family:courier new;">===</span>:<br /><pre style="margin-top:5px;margin-left:5px;margin-right:5px;font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;padding:5px;"><span style="color:#0000ff;">var</span> foo;
<span style="color:#0000ff;">alert</span>(foo == <span style="color:#0000ff;">null</span>); <span style="color:#008000;">// true</span>
<span style="color:#0000ff;">alert</span>(foo === <span style="color:#0000ff;">null</span>); <span style="color:#008000;">// false</span>
<span style="color:#0000ff;">var</span> o = <span style="color:#0000ff;">new</span> Object();
<span style="color:#0000ff;">alert</span>(o.bar == <span style="color:#0000ff;">null</span>); <span style="color:#008000;">// true</span>
<span style="color:#0000ff;">alert</span>(o.bar === <span style="color:#0000ff;">null</span>); <span style="color:#008000;">// false</span>
<span style="color:#0000ff;">alert</span>(o.bar == foo); <span style="color:#008000;">// true</span>
<span style="color:#0000ff;">alert</span>(o.bar === foo); <span style="color:#008000;">// true</span>
<span style="color:#0000ff;">alert</span>(foo === <span style="color:#0000ff;">void</span> 0); <span style="color:#008000;">// true</span></pre><p>The last line uses the operator <span style="font-family:courier new;">void</span>, another recluse. Its purpose is to discard the value of its operand and return an undefined value instead. If you are writing code and need an undefined value, you should do what cool kids do and use <span style="font-family:courier new;">void 0</span>, instead of an unassigned dummy variable or something else lame.</p><p>So: undefined value is not null value, which can be proven using the identity operator, which is not the equality operator. But will you actually need this any time soon? Probably not. Identity operator, undefined value, and <span style="font-family:courier new;">void</span> operator are used more often in examples like this one than in actual code. But I did occasionally have a need for them, so it pays to keep them in mind. Also they&#39;re fun to blog about.</p><p><strong><span style="font-family:courier new;">for/in</span> Loop</strong></p><p>In contrast, <span style="font-family:courier new;">for/in</span> loop is very important in JavaScript. It enables looping through the properties of an object. This is indispensable in some cases - for example when you need to examine an unknown object: </p><pre style="margin-top:5px;margin-left:5px;margin-right:5px;font-family:courier new;background-color:#e2e2e2;border:#a0a0a0 1px solid;padding:5px;"><span style="color:#0000ff;">for</span> (<span style="color:#0000ff;">var</span> propertyName <span style="color:#0000ff;">in</span> myObject)
{
<span style="color:#0000ff;">alert</span>(&#39;Property &#39; + propertyName + &#39; has value: &#39; + myObject[propertyName]);
}</pre><div style="clear:both;"></div><img src="http://www.componentart.com/community/aggbug.aspx?PostID=60056" width="1" height="1">JavaScript