I've built a GUI with a SmartGWT TabSet with Tabs that can be dynamically added and removed.
The Tabs share the same canvas which is moved from Tab to Tab at each tab selection like this:
myTabSet.addTabSelectedHandler(new TabSelectedHandler() {
public void onTabSelected(TabSelectedEvent event) {
[...]
myTabs[myTabSet.getSelectedTabNumber()].setPane(myCanvas);
// Then I fill the contained widgets with the tab-specific data
}
}
This works, but when I try to remove a Tab with
myTabSet.removeTab(iToBeDeletedTab);
The tab is removed but the remaining tabs have a blank pane, I can get the content back only by reloading the page. I found that I have to prevent pane destruction with calls to :
myTabSet.setDestroyPanes(false);
and
myTabSet.updateTab(iToBeDeletedTab, null);
//called right before
myTabSet.removeTab(iToBeDeletedTab);
I understand that the canvas/pane is still destroyed, but I cannot figure out how to prevent this.
Has anyone any hint?
Thank you!
Have you tried to call the redraw() method after removing a tab? This usually helps me when loading/reloading data with smartGWT widgets.
Your calls are correct, but now what you've got is the pane completely unnassociated from the TabSet and not drawn (check the Watch Tab in the Developer Console and you'll see this). Now, call updateTab(someOtherTab, pane) to connect the pane to one of the other tabs where it should be showing.
Ok, I've made some test and got the same as you but had some success with the following code:
1°) in the Javadoc I found:
***public void setPane(Canvas pane)
Specifies the pane associated with this tab. You can change the pane associated with a given tab after the TabSet has been created by calling TabSet.updateTab(int, com.smartgwt.client.widgets.Canvas)***
I tried without setting to null the pane of tab1 , it didn't work.
I think it could be arranged in better way but anyway the point is to use the updatePadmethod
public static void testTabDelete(){
final Canvas theCanvas = new Canvas();
final TabSet theTabs = new TabSet();
theTabs.setWidth("80%");
theTabs.setHeight("80%");
final Tab tab1 = new Tab("Tab1");
final Tab tab2 = new Tab("Tab2");
final Tab tab3 = new Tab("Tab3");
IButton btn1 = new IButton("Btn1");
btn1.setLeft(10);
btn1.setTop(100);
btn1.setWidth(80);
theCanvas.addChild(btn1);
IButton btn2 = new IButton("Delete");
btn2.setLeft(100);
btn2.setTop(100);
btn2.setWidth(80);
btn2.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
#Override
public void onClick(com.smartgwt.client.widgets.events.ClickEvent event) {
theTabs.updateTab(0, null);
theTabs.updateTab(1, theCanvas);
theTabs.selectTab(tab2);
theTabs.removeTab(tab1);
}
});
theCanvas.addChild(btn2);
theTabs.addTab(tab1);
theTabs.addTab(tab2);
theTabs.addTab(tab3);
tab1.setPane(theCanvas);
RootPanel.get("container").add(theTabs);
}
Related
I'm using GWT 2.5.1 and can't figure out why but when openining a link in a new tab results in displaying the same content in the original (where the clicks come from) tab as well. Here is a code:
private void createMyloLink(String text, String targetUrl) {
Anchor link = new Anchor(text, targetUrl);
link.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.open(link.getHref(), "_blank", "");
}
});
}
in Firefox and Chrome it opens the link in a new tab without problem. What is weird is that when I right-click on the link and choose 'open in a new Tab', the new tab opens and its content DOES NOT flow into the tab of origin (where I clicked on the link). On the other side, if I just click on the link, the new tabs opens but its content is also injected in the origin tab.
Any idea on how to fix the problem or to achieve the right working ? Thank you
This is the expected behaviour of your code snippet.
Anchor link = new Anchor(text, targetUrl);
If you click on this anchor , the targetUrl is opened in the current tab.
By adding the ClickHandler a new tab with targetUrl is opened.
Solution:
Create anchor with target "_blank" and remove the ClickHandler.
private void createMyloLink(String text, String targetUrl) {
Anchor link = new Anchor(text, targetUrl, "_blank");
}
I am working with TabbedPanel in wicket. I have created a TabbedPanel for my search page
My requirement is to create a TabbedPanel with title and three tabs. I am using additional tab (Dummytab in this case) to compensate the title. Please, suggest me how to create a title tab.
First tab is dummy tab and it is active. I want the Search 1 tab to be default tab and Search: tab to be inactive and just represent the title for the TabbedPanel.
Thanks in advance.
I think that you can simply override TabbedPanel's newLink method to replace real link via some container for first tab. It would be something like that:
TabbedPanel tp = new TabbedPanel (...) {
{
#Override
protected WebMarkupContainer newLink(final String linkId, final int index)
{
return (index > 0) ? super.newLink(linkId, index) :
new WebMarkupContainer (linkId);
}
};
tp.setSelectedTab( 1 ); // selecting `Search 1` tab after tp creation;
Also, if you want to prevent selecting first tab programmaticaly - you should play around with overriding setSelectedTab method.
As an alternative: subclass TabbedPanel and provide your own custom markup.
I have a loading popup that I need to display on the top of the page, even if the user scroll down.
What I tried so far is to set the popup position as follows
setPopupPosition(Window.getClientWidth()/2 , 0);
The popup shows up on the absolut top.
The situation can be resolved easily if you view it from a different angle: Not the popup position should adjust to the page - instead, the page should scroll behind the centering popup, e.g.:
final ScrollPanel scrollPanel = new ScrollPanel();
RootLayoutPanel.get().add(scrollPanel);
pagePanel = new FlowPanel();
scrollPanel.setWidget(pagePanel);
pagePanel.add(...);
Now add the entire page contents to pagePanel (instead of adding them directly to rootPanel).
Then you can create popups like this:
final PopupPanel popupPanel = new PopupPanel();
popupPanel.add(...);
popupPanel.center();
You'll still have to re-center the popup when the window resizes, but apart from that, the popup will always be at the center in front of the scrolling page.
To achieve this you can implement Window.addWindowScrollHandler. It will always be on top whatever you do.
DialogBox dialog = new DialogBox();
dialog.setWidget(...);
Window.addWindowScrollHandler(new ScrollHandler() {
#Override
public void onWindowScroll(ScrollEvent event) {
dialog.setPopupPosition((Window.getClientWidth() - widthOfDialog) / 2, event.getScrollTop());
}
});
Hope this helps.. Thanks..
The solution that worked for me is this
setPopupPosition(Window.getClientWidth()/2 , Window.getScrollTop());
How can i disable a tab (i.e the user cannot open the tab when he clicks on it) in the TabLayoutPanel?I searched online but was not able to find a solution
Thanks
Use a BeforeSelectionHandler:
TabLayoutPanel myPanel = new TabLayoutPanel();
// Add children...
myPanel.addBeforeSelectionHandler(new BeforeSelectionHandler<Integer>() {
#Override
public void onBeforeSelection(BeforeSelectionEvent<Integer> event) {
// Simple if statement - your test for whether the tab should be disabled
// will probably be more complicated
if (event.getItem() == 1) {
// Canceling the event prevents the tab from being selected.
event.cancel();
}
}
});
If you want to style the disabled tab differently than enabled tabs, you can use TabLayoutPanel#getTabWidget to get the tab widget and add a style name to it.
For anyone who comes across this later:
As of GWT version 1.6, disabling/enabling tabs is built into GWT.
The TabBar class has a method setTabEnabled(int index, boolean enabled) that enables/disables the tab at a given index.
For example, to disable all the tabs in a TabPanel:
TabPanel myTabPanel = new TabPanel();
// Add children
TabBar tabBar = myTabPanel.getTabBar();
for(int i=0; i<tabBar.getTabCount(); i++) {
tabBar.setTabEnabled(i, false);
}
See the GWT javadoc for more info.
To style disabled tabs differently (which GWT does automatically, but if you wanted to change the style): disabled tabBarItem divs are given another CSS class: gwt-TabBarItem-disabled.
You can access tab style by casting class Tab to Widget
TabPanel tabPanel = new TabPanel();
((Widget)tabPanel().getTabBar().getTab(tabsToDisable.iterator().next())).addStyleName("disabled");
I have created a Tab panel where additional tabs can be added on clicking a button.
What I cannot figure out is how to remove a tab that is not the one that was added last.
Here's where I am....
TabPanel tp = new TabPanel();
HorizontalPanel tabPanel = new HorizontalPanel();
Label textLabel = new Label("Some Filename");
Button killButton = new Button("x");
tabPanel.add(textLabel);
tabPanel.add(killButton);
tp.add(new HTML("Some Content"), tabPanel);//Body and header
killButton.addClickHandler( new ClickHandler(){
public void onClick(ClickEvent event){
//Decide the Tab index that contains this button
//Remove this tab based on index
}
});//End of addClickHandler method
When I try to use the getWidgetIndex() method to return the index of a particular tab I get -1 everytime.
How do I correctly return an index of a tab?
please help as I am going insane!!!
:-(
to remove a tab you need either a reference to the Widget you added as the content of the tab, or you need the tab index for the tab you need to remove. Part of your above example would be like
final TabPanel tp = new TabPanel();
final HTML someContent1 = new HTML("Page A");
...
public void onClick(ClickEvent event){
tp.remove(someContent1);
// or just remove the tab it self
//tp.getTabBar().removeTab(0);
}
NingZhang.info
getWidgetIndex needs the content widget instead of the tab widget as argument. So for example in your case that would be the widget created with new HTML("Some Content").