Get the GWT ScrollPanel to start its vertical scrollbar at the bottom - gwt

I know there are some questions out there about the GWT ScrollPanel and how it works, but allow me to explain the situation.
I'm working on a project to implement QoS on routers. I'm now at the developping stage of the project and I need to make a webinterface to add protocols such as ssh and http and give them their bandwidth.
To save memory usage and network traffic, I do not use GWT-EXT or Smart GWT. So to set the bandwidths I use a ScrollPanel with an empty SimplePanel in it (which is way too big), leaving only the scrollbar.
Now here's the problem:
I want each scrollbar for each added protocol to start at the bottom, not the top. I can get it working through the code if I manually move the scrollbar first, then any function works, like a scrollToBottom(), or a setScrollPosition(). If I want to move scrollbars through code before moving the scrollbar manually, however, I can't call a function on it.
(I would post a picture but I can't yet - new user)
Summary:
So if I add a protocol (using a button called btnAjouter), the two slidebars (One for guaranteed bandwidth and one for the maximum bandwidth) for each protocol start at the top. I want them to start at the bottom on the load of the widget.
Is there a way to do this?
Thanks in advance!
Glenn

Okay, my colleage found the solution. It's a rather dirty one, though.
The thing is, the functions only work when the element in question is attached to the DOM. I did do a check with a Window.alert() to see if it was attached, and it was. But the prolem was that the functions were called to early, for example on a buttonclick it would've worked. The creation and attachment of the elements all happens very fast, so the Javascript can't keep up, this is the solution:
Timer t1 = new Timer()
{
#Override
public void run()
{
s1.getScroll().scrollToBottom();
s2.getScroll().scrollToBottom();
}
};
t1.schedule(20);
Using a timer isn't the most clean solution around, but it works. s1 and s2 are my custom slidebars, getScroll() gets the ScrollPanel attached to it.

You can extend ScrollPanel and override the onLoad method. This method is called immediately after a widget becomes attached to the browser's document.
#Override
protected void onLoad() {
scrollToBottom();
}

Could you attach a handler to listen to the add event and inside that handler do something like this:
panel.getElement().setScrollTop(panel.getElement().getScrollHeight());
"panel" is the panel that you add your protocol to. It doesn't have to be a ScrollPanel. An HTMLPanel will work.
You can wrap this method in a command and pass it to Schedule.scheduleDeferred if it needs to be called after the browser event loop returns:
Schedule.scheduleDeferred(new Scheduler.ScheduledCommand(
public void execute() {
panel.getElement().setScrollTop(panel.getElement().getScrollHeight());
}
));

Related

Set focus to an Input in a gwtbootstrap3 Modal

I want to set the focus to a certain field (org.gwtbootstrap3.client.ui.Input) in a dialog (org.gwtbootstrap3.client.ui.Modal) before the dialog shows up. The use case seem quite common, if you have a dialog with a single field like the Upload text or Add feed dialogs right here. However I could not figure out how to set the focus to this particular gwtbootstrap3 component.
The Input component does have a setFocus(true) method. I assumed that setting the focus before showing the dialog would not work, which it doesn't. So the logical solution is to put the method call inside a ScheduledCommand. Like this:
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
textField.setFocus(true);
}
});
That usually works with GWT standard components, but does not seem to help in this case. I found a way to get notified once the dialog is shown through a ModalShowHandler. Like this:
modal.addShowHandler(new ModalShowHandler() {
#Override
public void onShow(ModalShowEvent evt) {
textField.setFocus(true);
}
});
I even tried to combine both, adding a deferred call to the handle. No luck. Any ideas?
You should be listening on the ModalShownEvent (note: Shown, not Show).
ModalShowEvent is fired when the modal is requested (for example, programmatically) to be shown.
ModalShownEvent is fired when the modal is actually shown.
This somewhat confusing naming is based on the events of the native Bootstrap Modal's events: show.bs.modal and shown.bs.modal.
ModalShownEvent combined with the usual Scheduler#scheduleDeferred should do the trick.

gwt Event Handler not working any way

