Can we add a content panel having border layout to a panle that is having an Accordion Layout. we are trying to put our central panle as well as west panel on a panle which displays this in accordion view. But not able to do this as the data is not displaying kinldy request to suggest.
Regards
Satish
You mean this?
public class test extends Composite {
private ContentPanel accordionPanel;
private ContentPanel borderPanel;
private ContentPanel westPanel;
private ContentPanel centerPanel;
public test() {
accordionPanel = new ContentPanel();
accordionPanel.setLayout(new AccordionLayout());
borderPanel = new ContentPanel();
borderPanel.setLayout(new BorderLayout());
westPanel = new ContentPanel();
borderPanel.add(westPanel, new BorderLayoutData(LayoutRegion.WEST));
centerPanel = new ContentPanel();
borderPanel.add(centerPanel, new BorderLayoutData(LayoutRegion.CENTER));
accordionPanel.add(borderPanel);
initComponent(accordionPanel);
}
}
Related
It seems that NorthSouthContainer can ajust the height of north widget.
Can BorderLayoutContainer do the same one?
(gxt version: 3.1.1)
public void onModuleLoad() {
final BorderLayoutContainer cont = new BorderLayoutContainer();
// final NorthSouthContainer cont = new NorthSouthContainer();
final ToolBar bar = new ToolBar();
bar.add(new TextButton("tool bar"));
cont.setNorthWidget(bar);
final ContentPanel panel = new ContentPanel();
panel.setHeadingText("content panel");
cont.setCenterWidget(panel);
// cont.setSouthWidget(panel);
final Viewport vp = new Viewport();
vp.add(cont);
RootPanel.get().add(vp);
}
NorthSouthContainer:
BorderLayoutContainer:
I know there are display bugs with that view. I'm not sure if it can be dynamically sized, we specifically set the height for it.
final BorderLayoutData northData = new BorderLayoutData(<height>);
cont.setNorthWidget(bar, northData);
You may have to add the toolbar into another container that deals with size better, ours is a HorizontalLayoutContainer inside of a ContentPanel.
I am facing a little issue when using BorderLayoutContainer in my App.
I just want to have a center panel and south panel but I get a strange blue margin around my south panel (see the image below).
Find my sources below.
private Widget getContainer() {
SimpleContainer sc = new SimpleContainer();
BorderLayoutContainer blc = new BorderLayoutContainer();
ContentPanel validationView = new ContentPanel();
validationView.setHeadingText("Validation");
ContentPanel center = new ContentPanel();
center.add(editorMVP.getDisplay());
center.setHeaderVisible(false);
center.setBorders(false);
blc.setCenterWidget(center);
BorderLayoutData southData = new BorderLayoutData(250);
southData.setCollapsible(true);
southData.setSplit(true);
southData.setCollapsed(true);
blc.setSouthWidget(validationView, southData);
blc.collapse(LayoutRegion.SOUTH);
sc.add(blc);
return sc;
}
Can anybody help me solve this please?
EDIT: I have been able to remove this margin with using a SimpleContainer instead of a ContentPanel. But I have now a blue background I want to get rid off. Any idea?
private Widget getContainer() {
SimpleContainer sc = new SimpleContainer();
BorderLayoutContainer blc = new BorderLayoutContainer();
ContentPanel validationView = new ContentPanel();
validationView.setHeadingText("Validation");
SimpleContainer center = new SimpleContainer();
center.add(editorMVP.getDisplay());
blc.setCenterWidget(center);
BorderLayoutData southData = new BorderLayoutData(250);
southData.setCollapsible(true);
southData.setSplit(false);
southData.setCollapsed(true);
blc.setSouthWidget(validationView, southData);
blc.collapse(LayoutRegion.SOUTH);
sc.add(blc);
return sc.asWidget();
}
Thank you for your help.
The issue solves itself after I rewrote my code. Here is my final code, but I don't think it has really changed... Don't really understand what happened...
private Widget getContainer() {
SimpleContainer sc = new SimpleContainer();
BorderLayoutContainer blc = new BorderLayoutContainer();
ContentPanel validationView = new ContentPanel();
validationView.setHeadingText("Validation");
ContentPanel center = new ContentPanel();
center.setHeaderVisible(false);
center.add(editorMVP.getDisplay());
blc.setCenterWidget(center);
BorderLayoutData southData = new BorderLayoutData(250);
southData.setCollapsible(true);
southData.setSplit(false);
southData.setCollapsed(true);
blc.setSouthWidget(validationView, southData);
blc.collapse(LayoutRegion.SOUTH);
sc.add(blc);
return sc.asWidget();
}
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.
i created a dialog box using uiBinder in gwt app, it works fine except it cannot move around. i don't know what's wrong with it, do i have to set caption in order to move it around?
here is my code:
myDialog.ui.xml
<g:HTMLPanel ui:field="_glossaryPanel">
<div class="dialogBox">
<h3>content goes here..</h3>
<p>More content...</p>
</div>
</g:HTMLPanel>
myDialog.java
public class MyDialog extends DialogBox {
private static MyDialogUiBinder uiBinder = GWT.create(MyDialogUiBinder.class);
interface MyDialogUiBinder extends UiBinder<Widget, MyDialog> {
}
public MyDialog() {
setWidget(uiBinder.createAndBindUi(this));
this.setModal(true);
this.setAutoHideEnabled(true);
}
FooterView.java
public class FooterView extends Composite implements FooterPresenter.Display {
interface Binder extends UiBinder<Widget, FooterView> {
}
private static final Binder BINDER = GWT.create(Binder.class);
#UiField
Anchor _glossary;
#UiHandler("_glossary")
public void handleGlossaryClick(ClickEvent event) {
MyDialog mDialog = new MyDialog();
mDialog.setGlassEnabled(true);
mDialog.setAnimationEnabled(true);
mDialog.center();
mDialog.show();
}
See http://gwt.google.com/samples/Showcase/Showcase.html#!CwDialogBox You have to use a DialogBox (not a PopupPanel) to move the thing around.
EDIT:
I tried your code and it worked for me. Have you tried clicking in the border (not content!) to drag the dialog box around?
GWT Dialogs can't be moved around like a desktop window. There was a projected called gwt-windows that would let you do that, but it hasn't been updated in years.
Maybe you could try in your ui.xml file to change the root element type
from HTMLpanel to a FlowPanel
I saw somewhere that was saying something like this. where ? I can't remember :-(
your <div clas="dialogBox"> is, in my opinion, a bit confusing, maybe yould consider renaming to something more personal and less in gwt keywords' like.
Here is the Solution,
VerticalPanel panel;
DialogBox dialogbox;
PopupPanel glass;
VerticalPanel DialogBoxContents;
ClickListener listener;
HTML message;
Button button;
SimplePanel holder;
public void demo()
{
// Create a panel and add it to the screen
panel = new VerticalPanel();
RootPanel.get("demo").add(panel);
panel.setStyleName("table-center");
//
// Create a DialogBox with a button to close it
dialogbox = new DialogBox(false);
dialogbox.setStyleName("demo-DialogBox");
DialogBoxContents = new VerticalPanel();
dialogbox.setText("DialogBox");
message = new HTML("Click 'Close' to close");
message.setStyleName("demo-DialogBox-message");
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.hide();
}
};
button = new Button("Close", listener);
holder = new SimplePanel();
holder.add(button);
holder.setStyleName("demo-DialogBox-footer");
DialogBoxContents.add(message);
DialogBoxContents.add(holder);
dialogbox.setWidget(DialogBoxContents);
//
// Add a button to the demo to show the above DialogBox
listener = new ClickListener()
{
public void onClick(Widget sender)
{
dialogbox.center();
}
};
button = new Button("Show DialogBox", listener);
panel.add(button);
}
Check out the DEMO AT http://examples.roughian.com/index.htm#Widgets~DialogBox
"do i have to set caption in order to move it around?"
Yes.
dialogbox.setText("DialogBox");
You may drag only catpion div;
When you drag caption div, whole dialog box will move.
I have a GWT dialog box that looks like the following:
public class FooDialog extends DialogBox {
public FooDialog() {
setText("Foo Dialog");
VerticalPanel outer = new VerticalPanel();
outer.setBorderWidth(3);
outer.setSize("400px", "200px");
outer.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
outer.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
Button cancelButton = new Button("Cancel", new ClickHandler() {
public void onClick(ClickEvent event) {
hide();
}
});
HorizontalPanel buttons = new HorizontalPanel();
buttons.setBorderWidth(3);
buttons.add(cancelButton);
outer.add(buttons);
setWidget(outer);
}
}
For some reason the 'buttons' panel does not obey the horizontalAlignment setting; it sticks to the left side of the outer panel. It does, however, obey the vertialAlignment setting. Any ideas? Thanks!
Tables don't respect the parent's horizontal alignment property. Instead, set the left & right margins of the child table to "auto".
buttons.getElement().getStyle().setProperty("marginLeft", "auto");
buttons.getElement().getStyle().setProperty("marginRight", "auto");
More Info: Center a table with CSS