Gwt get Components - gwt

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
}

Related

View size not match with layoutPanel container in GWT MVP and SmartGWT

I'm new in GWT, and have problem with view implementation... I use MVP, and SmartGWT. I'll expose this by defining how I settle my MVP and what its weird.
In my onModule, I define class builded with UIbinder. I've declared a LayoutPanel and set it like this in the constructor of the class.
layoutPanel = binder.createAndBindUi(this);
I have container in this class:
public void setBodyLayout() {
panel.setWidgetLeftWidth(menuPanel, xx, PCT, xxx, PCT);
panel.setWidgetRightWidth(bodyPanel, xx, PCT, xx, PCT);
}
menuPanel and bodyPanel are both simplePanel declared in the class above(UIfield use with UIbinder). There are in LayoutPanel. For the method display of my ActivityMapper I've got this method (In reality I have two ActivityMappers, two method that like below and two containers, for menu and body)
public AcceptsOneWidget getBodyContainer() {
return new AcceptsOneWidget() {
#Override
public void setWidget(IsWidget w) {
Widget widget = Widget.asWidgetOrNull(w);
bodyPanel.setWidget(widget);
}
};}
return in my onModule, I declared my ActivityMapper like this
BodyActivityMapper bodyContainerActivityMapper = new BodyActivityMapper(clientFactory);
ActivityManager bodyContainerActivityManager = new ActivityManager(bodyContainerActivityMapper, eventBus);
bodyContainerActivityManager.setDisplay(my_class_described_above.getBodyContainer());
the same work was done with MenuActivityMapper...
Finally
RootLayoutPanel.get().add(my_class_described_above.getLayoutPanel());
when getLayoutPanel() return my layoutPanel declared in the class that I have declared above.
So, each region have its own ActivityMapper.ActivityMapper for the menu have only one activity, and "ActivityMapperBody" have sevral activities triggered by menu.
Utility of container are to settle my layout for different "action". I defined zone with it, in order to receive view started with activity.
But this configuration work only with view builded with UIbinder... In each view, I declare a Layout and return it like this
public Widget asWidget() {
return my_layout_declared;
}
When I return my layout, nothing works. I really don't understand why, and I figure that its worse with smartgwt. All I want its just retrieve my layout and put it in my container... Work with smartgwt can save a lot of time...
I've more detailed my issue to make sure that anyone understand. And ask to you Chris Lercher if your post can help me.
Thank for reading
The Smart GWT FAQ mentions a solution:
If you absolutely must place a Smart GWT interface inside a GWT container and you want it to
fill the container, the best approach is to listen for a window-level resize event and run
your own layout calculations that ultimately call resizeTo() on your topmost Smart GWT
widget.
However, it is wrong by saying that
...GWT containers [do not] fire events when they are resized
Layout panels (the "new" panels since GWT 2.0, which was released on Dec 08, 2009) actually do (see the ProvidesResize and RequiresResize interfaces). So if you have such a panel as your MVP body container (and if its parents are also LayoutPanels up to a top RootLayoutPanel), then you can also override the body container's onResize() method instead of listening to the Window resize event.
So how can you solve your concrete problem?
You need to call resizeTo(width, height) on your topmost Smart GWT layout
When you put in a (new) Smart GWT layout, e.g. maybe you put in a new one when the Place changes.
When the window resizes, or when other things happen that change the size of the container (alternatively, if you're using Layout Panels, you can use its onResize())
For the resizeTo(width, height) call, you'll have to determine the width and height by asking the surrounding container, e.g. by using
container.getElement().getClientWidth()

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 Tree Item:How to add image to tree item?

I am using gwt 2.3 version.I am using gwt tree in my application.
Here is my code:
public void onModuleLoad() {
// Create a tree with a few items in it.
TreeItem root = new TreeItem("root");
root.addItem("item0");
root.addItem("item1");
root.addItem("item2");
// Add a CheckBox to the tree
TreeItem item = new TreeItem(new CheckBox("item3"));
root.addItem(item);
Tree t = new Tree();
t.addItem(root);
// Add it to the root panel.
RootPanel.get().add(t);
}
There is a item with check box.I want add image to this tree item.But I am not able to do this as I already added one widget check box.Is there any other way add image to tree item with check box??
TreeItem has a TreeItem(Widget w) constructor.
You can put anything you want in there. So write a small widget that has an image and text next to each other in a div and the Tree will render it correctly.
You are already using it in your example code. So just write one more widget that combines the CheckBox with an image in a FlowPanel or HorizontalPanel. Whatever you want.
This is something that made me whack my head for a while also. Basically I found 2 options:
Use SmartGWT, it has nice customizable tree widgets that let you change the pictures of the nodes:
http://www.smartclient.com/smartgwt/showcase/#tree_databinding_local
Use GWT's tree-image:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/TreeImages.html
If you ask me, SmartGWT is somewhat demanding and rigid, and you might not like the fact that it doesn't let you go to the low leves like GWT does but it does have a nice set of customizable tree widgets. TreeImage on the other hand lets you still work with pure GWT (which I think is better overall), but it doesn't let you customize the tree as much as Smart GWT does

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.

GWT Accessing Widget Methods without knowing the name of the Widget

This may have been asked before but I have no idea how to word it to search for it.
I have a composite widget that has methods to update some of the widgets that make up the composite widget. When I add this composite widget to my panel I use a do while loop to pull data from an XML file and populate the composite data. When I instantiate the object each time to add the data it has a scope local to the do-while loop and I cannot call methods to update the data in the composite widget later on. Is there maybe a way to make an array of these composite widgets or another solution to be able to access the Widget?
Eric
Sure... use
List<Composite> widgetList = new ArrayList<Composite>();
// loop
widgetList.add(widget);
// end loop
widgetList.get(3).toString();
You'll want to use your custom class instead of Composite in the list generic... there's nothing stopping you from making data structures using widgets, just like you would with any other Java class.
If you are putting all your Widgets in that loop into one panel (presumably on of the subclasses of ComplexPanel, since you are adding many Widgets to one panel), then you could use one of the methods to access Widgets contained within a panel (assuming you add only those XML generated Widgets to the panel and nothing more):
com.google.gwt.user.client.ui.ComplexPanel.iterator() - returns an java.util.Iterator<Widget> you can use to traverse the list of Widgets within that Panel
com.google.gwt.user.client.ui.ComplexPanel.getWidgetCount() and getWidget(int index) can be used in a for loop to go through all the Widgets within a panel
So, let's look at an example:
VerticalPanel vPanel = new VerticalPanel();
// Fill up the vPanel using XML
Iterator<Widget> iterator = vPanel.iterator();
while(iterator.hasNext()) {
Widget w = iterator.next();
// Do something with w
}
// Or...
for (int i = 0; i < vPanel.getWidgetCount(); i++) {
Widget w = vPanel.getWidget(i);
// Do something with w
}
Of course, substitute VerticalPanel with the one you are you using :)
I definately recommend that you watch "Best Practices for Architecting GWT App" (from Google I/O 2009):
http://www.youtube.com/watch?v=PDuhR18-EdM
At about 24 minutes through it talks about how to write composite widgets using the MVP design pattern - although you should watch it all. Unfortunately it does not provide ready to use code snipets, but it does show you how to construct a framework to decouple your XML and UI objects nicely.