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

SplitView

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.

[code language=”html”]

<

div id=”app”>

<

div class=”splitView”>

<

div>

<

div class=”header”>

SplitView Pane area

</div>

<

div class=”nav-commands”>

</div>
</div>

<!– Content area –>

SplitView Content area

</div>
</div>

[/code]

[code language=”javascript”]

<

div id=”app”>

<

div class=”splitView”>

<

div>

<

div class=”header”>

SplitView Pane area

</div>

<

div class=”nav-commands”>

</div>
</div>

<!– Content area –>

SplitView Content area

</div>
</div>

[/code]

ContentDialog
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.

[code language=”html”]

<

div class=”box”>

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>
[/code]

[code language=”javascript”]
WinJS.UI.processAll().done(function () {
var showButton = document.querySelector(".showButton");
showButton.addEventListener("click", function () {
var contentDialog = document.querySelector(".win-contentdialog").winControl;
contentDialog.show();
});
});
[/code]

Toolbar
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.

[code language=”html”]








[/code]

[code language=”javascript”]

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();

[/code]

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