tag:blogger.com,1999:blog-15654208038866634812024-03-06T13:18:32.218+05:30Knowledge SourceA way to share knowledge...Murali Ghttp://www.blogger.com/profile/03598817747597566680noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-1565420803886663481.post-2559509938769562052014-06-26T15:26:00.000+05:302014-07-17T12:47:44.168+05:30Creating custom controls for Windows Store App (Javascript- WinJS)<div dir="ltr" style="text-align: left;" trbidi="on"><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 20.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">Introduction</span></b><span style="font-family: "Segoe UI Semilight","sans-serif";"><o:p></o:p></span></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 20.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><br />
</span></b></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">The Windows Library for JavaScript (WinJS) is a library of CSS and JavaScript files. It contains JavaScript objects, organized into namespaces, designed to make developing Windows Store app using JavaScript easier. WinJS includes objects that help you handle activation, access storage, and define your own classes and namespaces. It also includes a set of controls like AppBar, ListView, Rating, TimePicker etc.</span><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 20.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><o:p></o:p></span></b><br />
<span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Though there are many useful controls, they don’t cover all needs (for Ex: A generic control for plotting simple graph, tree view, animation etc.) and it is time for us to develop such custom controls, let’s understand how to do it.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 17.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">Problem Definition<o:p></o:p></span></b></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 17.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><br />
</span></b></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Let’s consider a simple problem where it’s required to plot a donut like graph to show up the percentage (%) values in our Windows Store App and it should be able to bind to the ViewModel property.</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: 'Segoe UI Semilight', sans-serif;">This is how our final graph will look like, </span><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxqGTo_oqnC6prTvlT5PBj7zFpjGmRcGcxdMN7NnU8cwNxOG7DRolNQt3n2C_ayBfrdu2drt1AGJ2NK5aPGF8Qewazs9wRKVFzt2naZ6DVvNfnmXHA1vP3P_5bQSpVjlioh5fCuv0NfrFn/s1600/Capture.PNG" style="vertical-align: middle;" /><br />
<div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 20.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">Solution<o:p></o:p></span></b></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 20.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><br />
</span></b></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">First things first,<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Include WinJS references in HTML page, because our control will use APIs from these files. <o:p></o:p></span></div><div class="MsoNormal" style="margin-left: .5in;"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;"><</span><span style="color: #984806; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white; mso-themecolor: accent6; mso-themeshade: 128;">script </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">src</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">=</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">"//Microsoft.WinJS.1.0/js/base.js"></</span><span style="color: #984806; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white; mso-themecolor: accent6; mso-themeshade: 128;">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">><br />
<</span><span style="color: #984806; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white; mso-themecolor: accent6; mso-themeshade: 128;">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">="//Microsoft.WinJS.1.0/js/ui.js"></</span><span style="color: #984806; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white; mso-themecolor: accent6; mso-themeshade: 128;">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">></span><span style="font-family: "Segoe UI Semilight","sans-serif";"><o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Few simple steps to create a custom WinJS control:</span></div><div class="MsoNormal"></div><ul style="text-align: left;"><li><span style="font-family: 'Segoe UI Semilight', sans-serif; text-indent: -0.25in;">Define a Namespace and a Class for control</span></li>
<li><span style="font-family: 'Segoe UI Semilight', sans-serif; text-indent: -0.25in;">Initialize the control and define control options(in class constructor)</span></li>
<li><span style="font-family: 'Segoe UI Semilight', sans-serif; text-indent: -0.25in;">Implement the code to plot donut graph (we will be using HTML5 Canvas)</span></li>
<li><span style="font-family: 'Segoe UI Semilight', sans-serif; text-indent: -0.25in;">Use the control in HTML/JavaScript.</span></li>
</ul><div class="MsoListParagraphCxSpLast" style="mso-list: l0 level1 lfo1; text-indent: -.25in;"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">Define a Namespace and a Class for control:<o:p></o:p></span></b></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><br />
</span></b></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 12.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">WinJS provide APIs to create Namespaces and Classes in JavaScript, we will be using the same to create ours.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">WinJS.Namespace.define(</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">) </span><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 12.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">and</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> <span style="mso-highlight: white;">WinJS.Class.define(</span>) </span><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 12.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">are</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 12.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">used to create Namespace and Class respectively. <o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"><br />
</span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;">WinJS.Namespace.define(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"Demo.UI"</span><span style="font-family: Consolas; font-size: 9.5pt;">, {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> DonutChart: WinJS.Class.define(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> (element, options) {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Constructor: here we will validate the DOM element, define options and more.<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element = element || document.createElement(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"div"</span><span style="font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> },{<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Properties: here we will declare and define the properties, private methods and core logic lies here i.e. code to create graph in our case.<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="font-family: Consolas; font-size: 9.5pt;">donutValue: {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> get: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">return</span><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._donutValue;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> set: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> (value) { <o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._donutValue = value;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// End of Properties</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;">)</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> // End of Control class definition</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;">});</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> // End of Namespace definition</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">The constructor will take two parameters element and options where element is </span><a href="https://developer.mozilla.org/en-US/docs/Web/API/element"><span style="font-family: "Segoe UI Semilight","sans-serif";">Element</span></a><span style="font-family: "Segoe UI Semilight","sans-serif";"> object and options we can configure according to our control let's say <b>radius</b> in our case.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Now we have our Namespace and Class ready to use.<o:p></o:p></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">Initialize the control and define control options:<o:p></o:p></span></b></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><br />
</span></b></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">In the constructor, we have to validate the element is existing or not if element doesn’t exist create an element (“div” in this example) and add a set of declaratively specified options (properties and events) to the control this is achieved using WinJS.UI.setOptions() method. <o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> MyControl(element, options) {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element = element || document.createElement(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"div"</span><span style="font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.winControl = </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.options = options;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Set option defaults</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._donutValue = 0;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Set user-defined options</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> WinJS.UI.setOptions(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">, options);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> element.textContent = options.donutValue;</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// If it fails to plot graph then display only text<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> }</span><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><o:p></o:p></span></b></div><div class="MsoNormal"><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">Implement the code to plot donut graph:<o:p></o:p></span></b></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><br />
</span></b></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">We will be using one of HTML5’s great features Canvas to plot the graph, will create the donut chart in </span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">_createDonut</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">() </span><span style="font-family: "Segoe UI Semilight","sans-serif";">method [Note: _createDonut is made as private method so that this method should not be used outside the control]. We can create any number of HMTL element and logic inside this method.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Here is the code snippet where we used Canvas’s arc method to draw circles i.e donut chart<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;">_createDonut: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> settings = $.extend({<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// These are the defaults.</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> color1: </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">'#808080'</span><span style="font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> color2: </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">'#107c10'</span><span style="font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> textColor: </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">'#808080'</span><span style="font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> backgroundColor: </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"transparent"</span><span style="font-family: Consolas; font-size: 9.5pt;">,<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> radius: 20,<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> lineWidth1: 1,<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> lineWidth2: 5,<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> donutValue: 0<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }, </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.options);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="font-family: Consolas; font-size: 9.5pt;"> (</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.donutValue > 0) {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">try</span><span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> settings.donutValue = </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.donutValue;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> percentage = settings.donutValue / 100;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> id = </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.getAttribute(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"id"</span><span style="font-family: Consolas; font-size: 9.5pt;">) + </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"_canvas"</span><span style="font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> width = </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.offsetWidth;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> height = </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.offsetHeight;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.innerHTML = </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">""</span><span style="font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.innerHTML = </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"<canvas id='"</span><span style="font-family: Consolas; font-size: 9.5pt;"> + id + </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"' width='"</span><span style="font-family: Consolas; font-size: 9.5pt;"> + width + </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"' height='"</span><span style="font-family: Consolas; font-size: 9.5pt;"> + height + </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"'></canvas>"</span><span style="font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> c = document.getElementById(id);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> ctx = c.getContext(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"2d"</span><span style="font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><br />
</div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> centerX = c.width / 2;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> centerY = c.height / 2;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> radius = width > height ? height * 0.455 : width * 0.455;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Inner circle</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.beginPath();<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.strokeStyle = settings.color1;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.lineWidth = settings.lineWidth1;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.arc(centerX, centerY, radius, 0 * Math.PI, 2 * Math.PI);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.stroke();<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Outer Circle</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.beginPath();<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.lineWidth = settings.lineWidth2;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.strokeStyle = settings.color2;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.arc(centerX, centerY, radius, 1.5 * Math.PI, (1.5 + (2 * percentage)) * Math.PI)</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> //calculating the end angle for arc</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.stroke();<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Display text</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.font = </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"15px Segoe UI"</span><span style="font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.fillStyle = settings.textColor;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> ctx.fillText(settings.donutValue + </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"%"</span><span style="font-family: Consolas; font-size: 9.5pt;">, centerX - 14, centerY + 5);</span><span style="background-color: white; font-family: Consolas; font-size: 9.5pt;"> </span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> clearInterval(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.terminateInterval);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">catch</span><span style="font-family: Consolas; font-size: 9.5pt;"> (ex) {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> clearInterval(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.terminateInterval);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">else</span><span style="font-family: Consolas; font-size: 9.5pt;"> {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.innerHTML = </span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"<span style='color:black; text-align:center;'>---</span>"</span><span style="font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><br />
<div class="MsoNormal"><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> }</span><span style="font-family: "Segoe UI Semilight","sans-serif";"><o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Assume that the control is given with an empty div element, in our code we will create a Canvas element dynamically and append it to the given div element. We are using JQuery $.extend() method to map the default options with the options configured from UI.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Putting the bits altogether:<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;">WinJS.Namespace.define(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"Demo.UI"</span><span style="font-family: Consolas; font-size: 9.5pt;">, {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> DonutChart: WinJS.Class.define(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> (element, options) {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Constructor: here we will validate the DOM element, define options and more.<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element = element || document.createElement(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">"div"</span><span style="font-family: Consolas; font-size: 9.5pt;">);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.element.winControl = </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.options = options;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Set option defaults</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._donutValue = 0;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Set user-defined options</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.terminateInterval = 0;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> WinJS.UI.setOptions(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">, options);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;"><span style="font-family: Consolas; font-size: 9.5pt;">element.textContent = options.donutValue; <o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> },{<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// Properties: here we will declare and define the properties, private methods and core logic lies here i.e. code to create graph in our case.<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;"><span style="font-family: Consolas; font-size: 9.5pt;">_notZero: 0,</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> </span><span style="font-family: Consolas; font-size: 9.5pt;">donutValue: {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> get: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> () {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">return</span><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._donutValue;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> },<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> set: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function</span><span style="font-family: Consolas; font-size: 9.5pt;"> (value) { <o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">if</span><span style="font-family: Consolas; font-size: 9.5pt;"> (</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._donutValue > 0) {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> clearInterval(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._notZero);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;"><span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._donutValue = value;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._notZero = setInterval(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._createDonut.bind(</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">), 1000);<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">.terminateInterval = </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">this</span><span style="font-family: Consolas; font-size: 9.5pt;">._notZero;<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;"><span style="font-family: Consolas; font-size: 9.5pt;">},<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;"><span style="font-family: Consolas; font-size: 9.5pt;">_createDonut: </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">function </span><span style="font-family: Consolas; font-size: 9.5pt;">() {<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt; text-indent: 0.5in;"><span style="font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">//Copy from above<o:p></o:p></span></div><div class="MsoNormal" style="margin: 0in 0in 0.0001pt 0.5in; text-indent: 0.5in;"><span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;"> }</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;">// End of Properties</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;">)</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> // End of Control class definition</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span></div><div class="MsoNormal" style="margin-bottom: 0.0001pt;"><span style="font-family: Consolas; font-size: 9.5pt;">});</span><span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"> // End of Namespace definition</span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span><br />
<span style="color: green; font-family: Consolas; font-size: 9.5pt; mso-highlight: white;"><br />
</span> <br />
<div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">Using the control in HTML/JavaScript:<o:p></o:p></span></b></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 13.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;"><br />
</span></b></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Now we have created all necessary code and have it in say demo.ui.donutchart.js, let’s see how to use it in our HTML.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Include a reference to demo.ui.donutchart.js script file<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">script</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">src</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">="../../js/customcontrols/demo.ui.donutchart.js"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">script</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">></span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"><o:p></o:p></span></div><div class="MsoNormal"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">In HTML use the </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">data-win-control</span><span style="font-family: "Segoe UI Semilight","sans-serif";"> attribute to set the control name </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">Demo.UI.DonutChart</span><span style="font-family: "Segoe UI Semilight","sans-serif";">, use the </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">data-win-options</span><span style="font-family: "Segoe UI Semilight","sans-serif";"> attribute to set the options (Ex. </span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">{ radius: 20, color2: '#107c10' }</span><span style="font-family: "Segoe UI Semilight","sans-serif";">) provided to the constructor and use </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">data-win-bind </span><span style="font-family: "Segoe UI Semilight","sans-serif";">to bind the data from ViewModel property.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">So our html will be,<o:p></o:p></span></div><div class="MsoNormal"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">div</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">id</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">="donut"</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">data-win-bind</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">="winControl.donutValue:AvgPercent "</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">data-win-control</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">="Demo.UI.DonutChart"</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">data-win-options</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">="{ radius: 20, color2: '#107c10' }"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">div</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">></span><span style="font-family: "Segoe UI Semilight","sans-serif";"><o:p></o:p></span></div><div class="MsoNormal"><span style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Now question is how this will call the control constructor and draw the graph.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Answer is, when </span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">WinJS.UI.processAll()</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="font-family: "Segoe UI Semilight","sans-serif";">method is called from our code [usually this method will be called in default.js of the Windows Store App Solution ] the WinJS will parse the DOM, if the control is found mapping between control and the html done automatically by WinJS i.e. WinJS will instantiate the control and calls the constructor with element where the chart will be created and options provided in </span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">data-win-options</span><span style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 115%;"> </span><span style="font-family: "Segoe UI Semilight","sans-serif";">as parameters.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Final thing, we will use </span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">WinJS.Binding.processAll(document.getElementById(</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 115%; mso-highlight: white;">"container"</span><span style="font-family: Consolas; font-size: 9.5pt; line-height: 115%;">), ViewModel);</span><span style="font-family: "Segoe UI Semilight","sans-serif";"> to bind the data to the page or element.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";">Now debug/deploy the app and we can see the required graph on the screen.<o:p></o:p></span></div><div class="MsoNormal"><span style="font-family: "Segoe UI Semilight","sans-serif";"><br />
</span></div><div class="MsoNormal"><b><span style="font-family: "Segoe UI Semilight","sans-serif"; font-size: 17.0pt; line-height: 115%; mso-bidi-font-size: 11.0pt;">References:</span></b></div><div class="MsoNormal"></div><ul style="text-align: left;"><li><a href="http://blogs.msdn.com/b/windowsappdev/archive/2012/10/11/building-a-custom-control-using-the-windows-library-for-javascript-winjs.aspx" style="font-family: 'Segoe UI Semilight', sans-serif; text-indent: -0.25in;">Building Custom Controls using WinJS</a></li>
<li><a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465493.aspx" style="font-family: 'Segoe UI Semilight', sans-serif; text-indent: -0.25in;">MSDN</a></li>
</ul></div></div></div></div><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br />
<!-- FirstAd --><br />
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-4309583280669704"
data-ad-slot="3635081630"></ins><br />
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Murali Ghttp://www.blogger.com/profile/03598817747597566680noreply@blogger.com0tag:blogger.com,1999:blog-1565420803886663481.post-28191824824704627562014-01-24T19:57:00.001+05:302014-03-18T16:06:36.431+05:30Enable Windows 8 App(HTML) to make XHR request to service hosted in different domain<div dir="ltr" style="text-align: left;" trbidi="on"><h3 style="text-align: left;">Introduction</h3><div>In this small article we are going to learn how to enable our windows 8 app to make a XHR request to service hosted in different domain(e.g Web API hosted in some virtual machine and app in running in my local machine). It seems simple and yes the solution is also simple and straight forward, since I'm new to Win8 app development it took time to understand the things. Lets define the problem.</div><div><br />
</div><h3 style="text-align: left;">Problem</h3><div>First thing is I have two solutions one is Win8 javascript app solution and another one is service solution I have used Web API for it. Now, when i host my service in local IIS and access the service from my Win8 app it was working i.e i was able to get the data and response status was 200. But when i hosted the same service in some virtual machine(VM) a<span style="font-family: Times, Times New Roman, serif;">nd tried to access it was</span> giving 404(Not found) error. SO whats the solution???</div><div><br />
</div><h3 style="text-align: left;">Solution</h3><div>The following is my XHR request,</div><div><br />
</div><div><div><span style="font-family: Courier New, Courier, monospace;">WinJS.xhr({</span></div><div><span style="font-family: Courier New, Courier, monospace;"> type: "POST",</span></div><div><span style="font-family: Courier New, Courier, monospace;"> url: "url"</span></div><div><span style="font-family: Courier New, Courier, monospace;"> data: JSON.stringify(some_data),</span></div><div><span style="font-family: Courier New, Courier, monospace;"> headers: {"Content-type": "application/json; charset=utf-8" },</span></div><div><span style="font-family: Courier New, Courier, monospace;"> }).then(</span></div><div><span style="font-family: Courier New, Courier, monospace;"> function (success) {</span></div><div><span style="font-family: Courier New, Courier, monospace;"> // play with the data</span></div><div><span style="font-family: Courier New, Courier, monospace;"> },</span></div><div><span style="font-family: Courier New, Courier, monospace;"> function (error) {</span></div><div><span style="font-family: Courier New, Courier, monospace;"> //handle the errors</span></div><div><span style="font-family: Courier New, Courier, monospace;"> }</span></div><div><span style="font-family: Courier New, Courier, monospace;"> );</span></div></div><div><span style="font-family: Courier New, Courier, monospace;"><br />
</span></div><div>There is nothing wrong with the request nor with the service but thing is we have to enable capabilities of Win8 app in <b>package.appxmanifest</b>. In this file under Capabilities tab you can find Capabilities section in that check the Private Networks (Client & Server) check box and save it, this solves the problem.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtIIZ6HsJ-_2QDbCiN78CwMRP5nnfnCfDt00Lj8xAiwuR2JtREjkHmMJbG4r3yq1ilk-mawr4ZDGqvWytHaWGrhtUqQd1ENONGTMZfAgW7VzZRw68glGzFFqMZGkodDQzzEDH8mrnSbmk/s1600/snap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYtIIZ6HsJ-_2QDbCiN78CwMRP5nnfnCfDt00Lj8xAiwuR2JtREjkHmMJbG4r3yq1ilk-mawr4ZDGqvWytHaWGrhtUqQd1ENONGTMZfAgW7VzZRw68glGzFFqMZGkodDQzzEDH8mrnSbmk/s1600/snap.png" height="401" width="640" /></a></div></div><a href="http://www.codeproject.com" rel="tag" style="display:none">CodeProject</a>Murali Ghttp://www.blogger.com/profile/03598817747597566680noreply@blogger.com2tag:blogger.com,1999:blog-1565420803886663481.post-59366960128435184022013-12-24T11:17:00.001+05:302014-03-18T16:06:47.549+05:30MaxJsonLength exception<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-family: Times, Times New Roman, serif;">MaxJsonLength exception in ASP.NET MVC4 during JavascriptSerializer:</span></div><span style="font-family: Times, Times New Roman, serif;"><br />
</span> <span style="font-family: Times, Times New Roman, serif;">Code:</span><br />
<span style="font-family:Courier New, Courier, monospace;">public ActionResult Index(){</span><br />
<span style="font-family:Courier New, Courier, monospace;"> var data = null //give some large data e.g big list of values</span><br />
<span style="font-family:Courier New, Courier, monospace;"> var resultData = Json(data, JsonRequestBehavior.AllowGet);</span><br />
<span style="font-family:Courier New, Courier, monospace;"> resultData.MaxJsonLength = Int32.MaxValue;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> return resultData;</span><br />
<span style="font-family:Courier New, Courier, monospace;">}</span><br />
<span style="font-family:Courier New, Courier, monospace;"><br />
</span> <i><span style="font-family: Times, Times New Roman, serif;">Note: Then web.config setting is ignored by the default JsonResult implementation. So we might need to implement a custom Json Result or we can use the above code.</span></i><br />
</div>Murali Ghttp://www.blogger.com/profile/03598817747597566680noreply@blogger.com0tag:blogger.com,1999:blog-1565420803886663481.post-7177749851958912362013-09-06T15:58:00.001+05:302015-02-06T14:07:24.693+05:30Enable Compatibility mode in IE<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="h2">Introduction</div>As there are new releases of IE(Internet Explorer) coming out regularly with new features and functionalities, it is not required for legacy page/site to support latest version of the browser. So, for this reason compatibility mode is been introduced in IE8 onwards.<br />
<div class="h2">Problem</div>I have an ASP.NET MVC web application, I want it to run in IE8 or IE9 compatiblity mode in IE10 as our client uses only IE8 or IE9 and we have IE10 in our work stations. Lets see how can we acheive this.<br />
<div class="h2">Solution</div>We can achieve this by setting the value of the compatiblity mode.<br />
Web page can specify compatibility mode either by using META tag or by setting the http header, note that <em>META tag will take precedence over http header when both are present.</em><br />
<em></em><br />
<strong>Sol 1: </strong>META Tag- place the following code in head element of web page(html page)<br />
<div class="pre-action-link" id="premain0" style="display: block;" width="100%"></div><div class="code"><pre id="pre0" lang="html" style="margin-top: 0px;"><span class="code-keyword"><</span><span class="code-leadattribute">meta</span> <span class="code-attribute">http-equiv</span><span class="code-keyword">="</span><span class="code-keyword">X-UA-Compatible"</span> <span class="code-attribute">content</span><span class="code-keyword">="</span><span class="code-keyword">IE=8, IE=9"</span><span class="code-keyword">/</span><span class="code-keyword">></span></pre></div>it is not only applicable for IE but also for other browsers like chrome<br />
<div class="pre-action-link" id="premain1" style="display: block;" width="100%"></div><div class="code"><pre id="pre1" lang="html" style="margin-top: 0px;"><span class="code-keyword"><</span><span class="code-leadattribute">meta</span> <span class="code-attribute">http-equiv</span><span class="code-keyword">="</span><span class="code-keyword">X-UA-Compatible"</span> <span class="code-attribute">content</span><span class="code-keyword">="</span><span class="code-keyword">IE=8, IE=9, chrome=1"</span><span class="code-keyword">/</span><span class="code-keyword">></span></pre></div><div lang="html" style="margin-top: 0px;"></div><em>Important to Note:</em> META tag should be placed in head section before any script or css tag.<br />
<br />
<strong>Sol 2: </strong>HTTP Header- We can configure our server to send a HTTP Header along with each page i.e send "X-UA-Compatibility: IE=8" HTTP header<br />
Now, how do we achieve the same in ASP.NET MVC application?<br />
Add the following code snippet in web.config file<br />
<div class="pre-action-link" id="premain2" style="display: block;" width="100%"></div><div class="code"><pre id="pre2" lang="xml" style="margin-top: 0px;"><span class="code-keyword"><</span><span class="code-leadattribute">system.webServer</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">httpProtocol</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">customHeaders</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">clear</span><span class="code-keyword">/</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">add</span> <span class="code-attribute">name</span><span class="code-keyword">="</span><span class="code-keyword">X-UA-Compatible"</span> <span class="code-attribute">value</span><span class="code-keyword">="</span><span class="code-keyword">IE=8"</span><span class="code-keyword">/</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">customHeaders</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-keyword">/</span><span class="code-leadattribute">httpProtocol</span><span class="code-keyword">></span>
<span class="code-keyword"><</span><span class="code-leadattribute">system.webServer</span><span class="code-keyword">></span>
</pre></div><div lang="xml" style="margin-top: 0px;"></div><em>Important to Note:</em><br />
<ul><li><strong>system.webServer</strong> tag will only be effective if your MVC3 is to run on IIS7 or later</li>
<li>If you find your <meta> tag is overridden by IE's intranet settings, this webServer setting will override the compatibility.</li>
</ul>For more details browser compatibility mode click <a href="http://blogs.msdn.com/b/askie/archive/2009/03/23/understanding-compatibility-modes-in-internet-explorer-8.aspx" title="Compatibility Mode">here</a>.</div></div>Murali Ghttp://www.blogger.com/profile/03598817747597566680noreply@blogger.com0tag:blogger.com,1999:blog-1565420803886663481.post-53770723564714745642013-08-12T14:47:00.001+05:302014-05-29T11:24:36.580+05:30Get unique/distinct values from an array using JQuery $.grep and $.inArray<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
Consider an example of getting unique elments from an array a = [1,1,2,3,8,2]<br />
<br />
<div class="code">
Array.prototype.unique = function(){<br />
var array = this;<br />
return array.filter(function(ele, index, arr){<br />
return index == arr.indexOf(ele);<br />
});<br />
}</div>
and in our Javascript,<br />
<br />
<div class="code">
var array = [1,1,2,3,8,2];<br />
var uniqueElments = arrray.unique();<br />
<br />
//Output will be 1,2,3,8</div>
But the issue is few of the older version browsers including IE7 that doesn't support some array features - such as indexOf or filter, so we can use jquery functionalities like:<br />
<br />
<ul style="text-align: left;">
<li> use $.grep instead of Array.filter</li>
<ul>
<li>The $.grep() method removes items from an array as necessary so that all remaining items pass a provided test. The test is a function that is passed an array item and the index of the item within the array. Only if the test returns true will the item be in the result array.</li>
</ul>
</ul>
<ul style="text-align: left;">
<li>use $.inArray instead of Array.indexOf</li>
<ul>
<li>The $.inArray() method is similar to JavaScript's native .indexOf() method in that it returns -1 when it doesn't find a match. If the first element within the array matches value, $.inArray() returns 0. </li>
</ul>
</ul>
Now here's how the changed code would look like:<br />
<br />
<div class="code">
Array.prototype.unique = function(){<br />
var array = this;<br />
return $.grep(array, function(ele, index){<br />
return $.inArray(ele, array) === index;<br />
});<br />
}</div>
<b>References:</b><br />
<a href="http://api.jquery.com/jQuery.grep/">$.grep</a><br />
<a href="http://api.jquery.com/jQuery.inArray/">$.inArray</a> </div>
</div>
Murali Ghttp://www.blogger.com/profile/03598817747597566680noreply@blogger.com0Bangalore, Karnataka, India12.9715987 77.59456269999998312.4764182 76.949115699999979 13.4667792 78.240009699999987tag:blogger.com,1999:blog-1565420803886663481.post-56251292654041059372013-07-26T13:53:00.003+05:302014-03-18T16:08:53.804+05:30ASP.NET MVC Custom HTML Helpers (C#)<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-family: Georgia, 'Times New Roman', serif;">In this article we will understand the different ways of creating custom helper method in ASP.NET MVC4 application. Though we have built-in html helpers like Html.ActionLink(), Html.TextBox() and many more, some times we may need to have custom helper methods for example Image or a block of html controls which is commonly used across the application like Address fields.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span><br />
<div dir="ltr" style="text-align: left;" trbidi="on"><div style="margin-bottom: .0001pt; margin: 0in;"><span style="font-family: Georgia, Times New Roman, serif;">Custom HTML Helpers make it easier to generate view content. We can create custom helpers in three ways:<o:p></o:p></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span></div><div style="margin: 0in 0in 0pt;"><span style="font-family: Georgia, Times New Roman, serif;">1. with<span class="apple-converted-space"> </span><b>Static Methods</b><o:p></o:p></span></div><div style="margin: 0in 0in 0pt;"><span style="font-family: Georgia, Times New Roman, serif;">2. with<span class="apple-converted-space"> </span><b>Extension Methods</b><o:p></o:p></span></div><div style="margin: 0in 0in 0pt;"><span style="font-family: Georgia, Times New Roman, serif;">3. with<span class="apple-converted-space"> </span><b><span style="background-color: none;">@helper</span><span class="apple-converted-space"> </span></b>in the razor view.<o:p></o:p></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
Let's understand how to implement the same.</span></div><div style="margin: 0in 0in 0pt;"><span style="font-family: Georgia, Times New Roman, serif;"><br />
<b><u>1. Static Methods:</u></b><o:p></o:p></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><b><u><br />
</u></b> In this approach we will create a static method and use that method in the view, here its is <b>ImageStatic</b> method which will return HtmlString.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span></div><div style="margin-bottom: .0001pt; margin: 0in;"><u><span style="font-family: Georgia, Times New Roman, serif; mso-ascii-theme-font: major-latin; mso-bidi-font-family: "Segoe UI"; mso-hansi-theme-font: major-latin;">CustomHelper.cs:</span></u></div><div style="background-color: #ffffee; background-position: initial initial; background-repeat: initial initial; border: 1pt dashed rgb(204, 204, 204); padding: 4pt;"><pre style="border: none; padding: 0in; vertical-align: baseline;"><span style="font-family: Georgia, Times New Roman, serif; line-height: 18.1875px;"><span style="color: blue;">namespace </span>HelperApplication.Helpers<span style="color: blue;">
{
public static class </span><span style="color: #45818e;">CustomHelpers</span><span style="color: blue;">
{
</span><span style="color: #38761d;"> //Static method</span><span style="color: blue;">
public static </span><span style="color: #45818e;">IHtmlString </span>ImageStatic(<span style="color: blue;">string </span>src, <span style="color: blue;">string </span>alt = <span style="color: #990000;">"Image"</span>, <span style="color: blue;">int </span>width = 50, <span style="color: blue;">int </span>height = 50)
{<span style="color: blue;">
var </span>value <span style="color: blue;">= </span><span style="color: #45818e;">String</span><span style="color: blue;">.</span>Format<span style="color: blue;">(</span><span style="color: #990000;">"<img src='{0}' alt='{1}' width='{2}' height='{3}'/></span>", src, alt, width, height);<span style="color: blue;">
return new </span><span style="color: #45818e;">HtmlString</span>(value);<span style="color: blue;">
</span> }</span></pre><pre style="border: none; padding: 0in; vertical-align: baseline;"><span style="font-family: Georgia, Times New Roman, serif; line-height: 18.1875px;"><span style="color: #38761d;"> //Extension method</span><span style="color: blue;">
public static </span><span style="color: #45818e;">IHtmlString </span>ImageExtension(<span style="color: blue;">this </span><span style="color: #45818e;">HtmlHelper </span>helper,<span style="color: blue;"> string </span>src,<span style="color: blue;"> string </span>alt <span style="color: blue;">= </span><span style="color: #990000;">"image"</span>,<span style="color: blue;"> int </span>width = 50,<span style="color: blue;"> int </span>height = 50)<span style="color: blue;">
</span> {<span style="color: blue;">
var </span>value <span style="color: blue;">= </span><span style="color: #45818e;">String</span><span style="color: blue;">.</span>Format(<span style="color: #990000;">"<img src='{0}' alt='{1}' width='{2}' height='{3}'/>"</span>, src, alt, width, height);<span style="color: blue;">
return new </span><span style="color: #45818e;">HtmlString</span>(value);
}
}
}</span></pre></div><div style="margin-bottom: .0001pt; margin: 0in;"><span style="font-family: Georgia, Times New Roman, serif;"><br />
<strong>src</strong>- image source (path)<br />
<strong>alt</strong>- alternative text if image could not be loaded, and it is assigned a default value "Image". When no values is passed to this parameter it will take the default value "Image".<br />
<strong>width & height</strong>- width and height of the image these parameters are also assigned a default value 50<br />
<br />
Using the <strong>ImageStatic</strong> html helper method in view..<br />
<u>Index.cshtml</u>: </span><br />
<div style="background-color: #ffffee; background-position: initial initial; background-repeat: initial initial; border: 1pt dashed rgb(204, 204, 204); padding: 4pt;"><pre style="background-color: none; border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #44525e; font-family: Georgia, Times New Roman, serif;"><span class="kwd"><span style="border: 1pt none windowtext; color: blue; padding: 0in;"><span style="background-color: yellow;">@</span><span style="background-color: none;">using</span></span></span><span style="background-color: none; outline: 0px;"><span class="pln"><span style="border: 1pt none windowtext; padding: 0in;"> HelperApplication<span class="pun"><span style="border: 1pt none windowtext; padding: 0in;">.</span></span><span style="background-position: initial initial; background-repeat: initial initial; outline: 0px;"><span class="typ"><span style="border: none windowtext 1.0pt; color: #2b91af; mso-border-alt: none windowtext 0in; padding: 0in;">Helpers</span></span></span></span></span></span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #44525e; mso-ascii-theme-font: major-latin; mso-bidi-font-family: "Segoe UI"; mso-hansi-theme-font: major-latin;"><span style="background-position: initial initial; background-repeat: initial initial; outline: 0px;"><span style="background-color: none; border: 1pt none windowtext; font-family: Georgia, Times New Roman, serif; padding: 0in;"><<span style="color: #660000;">div</span>>
<<span style="color: #660000;">span</span>>ImageTag with default values for <em>alt, width, height</em></<span style="color: #660000;">span</span>> </span></span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #44525e;"><span style="outline: 0px;"><span style="border: 1pt none windowtext; padding: 0in;"><span style="background-color: none;"> </span><span style="background-color: yellow;">@</span></span></span></span><span style="background-color: none; color: #2b91af; line-height: 13.65pt;">CustomHelpers</span><span style="background-color: none; line-height: 13.65pt;">.</span><span style="background-color: none; color: #44525e; line-height: 13.65pt;">ImageTag(</span><span style="background-color: none; color: #990000; line-height: 13.65pt;">"../../images/image.png"</span><span style="background-color: none; color: #44525e; line-height: 13.65pt;">)</span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #44525e; mso-ascii-theme-font: major-latin; mso-bidi-font-family: "Segoe UI"; mso-hansi-theme-font: major-latin;"><span style="background-position: initial initial; background-repeat: initial initial; outline: 0px;"><span style="background-color: none; border: 1pt none windowtext; font-family: Georgia, Times New Roman, serif; padding: 0in;"></<span style="color: #660000;">div</span>></span></span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #44525e; mso-ascii-theme-font: major-latin; mso-bidi-font-family: "Segoe UI"; mso-hansi-theme-font: major-latin;"><span style="background-position: initial initial; background-repeat: initial initial; outline: 0px;"><span style="background-color: none; border: 1pt none windowtext; font-family: Georgia, Times New Roman, serif; padding: 0in;"><<span style="color: #660000;">div</span>>
<<span style="color: #660000;">span</span>>ImageTag with width=100 and height=100</<span style="color: #660000;">span</span>> </span></span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #44525e;"><span style="outline: 0px;"><span style="border: 1pt none windowtext; padding: 0in;"><span style="background-color: bone;"> </span><span style="background-color: yellow;">@</span></span></span></span><span style="background-color: none; color: #2b91af; line-height: 13.65pt;">CustomHelpers</span><span style="background-color: none; line-height: 13.65pt;">.</span><span style="background-color: none; color: #44525e; line-height: 13.65pt;">ImageStatic(</span><span style="background-color: none; color: #990000;"><span style="line-height: 13.65pt;">"</span><span style="line-height: 13.65pt;">../../images/image.png</span><span style="line-height: 13.65pt;">"</span></span><span style="background-color: none; color: #44525e; line-height: 13.65pt;">,</span><span style="background-color: none; color: #990000;"><span style="line-height: 13.65pt;">"</span><span style="line-height: 13.65pt;">Image With alt</span><span style="line-height: 13.65pt;">"</span></span><span style="background-color: none; color: #44525e; line-height: 13.65pt;">,100,100)</span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #44525e;"><span style="outline: 0px;"><span style="background-color: none; border: 1pt none windowtext; font-family: Georgia, Times New Roman, serif; padding: 0in;"></<span style="color: #660000;">div</span>></span></span></span></pre></div><span style="font-family: Georgia, Times New Roman, serif;"><br />
</span> <span style="font-family: Georgia, Times New Roman, serif;">The above code will render the images one with default dimensions(i.e width and height) and another one with given dimension (i.e width=100 and height=100)</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
<strong><u>2. Extension Methods:</u></strong></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><strong><u><br />
</u></strong></span> <span style="font-family: Georgia, Times New Roman, serif;">This is another approach to create custom html helpers, here we will extend the functionality of the HtmlHelper class.</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span> <span style="font-family: Georgia, Times New Roman, serif;">In the CustomHelper.cs class we have created another method called <b>ImageExtension. </b>We can see <u>this HtmlHelper helper</u> parameter, this implies that ImageExtension method extends functionality of HtmlHelper class. Thus, we can use this method just like other helper methods (Html.ActionLink() similarly Html.ImageExtension).</span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><br />
</span> <span style="font-family: Georgia, Times New Roman, serif;"><i><u>Note:</u> To make our method accessible like other built-in helper methods we have to add namespace to webconfig file <add namespace="<span style="line-height: 18.1875px;">HelperApplication.Helpers</span>"/> in ~/Views/web.config not in ~/web.config</i></span><br />
<span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #444444;"><br />
</span></span> <span style="font-family: Georgia, Times New Roman, serif;"><u>Index.cshtml</u>:</span><br />
<div style="background-color: #ffffee; border: 1pt dashed rgb(204, 204, 204); padding: 4pt;"><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #660000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;"><</span><span style="color: #660000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">div</span><span style="color: #660000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #660000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;"> <span></span><span style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">ImageTag with default values for </span><em style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">alt, width, height</em><span style="color: #660000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;"></span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #44525e;"><span style="outline: 0px;"><span style="border: 1pt none windowtext; padding: 0in;"> <span style="background-color: yellow;">@</span></span></span></span><span style="line-height: 13.65pt;">Html</span><span style="line-height: 13.65pt;">.</span></span><span style="font-family: Georgia, 'Times New Roman', serif;">ImageExtension</span><span style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">(</span><span style="color: #990000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">"../../images/image.png"</span><span style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">)</span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="outline: 0px;"><span style="border: 1pt none windowtext; color: #660000; font-family: Georgia, Times New Roman, serif; padding: 0in;"></div></span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="outline: 0px;"><span style="border: 1pt none windowtext; font-family: Georgia, Times New Roman, serif; padding: 0in;"><span style="color: #660000;"><div>
<span></span>ImageTag with width=100 and height=100<span style="color: #660000;"></span></span></span></span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: #44525e;"><span style="outline: 0px;"><span style="border: 1pt none windowtext; padding: 0in;"> <span style="background-color: yellow;">@</span></span></span></span></span><span style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">Html</span><span style="font-family: Georgia, Times New Roman, serif; line-height: 13.65pt;"><span style="line-height: 13.65pt;">.</span></span><span style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">ImageExtension</span><span style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">(</span><span style="color: #990000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;"><span style="line-height: 13.65pt;">"</span><span style="line-height: 13.65pt;">../../images/image.png</span><span style="line-height: 13.65pt;">"</span></span><span style="color: #44525e; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">,</span><span style="color: #990000; font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;"><span style="line-height: 13.65pt;">"</span><span style="line-height: 13.65pt;">Image With alt</span><span style="line-height: 13.65pt;">"</span></span><span style="font-family: Georgia, 'Times New Roman', serif; line-height: 13.65pt;">,100,100)</span></pre><pre style="border: none; line-height: 13.65pt; padding: 0in; vertical-align: baseline;"><span style="color: #44525e;"><span style="outline: 0px;"><span style="border: 1pt none windowtext; font-family: Georgia, Times New Roman, serif; padding: 0in;"></<span style="color: #660000;">div</span>></span></span></span></pre></div></div><div style="margin: 0in 0in 0pt;"><span style="font-family: Georgia, Times New Roman, serif;"><b><u><br />
</u></b></span> <span style="font-family: Georgia, Times New Roman, serif;"><b><u>3. <span style="background-color: none;">@helper</span> :</u></b><o:p></o:p></span></div><div class="MsoNormal"></div></div></div></div>Murali Ghttp://www.blogger.com/profile/03598817747597566680noreply@blogger.com0