Is there any way to detect all Vaadin components, html, elements are loaded and rendered in UI. For devMode in browser console
... com.vaadin.client.communication.MessageHandler
INFO: Referenced paintables: ...
as info.
After this i want to push something to UI.
Vaadin version: 8.0.5, spring boot 1.5.2
There are two ways in Vaadin to update your UI asynchronously: polling and push. Basically, you initialize your application with the basic data and start the background threads that calculate additional data. Once calculation is done, you can update components accordingly and Vaadin will pull from client periodically (if you use polling) or push to client (if you use server push). Don't forget to wrap your calls with UI.access method when accessing components from the background thread.
Dirty workaround:
If you have a focusable component on your page you can abuse .addFocusListener() and .focus(). The focus event only fires after the focus was placed on the component and that's after the page is rendered.
Then off course set a flag that your event handler does not re-execute if the focus returns to the same component.
Related
In my app when the app is resumed from a sleep, I'd like to
reload the page - or ideally, just update specific UI elements.
How can this be done?
Preferably in a platform independent way.
You want to hook into the onResume method in the application module which exposes the event when an app resumes from the background.
https://docs.nativescript.org/api-reference/modules/application.html#onresume
So in your app.js (the entry point of your application), import the module and add the onResume event handler and it can run everytime the app resumes. Now reloading a page will require a little more work. You'd have to use the frame module and find out the current page and do your work, but I'm guessing it can be done with a little effort using the approach mentioned.
UPDATE: based off your comment, you need the reloadPage() method from the ui/frame module. https://docs.nativescript.org/api-reference/modules/_ui_frame_.html#reloadpage
The correct method is reloadPage() in the Frame module (as contributed by #Brad) but the problem is that it's NOT an exposed api.
No problem - just copy/paste it and it works.
The problem is that it basically does a navigateTo() to the currentPage and that effects the navigation history. You have 2 choices - setting clearHistory to true and you lose all history (don't want that) or set clearHistory to false which creates a a duplicate of the current-page (don't want that either). There's also a backstackVisible option but that doesn't help in this scenario.
#Brad tells me that there's api that allows access to the navigation stack - haven't looked into it.
For my app - the user will be at the root page most of the time, so I decided to reload the page only if on the root page and then set clearHistory to true and that works for me.
I'm working with angular 1.
I want to load some data from server before ui-router bootstrapping all the states.
Is it possible to do so?
I would say that in this Question: AngularJS - UI-router - How to configure dynamic views and mostly in this answer you can get the answer.
The point is to use a feature of UrlRouterProvider - deferIntercept()
The deferIntercept(defer)
Disables (or enables) deferring location change interception.
If you wish to customize the behavior of syncing the URL (for example,
if you wish to defer a transition but maintain the current URL), call
this method at configuration time. Then, at run time, call
$urlRouter.listen() after you have configured your own
$locationChangeSuccess event handler.
Full description including working example is here
I have encountered a strange problem when using angular 2 beta RC.
Events get postponed if I include an external script I wrote into any angular 2 project:
<script>
(function(r,a,k,e,y,o,u){r['RakrWidgetObject']=y;r[y]=r[y]||function(){
(r[y].q=r[y].q||[]).push(arguments)},r[y].l=1*new Date();o=a.createElement(k),
u=a.getElementsByTagName(k)[0];o.async=1;o.src=e;u.parentNode.insertBefore(o,u)
})(window,document,'script','//cht.technology/rakr.js','rakr');
rakr('//localhost:3000', 'RAKR-000001');
</script>
Take github project thelgevold/angular-2-samples for example, once I add the below script as I did in https://github.com/tan9/angular-2-samples/tree/event-postponed branch.
The angular 2 application starts to behave strangely, some event changes won't be taking into account by angular until I trigger another event manually, I have to click a button twice to get correct rendering as this recording I uploaded to imgur
I don't know what's happening to the external script I wrote, it's a simple project that only depends on html2canvas and es6-promise, which can capture screenshot using html2canvas and send it to another web service. The bundle was built by webpack, and I tried to build the bundle by using browersify, with no luck.
This is a caveat with how Zone.js works. Zone.js patches async browser events and provides an API in which Angular uses to determine when changes happen and when to run change detection in order to update the UI.
In the case of your third-party library that uses the browser Promise API, it needs to be loaded before Zone.js is loaded via script tag. This is so that async events are patched so it will be run in the "zone" that Angular runs in. Events running outside the zone won't be picked up unless change detection is run manually, or the event is run in the context of the Angular zone.
As explained by brandon, make the code run inside Angulars zone
inject NgZone
constructor(private ngZone:NgZone){}
...
this.zone.run(() => ... /* code here that modifies Angulars model from the outside */);
You can also get the zone outside Angular
bootstrap(AppComponent, ...).then((ref => ref.instance.injector.get(NgZone));
(Not sure if this is 100% correct, I'm just on my phone and looking up is cumbersome. Please post a comment if you can't make it work.
I develop a restartless addon for Thunderbird. I need to add some UI elements in compose window when the addon is activated.
What I did so far is:
at startup, add an observer on windows via nsIWindowWatcher
at shutdown, remove window observer, and set a variable X to true
when this observer observes domwindowopened event, add a eventlistener to the opened window for "compose-window-init" event (when it observes domwindowclosed, it removes the eventlistener)
when this compose-window-init event is fired, check the document.location of the window, if it corresponds to a message composer:
add the UI elements,
or remove UI elements and remove eventListener, if X is set to true
This works well (UI is added to compose message when addon is activated, and removed when deactivated) except the following : when addon is deactivated then activated again, the first compose message is not provided with the UI elements. The UI is added to the other one, but not to the first.
Any idea on why and how to solve this ?
Thx
I found what was wrong.
See my post at:
http://forums.mozillazine.org/viewtopic.php?f=19&t=2949755&p=14254205#p14254205
Regards
I need to cancel renderProcessing (doView method) from executing after processing Action or Event phase (As i don't want the whole page or any portlets to be refreshed). Something like ajax resource acquiring which is not leading to refresh all portlets (I mean serveResource method). Can we use "destroy()" method at the end of ProcessAction or ProcessEvent to prevent renderPhase from executing. I'm using MVCPortlet framework and events ipc extensively in my portlets. Thanks for your help.
As Georgy Gobozov stated in the comment: The answer to your question is "No".
If you are using the standard portlet request handling and rely on event handling, you're bound to a full page reload. There's nothing that keeps you from implementing custom event handling (e.g. with JS on the browser, through your business layer etc.) but unfortunately you'll have to do exactly this.
When you start the original request, e.g. through an action handler, the page has already started to reload (from the browser perspective). Any attempt to cancel the processing server side will result in the stream to break and the browser signalling an error on the page (e.g. "can't load": The result must come with an HTTP status - and it will most likely be an error code (e.g. 50x), or it must contain the whole page's HTML.