Why can't i clear FlexTable in UiBinder in GWTP? - gwt

OK, I am using GWTP. I used eClipse to create TestPresenter.
In TestView.ui.xml, i have
<g:HTMLPanel>
<g:FlexTable ui:field="messageFlexTable" borderWidth="1" /> </g:HTMLPanel>
In TestPresenter.java, i have
Button clearButton=new Button("Clear");
getView().getComposeMessageHTMLPanel().add(clearButton);
clearButton.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
// TODO Auto-generated method stub
getView().getMessageFlexTable().clear();
}
});
But when clicking clear only buttons & labels inside that flextable got cleared, all the text & border of that flextable are still there?
However, If i create FlexTable via code FlexTable ft=new FlexTable(); then i have no problem?
What wrong? Is it a bug in GWTP?

FlexTable extends HTMLTable. As per javadoc for HTMLTable method clear()
Removes all widgets from this table, but does not remove other HTML or text contents of cells.
If you really need to remove all table rows from it use removeAllRows() instead. See HTMLTable#clear() and FlexTable#removeAllRows()
Note: for better performance you could also consider using Grid instead if you do not need any particular features of FlexTable like dynamic size or colspan/rowspan.

Related

GWT: How to run code after sorting a datagrid column

I really need a possibility to run some code after the whole sorting of the DataGrid is finished. Especially after the little arrow which shows if the column is sorted ascending or descending is displayed, because i need to manipulate the CSS of this arrow after it is displayed. I couldn't find the place where the arrow is really set. I tried something like this:
ListHandler<String> columnSortHandler = new ListHandler<String>(list) {
#Override
public void onColumnSort( ColumnSortEvent event ) {
super.onColumnSort( event );
// My Code here
}
};
but the code runs also before sorting finishes.
Thanks for any suggestions how to solve this problem. I am searching for a long time now but cannot find anything that helps.
EDIT: I already override the original DataGrid.Resources to provide a custom arrow-picture. I also have a complex custom header of AbstractCell<String> which supports runtime-operations and is rendered with DIV's and Image.
As you're using a ListHandler, and thus probably a ListDataProvider that will update the CellTable live (setRowData); because both ListDataProvider and CellTable (via the inner HasDataPresenter) use Scheduler#scheduleFinally(), then using Scheduler#scheduleDeferred() should be enough to guarantee that you run after them, but then you'll risk some flicker.
You could, in your custom ListHandler flush() the ListDataProvider, which will bypass one scheduleFinally and then use scheduleFinally to execute after the one of the CellTable (because flush() will call setRowData on the CellTable which will schedule the command; your command wil be scheduled after, so will run after).
You can manipulate the css resource using CellTable.Resources.
public interface TableResources extends CellTable.Resources {
#Source("up.png")
ImageResource cellTableSortAscending();
#Source("down.png")
ImageResource cellTableSortDescending();
#Source("MyCellTable.css")
CellTable.Style cellTableStyle();
}
In MyCellTable.css use the stylename and change your icon

GWT track modification on a set of input widgets

I have an application where the user can modify an entity, say customer, by modifying a bunch of text-boxes, list-boxes, date-pickers and check-boxes. I also have 2 buttons, save and cancel. I would like to enable the save button if an actual change was made (i.e. one of the input widgets has been modified). Obviously, this can be done in a "brute-force" way by manually adding a change listener to every widget. Or a slight improvement could be to define lists of widgets and add listeners in a for loop.
I am curious whether anyone has a more elegant solution?
Thanks,
Matyas
If you use UiBinder you can use something like:
#UiField TextBox textBoxA;
#UiField TextBox textBoxB;
#UiField TextBox textBoxC;
#UiField DatePicker datPickerA;
#UiField RadioButton radioButton;
...
#UiHandler(value={"textBoxA", "textBoxB", "textBoxC", "datePickerA"})
void somethingChanged(ChangeEvent e) {
// Enable your save button.
}
#UiHandler("radioButton")
void somethingClicked(ClickEvent e) {
// Enable your save button.
}

Gwt get Components

