GXT ToolBar is scrolled - gwt

I'm developing a simple GXT widget - it's a TreePanel with a ToolBar added using setTopComponent.
The problem is that as soon as the tree is large enough so that it can be scrolled, the scroll-bar doesn't scroll the tree only, but scrolls the ToolBar as well.
What should be change so that ToolBar remains on the top of page, and only the tree is scrolled.
public class TreePanelExample extends LayoutContainer {
#Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
Folder model = getTreeModel();
TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);
final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
tree.setDisplayProperty("name");
tree.setAutoLoad(true);
ToolBar toolBar = new ToolBar();
toolBar.setBorders(true);
toolBar.add(new Button("Dummy button", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Info.display("Dummy button", "I'm so dumb!");
}
}));
ContentPanel panel = new ContentPanel();
panel.setHeaderVisible(false);
panel.setCollapsible(false);
panel.setFrame(false);
panel.setAutoWidth(true);
panel.setAutoHeight(true);
// setting fixed size doesn't make any difference
// panel.setHeight(100);
panel.setTopComponent(toolBar);
panel.add(tree);
add(panel);
}

The problem is that
TreePanelExample extends LayoutContainer
while instead it should extend Viewport.
Additionally I shouldn't have used
panel.setAutoWidth(true);
panel.setAutoHeight(true);
Plus it is necessary to add the main panel using
new BorderLayoutData(LayoutRegion.CENTER);
Here is the complete solution:
public class TreePanelExample extends Viewport {
public TreePanelExample() {
super();
setLayout(new BorderLayout());
Folder model = getTreeModel();
TreeStore<ModelData> store = new TreeStore<ModelData>();
store.add(model.getChildren(), true);
final TreePanel<ModelData> treePanel = new TreePanel<ModelData>(store);
treePanel.setDisplayProperty("name");
treePanel.setAutoLoad(true);
ToolBar toolBar = new ToolBar();
toolBar.setBorders(true);
toolBar.add(new Button("Dummy button", new SelectionListener<ButtonEvent>() {
public void componentSelected(ButtonEvent ce) {
Info.display("Dummy button", "I'm so dumb!");
}
}));
ContentPanel panel = new ContentPanel();
panel.setBodyBorder(false);
panel.setHeaderVisible(false);
panel.setTopComponent(toolBar);
panel.setLayout(new FitLayout());
panel.add(treePanel);
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(5, 5, 5, 5));
centerData.setCollapsible(true);
panel.syncSize();
add(panel, centerData);
}

Related

How to create a toolbar inside viewpart (Not use plugin.xml)

I Created a ToolItem "Save As" like image above, But it not display at toolbar position. So how to create a toolbar inside viewpart (Not use plugin.xml)
IMAGE EXAMPLE
This is my code Create Toolbar:
public void createToolbar(Composite parent) {
// Create composite Toolbar and set layout
toolBarComposite = new Composite(parent, SWT.NONE);
gridLayout = new GridLayout(1, false);
toolBarComposite.setLayout(gridLayout);
gridData = new GridData(SWT.RIGHT, SWT.NONE, true, false);
toolBarComposite.setLayoutData(gridData);
// Create Toolbar
gridData = new GridData(SWT.RIGHT, SWT.NONE, true, false);
toolBar = new ToolBar(toolBarComposite, SWT.FLAT);
toolBar.setLayoutData(gridData);
// Create Item
item = new ToolItem(toolBar, SWT.PUSH);
item.setImage(SAVE_IMAGE);
item.setToolTipText("Save (Ctrl + S)");
item.setEnabled(true);
item.addSelectionListener(new SelectionAdapter() {
private static final long serialVersionUID = -102212312093090431L;
#Override
public void widgetSelected(SelectionEvent e) {
}
#Override
public void widgetDefaultSelected(SelectionEvent e) {
}
});
}
Thank for your advance !
You're going to have to use contributions on the view site's action bar.
Example
// Copy-pasted from an existing project, so the code can be made nicer
private void createAdditionalToolbarActions()
{
getViewSite().getActionBars().getToolBarManager().add(new GroupMarker("additions")); //$NON-NLS-1$
getViewSite().getActionBars().getToolBarManager().prependToGroup("additions", new SaveAction()); //$NON-NLS-1$
getViewSite().getActionBars().updateActionBars();
}
The method getViewSite is part of ViewPart. Call this after the contents of the view have been created.
The SaveAction must implement IAction or IContributionItem. For convenience, just extend the SaveAction from org.eclipse.jface.action.Action and call methods such as setImageDescriptor and setToolTipText.
Do all your business login in the run override.

GXT 3 Grid height and scroll

