Re: Fastest way to create lots of similar elements
On May 28, 1:48 am, Chris Lercher cl_for_mail...@gmx.net wrote:
Hi George,
absolutely - the other browsers are fine with simple DOM manipulation.
Inspired by the (a little bit outdated) benchmark [1], I changed my
code to join arrays instead of strings:
--
void attachImages(...) {
final JsArrayString array = JavaScriptObject.createArray().cast();
for (...) {
boolean flag = ...;
array.push(flag ? img src='images/a.gif' style='left: : img
src='images/b.gif' style='top:);
array.push(String.valueOf(i));
array.push(em'/);
}
div1.setHTML(array.join());
}
--
This also only calls setHTML() once at the end of the loop.
Does anybody see possibilities for optimization - either improving
performance or resulting in cleaner code?
Use a StringBuilder, it'll optimize dependending on the browser
(pushing into an array and then joining the items, or concatenating
strings, whichever has been benchmarked the fastest by the GWT team)
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
On May 27, 3:33 pm, Chris Lercher cl_for_mail...@gmx.net wrote: Hi, I need to create lots (hundreds) of image tags, and attach them dynamically to several plain div class=xy/div elements: div class=xy img src=images/a.gif style=top: 1em;/ img src=images/a.gif style=top: 2em;/ img src=images/b.gif style=top: 3em;/ ... /div Isn't this what ImageBundle does? That combines various images into a simgle one at compile time, and uses CSS to show only the desired portion the combined image when used. Respectfully, Eric Jablow -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To post to this group, send email to google-web-tool...@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
On May 28, 4:28 pm, Thomas Broyer t.bro...@gmail.com wrote: Use a StringBuilder, it'll optimize dependending on the browser (pushing into an array and then joining the items, or concatenating strings, whichever has been benchmarked the fastest by the GWT team) You're right - I just looked into StringBuilderImpl, and now I'm convinced, it's really something I should leave to GWT! I'm still looking for a solution that would remove the need for all the manual concatenation. I'd like to use either some templating (as with UiBinder), or some API (as with GWT widgets, or GQuery), but it would have to give me approximately the same performance... Then again, the amount of code that creates widgets in this low-level way is limited to two methods in my code, so I could probably live with it. -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To post to this group, send email to google-web-tool...@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
Hi Eric, yes, I'm considering using an ImageBundle (actually only the getURL() method from ImageResource) - but that solves a different problem (reducing the number of requests)! I'll still have to create my hundreds of similar elements, and add/remove them dynamically, position them etc. On May 28, 5:13 pm, Eric erjab...@gmail.com wrote: Isn't this what ImageBundle does? That combines various images into a simgle one at compile time, and uses CSS to show only the desired portion the combined image when used. -- You received this message because you are subscribed to the Google Groups Google Web Toolkit group. To post to this group, send email to google-web-tool...@googlegroups.com. To unsubscribe from this group, send email to google-web-toolkit+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
Hi Chris,
this looks as you are going to program mine sweeper.
May be you should consider to use HTML5 canvas
Stefan Bachert
http://gwtworld.de
On 27 Mai, 21:33, Chris Lercher cl_for_mail...@gmx.net wrote:
Hi,
I need to create lots (hundreds) of image tags, and attach them
dynamically to several plain div class=xy/div elements:
div class=xy
img src=images/a.gif style=top: 1em;/
img src=images/a.gif style=top: 2em;/
img src=images/b.gif style=top: 3em;/
...
/div
...
The img tags can have only two different src urls. But each needs
individual style attributes (for absolute positioning).
Question:
What would be the fastest (and preferably clean) way to do that?
A) GwtQuery (aka GQuery)?
B) UiBinder?
C) Other?
A) The GwtQuery approach:
As a first pretty clueless attempt, I'm currently using GwtQuery code
similar to this:
@UiField
HTML div1;
void attachImages(...) {
for (...) {
$(div1.getElement()).append(
img src='images/ + (flag ? a : b) + .gif' style='top:
+ i + em'/);
}
}
@UiHandler(div1)
void onDivClicked(final ClickEvent event) {
...
}
This works, but a) it's obviously ugly, and b) I don't know, if
there's a faster/better way.
B) The UiBinder approach:
I chose the HTML class, to get a clean div, and still be able to use
@UiHandler. But it doesn't seem to be possible to attach (UiBinder)
Composites to it. What else should I choose? Unfortunately, HTMLPanel
isn't a subclass of HasClickHandlers, so it doesn't work with
@UiHandler.
C) Other approaches:
?
Thanks
Chris
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
On 28 mai, 17:35, Chris Lercher cl_for_mail...@gmx.net wrote:
On May 28, 4:28 pm, Thomas Broyer t.bro...@gmail.com wrote:
Use a StringBuilder, it'll optimize dependending on the browser
(pushing into an array and then joining the items, or concatenating
strings, whichever has been benchmarked the fastest by the GWT team)
You're right - I just looked into StringBuilderImpl, and now I'm
convinced, it's really something I should leave to GWT!
I'm still looking for a solution that would remove the need for all
the manual concatenation. I'd like to use either some templating (as
with UiBinder), or some API (as with GWT widgets, or GQuery), but it
would have to give me approximately the same performance...
Messages could help you, even if you don't use its localizable
facet:
public interface Images extends Messages {
@DefaultMessage(img src='images/{0}.gif' style='top: {1}em;')
String image(String image, int emTop);
}
Then use it as:
images.image(flag ? a : b, index);
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
Hi Stefan,
:-) fortunately, it's not as extreme as it sounds - the images don't
have to be exchanged very often, but when they do, it must be
instantaneous. No problem for Safari/Chrome or Firefox... but it was
just a bit too slow on IE8.
Viele Grüße
Chris
On May 28, 5:55 pm, Stefan Bachert stefanbach...@yahoo.de wrote:
Hi Chris,
this looks as you are going to program mine sweeper.
May be you should consider to use HTML5 canvas
Stefan Bacherthttp://gwtworld.de
On 27 Mai, 21:33, Chris Lercher cl_for_mail...@gmx.net wrote:
Hi,
I need to create lots (hundreds) of image tags, and attach them
dynamically to several plain div class=xy/div elements:
div class=xy
img src=images/a.gif style=top: 1em;/
img src=images/a.gif style=top: 2em;/
img src=images/b.gif style=top: 3em;/
...
/div
...
The img tags can have only two different src urls. But each needs
individual style attributes (for absolute positioning).
Question:
What would be the fastest (and preferably clean) way to do that?
A) GwtQuery (aka GQuery)?
B) UiBinder?
C) Other?
A) The GwtQuery approach:
As a first pretty clueless attempt, I'm currently using GwtQuery code
similar to this:
@UiField
HTML div1;
void attachImages(...) {
for (...) {
$(div1.getElement()).append(
img src='images/ + (flag ? a : b) + .gif' style='top:
+ i + em'/);
}
}
@UiHandler(div1)
void onDivClicked(final ClickEvent event) {
...
}
This works, but a) it's obviously ugly, and b) I don't know, if
there's a faster/better way.
B) The UiBinder approach:
I chose the HTML class, to get a clean div, and still be able to use
@UiHandler. But it doesn't seem to be possible to attach (UiBinder)
Composites to it. What else should I choose? Unfortunately, HTMLPanel
isn't a subclass of HasClickHandlers, so it doesn't work with
@UiHandler.
C) Other approaches:
?
Thanks
Chris
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
On May 28, 6:00 pm, Thomas Broyer t.bro...@gmail.com wrote:
Messages could help you, even if you don't use its localizable
facet:
public interface Images extends Messages {
�...@defaultmessage(img src='images/{0}.gif' style='top: {1}em;')
String image(String image, int emTop);
}
Then use it as:
images.image(flag ? a : b, index);
That's a very good idea! It doesn't provide compile-time syntax
validation, but it's so much nicer than concatenation. Thanks - I like
this kind of creative solution!
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Fastest way to create lots of similar elements
Hi,
I need to create lots (hundreds) of image tags, and attach them
dynamically to several plain div class=xy/div elements:
div class=xy
img src=images/a.gif style=top: 1em;/
img src=images/a.gif style=top: 2em;/
img src=images/b.gif style=top: 3em;/
...
/div
...
The img tags can have only two different src urls. But each needs
individual style attributes (for absolute positioning).
Question:
What would be the fastest (and preferably clean) way to do that?
A) GwtQuery (aka GQuery)?
B) UiBinder?
C) Other?
A) The GwtQuery approach:
As a first pretty clueless attempt, I'm currently using GwtQuery code
similar to this:
@UiField
HTML div1;
void attachImages(...) {
for (...) {
$(div1.getElement()).append(
img src='images/ + (flag ? a : b) + .gif' style='top:
+ i + em'/);
}
}
@UiHandler(div1)
void onDivClicked(final ClickEvent event) {
...
}
This works, but a) it's obviously ugly, and b) I don't know, if
there's a faster/better way.
B) The UiBinder approach:
I chose the HTML class, to get a clean div, and still be able to use
@UiHandler. But it doesn't seem to be possible to attach (UiBinder)
Composites to it. What else should I choose? Unfortunately, HTMLPanel
isn't a subclass of HasClickHandlers, so it doesn't work with
@UiHandler.
C) Other approaches:
?
Thanks
Chris
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
Hello Chris,
I think, especially with respect to IE, the fastest way is still to
construct a string and assign it to div's innerHTML... provided that
you can find an intelligent and fast way to create that string, as IE
(at least prior to 8) has a notoriously slow string concatenation.
On May 27, 9:33 pm, Chris Lercher cl_for_mail...@gmx.net wrote:
Hi,
I need to create lots (hundreds) of image tags, and attach them
dynamically to several plain div class=xy/div elements:
div class=xy
img src=images/a.gif style=top: 1em;/
img src=images/a.gif style=top: 2em;/
img src=images/b.gif style=top: 3em;/
...
/div
...
The img tags can have only two different src urls. But each needs
individual style attributes (for absolute positioning).
Question:
What would be the fastest (and preferably clean) way to do that?
A) GwtQuery (aka GQuery)?
B) UiBinder?
C) Other?
A) The GwtQuery approach:
As a first pretty clueless attempt, I'm currently using GwtQuery code
similar to this:
@UiField
HTML div1;
void attachImages(...) {
for (...) {
$(div1.getElement()).append(
img src='images/ + (flag ? a : b) + .gif' style='top:
+ i + em'/);
}
}
@UiHandler(div1)
void onDivClicked(final ClickEvent event) {
...
}
This works, but a) it's obviously ugly, and b) I don't know, if
there's a faster/better way.
B) The UiBinder approach:
I chose the HTML class, to get a clean div, and still be able to use
@UiHandler. But it doesn't seem to be possible to attach (UiBinder)
Composites to it. What else should I choose? Unfortunately, HTMLPanel
isn't a subclass of HasClickHandlers, so it doesn't work with
@UiHandler.
C) Other approaches:
?
Thanks
Chris
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
Re: Fastest way to create lots of similar elements
Hi George,
absolutely - the other browsers are fine with simple DOM manipulation.
Inspired by the (a little bit outdated) benchmark [1], I changed my
code to join arrays instead of strings:
--
void attachImages(...) {
final JsArrayString array = JavaScriptObject.createArray().cast();
for (...) {
boolean flag = ...;
array.push(flag ? img src='images/a.gif' style='left: : img
src='images/b.gif' style='top:);
array.push(String.valueOf(i));
array.push(em'/);
}
div1.setHTML(array.join());
}
--
This also only calls setHTML() once at the end of the loop.
Does anybody see possibilities for optimization - either improving
performance or resulting in cleaner code?
[1]: http://www.quirksmode.org/dom/innerhtml.html
On May 28, 12:31 am, George Georgovassilis
g.georgovassi...@gmail.com wrote:
Hello Chris,
I think, especially with respect to IE, the fastest way is still to
construct a string and assign it to div's innerHTML... provided that
you can find an intelligent and fast way to create that string, as IE
(at least prior to 8) has a notoriously slow string concatenation.
On May 27, 9:33 pm, Chris Lercher cl_for_mail...@gmx.net wrote:
--
You received this message because you are subscribed to the Google Groups
Google Web Toolkit group.
To post to this group, send email to google-web-tool...@googlegroups.com.
To unsubscribe from this group, send email to
google-web-toolkit+unsubscr...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
