Microsoft Releases WinJS 4.0

Microsoft has announced the release of the WinJS 4.0 JavaScript Framework into what is becoming a overcrowded field of UI frameworks.  But in the spirit of the new open Microsoft, the open source WinJS 4.0 framework also includes wrappers for use with AngularJS, KnockoutJS, and ReactJS.  Of course this version also carries support for Windows 10 including Microsoft Edge.  Along with numerous bug fixes, this release includes several exciting new controls including AutoSuggestBox Control, ContentDialog Control, Pivot custom header areas, SplitView Control, ToolBar Control, and XYFocus Utility.

SplitView and SplitViewPaneToggle controls

The SplitView control allows developers to split the app view into two parts: a pane that can appear from an edge and the rest of the content.

<

div id="app">

<

div class="splitView">
<!-- Pane area -->

<

div>

<

div class="header">
<button class="win-splitview-button" type="button"></button></pre>
<div class="title">SplitView Pane area</div>
<pre>
</div>

<

div class="nav-commands"></pre>
<div></div>
<div></div>
<div></div>
<pre>
</div>
</div>

<!-- Content area --></pre>
<div class="contenttext">
<h2>SplitView Content area</h2>
</div>
<pre>
</div>
</div>

<

div id="app">

<

div class="splitView">
<!-- Pane area -->

<

div>

<

div class="header">
<button class="win-splitview-button" type="button"></button></pre>
<div class="title">SplitView Pane area</div>
<pre>
</div>

<

div class="nav-commands"></pre>
<div></div>
<div></div>
<div></div>
<pre>
</div>
</div>

<!-- Content area --></pre>
<div class="contenttext">
<h2>SplitView Content area</h2>
</div>
<pre>
</div>
</div>

ContentDialog

The ContentDialog control allows an app or site to show critical information that requires attention and/or explicit action on the user’s part and temporarily block interactions with other elements in the app.

<

div class="box">

<button class="showButton">Show</button></pre>
<div>Use the content area to present additional information helpful to understanding or using the dialog. You can use this area to provide more detail or define terminology. Don't repeat the main instruction with slightly different wording.</div>
<pre>
</div>

WinJS.UI.processAll().done(function () {
 var showButton = document.querySelector(".showButton");
 showButton.addEventListener("click", function () {
 var contentDialog = document.querySelector(".win-contentdialog").winControl;
 contentDialog.show();
 });
});

Toolbar

ToolBar is a simple control that addresses command scalability. This control has an action area where commands are immediately available and an overflow area where commands are hidden but can be displayed upon request by the end user. The control supports adaptive behavior by allowing commands to dynamically move from the primary to the secondary area when space is limited.

</pre>
<div class="basicToolbar"><!-- Primary commands --> <button></button> <button></button> <button></button> <button></button> <button></button> <!-- Secondary command --> <button></button> <button></button></div>
<pre>

WinJS.Namespace.define("Sample", {
outputCommand: WinJS.UI.eventHandler(function (ev) {
var status = document.querySelector(".status");
var command = ev.currentTarget;
if (command.winControl) {
var label = command.winControl.label || command.winControl.icon || "button";
var section = command.winControl.section || "";
var msg = section + " command " + label + " was pressed";
status.textContent = msg;
}
})
});

WinJS.UI.processAll();

For more information visit the WinJS 4.0 site or download the code from Github.