I'm trying to use the GWT grid component in uibinder. It works fine until I want to set the width of the columns. The following is what I've tried to do but it doesn't seem to work.
<g:Grid width="100%">
<g:row>
<g:customCell width="20%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
<g:customCell width="80%">
<g:FlowPanel width="">
</g:FlowPanel>
</g:customCell>
</g:row>
</g:Grid>
You can write some java code in order to do that, example:
grid.getColumnFormatter().setWidth(0, "10%");
grid.getColumnFormatter().setWidth(1, "10%");
Only styleName is taken into account on g:row, g:cell and g:customCell elements.
If you can (i.e. if your grid content is mostly static), avoid using Grid and prefer an HTMLPanel containing an HTML <table>, this gives you much more flexibility.
http://code.google.com/p/google-web-toolkit/source/browse/tags/2.4.0/user/src/com/google/gwt/uibinder/elementparsers/GridParser.java
Related
I have a customcell in my xml file, It contains vertical panel which I have hide, But it cause some UI design issue as CustomCell is not hidde. Can anyone tell me how I can hide my customcell?. Thanks in advance.
<g:customCell styleName="width:15%;" ui:field="parentCell"
visible="false">
<g:VerticalPanel visible="false" ui:field="SortVPanel">
<g:Grid width="100%">
<g:row>
<g:customCell >
<g:Label styleName="float-left" wordWrap="false" width="65px" >
<ui:msg key="lblSort"> Sort By </ui:msg></g:Label>
</g:customCell>
<g:customCell styleName="cell-width83">
<c:ComboBoxComponent />
</g:customCell>
</g:row>
</g:Grid>
</g:VerticalPanel>
</g:customCell>
I want to hide the above customcell, which UiField value is ui:field="parentCell"
The g:customCell tag isnt a dom element, but a marker for the g:Grid tag to know which items are cells vs rows. This means you can't add html attributes to it. You also can't give it a ui:field, since it isn't an object at all.
Instead, you put these on the child Widget which lives inside the g:customCell tag, or from your Java code, you can call grid.getCellFormatter() and use the methods there to further format the cell which wraps the widget.
I've made layout with simple gwt, but now I want to make label and text field using gxt 3.0.1.
Gxt provides FieldLabel field. Label on the left than TextField on the right.
Can I make it to be, text field than label on right side of the text field.
Current code is `
<g:HorizontalPanel ui:field="hpOne" width="1">
<g:Cell verticalAlignment="ALIGN_MIDDLE">
<form:FieldLabel text="{message.lblTestGroupName}" ui:field="lblTestGroupName">
<form:widget>
<form:TextField ui:field="tbTestGroupName"/>
</form:widget>
</form:FieldLabel>
</g:Cell>
</g:HorizontalPanel>
`
I am not sure if we are on the same plate, but please try this:
<g:HorizontalPanel ui:field="hpOne" width="1">
<form:TextField ui:field="tbTestGroupName" />
<form:FieldLabel text="{message.lblTestGroupName}" ui:field="lblTestGroupName" />
</g:HorizontalPanel>
Lemme know if you are looking for this.
I need a Scroll bar for GWT CellTable. The following is my ui.xml,
<gwt:SplitLayoutPanel>
<gwt:west size="200">
<gwt:VerticalPanel>
<gwt:HTMLPanel>
<table>
<tr>
<td>
<gwt:Label>xxxx</gwt:Label>
</td>
</tr>
<tr>
<td>
**Here i need a CellTable with Vertical Scrollbar**
</td>
</tr>
</table>
</gwt:HTMLPanel>
</gwt:VerticalPanel>
</gwt:west>
<gwt:center>
<gwt:VerticalPanel />
</gwt:center>
</gwt:SplitLayoutPanel>
I tried with ScrollPanel --> VerticalPanel --> CellTable. But i'm not getting ScrollBar. Can anyone help me?
Thanks in advance,
Gnik
What's the point in using of the VerticalPanel in this situation? Replace it by the ScrollPanel in your UiBinder xml-file. Set the width and the height in pixels for this ScrollPanel(this is very important!) and put in it your CellTable:
<g:ScroollPanel pixelSize="200, 400">
<c:CellTable ui:field="myCellList" />
</g:ScroollPanel>
200 - the width of panel in pixels, 400 - height.
At that the size of the CellTable list must necessarily larger than the size of ScrollPanel. Otherwise, a scroll does not appear.
Or set the width in 100% if you need a vertical scrolling:
<g:ScrollPanel width="100%" height ="400px">
If you are using Gwt 2.4, then replacing the CellTable Object with a DataGrid Object will give you the needed result with no need for a Scrollapanel.
You can see the difference between the celltable and the datagrid in the gwt Showcase (under cell widgets).
The below code worked for me -
<g:HTMLPanel>
<g:VerticalPanel>
<g:TabLayoutPanel barHeight="2" barUnit="EM" width="790px"
height="500px">
<g:tab>
<g:header>Sample</g:header>
<g:DockLayoutPanel>
<g:center>
<g:ScrollPanel>
<p1:CellTable ui:field="cellSampleTable" />
</g:ScrollPanel>
</g:center>
</g:DockLayoutPanel>
</g:tab>
</g:TabLayoutPanel>
</g:VerticalPanel>
</g:HTMLPanel>
I am using gwt 2.3.I am using UI binder in this. I want to create grid in this by using UIBinder. For this I have written this code.
<g:Grid ui:field='mygrid' addStyleNames='{style.panel}'
cellSpacing='10'>
<g:row>
<g:customCell>
<g:Label text="11" styleName="{style.label}" />
</g:customCell>
<g:customCell>
<g:Label text="22" styleName="{style.label}" />
</g:customCell>
</g:row>
<g:row>
<g:customCell>
<g:Label text="33" styleName="{style.label}" />
</g:customCell>
<g:customCell>
<g:Label text="44" styleName="{style.label}" />
</g:customCell>
</g:row>
</g:Grid>
Now here my data of grid is static.Now In case if my data comes from server side & depending on that data I want to create a Grid using UIbinder. How can this possible ??
One another case.There is form.In that from number of controls comes from data base.
So How can UIBider support to create this form.As number of control may vary each time
So I want to know is it possible to use UIBinder in case to create User Interface depending on run time data.
Any suggestions or example appreciated.
UiBinder is "cross compiled" to JavaScript and HTML code. Once that is done you cant modify it. There is now way to do something like send your XML syntax to client and then it creates a grid.
However it is possible that you add new Rows in your "code behind".
For your second question: I have no Idea what you mean :P
Yes, you can add data into UIBinder from Java. When you created UIBinder in Eclipse it also created .java file for this XML. Edit this corresponding java file and add something like this:
public class MyGridSample extends Composite {
// uiBinder interface declaration...
private static MyGridSampleUiBinderUiBinder uiBinder = GWT.create(MyGridSampleUiBinder.class);
interface MyGridSampleUiBinder extends UiBinder<Widget, MyGridSample > {
}
// annotation to get ui-field into code
#UiField
Grid mygrid;
public MyGridSample () {
setWidget(uiBinder.createAndBindUi(this));
// sets cell 0,0 with label
mygrid.setWidget(0, 0, new Label("cell 0"));
}
}
GWT is client side framework and UIBinder is precompiled as javascript files - they are served as static files. You should make a Webservice call to get data into this template.
...........
.........
<g:row styleName="OddNumberRow">
....
....
</g:row>
<g:row styleName="EvenNumberRow">
....
....
</g:row>
...........
...........
The above approach is not working. In other words, the "tr" elements in the generated html do not have any class names at all. A back up option would be to inject styles into these rows from the UiBinder's constructors (using getRowFormatter.addStyleName) but
I do not want to take that route for now.(I wanna try to reserve the code that goes into the UiBinder java class for event handling purposes only. )
Any thoughts/pointers would be much appreciated.
Note: Cross posted at https://groups.google.com/forum/?fromgroups#!topic/google-web-toolkit/yGRUkpcpBzU
thanks
You are right, this does not work. I have also tried adding the style to g:customCell, which does not work either.
The only way I can think of is using a SimplePanel to wrap your content in:
<g:row>
<g:customCell>
<g:SimplePanel width="100%" height="100%" styleName="OddNumberRow">
<g:Label>Content</g:Label>
</g:SimplePanel>
</g:customCell>
</g:row>
<g:row>
<g:customCell>
<g:SimplePanel width="100%" height="100%" styleName="EvenNumberRow">
<g:Label>Content</g:Label>
</g:SimplePanel>
</g:customCell>
</g:row>
It looks like GWT has been updated to understand styleName=foo directly on <gwt:cell> and <gwt:row> elements.
Your example code should now do what you expect :)