WinJs Catch event in settings flyout

StackOverflow https://stackoverflow.com/questions/18856447

Question

I've got a feedback settings flyout (feedback.html):

<!DOCTYPE html>
<html>
<head>
    <title>Feedback settings flyout</title>
</head>
<body>
    <div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
                data-win-options="{settingsCommandId:'feedback'}">
            <div class="win-header" style="background-color: rgb(246, 84, 84)">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Feedback</div>
            </div>
            <div class="win-content">
                <section>
                    <label for="titleInput">Title: </label>
                    <input id="titleInput" style="display:block"/>
                </section>
                <section>
                    <label for="feedbackBody">Content: </label>
                    <textarea style="width:250px; height:400px;" id="feedbackBody">
                    </textarea>
                </section>
                <button id="submit">Submit feedback</button>
            </div>

    </div>
</body>
</html>

My question is: how can I run codebehind on this flyout? The feedback.js is never loaded, and I want simply when the user clicks the button to send me the text he just entered. How can I do that?

Was it helpful?

Solution

Take a look at the App settings sample (Win8 | Win8.1), in scenario 2 you'll see how to structure the code behind.

Flyouts are derivatives of WinJS page controls, so you structure the code behind with WinJS.UI.Pages.define and have methods like ready and unload defined there.

To be more concrete, scenario 2 of the sample enables the flyout as follows (js/2-AddFlyoutToCharm.js):

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = { "help": { title: "Help", href: "/html/2-SettingsFlyout-Help.html" } };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

The flyout is defined in html/2-SettingsFlyout-Help.html, which defines a WinJS.UI.SettingsFlyout, as you do, but has this in the head element::

<script src="/js/2-SettingsFlyout-Help.js"></script>

That js file, in the js folder of the project, has the page control structure that you need, which contains the code-behind (only showing part of it here):

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/2-SettingsFlyout-Help.html", {

        ready: function (element, options) {
            // Register the handlers for dismissal
            document.getElementById("helpSettingsFlyout").addEventListener("keydown", handleKeys);
        },

Within that code, you can getElementById/querySelector and add events as you need. In the same it's adding a keyboard handler for the back button (and also removes the listener in the unload event).

You want to put all that code in the ready method, by the way, to make sure that the flyout has been added to the DOM before you attempt to access elements. If you put JS outside of the page control structure, it'll get executed by the DOM won't be ready for you.

Kraig (Author, Programming Windows 8 Apps in HTML, CSS, and JavaScript, a free ebook from Microsoft Press)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top