Define a namespace and a class for the control<\/h2>\n

WinJS provide some APIs to create namespaces and classes in javascript. <\/strong>
\nI recommend to use them because it will provide a more structured code and maintainability will be increased.<\/p>\n

The naming convention I use is the same than for the standard WinJS controls : PascalCase.<\/p>\n

You can also declare some properties\/fields in your class<\/strong>. Don’t forget to comment them \ud83d\ude42 ! In the example below, I expose a element property which will return the element anchor of the control. I also create a private method<\/strong> named _createVisualTree that we will see in depth later in this post. <\/p>\n

Here the namespace is “MyNamespace” and the control class name is “MyControl”.
\n[javascript]
\nWinJS.Namespace.define("MyNamespace", {
\n MyControl: WinJS.Class.define(function (element, options) {<\/p>\n

\/\/This is the constructor<\/p>\n

}, {<\/p>\n

\/\/\/ <field type="HTMLElement" domElement="true" hidden="true"
\n \/\/\/ locid="MyNamespace.MyControl.element">
\n \/\/\/ Gets the DOM element that hosts the MediaViewer.
\n \/\/\/ <\/field>
\n element: {
\n get: function () { return this._element; }
\n },
\n _createVisualTree : function (){ \/* …*\/}<\/p>\n

} \/\/ END properties<\/p>\n

) \/\/END control class definition<\/p>\n

}); \/\/END namespace definition
\n[\/javascript]<\/p>\n

Initialize the control in the class constructor<\/h2>\n

When the WinJS.UI.processAll or the WinJS.UI.process method is called in your code, the DOM is parsed by the WinJS engine.<\/strong><\/p>\n

If a control is found, WinJS will instanciate it and call the constructor providing the element which is the anchor of the control and the options provided. <\/strong><\/p>\n

In the constructor, you have to validate the provided options and to be sure that the element is … existing<\/strong>.
\nIt’s also in it that you have to create the visual tree of the control. As you can guess, it depends of the control you create.<\/p>\n

Here I simply store the anchor element in a ‘private’ field named _element and I call the _createVisualTree method.
\n[javascript]
\nfunction (element, options) {<\/p>\n

\/\/This is the anchor-element of the control
\n if (!element) {
\n throw "element must be provided";
\n }
\n options = options || {};<\/p>\n

\/\/Store the element
\n this._element = element;<\/p>\n

_createVisualTree();<\/p>\n

}
\n[\/javascript]<\/p>\n

Create the visual tree of the control<\/h2>\n

I create the visual tree in the previously mentionned method _createVisualTree. Take note that I use a specific name convention to inform potential code reader that the method should not be called from “outside”.<\/p>\n

You can create as much element as needed by the control.<\/strong> The Listview for example use the item template you provide to create one DOM element by item in the provided data source.<\/p>\n

In this snippet, I simply create a black div inside the element :
\n[javascript]
\n_createVisualTree: function () {
\n var child = document.createElement("div");
\n child.style.width = "100px";
\n child.style.height = "100px";
\n child.style.backgroundColor = "black";<\/p>\n

this._element.appendChild(child);
\n}
\n[\/javascript]<\/p>\n

In this case, I take for granted that the anchor element is empty but it can be different. For example the semantic zoom, let you provide two child elements<\/strong> which will be the two “zoom view”. To retrieve them, classic CSS selector are used.<\/strong><\/p>\n

Use the control !<\/h2>\n

Now that you’ve created all the necessary code, how can you use the control ?
\nSimply as one another WinJS control : by declaring it in your html page<\/strong> !<\/p>\n

You use the data-win-control<\/em> attribute to set the whole control name (namespace + class name) and you use the data-win-options<\/em> attribute to sets the options provided to the constructor<\/strong>. When the processAll method is called, the control will be found and the mappping between your control and the html done automatically by WinJS.<\/p>\n

Also, don’t forget to add a reference to you js file !<\/p>\n

[html] <div data-win-control="MyNamespace.MyControl"
\n data-win-options="{ kikou : ‘lol’ }"
\n \/>[\/html]<\/p>\n

Use the control in the javascript code<\/h2>\n

As an usual control, you can also retrieve the control created for an element using the wintControl property.
\n[javascript] var myControl= document.getElementById("myControlId").winControl;[\/javascript]<\/p>\n

More to come<\/h2>\n

This post is pretty generic and I hope it is really understandable. <\/p>\n

Sometimes concrete example are better so I will soon take some time to write a full control and share it with you.<\/p>\n

What do you think of this custom-control creation code compared to what you know with XAML ?<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

WinJS comes with several controls out of the box : Listview, FlipView, SemanticZoom, DatePicker, Flyout, etc… Although they are really powerful and useful, they do not cover all needs and it’s time for us (the…<\/p>\n","protected":false},"author":3,"featured_media":1141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28],"tags":[],"_links":{"self":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1117"}],"collection":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/comments?post=1117"}],"version-history":[{"count":28,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1117\/revisions"}],"predecessor-version":[{"id":1146,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1117\/revisions\/1146"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/media\/1141"}],"wp:attachment":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/media?parent=1117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/categories?post=1117"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/tags?post=1117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}