My environment is: GWTP 0.7, GWT 2.4.0, GXT 3.0.1. This question is somehow related to GXT 3 grid scrolling issue but with the exception that the solution there does not work for me.
My case:
public abstract class AbstractGridView extends ViewImpl implements AbstractGridPresenter.MyView {
protected final VerticalLayoutContainer cont = new VerticalLayoutContainer();
protected final VerticalLayoutData toolBarData = new VerticalLayoutData(1, -1);
protected final VerticalLayoutData contentData = new VerticalLayoutData(1, -1); //grid's layout config
protected final ToolBar toolBar = new ToolBar();
protected final TextButton addItemButton = new TextButton(ADDBUTTON_TEXT);
#Inject
protected AbstractGridView() {
toolBar.add(addItemButton);
cont.add(toolBar, toolBarData);
}
public Widget asWidget() {
return cont;
}
}
public class DepartmentsView extends AbstractGridView implements DepartmentsPresenter.MyView {
private final Grid<Department> grid;
private final ColumnModel<Department> model;
private final List<ColumnConfig<Department, ?>> config = new ArrayList<ColumnConfig<Department,?>>();
private final ListStore<Department> store = new ListStore<Department>(PROPS.key());
#Inject
public DepartmentsView() {
super();
config.add(new ColumnConfig<Department, Long>(PROPS.id()));
config.get(config.size() - 1).setHeader(IDCOLUMN_HEADER);
config.add(new ColumnConfig<Department, String>(PROPS.name()));
config.get(config.size() - 1).setHeader(NAMECOLUMN_HEADER);
config.add(new ColumnConfig<Department, String>(companyNameProvider));
config.get(config.size() - 1).setHeader(COMPANYCOLUMN_HEADER);
model = new ColumnModel<Department>(config);
grid = new Grid<Department>(store, model);
grid.getView().setAutoFill(true);
filters.initPlugin(grid);
filters.setLocal(true);
filters.addFilter(idFilter);
filters.addFilter(nameFilter);
filters.addFilter(companyFilter);
cont.add(grid);
}
}
All these are injected into BorderLayoutContainer in BaseView:
public class BaseView extends ViewImpl implements BasePresenter.MyView {
private final Viewport viewPort = new Viewport();
private final BorderLayoutContainer borderContainer = new BorderLayoutContainer();
private final ContentPanel west = new ContentPanel();
private final ContentPanel north = new ContentPanel();
private final ContentPanel center = new ContentPanel();
private final BorderLayoutData westData = new BorderLayoutData(200);
private final BorderLayoutData northData = new BorderLayoutData();
private final BorderLayoutData centerData = new BorderLayoutData();
#Inject
public BaseView() {
borderContainer.setBorders(true);
west.setResize(true);
center.setResize(false);
center.setHeight("auto");
north.setResize(false);
westData.setCollapsible(false);
westData.setCollapseMini(false);
westData.setMargins(new Margins(5, 5, 5, 5));
northData.setCollapsible(false);
northData.setMargins(new Margins(5));
northData.setSize(57);
centerData.setCollapsible(false);
centerData.setMargins(new Margins(5));
borderContainer.setWestWidget(west, westData);
borderContainer.setCenterWidget(center, centerData);
borderContainer.setNorthWidget(north, northData);
viewPort.add(borderContainer);
}
public Widget asWidget() {
return viewPort;
}
#Override
public void setInSlot(Object slot, Widget content) {
setMainContent(content);
}
private void setMainContent(Widget content) {
center.clear();
if (content != null) {
center.setWidget(content);
}
}
}
So, if I do not attach contentData when adding my grid to VerticalLayoutContainer (cont) it renders equally to as VerticalLayoutData(1, -1) which is: grid's height is not computed at all and it's content flows under the bottom of the page with no scrollbar to get to any row lower the bottom page border. If I set VerticalLayoutData (1, 1) as in the link at the beginning of my question I can only see grid's header and grid's content's height is computed to 0px (though it's present in the page's DOM). And only if I set height manually, for example setHeight(300) grid's height sets that quantity of pixels and vertical scrollbar is shown to get to any row in the grid's store, though one can easily understand manually setting grid's height is not of any reason solution in case of Viewport managed application window.
What have I missed in widgets config or is this a bug with any reasonable workaround for it?
I've found the layout problem:
center.setResize(false); // BaseView's constructor
That made BorderLayoutContainer's ContentPanel not to resize child widget (VerticalLayoutContainer) to fit.

ExpandBar in Eclipse View Part

