I'm trying to get used to GWT and UiBinder at the moment. But I can't solve this problem.
An example to show you what I mean:
MainMenu.ui.xml
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:gwt="urn:import:com.google.gwt.user.client.ui" xmlns:my="urn:import:com.wn.webapp.client.UiBinder">
<gwt:VerticalPanel>
<my:TopMenu/>
<gwt:VerticalPanel>
<gwt:HTMLPanel>
<gwt:TextBox/>
</gwt:HTMLPanel>
<my:ItemList/>
<my:PageMenu/>
</gwt:VerticalPanel>
</gwt:VerticalPanel>
</ui:UiBinder
I created a MainMenu and embedded some ui.xml files into it. This works fine. The website looks good.
But how can I do this?
This is the code for my PageMenu.ui.xml file, which I embedded into MainMenu.ui.xml .
public class PageMenu extends Composite{
private static PageMenuUiBinder uiBinder = GWT.create(PageMenuUiBinder.class);
interface PageMenuUiBinder extends UiBinderWidget, PageMenu{}
public PageMenu(){
initWidget(uiBinder.createAndBindUi(this));
}
public void setButtonText(ArrayListString textIds){
//doessomething
}
}
Now I want to call for ex. the setButtonText() method in onModuleLoad().
public void onModuleLoad()
{
MainMenu mainmenu = new MainMenu();
RootPanel.get().add(this.mainmenu);
// call it here (setButtonText())
}
How can I do this?
Greetings
Laura (I'm not such an experienced programmer yet. So pls be aware of that, when you try to answer :D) THX
To get access to the button.setText() you must have access to the button first. So, your PageMenu.ui.xml must have something like:
<gwt:Button ui:field="button" />
and your PageMenu.java must have the field declaration:
#UiField
Button button;
Implement the getters for the PageMenu (at MainMenu) and for the button (at PageMenu), then you can do:
public void onModuleLoad()
{
MainMenu mainmenu = new MainMenu();
RootPanel.get().add(this.mainmenu);
mainmenu.getPageMenu().getButton().setText("What you want.");
}
You have to create 2 accessors :
getButton() in PageMenu.java
getPageMenu() in MainMenu.java
You now can call it with
mainMenu.getPageMenu().getButton().setText("your text");
Related
I have a CellList that I want to style. I want to change the cursor style, the ugly color of a selected cell . I checked several questions and discussions on stack overflow,but none of them worked.
I checked these one:
CellList GWT CSS Style
How do I style a gwt 2.1 CellTables headers?
Her is my code:
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {
}
#Source({CellList.Style.DEFAULT_CSS, "CellTableStyle.css"})
CellListStyle style();
}
public SearchViewImpl() {
CompanyCell companyCell = new CompanyCell();
//it doesn't work :S
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
rootElement = ourUiBinder.createAndBindUi(this);
loadingImage.setVisible(false);
}
Am I missing something? I Cleared Browser cache, Restarted server, F5 F5 F5 .... F5 (pressed refresh again and again) and nothing ...!
Thanks for help in advance.
Besides injecting the CSS it's important that you call the CellListStyle style cellListStyle() and not just style():
public interface CellListResource extends CellList.Resources {
public static CellListResource INSTANCE = GWT.create(CellListResource.class);
interface CellListStyle extends CellList.Style {}
#Override
#Source("cellListStyle.css")
CellListStyle cellListStyle();
}
and then you do
CellListResource.INSTANCE.cellListStyle().ensureInjected();
companiesList = new CellList<Company>(companyCell, CellListResource.INSTANCE);
Make sure you inject the css resource.
CellTableResources.INSTANCE.cellTableStyle().ensureInjected();
myCellTable = new CellTable<T>(Integer.MAX_VALUE,CellTableResources.INSTANCE);
You can follow the following link
How do you change the mouse over highlighting?
I'm using GWT 2.4 with JUnit 4.8.1. When writing my class that extends GWTTestCase, I want to simulate clicking on a button on the page. Currently, in my onModuleLoad method, this button is only a local field ...
public void onModuleLoad() {
final Button submitButton = Button.wrap(Document.get().getElementById(SUBMIT_BUTTON_ID));
...
// Add a handler to send the name to the server
GetHtmlHandler handler = new GetHtmlHandler();
submitButton.addClickHandler(handler);
How do I simulate clicking on this button from the GWTTestCase? Do I have to expose this button as a public member accessor is there a more elegant way to access it? Here is what I have in my test case so far ...
public class GetHtmlTest extends GWTTestCase {
// Entry point class of the GWT application being tested.
private Productplus_gwt productPlusModule;
#Override
public String getModuleName() {
return "com.myco.clearing.productplus.Productplus_gwt";
}
#Before
public void prepareTests() {
productPlusModule = new Productplus_gwt();
productPlusModule.onModuleLoad();
} // setUp
#Test
public void testSuccessEvent() {
// TODO: Simulate clicking on button
} // testSuccessEvent
}
Thanks, - Dave
It can be as easy as buttonElement.click() (or ButtonElement.as(buttonWidget.getElement()).click(), or ButtonElement.as(Document.get().getElementById(SUBMIT_BUTTON_ID)).click())
But remember that a GWTTestCase doesn't run in your own HTML host page, but an empty one, so you'll first have to insert your button within the page before simulating your module's load.
gwt-test-utils seems to be the perfect framework to answer your need. Instead of inheriting from GWTTestCase, extend the gwt-test-utils GwtTest class and implement your click test with the Browser class, like shown in the getting starting guide :
#Test
public void checkClickOnSendMoreThan4chars() {
// Arrange
Browser.fillText(app.nameField, "World");
// Act
Browser.click(app.sendButton);
// Assert
assertTrue(app.dialogBox.isShowing());
assertEquals("", app.errorLabel.getText());
assertEquals("Hello, World!", app.serverResponseLabel.getHTML());
assertEquals("Remote Procedure Call", app.dialogBox.getText());
}
If you want to keep your button private, you'd be able to retrieve it by introspection. But my advice is to make you view's widgets package protected and to write your unit test in the same package so it could access them. It's more convinent and refactoring-friendly.
gwt-test-utils provide introspection convinence. For example, to retrieve the "dialogBox" field which could have been private, you could have do this :
DialogBox dialogBox = GwtReflectionUtils.getPrivateFieldValue(app, "dialogBox");
But note that using GwtReflectionUtils is not mandatory. gwt-test-utils allows you to use ANY java classes in GWT client side tests, without restriction :)
You can do it like this:
YourComposite view = new YourComposite();
RootPanel.get().add(view);
view.getSubmitButton.getElement().<ButtonElement>cast().click();
lets say i have a custom widget which has a ClickHandler. Here's the example:
public class TestWidget extends Composite {
private static TestWidgetUiBinder uiBinder = GWT
.create(TestWidgetUiBinder.class);
interface TestWidgetUiBinder extends UiBinder<Widget, TestWidget> {
}
#UiField
Button button;
public TestWidget(String firstName) {
initWidget(uiBinder.createAndBindUi(this));
button.setText(firstName);
}
#UiHandler("button")
void onClick(ClickEvent e) {
Window.alert("Hello!");
}
}
When i try to add this Widget like this:
TestWidget testWidget = new TestWidget("myTestWidget");
RootPanel.get().add(testWidget);
everything is fine. If i click on my button i get the message i expect.
However if i add it like this:
TestWidget testWidget = new TestWidget("myTestWidget");
RootPanel.getBodyElement().appendChild(testWidget.getElement());
my click event is not being fired. I'm struggeling to understand why.
It would be nice if someone could explain this to me or link me to an resource where i can read this up. Finally i would like to know if it is possible to add the clickhandler afterwards i appended the child event and if that way is recommended. Thanks it advance for help.
kuku
When you call add(), Widget.onAttach() is called on the widget that is being added to the panel. onAttach does some work to register the widget to receive events. appendChild() simply attaches one DOM element to another and does nothing else. You should be able to get events working in the second case by doing this:
Element element = testWidget.getElement();
RootPanel.getBodyElement().appendChild(element);
DOM.sinkEvents(element,
Event.getTypeInt(ClickEvent.getType().getName())
| DOM.getEventsSunk(element);
However, I haven't tested this and I wouldn't recommend that you use it in a real application. Using add() is definitely preferred, using appendChild() in this way has no advantages and may lead to unexpected behaviour.
I'm writing a widget with the following markup:
<g:HTMLPanel ui:field="shortcutPanel" styleName="{style.shortcut}">
<g:Image ui:field="shortcutImage"></g:Image>
<span ui:field="shortcutLabel"></span>
</g:HTMLPanel>
So essentially a div that wraps and image and a label. Now, instead of adding the event handlers on the image/span, I'd like an onClick to be associated with the HTMLPanel. My problem however is that gwt tells me that
shortcutPanel doesn't not have an addClickHandler method associated
So I'm assuming the difference is that HTMLPanel doesn't implement HasClickHandlers or something along that line. I'm wondering then what is the standard way to attach a click handler to a Ui element such as an HTMLPanel or even better, is there such a GWT Widget that is essentially a div wrapper that I can easily attach events to with the #UiHandler annotation.
You are probably looking for FocusPanel - it has all the goodies: HasAllFocusHandlers, HasAllKeyHandlers, HasAllMouseHandlers, HasBlurHandlers, HasClickHandlers.... to name a few :) I find it to be the easiest and best way to attach click handlers to a Panel.
I haven't done this before, but you could do the following:
Create a custom class MyPanel that extends HTMLPanel and implements HasClickHandlers
Add the following method in MyPanel.java
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
Then replace HTMLPanel with MyPanel in your ui.xml and its corresponding Java implementation.
You can always look at the implementation of HTMLTable to get an understanding of how the event propagation works. It's a Panel and implements HasClickHandlers.
If you want to use the #UiHandler annotation to register event handlers for your custom widget, you need to re-implement the addXXHandler methods. The GWT compiler doesn't seem to find those in superclasses. e.g. if you want to use
#UiHandler("myCustomWidget")
public void handleWidgetSelectionChangeEvent(final SelectionEvent<CountryDts> event) {
...
}
and your CustomWidget extends a class for which this is working, you might need to add the HasSelectionHandlers interface explicitly to your class:
public class CustomComboBox<D> extends ComboBox<D> implements HasSelectionHandlers<D> {
#Override
#SuppressWarnings("pmd.UselessOverridingMethod")
public HandlerRegistration addSelectionHandler(final SelectionHandler<D> handler) {
// GWT Compile doesn't recognize method in supertype for UIHandler
return super.addSelectionHandler(handler);
}
...
}
I would like to implement menus (MenuBar, MenuItem) using the declarative approach via UiBinder in GWT 2.0.
I have run into two problems:
Is there a way to add MenuItemSeparators in the .ui.xml file? So
far, I have only managed to put MenuBar- and MenuItem-tags into the
file.
Using #UiHandler, GWT writes the boilerplate code for event
handlers for me. For menus, I need to write commands. How am I
supposed to do this using the UiBinder approach? Is there a command
tag to put in the .ui.xml file? Do I have to write the boilerplate
code for the command handlers myself?
Thanks for thinking about these questions!
I agree, if you try to put a MenuItemSeparator in, it will complain stating only a MenuItem can be a child when GWT tries to create the widget . Since this is not currently supported, I suggest that you request this as a future enhancement to the GWT team.
In the meantime, you can add a separator programmatically and add a command in the following manner:
The XML file:
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<g:MenuBar ui:field="menuBar">
<g:MenuItem ui:field="helpMenuItem">Help</g:MenuItem>
<g:MenuItem ui:field="aboutMenuItem">About</g:MenuItem>
<g:MenuItem ui:field="siteMapMenuItem">Site Map</g:MenuItem>
</g:MenuBar>
</g:HTMLPanel>
The Java file(s):
public class Menu extends Composite {
...
#UiField MenuBar menuBar;
#UiField MenuItem helpMenuItem;
...
public Menu() {
initWidget(uiBinder.createAndBindUi(this));
// insert a separator
menuBar.insertSeparator(1);
// attach commands to a menu item
helpMenuItem.setCommand(new MenuCommand(HistoryToken.Help));
...
}
public class MenuCommand implements Command {
final HistoryToken historyToken;
public MenuCommand(HistoryToken historyToken) {
this.historyToken = historyToken;
}
#Override
public void execute() {
historyToken.fire();
}
}
public enum HistoryToken {
Help,About,SiteMap;
public void fire(){
History.newItem(this.toString());
}
}
Elsewhere in my code, I implemented a HistoryListener to catch any changes, i.e.
class HistoryManager implements ValueChangeHandler<String> {
// 1. get token
// 2. change it into a HistoryToken
// 3. perform switch statement
// 4. change contents based upon HistoryToken found
...
}
For (1) JavaDoc says:
Use in UiBinder Templates
MenuBar elements in UiBinder template files can have a vertical boolean attribute (which defaults to false), and may have only MenuItem elements as children. MenuItems may contain HTML and MenuBars.
For example:
<g:MenuBar>
<g:MenuItem>Higgledy
<g:MenuBar vertical="true">
<g:MenuItem>able</g:MenuItem>
<g:MenuItem>baker</g:MenuItem>
<g:MenuItem>charlie</g:MenuItem>
</g:MenuBar>
</g:MenuItem>
<g:MenuItem>Piggledy
<g:MenuBar vertical="true">
<g:MenuItem>foo</g:MenuItem>
<g:MenuItem>bar</g:MenuItem>
<g:MenuItem>baz</g:MenuItem>
</g:MenuBar>
</g:MenuItem>
<g:MenuItem><b>Pop!</b>
<g:MenuBar vertical="true">
<g:MenuItem>uno</g:MenuItem>
<g:MenuItem>dos</g:MenuItem>
<g:MenuItem>tres</g:MenuItem>
</g:MenuBar>
</g:MenuItem>
</g:MenuBar>
Taking the hint from the words "only MenuItem elements as children", my guess is that MenuItemSeparators are not supported
Here's an example of my solution to this, which seems to work pretty well with GWT 2.4.0.
UiBinder:
<g:MenuBar vertical='true' ui:field='mainMenu'>
<g:MenuItem ui:field='item1'>Item 1</g:MenuItem>
<g:MenuItem ui:field='item2'>Item 2</g:MenuItem>
<g:MenuItemSeparator />
<g:MenuItem ui:field='sub' enabled='false'>
Submenu
<g:MenuBar vertical='true' ui:field='subMenu' />
</g:MenuItem>
</g:MenuBar>
Java:
#UiField MenuItem item1;
#UiField MenuItem item2;
#UiField MenuBar subMenu;
#UiField MenuItem sub;
...
this.setWidget(uiBinder.createAndBindUi(this));
item1.setCommand(new Command() {
public void execute() {
History.newItem("item1");
}
});
Overall not too bad.
I know this question is OLD, but I keep running across this question in my google searches, so i thought it would be important to note that although i haven't seen it documented anywhere yet, i have been using:
<g:MenuItemSeparator/>
successfully in my uibinder template. The gwt eclipse plugin gives me a red error marker, but the MenuItemSeparator compiles and shows up ok. I'm using gwt 2.1.
Just thought someone might be interested to know.
Unfortunately I haven't seen a solution for #2 yet - but I hope they give us something soon.
It is possible to add a menuItemSeparator in the ui.xml file. Here is an example with separator and submenu from the official GWT-API page.
Well, i think i found a way to implement this. (This is a solution if you want to declare the separator inside the *.ui.xml file. )
HocusView.java
...
#UiField MenuBar menuBar;
#UiField MenuItem item1;
#UiField MenuItem item2;
#UiField MenuItem item3;
#UiField MenuItem item4;
...
private static HocusViewUiBinder uiBinder = GWT.create(HocusViewUiBinder.class);
#UiTemplate("Hocus.ui.xml")
interface HocusViewUiBinder extends UiBinder<Widget, HocusView>{}
public HocusView()
{
initWidget(uiBinder.createAndBindUi(this));
// Attach commands to menu items
menuItem1.setScheduledCommand(cmd_menuItem1);
menuItem2.setScheduledCommand(cmd_menuItem2);
menuItem3.setScheduledCommand(cmd_menuItem3);
menuItem4.setScheduledCommand(cmd_menuItem4);
}
Command cmd_menuItem1= new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
Command cmd_menuItem2 = new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
Command cmd_menuItem3 = new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
Command cmd_menuItem4 = new Command(){
#Override
public void execute() {
Window.alert(" Gifts ");
}
};
});
HocusView.ui.xml
<gwt:MenuBar ui:field="menuBar" >
<gwt:MenuItem ui:field="menuItem1">Search</gwt:MenuItem>
<gwt:MenuItemSeparator></gwt:MenuItemSeparator>
<gwt:MenuItem ui:field="menuItem2">Ingestion</gwt:MenuItem>
<gwt:MenuItemSeparator></gwt:MenuItemSeparator>
<gwt:MenuItem ui:field="menuItem3">Analysis</gwt:MenuItem>
<gwt:MenuItemSeparator></gwt:MenuItemSeparator>
<gwt:MenuItem ui:field="menuItem4">About</gwt:MenuItem>
</gwt:MenuBar>
Its as simple as that.This will add a separator between the menu items.
Cheers!