GXT Textfield postfix - gwt

I try to build a simple form.
Calc: [____] bar
So the Textfield with the prefix is no problem. But the postfix "bar". Currenty I have no idea to fix this problem. Here ist the current code:
TextField<String> field = new TextField<String>();
field.setFieldLabel("Calc");
field.setAllowBlank(false);

The FormPanel renders all Fields in a LABEL: INPUTFIELD way.
To render other widgets within a FormPanel I would use the AdpaterField that contains the real TextField and the postfix.
HorizontalPanel container = new HorizontalPanel();
AdapterField field = new AdapterField(container);
field.setFieldLabel("Calc");
TextField<String> inputField = new TextField<String>();
inputField.setAllowBlank(false);
container.add(inputField);
container.add(new Html("bar"));

Related

how to validate Radio button in GWT

I have two radio buttons and text field and i want to have validator that one radio checked, the text field must not be null.
Here is the code:
radio1 = new Radio();
radio1.setBoxLabel("yes");
radio1.setId("active");
radio1.setValue(false);
radio2 = new Radio();
radio2.setBoxLabel("no");
radio2.setId("deactive");
radio2.setValue(true);
final RadioGroup defaultRadioGroup = new RadioGroup();
defaultRadioGroup.setFieldLabel("activeا");
defaultRadioGroup.add(radio1);
defaultRadioGroup.add(radio2);
simpleForm.add(defaultRadioGroup, formData);
labelField = new TextField<String>();
labelField.setEmptyText("please insert value");
labelField.setReadOnly(true);
You should write a new Validator for the textbox and then call textbox.validate()
Other option is to check if your textbox class supports any utility method like "allowEmpty(boolean)"

Change form item editor type dynamically in smartGwt

I have a smartGwt DynamicForm with a FormItem
FormItem item = createTextItem();
form.setFields(item);
After creating the and setting fields, I need to dynamically set an editor type for the item. I have to do it dynamically based on some conditions.
I'm calling item.setEditorType(new PasswordItem());
just after I call form.editRecord(record); so that the new editor type should appear. But it is not working.
Tried calling item.redraw() and is not working.
My goal is to set the editor type dynamically based on the record that is edited.Please help.
Try with Custom Data Binding (see page 23 for more details). What you tried won't work, AFAIK, because the ListGridField has already been created with the initial custom editor, and it can't be changed dynamically with setEditorCustomizer.
Take a look at this sample (based on this showcase demo), which does what you want to do to the password field when it is being edited in the DynamicForm, and after the changes have been saved (please pay attention to the comments, as without some of these settings it won't work as expected):
public void onModuleLoad() {
final DataSource dataSource = ItemSupplyLocalDS.getInstance();
final DynamicForm form = new DynamicForm();
form.setIsGroup(true);
form.setNumCols(4);
form.setDataSource(dataSource);
// very important for not having to set all fields all over again
// when the target field is customized
form.setUseAllDataSourceFields(true);
final ListGrid listGrid = new ListGrid();
listGrid.setWidth100();
listGrid.setHeight(200);
listGrid.setDataSource(dataSource);
listGrid.setAutoFetchData(true);
IButton editButton = new IButton("Edit");
editButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
form.editRecord(listGrid.getSelectedRecord());
// when the button is clicked, the password field is rendered with
// a plain text item editor, for easy verification of values entered
FormItem passwordField = new FormItem("passwordFieldName");
passwordField.setEditorProperties(new TextItem());
form.setFields(passwordField);
form.markForRedraw();
}
});
IButton saveButton = new IButton("Save");
saveButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
form.saveData();
// when the button is clicked, the password field is rendered with
// a password editor, for added privacy/security
FormItem passwordField = new FormItem("passwordFieldName");
passwordField.setEditorProperties(new PasswordItem());
form.setFields(passwordField);
form.markForRedraw();
}
});
VLayout layout = new VLayout(15);
layout.setWidth100();
layout.setHeight100();
layout.addMember(listGrid);
layout.addMember(editButton);
layout.addMember(form);
layout.addMember(saveButton);
layout.draw();
}