I am trying to add an expand bar to an Eclipse viewpart. When I click the expand button I would like the viewpart to move items below the expand bar down and show the expanded items. What currently happens is the expand bar items just disappear below the items below the expand bar. Any thoughts?
final ExpandBar expandBar = new ExpandBar(parent, SWT.NONE);
expandBar.setBackground(SWTResourceManager.getColor(SWT.COLOR_WIDGET_LIGHT_SHADOW));
expandBar.setSpacing(0);
fd_toolBar.top = new FormAttachment(expandBar, 6);
FormData fd_expandBar = new FormData();
fd_expandBar.top = new FormAttachment(0, 62);
fd_expandBar.left = new FormAttachment(0, 3);
expandBar.setLayoutData(fd_expandBar);
formToolkit.paintBordersFor(expandBar);
final ExpandItem xpndtmWarningDetails = new ExpandItem(expandBar, SWT.NONE);
xpndtmWarningDetails.setExpanded(true);
xpndtmWarningDetails.setText("Warning Details");
final Composite composite_1 = new Composite(expandBar, SWT.NONE);
composite_1.setBackground(SWTResourceManager.getColor(SWT.COLOR_YELLOW));
xpndtmWarningDetails.setControl(composite_1);
formToolkit.paintBordersFor(composite_1);
xpndtmWarningDetails.setHeight(xpndtmWarningDetails.getControl().computeSize(SWT.DEFAULT, SWT.DEFAULT).y);
Label lblTest = new Label(composite_1, SWT.NONE);
lblTest.setBounds(10, 10, 55, 15);
lblTest.setText("Test");
expandBar.addExpandListener(new ExpandListener(){
#Override
public void itemCollapsed(ExpandEvent e) {
expandBar.setSize(expandBar.getSize().x, xpndtmWarningDetails.getHeaderHeight());
parent.layout(true);
}
#Override
public void itemExpanded(ExpandEvent e) {
expandBar.setSize(expandBar.getSize().x, 300);
expandBar.layout(true);
parent.layout(true);
}
});
I think the ExpandBar works best when used like it is in this example...
http://git.eclipse.org/c/platform/eclipse.platform.swt.git/tree/examples/org.eclipse.swt.snippets/src/org/eclipse/swt/snippets/Snippet343.java
... with several expand bars stacked on top of each other, and nothing else mixed in.
I think the functionality your looking for can be accomplished with an ExpandableComposite object. It depends on what else is going on in your ViewPart.
Here's a quick example of an ExpandableComposite.
package com.amx.designsuite.rcp;
import org.eclipse.swt.SWT;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Text;
import org.eclipse.ui.forms.widgets.ExpandableComposite;
import org.eclipse.ui.forms.widgets.FormToolkit;
import org.eclipse.ui.forms.widgets.ScrolledForm;
import org.eclipse.ui.forms.widgets.TableWrapLayout;
public class ExpandableCompositeExample extends Composite {
/**
* Create the composite.
* #param parent
* #param style
*/
public ExpandableCompositeExample(final Composite parent, int style) {
super(parent, style);
FormToolkit toolkit;
toolkit = new FormToolkit(parent.getDisplay());
final ScrolledForm form = toolkit.createScrolledForm(parent);
form.setText("Title for Form holding Expandable Composite (optional)");
TableWrapLayout layout = new TableWrapLayout();
form.getBody().setLayout(layout);
ExpandableComposite expandableCompsite = toolkit.createExpandableComposite(form.getBody(), ExpandableComposite.TREE_NODE | ExpandableComposite.SHORT_TITLE_BAR);
toolkit.paintBordersFor(expandableCompsite);
expandableCompsite.setText("Expandable Composite Title (Optional)");
expandableCompsite.setExpanded(true);
Text txtMyNewText = toolkit.createText(expandableCompsite, "Text to show when composite is expanded", SWT.NONE);
expandableCompsite.setClient(txtMyNewText);
}
#Override
protected void checkSubclass() {
// Disable the check that prevents subclassing of SWT components
}
}

SWT: show popup menu below toolbar button after clicking on it

