My understanding of the WinJS.Application.start() function is that it allows WinJS to queue up certain normal page initialization events to give you a chance to set up other data first in your default.js file. By calling the start() function at the end of default.js, WinJS then fires off all the queued events for you (such as the activated event).
I'm trying to understand where everything fits in the life cycle, so I'm not clear why the first of the following examples works but the second doesn't. All I'm doing is updating the page title, which doesn't work as expected when I call app.start() after a 5-second delay:
First, here's default.html:
<html>
<head>
<script references...>
</head>
<body>
<h1 id="pageTitle">Page of coolness...</h1>
</body>
</html>
And here's the first default.js example (which works as expected):
(function () {
var app = WinJS.Application;
app.onactivated = function () {
document.getElementById("pageTitle").innerText = "Rock it!";
};
// This code *does* fire the onactivated event:
// The page displays "Rock it!" in the page title
app.start();
})();
Here's the second default.js example (which doesn't work as expected):
(function () {
var app = WinJS.Application;
app.onactivated = function () {
document.getElementById("pageTitle").innerText = "Rock it!";
};
// This code *doesn't* fire the onactivated event:
// It initially displays "Page of coolness..." in the page title.
// After 5 seconds, it adds "Gettin' there...Almost made it..."
// to the the page title, but "Rock it!" never gets displayed
WinJS.Promise.timeout(5000).then(function () {
document.getElementById("pageTitle").innerText += "Gettin' there...";
app.start();
document.getElementById("pageTitle").innerText += "Almost made it...";
});
})();
Why does calling app.start() after the 5-second delay cause the activated event not to fire?
The documentation for the start function is a little misleading.
When you call start, WinJS.Application begins to queue and dispatch events, including those which are emitted by Windows.UI.WebUI.WebUIApplication. One of these events is activated, which is what leads to your handler function being called.
The important point is that the queuing doesn't begin until you call start. Any events that are emitted by WebUIApplication before the queuing begins are lost forever.
This is the situation you have created by delaying your call to start: the activated event is sent by WebUIApplication before the WinJS.Application queue has been set up. The activated event is never received by WinJS.Application and so your handler function is never invoked.
I know you are just trying to figure out the life cycle, but there isn't a reason to delay your call to the start function in real life. The only way to get the effect you are trying to create in your code is to place the Promise inside the onactivated handler function, like this:
(function () {
var app = WinJS.Application;
app.onactivated = function () {
document.getElementById("pageTitle").innerText += "Gettin' there...";
WinJS.Promise.timeout(5000).then(function () {
document.getElementById("pageTitle").innerText = "Rock it!";
});
document.getElementById("pageTitle").innerText += "Almost made it...";
};
app.start();
})();
Related
It will have a callback function called repeatedly to when I start a download task. But It will be so slow that it can't give feedback when touch a button.
Fileio.downloadFile(downloadData[downloadFileIndex].uri, '1.jpg',this.progressFunc.bind(this)).then((DownloadResult)=> {
if (DownloadResult.statusCode == 200) {
let nextDownloadFileIndex = this.props.downloadFileIndex + 1;
this.props.dispatch(DOWNLOADED_A_FILE({
downloadFileIndex:nextDownloadFileIndex,
progressNum:0
}))
}
}).catch((error)=> {
console.log(error)
})
This is my code and the callback function are as be folllowed
progressFunc(DownloadBeginCallbackResult) {
let progressNum = DownloadBeginCallbackResult.bytesWritten / DownloadBeginCallbackResult.contentLength;
if(progressNum<=0.99){
this.props.dispatch(DOWNLOADING_A_FILE({
progressNum:progressNum,
jobId:this.props.jobId
}));
}else{
this.props.dispatch(DOWNLOADING_A_FILE({
progressNum:0,
jobId:this.props.jobId
}));
}
}
I mean I can't get feedback immediately when I touch button. I think that it is because I have a callback function called repeatedly. so js can't handle so many tasks;
It does sound like JS thread is busy doing the request and not able to communicate back to UI thread. One thing you can try is to wrap you on press handler in an InteractionManager.runAfterInteractions(() => ...)
See https://facebook.github.io/react-native/docs/interactionmanager.html
When I try to associate my router's public variable this.currentView to a newly created view, the view gets lost, the public variable is null instead of containing the newly created view.
var self=this;
var watchListsCollection = new WatchlistCollection;
watchListsCollection.url = "watchlists";
user.fetch().done(function() {
watchListsCollection.fetch().done(function () {
loggedUser.fetch().done(function () {
self.currentView = new UserView(user, watchListsCollection,loggedUser);
});
});
});
alert(this.currentView); //null
The fetch() calls you do are firing asynchronous AJAX requests, meaning the code in your done handlers are not going to be executed untill the server calls return. Once you've executed user.fetch() the browser will fire off a request and then continue running your program and alert this.currentView without waiting for the requests to finish.
The sequence of events is basically going to be
call user.fetch()
alert this.currentView
call watchListsCollection.fetch()
call loggedUser.fetch()
set the value of self.currentView
You will not be able to see the value of your currentView before the last server request have completed.
If you change your code to
var self=this;
var watchListsCollection = new WatchlistCollection;
watchListsCollection.url = "watchlists";
user.fetch().done(function() {
watchListsCollection.fetch().done(function () {
loggedUser.fetch().done(function () {
self.currentView = new UserView(user, watchListsCollection,loggedUser);
alertCurrentView();
});
});
});
function alertCurrentView() {
alert(this.currentView);
}
You should see the correct value displayed. Now, depending on what you intend to use your this.currentView for that might or might not let you fix whatever issue you have, but there's no way you're not going to have to wait for all the requests to complete before it's available. If you need to do something with it straight away you should create your UserView immediately and move the fetch() calls into that view's initialize().
fetch() is asynchronous, but you check your variable right after you've started your task. Probably these tasks, as they supposed to be just reads, should be run in parallel. And forget making a copy of this, try _.bind instead according to the Airbnb styleguide: https://github.com/airbnb/javascript
var tasks = [];
tasks.push(user.fetch());
tasks.push(watchListsCollection.fetch());
tasks.push(loggedUser.fetch());
Promise.all(tasks).then(_.bind(function() {
this.currentView = new UserView(user, watchListsCollection, loggedUser);
}, this));
or using ES6 generators:
function* () {
var tasks = [];
tasks.push(user.fetch());
tasks.push(watchListsCollection.fetch());
tasks.push(loggedUser.fetch());
yield Promise.all(tasks);
this.currentView = new UserView(user, watchListsCollection, loggedUser);
}
Im trying to figure out how to close a pop up dialog based on a published event .. i.e when a person moves the mouse to another part of the page.(i only want it closed when i move to this part of the page) Is this possible
i have a topic published when the user moves off this area.
_hoverOffArea : function() {
topic.publish("messageRollOver/close");
},
how do i get my popup to subscribe to this topic and close itself ?
var tooltip = new TooltipDialog({
onMouseLeave : function() {
},
onBlur : function() {
}
});
messageTooltip.set("content", rollOver.domNode);
popup.open({
popup: tooltip,
around: e
});
You may be over thinking it. The dojo/topic module has a subscribe method which takes a topic name ("messageRollOver/close") and a function to fire when the message is published.
topic.subscribe('messageRollOver/close',function(args){
console.log('close tooltip');
});
You can pass arbitrary parameters to the publish message that are then passed to the subscribe:
topic.subscribe("messageRollOver/close",function(arg1){
console.log("arg1 = ",arg1);
});
var tooltip = new TooltipDialog(/*params*/);
topic.publish("messageRollOver/close",tooltip);
when the subscribe function is invoked, arg1 would be the second argument to the topic#publish function call.
I'm having problems firing and listening to events with the froogaloop api.
My code is :
$f('player').addEvent('ready', video.load);
$f('player').addEvent('play', video.show);
$f('player').addEvent('finish', video.unload);
And my function:
load: function() { $f('player').api('play'); }
And the video.show() function never starts..!
Can you help me?
You need to wrap your player events inside the ready event.
So in your case, you can do it like this:
var player = $f('player');
// Listen for the 'ready' event
player.addEvent('ready', function () {
// Now you can start listening to all other events
player.addEvent('play', video.show);
player.addEvent('finish', video.unload);
});
See the Events section on Vimeo's API documentation page. It says:
Do not try to add listeners or call functions before receiving this (ready) event.
Is it possible through the YouTube API to fire an event when the video reaches a specified time? e.g. when the video reaches 20 sec. fire the event.
Thanks,
Mauro
not sure if you still need an answer to this (as I'm finding it 4 months later) but here's how I accomplished this with youtube's iframe embed api. It's ugly in that it requires a setInterval, but there really isn't any kind of "timeupdate" event in the YouTube API (at least not in the iframe API), so you have to kind of fake it by checking the video time every so often. It seems to run just fine.
Let's say you want to start up your player as shown here with YT.Player(), and you want to implement your own onProgress() function that is called whenever the video time changes:
In HTML:
<div id="myPlayer"></div>
In JS:
// first, load the YouTube Iframe API:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// some variables (global here, but they don't have to be)
var player;
var videoId = 'SomeYoutubeIdHere';
var videotime = 0;
var timeupdater = null;
// load your player when the API becomes ready
function onYoutubeIframeAPIReady() {
player = new YT.Player('myPlayer', {
width: '640',
height: '390',
videoId: videoId,
events: {
'onReady': onPlayerReady
}
});
}
// when the player is ready, start checking the current time every 100 ms.
function onPlayerReady() {
function updateTime() {
var oldTime = videotime;
if(player && player.getCurrentTime) {
videotime = player.getCurrentTime();
}
if(videotime !== oldTime) {
onProgress(videotime);
}
}
timeupdater = setInterval(updateTime, 100);
}
// when the time changes, this will be called.
function onProgress(currentTime) {
if(currentTime > 20) {
console.log("the video reached 20 seconds!");
}
}
It's a little sloppy, requiring a few global variables, but you could easily refactor it into a closure and/or make the interval stop and start itself on play/pause by also including the onStateChange event when you initialize the player, and writing an onPlayerStateChange function that checks for play and pause. You'd just need to seperate the updateTime() function from onPlayerReady, and strategically call timeupdater = setInterval(updateTime, 100); and clearInterval(timeupdater); in the right event handlers. See here for more on using events with YouTube.
I think you may have a look at popcorn.js.
It's an interesting mozilla project and it seems to solve your problem.
Not sure if anyone agrees here but I might prefer to use setTimeout() over setInterval() as it avoids using event listeners, eg:
function checkTime(){
setTimeout(function(){
videotime = getVideoTime();
if(videotime !== requiredTime) {
checkTime();//Recursive call.
}else{
//run stuff you want to at a particular time.
//do not call checkTime() again.
}
},100);
}
Its a basic pseudocode but hopefully conveys the idea.