window.alert change title in gwt [duplicate]

This question already has answers here:
Change Title of Javascript Alert [duplicate]
(6 answers)
Closed 10 years ago.
when **
Window.alert
** is used in gwt, a window pops up with the message , I want to **
change the title
** of that window , Please help as I need it urgently
Window.alert() opens a native dialog box which contais OK button. You can not change the title of it.
Use PopupPanel or DecoratedPopupPanel or DialogBox
You cant change the title of that ..for that you need to look into another alternative ..
Below is one of them.
Here is a simple dialog box which is genreated from GWT sample code
// Create the popup dialog box
final DialogBox dialogBox = new DialogBox();
dialogBox.setText("Remote Procedure Call");
dialogBox.setAnimationEnabled(true);
final Button closeButton = new Button("Close");
// We can set the id of a widget by accessing its Element
closeButton.getElement().setId("closeButton");
final Label textToServerLabel = new Label();
final HTML serverResponseLabel = new HTML();
VerticalPanel dialogVPanel = new VerticalPanel();
dialogVPanel.addStyleName("dialogVPanel");
dialogVPanel.add(new HTML("<b>Sending name to the server:</b>"));
dialogVPanel.add(textToServerLabel);
dialogVPanel.add(new HTML("<br><b>Server replies:</b>"));
dialogVPanel.add(serverResponseLabel);
dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_RIGHT);
dialogVPanel.add(closeButton);
dialogBox.setWidget(dialogVPanel);
Add your lables and widgets in middle to get the desired dialog ..

Inserting GWT widget into a div element

I'm using a GWT library (gwt-openlayers) which allows me to create a map popup containing arbitrary HTML, similar to Google Maps. I need this HTML to contain a GWT Button widget.
I'm creating some HTML elements on-the-fly like this:
Element outerDiv = DOM.createDiv();
outerDiv.getStyle().setOverflow(Overflow.HIDDEN);
outerDiv.getStyle().setWidth(100, Unit.PCT);
outerDiv.appendChild(new HTML(mapPOI.getHtmlDetails()).getElement());
Button popupButton = new Button("View Property");
popupButton.getElement().getStyle().setFloat(com.google.gwt.dom.client.Style.Float.RIGHT);
outerDiv.appendChild(popupButton.getElement());
Then I'm getting the source HTML for these elements by calling
String src = outerDiv.toString();
and inserting this html into my map marker. Now my map marker displays the content ok, including the button. However, the button won't respond to any events! From what I can gather, this is because the buttons onAttach() method is never being called.
Is there a better way to do this?
Thanks,
Jon
~~~~EDIT~~~~
I'm now trying a new way of doing this, which seems to be the accepted method looking at other similar posts.
First I'm creating my div:
String divId = "popup-" + ref;
String innerHTML = "<div id=\"" +divId + "\"></div>";
Then I'm adding this to my map popup and displaying it (which adds it to the DOM). After the popup has been displayed, I'm getting the Element as follows and trying to wrap a HTMLPanel around it:
Element element = Document.get().getElementById(divId);
HTMLPanel popupHTML = HTMLPanel.wrap(element);
My div element is successfully retrieved. However, HTMLPanel.wrap(element); doesn't complete. The reason for this is that wrap(..) calls RootPanel.detachOnWindowClose(Widget widget), which includes the following assertions:
assert !widgetsToDetach.contains(widget) : "detachOnUnload() called twice "
+ "for the same widget";
assert !isElementChildOfWidget(widget.getElement()) : "A widget that has "
+ "an existing parent widget may not be added to the detach list";
I put some breakpoints in and it seems that the 2nd assertion is failing!
Does anybody have any idea why this might be the case? Should failing this assertion really result in a complete failure of the method (no return)?
Your first approach is good, you just need to register onClick event for your button like this:
DOM.sinkEvents(popupButton.getElement(), Event.ONCLICK);
DOM.setEventListener(popupButton.getElement(), new EventListener() {
#Override
public void onBrowserEvent(Event event) {
//implement the logic after click
}
});
I have checked this, it works 100%!
You might try something like
RootPanel.get("idOfYourMapMarker").add(popupButton);
See RootPanel.get()
Unfortunately, RootPanels are AbsolutePanels which aren't so nice for layout but could work if you just have a simple button to add. You could also try RootLayoutPanel which will give you a LayoutPanel (also not so nice when you just want things to flow). You might end up creating a container widget that does the layout for you, and adding that to the RootPanel.
SimplePanel is a DIV. Perhaps that can be used instead?
You added the element, but you have to keep the hierarchy of the actual GWT Widgets too.
I don't see a clean way to do this, but you could use something like jQuery to grab the button by and ID and add a click handler back to it that would call the original click handler.
private static native void registerEvents(String buttonId, MyClass instance)/*-{
var $ = $wnd.$;
//check click
$('#'+buttonId).live('click', function(e) {
e.preventDefault();
instance.#com.package.MyClass::handleButtonClick(Lcom/google/gwt/event/dom/client/ClickEvent;)(null);
});
}-*/;
Call this registerEvents() either in your onAttach or constructor.
I once had a similar problem. You can use the gwt-openlayer's MapWidget as follows:
private MapWidget createMapWidget() {
final MapOptions defaultMapOptions = new MapOptions();
defaultMapOptions.setDisplayProjection(DEFAULT_PROJECTION);
defaultMapOptions.setNumZoomLevels(TOTAL_ZOOM_LEVELS);
MapWidget mapWidget = new MapWidget(MAP_WIDGET_WIDTH, MAP_WIDGET_HEIGHT, defaultMapOptions);
map = mapWidget.getMap();
return mapWidget;
}
And then add it to any panel be it vertical or horizontal.
MapWidget mapWgt = createMapWidget();
VerticalPanel mainPanel = new VerticalPanel();
mainPanel.add(mapWgt);
...
... add whatever you want
...
You can finally add the created Panel(containing the MapWidget and the gwt widget) to the PopupPanel. Also, you should now be able to add handlers to the gwt button.

