WinJS.UI.Flyout HTML on windows phone 8.1

Question

I am trying to create WinJS.UI.Flyout with one input field and one button so that the user can enter a new value in the input field and click the button to save it. However, on a Windows 8.1 phone, flats are not supported.

How can I get around this? Is there a way to simulate the behavior of the WinJS.UI.Flyout component on a 8.1 phone?

Thanks in advance.

Answer 1

My personal opinion on architecture is here, but I believe that if you have an API that requests it and you want people to really use it, you need to make sure that it is supported in all environments.

Here I use for Flyouts (which I use as user tooltips that don't move the user from the page):

default.css:

/* Used to help emulate the Flyout when on a Windows Phone device. */ .matting { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999; background-color: black; opacity: 0.6; display: none; } /* Applied when forcing a Flyout on a Windows Phone device. */ /* Removed when hiding it. */ /* Creates it like a WP dialog. */ .wp-flyout { position: absolute; top: 0px; left: 0px; width: 100%; /* The height should be left alone. */ z-index: 1000; display: block; opacity: 1.0; background-color: dimgray; } 

In HTML, put this in addition to the WinJS.UI.Flyout divs:

 <div id="matting" class="matting"></div> 

In Javascript, along with the ready-made and unload functions on the main page, I have the following two additional functions:

  // Shows a flyout, even on Windows Phone. // flyoutId is the WinJS.UI.Flyout structure. // launchButtonId is the button that is launching this flyout. Flyout: function (flyoutId, launchButtonId) { var flyoutElement = document.getElementById(flyoutId); if (flyoutElement.winControl) { // Windows. var launchButton = document.getElementById(launchButtonId); flyoutElement.winControl.show(launchButton); } else { // Windows Phone. // Fake it with a dialog. var flyout = WinJS.Utilities.query("#" + flyoutId); // Show the matting. var matting = WinJS.Utilities.query("#matting"); matting.setStyle("display", "block"); // Apply click-cancel to the matting. matting[0].cancel = function () { that.UnFlyout(flyoutId); return true; }; matting.listen("click", matting[0].cancel, false); // Apply the wp-flyout class. flyout.addClass("wp-flyout"); // Add back-button-cancel event. WinJS.Application.addEventListener("backclick", matting[0].cancel); // Show the flyout. flyout.setStyle("display", "block"); } }, // Hides a flyout, even on Windows Phone. UnFlyout: function (flyoutId) { var flyoutElement = document.getElementById(flyoutId); if (flyoutElement.winControl) { // Windows. flyoutElement.winControl.hide(); } else { // Windows Phone. // We're faking it with a dialog. var flyout = WinJS.Utilities.query("#" + flyoutId); // Hide the flyout. flyout.setStyle("display", "none"); // Remove the wp-flyout class. flyout.removeClass("wp-flyout"); // Remove the click-cancel from the matting. var matting = WinJS.Utilities.query("#matting"); matting.removeEventListener("click", matting[0].cancel, false); // Remove back-button-cancel event. WinJS.Application.removeEventListener("backclick", matting[0].cancel); // Hide the matting. matting.setStyle("display", "none"); } } 

Note that I use the popular "that = this;" in ready () function with "var that;" Define above the home page in the standard universal navigation application.

Pure result: Create your pop-ups, as usual, in HTML. When you want to pop up, you simply call:

 that.Flyout("flyoutId", "launchButtonId"); 

This will show the popup as usual on Windows, but on the Windows Phone the popup will now appear as a WP dialog box (or close enough to it). If there are Ok / Cancel / etc. Buttons in the drop-down list, make sure you call:

 that.UnFlyout("flyoutId"); 

instead of the usual ".hide ()".

Feel free to play with him and let me know if you have any improvements.

Answer 2

I don’t think there is a control for this ... and I don’t think I want on the phone. Take a look at the date and time pickers from the calendar application, they will take you to a new page to enter your data.

What you want to do can be achieved using standard HTML, but I'm just not sure what I want.

In these cases, I take my users to a new page where they enter the necessary data.