Re: Re : Re: UiBinder and child HTML 'widgets'
On May 12, 4:13 pm, Thomas Broyer t.bro...@gmail.com wrote: It's not HTML vs. Widget, it's innerHTML vs. DOM's document.createElement/appendChild. So in GWT, as soon as you start making reusable components, you're breaking the innerHTML layer and have to introduce a Widget. From what I've seen in most of the modern browsers, the difference between innerHTML and DOM manipulation isn't vast (e.g. http://andrew.hedges.name/experiments/innerhtml/). I have to admit, the presentations that have talked about performance differences between using widgets and emphasizing html in GWT haven't been incredibly clear on the reasons why -- other than talking about the level at which events are handled. Given that I don't have a performance problem that I'm trying to solve, I'm happy to chalk this up to premature optimization. The point of HTML vs. Widget is: don't use FlexTable/Grid/FlowPanel for layout and Button/TextBox/etc. if you can simply use an HTMLPanel with HTML inside (and event delegation for event handling) Sure. From the limited descriptions I'd seen, I imagined that a reusable component containing HTML might offer the same benefit over a reusable component containing GWT widgets. That might not be true. -- 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-toolkit@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: UiBinder and child HTML 'widgets'
On May 12, 3:19 pm, Geoffrey Wiseman geoffrey.wise...@gmail.com wrote: On May 12, 1:22 pm, Gal Dolber gal.dol...@gmail.com wrote: In real its ok what you are doing(in theory Widget should be used only when you need events), but the truth is that gwt's panels don't have any support for UiObjects so you need to use Widget. So even HTMLPanel can't easily absorb HTML once you bundle it up as a GWT UiBuilder component. Ah well. Coming back to this point -- the UiBinder documentation shows bundling HTML as a UiObject (http://code.google.com/webtoolkit/doc/latest/ DevGuideUiBinder.html#Hello_World) and the Google Plugin for Eclipse has an option to allow you to do this, but there doesn't seem to be much you can do with it having done so: all panels from RootPanel on down require you to insert a widget. So why would you create a UiObject component using UiBinder? -- 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-toolkit@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: UiBinder and child HTML 'widgets'
...when you need an UIObject ;-) The Tree and Menu widgets are known to use UIObjects (TreeItem / MenuItem); and if you build similar widgets then you might have a need for UiBinder for your UIObjects. The thing is: a UIObject is so simple (compared to a Widget) that it doesn't need the attach/detach lifecycle that Widgets require, and you then attach it simply adding its Element as a child of another. A UIObject is basically just a wrapper around an Element, with setVisible and style names. Basically, UIObjects are low-level objects that you entirely manage yourself. A Widget without events won't cost much more than a UIObject. In the HTML vs. Widget debate, the performance issue is between attaching handlers to each and every element (in GWT's event handling, that means those elements are actually Widgets) or use event delegation (have a single Widget that listens to the events, and process them differently depending on their getNativeEvent().getEventTarget()). Cell widgets follow this pattern, and use innerHTML. Grid/FlexTable also uses event delegation, but builds the HTML using the DOM. I believe using Grid/FlexTable's ClickEvent + getCellForEvent is more efficient than adding, say, a Label in each cell and listening to click events on each of them (even if using the same ClickHandler instance). But honestly, I thing you won't notice a difference unless you're using IE, or a mobile device (phone/tablet), or if you have a huge number of children you want to listen events on (and/or a huge number of different events you want to listen to). (remember GWT-Incubator's bulk loaders? they use innerHTML to provide better performance than stock Grid, but again, probably not noticeable on modern browsers on desktops/laptops) -- 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-toolkit@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: UiBinder and child HTML 'widgets'
On May 13, 11:12 am, Thomas Broyer t.bro...@gmail.com wrote: ...when you need an UIObject ;-) Thanks! Helpful food for thought. It definitely sounds like I was trying to make an optimization I don't need based on advice I didn't fully understand. ;) -- 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-toolkit@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.
UiBinder and child HTML 'widgets'
Just to give a little background, I've been doing GWT for a while, but
I'm pretty new to UiBinder. I'm starting to fold it in to some of the
GWT work I'm doing, and I certainly like some aspects of it. I'm
building a page with a lot of repeating display elements that don't
require any events (a simple dashboard with some stats), so I started
thinking that I'd use HTML elements instead of widgets, and then I ran
into some troubles on how to do that with UiBinder.
I have a component representing the dashboard page (more specifically,
the 'body' part of the page leaving out the template and navigation),
and within that a bunch of stat widgets. I originally laid it out as a
FlowPanel, with stat widgets, e.g.:
!DOCTYPE ui:UiBinder SYSTEM http://dl.google.com/gwt/DTD/xhtml.ent;
ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:w=urn:import:myproject.client.widget
g:FlowPanel
g:LabelGeneral/g:Label
w:Stat heading=apps in-force ui:field=appsInForce /
/g:FlowPanel
/ui:UiBinder
Once I started the Stat component, I realized I didn't need it to use
any widgets, that HTML would be ok, so I developed it that way:
public class Stat extends UIObject {
private static StatUiBinder uiBinder =
GWT.create( StatUiBinder.class );
@UiField
SpanElement heading;
@UiField
SpanElement value;
interface StatUiBinder extends UiBinderElement, Stat {
}
public Stat() {
setElement( uiBinder.createAndBindUi( this ) );
}
public void setHeading( String heading ) {
this.heading.setInnerText( heading );
}
public void setValue( String value ) {
this.value.setInnerText( value );
}
}
!DOCTYPE ui:UiBinder SYSTEM http://dl.google.com/gwt/DTD/xhtml.ent;
ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder
ui:style
.statHeading {
}
.statValue {
}
/ui:style
div
span class={style.statHeading} ui:field=heading/span
span class={style.statValue} ui:field=value/span
/div
/ui:UiBinder
GWT then complained that I was calling add(Widget) with a UIObject,
which made sense -- I can't put HTML elements into a flow panel. So I
switched the container to an HTMLPanel, switched the label for a Div:
!DOCTYPE ui:UiBinder SYSTEM http://dl.google.com/gwt/DTD/xhtml.ent;
ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:w=urn:import:myproject.client.widget
g:HTMLPanel
divGeneral/div
w:Stat heading=apps in-force ui:field=appsInForce /
/g:HTMLPanel
/ui:UiBinder
Now I'm getting this message:
[ERROR] [myproject] - Line 23: The method
addAndReplaceElement(Widget, Element) in the type HTMLPanel is not
applicable for the arguments (Stat, Element)
I'm confused as to why it's trying to treat the Stat as a Widget
(which it isn't), so I'm missing something about UiBinder or HTMLPanel
here. I did a few google searches, didn't see anything obvious.
Help appreciated.
--
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-toolkit@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: UiBinder and child HTML 'widgets'
What I don't understand is why Stat is not a Widget if you want to use it like a Widget. -- 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-toolkit@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: UiBinder and child HTML 'widgets'
In real its ok what you are doing(in theory Widget should be used only when you need events), but the truth is that gwt's panels don't have any support for UiObjects so you need to use Widget. On Thu, May 12, 2011 at 10:07 AM, Thomas Broyer t.bro...@gmail.com wrote: What I don't understand is why Stat is not a Widget if you want to use it like a Widget. -- 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-toolkit@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. -- Guit: Elegant, beautiful, modular and *production ready* gwt applications. http://code.google.com/p/guit/ -- 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-toolkit@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: UiBinder and child HTML 'widgets'
On May 12, 1:07 pm, Thomas Broyer t.bro...@gmail.com wrote: What I don't understand is why Stat is not a Widget if you want to use it like a Widget. [nod] I've changed it to being a widget in the meantime. Basically, I need a reusable piece of display content, but it doesn't need any events, so it seemed like using HTML would be 'lighter' than using widgets. Certainly some of the best practice presentations called out that using too many widgets where you could use HTML was likely to pose performance problems in the long run. I think for this page, a widget won't pose any real problems, so I'll just switch to doing that, but if I were doing something obviously wrong, then I'd rather know what that is rather than just ignore it and do something different. - Geoffrey -- 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-toolkit@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: UiBinder and child HTML 'widgets'
On May 12, 1:22 pm, Gal Dolber gal.dol...@gmail.com wrote: In real its ok what you are doing(in theory Widget should be used only when you need events), but the truth is that gwt's panels don't have any support for UiObjects so you need to use Widget. So even HTMLPanel can't easily absorb HTML once you bundle it up as a GWT UiBuilder component. Ah well. - Geoffrey -- 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-toolkit@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 : Re: UiBinder and child HTML 'widgets'
It's not HTML vs. Widget, it's innerHTML vs. DOM's document.createElement/appendChild. So in GWT, as soon as you start making reusable components, you're breaking the innerHTML layer and have to introduce a Widget. The point of HTML vs. Widget is: don't use FlexTable/Grid/FlowPanel for layout and Button/TextBox/etc. if you can simply use an HTMLPanel with HTML inside (and event delegation for event handling) -- 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-toolkit@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.
