Complex Xpage takes long for partial refreshs - performance

I have a complex xpage with lots of nested custom controls. Everytime I execute a partial refresh it takes over 4 seconds to finish. If I remove the complexity it works just fine and is fast as wished.
I put a test on this complex Xpage and even with partial execution mode this simple test takes over 4 seconds to finish.
<xp:button value="Label" id="button1">
<xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="refreshPanel" disableValidators="true" execMode="partial" execId="inputText1">
</xp:eventHandler>
</xp:button>
<xp:div id="refreshPanel">
<xp:inputText id="inputText1"></xp:inputText>
</xp:div>
execution time of partialrefresh
Does anyone have a hint on this? Any server settings which can be adjusted?

Even though it is a partial refresh all XPage controls' values are submitted to server. "partial" means in this case that only the label1 part returns to client. But it is a full submit and this might take time...
You can submit partially though. Add
execMode="partial" execId="button1"
to your eventHandler properties. This time only the execId's value gets submitted. Put in execId the id that needs to be submitted (maybe a panel) for this partial refresh.
Have a look here for more information on partial execution mode .

There's a few little tweaks you can make to help speed things up (in general) however I'm not sure how they would help with a single complex page, but.....
Change the server page persistence setting to keep the current page in memory
Minimize the use of SSJS
Partial Execution mode (which Knut has already mentioned)
Support Concurrent User Load
Keep the Maxheap size at ¼ of the available RAM
For your XSP properties, enable “Use run-time optimized java script
and CSS resources”
Set your value bindings so they compute on the page load.
All of the above are tips/recommendations I've read from other developers over the years and I implement/try to implement myself where possible so might be worth trying some/all to see if it helps?

Related

Comparing source code

I am a newbie in JSF.I am creating a simple page with a checkbox and a readonly field.When I deploy to weblogic server ,I get what is expected output.
Now I have put autosubmit property on checkbox and partialtrigger propery on the other readonly field.My readonly field changes as expected on changing the state
of checkbox.I was curious to find out what Ajax code has been put in finally rendered page when i declare auto submit property to true.Basically I want to know
what is the html and ajax(javascript) code difference between the case when auto submit property is enabled and disabled.Is there any tool which can compare two source codes?
Thanks in advance.
Being able to see the exact difference in code may be difficult as the associated Javascript files for your JSF component toolkit have probably been minified, however you should at least be able to see the difference in the Javascript event declarations on the generated input element.
A tool like Firebug is the best choice as it gives you the ability to highlight DOM elements and view their corresponding styles, attributes, and events. It doubles as an excellent Javascript debugger as well, allowing you to place breakpoints in JS code so that you can walk through the execution of what is happening on each click event.
When autoSubmit is false, there is likely no Javascript event being triggered. When it is true however, there is likely an onclick event being triggered that is formulating an Ajax request. You might have a hard time figuring out what is happening because it is minified, however it is more than likely making such a call.
http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/js-api/symbols/jsf.ajax.html

Can I delay loading of some controls on an xPage to after page loaded

