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").
Related
I have a smartGwt DynamicForm with a FormItem
FormItem item = createTextItem();
form.setFields(item);
After creating the and setting fields, I need to dynamically set an editor type for the item. I have to do it dynamically based on some conditions.
I'm calling item.setEditorType(new PasswordItem());
just after I call form.editRecord(record); so that the new editor type should appear. But it is not working.
Tried calling item.redraw() and is not working.
My goal is to set the editor type dynamically based on the record that is edited.Please help.
Try with Custom Data Binding (see page 23 for more details). What you tried won't work, AFAIK, because the ListGridField has already been created with the initial custom editor, and it can't be changed dynamically with setEditorCustomizer.
Take a look at this sample (based on this showcase demo), which does what you want to do to the password field when it is being edited in the DynamicForm, and after the changes have been saved (please pay attention to the comments, as without some of these settings it won't work as expected):
public void onModuleLoad() {
final DataSource dataSource = ItemSupplyLocalDS.getInstance();
final DynamicForm form = new DynamicForm();
form.setIsGroup(true);
form.setNumCols(4);
form.setDataSource(dataSource);
// very important for not having to set all fields all over again
// when the target field is customized
form.setUseAllDataSourceFields(true);
final ListGrid listGrid = new ListGrid();
listGrid.setWidth100();
listGrid.setHeight(200);
listGrid.setDataSource(dataSource);
listGrid.setAutoFetchData(true);
IButton editButton = new IButton("Edit");
editButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
form.editRecord(listGrid.getSelectedRecord());
// when the button is clicked, the password field is rendered with
// a plain text item editor, for easy verification of values entered
FormItem passwordField = new FormItem("passwordFieldName");
passwordField.setEditorProperties(new TextItem());
form.setFields(passwordField);
form.markForRedraw();
}
});
IButton saveButton = new IButton("Save");
saveButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
form.saveData();
// when the button is clicked, the password field is rendered with
// a password editor, for added privacy/security
FormItem passwordField = new FormItem("passwordFieldName");
passwordField.setEditorProperties(new PasswordItem());
form.setFields(passwordField);
form.markForRedraw();
}
});
VLayout layout = new VLayout(15);
layout.setWidth100();
layout.setHeight100();
layout.addMember(listGrid);
layout.addMember(editButton);
layout.addMember(form);
layout.addMember(saveButton);
layout.draw();
}
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 (in a JavaFx app) a tabpane with different tabs. I want to implement a drag and drop functionality to drag a tab outside the stage. So that it can generate a new window (like in Google Chrome).
Thanks for the help.
You should check the solution by Tom Schindl shown at his Blog
Here is an aproach, its just the part of taking the content out into a new window, but its a start.
private Tab createTab(String text) {
final Tab tab = new Tab();
final Label label = new Label(text);
tab.setGraphic(label);
label.setOnDragDone(new EventHandler<DragEvent>() {
#Override
public void handle(DragEvent event) {
if (event.getAcceptedTransferMode() == null) {
final StackPane content = (StackPane) tab.getContent();
tab.setContent(null);
Stage stage = new Stage();
stage.setScene(new Scene(content));
stage.show();
tab.getTabPane().getTabs().remove(tab);
event.consume();
}
}
});
}
Basically you must create the tab with this method, and if the receiver of the event does not support draging, that is to say, if it does not do anything specific, then you create a new stackPane with the content of the tab.
*By the way is suposed the content of the pane was a StackPane.
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);
}
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");