GWT - refreshing a tab panel - gwt

I have a tabpanel with 3 tabs. One of the tabs has a table which draws a table with data from the database. But if new data is entered, after I select the tab I have to refresh the browser page to see the update.
I've added the following selection handler to the tabpanel:
tabpanel.addSelectionHandler(new SelectionHandler<Integer>()
{
public void onSelection(SelectionEvent<Integer> event)
{
int tabId = event.getSelectedItem();
Widget tabWidget = tabpanel.getWidget(tabId);
if (tabWidget != null)
{
//assumming that code to refresh will go here...
}
}
});
What can I do so that when a certain tab is selected then that tab will refresh?
Thanks so much in advance.

What you have done is correct. Just put your data access code in the commented area. So for example
int tabId = event.getSelectedItem();
// PSEUDO CODE
data = AsyncCallback.getData()
tabPanel.setWidget(tabId, new Widget(data)); // PSEUDO CODE

Related

How to don't validate form with Ajax buttons

I have a problem with validation on form actually sub-form.
In my website I have some kind of table and "Add row" button (BlockingAjaxSubmitLink).
When I try add let say 2 rows, I get validation error (because row in this table has Required=True parameter) and I can't add another row. I tried use simple AjaxLink but it doesn't have reference to form in onClick method and when I complete some rows and click "Add row" this data get lost.
I want to enable validation only after "save" button click.
Any idea how to deal with this problem?
I do something like you want using an AjaxLink.
My AjaxLink:
private AjaxLink addNewRow = new AjaxLink("addNewRow") {
#Override
public void onClick(AjaxRequestTarget target) {
MyEntityObject newTableRowObject = new MyEntityObject(irrelevantParameter);
entityObjectTableService.createNewRowInDB(newTableRowObject );
target.add(listViewContainer);
}
};
In this code the listViewContainer is a WebMarkupContainer which contains a ListView holding the table rows.
When i click this AjaxLink a new object representing a row in my table is added to the database and then the container containing the ListView is being refreshed refreshing the ListView and the new empty object is being fetched from the DB and shown as a new row in my table at the end.
Depending on your structure maybe you are looking after disabling validation using setDefaultFormProcessing(true); - http://ci.apache.org/projects/wicket/apidocs/6.x/org/apache/wicket/markup/html/form/AbstractSubmitLink.html#setDefaultFormProcessing%28boolean%29
For now I write some kind of hack
First I set
addKnowledgeLink.setDefaultFormProcessing(false);
and next
BlockingAjaxSubmitLink<Object> addKnowledgeLink = new BlockingAjaxSubmitLink<Object>(
"link_knowledge_add") {
#Override
protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
ChangeDataForm.this.process(this);
/* some code */
target.add(form.get(MY_CONTAINER_ID));
}
(...)
and my hack...
//HACK
public void process(IFormSubmitter object){
if (!isEnabledInHierarchy() || !isVisibleInHierarchy())
{
return;
}
// run validation
validate();
/*if (hasError())
{
// mark all children as invalid
markFormComponentsInvalid();
// let subclass handle error
callOnError(object);
}
else
{*/
// mark all children as valid
markFormComponentsValid();
// before updating, call the interception method for clients
beforeUpdateFormComponentModels();
// Update model using form data
updateFormComponentModels();
// validate model objects after input values have been bound
onValidateModelObjects();
if (hasError())
{
callOnError(object);
return;
}
// Form has no error
delegateSubmit(object);
//}
}
and I ovveride one method
#Override
protected void onError(){
super.onError();
this.updateFormComponentModels();
}
I know it is ugly solution but I couldn't figure out anything better..
And I couldn't shutdown feedback messages

ExtGWT Resizing TabPanel (TabItem) with ChartsVizualization an ChartsTable

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;
}

SmartGwt - Removing one tab clears the canvas

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);
}

gwt menu implementation

I want to implement menu in GWT as shown on this website:
http://www.openkm.com/en/
I have created the menu system and I am able to display alerts from menu using following code:
Command cmd = new Command() {
public void execute() {
Window.alert("Menu item have been selected");
}
}
I want to get rid of window.alert() and display my application pages from menu.
Create and load the appropriate page. For example if you use UiBinder then:
MyPage selectedPage = new MyPage(); // creating of your panel
RootPanel.get().clear(); // cleaning of rhe RootPanel
RootPanel.get().add(selectedPage); // adding the panel to the RootPanel
First create an array list of views
public List<UIObject> viewsList = new ArrayList<UIObject>();
Add a view to that list
viewsList.add(addMovieView);
Send the view you want to select to the helper method
public void changeView(UIObject selectedView) {
for(UIObject view : viewsList) {
if(selectedView.equals(view)) {
view.setVisible(true);
} else {
view.setVisible(false);
}
}
}
Are you trying to make the entire page GWT, or just the menu? If it's just the menu, you will need to embed a GWT element into your overall HTML, then call something like
Window.open(linkURL, "_self", "");
from the appropriate menu items, which will navigate to another page.

Ajax Modal Popup Display Issue

On the web page, there is gridview control contains product ID's. bind to a link button.
On ItemCommand event of gridview, I fetch the product information and display in the ajax modal popup extender control. The popup is programatically show on ItemCommand of gridview and also hide programatically.
Now the problem is that, when i close popup after showing first product details and try to see next 1 by clicking on other product ID.., sometimes details are displaye dand sometimes not.
The data comes from database is fetched as well for each product.
Plz help.
I do the same but i have no such problem. So i am pasting code here that may b help full to u.
CODE:
protected void GVallusers_RowEditing(object sender, GridViewEditEventArgs e)
{
try
{
GridViewRow gvRow = ((GridView)sender).Rows[e.NewEditIndex];
populatepanel(gvRow);
ModalPopupExtender1.Show();
}
catch (Exception exc)
{
lblinfo.Text = exc.Message;
}
}
public void populatepanel(GridViewRow gvrow)
{
string userid = gvrow.Cells[0].Text;
lblSite.Text=gvrow.Cells[1].Text;
lblemail.Text = gvrow.Cells[3].Text;
}