I m displaying an popup message for my windows 8 application using javascript like below
var msg = new Windows.UI.Popups.MessageDialog("No internet connection has been found.");
msg.commands.append(new Windows.UI.Popups.UICommand("Try again", commandInvokedHandler));
msg.commands.append(new Windows.UI.Popups.UICommand("Close", commandInvokedHandler));
msg.defaultCommandIndex = 0;
msg.cancelCommandIndex = 1;
msg.showAsync();
Now I want to close the popup message programatically after some timeinterval as the user has not given any input.
I do not think there is a hide/dismiss/cancel command for that kind of message popup. The cancel command is invoked when pressing the escape key on you're keyboard. Thees kinds of messages is not intended for information purpose. You should instead use a "FlyOut".
HTML:
<!-- Define a flyout in HTML as you wish -->
<div id="informationFlyout" data-win-control="WinJS.UI.Flyout">
<p>
Some informative text
</p>
</div>
<!-- an anchor for the flyout, where it should be displayed -->
<div id="flyoutAnchor"></div>
JS:
// Get an anchor for the flyout
var flyoutAnchor = document.getElementById("flyoutAnchor");
// Show flyout at anchor
document.getElementById("informationFlyout").winControl.show(flyoutAnchor);
To dismiss the flyout after a set amount of time you could just do a setTimeout and hide in you're code:
// execute this code after 2000ms
setTimeout(function () {
// Fetch the flyout
var flyout = document.getElementById("informationFlyout"); // Get the flyout from HTML
// Check if the element still exists in DOM
if (flyout)
flyout.winControl.hide(); // Dismiss the flyout
}, 2000);
Read more about the FlyOut-popups here
There is infact a cancel that you can call on the object returned by the showAsync method, first call the messageDialog in this way:
var msg = new Windows.UI.Popups.MessageDialog("No internet connection has been found.");
var asyncOperation = msg.showAsync();
then whenever you want you can call:
asyncOperation.cancel();
and the messageDialog will be dismissed.
Related
We have a situation in an application in WinJS where our serialised data is read from a file on disk, and depending on the page, different sections of the file are accessed.
The problem we have is that when a user double taps a control, button, listview etc, the system will try to read the file twice and sporadically blows up.
Is there a recommended route in WinJS to prevent or handle double presses on controls? other than something like manually disabling and re-enabling all buttons when pressed?
We've looked at some options, including overriding addEventListener, but none are perfect, any suggestions in this area would be greatly appreciated.
Additional: Whilst in this example the problem is reading a file, we have other applications where performing quick double presses on lists will try to navigate to a page twice (and add it to the nav.history twice), so it seems like there are a number of places and symptoms where this kind of thing could occur.
The best way is to disable the buttons while processing and reenable them when done. This will provide appropriate feedback to the user if things take longer than expected.
You could disable them via databinding rather than setting them all manually.
HTML
<button id="button1" data-win-bind="disabled: disabled">Click</button>
<button id="button2" data-win-bind="disabled: disabled">Click</button>
<button id="button3" data-win-bind="disabled: disabled">Click</button>
<button id="button4" data-win-bind="disabled: disabled">Click</button>
JavaScript
var bindingSource;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
var disabledContext = { disabled: false }
var btn = document.getElementById("button1");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
btn = document.getElementById("button2");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
btn = document.getElementById("button3");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
btn = document.getElementById("button4");
btn.addEventListener("click", buttonClickHandler, false);
WinJS.Binding.processAll(btn, disabledContext);
bindingSource = WinJS.Binding.as(disabledContext);
}
};
function buttonClickHandler(eventInfo) {
bindingSource.disabled = true
WinJS.Promise.timeout(5000).then(function (c) {
bindingSource.disabled = false
});
}
--Rob
Im trying to fire a click event on a tool bar button Dojo 1.8.1.
<div data-dojo-type="dojox.mobile.ToolBarButton" class="backButton" moveTo="cartView" transition="slide">
I have tried
function backClick(){
var backButton = dojo.query(".backButton", dojo.byId(currentView.id))[0];
writeLog("backClick::"+backButton);
if(backButton){
var backDijit = dijit.registry.byId(backButton.id);
writeLog("backDijit::" + backDijit.id);
writeLog("emit Click");
backDijit.emit("click", {bubbles:true});
writeLog("emit mousedown");
backDijit.emit("mousedown",{bubbles:true});
writeLog("emit mouseup");
backDijit.emit("mouseup",{bubbles:true});
writeLog("touchstart");
backDijit.emit("touchstart");
writeLog("touchEnd");
backDijit.emit("touchend");
}else{
//Exit App notification
navigator.app.exitApp();
}
}
mousedown/mouseup combo works on the browser.
But on the device it does not work(Android). What is the event that i have to send to 'click' the button on a device?
It seems that the sequence of events that will activate the toolbar button 'click' on a touch device is touchstart followed by touchend.
I suppose that your example do not work because the synthetic touch events that you are emitting do not contains any data, which fails the different methods that handle it.
Another way to trigger the click handler of the toolbar button would be to call its _onClick method.
I can markup a Heading or ListItem to have a moveTo attribute and that transition works perfectly.
Is there a way perform a transition to a named view programmatically say, on a button click?
Somewhere on the net I found below code, but its not working. I need something similar to this -
function moveTo(){
var w = dijit.byId('currentView');
w.performTransition('#newView',1,"fade",null);
}
This code sample registers an onclick event handler on a button with the id "ButtonID". After pressing the button, a lookup in the dijit registry will be performed to find the displayed view.
You can call the function performTransition(...) on any dojox.mobile.View.
require(["dijit/registry"], function(registry) {
dojo.ready(function() {
// Button Listener
registry.byId("ButtonID").on("click", function(){
var oldView = dijit.registry.byId("ID_View1");
oldView.performTransition("ID_View2", 1, "slide", null);
});
});
But:
Changing "moveTo" parameters programmatically is much more difficult than performing transitions between views. You have to do some nasty things to override the moveTo Attribute of a widget like for example a Backbutton in a dojox.mobile.Heading
var heading1 = dijit.registry.byId("ID_Heading");
heading1.destroyDescendants();
heading1.moveTo = viewId;
heading1.backButton = false;
heading1._setBackAttr("Zurück");
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?
My application has a WinJS AppBar control at the bottom of the screen. I use .showOnlyCommands(buttonsToShowArray) to show and hide buttons on ListView itemSelectionChanged event.
The problem I have right now is that when every I call .showOnlyCommands, the buttons to be hidden (or you may say "replaced") are going to flash on the top of the screen.
I tried to use the Microsoft sample app, this doesn't happen. I tried to use .showCommands + .hideCommands method, it is the same behavior. Note that this didn't happen before the Release Preview version of Win8.
I have no idea what is going on. Any idea?
EDIT:
I did further investigation, the problem happens on hideCommands. Say I have 3 buttons displayed on the appbar. I call hideCommands to hide all 3 buttons. The icon of the 3 buttons would disappear on the appbar, then pile up at the top-left corner of the screen and then disappear. (i.e. there would be a flash of 3 piled up buttons at the corner of the screen).
You may be invoking showOnlyCommands when the AppBar is in the process of 'showing'. I've found that when calling these methods in the beforeshow or aftershow handler that this happens. This quote from Animating your UI sheds light on why:
Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction.
The sample app shows/hides the buttons before the appbar is shown. You may be calling show on the app bar before calling showOnlyCommands.
A temporary hack for this problem is:
Set the button be invisible before calling showOnlyCommands or HideCommands.
Here is the code that I use for now:
/*
* #param {WinJS.UI.AppBar} appbar winControl
* #param {Array} array of appbar buttons to be shown
*/
function showOnlyCommands(appbarControl, buttonsToShow) {
var toShow = {};
for (var i = 0; i < buttonsToShow.length; i++) {
toShow[buttonsToShow[i].id] = true;
}
for (var i = 0; i < visibleButtonsList.length; i++) {
var id = visibleButtonsList[i].id;
if (!toShow[id]) {
// set the display property of the buttons to be hidden to "none"
var button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
}
// update the visible buttons list
visibleButtonsList = buttonsToShow;
// Note that we don't need to set the "display" property back for the buttons,
// because WinJS.UI.AppBar.showOnlyCommands would set it back internally
appbarControl.showOnlyCommands(buttonsToShow);
}