GWT manipulating DOM elements caveats
سؤال
Following this question I have recently asked : Understanding Document.createElement()
Here is the context :
- There is a text-zone in my GWT GUI that holds a text
- Users can select a word (or a sequence of words) in this text-zone and transform it / them into a
highlighted text
highlighted texts
need to be able to listen to users : click, right-click, dragging & dropping operations- A scenario with 1000
highlighted text
in the text-zone is not impossible.
I was wondering :
- Is it a bad approach to manipulate DOM elements directly in GWT ? (Without using Widgets)
- Is it a bad approach to do things like that Add listener to SpanElement ? Can it cause memory leaks ?
- What is the best approach to achieve such things ? I've done some tests with a simple custom widget that uses a span element, and adding 1000 widgets to the RootPanel takes approximatively 6 to 10 seconds in DevMode. When I use DOM elements direclty, this operation duration goes under 1 second (even less than 200ms with optimizations).
EDIT
Performance should not be a problem, according to some real tests I did after @Gilberto advices. http://jmichelgarciagwt.appspot.com/DOMTesting.html
Still, I would love to have feedbacks for questions 1) and 2)
المحلول
Adding listeners/handlers to hundreds of span elements/widgets is definitely a bad approach.
If you stay with GWT, you can attach a single event handler to your "text zone" widget, and then find which element has been the source of the click: http://comments.gmane.org/gmane.org.google.gwt/61911
If you go with DOM elements, you can attach a single event listener to your "text zone" element and find out the event source when it bubbles to it. For example: http://icant.co.uk/sandbox/eventdelegation/