tag:blogger.com,1999:blog-54506613909149054102024-03-14T01:26:24.211+05:30Extreme Developer/*Reflection of what I'm up to*/SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.comBlogger18125tag:blogger.com,1999:blog-5450661390914905410.post-77224123839833720192011-08-02T21:45:00.000+05:302017-01-02T21:46:53.629+05:30HTML5 <canvas> Part1 : IntroductionHello all, this is my first blog post here on TOC and I'm excited to present this article on HTML5 <code class="prettyprint"><canvas></code> element. As you might know <a href="http://dev.w3.org/html5/spec/Overview.htm" rel="external">HTML5</a> has been around here for a fair amount of time now and since all major browsers support its semantics with very minor differences, many developers are now picking it as their preferred choice for web development. Specially after the release of IE9 with support for HTML5 and hardware-accelerated text, video and graphics speed up performance that makes websites perform like programs installed on your computer, or in the words of <a href="http://www.microsoft.com/presspass/exec/hachamovitch/" rel="external">Dean Hachamovitch</a> a “native experience”. And with announcement of IE10 Platform Preview 1 available for <a href="http://go.microsoft.com/?linkid=9739661" rel="external">download</a>, at <a href="http://live.visitmix.com/MIX11" rel="external">MIX11</a>, it is the first step in delivering the next wave of progress in native HTML5 support. So let’s get started and explore the most powerful element of HTML5 the <code class="”prettyprint”"><canvas></code> element.<br />
<h3>
<a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#introduction" id="introduction" rel="bookmark">Introduction</a></h3>
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html" rel="external">HTML5</a> specifications defines the <code class="prettyprint"><canvas></code> element as “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.” A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. By default a <code class="prettyprint"><canvas></code> element has no content and no border of its own. You can define a simple <code class="prettyprint"><canvas></code> element with this minimal HTML.<br />
<pre class="prettyprint"><canvas id="mycanvas" width="300" height="225"></canvas>
</pre>
Here <code class="prettyprint">height</code> and <code class="prettyprint">width</code> specify the size of canvas and <code class="prettyprint">id</code> is specified to get access to it in your JavaScript code. And anything you put between tags will be treated as fallback content if <code class="prettyprint"><canvas></code> element is not supported by the browser.<br />
Apart from these attributes it also support two functions specific to this element, <a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#get-context" rel="bookmark"><code class="prettyprint">getContext</code></a> and <a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#to-dataurl" rel="bookmark"><code class="prettyprint">toDataURL</code></a> <br />
<h4>
<a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#get-context" id="get-context" rel="bookmark">getContext()</a></h4>
This function is the gateway to all things you can draw on <code class="prettyprint"><canvas></code>. Every canvas has a drawing context, which is where all the fun stuff happens. Once you’ve found a <code class="prettyprint"><canvas></code> element in the DOM (by using <code class="prettyprint">document.getElementById()</code> or any other method you like), you call its <code class="prettyprint">getContext()</code> method. Currently only "2d" context is supported, according to <a href="http://wiki.whatwg.org/wiki/CanvasContexts" rel="external">WHATWG Wiki CanvasContexts page</a> there is also a "webgl" context but it’s not yet supported by many browsers, though it might be supported in future revision of specifications. So to get context you will pass a string "2d" as argument which will return a new <code class="prettyprint">CanvasRenderingContext2D</code> Object, whose <a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#methods-and-properties" rel="bookmark">methods</a> can be used to draw on <code class="prettyprint"><canvas></code>.<br />
<h4>
<a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#to-dataurl" id="to-dataurl" rel="bookmark">getDataURL()</a></h4>
This method, when called with no arguments, return a <code class="prettyprint">data: URL</code> (<a href="http://tools.ietf.org/html/rfc2397" rel="external">rfc2397</a>) containing a representation of the anything thing on <code class="prettyprint"><canvas></code> as a <a href="http://dev.w3.org/html5/spec/Overview.html#refsPNG" rel="external">PNG</a> image file. You can also pass a string representation of any valid MIME Type to this function to get data in that format, like "image/png", "image/jpeg".<br />
<h3>
<a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#canvas-drawing-model" id="canvas-drawing-model" rel="bookmark">Canvas Drawing Model</a></h3>
Imagine you’re drawing a picture in ink. You don’t want to just dive in and start drawing with ink, because you might make a mistake. Instead, you sketch the lines and curves with a pencil, and once you’re happy with it, you trace over your sketch in ink. <br />
Each canvas has a path. Defining the path is like drawing with a pencil. You can draw whatever you like, but it won’t be part of the finished product until you pick up the quill and trace over your path in ink.<br />
In canvas almost all drawing method you call will add a path (except <code class="prettyprint">fillRect()</code> and <code class="prettyprint">fillText()</code> methods which paints a filled shape instantly), and will not draw until you call <code class="prettyprint"><a href="http://msdn.microsoft.com/en-us/netframework/ff975431" rel="external">stroke()</a></code>, <code class="prettyprint"><a href="http://msdn.microsoft.com/en-us/netframework/ff975415" rel="external">fill()</a></code> or <code class="prettyprint"><a href="http://msdn.microsoft.com/en-us/netframework/ff975408" rel="external">clip()</a></code> method. <code class="prettyprint">fill()</code> method fills the path with current <code class="prettyprint">fillStyle()</code>, <code class="prettyprint">stroke()</code> method draws the path with current <code class="prettyprint"><a href="http://msdn.microsoft.com/en-us/netframework/ff974918" rel="external">strokeStyle()</a>s</code> and <code class="prettyprint">clip()</code> method creates a clipping region for the path.<br />
<h3>
<a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#example" id="example" rel="bookmark">Example</a></h3>
Now let's explore how to use <code class="prettyprint"><canvas></code> element, and start drawing on canvas with its methods. For this example we will draw some simple shapes by using some of the methods of Context object, (for all methods please see <a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#methods-and-properties" rel="bookmark">Methods and Properties</a>).<br />
<h4>
Define a <canvas></h4>
You define a <code class="prettyprint"><canvas></code> with following simple markup.<br />
<pre class="prettyprint"><canvas id="mycanvas" width="300" height="100" style="border:1px solid black"></canvas>
</pre>
<canvas height="100" id="a" style="border: 1px solid black;" width="300"></canvas>
<br />
Above is the simple <code class="prettyprint"><canvas></code>, i have given it a border so you can see it.<br />
<h4>
Get the Context</h4>
Next we'll get the drawing context by following lines of JavaScript.<br />
<pre class="prettyprint">var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
</pre>
<h4>
Lets Draw on <canvas> !!!</h4>
We'll draw a square, a circle and some text on the <code class="prettyprint"><canvas></code>, for this we'll use following methods: (for all methods please see <a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#methods-and-properties" rel="bookmark">Methods and Properties</a>)<br />
<ul>
<li>
<b>fillRect( x, y, fWidth, fHeight)</b>:Paints a rectangle onto a CanvasRenderingContext2D object by using the current fill style.<br />
</li>
<li>
<b>beginPath()</b>:Resets the current path.<br />
</li>
<li>
<b>arc( x, y, radius, startAngle, endAngle, bAnticlockwise)</b>:Adds points to a path that represents an arc. (Angles are in radians).<br />
</li>
<li>
<b>fill()</b>:Fills sub-paths by using the current fill style.<br />
</li>
<li>
<b>fillText( text, x, y [, maxWidth])</b>:Renders filled text to the canvas by using the current fill style and font. (maxWidth is optional it specifies the maximum possible text width. If the value is less than the width property, the text is scaled to fit.)<br />
</li>
<li><b><a href="http://msdn.microsoft.com/en-us/netframework/ff974906" rel="external">fillStyle</a></b>:It is a property which sets the style that will be used to fill the shapes. it can be a <a href="http://msdn.microsoft.com/en-us/netframework/ff974956">CanvasGradient</a>, a CSS color, or a <a href="http://msdn.microsoft.com/en-us/netframework/ff975055">CanvasPattern</a>.</li>
</ul>
By using above methods we can write following JavaScript code to draw on <code class="prettyprint"><canvas></code>.<br />
<pre class="prettyprint">var acDegToRad = function(deg){ return deg * -(Math.PI/180)}
context.fillStyle = "rgb(0,160,250)";
context.fillRect(10,10,50,50);
context.beginPath();
context.arc(200,35,25, acDegToRad(0), acDegToRad(360)); /
context.fill();
context.fillText("Hi, I’m Samaj Shekhar", 100,80);
</pre>
Let me explain it line by line, in second line we set the <code class="prettyprint">fillStyle</code> property with an <code class="prettyprint">rgb()</code> string for blue color. Then we draw a filled rectangle at <code class="prettyprint">(10,10) (x,y)</code> cordinates with 50px width and height, thereby making it a square. In fourth line we start a Path to create a circle, then in next line we define the circle with the <code class="prettyprint">arc()</code> function, passing it the coordinates of <code class="prettyprint">(200,35)(x,y)</code> for center of circle, a radius of <code class="prettyprint">25px</code>, then a starting angle of <code class="prettyprint">0deg</code> and ending angle of <code class="prettyprint">360deg</code>, thereby completing a full path of circle. Since this function takes angles in "Radians" and by default draws angle in clockwise direction, I have defined a small function on first line, <code class="prettyprint">acDegToRad()</code> which converts passed value in degrees to radians then negates the result to make degrees anticlockwise (as we were taught to do in schools :). Then in sixth line we call the <code class="prettyprint">fill()</code> method to actually paint and fill the path, which is a circle in this case. The last line simply draws the string at <code class="prettyprint">(100,80)(x,y)</code> coordinates. By default the "font" of 2d context is 10px sans-serif. You can set any CSS font by passing it as string to <code class="prettyprint"><a href="http://msdn.microsoft.com/en-us/netframework/ff974907" rel="external">context.font</a></code> property<br />
And here are the shapes that get drawn, <br />
<canvas height="100" id="mycanvas" style="border: 1px solid black;" width="300"></canvas>
<script type="text/javascript">
(function drawoncanvas(){
var context = document.getElementById("mycanvas").getContext("2d");
var acDegToRad = function(deg){ return deg * -(Math.PI/180)}
context.fillStyle = "rgb(0,160,250)"; //set the fill color to blue
context.fillRect(10,10,50,50);
context.beginPath();
context.arc(200,35,25, acDegToRad(0), acDegToRad(360));
context.fill();
context.fillText("Hi, I'am Samaj Shekhar", 100,80);
})()
</script>
<br />
Below is another canvas with a fairly complex graphic for logo of <a href="http://www.thinkwithportals.com/" rel="external">PORTAL2</a>, one of my favourite games :). In my next post we'll dive deeper in other functions of <code class="prettyprint"><canvas></code> and I'll give a walkthrough of how to draw this nice PORTAL2 logo.<br />
<canvas height="350" id="portalcanvas" style="border: 1px dotted black;" width="350"></canvas>
<script src="https://bitbucket.org/shekharpro/miscellaneous/raw/d574108dbc72/portal2canvas.js" type="text/javascript">
</script>
<br />
<h3>
<a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#methods-and-properties" id="methods-and-properties" rel="bookmark">Methods and properties</a></h3>
As of now <code class="prettyprint">CanvasRenderingContext2D</code> Object contains only 49 methods and properties. MSDN has a nice <a href="http://msdn.microsoft.com/en-us/netframework/ff975057" rel="external">list of them</a>. Below is the short description of each :< /p>
<br />
<table class="clsStd"><tbody>
<tr><th>Property</th><th>Description</th></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974905" rel="external">canvas</a></td><td>Gets a back reference to the <a href="http://msdn.microsoft.com/en-us/netframework/ff975062" rel="external">canvas</a> object that the current context derives from. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974906" rel="external">fillStyle</a></td><td>Gets or sets the current style that is used to fill shapes.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974907" rel="external">font</a></td><td>Gets or sets the current font for the context.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974908" rel="external">globalAlpha</a></td><td>Gets or sets the current alpha or transparency value that is applied to global composite rendering operations. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974909" rel="external">globalCompositeOperation</a></td><td>Gets or sets a value that indicates how source images are drawn onto a destination image. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974910" rel="external">lineCap</a></td><td>Gets or sets the current line cap style.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974911" rel="external">lineJoin</a></td><td>Gets or sets the type of corner that is created when two lines meet.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974912" rel="external">lineWidth</a></td><td>Gets or sets the current line width, in pixels.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974913" rel="external">miterLimit</a></td><td>Gets or sets the maximum allowed ratio between half of the <a href="http://msdn.microsoft.com/en-us/netframework/ff974912" rel="external">lineWidth</a> value and the miter length.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974914" rel="external">shadowBlur</a></td><td>Gets or sets the current level of blur that is applied to shadows.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974915" rel="external">shadowColor</a></td><td>Gets or sets the color to use for shadows.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974916" rel="external">shadowOffsetX</a></td><td>Gets or sets the horizontal distance of a shadow from a shape.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974917" rel="external">shadowOffsetY</a></td><td>Gets or sets the vertical distance of a shadow from a shape.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974918" rel="external">strokeStyle</a></td><td>Gets or sets the current style that is used for strokes of shapes. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974919" rel="external">textAlign</a></td><td>Gets or sets the current anchor point or alignment settings for text in the current context. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff974920" rel="external">textBaseline</a></td><td>Gets or sets the current settings for the font baseline alignment. </td></tr>
</tbody></table>
<table class="clsStd"><tbody>
<tr><th>Method</th><th>Description</th></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975305" rel="external">arc</a></td><td>Adds points to a path that represents an arc.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975306" rel="external">arcTo</a></td><td>Draws an arc of a fixed radius between two tangents that are defined by the current point in a path and two additional points.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975405" rel="external">beginPath</a></td><td>Resets the current path.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975406" rel="external">bezierCurveTo</a></td><td>Adds a point to the current sub-path by using the specified control points that represent a cubic Bézier curve.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975407" rel="external">clearRect</a></td><td>Clears the pixels on a <b>CanvasRenderingContext2D</b> object within a given rectangle. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975408" rel="external">clip</a></td><td>Specifies a new clipping region.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975409" rel="external">closePath</a></td><td>Closes the current subpath and starts a new subpath that has a start point that is equal to the end of the closed subpath.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975410" rel="external">createImageData</a></td><td>Returns a <a href="http://msdn.microsoft.com/en-us/netframework/ff974957" rel="external">CanvasImageData</a> object that has dimensions in CSS pixels.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975411" rel="external">createLinearGradient</a></td><td>Creates an object that represents a linear gradient to use in a canvas context. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975412" rel="external">createPattern</a></td><td>Returns a <a href="http://msdn.microsoft.com/en-us/netframework/ff975055" rel="external">CanvasPattern</a> object that repeats the specified element in the specified direction.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975413" rel="external">createRadialGradient</a></td><td>Returns an object that represents a radial or circular gradient to use in a canvas context.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975414" rel="external">drawImage</a></td><td>Draws a specified image onto a canvas.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975415" rel="external">fill</a></td><td>Fills subpaths by using the current fill style.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975416" rel="external">fillRect</a></td><td>Paints a rectangle onto a <b>CanvasRenderingContext2D</b> object by using the current <a href="http://msdn.microsoft.com/en-us/netframework/ff974906" rel="external">fill style</a>.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975417" rel="external">fillText</a></td><td>Renders filled text to the canvas by using the current <b>fill style</b> and font.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975418" rel="external">getImageData</a></td><td>Returns an <a href="http://msdn.microsoft.com/en-us/netframework/ff976059" rel="external">ICanvasImageData</a> object that represents the pixel data for the specified rectangle on a canvas.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975419" rel="external">isPointInPath</a></td><td>Determines if the specified point is in the current path.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975420" rel="external">lineTo</a></td><td>Adds a new point to a subpath and connects that point to the last point in the subpath by using a straight line.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975421" rel="external">measureText</a></td><td>Returns a <a href="http://msdn.microsoft.com/en-us/netframework/ff975058" rel="external">CanvasTextMetrics</a> object that contains the width of the specified text.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975422" rel="external">moveTo</a></td><td>Creates a new subpath by using the specified point.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975423" rel="external">putImageData</a></td><td>Paints the data from a specified <b>CanvasImageData</b> object onto a canvas. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975424" rel="external">quadraticCurveTo</a></td><td>Adds a point to the current subpath by using the specified control points that represent a quadratic Bézier curve.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975425" rel="external">rect</a></td><td>Creates a new closed rectangular subpath.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975426" rel="external">restore</a></td><td>Returns previously saved <b>CanvasRenderingContext2D</b> path state and attributes.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975427" rel="external">rotate</a></td><td>Rotates the current context coordinates (that is, a transformation matrix).</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975428" rel="external">save</a></td><td>Saves the state of the current context.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975429" rel="external">scale</a></td><td>Scales the current context by the specified horizontal (x) and vertical (y) factors. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975430" rel="external">setTransform</a></td><td>Resets the current transformation matrix of the current context back to its default and then multiplies it by the specified matrix. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975431" rel="external">stroke</a></td><td>Renders the strokes of the current subpath by using the current stroke styles. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975432" rel="external">strokeRect</a></td><td>Creates an outline of the specified rectangle on a canvas by using the current stroke, line width, and join styles.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975433" rel="external">strokeText</a></td><td>Renders the specified text at the specified position by using the current font and <a href="http://msdn.microsoft.com/en-us/netframework/ff974918" rel="external">strokeStyle</a> property. </td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975434" rel="external">transform</a></td><td>Modifies the transformation matrix of the current context.</td></tr>
<tr><td><a href="http://msdn.microsoft.com/en-us/netframework/ff975435" rel="external">translate</a></td><td>Specifies values to move the origin point in a canvas. </td></tr>
</tbody></table>
SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-77118783932143651762011-07-22T04:11:00.000+05:302011-07-30T04:21:48.839+05:30Introduction to HTML5 <Canvas>: Part 2 (Example)<div dir="ltr" style="text-align: left;" trbidi="on">
This post is the sequel to my previous post of
<a href="http://www.techieoncloud.com/2011/04/html5-part1-introduction.html">Introduction to HTML5 <code class="prettyprint"><Canvas></code>: Part 1</a> and shows a walkthrough example of using canvas for some static 2D drawing (for Introduction to animation wait for my next post). This is the second post to my “HTML5 <code class="prettyprint"><Canvas></code>” series. <br />
In previous post we saw how <code class="prettyprint"><Canvas>'s
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#primary-context">context</a></code> gives us an API with set of
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#canvasrenderingcontext2d">methods and properties</a> to draw on its surface, now in this post we will use some of those methods to draw a logo of one of my favorite game <a href="http://www.thinkwithportals.com/">PORTAL2</a>. <br />
<canvas height="350" id="portalcanvas-0" style="border: 1px black solid;" width="300"><i style="border: 1px solid black; color: red;">Sorry, but your Browser Dosen't Support HTML5 <canvas></i></canvas><br />
Above is the actual completed art drawn on canvas, and
<a href="http://draft.blogger.com/blogger.g?blogID=5450661390914905410#portalcanvasanimated">below </a>we will see how we draw that art piece by piece. And Let me tell you this article is just for introducing you to the use of various methods provided by canvas and may not show the best and efficient way of drawing on it. So keeping that in mind, let’s get started.<br />
<h3>
First things first</h3>
As you may know by now that before any drawing we need to have a handle on <code class="prettyprint"><Canvas></code> element to do manipulations, and that handle is the <code class="prettyprint">context</code> object of the <code class="prettyprint"><Canvas></code>. The
<code class="prettyprint">
<a href="http://dev.w3.org/html5/2dcontext/#canvasrenderingcontext2d">context</a></code> of the <code class="prettyprint"><Canvas></code> element provides us all that API of methods to do drawing and manipulation on <code class="prettyprint"><code class="prettyprint"><Canvas></code></code>. To get the <code class="prettyprint">context</code> we use "<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-canvas-getcontext">getContext()</a></code>” method and pass in the string <code class="prettyprint">“2d”</code> as parameter * . Also since we feel more natural using “degrees” for specifying angles but all functions of canvas <code class="prettyprint">context</code> take clockwise “radians” as parameter, we’ll use following function to convert degree into anticlockwise* radians. Also note that it is recommended to use "<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-save">save()</a></code>” and “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-restore">restore()</a></code>” methods of <code class="prettyprint">context</code> to save the current state of the <code class="prettyprint">context</code> on the stack before any manipulation & transformation and restore it back to its previous state respectively.<br />
*(for details check my previous post or <a href="http://www.w3.org/TR/html5/the-canvas-element.html">w3c draft</a>)<br />
<pre class="prettyprint">//context of the canvas
var ctx = document.getElementById("portalcanvas").getContext("2d");
//function to convert radians to degrees
var acDegToRad = function(deg){
return deg* (-(Math.PI / 180.0));
}
</pre>
<h3>
Drawing the “2”</h3>
We’ll start by drawing the number “2” on the <code class="prettyprint"><Canvas></code>. It consists of 3 pieces the base rectangle, a slant rectangle and an arc.<br />
<ul>
<li>
<b>2’s Base:</b> The base rectangle is the easiest of all to draw, just set the
“<code class="prettyprint">
<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-fillstyle">fillStyle</a></code>” property of the <code class="prettyprint">context</code> to light gray color and use “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-fillrect">fillRect( x, y, width, height)</a></code>” method to draw the rectangle.<br />
<canvas height="350" id="portalcanvas-1" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas>
<pre class="prettyprint">ctx.save();
ctx.fillStyle = "rgb(110,110,110)";
ctx.fillRect(20,200,120,35);
ctx.restore();
</pre>
If we want we could also draw above rectangle as a small horizontal line with line-width equal to the height of the above rectangle. But that would involve more steps like creating a path and then drawing the line along the path, which is more complicated for this primitive shape.<br />
</li>
<li>
<b>2’s Slant:</b> The slant rectangle is just a simple rectangle but elevated to an angle of 35 Degrees. So to create a slant rectangle first we will translate the origin of the coordinate space (i.e., the transformation matrix) to the top edge of 2’s base rectangle using “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-translate">translate( newX, newY)</a></code>” and then rotate the coordinate space by 35 degrees in anti-clockwise direction, taking new origin as the pivot/center, by using the “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-rotate">rotate(radians)</a></code>” method and then simply draw the rectangle using
<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-fillrect">fillRect( x, y, width, height)</a></code>.<br />
<canvas height="350" id="portalcanvas-2" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas>
<pre class="prettyprint">ctx.save();
ctx.fillStyle = "rgb(110,110,110)";
ctx.translate(20,200);
ctx.rotate(acDegToRad(35));
ctx.fillRect(0,0,100,35);
ctx.restore();
</pre>
Also note that how we have used <code class="prettyprint">save()</code> before any manipulation and then used
<code class="prettyprint">restore()</code> after drawing, this makes sure that the translation and rotation of coordinate space does not affect rest of drawings we are about do later on. This way <code class="prettyprint">context</code> state of the canvas always remains in previous state, in this case, the Initial state. Remember
<code class="prettyprint">save()</code> and <code class="prettyprint">restore()</code> doesn’t save/restore the contents on the canvas, it just save/restore the state of properties/attributes like “<code class="prettyprint">fillStyle</code>”, “<code class="prettyprint">strokeStyle</code>”, “<code class="prettyprint">lineWidth</code>”, etc and coordinate space on the <code class="prettyprint"><Canvas></code>drawing context.<br />
</li>
<li>
<b>2’s Arc:</b> The top arc of number “2” cannot be drawn by rectangle methods but can be simply drawn like a line arc whose line-width is equal to the height of previous rectangles. For creating any line shape we first start a path by calling “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-beginpath">beginPath()</a></code>” method, then call any shape method like “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-rect">rect()</a></code>”, “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arc">arc()</a></code>”, “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-lineto">lineTo()</a></code>”, etc to add them to path and then optionally call “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-closepath">closePath()</a></code>” method to complete the path and start new one. For this step we will start a new path and add an arc to the path by using “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-arc">arc(x,y,radius, startAngle, endAngle)</a></code>” method. So far we have only created the path, to actually draw the arc on canvas we will call “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-stroke">stroke()</a></code>” method. But since stroke will draw with default color, so before calling “<code class="prettyprint">stroke()</code>“ we will set “<code class="prettyprint"><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-strokestyle">strokeStyle</a></code>” property of <code class="prettyprint">context</code> to light gray.<br />
<canvas height="350" id="portalcanvas-3" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas><pre class="prettyprint">ctx.save();
ctx.lineWidth = 35;
ctx.beginPath();
ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);
ctx.strokeStyle = "rgb(110,110,110)";
ctx.stroke();
ctx.restore();
</pre>
</li>
</ul>
<h3>
Drawing the “blue guy”</h3>
The next thing to be drawn is that blue guy coming out of the wall. This art consists of a wall, blue guy’s head, his tummy and then this hand & legs.<br />
<ul>
<li>
<b>Wall:</b> The wall is the just a simple slim and tall blue rectangle.<br />
<canvas height="350" id="portalcanvas-4" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas><pre class="prettyprint">ctx.save();
ctx.fillStyle = "rgb(0,160,212)";
ctx.fillRect(162,20,8,300);
ctx.restore();
</pre>
</li>
<li>
<b>Head:</b> The blue guy’s head is also a simple circle, but since we <b>not</b> have a direct method like
“fillCircle()”, we’ll need to use a similar trick as we did for “2’s” arc. We will start a new path, add a full 360 degree arc and fill it with color. For filling we will use “fill()” method accompanied by “fillStyle” property set to light blue color, to fill the path with blue color thereby creating a filled circle.<br />
<canvas height="350" id="portalcanvas-5" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas><pre class="prettyprint">ctx.save();
ctx.fillStyle = "rgba(256,256,256,0.75)";
ctx.fillRect(0,0,300,350);
ctx.fillStyle = "rgb(0,160,212)";
ctx.beginPath();
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
ctx.fill();
ctx.restore();
</pre>
A thing to note here is that when you create a path you have two options, either to call “stroke()” method to draw that path using current “strokeStyle”, as we did earlier and will do for hand and legs, or to call “fill()”method to fill the path with current “fillStyle”, as we did just now for head and will do for tummy. We also have an option of calling “clip()” method (discussed later).<br />
</li>
<li>
<b>Tummy:</b> The tummy of the blue guy is also drawn by creating a triangle path and filling the triangle with blue color. To create the triangle path we first start a new path, move the initial drawing point from origin or any last position (lets it be O) to a point on the wall below the head using “moveTo(x, y)” method which moves the drawing point from current draw point to a new point (let it be A) without adding the line between O & A to the path, then use “lineTo( x, y)” method which moves the drawing point to a new point (let it be B) and also adds the line between A & B to the path. Similarly add the third point (let it be C) to complete the three points of the triangle. This will also add the line between B & C to the path. Now optionally you can use “lineTo( x, y)” method to go back to point A and add line between C & A to the path and thus closing the path but by default the “fill()” will automatically assume a line between opening and closing points and will fill the enclosed area. <br />
<canvas height="350" id="portalcanvas-6" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas><pre class="prettyprint">ctx.save();
ctx.fillStyle = "rgb(0,160,212)";
ctx.beginPath();
ctx.moveTo(170,90); //point A
ctx.lineTo(230,140); //point B
ctx.lineTo(170,210); //point C
ctx.fill(); //fill area between ABC
ctx.restore();
</pre>
</li>
<li>
<b>Hand:</b> For hand we will simply create two lines as we did above. A to B for shoulder to elbow and B to C for forearm. But by default the line is 1px wide first we will set “lineWidth” property of <code class="prettyprint">context</code> to 25px, then since line’s ends and joints (at B) are rectangular by default, we will set both “lineCap” property, for line ends and “lineJoin” property to “round”. And since we want lines to be drawn instead of filling the space between, we will call “stroke()” method of context.<br />
<canvas height="350" id="portalcanvas-7" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas><pre class="prettyprint">ctx.save();
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.strokeStyle = "rgb(0,160,212)";
ctx.beginPath();
ctx.moveTo(222,150); //point A
ctx.lineTo(230,190); //point B
ctx.lineTo(270,220); //point C
ctx.stroke();
ctx.restore();
</pre>
</li>
<li>
<b>Leg:</b> The leg can be drawn exactly as we drew the hand so code will be much same as above except for the coordinates.<br />
<canvas height="350" id="portalcanvas-8" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas><pre class="prettyprint">ctx.save();
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.strokeStyle = "rgb(0,160,212)";
ctx.moveTo(160,210); //point A
ctx.lineTo(195,260); //point B
ctx.lineTo(160,290); //point C
ctx.stroke();
ctx.restore();
</pre>
But there is a problem with above code, the result leg doesn’t look like what we want. Part of the leg is hidden in the wall, so we need to clip the extra piece of leg from the drawing. <br />
</li>
<li>
<b>Clip Leg:</b> With above code we didn’t got what we wanted but fret not, “clip()” method comes to rescue. Clip is similar to fill method but instead of filling the area enclosed by the path with some color, it creates an enclosed invisible boundary (outline of triangle is drawn in figure only to highlight the clip area) where any drawing on it clipped if it does not lie in the clipping region and only the drawing lying in the clipping region is shown. So to clip legs protruding through the wall, we’ll first create a clipping region by creating a triangular path with one of its side coinciding with the wall and then draw the leg same as we drew the hand.<br />
<canvas height="350" id="portalcanvas-9" style="border: 1px black solid; height: 175px; width: 150px;" width="300"></canvas><pre class="prettyprint">ctx.save();
//code for drawing clipping region
ctx.beginPath();
ctx.moveTo(170,200); //point A
ctx.lineTo(250,260); //point B
ctx.lineTo(170,320); //point C
ctx.lineTo(170,200); //back to point A to close the path
ctx.clip(); //set the above path for clipping region
//code for drawing leg
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.strokeStyle = "rgb(0,160,212)";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(160,210);
ctx.lineTo(195,260);
ctx.lineTo(160,290);
ctx.stroke();
ctx.restore();
</pre>
</li>
</ul>
And that’s all we need to do to create the that Portal 2 Logo, Below is an animated canvas showing all the pieces we used to draw it (in fact every image in this article is actually drawn on the <code class="prettyprint"><Canvas></code> elements) accompanied by complete combined code I used to draw it. So I hope that you liked this article and stay tuned for my next post where I will discuss 2D animation on <code class="prettyprint"><Canvas></code>.<br />
<a href="" name="portalcanvasanimated"><canvas height="350" id="portalcanvas-10" style="border: 1px black solid;" width="300"></canvas></a><p><i><a href="https://bitbucket.org/shekharpro/miscellaneous/src/643352f89d9d/portal2canvasblogpost.js">(Actual Source Code)</a></i></p>
<br />
<pre class="prettyprint">(function(){
var ctx = document.getElementById("portalcanvas").getContext("2d");
//function to convert deg to radian
var acDegToRad = function(deg){
return deg* (-(Math.PI / 180.0));
}
//save the initial state of the context
ctx.save();
//set fill color to gray
ctx.fillStyle = "rgb(110,110,110)";
//save the current state with fillcolor
ctx.save();
//draw 2's base rectangle
ctx.fillRect(20,200,120,35);
//bring origin to 2's base
ctx.translate(20,200);
//rotate the canvas 35 deg anti-clockwise
ctx.rotate(acDegToRad(35));
//draw 2's slant rectangle
ctx.fillRect(0,0,100,35);
//restore the canvas to reset transforms
ctx.restore();
//set stroke color width and draw the 2's top semi circle
ctx.strokeStyle = "rgb(110,110,110)";
ctx.lineWidth = 35;
ctx.beginPath();
ctx.arc(77,135,40,acDegToRad(-40),acDegToRad(180),true);
ctx.stroke();
//reset canvas transforms
ctx.restore();
//change color to blue
ctx.fillStyle = "rgb(0,160,212)";
//save current state of canvas
ctx.save();
//draw long dividing rectangle
ctx.fillRect(162,20,8,300);
//draw player head circle
ctx.beginPath();
ctx.arc(225,80,35,acDegToRad(0),acDegToRad(360));
ctx.fill();
//start new path for tummy :)
ctx.beginPath();
ctx.moveTo(170,90);
ctx.lineTo(230,140);
ctx.lineTo(170,210);
ctx.fill();
//start new path for hand
//set lineCap and lineJoin to "round", blue color
//for stroke, and width of 25px
ctx.lineWidth = 25;
ctx.lineCap = "round";
ctx.strokeStyle = "rgb(0,160,212)";
ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(222,150);
ctx.lineTo(230,190);
ctx.lineTo(270,220);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(170, 200);
ctx.lineTo(250, 260);
ctx.lineTo(170,320);
ctx.clip();
//begin new path for drawing leg
ctx.beginPath();
ctx.moveTo(160,210);
ctx.lineTo(195,260);
ctx.lineTo(160,290);
ctx.stroke();
//restore the <code class="prettyprint">context</code> back to its initial state
ctx.restore();
})()
</pre>
<script language="javascript" src="https://bitbucket.org/shekharpro/miscellaneous/raw/643352f89d9d/portal2canvasblogpost.js" type="text/javascript">
</script></div>
SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-39758869724261256582011-03-27T20:16:00.002+05:302011-03-27T20:26:30.913+05:30How to: Create a Twitter widget in your blog<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="post-text">
<p>So this my next attempt, after <a href="http://shekhar-pro.blogspot.com/2011/03/google-code-prettify.html">Google Code Prettify</a> which i explained in previous post, to add custom features to my blog. In this post I'll explain how I made that Twitter Feed box you see in widgets column.</p>
<p>It uses little bit of HTML, CSS3 Styling and and jQuery to do the magic. I 'll give you a walk-through of how "I made it". I actually started this small app when someone at Stack<b>Overflow</b> asked how to embed Tweet' text's special words like @usernames, #Hashtags and Url's in an anchor (<code class="prettyprint"><a></code>) tag, i wrote some small JS code to take raw tweet string <a href="https://bitbucket.org/shekharpro/twitterlinkify">Linkify</a> it and return HTML. Later i moved on create a tweet box for my own <a href="http://shekhar-pro.blogspot.com">Blog</a>. in this walk-through to create a Tweet Feed Box for @samajshekhar (which is me of-course), so code and HTML are hard-coded with values related to my account but you can change it very well.<br/><i>(The <a href="https://bitbucket.org/shekharpro/twitterlinkify/src/7c9673f12a58/SPTwitterFeedBox/Default.html">HTML</a> and <a href="https://bitbucket.org/shekharpro/twitterlinkify/src/7c9673f12a58/SPTwitterFeedBox/twitterfeedbox.js">jQuery script</a> is downloadable from my <a href="http://bitbucket.org/shekharpro/twitterlinkify/src/7c9673f12a58/SPTwitterFeedBox/">repository</a> at Bitbucket, you can check it out and <a href="https://bitbucket.org/shekharpro/twitterlinkify/fork">fork</a> it to add custom features and styling)</i>.</p>
<p>Before starting i assume you have a little bit of knowledge of basic <a href="http://www.w3schools.com/html/default.asp">HTML</a>, <a href="http://www.w3schools.com/css3/default.asp">CSS</a> (actually CSS3 for curves and gradients), <a href="http://api.jquery.com/">jQuery</a> library and some understanding of <a href="http://developer.twitter.com/doc/get/statuses/user_timeline">Twitter's API</a> (its easy to understand and simple), I am using Public timeline API to get tweet in <a href="http://json.org/">JSON</a> format without authentication so we have a <a href="http://dev.twitter.com/pages/rate-limiting">Rate-Limit</a> of 150 requests per hour. So keeping these things in mind lets start!</p>
<h3>The HTML</h3>
<p>The HTML for the Tweeter Feed Box is simple collection of div(<code class="prettyprint"><div></code>) tags which make up skeleton to contain tweets. <i>It contain hard coded username <a href="http://twitter.com/samajshekhar">@samajshekhar</a> (which is my username at Twitter).</i></p>
<pre class="prettyprint">
<div>
<div id="SPTFB">
<div id="SPTFBHeader">
<a href="http://www.twitter.com/samajshekhar" target="_blank" style="text-decoration:none;color:#333;">
<img alt="@samajshekhar" src="http://a2.twimg.com/a/1299109335/phoenix/img/twitter_logo_right.png" style="border:none;"/>
<span>@samajshekhar</span>
</a>
</div>
<div id="SPTFBBody">
<span id="SPTFBLoading" style="display:block;font-size:10px;" class="SPTFBLoading">loading tweets...</span>
</div>
<div id="SPTFBFooter">
<table cellspacing="0px" cellpadding="0px">
<tr>
<td>Developed By <a style="color:Black;" rel="author" href="http://shekhar-pro.blogspot.com">Samaj Shekhar</a><br/>License: Creative Commons</td>
<td><a style="color:White;" id="ShekharProCCLicenseLogo" rel="license" href="http://creativecommons.org/license/by/2.5/">cc</a></td>
</tr>
</table>
</div>
</div>
</div>
</pre>
<p>Where:<br/>
<b>SPTFB:</b> is the main <code class="prettyprint"><div></code> which contains all the elements of this Twitter Feed Box <i>(actually SPTFB is the acronym for Shekhar Pro Twitter Feed Box)</i>.<br/>
<b>SPTFBHeader:</b> is the <code class="prettyprint"><div></code> which act as title bar and contains the Twitter @username with a twitter image.<br/>
<b>SPTFBBody:</b> is the <code class="prettyprint"><div></code> in which all tweets are shown.<br/>
<b>SPTFBLoading:</b> is a <code class="prettyprint"><span></code> element which just shows a loading... text while we dynamically insert Tweets.<br/>
<b>SPTFBFooter:</b> is the Footer <code class="prettyprint"><div></code> contains my attribution and a link to Creative Commons page.<br/>
<br/>
The Tweet text's <code class="prettyprint"><div></code> which will be added later will have a CSS class of <code class="prettyprint">".SPTFBFeed"</code>
</p>
<h3>The CSS</h3>
<p>The CSS is what makes this app look like it should. Match the styling with the element id and class in the above shown HTML. </p>
<pre class="prettyprint">
<style type="text/css">
#SPTFB /*Acronym for ShekharProTwitterFeedBox*/
{
width:230px;
height:450px;
padding:0px;
}
#SPTFBHeader
{
height:40px;
padding:3px 0px 0px 10px;
margin:0px;
}
#SPTFBBody
{
height:360px;
margin:2px;
}
#SPTFBFooter
{
height:30px;
}
#SPTFB
{
-moz-border-radius:20px 1px 1px 1px;
-webkit-border-radius:20px 1px 1px 1px;
border-radius:20px 1px 1px 1px;
border:2px solid #9C9C9C;
background-color:#9C9C9C;
}
#SPTFB a
{
text-decoration:underline;
color:#666;
}
#SPTFBHeader
{
-moz-border-radius:18px 0px 0px 0px;
-webkit-border-radius:18x 0px 0px 0px;
border-radius:18px 0px 0px 0px;
border:1px hidden azure;
font-family:Verdana;
font-size:16px;
overflow:hidden;
}
#SPTFBHeader , #ShekharProCCLicenseLogo
{
background-color:#9C9C9C;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.3, rgb(156,156,156)),
color-stop(0.88, rgb(219,219,219))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(156,156,156) 30%,
rgb(219,219,219) 88%
);
overflow:hidden;
}
#SPTFBBody
{
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
border-radius:4px 4px 4px 4px;
border:1px solid #888888;
background-color:#efefef;
overflow-y:auto;
overflow-x:hidden;
}
#SPTFBFooter
{
font-family:arial;
font-size:11px;
color:White;
text-decoration:none;
padding:5px 0px 0px 20px;
}
#ShekharProCCLicenseLogo
{
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
border:1px solid #666666;
height:26px;width:26px;
font-family:Verdana;
font-size:18px;
font-weight:bold;
text-align:center;
color:White;
text-decoration:none !important;
display:block;
margin:0px 0px 0px 20px;padding:0px;
}
.SPTFBFeed , .SPTFBLoading
{
background-color:#d0d0d0;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(179,179,179)),
color-stop(0.75, rgb(224,224,224))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(179,179,179) 25%,
rgb(224,224,224) 75%
);
border:1px solid #888888;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
margin:3px;
padding:3px;
font-family:arial;
font-size:13px;
font-weight:normal;
color:black;
}
</style>
</pre>
<p>There's nothing complicated about above CSS its simply contains styles related to margins, size, etc just go through and you will know what it does. It also has default colors with gradients so that it appears with matching color where gradients are where its not supported like in IE. If you don't know how to make gradients then there is a nice <a href="http://gradients.glrzad.com/">CSS3 Gradient Generator</a> which you can use.</p>
<h3>The Code !</h3>
<p>The last and most important one is the code which does the actual work of filling the box with tweets. Now i know some JavaScript ninjas may frown at my code but this is what "I made" and you are free to improve it, however if you see anything obvious then add a comment and I will correct it. It small JavaScript that uses jQuery, so remember to include the jQuery in your document before using following code.</p>
<pre class="prettyprint">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</pre>
<p>The code can be divided in two parts, one is simple one which linkifies the tweet text, i.e surrounds the url's, #hashtags and @usernames in an anchor (<code class="prettyprint"><a></code>) tag and other is the code which actually brings in the tweets from Twitter</p>
<b>Code for Linkifier</b>
<pre class="prettyprint">
var userNameRegEx = /@(\w*)\b/;
var hashTagRegEx = /#(\w*)\b/;
var urlLinkRegEx = /(^|[(\s]|&lt;)((?:(?:https?|ftp):\/\/|mailto:).+?)((?:[:?]|\.+)?(?:\s|$)|&gt;|[)])/;
function myTwitterLinkify(rawText) {
var stringArray = rawText.split(' ');
var stringStack = [];
$.each(stringArray, function () {
if (userNameRegEx.test(this)) {
var userlink = '<a href="http://twitter.com/' + userNameRegEx.exec(this)[0].toString().replace('@', '') + '">' + this.toString() + '</a>';
stringStack.push(userlink);
}
if (hashTagRegEx.test(this)) {
var userlink = '<a href="http://twitter.com/search?q=' + escape(hashTagRegEx.exec(this)[0].toString()) + '">' + this.toString() + '</a>';
stringStack.push(userlink);
}
if (urlLinkRegEx.test(this)) {
var userlink = '<a href="' + urlLinkRegEx.exec(this)[0].toString() + '">' + this.toString() + '</a>';
stringStack.push(userlink);
}
if (!userNameRegEx.test(this) && !hashTagRegEx.test(this) && !urlLinkRegEx.test(this)) {
stringStack.push(this);
}
});
return stringStack.join(' ');
}
</pre>
<p>Working of above code can be explained in following simple steps:</p>
<ol>
<li>Define Regular expression strings for each of @usernames, #hashtags and url.</li>
<li>Take the string and split it for <code class="prettyprint">' '</code> (space)into an array of words</li>
<li>Take each word at a time and match it with all regular expression strings</li>
<li>If a match is found then surround the word with anchor (<code class="prettyprint"><a></code>) tag and set its <code class="prettyprint">href=""</code> attribute with respective url's and push the resultent string the stack, if not then simply insert that word in the stack. <br/><i>(usually its <a href="http://twitter.com/username">http://twitter.com/username</a> for @username, <a href="http://twitter.com/search?q=hashtag">http://twitter.com/search?q=hashtag</a> for #hashtag and for urls just use the url itself.)</i></li>
<li>Finally join the stack values with a <code class="prettyprint">' '</code> (space) and return the complete string.</li>
</ol>
<b>Code to fill tweets</b>
<pre class="prettyprint">
var username = 'samajshekhar'; /* @username of the user at twitter*/
var format = 'json'; /* format in which to recive response, can be on of json, xml, rss, atom*/
var count = '6'; /* number of tweets to load*/
var include_retweets = 't'; /* wheather to include retweeets by user in timeline, can be true, t or 1*/
/*the API uri at which we will make the call to get tweets*/
var theapiurl = 'http://api.twitter.com/1/statuses/user_timeline.' + format + '?callback=?';
var fillReqSucceded = false; /**/
var sptfbFillTimer = 'undefined'; /**/
/*
Function to fill tweets in the tweet box
*/
function fillTweets() {
/*show loading... span*/
$('#SPTFBLoading').fadeIn('slow');
$.getJSON(theapiurl,
{
/*query string parameters to be passed to the api url*/
screen_name: username, /* @username of the user at twitter*/
count: count, /* number of tweets to load*/
trim_user: 't', /* whether to include extra information related to user profile,can be true, t or 1*/
include_rts: include_retweets /* whether to include retweets by user in timeline, can be true, t or 1*/
},
function (data) {
/*remove all previous tweets already in the box*/
$('.SPTFBFeed').remove();
/*read each tweet linkify its text and append it to #SPTFBBody <div> */
$.each(data, function () {
var elem = $('<div/>');
elem.addClass('SPTFBFeed').html(myTwitterLinkify(this.text));
$('#SPTFBBody').append(elem);
});
/**
*if we reached this far then we surely succeed in getting
* tweets and filling it in the box, so just remove the loading... span
*/
fillReqSucceded = true;
$('#SPTFBLoading').fadeOut('slow');
});
/**
*if this is NOT the first time we are flling tweets and we didn't succeed then
*show error in span schedule next fill after 20 seconds and exit this function
*/
if (sptfbFillTimer != 'undefined' && fillReqSucceded === false) {
$('#SPTFBLoading').html('Problem in loading Tweets :(<br/><br/>Please wait while we try again...').css({ 'color': 'red' });
sptfbFillTimer = setTimeout('fillTweets()', 20000);
return;
}
/*if we reached this far then all is well and lets schedule the next fill to occur after 30 seconds*/
sptfbFillTimer = setTimeout('fillTweets()', 30000);
/*just reset the style of loading... span as previous failure may have changed it*/
$($('#SPTFBLoading').html('loading tweets...')).css({ 'color': 'black' });
}
</pre>
<p>This <code class="prettyprint">'fillTweets()'</code> method is the one which you are going to call when you are ready to load Tweets like at <code class="prettyprint">'$(document).ready();'</code>. Now the for the working of above code comments are well enough , also as you can see we have defined some variables to store <a href="http://developer.twitter.com/doc/get/statuses/user_timeline">configuration</a> related to the API uri on which we will make GET request to receive the <a href="http://api.twitter.com/1/statuses/user_timeline.json?screen_name=samajshekhar&count=5&trim_user=t&include_rts=t">JSON for tweet</a> (we can also request <a href="http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=samajshekhar&count=5&trim_user=t&include_rts=t">XML for tweets</a>, but we will need to change the code for that). Also note that we have included a <code class="prettyprint">'callback=?'</code> parameter to make the JSON response a <a href="http://en.wikipedia.org/wiki/JSONP">JSONP</a>.</p>
<p>And that's all you need to do. Below is the snapshots f how it looked in Firefox3,4 and IE9</p>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2paZucKij6A1-aI083vcVcHVxKn3DDkgTeFA9YQJzPxNqKHcCXskIV7v4uFYSg8nsPI750fI1lnFk5lNzLusZ1yqMDPc3hPz7r4yr4y4Qgw2ZrxzDvT0Ht9YpN71n82gkPiqkgBpCmJ5X/s1600/fbk.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2paZucKij6A1-aI083vcVcHVxKn3DDkgTeFA9YQJzPxNqKHcCXskIV7v4uFYSg8nsPI750fI1lnFk5lNzLusZ1yqMDPc3hPz7r4yr4y4Qgw2ZrxzDvT0Ht9YpN71n82gkPiqkgBpCmJ5X/s1600/fbk.png" /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrLarqaktZsEsrlzyDquNOwEZb612sNFlVOZ1SWCXr9M2wnCwWqoPY4vRd9_OTK3869L6P7IAnhRKNn38gkVqn_ix1z6W7sA3upbTiimXJsTHkZzND_kt4xhVGoXJEaHWwptm2-62Qwfzs/s1600/fbk.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrLarqaktZsEsrlzyDquNOwEZb612sNFlVOZ1SWCXr9M2wnCwWqoPY4vRd9_OTK3869L6P7IAnhRKNn38gkVqn_ix1z6W7sA3upbTiimXJsTHkZzND_kt4xhVGoXJEaHWwptm2-62Qwfzs/s1600/fbk.png" /></a><br />
</div>
</div>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-71785315213047864532011-03-05T19:49:00.005+05:302011-03-27T09:05:12.725+05:30Google Code Prettify<div class="post-text">
For a long while code snippets on my blog were inconsistently formatted as i always kept experimenting with CSS for code and every post came out with its own formatting, sometimes i used tools on web to format my code and give me the HTML, so it looked very awful.
Recently i found out <a href="http://code.google.com/p/google-code-prettify/">"Google Code Prettify"</a>, its a java-script code which contains those lexers to recognize the code and format it appropriately accompanied by a CSS which you can of-course customize it to suit your needs. Its easy to use and supports almost all languages, from java to Haskel and all C family languages.
Though there is a <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html">readme</a> at Google code website here are the steps to add it to your blog or website.
<h3>
Setup</h3>
<li><a href="http://code.google.com/p/google-code-prettify/downloads/list">Download</a> a distribution
</li>
<li>Include the script and style-sheets in your document
(you will need to make sure the css and js file are on your server, and
adjust the paths in the <tt>script</tt> and <tt>link</tt> tag)</li>
<pre class="prettyprint"><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"prettify.css"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"prettify.js"</span><span class="tag">></script></span></pre>
<li>Add <code class="prettyprint">onload="prettyPrint()"</code> to your
document's body tag.
</li>
<li>Modify the stylesheet to get the coloring you prefer</li>
<h3>
Usage</h3>
Put code snippets in
<tt><code class="prettyprint"><pre class="prettyprint">...</pre></code></tt>
or <tt><code class="prettyprint"><code class="prettyprint">...</code></code></tt>
and it will automatically be pretty printed.
The original
<pre style="border: 1px solid rgb(136, 136, 136); padding: 2px;"><a href="http://www.blogger.com/post-edit.g?blogID=5450661390914905410&postID=7178531521304786453" name="voila1"></a>class Voila {
public:
// Voila
static const string VOILA = "Voila";
// will not interfere with embedded <a href="http://www.blogger.com/post-create.g?blogID=5450661390914905410#voila1">tags</a>.
}</pre>
Prettier (I have applied <a href="http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.likeso.min.css" title="Link to my CSS on Bitbucket">custom CSS</a> on my blog so it will be different then what you'll get)
<pre class="prettyprint"><a href="http://www.blogger.com/post-edit.g?blogID=5450661390914905410&postID=7178531521304786453" name="voila2"></a><span class="kwd">class</span><span class="pln"> </span><span class="typ">Voila</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">public</span><span class="pun">:</span><span class="pln">
</span><span class="com">// Voila</span><span class="pln">
</span><span class="kwd">static</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> </span><span class="kwd">string</span><span class="pln"> VOILA </span><span class="pun">=</span><span class="pln"> </span><span class="str">"Voila"</span><span class="pun">;</span><span class="pln">
</span><span class="com">// will not interfere with embedded </span><a href="http://www.blogger.com/post-create.g?blogID=5450661390914905410#voila2"><span class="com">tags</span></a><span class="com">.</span><span class="pln">
</span><span class="pun">}</span></pre>
So as it says you will need to download it on your own server and then link it in your script tag, but for your (and my own) convenience i have hosted it at <a href="https://bitbucket.org/shekharpro/google_code_prettify">Bitbucket DVCS Source Code hosting</a> site. On the download page you will find the minified versions of the <code><a href="http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.js">prettify.js</a>(19kb)</code> and <code><a href="http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.css">prettify.css</a>(1kb)</code>
<h4>
So your tags become:</h4>
<pre class="prettyprint"><span class="tag"><link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.css"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="pln"> </span><span class="tag">/></span><span class="pln">
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"http://cdn.bitbucket.org/shekharpro/google_code_prettify/downloads/prettify.js"</span><span class="tag">></script></span></pre>
</div>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com2tag:blogger.com,1999:blog-5450661390914905410.post-12428047804447634692011-01-01T07:06:00.071+05:302011-04-15T06:48:58.151+05:30Serializing and Deserializing Data from Json to .Net Objects. ( Example Facebook Feeds)<p>A very very Happy New Year to you all. I thought why not start this year with a nice blog post, so here i am with a post on how to <code>Deserialize</code> data from Json to a .Net Object and back again.Many libraries exist for this Job most notabely the <a href="http://json.codeplex.com/">Json.Net</a> and Dynamic Rest library by <a href="https://github.com/NikhilK/dynamicrest">Nikhil Kothari</a></p>
<p>But developer community has always asked why microsoft didn't have it in the Frame work. Well now they have one. It comes in frame work now with an added dll of <code>"System.Web.Extentions.dll"</code>. That provides us the Class <a href="http://msdn.microsoft.com/en-us/library/bb299886.aspx">JavascriptSerializer</a> which you can use by including a using statement as follows.</p>
<pre class="prettyprint">
using System.Web.Script.Serialization;
</pre></p>
<p>Before going into the code, let us first understand what is JSON, and what is its significance in the modern world of web applications.</p>
<h5>What is JSON?</h5>
<p>JSON is another format of expressing data, just like XML. But, JSON is very simpler than XML, and tiny than XML. So, it is becoming popular in the web world to choose the JSON notation over XML since JSON notation are usually shorter, and less data to be transmitted if at all they were to be.</p>
<h5>A Simple Example</h5>
<p>So lets understand this process with an example, since i am currently working on a <a href="http://thesharepage.codeplex.com/">project</a> which uses facebook to query data, i think this will be helpful to the facebook developer community also. So first you need to define a class that matches the JSON object you are receiving. like a class if a Data in Json looks like below.</p>
<pre class="prettyprint">
{
"obj1":"data",
"obj2":"10004",
"obj3":{
"subobj1":"data",
"subobj2":"data"
}
"obj4":"data"
}
</pre>
<p>Then the corresponding class for that in .Net will be</p>
<pre class="prettyprint">
public class MyObj1
{
public string obj1 { get; set; }
public int obj2 { get; set; }
public MyObj2 obj3 { get; set; }
public string obj4 { get; set; }
}
public class MyObj2
{
public string subobj1 { get; set; }
public string subobj2 { get; set; }
}
</pre>
<p>Notice The obj3 in Json is a completely different class as it contains sub fields so a different class fo that in .Net. Also Remember JavascriptSerializer uses reflections to match field or property "names" with that in "Json" so be careful.</p>
<p>Now to deserialize above Json data to the .Net classes juat include the following line.</p>
<pre class="prettyprint">
JavaScriptSerializer sr = new JavaScriptSerializer();
string jsondata = /*your json string here*/;
//Now with this line the Json string will be converted in MyObj1 object type
MyObj1 converted = sr.Deserialize<MyObj1>(jsondata);
</pre>
<h5>Facebook Example (Deserializing Facebook Feeds)</h5>
<p>Now the data returned by facebook's Graph API is also in Json and below is an sample data returned by</p>
<p><a href="http://graph.facebook.com/samajshekhar/feed?limit=1">http://graph.facebook.com/samajshekhar/feed?limit=1</a></p>
<pre class="prettyprint">
{
"data": [
{
"id": "100000570310973_182862925076050",
"from": {
"name": "Samaj Shekhar",
"id": "100000570310973"
},
"message": "#Wow A decade has passed .. #Happy New year to every one....May this new year be the most luckiest for you and every one.",
"icon": "http://photos-d.ak.fbcdn.net/photos-ak-snc1/v27562/23/2231777543/app_2_2231777543_9553.gif",
"actions": [
{
"name": "@samajshekhar on Twitter",
"link": "http://twitter.com/samajshekhar?utm_source=fb&utm_medium=fb&utm_campaign=samajshekhar&utm_content=20985773201301504"
}
],
"type": "status",
"application": {
"name": "Twitter",
"id": "2231777543"
},
"created_time": "2010-12-31T23:32:54+0000",
"updated_time": "2010-12-31T23:32:54+0000"
}
],
"paging": {
"previous": "http://graph.facebook.com/samajshekhar/feed?limit=1&since=2010-12-31T23%3A32%3A54%2B0000",
"next": "http://graph.facebook.com/samajshekhar/feed?limit=1&until=2010-12-31T23%3A32%3A53%2B0000"
}
}
</pre>
<p>Don't get confused its just little more data of different types including arrays.
( To get data from facebook you can use System.Net.HttpWebRequest and System.Net.HttpWebResponse class). So Now the equivalent .Net classes will be as follows.</p>
<h5>Note:</h5>
<p>I have included only the classes needed for the above feed for a complete class that accommodate all fields returned in feed with and without access token can be found here at </p>
<p><a href="http://thesharepage.codeplex.com/SourceControl/changeset/view/5405#100657">http://thesharepage.codeplex.com/SourceControl/changeset/view/5405#100657</a></p>
<pre class="prettyprint">
public class FacebookFeedsWithoutToken
{
public FacebookFeedWithoutToken[] data { get; set; }
public ReturnedDataPaging paging { get; set; }
}
public class FacebookFeedWithoutToken
{
public string id { get; set; }
public NameIdPair from { get; set; }
public string message { get; set; }
public Uri icon { get; set; }
public NameLinkPair[] actions { get; set; }
public string type { get; set; }
public NameIdPair application { get; set; }
public DateTime created_time { get; set; }
public DateTime updated_time { get; set; }
}
public class NameIdPair
{
public string name { get; set; }
public string id { get; set; }
}
public class NameLinkPair
{
public string name { get; set; }
public Uri link { get; set; }
}
</pre>
<p>Now the classes are ready we just need to convert from json string to .Net object types. add the following line similar to above.</p>
<pre class="prettyprint">
JavaScriptSerializer sr = new JavaScriptSerializer();
string jsondata = /*your json string here*/;
FacebookFeedsWithoutToken converted = sr.Deserialize<FacebookFeedsWithoutToken>(jsondata);
</pre>
<p>Thats all you have to do.</p>
<p>And once again Happy new year.</p>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-79558977343137445262010-12-19T12:57:00.004+05:302011-03-28T13:19:25.477+05:30Get current desktop theme<p>Recently i answered to a question at <a href="http://stackoverflow.com/questions/4479421/get-windows-theme/4481640#4481640">Stack<b>Overflow</b></a> , where user wanted to know which desktp theme is currently is set on his computer. I thought that it could be a good post so i am posting that code here too.</p>
<p>What it simply does is that it looks for the Currently set theme in the windows registry and returns it as a string.</p>
<p>The current theme is stored in the CurrentTheme string in</p>
<pre class="prettyprint">HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes</pre>
<p>Following is the code:</p>
<pre class="prettyprint">
using Microsoft.Win32;
public string GetTheme()
{
string RegistryKey = @"HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Themes";
string theme;
theme = (string) Registry.GetValue(RegistryKey, "CurrentTheme", string.Empty);
theme = theme.Split('\\').Last().Split('.').First().ToString();
return theme;
}
</pre>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com1tag:blogger.com,1999:blog-5450661390914905410.post-73417079146886863062010-12-15T14:51:00.003+05:302011-03-25T08:29:08.372+05:30Creating a Facebook like badge<p>This a small walkthrough of how you can go about creating a Bage just like Facebook Badge.</p>
<p>Infact While developing my project i myself thought of creating a facebook like badge that can later be saved on the server and used with a link to it. Following is the complete class code to generate the badge(Its also <a href="http://thesharepage.codeplex.com/SourceControl/changeset/view/5902#110991">available on codeplex</a>, and following is basically explaination of code there).</p>
<p>(Note: replace the<code class="prettyprint">"Image.FromFile(@"C:\Users\SHEKHAR\Desktop\Test HTML\tsp1.png");"</code> with a path to image that can be used as a title bar in the badge.)</p>
<h5>The Badge Class</h5>
<p>First Declare the Class and some variables to hold on required information. (made it sealed so it couldn't be inherited).</p>
<pre class="prettyprint">
public sealed class TSPBadge
{
/// <summary>
/// Image for the TSP badge's title bar (Static Field)
/// </summary>
private static Image TSPBadgeTitleBar = Image.FromFile(@"C:\Users\SHEKHAR\Desktop\Test HTML\tsp1.png");
/// <summary>
/// The Default Width for TSP Badge (Constant Field)
/// </summary>
public const int DBadgeWidth = 300;
/// <summary>
/// The Default Height for TSP Badge (Constant Field)
/// </summary>
public const int DBadgeHeight = 500;
/// <summary>
/// Set this variable to true if a TSP badge has been successfully made
/// </summary>
public bool IsMade = false;
/// <summary>
/// Initializes the static members of the TSPBadge Class (Static Constructor)
/// </summary>
}
</pre>
<h5>Class Constructors</h5>
<p>Now lets define both static and instance constructors.</p>
<pre class="prettyprint">
/// <summary>
/// Initializes the static values of TSPBadge with default values
/// </summary>
static TSPBadge()
{
BadgeWidth = DBadgeWidth;
BadgeHeight = DBadgeHeight;
}
/// <summary>
/// Initializes a new Instance of TSPBadge with default values
/// </summary>
public TSPBadge()
{
IsMade = false;
UserPic = null;
UserName = null;
EmailID = null;
UserStatus = null;
}
/// <summary>
/// Initializes a new Instance of TSPBadge with specified Width and Height
/// </summary>
/// <param name="Width">The Width for the TSP Badge</param>
/// <param name="Height">The Height for the TSP Badge</param>
public TSPBadge(int Width, int Height)
{
BadgeWidth = Width;
BadgeHeight = Height;
}
/// <summary>
/// Initializes a new Instance of TSPBadge with specified Image, Name, Status and EmailID.
/// </summary>
/// <param name="userpic">The user's picture</param>
/// <param name="username">The name of the user</param>
/// <param name="emailID">The user's EmailID</param>
/// <param name="userstatus">The user's most recent status text</param>
public TSPBadge(Image userpic, string username, string emailID, string userstatus)
{
IsMade = false;
UserPic = new Bitmap(userpic);
UserName = username.ToUpper(CultureInfo.InvariantCulture);
EmailID = emailID;
UserStatus = userstatus;
}
</pre>
<h5>Properties</h5>
<p>Following are defination of some properties that will help you to alter the settings when required.</p>
<pre class="prettyprint">
/// <summary>
/// Gets or Sets the Width to be used for drawing TSP badge. (Static Property)
/// </summary>
public static int BadgeWidth { get; set; }
/// <summary>
/// Gets or Sets the Height to be used for drawing TSP badge. (Static Property)
/// </summary>
public static int BadgeHeight
{
get
{
return _BadgeHeight;
}
set
{
GraphicsUnit gu = GraphicsUnit.Pixel;
//The TSP Badge's Minimum height is the height of TSP TitleBar's height
if (value <= (int)TSPBadgeTitleBar.GetBounds(ref gu).Height)
{
_BadgeHeight = (int)TSPBadgeTitleBar.GetBounds(ref gu).Height;
}
else
{
_BadgeHeight = value;
}
}
}
private static int _BadgeHeight;
/// <summary>
/// Gets or Sets the User Picture to be used for drawing TSP Badge
/// </summary>
public Bitmap UserPic { get; set; }
/// <summary>
/// Gets or Sets the User Name to be used for drawing TSP Badge
/// </summary>
public string UserName { get; set; }
/// <summary>
/// Gets or Sets the User EmailID to be used for drawing TSP Badge
/// </summary>
public string EmailID { get; set; }
/// <summary>
/// Gets or Sets the User's Status text to be used for TSP Badge
/// </summary>
public string UserStatus { get; set; }
</pre>
<h5>Methods for drawing</h5>
<p>Lets draw the badge!</p>
<pre class="prettyprint">
/// <summary>
/// Draws a TSP Badge on bitmap with specified Image, Name, Status and EmailID. (Static Method)
/// </summary>
/// <param name="userpic">The user's picture</param>
/// <param name="username">The name of the user</param>
/// <param name="emailID">The user's EmailID</param>
/// <param name="userstatus">The user's most recent status text</param>
/// <returns>Returns an TSP Badge as an Bitmap Image</returns>
public static Bitmap MakeBadge(Image userpic, string username, string emailID, string userstatus)
{
Bitmap bmp = new Bitmap(BadgeWidth, BadgeHeight);
Graphics gf = Graphics.FromImage(bmp);
GraphicsUnit gu = GraphicsUnit.Pixel;
string BatchString = String.Format("{0}\n\nEMAIL: {1}\n\nSTATUS: {2}", username.ToUpper(CultureInfo.InvariantCulture), emailID, userstatus);
//We are taking 60% of the bitmap space for User picture - (int)((float)BadgeHeight * (60F / 100F))
//Write status, name etc in rest of 40% bitmap space
float PicPer = 60F;
float RstPer = 100F - PicPer;
gf.Clear(Color.White);
gf.DrawImage(userpic, new Rectangle(2, 2, BadgeWidth - 4, (int)((float)BadgeHeight * (PicPer / 100F)))); //NOTE: The rectangle here takes a non-zero based width/height so 300
gf.DrawImage(TSPBadgeTitleBar, new Rectangle(0, 0, BadgeWidth, (int)TSPBadgeTitleBar.GetBounds(ref gu).Height));
//TODO: Insert code to check name dosen't go out of title bar and get trimmed
gf.DrawString(username.ToUpper(CultureInfo.InvariantCulture), new Font(new FontFamily("Arial"), 10F), Brushes.White, new PointF(5, 6));
gf.DrawRectangle(Pens.Black, 0, 0, BadgeWidth - 1, BadgeHeight - 1); //NOTE: DrawRectangle takes a 0 based width/height so 300-1
gf.DrawRectangle(Pens.Black, 1, 1, BadgeWidth - 3, ((int)((float)BadgeHeight * (PicPer / 100F))) + 1);
gf.DrawRectangle(Pens.Black, 1, ((int)((float)BadgeHeight * (PicPer / 100F))) + 3, BadgeWidth - 3, ((int)((float)BadgeHeight * (RstPer / 100F))) - 5);
gf.DrawString(BatchString, new Font(new FontFamily("Arial"), 10F), Brushes.Black, new RectangleF(5, ((int)((float)BadgeHeight * (PicPer / 100F))) + 6, BadgeWidth - 7, ((int)((float)BadgeHeight * (RstPer / 100F))) - 5), StringFormat.GenericTypographic);
return bmp;
}
</pre>
<p>Now lets add some more methods in the class to make the <code class="prettyprint">MakeBadge</code> static method accessible to instance methods and customizable too.</p>
<pre class="prettyprint">
/// <summary>
/// Draws a TSP Badge on bitmap.
/// <para>NOTE: This function requires that all the requiremens are set already other wise it returns a null bitmap</para>
/// </summary>
/// <returns>Returns an TSP Badge as an Bitmap Image</returns>
public Bitmap GetBadge()
{
IsMade = false;
Bitmap bmp = null;
if (UserPic != null && UserName != null && EmailID != null && UserStatus != null)
{
bmp = TSPBadge.MakeBadge(UserPic, UserName, EmailID, UserStatus);
IsMade = true;
}
return bmp;
}
/// <summary>
/// Draws a TSP Badge on bitmap with specified Image, Name, Status and EmailID.
/// </summary>
/// <param name="userpic">The user's picture</param>
/// <param name="username">The name of the user</param>
/// <param name="emailID">The user's EmailID</param>
/// <param name="userstatus">The user's most recent status text</param>
/// <returns>Returns an TSP Badge as an Bitmap Image</returns>
public Bitmap GetBadge(Image userpic, string username, string emailID, string userstatus)
{
IsMade = false;
UserPic = new Bitmap(userpic);
UserName = username.ToUpper(CultureInfo.InvariantCulture);
EmailID = emailID;
UserStatus = userstatus;
Bitmap bmp = TSPBadge.MakeBadge(UserPic, UserName, EmailID, UserStatus);
IsMade = true;
return bmp;
}
</pre>
<p>That's all Happy Coding :)</p>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com1tag:blogger.com,1999:blog-5450661390914905410.post-44393970342532433942010-10-12T23:03:00.004+05:302010-10-12T23:33:30.141+05:30IE9 is here, So.. what's in for you as a Developer<div><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fshekhar-pro.blogspot.com%2F2010%2F10%2Fie9-is-here-so-whats-in-for-you-as.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" style="border: medium none; height: 80px; overflow: hidden; width: 450px;"></iframe></div>After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup, today marks the day that developers finally have that browser; Internet Explorer 9 Beta. It’s an important day because this release, although just a beta, is the culmination of a lot of effort and most importantly, listening, by the Internet Explorer team. <br />
While the Internet Explorer browser has enjoyed widespread adoption by consumers, it hasn’t always been viewed fondly by the development community. The important work of building cross-browser compliant websites has often been cumbersome, due in part to differing interpretations of browser APIs in previous versions of Internet Explorer. The differences forced developers, myself included, to find workarounds for functionality that, in many cases, had a clearly defined standard behavior.<br />
<br />
<h2><u><span style="font-size: large;">HTML5, CSS3, DOM</span></u></h2>With Internet Explorer 9, there’s been a concerted effort by Microsoft to focus on standards-based functionality that will ease cross-browser development while providing the features needed to build rich and immersive websites. Take, for example, IE9’s support for many of the features of HTML5 and CSS3, the specifications which are defining the future of the web. By including support for features such as Canvas, video, @font-face, CSS3 media queries, SVG and many others, we now have a rich base to provide more compelling experiences to end users. In addition, by ensuring that these features are conformant to the defined specifications, the sites we build should work with any browser that also supports those specifications.<br />
To take it a step further, the IE team has enhanced the performance of many of the new HTML5 features by taking advantage of the GPU. This means that text, graphics and video will be substantially smoother and more responsive allowing websites to perform more like true applications. <br />
And at the DOM level, important changes have been made to be consistent with the defined specifications making it easier to whittle down browser-specific code. For example, support for the W3C DOM Events specification (addEventListener & removeEventListener) in place of the proprietary IE model (attacheEvent & detachEvent) has been one of the most welcomed changes to IE9 as has the introduction of getElementsByClassName, supported for some time in the DOM Level 2 specification and now available in IE9.<br />
<br />
<h2><u><span style="font-size: large;">JavaScript</span></u></h2>Equally important is the performance boost provided by the new Chakra JavaScript engine which basically blows away older versions of Internet Explorer and brings IE9 in line with modern browsers such as Chrome, Firefox and Opera. JavaScript development continues to become more complex and intricate so the importance of these performance enhancements can’t be understated. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores when available and the results are obvious by the greatly improved benchmark scores from the <a href="http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html">Webkit Sunspider JavaScript Benchmarks</a>.<br />
<a href="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider.png"><img alt="" class="alignleft size-medium wp-image-1310" height="211" src="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider-300x211.png" title="01_02_Performance_Sunspider" width="300" /></a><br />
<i>Chakra JavaScript Engine – WebKit SunSpider Benchmarks</i><br />
<br />
<h2><u><span style="font-size: large;">Updated Developer Tools</span></u></h2>Substantial work has been done to update the Internet Explorer Developer Tools. The built-in tools, usually found by pressing F12, provided quite a bit of capabilities but were missing key components that were essential to effective testing and debugging of client-side source code. With this update, the tools now include a much anticipated network traffic inspector, Console tab, CSS editing, and an improved JavaScript profiler.<br />
The new Console tab is a welcome addition providing the ability to inspect script easily as well as receive important page-specific error and warning messages.<br />
<a href="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab.png"><img alt="" class="alignleft size-medium wp-image-1312" height="198" src="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab-300x198.png" title="console-tab" width="300" /></a><br />
<i>IE Developer Tools – Console Tab</i><br />
Of the new features, the one that I’m most excited about is the network traffic inspector, mainly because the bulk of my application development involves Ajax-based requests. <br />
<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1.png"><img alt="" class="alignleft size-medium wp-image-1311" height="158" src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1-300x158.png" title="ie-dev-tools-1" width="300" /></a><br />
<i>IE Developer Tools – Network Performance of Specific Assets</i><br />
<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2.png"><img alt="" class="alignleft size-medium wp-image-1313" height="158" src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2-300x158.png" title="ie-dev-tools-2" width="300" /></a><br />
<i>IE Developer Tools – Network Request Information</i><br />
I can now do such things as determine load times of specific assets or inspect my request/response headers, cookies and return values without the need for breaking out of the browser to a 3rd party application such as Fiddler or Charles.<br />
<br />
<h2><u><span style="font-size: large;">Get to Using it Today</span></u></h2>A lot of effort has gone into making Internet Explorer 9 Beta a better browser. There’s certainly more work to be done but the fact that we now have a version of IE that provides standards-based functionality and allows us to use the same markup across browsers is pretty hot. <br />
To really appreciate what you can build with IE9, though, you need to just start digging into it. Microsoft has created the following sites to give developers the knowledge and inspiration they need to leverage IE9 to its fullest:<br />
<br />
<ul><li><a href="http://www.beautyoftheweb.com/" style="color: blue;">Beauty of the Web</a> – Explore all of the new features of Microsoft’s latest browser and check out the cool demos built using the advanced features of Internet Explorer 9 Beta</li>
<li><a href="http://ie.microsoft.com/testdrive/">Internet Explorer 9 Test Drive</a> – This site breaks down the new, advanced features of Internet Explorer 9 Beta and lets you get a visual of what’s possible with each bit of functionality</li>
<li><a href="http://msdn.microsoft.com/ie/ff468705.aspx">Internet Explorer Guide for Developers</a> – The developer documentation you’ll need to learn how about the specifics of Internet Explorer 9 Beta</li>
</ul><br />
<br />
It feels great to know that we’re on a path to being able to build truly feature-rich websites that will be easier to maintain and provide a more exciting experience to users. While we’ll still need to support older browsers for some time, the fact that all the major browser vendors are heading in the same direction is going to allow us to build some truly amazing things. I can’t wait!<br />
<br />
<div style="color: #6fa8dc;">Post originally taken from <a href="http://blog.reybango.com/2010/09/15/internet-explorer-9-beta-has-arrived-the-features-that-matter-to-me-as-a-developer/" style="color: #6fa8dc;">Here </a></div>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-15933034726452509842010-10-02T08:03:00.001+05:302010-10-02T08:09:19.314+05:30Silverlight or HTML5, Who wins!!!!<div><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fshekhar-pro.blogspot.com%2F2010%2F10%2Fsilverlight-or-html5-who-wins.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" style="border: medium none; height: 80px; overflow: hidden; width: 450px;"></iframe></div>First sorry for being so late with my next post, i was little busy with my course project for NIIT. Secondly this post was supposed to be something about ADO.Net, but since i got my project , which has to be a web application, i myself was fiddling with the decision whether to use HTML5 or Silverlight for much richer part of my application as now many browsers have started to support HTML5, even<a href="http://www.beautyoftheweb.com/"> IE</a>. <br />
<br />
There is already a lot of fuss in Developer community on this topic. Every now and then, someone asks me, <i>"Which technology will win: HTML5 or Silverlight?"</i>, or <i>"What is Silverlight's strategy to compete with HTML5?"</i>. <br />
I always have to take a deep breath before responding, because these questions presuppose something that doesn't make any sense to me. It's like asking a tool store owner, <i>"Which will win, hammers or screwdrivers?"</i>, or <i>"How will you prevent hammers from making screwdrivers obsolete?"</i> <br />
<h2>Black-and-white Thinking</h2>Some important folks in the industry have argued that HTML5 is a Silverlight-killer, or that Silverlight exists to prevent HTML from advancing. These are dramatic claims that only heighten conflict in an industry afflicted by fictionalized Zarathustrian "black versus white" stories. <br />
<h2>The Right Tool for the Job</h2>Microsoft ships the world's most popular HTML client. Despite the HTML5 specification being a work in progress, we implemented several HTML5 features in our most recent browser. Microsoft has co-chaired the HTML5 working group in W3C since its inception, and we remain active participants. And our browser will continue to be the dominant HTML standards implementation for the foreseeable future. <br />
Likewise, we continue to invest heavily in Silverlight development and deployment. If Silverlight and HTML are mortally opposed, as the story goes, we must be crazy to invest so heavily in both, right? Wrong.<br />
The truth is, Microsoft is a developer company, and there is no one-size-fits-all, perfect tool for every development job. Can anyone seriously criticize us for investing in C#, JavaScript, <i>and</i> Ruby and Python (among other languages)? No! Our customers should be able to use the right tool for the job at hand. <br />
As with development languages, there is no single development platform for every job. HTML5 will be fantastic for some scenarios, while Silverlight will be great for others. Besides Internet Explorer and Silverlight, we ship a bunch of other platforms, including XNA and DirectX for game developers, WPF and .NET, Win32, and others. We have the depth and breadth to be best in class, no matter what platform developers want to use. <br />
<h2>Opportunism vs. Reality</h2>So, why do certain people propagate this myth? Do they <i>really</i> want a monoculture world where there is only one platform for every job? Or are they truly arguing from an idealistic or religious viewpoint, as some of their arguments would suggest? <br />
In my opinion, it's a lot simpler than all of that: those who argue that HTML5 will supplant everything else tend to be companies who <i>have</i> nothing else. If you only sell hammers, you might as well try to convince people that there are no such things as screws. And you can drive awareness for your newly-incorporated hammer store by telling tales of intrigue and conflict between hammers and screwdrivers. But the fact that these arguments are often couched in conspiracy theories or ideology, suggests that they are primarily opportunistic marketing ploys, and not motivated by pragmatic technical reality.<br />
<br />
What do you think? Leave a comment below, or <a href="http://twitter.com/samajshekhar">hit me up on twitter</a>. <br />
<br />
<span style="color: #6fa8dc;">Originally Taken from </span><a href="http://visitmix.com/opinions/html5-vs-silverlight-which-will-win" style="color: #6fa8dc;">here</a><span style="color: #6fa8dc;">.</span>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com2tag:blogger.com,1999:blog-5450661390914905410.post-51020683304580539612010-09-13T10:41:00.002+05:302011-03-19T09:26:28.614+05:30Making Any Control Draggable in Silverlight & WPF<b>Introduction</b>
<p>Silverlight gives you easy access to make your User Controls come alive. For example you can make any control in Silverlight draggable. Here's how:</p>
<p>In your Code add a TranslateTransform inside your layout grid of your user control. The TranslateTransform will allow you to move your grid along the x and y coordinates of your application</p>
<small>Listing 1 - Adding the TranslateTransform to your control</small>
<pre class="prettyprint">
<Grid x:Name="LayoutRoot" >
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform x:Name="LocalTranslateTransform"/>
</TransformGroup>
</Grid.RenderTransform>
</pre>
<p>Now we want to pick a control inside the UserControl to grab onto. In our sample we will use a Border control. Inside the Border control, we'll add mouse events to handle the various states of dragging with the mouse.</p>
<small>Listing 2 - Hooking up the mouse events to the Border control</small>
<pre class="prettyprint">
<Border x:Name="myToolbar" MouseLeftButtonDown="OnToolbarClicked"
MouseLeftButtonUp="OnToolbarReleased" MouseMove="OnToolbarMoving" />
</pre>
<b>The Code</b>
<p>The XAML part was pretty simple. Now let's look at the code behind. All of the dragging functionality is handled by our 3 event handlers: <b><i>OnToolbarClicked</i></b>, <b><i>OnToolbarReleased</i></b>, and <b><i>OnToolbarMoving</i></b>. When we first click down on the border control, we need to record the initial offset point for our transform. We also need to set the state to mouseDownInToolbar to true to indicate we are dragging. Finally we need to set the mouse mode to capturing inside the border control.</p>
<small>Listing 3 - Handling the mousedown event inside the border</small>
<pre class="prettyprint">
private void OnToolbarClicked(object sender, MouseButtonEventArgs e)
{
mouseDownInToolbar = true;
DragOffset = e.GetPosition(LayoutRoot);
toolbarBorder.CaptureMouse();
}
</pre>
<p>While the mouse is in the mouseDownInToolbar state, we need to translate the position of the toolbar in reference to the position of the mouse. Listing 4 illustrates how we go about this. We get the position of the mouse relative to the main grid of the control. Then we change the TranslateTransform of the grid based on the new position of the mouse. We also need to offset the current mouse position by the original location of the mouse when we first clicked down in the control. Everytime we move the mouse, the new TranslateTransform will be computed and our control will move to the translated location. The mouse cursor will remain at the point when we first clicked the toolbar.</p>
<small>Listing 4 - handling the dragging of the control while the mouse is moving</small>
<pre class="prettyprint">
private void OnToolbarMoving(object sender, MouseEventArgs e)
{
if (mouseDownInToolbar)
{
// we want to move it based on the position of the mouse
moveUserControl(e);
}
}
private void moveUserControl (MouseEventArgs e)
{
Point mousePos = e.GetPosition(LayoutRoot);
Double newX = LocalTranslateTransform.X + (mousePos.X - DragOffset.X);
Double newY = LocalTranslateTransform.Y + (mousePos.Y - DragOffset.Y);
LocalTranslateTransform.X = newX;
LocalTranslateTransform.Y = newY;
}
</pre>
<p>When the user unclicks the mouse, we need to stop the drag process. The MouseUp event handler will release the mouse capture and set the mouseDownInToolbar state to false. This will prevent the toolbar to continue to move as we drag the mouse around the screen.</p>
<small>Listing 5 - Handling Mouse Up when dragging the Toolbar</small>
<pre class="prettyprint">
private void OnToolbarReleased(object sender, MouseButtonEventArgs e)
{
mouseDownInToolbar = false;
toolbarBorder.ReleaseMouseCapture();
}
</pre>
<b>Conclusion</b>
<p>Manipulating size and position of controls is fairly easy in Silverlight with the power of transforms. Dragging a control is accomplished using the TranslateTransform in conjunction with mouse events and functions. You can probably take this a step further and build your own docking framework. Anyway, drag yourself away from conventional controls in Windows and enjoy the power and flexibility of WPF in the browser with Silverlight.</p>
<span style="color: #6fa8dc;">Originally taken from </span><a href="http://www.c-sharpcorner.com/UploadFile/mgold/3255/" style="color: #6fa8dc;">Here</a>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com1tag:blogger.com,1999:blog-5450661390914905410.post-30788288250411949492010-08-28T01:19:00.005+05:302011-03-18T05:56:13.697+05:30Introduction to using WP7 Accelerometer<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: Consolas, "Courier New", Courier, Monospace;
/*white-space: pre;*/
overflow:auto;
width:550px;
border-width:2px;
border-color:#222222;
background-color: #ddddee;
border-style:solid;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:10px 10px 10px 20px;
-moz-box-shadow: 3px 3px 5px #888888; /* Firefox */
-webkit-box-shadow: 3px 3px 5px #888888; /* Safari and Chrome */
box-shadow: 3px 3px 5px #888888;
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #ff2222; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
</style>
This post is about introducing you Windows Phones Accelerometer (I have taken following contents from <a href="http://www.charlespetzold.com/">Charles Petzold's</a> book "<a href="http://www.google.com/url?sa=t&source=web&cd=1&ved=0CBUQFjAA&url=http%3A%2F%2Fdownload.microsoft.com%2Fdownload%2F0%2FD%2F9%2F0D919C81-6E31-436C-8FB0-A75BBEBB6AEA%2FProgrammingWindowsPhone7%28SpecialExcerpt2%29.pdf&rct=j&q=Programming%20Windows%20Phone%207%20-%20Special%20Excerpt%202&ei=NBV4TN7QMoXBcaT7yYAG&usg=AFQjCNF1_zxpNYowi5PjPu0QfDXstYRwiQ&sig2=rRoFzNLijDOx3b6f50OjJA&cad=rja">Programming Windows Phone 7 - Special Excerpt 2</a>". The contents are Copyright of Microsoft and is used only for informational purpose). You can get more detailed information about using Accelerometer from above mentioned book, complete book is still to be released later this year.<br />
<br />
Windows Phones contain an accelerometer — a small hardware device that essentially measures force, which elementary physics tells us is proportional to acceleration. When the phone is held still, the accelerometer responds to the force of gravity, so the accelerometer can tell your application the direction of the Earth relative to the phone. It is convenient to represent the accelerometer output as a vector in three-dimensional space. Vectors are commonly written in boldface, so the acceleration vector can be symbolized as (x, y, z). XNA defines a three-dimensional vector type; Silverlight does not.<br />
<br />
While a three-dimensional point (x, y, z) indicates a particular location in space, the vector (x, y, z) encapsulates instead a direction and a magnitude. Obviously the point and the vector are related: The direction of the vector (x, y, z) is the direction from the point (0, 0, 0) to the point(x, y, z). But the vector (x, y, z) is definitely not the line from (0, 0, 0) to (x, y, z). It’s only the direction of that line. The magnitude of the vector (x, y, z) is calculable from the three-dimensional form of the Pythagorean Theorem:<br />
<br />
<code class="prettyprint">Magnitude = Math.sqrt( Math.pow(x,2), Math.pow(y,2), Math.pow(z,2) )</code><br />
where:<br />
<code class="prettyprint">Math.sqrt() function returns the square root of a number</code><br />
<code class="prettyprint">Math.pow() function returns a number raised to a power</code>
<br />
For working with the accelerometer, you can imagine the phone as defining a threedimensional coordinate system. No matter how the phone is oriented, the positive Y axis points from the bottom of the phone (with the buttons) to the top, the positive X axis points from left to right.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7N-mtGvkCkiTZH9wZaHhdKyqd-aFdRIIJs5RWbMF5mM6EzszbwZERuyZ16LFzfSFnHxkx73w51z2eyAJgug5P8xr3cCIUJQ2h4ikkKCN-k_pRDVS-MPLdI7pFdq8QFf3DBHijRZevhmGi/s1600/axiswp7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7N-mtGvkCkiTZH9wZaHhdKyqd-aFdRIIJs5RWbMF5mM6EzszbwZERuyZ16LFzfSFnHxkx73w51z2eyAJgug5P8xr3cCIUJQ2h4ikkKCN-k_pRDVS-MPLdI7pFdq8QFf3DBHijRZevhmGi/s640/axiswp7.png" width="353" /></a></div>
<br />
<br />
When the phone is still, the accelerometer vector points towards the Earth. The magnitude is 1, meaning 1 g, which is the force of gravity on the earth's surface. When holding your phone in the upright position, the acceleration vector is (0, –1, 0), that is, straight down.<br />
<br />
So lets start, To use the accelerometer, you’ll need a reference to the <code class="prettyprint">Microsoft.Devices.Sensors</code> library, and a using directive for the <code class="prettyprint">Microsoft.Devices.Sensors</code> namespace. In <code class="prettyprint">WMAppManifest.xml</code>, you need<br />
<pre class="prettyprint"><Capability Name="ID_CAP_SENSORS"></pre>
<br />
You create an instance of the Accelerometer class, set an event handler for the<br />
ReadingChanging event, and call Start. And then it gets a little tricky. Let’s take a look at a project named <code class="prettyprint">SilverlightAccelerometer</code> project that simply displays the current reading in its content grid. A centered <code class="prettyprint">TextBlock</code> is defined in the XAML.<br />
<br />
<pre class="prettyprint"><Grid x:Name="ContentGrid" Grid.Row="1">
<TextBlock Name="txtblk"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</pre>
<br />
This is a program that will display the accelerometer vector throughout its lifetime, so it creates the Accelerometer class in its constructor and calls Start:<br />
<br />
<pre class="prettyprint">public MainPage()
{
InitializeComponent();
Accelerometer acc = new Accelerometer();
acc.ReadingChanged += OnAccelerometerReadingChanged;
try
{
acc.Start();
}
catch (Exception exc)
{
txtblk.Text = exc.Message;
}
}
</pre>
<br />
The documentation warns that calling Start might raise an exception, so the program protects itself against that eventuality. These user-interface objects are not thread safe; they are not built to be accessed simultaneously from multiple threads. For this reason, Silverlight will not allow you to access a user-interface object from a non-UI thread. <br />
<br />
This means that the <code class="prettyprint">OnAccelerometerReadingChanged</code> method cannot directly access the TextBlock element to set a new value to its Text property. Fortunately, there’s a solution involving a class named Dispatcher defined in the <code class="prettyprint">System.Windows.Threading</code> namespace. Through the <code class="prettyprint">Dispatcher</code> class, you can post jobs from<br />
a non-UI thread on a queue where they are later executed by the UI thread.<br />
<br />
The Dispatcher class defines a method named <code class="prettyprint">CheckAccess</code> that returns true if you can access a particular user interface object from the current thread. (The <code>CheckAccess</code> method is also duplicated by <code class="prettyprint">DependencyObject</code> itself.) If an object can’t be accessed from the current thread, then Dispatcher provides two versions of a method named <code class="prettyprint">Invoke</code> that you use to post the job to the UI thread. <br />
<br />
The verbose version requires a delegate and a method defined in accordance with that delegate. The delegate (and method) should have no return value, but as many arguments as you need to do the job, in this case setting a string to the Text property of a TextBlock:<br />
<pre class="prettyprint">delegate void SetTextBlockTextDelegate(TextBlock txtblk, string text);
void SetTextBlockText(TextBlock txtblk, string text)
{
txtblk.Text = text;
}
</pre>
The <code class="prettyprint">OnAccelerometerReadingChanged</code> is responsible for calling <code class="prettyprint">SetTextBlockText</code>. It first makes use of <code class="prettyprint">CheckAccess</code> to see if it can just call the <code class="prettyprint">SetTextBlockText</code> method directly. If not, then the handler calls the <code class="prettyprint">BeginInvoke</code> method. The first argument is an instantiation of the delegate with the <code class="prettyprint">SetTextBlockText</code> method; this is followed by all the arguments that <code class="prettyprint">SetTextBlockText</code> requires:<br />
<pre class="prettyprint">void OnAccelerometerReadingChanged(object sender, AccelerometerReadingEventArgs args)
{
string str = String.Format("X = {0:F2}\n" +
"Y = {1:F2}\n" +
"Z = {2:F2}\n\n" +
"Magnitude = {3:F2}\n\n" +
"{4}",
args.X, args.Y, args.Z,
Math.Sqrt(args.X * args.X + args.Y * args.Y +
args.Z * args.Z),
args.Timestamp);
if (txtblk.CheckAccess())
{
SetTextBlockText(txtblk, str);
}
else
{
txtblk.Dispatcher.BeginInvoke(new
SetTextBlockTextDelegate(SetTextBlockText),
txtblk, str);
}
}</pre>
This is not too bad, but the need for the code to jump across threads has necessitated an additional method and a delegate. Is there a way to do the whole job right in the event handler? <br />
Yes! The <code class="prettyprint">BeginInvoke</code> method has an overload that accepts an Action delegate, which defines a method that has no return value and no arguments. You can create an anonymous method right in the <code class="prettyprint">BeginInvoke</code> call. The complete code following the creation of the string object looks like this:<br />
<pre class="prettyprint">if (txtblk.CheckAccess())
{
txtblk.Text = str;
}
else
{
txtblk.Dispatcher.BeginInvoke(delegate()
{
txtblk.Text = str;
});
}</pre>
The anonymous method begins with the keyword delegate and concludes with the curly<br />
brace following the method body. The empty parentheses following the delegate keyword are not required.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuE9_eIX_cNmBWU6RwKgYq5p1HQ8b30w7v5rzXZSrmR48_09HgYpjTmsbiK3BsOijXoAioU_G5R5aaviyMge2m3B380JP33dbxbsDxQHMUVgvQy1PmcnEI2Xc-Y-nAXPJHTlpVGeJbmfE/s1600/resultwp7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMuE9_eIX_cNmBWU6RwKgYq5p1HQ8b30w7v5rzXZSrmR48_09HgYpjTmsbiK3BsOijXoAioU_G5R5aaviyMge2m3B380JP33dbxbsDxQHMUVgvQy1PmcnEI2Xc-Y-nAXPJHTlpVGeJbmfE/s640/resultwp7.png" width="355" /></a></div>
<br />
<br />
The Windows Phone 7 emulator doesn’t contain any actual accelerometer, so it always reports a value of (0, 0, –1), which indicates the phone is lying on a flat surface:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://windowsteamblog.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-53-84-metablogapi/3630.image_5F00_thumb_5F00_7991C4A4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://windowsteamblog.com/cfs-file.ashx/__key/CommunityServer-Blogs-Components-WeblogFiles/00-00-00-53-84-metablogapi/3630.image_5F00_thumb_5F00_7991C4A4.png" /></a></div>
<br />
<br /></div>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com4tag:blogger.com,1999:blog-5450661390914905410.post-16611825976674017682010-08-10T10:54:00.013+05:302011-03-18T06:24:49.979+05:30Invoking C# Compiler from your Code<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fshekhar-pro.blogspot.com%2F2010%2F08%2Finvoking-c-compiler-from-your-code.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" style="border: medium none; height: 80px; overflow: hidden; width: 450px;"></iframe><br />
Imagine you have just generated some code using a code generation technique, wouldn’t it be really cool to then programmatically call the C# language compiler and generate assemblies from the generated code?<br />
Let’s imagine we used an Xslt transformation to generate some code:
<pre class="prettyprint">
XslCompiledTransform transform = new XslCompiledTransform();
transform.Load("Program.xslt");
transform.Transform("Program.xml", "Program.cs");
</pre>
Using the <a href="http://msdn.microsoft.com/en-us/library/microsoft.csharp.csharpcodeprovider.aspx" target="_blank"><code class="prettyprint">CSharpCodeProvider</code></a> class we can now programmatically call the C# compiler to generate the executable assembly. We’ll begin by advising the compiler of some options we’d like it to use when compiling our code using the <a href="http://msdn.microsoft.com/en-us/library/system.codedom.compiler.compilerparameters.aspx" target="_blank"><code class="prettyprint">CompilerParameters</code></a> class.
<pre class="prettyprint">
CompilerParameters parameters = new CompilerParameters();
</pre>
We’ll specify that the assembly to be created should be an executable and we’ll also specify such things as whether debug information should be included, the warning level, whether warnings should be treated as errors etc.
<pre class="prettyprint">
parameters.GenerateExecutable = true;
parameters.IncludeDebugInformation = true;
parameters.GenerateInMemory = false;
parameters.TreatWarningsAsErrors = true;
parameters.WarningLevel = 3;
parameters.CompilerOptions = "/optimize";
parameters.OutputAssembly = "Program.exe";
</pre>
Using the compiler parameters we can now compile the C# code using the <a href="http://msdn.microsoft.com/en-us/library/microsoft.csharp.csharpcodeprovider.aspx" target="_blank"><code class="prettyprint">CSharpCodeProvider</code></a> class and get the results of the compilation as an instance of the <a href="http://msdn.microsoft.com/en-us/library/system.codedom.compiler.compilerresults.aspx" target="_blank"><code class="prettyprint">CompilerResults</code></a> class.
<pre class="prettyprint">
CSharpCodeProvider codeProvider = new CSharpCodeProvider();
CompilerResults results = codeProvider.CompileAssemblyFromFile(parameters, new string[] { "Program.cs" });
</pre>
While the code you generated is unlikely to have any compiler warnings or errors, other developers may be less fortunate and therefore they can access the <a href="http://msdn.microsoft.com/en-us/library/system.codedom.compiler.compilerresults.errors.aspx" target="_blank"><code class="prettyprint">Errors</code></a> property of the <a href="http://msdn.microsoft.com/en-us/library/system.codedom.compiler.compilerresults.aspx" target="_blank"><code class="prettyprint">CompilerResults</code></a> class to determine what went wrong. Actually the <a href="http://msdn.microsoft.com/en-us/library/system.codedom.compiler.compilerresults.errors.aspx" target="_blank"><code class="prettyprint">Errors</code></a> property contains both compiler errors and warnings although the following simple LINQ queries allow you to examine the warnings and errors in isolation.
<pre class="prettyprint">
var warnings = from e in results.Errors.Cast<CompilerError>()
where e.IsWarning
select e;
var errors = from e in results.Errors.Cast<CompilerError>()
where !e.IsWarning
select e;
</pre>
While code generation is very cool, we generate code to ultimately create assemblies that we can either execute or reference from other code. If you’re programmatically generating code why not next time also programmatically generate the assemblies too!<br />
<br />
<span style="color: #6fa8dc;">Post originally taken from <a href="http://blogs.msdn.com/b/dohollan/archive/2010/08/09/programmatically-invoke-the-c-compiler.aspx" style="color: #6fa8dc;">Here</a></span>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-59810056124743733402010-08-04T12:39:00.003+05:302010-08-04T12:44:18.165+05:30Enable Built-in Administrator Account in Windows 7<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fshekhar-pro.blogspot.com%2F2010%2F08%2Fenable-built-in-administrator-account.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" style="border: medium none; height: 80px; overflow: hidden; width: 450px;"></iframe><br />
Hi everybody, recently I was exploring features of windows 7 when I found that administrator account can be enabled and listed among other accounts in the logon screen. We all know in XP we could do so by pressing “Ctrl+Alt+Delete” at the logon screen and entering Administrator as the username and entering required password you entered while installing XP (Most people don’t enter anything, and I used to use this a lot to logon as administrator at Cyber cafes). But in Windows 7 by default you don’t have administrator account listed among other accounts. When you need to elevate the permissions for an application, you usually right click an application and select “Run as Administrator”. Windows do this to prevent any application from running with admin permissions until you want or need so. The account in which you are logged in is a Member of Administrator Group, it is not the Built-in account for administering the computer/domain<br />
<span style="color: #e06666;">(Warning: It is not recommended to enable Administrator account and logging in as Administrator)</span><br />
<br />
So to enable admin account you need to follow following steps (you need administrative rights to perform these steps):<br />
<br />
1: Switch to Desktop (if not already) and Right click on “My computer” and click on “Manage”.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPd9cIdFKdvvEtK_zvl8KQOSN1Z4W-jPsxkoQ3evvQjgnVS2Fnu3-qABFGMsYaKPNMLr2QgBwUGfRaIw5rW3erUTvHnJsroqZlT-f-4DCLGQ2RnfS4Yq-W4i-l6TKa4JW6YIyY1NH1bnV2/s1600/rightclick.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPd9cIdFKdvvEtK_zvl8KQOSN1Z4W-jPsxkoQ3evvQjgnVS2Fnu3-qABFGMsYaKPNMLr2QgBwUGfRaIw5rW3erUTvHnJsroqZlT-f-4DCLGQ2RnfS4Yq-W4i-l6TKa4JW6YIyY1NH1bnV2/s320/rightclick.png" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
2: In Computer Management window that will open, select “Local Users and Groups” under “Computer management \ System Tools”.<br />
<br />
3: In the right pane two folders will be visible, Double Click on “Users”<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6MkG-pohLXMkuQYkhiIA96sP2n6pTv2GhpIp7f5LuUJc80CuJNevsUnuxnXsc1rnW4WqHzsqpJaZkJmOBbhKiaWhvUZWo6hyphenhyphenYuNoIVDSQLD5dB4yetUvlP8yCiLv7f5hh63BmBRv5AfM/s1600/userpage.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6MkG-pohLXMkuQYkhiIA96sP2n6pTv2GhpIp7f5LuUJc80CuJNevsUnuxnXsc1rnW4WqHzsqpJaZkJmOBbhKiaWhvUZWo6hyphenhyphenYuNoIVDSQLD5dB4yetUvlP8yCiLv7f5hh63BmBRv5AfM/s400/userpage.PNG" width="400" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
4: Then double click on “Administrator”.<br />
<br />
5: In the “Administrator Properties” dialogue box there is a check box labeled “Account is disabled”, uncheck that check box and click on apply.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ3Azby65ZG2RMBMet6wNCUDbVg-B0qUf_6rhuW8MDqQCEgEP7ui5syWxLti4qusIXck44nUZ4NT47_CZhXEvccdx2h8HJneb1k8-wrcD6Efq7WYZdMItHlA7vUSH-Z88nmcVWVtzH3xMB/s1600/adminproperties1212.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="286" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ3Azby65ZG2RMBMet6wNCUDbVg-B0qUf_6rhuW8MDqQCEgEP7ui5syWxLti4qusIXck44nUZ4NT47_CZhXEvccdx2h8HJneb1k8-wrcD6Efq7WYZdMItHlA7vUSH-Z88nmcVWVtzH3xMB/s400/adminproperties1212.PNG" width="400" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Close that window and any other open window, now to check that it worked, Logoff or Lock your computer (By pressing Windows Key + L) and click on “Switch user”. You will see Administrator account, you can log into it and enjoy full access to computer with complete admin rights. You can also set a password for this built in Administrator Account (I would strongly recommend doing so).<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6MkG-pohLXMkuQYkhiIA96sP2n6pTv2GhpIp7f5LuUJc80CuJNevsUnuxnXsc1rnW4WqHzsqpJaZkJmOBbhKiaWhvUZWo6hyphenhyphenYuNoIVDSQLD5dB4yetUvlP8yCiLv7f5hh63BmBRv5AfM/s1600/userpage.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6MkG-pohLXMkuQYkhiIA96sP2n6pTv2GhpIp7f5LuUJc80CuJNevsUnuxnXsc1rnW4WqHzsqpJaZkJmOBbhKiaWhvUZWo6hyphenhyphenYuNoIVDSQLD5dB4yetUvlP8yCiLv7f5hh63BmBRv5AfM/s1600/userpage.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha6MkG-pohLXMkuQYkhiIA96sP2n6pTv2GhpIp7f5LuUJc80CuJNevsUnuxnXsc1rnW4WqHzsqpJaZkJmOBbhKiaWhvUZWo6hyphenhyphenYuNoIVDSQLD5dB4yetUvlP8yCiLv7f5hh63BmBRv5AfM/s1600/userpage.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a></div>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com1tag:blogger.com,1999:blog-5450661390914905410.post-64958705428539301372010-07-31T04:52:00.001+05:302010-07-31T04:55:35.486+05:30Windows 7 Service Pack 1 (Beta)<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fshekhar-pro.blogspot.com%2F2010%2F07%2Fwindows-7-service-pack-1-beta.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe><br />
<div>Microsoft continuously collects feedback on Windows 7 from customers and partners through several channels. This feedback results in enhancements that help improve compatibility, reliability, performance, and user experience. Service Pack integrates all these updates, along with additional enhancements, into a single package and help ensure that your systems are up-to-date.</div><div></div><div>The beta of SP1 for Windows 7 contains the pre-released 17 security updates and 456 hotfixes. The impact of SP1 on Windows 7 is considered to be minimal since it only includes pre-released hotfixes and security updates. Even though the current SP1 release is a beta, Microsoft has made it clear to not anticipate the SP1 for Windows 7 to be substantial. While SP1 is not intended to be a vehicle for releasing new features, some existing features do gain slightly enhanced functionality in SP1.</div><div></div><div>The SP1 beta has been released in English, French, German, Japanese, and Spanish. This beta will expire on June 30, 2011. You will have to upgrade to a newer build or uninstall and return to the RTM build by that time. Service Pack 1 will be released within the first half of calendar year 2011. You would not be able to upgrade from the beta builds to the final build of SP1 and will have to uninstall the Service Pack or do a clean install of Windows 7.</div><div></div><div><b>Download</b> : <a href="https://profile.microsoft.com/RegSysProfileCenter/wizard.aspx?wizid=4170964B-FE75-4B27-B2E3-B351FCACEE30&lcid=1033&ci=393&WT.sp=_technet_,dcsjwb9vb00000c932fd0rjc7_5p3t" rel="nofollow">https://profile.microsoft.com/RegSysProfileCenter/wizard.aspx?wizid=4170964B-FE75-4B27-B2E3-B351FCACEE30&lcid=1033&ci=393&WT.sp=_technet_,dcsjwb9vb00000c932fd0rjc7_5p3t</a></div><div></div><div><b>Setup Prerequisites:</b></div><div></div><ul><li> <br />
<div>Your current operating system must be the Release to Manufacturing (RTM) version of Windows 7 (build 7600).</div></li>
<li> <br />
<div>Users updating through Windows Update/WSUS must install the Servicing Stack Update (SSU). This update is necessary to successfully install or uninstall the service pack.</div></li>
</ul><div><b>Delivery Methods:</b></div><div></div><ul><li><b>Standalone Package</b><br />
Meant for commuters without internet access or system administrators.<br />
About 297 MB (x86) or 535 MB (x64) of download size.</li>
<li><b>Windows Update</b><br />
Meant for most home or many business users.<br />
About 23 MB (x86) or 45 MB (x64) of download size.</li>
<li><b>Integrated DVD</b>Meant for new PCs or Vista upgrades</li>
</ul><b>Changes in Windows 7 SP1</b><br />
<ul><li>Additional support has been added to allow Windows 7 clients to effectively communicate with third-party identity federation services.</li>
<li>Improved HDMI audio device performance.</li>
<li>Corrected behavior when printing mixed-orientation XPS documents using the XPS Viewer.</li>
<li>Change to behavior of “Restore previous folders at logon” functionality. All folders are restored to their previous positions rather than the cascaded position based on the location of the most recently active folder.</li>
<li>Enhanced support for additional identities in RRAS and IPsec.</li>
<li>Support for Advanced Vector Extensions (AVX).</li>
</ul>for more information & processes: <a href="http://www.thewindowsclub.com/whitepaper-windows-7-service-pack-1" rel="nofollow">http://www.thewindowsclub.com/whitepaper-windows-7-service-pack-1</a>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-13578910477144396452010-07-23T00:19:00.004+05:302010-07-25T05:06:41.424+05:30Windows Sidebar Gadget's Manifest's Schema<div class="MsoNormal"><div><iframe src="http://www.facebook.com/plugins/like.php?href=shekhar-pro.blogspot.com/2010/07/windows-sidebar-gadgets-manifests.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="No" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe><br />
</div><span lang="EN">While developing my app (see previous post) i came across a need to validate my generated xml with a schema. I searched around the internet but couldn’t find any schema for the Windows Sidebar Gadget.xml. Many people were asking for one various forums but they got no reply. I needed it too so i thought why not create one for myself, since i didn't knew much about creating xml schemas so referenced some websites and wrote the following schema in Visual Studio. Using Visual Studio made it all easier for me to write a schema cause it helped me by automatically completing and closing tags and it also suggested various attributes i can set, through its "intellisense". Visual Studio obviously boosts productivity and makes learning new things easy.<o:p></o:p></span></div><div class="MsoNormal"><span lang="EN">Following is the schema code for the Windows sidebar gadget’s manifest.</span><br />
<br />
<br />
</div><div class="shape" style="padding: 2.88pt;" v:shape="_x0000_s1066"><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"><?</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xml</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">version</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"><span dir="ltr"></span>1.0</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">encoding</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">utf-8</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">?></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"><</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:schema</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">id</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">SidebarGadget</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span></div><div class="MsoNormal"><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> xmlns:xs</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">http://www.w3.org/2001/XMLSchema</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">gadget</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tgadget</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tgadget</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">maxOccurs</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">1</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">namespace</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">version</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">author</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tauthor</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">copyright</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">description</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">icons</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Ticons</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">maxOccurs</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">unbounded</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">hosts</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Thosts</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tauthor</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">info</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Turl</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">logo</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tlogo</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Turl</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">url</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tlogo</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">src</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Ticons</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">icon</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Ticon</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Ticon</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">hight</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:nonNegativeInteger</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">width</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:nonNegativeInteger</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">src</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Thosts</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">host</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> =</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Thost</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Thost</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">base</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tbase</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">permission</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">platform</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tplatform</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">autoscaleDPI</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:boolean</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">nillable</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">true</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:element</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">defaultImage</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">TdefaultImage</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:sequence</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">default</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">sidebar</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tbase</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">apiVersion</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">src</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:string</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">Tplatform</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">minPlatformVersion</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:double</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">TdefaultImage</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> <</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:attribute</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">name</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">src</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </span><span lang="en-US" style="color: red; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">type</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">=</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:short</span><span lang="en-US" style="color: black; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">"</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">/></span></div><div class="MsoNormal"><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"> </</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:complexType</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span><br />
<span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;"></</span><span lang="en-US" style="color: #a31515; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">xs:schema</span><span lang="en-US" style="color: blue; font-family: Consolas; font-size: 9.5pt; line-height: 119%;">></span></div></div><span style="color: blue;"><span style="font-family: Consolas;"> </span></span><br />
<div class="shape" style="padding: 2.88pt;" v:shape="_x0000_s1066">I hope this could be useful to someone who need it and don't have time to make one.</div><div class="shape" style="padding: 2.88pt;" v:shape="_x0000_s1066">Comments or suggestion are welcome...</div><div class="shape" style="padding: 2.88pt;" v:shape="_x0000_s1066"><br />
</div><div class="shape" style="padding: 2.88pt;" v:shape="_x0000_s1066"><br />
</div><div class="shape" style="padding: 2.88pt;" v:shape="_x0000_s1066"><br />
</div>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com1tag:blogger.com,1999:blog-5450661390914905410.post-26577685201560195852010-07-21T15:05:00.007+05:302010-07-23T00:30:47.775+05:30Cool Borderless Rounded WPF FormHi, recently i was making a small app that will allow me to create a Sidebar Gadget manifest (gadget.xml) by just entering various elements and properties on a form. It will generate the manifest file based on your input. Now first thing i had to decide was to take on win-form as my ui or the go with WPF. Well since WPF is new tech i ended up with WPF form.<br />
<br />
Now i wanted my WPF to be good looking with a smooth round edge. First i tried different ways discussed on internet, but none sufficed my requirements. So i went down my own way and created a good looking form i wanted. Below is a snapshot.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VfFojkjWV2oc6ykox6JwYt6VE7THnU7B-YqlqnGNgUYbNmc3c0W1PzKTW8T4TuIPxQASIC_Ew9kwyNkz0cEPilf7pmVSx4hsmpOT1aWuRmfyUGOSf7MjtLV8TsVuTwzuiKlxg2pEaN8X/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VfFojkjWV2oc6ykox6JwYt6VE7THnU7B-YqlqnGNgUYbNmc3c0W1PzKTW8T4TuIPxQASIC_Ew9kwyNkz0cEPilf7pmVSx4hsmpOT1aWuRmfyUGOSf7MjtLV8TsVuTwzuiKlxg2pEaN8X/s320/Capture.PNG" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
The method is simple, since i didn't wanted the default windows border so i set my WindowStyle="None" and to hide the corners protruding behind the border i set the AllowsTransparency="True" and Background="{x:Null}.<br />
Now i warped my grid in a Border control and set CornerRadius to 12<br />
for all corners. Now for a Title Bar i added a Canvas control in the grid and inserted a Label and a button for Closing the form. (Actually the Button itself is a collection of two rectangles transformed to 45 Degree, simply X didn't looked good). Then in the End i adjusted the Border's Background to a Horizontal gradient with 3 stops to mix it with the Title bar. Following is the code.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hifr9BNEF1c-g2by6r4CZ8kIosiCBb0GxS9VYFeyU5qGAT1v5WNnUU20Tc1P9tWDC-aqhBegnjRkebi8Vf-9wh7EKHr7zXBRVkJUoLxQhJccLF7weZqdPZ3ccPYv_2nfcOfMauepLjwj/s1600/Capture.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hifr9BNEF1c-g2by6r4CZ8kIosiCBb0GxS9VYFeyU5qGAT1v5WNnUU20Tc1P9tWDC-aqhBegnjRkebi8Vf-9wh7EKHr7zXBRVkJUoLxQhJccLF7weZqdPZ3ccPYv_2nfcOfMauepLjwj/s400/Capture.PNG" width="400" /></a></div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5hifr9BNEF1c-g2by6r4CZ8kIosiCBb0GxS9VYFeyU5qGAT1v5WNnUU20Tc1P9tWDC-aqhBegnjRkebi8Vf-9wh7EKHr7zXBRVkJUoLxQhJccLF7weZqdPZ3ccPYv_2nfcOfMauepLjwj/s1600/Capture.PNG"><i style="color: blue;"><span style="font-family: Arial,Helvetica,sans-serif;">(Click on Image to Enlarge)</span></i></a><br />
<br />
<br />
<br />
I know there are many ways to do this , this was mine.<br />
<br />
Do write comments please...SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com2tag:blogger.com,1999:blog-5450661390914905410.post-16721076888367405392010-07-21T03:44:00.003+05:302010-07-21T03:45:15.069+05:30Top 10 WPF Performance Tips<h1> </h1>Windows Presentation Foundation provides a very confortable way to develop rich user experiences. A drop shadow for example can added by inserting two simple lines of XML. But this simplicity can also mislead us to overuse them. This leads to performance issues. The following tipps may help you to avoid or fix them.<br />
<br />
<ol><li><b>Dispatch expensive calls</b> either within the UI thread with a lower <code>DispatcherPriority</code> by calling <code>Dispatcher.BeginInvoke()</code> or to a background thread by using a <code>BackgroundWorker</code> to keep the UI responsive.</li>
<li><b>Fix binding errors</b> because they consume a lot of time, trying to resolve the path error, including searching for attached properties. You can find them by looking for <code>System.Windows.Data Error</code> in the Visual Studio output log.</li>
<li><b>Reduce the number of visuals</b> by removing unneeded elements, combining layout panels and simplifying templates. This keeps the memory footprint small and improves the rendering performance.</li>
<li><b>Prevent Software Rendering</b>. The use of transparent windows by setting <code>AllowsTransparency</code> to <code>true</code> or using old <code>BitmapEffects</code> can cause WPF to render the UI in software on Windows XP, which is much slower.</li>
<li><b>Load resources when needed</b>. Even thow it's the most comfortable way to merge all resources on application level it can also cost performance by loading all resources at startup. A better approach is to load only often used resources and load the other on view level.</li>
<li><b>Virtualize lists and views</b> by using a <code>VirtualizingStackPanel</code> as <code>ItemsPanel</code> for lists. This only creates the visible elements at load time. All other elements are lazy created when they get visible. Be aware that grouping or <code>CanContextScrol="True"</code> prevents virtualization!</li>
<li><b>Enable Container Recycling</b>. Virtualization brings a lot of performance improvements, but the containers will be disposed and re created, this is the default. But you can gain more performance by recycle containers by setting <code>VirtualizingStackPanel.VirtualizationMode="Recycling"</code></li>
<li><b>Freeze Freezables</b> by calling <code>Freeze()</code> in code or <code>PresentationOptions:Freeze="true"</code> in XAML. This reduces memory consumption and improves performance, because the system don't need to monitor for changes.</li>
<li><b>Disable Assembly localization</b> if you don't need it. By using the <code>[NeutralResourcesLanguageAttribute].</code> This prevents an expensive lookup for satelite assemblies </li>
<li><b>Lower the framerate of animations</b> by setting <code>Storyboard.DesiredFrameRate</code> to lower the CPU load. The default is 60 frames/second</li>
<li><b>Use StreamGeometries instead of PathGeometries</b> if possible to draw complex 2D geometries, because they are much more efficient and consume less memory.</li>
</ol><div style="color: #cccccc;">-</div><div style="color: #cccccc;">-</div><div style="color: #cccccc;">-</div><div style="color: #cccccc;">-</div><span style="color: #cccccc;">Originally Taken From wpftutorial.net</span>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com0tag:blogger.com,1999:blog-5450661390914905410.post-35681590736896292812010-07-15T08:38:00.004+05:302011-03-30T09:15:45.256+05:30My Blog's First PostThe idea of having a blog is sure that you have something and you wanna share it with the whole world. The blogs or weblogs were meant to create a log or a journal of events, articles, etc in a chronological model. The idea of having my own blog was not instant, instead i had long wondered to have it but i couldn't find a compelling element that could put me in really writing one, not until i attended the <a href="http://www.communitytechdays.com/"> Microsoft's Community Tech Days</a> in<a href="http://www.communitytechdays.com/agenda.aspx#delhi"> Delhi </a>on 11 July . There i got to learn so many things that i couldn't contain all of it in me, so it had to go out somewhere and nothing can be better than a blog post. Here i got to learn so pesky points of software development that i couldnt do the sin of keeping the knowledge to myself. i had to spread it.
<br />
The Microsoft's Community tech Days is still going on, you can register for its free <a href="http://www.communitytechdays.com/Registration1.aspx?Status=NotFound&login=online">online</a> live webcast or<a href="http://www.communitytechdays.com/Registration1.aspx?Status=NotFound&login=offline"> in-person</a> event.<a href="http://www.communitytechdays.com/"><br />
</a>SAMAJ SHEKHARhttp://www.blogger.com/profile/05778136844317987848noreply@blogger.com1