I have a Vertiacal panel object and This object contains many radiobuttons
So can i get those radioButton objects through Vertiacal panel object.
Maybe via iteration or ?
private void initCourse() {
coursePopupPanel.clear();
VerticalPanel verticalPanel = new VerticalPanel();
coursePopupPanel.setWidget(verticalPanel);
JsArray<JCourse> jCourseArray = JCourse.getList(stringMainData);
for (int i = 0; i < jCourseArray.length(); i++) {
final RadioButton courseRadioButton = new RadioButton("course");
courseRadioButton.setText(jCourseArray.get(i).getName());
courseRadioButton.getElement().setId(jCourseArray.get(i).getView());
verticalPanel.add(courseRadioButton);
//handler of course radio buttons
courseRadioButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
}
});
}
}
I have a reference to coursePopupPanel. but i have not reference to vertical panel, so can i get elements of vertical panel sonce holding reference to coursePopupPanel.
A GWT VerticalPanel is a subclass of ComplexPanel, an abstract class for Panels that contain more than one child widget. In ComplexPanel (and so inherited by VerticalPanel) are methods for getting the number of child widgets, getting references to them by index, and so on. You could build an iterator something like this:
Iterator<Widget> vPanelWidgets = myVerticalPanel.iterator();
while (vPanelWidgets.hasNext()){
Widget childWidget = vPanelWidgets.next();
if (childWidget instanceof RadioButton) {
...do stuff
}
}
I tend not to query a widget for its members. That ties me to the decisions I made about how to display the RadioButtons, following your example. What if you decide later to display your radio buttons in the cells of a FlexTable in order to control vertical and horizontal arrangement? To make that change means your widget iterator won't work. FlexTable is a Panel but not a ComplexPanel. The code I wrote above won't work if you decide to replace the VerticalPanel with a FlexTable.
If was to take something like this approach, I would keep my lists of related widgets (like a group of RadioButtons) in some sort of Java Collection. I pass that Collection to my presentation class, and inside there I write the code to do the layout. Usually that's a UiBinder class, with "#UiField(provided = true)" for these RadioButtons. The code in the presenter then associates the RadioButton elements of the Collection I passed in to the UiField placeholders for the RadioButtons in the UiBinder layout. So all my layout decisions are actually in the UiBinder xml file. If I decide to rip out my Vertical Panel and replace it with a FlexTable, I might not have to touch a single line of Java code, assuming I separated things out correctly.
[Actually, I would probably keep my decision to use RadioButtons inside the presentation layer, and inside the XML file in particular. That presentation class would fire a message on the EventBus to indicate the user had made a selection via a RadioButton ValueChangeHandler, and I wouldn't care if I used RadioButtons in a VerticalPanel or ToggleButtons in a FlexTable.]
You're not being to specific, add more details and maybe a code example.
I'm gonan try to guesstimate what you're trying to say here: You have a verticalPanel object. To it you add several radioButton objects. Later you want to retrive those radioButton objects (to maybe check if they're selected or not), right? There's several ways to do this. At any rate, why don't you check the code examples at the Gwt Showcase site here:
http://gwt.google.com/samples/Showcase/Showcase.html?locale=en_UM#!CwRadioButton
it has tons of visual examples, each with the attached code and css.
Since PopupPanel implements HasOneWidget interface you can coursePopupPanel.getWidget() to get a reference to your verticalPanel. And iterate widgets in it simply using
for (Widget w : verticalPanel){
//Do Stuff
}

Dynamically updating content of GWT Composite widgets

I created a widget that is a subclass of Composite and has a com.extjs.gxt.ui.client.widget.Viewport in it. Into this viewport I added my header component, a LayoutComponent (initially empty) and my footer component. I initialized the composite widget by calling initWidget at the end of the constructor that sets everything up ... something like this (some code removed for readability):
public class MyComposite extends Composite {
...
public MyComposite(...) {
viewport = new Viewport();
viewport.add(new Header());
content = new LayoutContainer();
viewport.add(content);
viewport.add(new Footer());
initWidget(viewport);
}
public void show(Widget... widgets) {
content.removeAll();
for (Widget widget: widgets) content.add(widget);
}
}
Then I add an instance of this to the RootPanel:
MyComposite myComposite = new MyComposite(...);
RootPanel.get("myComposite").add(myComposite);
And guess what... that works! I see it. The header shows, the footer shows, and the content is blank at this point. Good. Then I make the call to show and add stuff to it. Not exactly as follows but for example:
myComposite.show(new Label(...));
But nothing happens. The code does run, the add(...) method gets called from the show(...) method, there are no exceptions, but nothing (new) shows up. I don't use a Label, but that is not the problem (verified, that works elsewhere). When I inspect the DOM in the browser, I see that there is a div for the content, like there was initially, but it remained empty (i.e. no body content).
What am I missing?
Thanks!
First off, are you extending GWT Composite or GXT Composite? If it is the GXT type you will need to call initComponent() on the viewport (rather than initWidget) as described here: http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/Composite.html
Also, try adding the following line to the end of your show method:
content.layout(true);
This will force GXT to layour the contents of your LayoutContainer, and you should at least see the new elements added to the DOM. If they still don't appear on the screen you need to change your Layout of your LayoutContainer.

Dynamcially adding panels based on DropdownChoice selection

am a newbie to wicket and am experimenting few things with it, like, I have four panel but one only should be added based on the selection made in the DropdownChoice component.
i tried to add panels using onSelectChange() method, but it doesn't work. can any one please help me out with proper sample code.
I give you an example for this problem. Hope it helps.
DropDownChoice dropDown = new DropDownChoice(...........);
AjaxFormComponentUpdatingBehavior behavior = new AjaxFormComponentUpdatingBehavior(
"onchange") {
#Override
protected void onUpdate(AjaxRequestTarget target) {
//you should write here the logic that
// replaces the panel, something like: content.addOrReplace(panel)
target.addComponent(form);
}
};
dropDown.add(behavior);
So that's all, you have to use AjaxFormComponentUpdatingBehavior to handle onchange event. If the dropdown menu not a requirement, you can use tabbedpanel. Here you can find the sample code: wicket tabbed panel