Can UIBinding's "auto-fit" LayoutPanel components?
ahhughes
The LayoutPanels typically take in a (sizing) unit (like PX or PC or
EM) and a discrete size for each component, like:
<ui:UiBinder>
<g:DockLayoutPanel unit='PX'>
<g:north size='64'>
<g:Label text="Example"></g:Label>
</g:north>
</g:DockLayoutPanel>
</ui:UiBinder>
But what if I don't want to set a discrete size (whatever the unit),
and I want the <g:north> to "auto fit" whatever is placed within the
north component?
Cheers.
István Szoboszlai
This was also my biggest problem with the GWT layout system I am afraid It does not support dynamic resizing of divs depending on it's content.
It somewhat makes sense, as if you use simple FlowPanels then that resizes itself.
Still I would also very well use a Layout system that supports dynamic resizing depending on content. The most obvious field of use for this is replacing the (so much hated) table components with floated divs.
So I think this is a good feature request form the GWT team:)
Best - Istvan
Best Regards
- István Szoboszlai
istvan.s...@inepex.com | inepex.com
--
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-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
Andrew Hughes
Chris Lercher
outage (?) - so I'm writing this again...]
Hi Andrew,
you can use <g:VerticalPanel> in UiBinder. But if you use HTML
Standars mode (<!doctype html>), then tables render differently than
in quirks mode, especially in IE!
To set some options on the VerticalPanel, you'll maybe have to access
it programmatically as a @UiField.
Let me know, if you find a way to achieve the layout you want. I'm
trying something similar, but I don't see a solution yet that works in
all browsers. Do you intend to do the old table trick, setting one row
to height="0%", and the other to height="100%"? I think that doesn't
work in IE. Or how do you want to achieve this with tables? I assume,
you want to make the table stretch to 100% height, where the second
row should take up all remaining space?
If OTOH, you don't want to make the whole thing stretch to 100%
height, then you can use divs! The first row will fit its height to
its contents. In that case you can assign the second row some fixed
height.
Chris
On Feb 23, 11:32 am, Andrew Hughes <ahhug...@gmail.com> wrote:
> Thanks István,
>
> This sucks, really sucks! If you want to run "best fit" gwt gui's for
> mobile, desktop, 16:9, 4:3, 5:4 screens then you are going to encounter
> serious problems. We're not facing these problems, but we will have
> different widget's appearing depending on ACL roles (and hence the layout
> will be dynamic). Parent's won't always be aware of the content that they're
> holding.
>
> I know this was possible in the table base panels (pre-2.0) and perhaps I am
> stuck with them. But I have also not seen an example of the table based
> panels in UIBinder's (and no I don't want a raw html <table> please). I'll
> have to see what I can get working tomorrow. If I can't use table based
> panels in UIBinding then this sadly terminates UIBinding in our app.
>
> :'(
>
> --AH
>
> 2010/2/23 István Szoboszlai <mrsz...@gmail.com>
>
>
>
> > Hello,
>
> > This was also my biggest problem with the GWT layout system I am afraid It
> > does not support dynamic resizing of divs depending on it's content.
>
> > It somewhat makes sense, as if you use simple FlowPanels then that resizes
> > itself.
>
> > Still I would also very well use a Layout system that supports dynamic
> > resizing depending on content. The most obvious field of use for this is
> > replacing the (so much hated) table components with floated divs.
>
> > So I think this is a good feature request form the GWT team:)
>
> > Best - Istvan
>
> > Best Regards
> > - István Szoboszlai
> > istvan.szobosz...@inepex.com | inepex.com
>
> > On Tue, Feb 23, 2010 at 6:25 AM, ahhughes <ahhug...@gmail.com> wrote:
>
> >> Hi Guys,
>
> >> The LayoutPanels typically take in a (sizing) unit (like PX or PC or
> >> EM) and a discrete size for each component, like:
>
> >> <ui:UiBinder>
> >> <g:DockLayoutPanel unit='PX'>
> >> <g:north size='64'>
> >> <g:Label text="Example"></g:Label>
> >> </g:north>
> >> </g:DockLayoutPanel>
> >> </ui:UiBinder>
>
> >> But what if I don't want to set a discrete size (whatever the unit),
> >> and I want the <g:north> to "auto fit" whatever is placed within the
> >> north component?
>
> >> Cheers.
>
> >> --
> >> 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-we...@googlegroups.com.
> >> To unsubscribe from this group, send email to
> >> google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> >> .
> >> For more options, visit this group at
> >>http://groups.google.com/group/google-web-toolkit?hl=en.
>
> > --
> > 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-we...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
Chris Lercher
tables behave differently when you're using Standards mode (<!doctype
html>).
To set some of VerticalPanel's options, you may have to get
programmatic access via a @UiField.
Chris
On Feb 23, 11:32 am, Andrew Hughes <ahhug...@gmail.com> wrote:
> Thanks István,
>
> This sucks, really sucks! If you want to run "best fit" gwt gui's for
> mobile, desktop, 16:9, 4:3, 5:4 screens then you are going to encounter
> serious problems. We're not facing these problems, but we will have
> different widget's appearing depending on ACL roles (and hence the layout
> will be dynamic). Parent's won't always be aware of the content that they're
> holding.
>
> I know this was possible in the table base panels (pre-2.0) and perhaps I am
> stuck with them. But I have also not seen an example of the table based
> panels in UIBinder's (and no I don't want a raw html <table> please). I'll
> have to see what I can get working tomorrow. If I can't use table based
> panels in UIBinding then this sadly terminates UIBinding in our app.
>
> :'(
>
> --AH
>
> 2010/2/23 István Szoboszlai <mrsz...@gmail.com>
>
>
>
> > Hello,
>
> > This was also my biggest problem with the GWT layout system I am afraid It
> > does not support dynamic resizing of divs depending on it's content.
>
> > It somewhat makes sense, as if you use simple FlowPanels then that resizes
> > itself.
>
> > Still I would also very well use a Layout system that supports dynamic
> > resizing depending on content. The most obvious field of use for this is
> > replacing the (so much hated) table components with floated divs.
>
> > So I think this is a good feature request form the GWT team:)
>
> > Best - Istvan
>
> > Best Regards
> > - István Szoboszlai
> > istvan.szobosz...@inepex.com | inepex.com
>
> > On Tue, Feb 23, 2010 at 6:25 AM, ahhughes <ahhug...@gmail.com> wrote:
>
> >> Hi Guys,
>
> >> The LayoutPanels typically take in a (sizing) unit (like PX or PC or
> >> EM) and a discrete size for each component, like:
>
> >> <ui:UiBinder>
> >> <g:DockLayoutPanel unit='PX'>
> >> <g:north size='64'>
> >> <g:Label text="Example"></g:Label>
> >> </g:north>
> >> </g:DockLayoutPanel>
> >> </ui:UiBinder>
>
> >> But what if I don't want to set a discrete size (whatever the unit),
> >> and I want the <g:north> to "auto fit" whatever is placed within the
> >> north component?
>
> >> Cheers.
>
> >> --
> >> 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-we...@googlegroups.com.
> >> To unsubscribe from this group, send email to
> >> google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
> >> .
> >> For more options, visit this group at
> >>http://groups.google.com/group/google-web-toolkit?hl=en.
>
> > --
> > 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-we...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com>
Andrew Hughes
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"><ui:UiBinderxmlns:ui='urn:ui:com.google.gwt.uibinder'xmlns:g='urn:import:com.google.gwt.user.client.ui'xmlns:my='urn:import:com.mycompany.myproject.client.ui'><table height='100%' width='100%'><tr><td><my:TopPanel ui:field='topPanel/><td></tr><tr height='100%'><td><my:ContentPanel ui:field='contentPanel'/><td></tr></table></ui:UiBinder>
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
ahhughes
a <g:HTMLPanel>...
MyEntryPoint.ui.xml
------------------------------
<!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'
>
<g:HTMLPanel>
<table width='100%' height='100%' border='1'>
<!-- this is the auto-height minimum fill row-->
<tr>
<td>
<g:Label ui:field="topPanel" text="TOP"></g:Label>
</td>
</tr>
<tr height='100%'>
<td width='100%'>
<g:Label ui:field="contentPanel" text="CONTENT"></g:Label>
</td>
</tr>
<tr>
<td>
<g:Label ui:field="bottomPanel" text="BOTTOM"></g:Label>
</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
There's also some trickery in the entry point:
MyEntryPoint.java
--------------------------
public class MyEntryPoint implements EntryPoint {
interface Binder extends UiBinder<HTMLPanel, MyEntryPoint> {}
private static final Binder binder = GWT.create(Binder.class);
@UiField Label topPanel;
@UiField Label contentPanel;
@UiField Label bottomPanel;
public void onModuleLoad() {
HTMLPanel outer = binder.createAndBindUi(this);
Window.enableScrolling(false);
Window.setMargin("0px");
RootLayoutPanel.get().add(outer);
}
}
On Feb 24, 9:20 am, Andrew Hughes <ahhug...@gmail.com> wrote:
> Hi Chris,
>
> You're right... I want to fill the window 100%. One row is of auto-fit
> (minimum height) and the other is 100% (fill whatever is left).
>
> Don't quote me on the syntax below (this is off the top of my head). I don't
> want to use <html> in the ui.xml, but it might be the only way :'(
>
> <!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:my='urn:import:com.mycompany.myproject.client.ui'
> >
> <table height='100%' width='100%'>
> <tr>
> <td>
> <my:TopPanel ui:field='topPanel/>
> <td>
> </tr>
> <tr height='100%'>
> <td>
> <my:ContentPanel ui:field='contentPanel'/>
> <td>
> </tr>
> </table>
> </ui:UiBinder>
>
> > > >> google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com><google-web-toolkit%2Bunsubs
> > cr...@googlegroups.com>
> > > >> .
> > > >> For more options, visit this group at
> > > >>http://groups.google.com/group/google-web-toolkit?hl=en.
>
> > > > --
> > > > 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-we...@googlegroups.com.
> > > > To unsubscribe from this group, send email to
> > > > google-web-tool...@googlegroups.com<google-web-toolkit%2Bunsubs cr...@googlegroups.com><google-web-toolkit%2Bunsubs
Chris Lercher
you can do this with VerticalPanel like this:
<!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">
<ui:style>
.vpanel td {
border: 1px solid black;
}
</ui:style>
<g:VerticalPanel width="100%" height="100%"
stylePrimaryName="{style.vpanel}" ui:field="verticalPanel">
<g:Label ui:field="topPanel">TOP</g:Label>
<g:Label ui:field="contentPanel">CONTENT</g:Label>
<g:Label ui:field="bottomPanel">BOTTOM</g:Label>
</g:VerticalPanel>
</ui:UiBinder>
And in your Java file:
@UiField VerticalPanel verticalPanel;
...
verticalPanel.setCellHeight(verticalPanel.getWidget(1), "100%");
This works in Firefox both in Standards mode and in Quirks mode.
In IE, this doesn't really work in Standards mode: If using
RootLayoutPanel, then the row called "CONTENT" gets 100% of the Window
height (so the BOTTOM row isn't shown). If using RootPanel, the table
doesn't stretch vertically at all.
So for IE, this only works in Quirks mode. Make sure to use RootPanel
instead of RootLayoutPanel!
I'm still looking for a way to make such a layout work in IE and
standards mode. I don't care if it's based on tables or divs. Has
anyone succeeded with this yet?
Chris