I have a get with this weird thing in GWT
when i set my uibinder to the getBody().addpend() the event is not firing but it works when i use RootPanel.get().add(new p1()); works. Looks like its something to do with the way you add the uibinder to the page?
working event:: RootPanel.get().add(new p1());
not working:
Document.get().getBody().appendChild(new p1().getElement());`
the event handler looks:
not working event:: Document.get().getBody().appendChild(new p1().getElement());
not working event:: Document.get().getBody().appendChild(new p1().getElement());
#UiHandler ("bleh")
void handleClick(ClickEvent e)
if (lEntidad.getText().length()>1)
lEntidad.setText("");
I can't see all of your code to confirm this, but if you are adding widgets to your app using getElement(), then any events you add through gwt won't trickle through. There's special event logic GWT handle behind the scenes to make things work in a memory-leak safe environment.
Instead of using Document.appendChild(), you should be using whatever your parent widget is, or whatever the root of your ui.xml file is. For example, an HTLMPanel. Add your new widget directly to that, then your events on the widget should pass through.
Summary
Don't add elements if you have an event on the element. Add widgets instead. That solved the issue when I had it happen.

bugs about using DataGrid wrapped by StackLayoutPanel

I tried to use DataGrid and put it in the stacklayoutpanel.At the time when I provide the data for the ListDataProvider, the CellTable is not visible in the browser because it's on a non active tab (although it's visible in the DOM tree). After switching to the tab containing the CellTable there is no data in it. If the tab is active at time of data provisioning the table is filled correctly. Since I have made a column sortable, if I clicked the sorting, the data would be displayed correctly. I want the data to be displayed automatically when I click the other inative tab. This will not be the problem if I switch to use celltable.
I knew this was the bug in GWT and it is fixed in GWT 2.5 RC. But my boss does not want me to use GWT2.5RC yet. I have to workaround to fix this. I knew that someone said datagrid.redraw() could sort of fix it. I tired it, but the display is weird. For example, I have 10 rows in DataGrid, after selecting the 2nd tab, redraw() is called, the data is automatically displayed, but there is only like 10px of block displaying the data and the scroll bar. I have to scroll down to see other rows. There are lots of space in the bottom of the tab not being used. Could anyone tell me how to fix this? So did I use the wrong way to fix it?
is there anything else I can do to fix this problem.
Could anyone give me some tips please.
Thanks
Best Regards
I have been struggled with this thing for almost 3 days. Thanks for Papick G. Taboada and Thomas Broyer.
You guys' ideas are really helpful. Bascially either of your solution does not solve the problem. but after I combined both solutions, dang~ it worked!!.
So. the completed solution is that, add the selection handler on the non-active tab, then when the event is called, used datagrid.onResize() and then stackLayoutPanel.forcelayout(). This can solve my problem. I have also tried replacing datagrid.onResize() with datagrid.redraw(). It works as well.
I hope this can help other people who have the same problem before using GWT 2.5RC
I came across this problem with a DataGrid within and Panel that was in a StackPanelLayout. DataGrid implements RequiresResize, so I made the Panel that contained the DataGrid implement RequiresResize so it could call onResize() for the DataGrid.
in the Panel that contained the DataGrid
#Override
public void onResize()
{
dataGrid.onResize();
}
On the StackLayoutPanel
stackLayoutPanel.addSelectionHandler(new SelectionHandler<Integer>() {
// http://code.google.com/p/google-web-toolkit/issues/detail?id=6889
#Override
public void onSelection(SelectionEvent<Integer> event) {
Integer selectedItem = event.getSelectedItem();
StackLayoutPanel panel = (StackLayoutPanel) event.getSource();
Widget selectedWidget = panel.getWidget(selectedItem);
if (selectedWidget != null && selectedWidget instanceof RequiresResize)
{
((RequiresResize)selectedWidget).onResize();
}
}
});
I believe a more general answer would be that any container in a StackLayoutPanel that contains a widget that implements RequiresResize should also implement RequiresResize and pass it on.

google wave: how did they make divs clickable

As we are facing GWT performance issues in a mobile app I peeked into Google Wave code since it is developed with GWT.
I thought that all the buttons there are widgets but if you look into generated HTML with firebug you see no onclick attribute set on clickable divs. I wonder how they achieve it having an element that issues click or mousedown events and seemingly neither being a widget nor injected with onclick attribute.
Being able to create such components would surely take me one step further to optimizing performance.
Thanks.
ps: wasnt google going to open source client code too. Have not been able to find it.
You don't have to put an onclick attribute on the HTML to make it have an onclick handler. This is a very simple example:
<div id="mydiv">Regular old div</div>
Then in script:
document.getElementById('mydiv').onclick = function() {
alert('hello!');
}
They wouldn't set the onclick property directly, it would have been set in the GWT code or via another Javascript library.
The GWT documentation shows how to create handlers within a GWT Java app:
public void anonClickHandlerExample() {
Button b = new Button("Click Me");
b.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
// handle the click event
}
});
}
This will generate an HTML element and bind a click handler to it. However, in practice this has the same result as using document.getElementById('element').onclick() on an existing element in your page.
You can hook functions to the onclick event using JavaScript. Here's an example using jQuery:
$(document).ready(function(){
$("#div-id").click(function(){
/* Do something */
});
});
If you're interested in optimizing performance around this, you may need to investigate event delegation, depending on your situation.
A click event is generated for every DOM element within the Body. The event travels from the Body down to the element clicked (unless you are using Internet Explorer), hits the element clicked, and then bubbles back up. The event can be captured either through DOM element attributes, event handlers in the javascript, or attributes at any of the parent levels (the bubbling or capturing event triggers this).
I'd imagine they've just set it in a .js file.
Easily done with say jQuery with $(document).ready() for example.

Disable user interaction in a GWT container?

I want to disable/enable user interaction (mouse click more specificly) on many widgets like hyperlink, button, etc which are contained in a composite (flextable)
there are more than one click handlers, and I don't want to bother with removing and adding listeners according to mode (interaction enabled/disabled)
Any ideas would be appriciated...
You forgot to mention the version of GWT. In GWT 2.0 you can use this code snippet or something similar. This feature allows you to cancel events before they are handed over to the target widget.
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
public void onPreviewNativeEvent(NativePreviewEvent pEvent) {
final Element target = pEvent.getNativeEvent().getEventTarget().cast();
// block all events targetted at the children of the composite.
if (DOM.isOrHasChild(getElement(), target)) {
pEvent.cancel();
}
}
});
There is a GlassPanel compoent in google-web-toolkit-incubator. I am almost sure it does what you need. Either way, it is a good idea to cover a disabled component whit one of these.