I Have a GWT Composite to which some other Composites are added dynamically.
I want to make may Parent composite Resize to fit the height of all its child widgets automatically.
i tried setting setHeight("100%") for Composite but this doesn’t work.
any Idea how to accomplish this functionality?
thanks.
EDIT:
final DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
dockLayoutPanel.setStyleName("EntryPanel");
dockLayoutPanel.setSize("142px", "72px");
initWidget(dockLayoutPanel);
final VerticalPanel panel = new VerticalPanel();
panel.setSize("140px", "72px");
chckbxExport = new CheckBox("Export");
putField(CommonPresenter.CONSTANTS.EXPORT, chckbxExport);
dateBox = new DateBox();
dateBox.addValueChangeHandler(new ValueChangeHandler<Date>() {
#Override
public void onValueChange(final ValueChangeEvent<Date> event) {
dateChanged = true;
}
});
panel.add(dateBox);
final ListBox visibility = new ListBox();
final Label lblVisibility = new Label("Visibility:");
LabeledWidget vis = new LabeledWidget(lblVisibility, visibility);
for (int i = 0; i < CommonPresenter.CONSTANTS.VISIBILITIES.length; i++) {
visibility.addItem(CommonPresenter.CONSTANTS.VISIBILITIES[i]);
}
putField(CommonPresenter.CONSTANTS.VISIBILITY, visibility);
panel.add(vis);
panel.add(chckbxExport);
dockLayoutPanel.add(panel);
UPDATE:
Setting Composite width to fill all available Window horizontal space:
final int scrollBarWidth = 25;
// editPanel.setHeight("180px");
setWidth(Window.getClientWidth() - scrollBarWidth + "px");
// editPanel.setStyleName("EditorPanel");
Window.addResizeHandler(new ResizeHandler()
{
public void onResize(ResizeEvent event)
{
int width = event.getWidth();
setWidth(width - scrollBarWidth + "px");
}
});
Here's how to do it generally with HTML+CSS:
Create the parent, and do not set its height (or set it to auto).
Then add the children (just make sure, that you don't use absolute/fixed positioning for the children).
Set the height of the children, if required.
The height of the parent will then be adjusted automatically. This is the same for GWT Composites - just make sure, which CSS (including style attributes) applies to your elements! If unsure, use Firebug.
If you need more specifics, then you'd have to post some code which shows how you construct the parent composite (UiBinder, ...?)
Instead of using "100%" you can get the actual height by Window#getClientHeight(). To handle scenarios where the user resizes the browser, you can use a ResizeHandler.
Try Overriding the Resize()(Your class must extend to ResizeComposite).
In this re-size method set the size you want.
This works you dynamically because every time the window is re-sized this method is called and the values are set accordingly.
Related
I was wondering is there any possibility to get the inner size of a
com.google.gwt.user.client.ui.ScrollPanel
object in GWT? I would like to create a children of the ScrollPanel that fits exactly into the empty space, without activating the scroll bars.
The ScrollPanel is initialized as follows:
[begin update after answer of #Abhijith Nagaraja]
public void onModuleLoad() {
Window.setMargin("0px");
TabLayoutPanel tabs = new TabLayoutPanel(30, Unit.PX);
//attach the tab panel to the body element
RootPanel.get(null).add(tabs);
//set the TabLayoutPanel to full size of the window.
String width = (Window.getClientWidth()) + "px";
String height = (Window.getClientHeight()) + "px";
tabs.setSize(width, height);
//create the scroll panel and activate the scroll bars
ScrollPanel scrollPanel = new ScrollPanel(new Button("a second button"));
scrollPanel.getElement().getStyle().setOverflowX(Overflow.SCROLL);
scrollPanel.getElement().getStyle().setOverflowY(Overflow.SCROLL);
//attach the scroll panel to the DOM
tabs.add(scrollPanel, "tab1");
System.out.println(scrollPanel.getOffsetWidth()); // --> 0
System.out.println(scrollPanel.getOffsetHeight()); // --> 0
}
[end update]
Reason: I want to initialize a dynamic visualization (which requires scrollbars at a later point in time) in such a way that, it looks nice and avoiding to add the ScrollPanel later.
ScrollPanel sp = new ScrollPanel();
...
int innerWidth = sp.getOffsetWidth()- sp.getElement().getScrollWidth();
...
NOTE: You can use the above code only if your scrollPanell is attached to the screen. In other words it should be rendered.
DOM.setStyleAttribute(scrollpanel.getElement(), "maxHeight", mMainHeight + "px");;
The problem is on the drawing by click or resizing browser. I have TabPanel placed with RowData, two TabItems with Chart (Google Vizualization) on one and Table with the same Data on the next. I create them on the page loading.
Then I click on Load Data (button) from DB, I redraw this two:
public void reDraw(final List<Double> slices, final String[] devices)
{
pcPie.draw(createTable(slices,devices),createOptions("По автомобилям"));
tPie.draw(createTable(slices, devices),CreateTableOptions());
}
That's work only for active TabItem and replace the drawing space from behind with this size (400px;200px) in generated HTML and I find that Data isn't changed at the behind section.
Also, when I resized the browser, Charts and Tables aren't resizing. I've tryed to use some of Layout, they don't work. May be I don't understand exactly how can use them correctly.
So,
How can I resize my Charts and Tables correct in the both of the
section (active and behind)?
How can I resize my Charts and Tables
on the browser resizing events?
Our first problem came from this: when you use the TabPanel component with some TabItems, behind TabItems aren't being created exactly, and you can not redraw them, cause object isn't created. So we change our code in activated section:
public void run() {
tpLineCharts.setBorders(true);
TabItem tiGraph = new TabItem("График");
tableData = createTable();
lcLines = new LineChart(tableData,
createOptions("По компании"));
lcLines.addSelectHandler(createSelectHandler(lcLines));
tiGraph.setLayout(new FitLayout());
tiGraph.add(lcLines);
tpLineCharts.add(tiGraph);
TabItem tiTable = new TabItem("Таблица");
tLine = new Table(tableData, CreateTableOptions());
tiTable.add(tLine);
tiTable.addListener(Events.Select, new Listener<BaseEvent>()
{
#Override
public void handleEvent(BaseEvent be) {
tLine.draw(tableData);
}
});
tpLineCharts.add(tiTable);
}}, CoreChart.PACKAGE, Table.PACKAGE);
where tableData - AbstractTableData. After this modification we can redraw our components:
public void reDrawLineChart(final ArrayList <Double> sumCompanyTraffic,
final ArrayList<Integer> axisName, String title)
{
tableData =createTable(sumCompanyTraffic, axisName);
tLine.draw(tableData, CreateTableOptions());
lcLines.draw(tableData, createOptions(title));
}
Also you need to add this options:
private Options createOptions(String title)
{
Options options = Options.create();
options.setTitleX("Период");
options.setTitle(title);
if(tpLineCharts.isRendered())
options.setSize(tpLineCharts.getWidth(true),
tpLineCharts.getHeight(true));
return options;
}
This is a question about which general approach to take, so I haven't included any code.
Requirement:
I need to create a page within a multi-page editor that has two vertical sections in it. The top section has a tree and the bottom section has a text field. The tree and text field should fill their respective sections. Each section should scroll independently and there should be a splitter in between. When the editor is opened I want the visible area of the editor to be divided among the two sections based on some ratio I provide. Then when the editor is resized, the two sections will adjust proportionally to maintain the ratio and fit the page. This way there won't be scroll bars on the editor page itself, just the two sections.
Proposed Solution:
My idea was to add a SashForm to the editor page and set the size of the SashForm to be the same as the editor's visible area. Then I'd add a resize listener to the editor page and adjust the size of the SashForm so that it stays in sync with the page. However, I can't find a way to get the editor's visible area. So when I add the SashForm it just makes each section big enough to fit its data and adds a scroll on the editor page itself.
Is it possible to meet my requirement?
Success! The key was to listen for resize events on the ScrolledForm. I've only tested on Fedora but I'll take a look on Windows soon. The only thing that bothers me is that the use of the buffer constants seems a little hacky.
/**
* Form page that contains a sash form and a button. The sash form is dynamically sized to ensure
* that it always fills the available space on the page.
*/
public class SashFormDemoPage extends FormPage
{
/** Horizontal buffer needed to ensure that content fits inside the page */
private static final int HORIZONTAL_BUFFER = 8;
/** Vertical buffer needed to ensure that content fits inside the page */
private static final int VERTICAL_BUFFER = 12;
/** Percentages of the sash form occupied by the tree and text box respectively */
private static final int[] SASH_FORM_WEIGHTS = new int[] {30, 70};
/**
* Constructor
*
* #param editor parent editor
*/
public SashFormDemoPage(ComponentEditor editor)
{
super(editor, "sashFormDemoPage", "Demo");
}
/**
* {#inheritDoc}
*/
#Override
protected void createFormContent(IManagedForm managedForm)
{
// Set page title
ScrolledForm scrolledForm = managedForm.getForm();
scrolledForm.setText("SashForm Demo");
// Set page layout and add a sash form
final Composite parent = scrolledForm.getBody();
parent.setLayout(new GridLayout());
final SashForm sashForm = new SashForm(parent, SWT.VERTICAL);
// Add a tree as the top row of the sash form and fill it with content
FormToolkit toolkit = managedForm.getToolkit();
int style = SWT.SINGLE | SWT.H_SCROLL | SWT.V_SCROLL | SWT.BORDER;
Tree tree = toolkit.createTree(sashForm, style);
for (int i = 0; i < 40; i++) {
TreeItem parentNode = new TreeItem(tree, SWT.NONE);
parentNode.setText("parent-" + i);
for (int j = 0; j < 3; j++) {
TreeItem childNode = new TreeItem(parentNode, SWT.NONE);
childNode.setText("child-" + i + "-" + j);
}
}
// Add a text box as the bottom row of the sash form and fill it with content
style = SWT.MULTI | SWT.V_SCROLL | SWT.WRAP | SWT.BORDER;
Text text = toolkit.createText(sashForm, null, style);
String message = "";
for (int i = 0; i < 100; i++) {
message += "This is a test of the layout demo system. This is only a test. ";
}
text.setText(message);
// Add button below sash form
final Button button = toolkit.createButton(parent, "Test", SWT.NONE);
// Add resize listener to sash form's parent so that sash form always fills the page
parent.addControlListener(new ControlListener() {
#Override
public void controlMoved(ControlEvent e)
{
// Stub needed to implement ControlListener
}
#Override
public void controlResized(ControlEvent e)
{
GridData data = new GridData();
Point size = parent.getSize();
data.widthHint = size.x - HORIZONTAL_BUFFER;
data.heightHint = size.y - button.getSize().y - VERTICAL_BUFFER;
sashForm.setLayoutData(data);
}
});
// Set sash form's weights and pack its parent so that the initial layout is correct
sashForm.setWeights(SASH_FORM_WEIGHTS);
parent.pack();
}
}
Why set the size of the SashForm explicitly? Why not just add it to the parent Composite of the editor? The parent Compositehas a FillLayout and thus the SashForm with fill the editor area automatically.
I'm using GWT 2.4. I want to construct content sections using the StackLayoutPanel widget. Howevr, I'm having trouble sizing the widget vertically to take up as much space as possible. I'm discovering
p.setHeight("100%");
doesn't actually do anything. Does anyone have any advice for calculating the proper height for the StackLayoutPanel so that it takes up as much space as possible but not more? Here's the code I'm using ...
final StackLayoutPanel p = new StackLayoutPanel(Unit.EM);
p.setHeight("100%");
int i=0;
for (final Node node : nodes) {
if (node != null) {
final Widget childWidget = getWidget(node.getChildren());
if (childWidget != null) {
final String sectionTitle = node.getAttributes().get(NAME_ATTR) != null ? node.getAttributes().get(NAME_ATTR).getValue() : "Section " + (i+1);
p.add(childWidget, sectionTitle, 2);
} // if
} // if
i++;
} // for
return p;
Here is the code that ultimately calls the StackLayoutPanel. Notice that the parent widget, "ScrollPanel", sets height="100%", but that has no effect on causing the StacklayoutPanel to fill out all of its space.
final ScrollPanel childpanel = new ScrollPanel();
childpanel.setHeight("100%");
// Below, a StackLayoutPanel is returned as the child widget
final Widget childWidget = xmlToHtmlService.getWidget(tabNode.getChildren());
childpanel.add(childWidget);
Thanks, -
The best way to size a LayoutPanel of any type is to add it to another LayoutPanel and set its size from the parent panel. Setting the size directly never works like I want it to.
This a pretty different setup from the other GWT widgets, which just want to be added and sized. You can read about it at http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels .
There's a lot to learn about LayoutPanels. Once you've got them set up properly, though, they're very natural to use, and you can do a lot of precision layout with them.
How to edit SWT table Values without Using Mouse Listeners?
Do the TableEditor snippets in the below link help?
SWT Snippets
The first example in the TableEditor section uses a SelectionListener on the table (unlike the second example which uses a MouseDown event you mentioned you don't want)
You could perhaps make use of the TraverseListener or KeyListener too to help you achieve what you want.
final int EDITABLECOLUMN = 1;
tblProvisionInfo.addSelectionListener(new SelectionAdapter() {
#Override
public void widgetSelected(SelectionEvent e) {
// Clean up any previous editor control
final TableEditor editor = new TableEditor(tblProvisionInfo);
// The editor must have the same size as the cell and must
// not be any smaller than 50 pixels.
editor.horizontalAlignment = SWT.LEFT;
editor.grabHorizontal = true;
editor.minimumWidth = 50;
Control oldEditor = editor.getEditor();
if (oldEditor != null)
oldEditor.dispose();
// Identify the selected row
TableItem item = (TableItem) e.item;
if (item == null)
return;
// The control that will be the editor must be a child of the
// Table
Text newEditor = new Text(tblProvisionInfo, SWT.NONE);
newEditor.setText(item.getText(EDITABLECOLUMN));
newEditor.addModifyListener(new ModifyListener() {
public void modifyText(ModifyEvent me) {
Text text = (Text) editor.getEditor();
editor.getItem()
.setText(EDITABLECOLUMN, text.getText());
}
});
newEditor.selectAll();
newEditor.setFocus();
editor.setEditor(newEditor, item, EDITABLECOLUMN);
}
});
Here tblProvision is the name of your table. you can just now edit Your table by clicking on it. I have Declare EDITABLECOLUMN. this is the column that u want to edit.
If you can use JFace as well and not just pain SWT, have a look at the JFace Snippets, especially
Snippet036FocusBorderCellHighlighter - Demonstrates keyboard navigation by highlighting the currently selected cell with a focus border showing once more the flexibility of the new cell navigation support
Snippet034CellEditorPerRowNewAPI - Demonstrates different CellEditor-Types in one COLUMN with 3.3-API of JFace-Viewers
You can get or set the value of a item, for example:
Table table = new Table(parent, SWT.NONE);
TableItem item = new TableItem(table, SWT.NONE);
item.setText("My new Text");
I suggest you to us TableViewer, it is very powerful table which it you can use databinding very easy too.