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
Related
What am I trying to do?
I have an existing page (generated by system automatically and I don't have any control on it) in which I am injecting GWT code to modify the behaviour of the page after it loads based on certain columns and augment the functionality of the page. For example after adding my GWT code, cells in one of the table columns become clickable and when the user clicks it, additional information is displayed to the user in a pop-up panel. All that is working fine.
What is the issue?
The generic page in which I am injecting my code has paginated table which shows 15 rows at a time. Now, when I load/refresh the page, my GWT code kicks in and sinks events in the specific column which adds functionality (described above) to the cells. However, when the user uses the left and right buttons to navigate the paginated result, the page does not refresh as it is an asynchronous call. The specific column in the new set of 15 rows is now without the sunk events as the GWT code does not know that the page changed.
I am trying to find a way to tell my GWT code that page has changed and it should sink events to the cells of specific column for the new 15 rows but unable to find any method or mechanism to help me capture a DOM/Document change event. I tried doing this but did not help:
new ChangeHandler(){
#Override
public void onChange(ChangeEvent event) {
Window.alert("Something Changed");
}
It is possible I am missing something very obvious. Posting this question to know if there is an easy way to figure out DOM changes in GWT. Have searched for DOM/Document change/mutation/ etc. without luck.
If anyone knows how to detect DOM changes in GWT would really appreciate otherwise would go ahead writing native code using native mutation observers.
You can try something like this:
First get the input elements with:
InputElement goOn = DOM.getElementById("IdOfGoOnButton").cast();
InputElement goBack = DOM.getElementById("IdOfGoBackButton").cast();
Next add a native EventHandler:
Event.addNativePreviewHandler(new Event.NativePreviewHandler() {
#Override
public void onPreviewNativeEvent(Event.NativePreviewEvent event) {
if (event.getTypeInt() == Event.ONCLICK) {
if (event.getNativeEvent()
.getEventTarget() != null) {
Element as = Element.as(event.getNativeEvent()
.getEventTarget());
if (as.getTagName()
.toLowerCase()
.equals("input")) {
InputElement clickedElement = as.cast();
if (clickedElement.getId().equals(goOn.getId()) ||
clickedElement.getId().equals(goBack.getId())) {
// one of the paging button is pressed
}
}
}
}
}
});
Hope that helps.
I would like to print a GWT widget which extends Composite. This widget is composed of a grid whose cells are built with a ListDataProvider. When the user clic on a button print, the widget to print is built. Once this is done, I launch the print:
Element element = widgetToPrint.getElement();
String content = element.getInnerHTML();
print(content);
public static native boolean print(String content)
/*-{
var mywindow = window.open('', 'Printing', '');
mywindow.document.write('<html><head><title>Test</title>');
mywindow.document.write('<link rel="stylesheet" href="/public/stylesheets/ToPrintWidget.css" type="text/css" media="all"/></head><body>');
mywindow.document.write(content);
mywindow.document.write('</body></html>');
mywindow.print();
return true;
}-*/;
So, here is my problem:
The window which is opened by this method contains the core of the widget (built by the UI Binder), but some children are missing...
If I look inside the ListDataProvider and its related FlowPanel, the data are consistent, i.e. I've got several item in my list and in the flowPanel.
Consequently, it should be visible on the printing window...
I thought that maybe the problem was related to the method used to print the widget, so I also tried to add this widget into a dialogbox just before launching the print, to see if the widget was properly built... and it was.
So my widget displays well on a dialogbox, but if I try to give its innerHTML to the print method, by using getElement(), some widgets are missing... I've the feeling that the widgets which should have been built when the ListDataProvider changes are not properly set in the DOM... Somehow it works when I add the widget to a regular component, but it doesn't work when I have to give directly its innerHTML...
Do you have any idea ?
Thanks in advance.
Widgets are not just the sum of their elements, and DOM elements are not just the string that they are serialized to. Widgets are the element, and all events sunk to the dom to listen for any changes or interactions by the user. Elements then have callback functions or handlers they invoke when the user interacts with them.
By serializing the element (i.e. invoking getInnerHTML()), you are only reading out the structure of the dom, not the callbacks, and additionally not the styles set by CSS. This probably shouldn't be expected to work correctly, and as your experience is demonstrating, it doesn't.
As this is just a print window you are trying to create, event handling is probably not a concern. You just want the ability to see, but not interact with, the content that would be in that set of widgets. Styles are probably the main problem here then (though your question doesn't specify 'some children are missing' doesn't tell us what is missing, or give us any more clues as to why...) - you are adding one stylesheet in your JSNI code, but CellTable (which I assume you are using since you reference ListDataProvider) needs additional CssResource instances to appear correctly. I'm not sure how you can hijack those to draw in a new window.
Are you only using this to print content, not to let the user directly interact with the data? If so, consider another approach - use a SafeHtmlBuilder to create a giant, properly escaped string of content to draw in the new window.
String content = element.toString();
This will include all hierarchy elements in the node.
Just a reminder, all the GWT handlers will not work, and you have to sink all the events using DOM.
You might want to grab the outer HTML rather than the inner one.
GWT unfortunately has no getOuterHTML, but it's relatively easy to emulate.
If your widget is the only child within an element, then simply get the inner HTML of the parent element (w.getElement().getParentElement().getInnerHTML())
Otherwise, clone your widget's node add it to a newly created parent element, from which you'll be able to get the inner HTML:
DivElement temp = Document.get().createDivElement();
temp.appendChild(w.getElement().cloneNode(true));
return temp.getInnerHTML();
First thank you for your answers, it helped me to work out this problem.
I've almost solve the problem:
First, I do not use ListDataProvider anymore, because it wasn't clear for me when and how the view was refreshed. Instead I add my widgets by hand, which makes sense since, they are not going to move anyway.
Then, I define the style of my widgets using a common CSS stylesheet. However, in order to do it, I can't rely on CssResource, which was the way I was used to do it with GWT. I think that this comes from the JS method which gets lost by this kind of styles... Instead, I have to specify everything in a static CSS stylesheet, and to give it to the JS.
It works perfectly well, ie, I have my widgets, with thei styles, and I can print it.
But...
The color of some widgets depends on the color of the object that they represent. Consequently, I cannot write a generic CSS stylesheet... And as I said, I can't add a style using CssResource... Do you have any ideas on the way to handle that ?
To make sure I'm clear on the way I'm adding styles, here is an example:
Label l = new Label("Here is a cell in my grid to be printed");
l.addStyleName("PrintLineCell-kind_1");
With, in a public CSS stylesheet:
.PrintLineCell-kind_1{
background-color: red;
}
I hope there is a better way than to write 300 styles to cover 300 different colors...
I am a newbie to GWT ... need some help in understanding the below class -
What is the use of GWT ClickableTextCell ??
Is there something specific use of it. It uses something called FieldUpdater, why is that used ?
Think of a ClickableTextCell as hot spot. It looks like a regular bit of screen real estate with text in it, but it responds to clicks. What happens when you click it? The click "updates" the field. An update to a field calls the method update(). What does update() do? Whatever you want it to. You provide it by specifying the FieldUpdater. FieldUpdater is an interface, so you can construct one anonymously. Say you have a CellTable, and you have a Column that displays a String inside a ClickableTextCell. You provide your FieldUpdater to the Column:
Column<DataType, String> myIntegerColumn
= new Column<DataType, String>(new ClickableTextCell());
myIntegerColumn.setFieldUpdater(new FieldUpdater<DataType, String>(){
#Override
public void update(int index, DataType object, String value){
// execute code that reacts to a click on this hot spot
}
});
Now whenever the cell gets clicked, that code in update() fires.
A ClickableTextCell is a specific kind of cell. You can see a demo of all the different kinds of cells in this GWT showcase.
This GWT documentation explains what cell widgets are for, goes over all of the different types, and also has examples of how to use them and the ValueUpdater type.
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
}
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.