Re: Comment on UiBinder in google-web-toolkit

[codesite...@google.com]

Comment by maar...@maartenvolders.com:

Is there a UIBinder dtd or schema anywhere to which we can validate and use
in our IDE for auto-completion?

For more information:
http://code.google.com/p/google-web-toolkit/wiki/UiBinder

[codesite...@google.com]

Comment by rj...@google.com:

Not yet, though it's on the list.

[codesite...@google.com]

Comment by gkbees:

Hello all.

I have a question concerning how to access/modify the size of a
DockLayoutPanel's widget outside of the *.ui.xml file in the java code.

For instance, say I have a DockLayoutPanel with a West widget and a Center
widget as follows:
{{{
<g:DockLayoutPanel unit='EM'>
<g:west size='20'>
<layouts:westWidget ui:field='westWidget' />
</g:west>
<g:center>
<layouts:CenterWidget ui:field='centerWidget' />
</g:center>
</g:DockLayoutPanel>
}}}
Is it possible to dynamically change the width of the westWidget somewhere
in the associated java code, or can it only by modified in the *.ui.xml
file.

The problem is, I would like to be able to hide/show the westWidget and
have the centerWidget fill the remaining space dynamically when the app is
running,
but changing the width of westWidget in the java code has no effect on the
width of the West Pane of the DockLayoutPanel that was hard-coded in, there
is a disconnect between them.

Any help would be greatly appreciated.

Sincerely,

George.

[codesite...@google.com]

Comment by gkbees:

Hello all.

I have a question concerning how to access/modify the size of a
DockLayoutPanel's widget outside of the *.ui.xml file in the java code.