GWT - Can you nest FormPanels inside FormPanels?

I'm trying to nest a FormPanel inside another FormPanel. It seems that any field in the nested panel is never rendered.
This screenshot is produced by the code below it:
TabItem tabItem = new TabItem("Tab Item");
FormPanel formPanel = new FormPanel();
formPanel.setHeading("Form Panel");
formPanel.setFrame(true);
TextField textField = new TextField();
textField.setFieldLabel("Text Field");
FormPanel nestedPanel = new FormPanel();
nestedPanel.setHeading("Nested Panel");
TextField nestedField = new TextField();
nestedField.setFieldLabel("Nested Field");
nestedPanel.add(nestedField);
TextField anotherField = new TextField();
anotherField.setFieldLabel("Another Field");
formPanel.add(textField);
formPanel.add(nestedPanel);
formPanel.add(anotherField);
tabItem.add(formPanel);
tabPanel.add(tabItem);
Can anyone explain why the nested field does not show in the nested panel?
I've also tried using a CaptionPanel instead of a FormPanel as the nested panel, but the caption panel does not show the field label.
Any suggestions as to how I can get this to work would be most welcome. Thank you :)
As Jason mentioned, <form> cannot be nested. The GXT FormPanel draws a form as part of how it works, so consider drawing this layout in another way.
To emulate the appearance of the FormPanel, there are two basic steps.
To get the header, border, create a ContentPanel, and add the content to that
To get the GXT 2 layout of drawing the field labels, use a FormLayout in the content panel.
This will look something like this (from your example)
//...
ContentPanel nestedPanel = new ContentPanel(new FormLayout();
nestedPanel.setHeading("Nested Panel");
TextField nestedField = new TextField();
nestedField.setFieldLabel("Nested Field");
nestedPanel.add(nestedField);
//...
The outer field will still manage any binding, and the nested field will look as if they were in a FormPanel. If not using other features of the FormPanel, it may in general make more sense to use a ContentPanel (or LayoutContainer, if you don't want the border/header) with a FormLayout.