Inside our (GXT)HorizontalPanel are two components.
I want to set the width for the first component to 100%. In GWT there is a method like HorizontalPanel#setCellWidth (see Sizing a HorizontalPanel cell). But in GXT there is not method like that.
We use GXT 2.3.1 and I DON'T want to use a GWT HorizontalPanel. It has to be a GXT HorizontalPanel (please don't ask why ;-))
I found a solution for my problem. Here is some code that works for me.
public class HPanel extends HorizontalPanel {
public HPanel(){
Widget widget1 = new Widget();
Widget widget2 = new Widget()
TableData tableData = new TableData();
tableData.setWidth("100%");
setLayoutData(widget1, tableData);
}
}
You can apply CSS style.
Java
widget.setStyleName("myStyle");
css:
.myStyle{
width:100%;
}
Related
Edit
Since no one has responded to my original question I think it is worthwhile adding a description of what I am attempting to accomplish, in addition to the existing description of how I have attempted to achieve my goal:
My objective is to create a DataGrid that will resize according to any change in size of its container. This is not difficult to do, but I have an additional requirement, which is to have Panel widgets above and below the DataGrid; these two Panel widgets will contain widgets that are fixed in size (e.g., a row of buttons or text input widgets). My expectation was that a HeaderPanel would be perfect for this, but this doesn't seem to work (as can be seen in my original question, below). So ... an alternative to my original question ("why doesn't this work") is: what is the best way to implement this requirement?
My original question:
I have a DataGrid in the content area of a HeaderPanel, but the detail lines in the DataGrid are not being displayed (the DataGrid column headings are showing, however). Is there an issue with using a DataGrid in the content area of a HeaderPanel? Or is this a simple misuse of the widgets? I'm adding the HeaderPanel to the RootLayoutPanel, which should provide the necessary resize notification (I think). Here is my UiBinder code:
<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'>
<g:HeaderPanel>
<g:SimplePanel/>
<g:ResizeLayoutPanel>
<c:DataGrid ui:field='dataGrid'/>
</g:ResizeLayoutPanel>
<g:HorizontalPanel>
<g:Button
ui:field='addRecordButton'
text='Add Record'/>
<g:Label ui:field='numberOfRecordsLabel'/>
</g:HorizontalPanel>
</g:HeaderPanel>
</ui:UiBinder>
and here is the Java code:
public class TempGWT implements EntryPoint {
#UiField
Button addRecordButton;
#UiField
DataGrid<Record> dataGrid;
#UiField
Label numberOfRecordsLabel;
private ArrayList<Record> _recordList;
interface TempGWTBinder extends UiBinder<Widget, TempGWT> {
}
private static class Record {
private String _field1;
}
#Override
public void onModuleLoad() {
_recordList = new ArrayList<Record>();
TempGWTBinder binder = GWT.create(TempGWTBinder.class);
Widget widget = binder.createAndBindUi(this);
Column<Record, String> field1Column = new Column<Record, String>(new TextInputCell()) {
#Override
public String getValue(final Record record) {
return record._field1;
}
};
dataGrid.addColumn(field1Column, "Field 1");
RootLayoutPanel.get().add(widget);
}
#UiHandler("addRecordButton")
public void onAddRecordButtonClick(final ClickEvent event) {
Record record = new Record();
record._field1 = "Record " + (_recordList.size() + 1);
_recordList.add(record);
dataGrid.setRowData(_recordList);
numberOfRecordsLabel.setText("Records:" + _recordList.size());
}
}
I've attempted to trace the execution and, although I'm not certain, it looks as though the following happens when I change the size of the browser window and the "resize" request is received by the DataGrid (I've skipped some of the "unimportant" methods):
DataGrid#onResize
HeaderPanel#forceLayout
ScrollPanel#onResize
The DataGrid object contains a HeaderPanel, which contains the headings for the DataGrid and a ScrollPanel. I don't know whether this is the key to the problem, but the ScrollPanel in the DataGrid's HeaderPanel contains a DataGrid$TableWidget object, and TableWidget does not implement RequiresResize; the ScrollPanel#onResize method only sends the resize to its child if the child implements RequiresResize.
The Tables and Frames section of the GWT Developer's Guide makes it clear that I just needed to use a width/height of 100% for the DataGrid! Like so:
<c:DataGrid
ui:field='dataGrid'
width='100%'
height='100%'/>
I need anyone to tell me how to center Grid inside the contentpanel.
I created content panel width 100% and the grid width is 50% and I need to center the grid inside the contentpanel.
thank you in advance,
You can use CenterLayoutContainer widget.
Sample code:
#Override
public Widget asWidget() {
//Your panel
ContentPanel panel = new ContentPanel();
//Сontainer with your content
CenterLayoutContainer container = new CenterLayoutContainer();
container.add(yourGrid);
//Put container into panel
panel.setWidget(container);
return panel;
}
Have a look at CenterLayoutContainer: http://www.sencha.com/examples/#ExamplePlace:centerlayout
This is for the new version, 3.0. The older 2.2.5 also has an analogous layout type.
Here is a miminal UI demonstrating my problem. It is the usual UIBinder boilerplate, plus the three widgets: TabLayoutPanel, ScrollPanel, TextArea. I want the TextArea to take up all the available space of the tab, and I want it to have a scroll bar if it can't fit. But this code yields a TextArea that is two lines tall. How do you fix this? Why is it ignoring the height?
In the ui.xml file:
<!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>
.scrollPanel {
height: 100%;
}
.textArea {
height: 100%;
}
</ui:style>
<g:TabLayoutPanel barHeight="20" barUnit='PX'>
<g:tab>
<g:header>Text Area</g:header>
<g:ScrollPanel styleName='{style.scrollPanel}'>
<g:TextArea ui:field='textArea' styleName='{style.textArea}'></g:TextArea>
</g:ScrollPanel>
</g:tab>
</g:TabLayoutPanel>
</ui:UiBinder>
And in the Java file:
package com....client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.ResizeComposite;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.Widget;
public class BugDemoLayout extends ResizeComposite {
private static BugDemoLayoutUiBinder uiBinder = GWT.create(BugDemoLayoutUiBinder.class);
interface BugDemoLayoutUiBinder extends UiBinder<Widget, BugDemoLayout> {}
#UiField TextArea textArea;
public BugDemoLayout() {
initWidget(uiBinder.createAndBindUi(this));
StringBuilder junk = new StringBuilder();
for (int i=1; i<300; i++) {
junk.append("Line " + i + "\n");
}
textArea.setText(junk.toString());
}
}
The module file simply adds the ui to the root:
public void onModuleLoad() {
BugDemoLayout bd = new BugDemoLayout();
RootLayoutPanel.get().add(bd);
TabLayoutPanel and ScrollPanel both implement the RequireResize interface and automatically resize to the available space using absolute positioning.
You specified a relative height (100%) for the content inside the ScrollPanel. This doesn't work because the size in the parent isn't explicitly set (see here for more details).
So you can either:
Set an explicit size in the ScrollPanel in pixel and then set the Textarea height to 100%.
Extend the TextArea and implement the RequiresResize interface (implement the onResize() method where you set the height/width of the TextArea
The second approach is the cleaner recommend one as it also resizes the TextArea when you resize the browser window.
It would look something like that:
TextArea:
public class ResizableTextArea extends TextArea implements RequiresResize {
public void onResize() {
int height = getParent().getOffsetHeight();
int width = getParent().getOffsetWidth();
setSize(width+"px",height+"px");
}
}
You have to put your TabLayoutPanel into a RootLayoutPanel. This will ensure that there is an unbroken chain of LayoutPanels or Widgets that implement RequiresResize/ProvidesResize interfaces all the way down to your custom TextArea.
You're placing a TextArea inside of a ScrollPanel, but the ScrollPanel isn't necessary as the TextArea already has scrollability built-in. If you take out the ScrollPanel, it should work fine (in my testing it works).
I'm going to skip the sizing part of this question, but answer the scrolling part (as that never seemed to be resolved?).
I had the same problem, so I placed a ScrollPanel inside the tab, and nested an HTMLPanel within it, sized to 100% the width and height of that parent ScrollPanel. Then, I used panel.add( new HTML("my text" ) ); to populate it.
I also replaced "\n" with "<br />" in my actual long text string. (That was applicable for my needs).
Now, that's not quite the same thing as a TextArea, of course, but it does allow you to display long running scrolling text inside of a TabLayoutPanel.
I've been working with GWT for awhile, I can't find a way to integrate it with a preexisting website which is a real downer. My page content is already generated for me using jsp, like:
<div id='A'></div>
<div id='B'></div>
etc.
there is no way for me to do something like this though:
public void onModuleLoad() {
SimplePanel spA = new SimplePanel(
Document.getElementById("A"));
spA.add(new Label("hello"));
SimplePanel spB = new SimplePanel(
Document.getElementById("B"));
spB.setWidth("200px");
etc ..
}
seems like there's no way to just wrap a pre-existing element. Is this true, or am I missing how to do this? I need be able to wrap a bunch of elements like this, to manipulate them later on. I see TextBox, Button, a few other classes have wrap() methods, however nothing like that exists for elements,
Thanks
There is a way to wrap existing DOM elements, like Label's wrap() method. For example:
Label label = Label.wrap(DOM.getElementById("A"));
label.setText("Foo!");
Other GWT classes can wrap DOM elements too, like Button, and CheckBox using its constructor.
Use HTMLPanel:
class MyPanel extends HTMLPanel {
private SimplePanel a = new SimplePanel();
private SimplePanel b = new SimplePanel();
public MyPanel() {
super("<div id="a"></div><div id="b"></div>);
addAndReplaceElement(a, "a");
addAndReplaceElement(b, "b");
}
}
I have a couple of composite widgets which all have dymaincally sizing object within them.
When I instantiate a composite widget I would like it to fill its container as a percentage, say 80% for example.
Each of the objects within the widget will grow to fit inside the composite regardless of composites size but the composite itself wont grow as a percentage of its container.
Is this even possible? I have tried the .setWidth() method but this won't recognise a % asd an argument.
I am not setting the size within the composite widget class.
I have a calling class that instantiates the composite widget and then calls the setWidth() method on the new object.
I will try out your method and if it works then apply it to my problem. I will post again once I have some more information.
Thankyou for your help :-)
Ofcourse it is possible.Composite setWidth() method recognizes % also.Can you give me the sample code you are using? Make sure that calling of setWidth() method must be after the initwidget() call of your composite.try like this
public class Widget1 extends Composite{
private VerticaPanel panel=new VerticalPanel();
public Widget1(){
initWidget(panel);
setWidth("80%");
panel.add(new Widget2());
}
}
public class Widget2 extends Composite{
private VerticaPanel panel=new VerticalPanel();
public Widget2(){
initWidget(panel);
setWidth("100%");
}
}
Here is my test composite class:
**class CompositePane extends Composite {
//Define a panel that contains everything
private VerticalPanel compositePanel = new VerticalPanel();
private Button button1 = new Button("Button1");
public CompositePane(){//Start StatusPane constructor
compositePanel.add(button1);
initWidget(compositePanel);
setWidth("100%");
addStyleName("compositePanel");
}//End of StatusPane constructor
}//End of StatusPane class**
Here is my style attached to this object that shows the edges of the composite object:
.compositePanel{
**border: 5px solid black;
}**
When using a set value of pixels the border expands as expected.
When using 100%, it sit tightly around the button, where I need it to touch the outside edge of its container.
Thanks.Where you are adding this CompositePanel. CompositePanel.setWidth("100%") method makes this compositePanel to use it parents 100% width.So in your case its parent width is less.Try the following example .You will understand that what to do in your code.Now borders width will be 800px.
VerticalPanel parentPanel=new VerticalPanel();
parentPanel.setWidth("800");
parentPanel.add(new CompositePanel());
RootPanel.get().add(parentPanel);