I want to show a popup menu below a toolbar button when the user clicks this button. I've read about the SWT.DROP_DOWN style for a ToolItem but this seems very much limited to a simple list of items according to this sample. Instead, I want to show a popup menu with, e.g., checkbox and radio button menu items.
You can make MenuItem with styles SWT.CHECK, SWT.CASCADE, SWT.PUSH, SWT.RADIO, SWT.SEPARATOR
see javadoc..
So you can "hang" swt menu to selection of dropdown on toolbar item like this
public class Test {
private Shell shell;
public Test() {
Display display = new Display();
shell = new Shell(display, SWT.SHELL_TRIM);
shell.setLayout(new FillLayout(SWT.VERTICAL));
shell.setSize(50, 100);
ToolBar toolbar = new ToolBar(shell, SWT.FLAT);
ToolItem itemDrop = new ToolItem(toolbar, SWT.DROP_DOWN);
itemDrop.setText("drop menu");
itemDrop.addSelectionListener(new SelectionAdapter() {
Menu dropMenu = null;
#Override
public void widgetSelected(SelectionEvent e) {
if(dropMenu == null) {
dropMenu = new Menu(shell, SWT.POP_UP);
shell.setMenu(dropMenu);
MenuItem itemCheck = new MenuItem(dropMenu, SWT.CHECK);
itemCheck.setText("checkbox");
MenuItem itemRadio = new MenuItem(dropMenu, SWT.RADIO);
itemRadio.setText("radio1");
MenuItem itemRadio2 = new MenuItem(dropMenu, SWT.RADIO);
itemRadio2.setText("radio2");
}
if (e.detail == SWT.ARROW) {
// Position the menu below and vertically aligned with the the drop down tool button.
final ToolItem toolItem = (ToolItem) e.widget;
final ToolBar toolBar = toolItem.getParent();
Point point = toolBar.toDisplay(new Point(e.x, e.y));
dropMenu.setLocation(point.x, point.y);
dropMenu.setVisible(true);
}
}
});
shell.open();
while(!shell.isDisposed()) {
if(!display.readAndDispatch()) display.sleep();
}
display.dispose();
}
public static void main(String[] args) {
new Test();
}
}

GWT Tab panel close

I am building an application in GWT. I have a decorated tabpanel in
my application.Where in am adding panels to it dynamically.Now i want
to achieve the closing of these tabs. I want to add a close image to
the tab bar and event to that image for closing. I am using UIbinder.
the working code is like that;
private Widget getTabTitle(final Widget widget, final String title) {
final HorizontalPanel hPanel = new HorizontalPanel();
final Label label = new Label(title);
DOM.setStyleAttribute(label.getElement(), "whiteSpace", "nowrap");
ImageAnchor closeBtn = new ImageAnchor();
closeBtn.setResource(images.cross());
closeBtn.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
int widgetIndex = tabs.getWidgetIndex(widget);
if (widgetIndex == tabs.getSelectedIndex()) {
tabs.selectTab(widgetIndex - 1);
}
tabs.remove(widgetIndex);
}
});
hPanel.add(label);
hPanel.add(new HTML("&nbsp&nbsp&nbsp"));
hPanel.add(closeBtn);
hPanel.setStyleName("gwt-TabLayoutPanelTab");
return hPanel;
}
In order to add tab,
public void addTab() {
TabWriting tw = new TabWriting(); /* TabWriting in my case, this can be any widget */
tabs.add(tw, getTabTitle(tw, "Writing"));
tabs.selectTab(tw);
}
You'll going to need, ImageAnchorClass
public class ImageAnchor extends Anchor {
public ImageAnchor() {
}
public void setResource(ImageResource imageResource) {
Image img = new Image(imageResource);
img.setStyleName("navbarimg");
DOM.insertBefore(getElement(), img.getElement(), DOM
.getFirstChild(getElement()));
}}
It isn't supported natively in GWT.
You can manually try to add it.
Read this - http://groups.google.com/group/google-web-toolkit/browse_thread/thread/006bc886c1ccf5e1?pli=1
I haven't tried it personally, but look at the solution by gregor (last one).
You kinda need to do something along the lines of this
GWT Close button in title bar of DialogBox
First you need to pass in the tab header when you create the new tab. The header you pass in should have your tab text and also an X image or text label to click on. Then add a event handler on the close object that gets the widget you are adding to the tabPanel and removes it. Here is some inline code that works
public void loadTab(final Widget widget, String headingText, String tooltip) {
HorizontalPanel panel = new HorizontalPanel();
panel.setStyleName("tabHeader");
panel.setTitle(tooltip);
Label text = new Label();
text.setText(headingText);
text.setStyleDependentName("text", true);
Label close = new Label();
close.setText("X");
close.setTitle(closeText_ + headingText);
text.setStyleDependentName("close", true);
close.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("close this tab");
ClientGlobal.LOG.info("widget : " + tabPanel_.getWidgetIndex(widget));
tabPanel_.remove(tabPanel_.getWidgetIndex(widget));
}
});
panel.add(text);
panel.add(close);
panel.setCellHorizontalAlignment(text, HasHorizontalAlignment.ALIGN_LEFT);
panel.setCellHorizontalAlignment(close, HasHorizontalAlignment.ALIGN_RIGHT);
tabPanel_.add(widget, panel);
tabPanel_.getTabWidget(widget).setTitle(tooltip);
tabPanel_.selectTab(widget);
}