I am looking for a way to show in a webapp in front of a task a wait-message and after it hide the message. The task is running a longer time. I dont know if it is possible at all.
The problem is, so far I can see, that the site will be returned to the users browser AFTER the task is completed because the task is part of the site as a inline code replaces by the webserver interpreter (no matter if PHP, Perl or whatever).
The only solution I can imagine is to parallel the task with threads or processes and requery the state with ajax in the website.
Any idea to do it less complex? Thanks for help!
The server should start sending content to the browser as soon as your code starts executing; it does not wait for the server-side code to finish first.
Therefore, you can just run the task after rendering the HTML containing the wait message. After the task, you can render a <script> block that hides the wait message.
See Watching long processes through CGI. You could adapt the same technique to display updates using AJAX calls.
Several ways you can do this:
1) Pull the task out into its own file so it isn't inline. Then use asynchronous AJAX to query the task. Display a progress bar on firing of the event, and hide it when it is done.
2) Make sure you are streaming your data back to the browser (This is the default in php.). If you are running php as a CGI it will execute the whole script before returning anything to the browser. In this case you will have to o #1 Put the inline task as the LAST thing on the page. In the place where the inline task is now, put up a <div id=loading>Content Loading Please Wait</div> or spinner/progress bar.
Capture the output of the inline task into a php variable At the end of the task add <script>document.getElementById('loading').innerHTML ="$taskResult";</script>
Related
I have a big list with elements, that generates from server response data. The problem is that when data updates it automatically renders elements that bounded to this data and it makes UI blocked.
The question is, how can I catch that moment when all elements were rendered and show that list without blocking UI?
Thank you
When the data is updated then the rendering is done sync. If you schedule your "after-updated" code using this.async(function () { ....}) (after the data was updated) your code executed after the rendering is done (and previously scheduled tasks are processed).
this is one heck of a confusing question to ask so here it goes. Firstly, I'm not asking you to write me any code I just need help going in the right direction for what I'm trying to achieve here. Basically the task is this, I want to scan a select area of a web page's source code for changes and if something does change, I want to report it somewhere (like a console or something). However, I do not want just a notification of change, I also want what the change is/was. I've been looking into things like jsoup but I am still struggling to even find out what this is called.
Any pointers would be insanely appreciated. Thanks, Optimistic.
Here are some steps assuming this is from a node.js project:
Get the URL for the specific script file you're looking for a change in.
Using the request() module, fetch that URL.
Break the data up into lines (probably using .split()).
Find the specific line you are looking for either by counting line numbers of by searching for some representative text in that line.
Using some sort of search in that line (perhaps a regex), find the current value of the exact item in that line you are looking for.
Save the current value.
Then, at some future time, repeat this whole process and compare what you find to the previous value.
If this is being done from a browser instead of node.js, then use an Ajax call to retrieve the file. If the file is on another domain from your web page and that domain does not permit cross-origin requests, then you cannot solve this problem in an automated fashion from a browser in your own web page.
Here is how I would do it with Jsoup:
Document doc = Jsoup.connect(url).get();
String scriptCssQuery = "script"; // Tune this CSS query to find THE script you need.
Element script = doc.select(scriptCssQuery).first();
if (script != null) {
String scriptLines = script.html();
// Store the changing line somewhere and compare it to its previous value...
}
I am developing one application, in that I have 3 pages. In first page I have List Box with some data and in 3rd page I have application bar for navigating to first page. I will get the list box data from the server. Whenever I am binding the List Box with server data, it is rendering properly but if the user navigate from 3rd page to 1st page using application bar then List box is not updating with fresh data, it is still displaying old data. If user comes to first page using back key press then new data is rendering.
I am using observable collection to bind List Box data and used NavigationService.Naviagte() for navigation.
Help me to resolve this issue.
Thanks in advance.
I am not very sure about your problem because you haven't cleared the whole context. But assuming that your data is refreshing on back key press, I can suggest you use NavigationService.GoBack() instead of NavigationService.Naviagte(). The former method call is equivalent to back key press. NavigationService.Naviagte() creates another instance of the page in the memory while NavigationService.GoBack() takes you back to the previous instance. Hope this helps.
As I understand everything is fine when you start. But the update is not happening upon second return, i.e. Through navigation.
My thought is that all your code to do this is in the constructor, and since the page is not removed from memory the constructor will not be called.
Two solutions move the code to a loaded event. Simply in the constructor write this.loaded += eventname;
Or you could put code in the onnavigatedto event. Write as a new function protected override onnavigatedto.
Putting it in the navigatedto, would probably make your app less responsive if you do server calls. If you have the code in the loaded event then the information will be uploaded when it is done. Which means the user will have a moment with old information. You could then introduce a waiting screen if it is an issue.
How to check if a UiInstance is already running? I need to know so that I know whether to use UiApp.getActiveApplication() or UiApp.createApplication(); The issue is that the functions may not be called in a particular order.
No offense but this question doesn't make a lot of sense to me... There can be only one UiApp instance and in a standalone app it must start with a doGet() so I wonder how you could start an app without starting by the app creation ?
Once you have created this instance it lives as long as you close your browser window of you hide all the possible source of user actions (for example hiding all the widgets or disabling all the buttons) and everything that happens in between is either the result of a handler call or a direct function call in the script, all of which are necessarily subsequent and therefor using getActiveApplication().
If I missed something (which is entirely possible of course) please explain.
Edit : following your comment :
In case you use UiApp embedded in a document the situation is a bit different but not so much :
2 different cases :
Dialogs :each time you create a new one it will appear "over" the existing one but won't be "aware" of it, i.e none of the first UI values will be available to the next one. So it's a better idea to close each one before creating a new one (app.close();return app;) otherwise you'll have to manually close each "layer" successively since I guess it wouldn't be a good idea to keep the dialog on the screen all along :-)
Data passing from one instance to the other must be handled using some kind of storage.
Sidebar : what I'd suggest is to create a starting UI in the sidebar that creates the Ui (showing a welcome message or a menu for example) and let all the other function get this Ui Instance using getActiveApplication() , that will avoid the UI "flashing" while it's been redrawn and allow you to play with all the values all along.
In both case the choice is really yours but the practice I suggest works better and gives you full control on what happens.
There are many times that I've needed to execute some code after a number of events have fired, and I've come up with counters and such but I feel there must be a better way.
For example, say five files need to be loaded, after which a UI component will become active.
If I set up a counter that increments each time a file is requested, then decrements each time one has loaded, I run the risk that the first two or three files may somehow get completely loaded before my code gets around to requesting the fourth and fifth, which would mean that my counter would be at zero when I still have two files to load, thus allowing the UI component to be prematurely activated.
There are some cases where you could know the number that need to be loaded before the requests go out, but it's possible that the first file contains the paths (and therefore the number of) files. (And this file-loading scenario is only an example of the pattern I'm trying to explain.)
Does anyone have an elegant solution for this? (Does my description make sense?) Thanks!
You could do something with a task framework like spicelib
Using that as an example
Create a FileRecursionLoadTask which grabs a file and completes when that file and any references it makes are loaded.
Add each FileRecursionLoadTask to a SequentialTaskGroup.
When the TaskGroup is completed, then you know all of the file loads have completed.
There are also plenty of other task frameworks which you might like better. For example, Spring ActionScript also has one.
Before executing a request, store a reference (a unique request uri, the loader object or a special command object) in a list. When a loader has finished, remove that object and call a function that checks if there are remaining active tasks in the list.
This isn't specific to file requests nor request in general, it can be used for anything that needs to wait for multiple actions to finish. Multiple list can be used to process multiple types of action at the same time. The object stored in the list could be implemented as a command object, which could provide more information about the task. This is called command pattern.
If you're doing just loading, like Jacob, I would also suggest a library that handles loading
If the case of a more complicated situation like mixing loaders and other event listeners, I would suggest using an event that fires whenever there is any change to any of the dependencies. In addition all the objects/classes would have a state.
Then I would create a listener adding function for the class that would need to do the function or initiate it, that would have 3 parameters
object with event dispatcher (assuming they all use the same update event) ie. assetLoader
name of object state ie. headerLoaded
state value's desired ie. true
the function would add the listener to a chain of listeners, and any time any of the listeners fires, all objects would check if the state value.
This would allow for regression as well (like when a user presses a button, the content starts loading, but then the user presses cancel, even if all the assets load, the state of one object would be false, thus not allowing the item to complete) If you were using counters, it would be the equivalent to adding instead of subtracting, but much more reliable.
Looking for a design pattern? Try the command pattern (http://johnlindquist.com/2010/09/09/patterncraft-command-pattern/)
(The video is a great example of what command pattern is and how it works - using Starcraft as an example.
The implementation is that you queue your load commands so that they do not execute out of order, and you can add the enable or disable commands to your command que. So the command pattern will play back your commands something like: load, load, load, enable ui item, load, load, enable another item
Good luck