I want to pass a complex widget with many click handlers to a js function, via jsni, so that it is included in a div element of my js code (in fact it's for the infoWindow content of the maps v3 api).
If I pass the element I loose all my handlers, for some reason. The result is that nothing is triggered when I click on buttons or links.
I thought I could sort it out by first passing a flowpanel and its node and then adding the widget to the flowpanel itslef. But it works sometimes and some times not, in particular not with the infoWindow. The widget appears fine but all handlers won't work.
Please send me any suggestions or ideas you might have!
OK I got the trick from... stackoverflow, suprise ;-)
Here's the post:
http://www.google.com/url?sa=D&q=https://stackoverflow.com/questions/6183181/how-to-add-a-custom-widget-to-an-element
So in the end I did the following
in my jsni function:
var newDiv = $doc.createElement('div');
the function returns the div as an Element which I in turn wrap in an HTMLPanel using HTMLPanel.wrap and then I add the widget!
Related
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.
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());
}
));
I have an Ext Js panel that I am adding to my main TabPanel. The panel I am adding contains a FormPanel as one of it's items and inside the FormPanel I have a Name field. What I want to do is change the name of the Tab based on the name in the form field.
The problem is that if I call the FormPanel's getForm().getValues() inside of the panel's initComponent, I get the following javascript error:
Uncaught TypeError: Cannot read property 'dom' of undefined
If I do this outside of initComponent (e.g. on a button press) everything works fine. After doing some testing, I think the issue is that the FormPanel isn't actually rendered yet (and thus the dom doesn't exist), getValues() fails. However, I can't seem to figure out a way to get my FormPanel's values from the Panel on load.
I tried to listen for events. I tried:
this.detailForm.on('afterrender', function () { alert('test'); });
but doing this showed that AfterRender is called prior to the form actually being rendered (it's not visible on the screen). Changing the alert to my custom function handler produces the previous dom exception. I attempted to use the activate and enable events instead of afterrender, but even though the API says that FormPanel fires those events, the alert('test') never gets called.
I can't seem to find any way for my panel to get the inner FormPanel's values upon loading my panel. Does anyone have any ideas?
Using getFieldValues() in place of getValues() will collect values by calling each field instance's getValue() method instead of by reading from the DOM. This should allow you to get your values regardless of the form's rendered state.
I've got the same problems on one of my projects, I managed to fix it using the afterlayout event.
I'd give setting .deferredRender:false a try.
Ext.TabPanel.deferredRender
Probably best to roll out of your afterlayout changes, then test with just a straight deferredRender:false config item.
I believe the problem is caused because the inactive tabs are not rendered until they become active. In your scenario, you cannot get the values, because they don't exist until the tab is activated/shown.
Setting deferredRender:false will render the items within all tabs. There could be a performance hit by setting deferredRender:false, so testing you must do.
Hope this helps.
Before you start shooting me down i have checked for answers and i have googled till my fingers bled but i havent been able to find a simple, concise answer. So im asking again for all those that might have this problem.
Question: how to open a new window with a formpanel in side.
Context: i have an app that lists lots of items, i want someone to edit an entry, i want a new window to open so they can edit properties then hit save. A standard thing you find in a lot of applications.
Architecture:
I have one client module called UI, it has a dozen classes that draw widgets and fill a main area when selected from a menu. I have a single html page called UI.html which has the tag in the head. Thats it.
Options Ive Seen
Call Window.Open() but you need to define a html file. I dont have one. I can create an empty one but how do you inject a widget in to it ?
use jsni $wnd to create a new window and get a reference to it. But how do i inject a form panel into it ??
use a popuppanel. They look sucky - plus if opening a window through JS is quite simple i would expect it to be in gwt.
Maybe im miss understanding how to use GWT i dont know.
Any help would be appreciated
Thanks
The way i got this to work is as follows:
i wrote a jsni method to open a new window
public static native BodyElement getBodyElement() /*-{
var win = window.open("", "win", "width=940,height=400,status=1,resizeable=1,scrollbars=1"); // a window object
win.document.open("text/html", "replace");
i added a basic body to the new window and returned the body element
win.document.write("<HTML><HEAD>"+css1+css2+"</HEAD><BODY><div class=\"mainpanel\"><div style=\"width: 100%; height: 54px;\"><div id=\"mainbody\"class=\"mainbody\" style=\"width: 100%;\"></div></div></div></BODY></HTML>");
win.document.close();
win.focus();
return win.document.body;
}-*/;
i then called this method from my main java method
BodyElement bdElement = getBodyElement();
I then injected my panel which has lots of widgets into the returned body element
SystemConfiguration config = new SystemConfiguration(); bdElement.getOwnerDocument().getElementById("mainbody").appendChild(config.getElement());
I agree with Bogdan: Use a DialogBox.
If you can't, you Window.open() as you mentioned in option 1:
Create another GWT module, and form.html that will load it
Window.open("form.html?entry=54")
Have the form gwt module read from the URL, load the entry, allow it to be edited, and provide Save and Cancel buttons
Close the popup when Save or Cancel is clicked
Can't you just use a DialogBox?
Example
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.