Newbie Alert:
I have been furiously looking for a way to size a particular cell of a HorizontalPanel.
What I am trying to do is implement a 2-cell Horizontal Panel and set the left cell to say 200px. However, I am trying to make the right cell fill the rest of the window, not its cells contents.
I cannot see the wood for the trees, please help...
HorizontalPanel horizontalPanel=new HorizontalPanel();
horizontalPanel.setWidth("100%");
Widget widget1=new Widget();
Widget widget2=new Widget();
horizontalPanel.add(widget1);
horizontalPanel.add(widget2);
horizontalPanel.setCellWidth(widget1,"200");
In above code if the widget2's width is set to 100% then widget2 will fill rest of the window.If the widget2's width is not 100% it will not fill rest of the window.Just check the width of your second cell content.It should not be 100%.
I found I needed to tweak Damo's answer slightly to make this work.
You have to set the explicit size of the widget in the first cell. But then set the second cell to have a width of 100%.
<g:HorizontalPanel width="100%">
<g:cell>
<g:SimplePanel width="200px"/>
</g:cell>
<g:cell width="100%">
<g:SimplePanel width="100%"/>
</g:cell>
</g:HorizontalPanel>
Or if you are doing this with UiBinder:
<g:HorizontalPanel width="100%">
<g:cell width="200">
<!-- Stuff -->
</g:cell>
<g:cell>
<!-- More Stuff -->
</g:cell>
</g:HorizontalPanel>
Related
I'm trying to add a DataGrid on my view.
I know that a DataGrid can only stay in a Layout Panel, because of the ProvidesResize and RequiresResize interfaces.
The thing is, I want to add a filter on top of the DataGrid Table, and the filter can't have a fixed height, it could be bigger or smaller.
No Layout Panel would accept more then one child to be resized, but the LayoutPanel itself. But still, each layer needs a height to be set in percentage, and that's not OK as well.
If I change the DataGrid with a CellTable and then add both in a Flow Panel, the problem would be solved, but the table has to be scrollable.
What I would need is a FlowLayoutPanel but there is no such Panel in GWT
I was thinking that the only way would be to try to create a custom panel which would implement ProvidesResize and RequiresResize interfaces.
This is how it looks like using a LayoutPanel :
<g:layer left="2%" right="68%" top="2%" bottom="93%">
<g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
</g:layer>
<g:layer left="2%" right="68%" top="9%" bottom="56%">
<g:SplitLayoutPanel>
<g:center>
<g:HTMLPanel>
<g:FlowPanel ui:field="criteriaPanel" visible="false" />
<g:FlowPanel>
<g:Button ui:field="refresh">
<ui:text from="{text.refreshButtonCaption}" />
</g:Button>
</g:FlowPanel>
</g:HTMLPanel>
</g:center>
</g:SplitLayoutPanel>
</g:layer>
<g:layer left="2%" right="2%" top="45%" bottom="5%">
<g:SplitLayoutPanel>
<g:center>
<c:DataGrid ui:field='table' />
</g:center>
</g:SplitLayoutPanel>
</g:layer>
<g:layer left='2%' right='2%' top="95%" bottom="0%">
<g:HTMLPanel>
<table style="width:100%">
<tr>
<td align='center'>
<c:SimplePager ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:layer>
</g:LayoutPanel>
Can anyone help me with this ?
Many thanks in advance.
If you don't care about very old browsers, use flexbox CSS layout model - I use it with DataGrid (and for everything else) all the time.
Then you simply add display: flex; to your container (i.e. what you used LayoutPanel for), and then set flex-grow: 1 on your DataGrid. This will tell DataGrid to take all the available space after other widgets in the container have been rendered.
P.S. For the past few years I try to avoid LayoutPanels as much as possible for performance reasons, especially on mobile devices.
looks like the CSS did the trick.
Many thanks.
This is how it looks like :
<!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:c="urn:import:com.google.gwt.user.cellview.client">
<ui:with field='res' type='com.vsg.vraweb.client.resource.Resources' />
<ui:with field='text' type='com.vsg.vralang.client.GlobalConstants' />
<!--
CSS Tricks tutorial : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
1) 'display: flex;' - enables a flex context for all its direct children.
2) 'flex-direction: row | row-reverse | column | column-reverse;' - This establishes
the main-axis, thus defining the direction flex items are placed in the flex
container.
3) flex-grow: <number>; - This defines the ability for a flex item to grow if necessary.
-->
<ui:style>
.container {
display: flex;
flex-direction: column;
}
.dataGrid {
width: 100%;
flex-grow: 1;
}
</ui:style>
<g:FlowPanel addStyleNames="{style.container}">
<g:Label ui:field="gridBlurb" addStyleNames="{res.viewStandardStyle.viewTitle}" />
<g:HTMLPanel>
<g:FlowPanel ui:field="criteriaPanel" visible="false" />
<g:FlowPanel>
<g:Button ui:field="refresh">
<ui:text from="{text.refreshButtonCaption}" />
</g:Button>
</g:FlowPanel>
</g:HTMLPanel>
<c:DataGrid ui:field='table' addStyleNames="{style.dataGrid}"/>
<g:HTMLPanel>
<table style="width:100%">
<tr>
<td align='center'>
<c:SimplePager ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:FlowPanel>
</ui:UiBinder>
I' m tying to make a dialog box that contains 3 parts: TextBox, DataGrid and Button. And I'm using DockLayoutPanel like that
<ui:style>
.panel {
width: 600px;
height: 500px;
}
</ui:style>
<g:HTMLPanel addStyleNames='{style.panel}'>
<g:DockLayoutPanel unit="PX">
<g:north size="45">
<g:TextBox>...
</g:north>
<g:south size="45">
<g:Button>...
</g:south>
<g:center>
<g:DataGrid>...
</g:center>
</g:DockLayoutPanel>
</g:HTMLPanel>
Here is my class
public class MyDialogBoxViewImpl extends DialogBox {
interface MyDialogBoxViewImplUiBinder extends
UiBinder<Widget, MyDialogBoxViewImpl> {
}
...
But the problem is that only TextBox is visible.
I'm not sure that it is properly to use DockLayoutPanel in DialogBox, but it is so suitable for my application. So can you help me with my issue and give me some advices how to replace DockLayoutPanel if it will need. Thanks.
Try setting explicitly the size of DockLayoutPanel.
For example:
<g:DockLayoutPanel unit="PX" width="100%" height="100%">
Your size values are "100%", but your unit is "PX". Try changing your unit to "PCT" for percentage width and height
I have a verticalLayoutContainer with a fieldset inside it and a FlowLayoutContainer inside that. When I set scroll mode to ALWAYS on the FlowLayoutContainer , the scroll bar is now hiding some of the fields inside.
Screenshots before and after adding scroll attached .
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:c="urn:import:com.sencha.gxt.widget.core.client" xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
xmlns:form="urn:import:com.sencha.gxt.widget.core.client.form" xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button"
xmlns:icon="urn:import:com.ffobar.widget">
<ui:with type="com.sencha.gxt.core.client.util.Margins" field="nomargins">
<ui:attributes top="0" right="0" bottom="0" left="0" />
</ui:with>
<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="verticalLayoutChildData">
<ui:attributes width="1" height="1" margins="{nomargins}"/>
</ui:with>
<ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="verticalLayoutData">
<ui:attributes width="0.32" height="1"/>
</ui:with>
<c:FramedPanel headerVisible="false">
<container:VerticalLayoutContainer layoutData="{verticalLayoutData}">
<container:child layoutData="{verticalLayoutChildData}">
<form:FieldSet headingText="Cross References" collapsible="true" expanded="true" ui:field="fsXref" >
<container:FlowLayoutContainer scrollMode="ALWAYS" ui:field="gcXref" >
<icon:FixedGrid ui:field="grid"></icon:FixedGrid>
</container:FlowLayoutContainer>
</form:FieldSet>
</container:child>
</container:VerticalLayoutContainer>
</c:FramedPanel>
</ui:UiBinder>
There are text fields added to the grid, these text fields are now covered by the H. scroll.
Before
After
You can either put a padding on the right side of your panel to account for the scroll bar or you can use the scrolling support in VLC which has a method adjustForScroll. However, this always adjusts the content to account for the scrollbar, even if there is no scroll bar.
I overcame this issue by checking if a scroll bar was present on the VLC:
boolean hasScroll = container.getScrollSupport().getMaximumVerticalScrollPosition() > 0;
container.setAdjustForScroll(hasScroll);
I'm using GWT 2.5.1 with uibinder xml for specifying ui layouts.
Being a newbie in this, can't figure out how to specify even a simple layout:
I want the [Somelabel:] and [Button] to take the minimal required place, and [Textbox] to occupy the rest. Tried different approaches: placing them to HorizontalPanel, FlowPanel, even DockLayoutPanel. None of them satisfy my requirements: HorizontalPanel just divides parent container to three equal parts, FlowPanel gives no respect to element width, DockLayoutPanel wants me to manually calculate and specify the width of [Somelabel:] and [Button] and still doesn't work at all.
That is the basic ui layout task and I can't believe that GWT does not have a way to specify what I want without manual pixelwidth calculation. Most different UI tools have the simple way to specify it.
this lays them in equal cells:
<g:HorizontalPanel width="100%">
<g:Label>Somelabel:</g:Label>
<g:TextBox ui:field="someTextBox"/>
<g:Button ui:field="someButton" text="Button"/>
</g:HorizontalPanel>
this lays them in a weird way (whether "float: left" specified for label or not; whether "float: right" specified for button or not):
<g:FlowPanel width="100%">
<g:Label>Somelabel:</g:Label>
<g:TextBox ui:field="someTextBox"/>
<g:Button ui:field="someButton" text="Button"/>
</g:FlowPanel>
this wants me to specify pixels but doesn't even display them:
<g:DockLayoutPanel width="100%" height="90">
<g:east size="30"><g:Label>Somelabel:</g:Label></g:east>
<g:center><g:TextBox ui:field="someTextBox"/></g:center>
<g:west size="50"><g:Button ui:field="someButton" text="Button"/></g:west>
</g:DockLayoutPanel>
[no image because it doesn't display anything]
I'm kinda stuck because the only kind-of-working xml is the HorizontalPanel one and it does not do what I want.
UP: added screenshots and tried "float:" css styles (which didn't change anything).
UP2: got the picture I wanted using LayoutPanel and specifying pixelwidth of each layer.
<g:LayoutPanel width="100%" height="40px">
<g:layer width="100px" left="0">
<g:Label>Somelabel:</g:Label>
</g:layer>
<g:layer left="100px" right="200px">
<g:TextBox ui:field="someTextBox"/>
</g:layer>
<g:layer width="200px" right="0">
<g:Button ui:field="someButton" text="Button"/>
</g:layer>
</g:LayoutPanel>
But the xml looks ugly, forces me to calculate pixels manually, and to specify each width in two places. Can I somehow leave the pixelwidth calculations to framework and just specify "place it there and give it minimum place it wants"?
If you refer to the GWT docs [here][1] it mentions your exact problem. Try using FlowPanel with float : left CSS property as specified.
EDIT :
This worked for me
Ui-Binder
<g:FlowPanel width="100%" addStyleNames="myTable">
<g:FlowPanel addStyleNames="myTableRow">
<g:Label addStyleNames="myTableLabel">Somelabel:</g:Label>
<g:FlowPanel width="100%" addStyleNames="myTableCell">
<g:TextBox ui:field="someTextBox" addStyleNames="myTableInput"/>
</g:FlowPanel>
<g:Button ui:field="someButton" text="Button" addStyleNames="myTableButton"/>
</g:FlowPanel>
</g:FlowPanel>
CSS :
.myTable {
display: table;
width: 100%;
}
.myTableRow {
display: table-row;
}
.myTableLabel {
display: table-cell;
}
.myTableCell {
display: table-cell;
width: 100%;
}
.myTableInput {
width: 100%;
}
.myTableButton {
display: table-cell;
}
Let's say I have Toolbar widget with buttons I'm passing in XML definition. I'd like to have the same toolbar both on top and bottom of the widget I'm creating.
<g:HTMLPanel>
<ns:Toolbar>
<g:Button ui:field="b1Top">1</g:Button>
</ns:Toolbar>
<p>Lorem ipsum</p>
<ns:Toolbar>
<g:Button ui:field="b2Bottom">1</g:Button>
</ns:Toolbar>
</g:HTMLPanel>
This way I need to assign same handlers individualy for each button. Is there any way to define the toolbar in one place without creating new toolbar widget with particular widgets to show?
I hope you understand what I want to achieve. :)
Well you can always create a Ui-Binder for your Toolbar and declare the methods and handlers for the buttons. and then use multiple instances of it.
Toolbar ui-binder
<ns:Toolbar>
<g:Button ui:field="b1Top">1</g:Button>
</ns:Toolbar>
Your ui-binder
<g:HTMLPanel>
<TB:Toolbar />
<p>Lorem ipsum</p>
<TB:Toolbar />
</g:HTMLPanel>
This is not exactly what you've asked, but you can set multiple widgets in the #UiHandler parameters:
#UiHandler( { "b1Top", "b2Bottom" } )
void onButtonClick(ClickEvent event) {
Window.alert("Click !");
}