is it possible to delay loading of some controls on an xpage?
This is the problem: let's say you have a control that does a fultextsearch and displays the result in a repeat control. this ft search might take a long time and will hold the webpage loading in a waiting state until the search result is ready.
I want my page to load most of the data initally, and some "time consuming" controls should be loaded in to the page as a sperate request after the inital load.
this way the user will immediatly see the webpage, but some of the data on the page will load a little bit later without holding the webpage in a waiting state from the server.
possible?
The downside to using rendered is that all the value bindings will still evaluate, even if the corresponding markup isn't sent to the page. So the trick here is making sure the components don't even exist until you want them to.
Every component has a getChildren() method. This returns a mutable List of components, which has a add() method. This allows you to add components to the page on the fly, either while the page is loading, or later during an event. For the purposes of what you're trying to do, you would want to defer adding the "expensive" components until a subsequent event.
Create an event handler attached directly to the view root (), give it a unique ID (e.g. "loadExpensiveComponentsEvent", set its refresh mode to partial, set a refresh ID to whatever div or panel will contain the search results, and set its event name to an arbitrary event (e.g. "loadExpensiveComponents"). This prevents your event from being triggered by actual user behavior. Set the event's code to SSJS that will inject your components.
Then add a script block () to trigger the event after the page has loaded:
XSP.addOnLoad(function(){
XSP.firePartial(null, "#{id:loadExpensiveComponentsEvent}");
});
Your page will load without the search result components. Once the page has fully loaded, it will trigger the component injection event automatically.
For guidance on how to code the injection event, open the Java file that has been generated from your existing page to see what components need to be injected and what to set their values to.
You can pack them into a panel and set their rendered status to rendered=#{viewScope.pageFullyLoaded}. Then in the onLoad event have a XSP. partialRefresh request where you set viewScope.pageFullyLoaded=true
A little ugly but doable. Now you can wrap that code into your own custom control, so you could have a "lazyGrid", "lazyPanel" etc.
Not sure why I did not think of this before. the dynamic content control in extlib actually solves this problem. the dcc can be triggered onClientLoad both using javascript and ssjs afer the page has loaded.
one problem I am facing now is that I am already using the dcc on my site so I need to put another dcc within my dcc. and this seem to be a bit buggy. I have reported it to the extlib team on openNTF.

How to prevent ajax driven form from being submitted twice?

I am taking my first steps with Ajax while working on a Grails application. I am using
<g:form ...>
<g:submitToRemote ... />
</g:form>
in the most simple way and it worked great out of the box (Thanks grails!). The problem is, that the Ajax call needs about 2 seconds to return and update the html (at least on the test system) and during that time, the user can (and actually does quite often) hit the submit button again. At the moment this results in a 2nd call being made that finally ruins the output (an error msg says, that one cannot submit the same data twice).
What is the best way to prevent this?
Thanks in advance for your input!
The best way to handle this is to disable the submit button in your onSubmit() function. Honestly, I don't know why more sites don't do this. I often go the next step and instead of disabling the submit button, I put the submit button in a span tag and replace the contents of the span tag with static text "Please wait..." That way your users get visual feedback they pressed the button and "top men are working on it".
As dj_segfault said you can do that.
If you want to validate this in your controller, take a look in "Handling Duplicate Form Submissions" in the official docs:
http://grails.org/doc/latest/guide/theWebLayer.html#formtokens

Using Watir on Peoplesoft App: each text field reloads the page

I'm using Watir 1.6.7.
I'm working on developing some regression tests for a PeopleSoft App using Watir and Cucumber. I have run into a few issues with forms in the application.
First, when entering a value into a text_field, the page refreshes when the user clicks outside the text_field. Waiting for the next text_field element to exist is problematic because it may locate the element before the page reloads, or after the page reloads as expected. Increasing the wait time never feels like a good solution, even though it "works".
The second issue is that the page refresh is not triggered until the user clicks outside the current field. In this case, that happens when the script tries to access the next text_field to be populated. One solution here would be to send a or keystroke, but I can feel the script becoming more brittle with every addition like this.
Are there any other approaches that would be less brittle, and not require 2-3 extra commands in between each text_field action?
The play-by-play looks like:
Browser navigates to page that contains the form.
Browser fills in first form field. (fix: send keystroke to cause page refresh, wait_until second field is visible again)
Browser selects the second form field to be filled out. (again, keystroke & wait_until)
Page refreshes, script fails. (resolved)
Browser selects the third form field...
The application started exceeding the 5 second sleep duration, and I did not want to increase the wait time any longer. I wanted to see what would happen if I populated the text field faster using "element.value =" rather than character by character with "element.set ".
This change completely resolved all complications. The page no longer refreshes when entering text, and no long requires a send_keys statement to use TAB or ENTER to move to another field. The form is storing all of the data entered even though there are no refreshes or state saves between fields.
Previous method:
def enter_text(element, text)
element.set text
#browser.send_keys("+{TAB}")
sleep 5
Watir:Wait.until { element.exists? }
end
New method:
def enter_text(element, text)
element.value = text
end
Firstly, there are interesting Wait methods here: How do I use Watir::Waiter::wait_until to force Chrome to wait?
Overall, I don't quite understand your problem. As I understand it your script is working. If you could be a bit clearer about your desires compared to what you already have that would help, as would some sample source code.
If you're looking for ideas on custom waiting you could check for changes in the HTML of your page, form or text field. You could check that the text field is .visible?. You could try accessing the next text_field (clicking it, or setting the value for example), then catch the exception if it can't find the text_field and retry until it doesn't break, which would solve both your problems at once.
Why would clicking outside the current field be a bad solution? Do you absolutely need the next step to be a text_field access? I haven't gotten my head around how the next field only exists when you click outside the current field, but you cause this refresh by accessing the next field.
Edit: Most welcome, and thank you for clearing that up, I think I now understand better. If you allow Watir to invoke its page wait, or force it to, then it will wait for the refresh and you can then find the new text_field. Keystrokes do not invoke ie.wait, so if you send a single keystroke, then invoke a wait then the rest of your script will be responding to the post-refresh state.
I highly recommend the OpenQA page on waiting in Watir. If what you're doing to invoke the refresh does not appear on the list of things that invoke Watir page waits then you need to invoke your own page wait... but you need to do it before the page refreshes, so the cause of the refresh should end before the end of the refresh itself.
I don't know peoplesoft's app well enough to know this, but Does the app display anything for the user while it's processing.. like some kind of little 'loading' graphic or anything that you might be able to key off of to tell when it's done?
I've seen apps that do this, and the item is just an animated gif or png and it is displayed by altering the visibility attribute of the div that contains the graphic. In that instance you can tell if the app is still loading by using the .visible? method on that element and sleeping for a while if it's still there.
for the app I'm testing (which has one of those 'icons') I created a simple method I called sleepwhileloading. all it that is does is use a one second sleep wrapped in a while loop that looks to see if the loading icon is visible. works like a charm

(ASP.NET AJAX) How do you disable the ticker after it fires an event?

So i'm implementing a feature where after a user has visited my site, and not signed in and not registered for over two minutes, an alert pops up and asks them to take a survey.
I agree, annoying, but it's a business requirement.
I thought about doing a Session Object, and then in the page_load of the header (since it's on every page) check if the current time is greater than the time in session.
However, this will only fire when the page loads. I kind of need it to pop up at exactly tw minutes.
So I looked into the ASP.NET AJAX timer, which seems to do the trick.
My question is how do you disable it? Because now it just keeps firing every 20 seconds which is what my current interval is.
I thought about maybe setting a cookie and if the cookie isn't present show it, otherwise don't.
Just wondering if anyone else had any insight into this.
Thanks guys!
The problem with the setTimeout() approach as shown by azamsharp is that it only works if the user stays on the same page during the two minutes.
If you have different pages, the you will probably have to implement a solution involving the asp.net session and client-side scripting, e.g:
store a DateTime in the session when the alert must be shown
(on every page) call a page-method from javascript (e.g. every 5 seconds) to check if the alert is due, and show it if it is due
put the javascript part (the call of the pagemethod) into a common master page and use this for each asp.net page
You can use the JavaScript windows.setTimeOut method which will fire exactly once after whatever time is specified.
window.setTimeOut(foo,2000);
The above will call the foo JavaScript function after 2 seconds.
Thanks,

Resources