For instance, say I have a DockLayoutPanel with a West widget and a Center
widget as follows:
{{{
<g:DockLayoutPanel unit='EM'>
<g:west size='20'>

<layouts:WestWidget ui:field='westWidget' />

[codesite...@google.com]

Comment by jchimene:

I may be missing something but shouldn't the argument to the initWidget
call in _Apply different xml templates to the same widget_
be
{{{
protected FooPickerDisplay(UiBinder<Widget, FooPickerDisplay> binder) {
initWidget(binder.createAndBindUi(this));

[codesite...@google.com]

Comment by rj...@google.com:

@jchimene Fixed, thanks.

[codesite...@google.com]

Comment by OsorioJaques:

first of all thank you guys for the great work!

why is nowhere an example to find from the scratch to html design? i
searching for it very intensive, but iam not founding it...

i am searching for an example where i can embed the xml with html sites for
multiple modules.
i would like to create themes for my gwt app. am i asking on the right
place? i hope so.

[codesite...@google.com]

Comment by rj...@google.com:

@OsorioJaques, we're still stumbling toward just how to use UiBinder
effectively in a themed app. The last example, "Apply Different XML
Templates..." is a hint of how it might be done, though its a bit over
complex.

I expect we'll wind up with widgets that have default UiBinder instances as
final static fields, GWT.created to allow substitutions; and which accept
binder instances as constructor arguments to use instead. Something like:

{{{
class MyWidget {
public interface Binder extends Binder<Widget, MyWidget>{}
private static final DEFAULT_BINDER = GWT.create(Binder.class);

MyWidget() {
this(DEFAULT_BINDER);
}

MyWidget(Binder binder) {
...
}
}
}}}

The ugly bit here is that it would effectively require the themed Widget's
bound fields to be public and non-final, so we'll probably have to teach
UiBinder some new tricks to make it more palatable.

[codesite...@google.com]

Comment by keith.rogers79:

I think theres a couple of errors in the "Using an external resource with a
UiBinder" example, in the .ui.xml file:

The image's resource attribute references {res.logoImage} rather than
{res.widgetyImage} - what the image is called in the Resources clientbundle

The nameSpan is identified using ui:field="userNameField", which does not
match the field name in the LogoNamePanel class, where it is called
nameSpan.

[codesite...@google.com]

Comment by alex.dob...@gmail.com:

I'd like to use a Css file from which I'm not using ALL the stylesnames
initially. However, I've noticed the generated CssResource does not include
unused stylenames. Is there a way to solve this solution (somewhere in the
code to use addStyleName) ?

[codesite...@google.com]

Comment by rj...@google.com:

@alex.dobjanschi, that's not an accident. It sounds like you want to create
your own CssResource and pass it into your template via <ui:with>

[codesite...@google.com]

Comment by rj...@google.com:

@keith.rogers79 Fixed, thanks.

[codesite...@google.com]

Comment by rj...@google.com:

@alex.dobjanschi, you might find
com.google.gwt.resources.css.InterfaceGenerator handy.

[codesite...@google.com]

Comment by julian.pettersen:

"That panel is on the verge of being deprecated in favor of the new Layout
classes."

Can you please tell us what the new layout-classes are? Are they documented
in the API reference?

[codesite...@google.com]

Comment by julian.pettersen:

@rjrjr+pe...@google.com

[codesite...@google.com]

Comment by rj...@google.com:

Actually, I was wrong: VerticalPanel and HorizontalPanel are not yet
deprecated in 2.0. (Although I can't think of any reason at all to use
VerticalPanel rather than a plain old <div>.)

In 2.0 StackPanel, TabPanel and DockPanel are all deprecated in favor of
StackLayoutpanel, TabLayoutPanel and DockLayoutPanel.

[codesite...@google.com]

Comment by revoltcss:

test

[codesite...@google.com]

Comment by vincent.case:

I found these UiBinder use cases very helpful in understanding the APIs.

However, I am unable to determine if UIBinder addresses the gwt 1.7 issues
I have with formatting my app layout using CSS.

Specifically,
* HTML generated by gwt layout widgets is not transparent/explicit,
obscuring the application/intrepretation of css to the layout
* HTML generated by gwt layout widgets is table based, foregoing the
possiblity of many css layout techniques

Is one of the intentions of UiBinder to facilitate the use of CSS for app
Layout by:
* Allowing definition of an explicit HTML structue in the UIBinder xml to
which css can be applied
* Allowing app structure to be defined without use of the table based gwt
widgets

Thanks for your feedback.

[codesite...@google.com]

Comment by j...@google.com:

@vincent.case: It's not clear precisely what you're referring to when you
reference the "gwt layout widgets". Are you referring to the new
*LayoutPanel structures or the existing panels such as DockPanel,
Horizontal/VerticalPanel and such? The existing panels derived from
CellPanel are all based on tables, which we know to be problematic under
some circumstances.

The newer *LayoutPanel classes do not use tables, are much more predictable
in their behavior, and fully support standards-mode doctypes, unlike the
older table-based panels.

If you want to use common CSS layout techniques involving tricks like
float:left, explicit large margins, and so forth, there's nothing stopping
you from using regular widgets in FlowPanels and HTMLPanels and applying
whatever CSS trickery you like. UiBinder actually makes this much easier by
making it simple to use HTMLPanel and mix arbitrary HTML and widgets.

[codesite...@google.com]

Comment by revoltcss:

Hi all,

About that Hello World example, I want to know how to get the Hello World
example running in GWT. Do I create a separated xml file
(HelloWorld.ui.xml) or should I need to put it in the original xml file?

Also do I need to make a different class for the Hello World java code or
do I need to put the code in the entry point class?

public class HelloWorld extends UIObject { // Could extend Widget instead

interface MyUiBinder extends UiBinder<DivElement, HelloWorld> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
...............................

I already have installed the latest Gallileo Eclipse 3.5 and gwt-2.0.0-rc2.

Please give me an explanation.

Thank you in advance.

[codesite...@google.com]

Comment by rj...@google.com:

@revoltcss, it's much simpler than that, updated the example

[codesite...@google.com]

Comment by johan.rydberg:

How do I add a widget that is generic? For example, a Table<RowType> ?

[codesite...@google.com]

Comment by gnuyoga:

all set to try the new uibinder,

[codesite...@google.com]

Comment by rj...@google.com:

@johan.rydberg, generics support is anemic, trying only not to break
things. You can't specify generics in your ui.xml file, and you'll need to
instantiate your Table<RowType> in your owner class.

I'm pretty sure this should work (making some presumptions about your typed
Table class):

{{{
<my:Table ui:field='rowTypeTable' />
}}}

{{{
@UiField(provided = true)
final Table<RowType> rowTypeTable = new Table<RowType>() {}

[codesite...@google.com]

Comment by eric.sadou:

hello, i'm trying to use the "dygger" DialogBox example use-case, which is
just i need.
so first thanks a lot for the example.
My problem is i really dont know how to create the objet. how to declare it.
if i declare a TestDialogBox object in my main ui.xml file .. i got
compilation trouble.
Maybe the thing i dont understand is the @UiFactory.
somebody could explain me what is the meaning of this annotation in this
use case ???
thanks a lot.
roky.

[codesite...@google.com]

Comment by t.broyer:

eric.sadou: AFAIK, the DialogBox use case has been fixed so you no longer
need dygger's workaround (HasWidgetsDialogBox)
The @UiFactory tells UiBinder how to "instantiate" a widget (DialogBox in
this case), and dygger made it return 'this' because the "owner class" is
already a DialogBox instance. Without the @UiFactory, UiBinder would
instantiate a new DialogBox or use a @UiField(provided=true) field.

[codesite...@google.com]

Comment by eric.sadou:

Thanks a lot for a so quick answer. My App is ok now. I found other example
on internet. My PersonalDialogBox is now composite extending (as usual
example in GWT doc) and i created a "normal" ui.xml file.
My Ui Binder is "UiBinder<Widget,PersonalDialogBox> now.
In fact, My initial trouble was to use
initWidget(uiBinder.createAndBindUi(this));
in my constructor ...as i follow doc on GWT website.
But actually i need to remove the initWidget(...) method and just write
uiBinder.createAndBindUi(this);

If somebody could explain when should we have to use it / or not it will be
greatful.
Anyway i post this "solution" as maybe it could help.

[codesite...@google.com]

Comment by kshep92:

I may be a Johnny-come-lately when it come to GWT but coming from a Flex
background, I REALLY would like to see Google put more into this UiBinding
thing. Laying out a UI in Flex is so easy and it's the only thing that
stopping me from coming over to GWT.

I used toe UiBinder once or twice and it was easy enough to understand, but
hard to get a good flow going. Having full content assist for all the
attributes of a control that could be set (other than ui:field) would be
great. Also, having the @UiField generated automatically in the .java file
would be a nice touch.

Looking at how Flex came from just an SDK to an Eclipse plugin to having an
IDE based on developing Flex apps, i'd say that if Google did the same
they'd get a lot more hesitant people (like me) on board quicker.

Note to Google: No shame in following by example if somebody else did it
right.

I'm really excited about starting to use GWT for all my future web app
development.

[codesite...@google.com]

Comment by GlobalL...@gmail.com:

I second that!