GWT 2.5.1: dynamic required field indicator - gwt

What would be a better approach for displaying a dynamic required field indicator (in my case, display a '*' next to the field IF it is empty, hide it if the user type something, display it again if the user clears the input field) ?
The indicator is called requiredFieldHighlight in the code below.
MyValueBoxEditorDecorator.java
public class MyValueBoxEditorDecorator<T> extends Composite implements HasEditorErrors<T>,
IsEditor<ValueBoxEditor<T>>
{
interface Binder extends UiBinder<Widget, MyValueBoxEditorDecorator<?>>
{
Binder BINDER = GWT.create(Binder.class);
}
#UiField
DivElement label;
#UiField
SimplePanel contents;
#UiField
DivElement requiredFieldHighlight;
#UiField
DivElement errorLabel;
private ValueBoxEditor<T> editor;
private ValueBoxBase<T> valueBox;
/**
* Constructs a ValueBoxEditorDecorator.
*/
#UiConstructor
public MyValueBoxEditorDecorator()
{
initWidget(Binder.BINDER.createAndBindUi(this));
}
public MyValueBoxEditorDecorator(int dummy)
{
this();
valueBox = (ValueBoxBase<T>) new TextBoxTest(requiredFieldHighlight);
this.editor = valueBox.asEditor();
valueBox.addValueChangeHandler(new ValueChangeHandler<T>()
{
#Override
public void onValueChange(ValueChangeEvent<T> event)
{
MyValueBoxEditorDecorator.this.onValueChange();
}
});
contents.add(valueBox);
MyValueBoxEditorDecorator.this.onValueChange();
}
private void onValueChange()
{
T value = editor.getValue();
if (value == null)
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.INLINE_BLOCK);
return;
}
else
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.NONE);
}
}
public ValueBoxEditor<T> asEditor()
{
return editor;
}
public void setEditor(ValueBoxEditor<T> editor)
{
this.editor = editor;
}
#UiChild(limit = 1, tagname = "valuebox")
public void setValueBox(ValueBoxBase<T> widget)
{
contents.add(widget);
setEditor(widget.asEditor());
}
#Override
public void showErrors(List<EditorError> errors)
{
// this manages the content of my errorLabel UiField
}
}
UiBinder file:
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style src="common.css" />
<g:HTMLPanel width="100%">
<div ui:field="label" class="{style.label}"/>
<g:SimplePanel ui:field="contents" stylePrimaryName="{style.contents}" />
<div class="{style.errorLabel}" ui:field="errorLabel" />
<div class="{style.errorLabel} {style.requiredFieldHighlight}" ui:field="requiredFieldHighlight">*</div>
</g:HTMLPanel>
</ui:UiBinder>
The issue with my approach is that onValueChange() will not be called when my screen is initialized (before the user interacts with this widget), although I need the MyValueBoxEditorDecorator to update the status of its 'requiredFieldHighlight' !
This is why I created that TextBoxTest class. I simply pass it a reference to the indicator DivElement object and overload setText+setValue.
TextBoxTest.java
public class TextBoxTest extends TextBox
{
#Override
public void setText(String text)
{
super.setText(text);
updateRequiredFieldHighlight(text);
}
private final DivElement requiredFieldHighlight;
public TextBoxTest(DivElement requiredFieldHighlight)
{
super();
this.requiredFieldHighlight = requiredFieldHighlight;
}
private void updateRequiredFieldHighlight(String withValue)
{
if (withValue != null && !withValue.isEmpty())
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.NONE);
}
else
{
requiredFieldHighlight.getStyle().setDisplay(Style.Display.INLINE_BLOCK);
}
}
#Override
public void setValue(String value, boolean fireEvents)
{
super.setValue(value, fireEvents);
updateRequiredFieldHighlight(value);
}
}
I have several problems with that approach. First, it creates a dependency to another specific class of mine (TextBoxTest), and second, it does not really work properly because setText() is not automagically called by GWT when I clear the contents of the text field using the GUI ! In other words for the indicator to work properly, I need BOTH to overload setText+setValue in the TextBoxTest class and have to ValueChangeHandler added to my MyValueBoxEditorDecorator object. Why ? (and where would be the right event / place to handle a text change ?)
20150629 update: actually setValue() IS called when my screen is initialized. My valueChangeHandler is not triggered, 'though, due to GWT internals (I think due to setValue() provided without a fireEvents flag calling fireEvents overload with a False fireEvent flag).

Related

propertyChange not called when restoring default values

I am building a preference page extending the FieldEditorPreferencePage class.
This is the code (some obvious code not displayed):
public class PreferencePage extends FieldEditorPreferencePage implements IWorkbenchPreferencePage {
public static final String PREF_KEY_1 = "checkBoxPref";
public static final String PREF_KEY_2 = "filePref";
private FileFieldEditor pathField;
private BooleanFieldEditor yesOrNoField;
private Composite pathFieldParent;
#Override
public void init(IWorkbench workbench) {
setPreferenceStore(new ScopedPreferenceStore(InstanceScope.INSTANCE, Activator.PLUGIN_ID));
}
#Override
protected void createFieldEditors() {
this.yesOrNoField = new BooleanFieldEditor(PREF_KEY_1, "Check this box!", getFieldEditorParent());
this.pathFieldParent = getFieldEditorParent();
this.pathField = new FileFieldEditor(PREF_KEY_2, "Path:", this.pathFieldParent);
addField(this.yesOrNoField);
addField(this.pathField);
boolean isChecked = getPreferenceStore().getBoolean(PREF_KEY_1);
updatePathFieldEnablement(! isChecked);
}
/**
* Updates the fields according to entered values
*/
private void updatePathFieldEnablement(boolean enabled) {
this.pathField.setEnabled(enabled, this.pathFieldParent);
}
#SuppressWarnings("boxing")
#Override
public void propertyChange(PropertyChangeEvent event) {
if (event.getProperty().equals(FieldEditor.VALUE) && event.getSource() == this.yesOrNoField) {
updatePathFieldEnablement(! (boolean) event.getNewValue());
}
super.propertyChange(event);
}
}
The propertyChange method is there to enable/disable the FileFieldEditor depending on the BooleanFieldEditor value.
It works OK if I change the BooleanFieldEditor valeu by checking or unchecking it, but the propertyChange is not called when I hit the "Restore default values" button.
Do someone see a reason for that?
OK, I think I've got my response.
I went further in my investigation and I got to this code which seems suspect to me:
In class BooleanFieldEditor :
#Override
protected void doLoadDefault() {
if (checkBox != null) {
boolean value = getPreferenceStore().getDefaultBoolean(getPreferenceName());
checkBox.setSelection(value);
wasSelected = value;
}
}
and in class StringFieldEditor
#Override
protected void doLoadDefault() {
if (textField != null) {
String value = getPreferenceStore().getDefaultString(
getPreferenceName());
textField.setText(value);
}
valueChanged();
}
We can see that the FileFieldEditor (that inherits from StringFieldEditor) launches an PropertyChangeEvent to its listeners (valueChanged();) but not the BooleanFieldEditor. I did not find any code indicating that BooleanFieldEditor are using another mechanism. I think this is a bug in jFace.
To get around this problem, I just had to override the FieldEditorPreferencePage#performDefaults method and the result's fine.

How to add form elements in gwt-bootstrap3

I am trying to add some elements in gwt-bootstrap3 modal [link], I am using UI-binder to generate the screen but nothing is appear.
my ui binder class
<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:b='urn:import:org.gwtbootstrap3.client.ui'
xmlns:res="urn:with:com.db.cary.client.resources.CSSResources">
<ui:with type="com.db.cary.client.resources.CSSResources" field="res">
</ui:with>
<b:Modal closable="true" fade="true" dataBackdrop="TRUE" dataKeyboard="true">
<b:ModalBody>
<b:Form type="HORIZONTAL">
<b:FieldSet>
<b:Legend>Please enter the book detail</b:Legend>
<b:FormGroup>
<b:FormLabel for="bookTitle" addStyleNames="col-lg-2">Title</b:FormLabel>
<g:FlowPanel addStyleNames="col-lg-10">
<b:TextBox placeholder="Enter book Title" ui:field="titleTextBox" />
</g:FlowPanel>
</b:FormGroup>
<b:FormGroup>
<b:FormLabel for="bookAuthor" addStyleNames="col-lg-2">Author</b:FormLabel>
<g:FlowPanel addStyleNames="col-lg-10">
<b:ListBox ui:field="authorListBox" />
<b:Button ui:field="newAuthorButton" type="LINK" size="EXTRA_SMALL">New author</b:Button>
</g:FlowPanel>
<g:FlowPanel addStyleNames="col-lg-offset-2 col-lg-10">
<b:TextBox ui:field="authorTextBox" placeholder="enter slash (/) separated list of authors"></b:TextBox>
</g:FlowPanel>
</b:FormGroup>
<b:FormGroup>
<b:FormLabel for="bookCategory" addStyleNames="col-lg-2">Category</b:FormLabel>
<g:FlowPanel addStyleNames="col-lg-10">
<b:ListBox ui:field="categoryListBox" />
<b:Button ui:field="newCategoryButton" type="LINK" size="EXTRA_SMALL">New Category</b:Button>
</g:FlowPanel>
<g:FlowPanel addStyleNames="col-lg-offset-2 col-lg-10">
<b:TextBox ui:field="categoryTextBox" placeholder="enter category"></b:TextBox>
</g:FlowPanel>
</b:FormGroup>
</b:FieldSet>
</b:Form>
</b:ModalBody>
<b:ModalFooter>
<b:Button type="PRIMARY" ui:field='submitButton'>Submit</b:Button>
<b:Button ui:field='cancelButton'>Cancel</b:Button>
</b:ModalFooter>
</b:Modal>
</ui:UiBinder>
and my view class
public class AddBook extends Modal {
interface CheckOutPopUpBinder extends UiBinder<Widget, AddBook> {
}
private static final CheckOutPopUpBinder binder = GWT.create(CheckOutPopUpBinder.class);
private final AuthorAndCategoryServiceAsync authorService = GWT.create(AuthorAndCategoryService.class);
private final LibraryServiceAsync libraryServiceAsync = GWT.create(LibraryService.class);
#UiField
TextBox titleTextBox;
#UiField
ListBox authorListBox;
#UiField
TextBox authorTextBox;
#UiField
ListBox categoryListBox;
#UiField
Button submitButton;
#UiField
Button cancelButton;
#UiField
Button newAuthorButton;
#UiField
Button newCategoryButton;
#UiField
TextBox categoryTextBox;
public AddBook(String title) {
binder.createAndBindUi(this);
setTitle(title);
initializeAuthorListBox();
initializeCategoryListBox();
}
private void initializeCategoryListBox() {
authorService.getCategories(null, new AsyncCallback<List<CategoryDTO>>() {
#Override
public void onFailure(Throwable arg0) {
Window.alert("unable to fetch category list");
}
#Override
public void onSuccess(List<CategoryDTO> arg0) {
for (CategoryDTO category : arg0)
categoryListBox.addItem(category.getCategoryName());
}
});
categoryListBox.setMultipleSelect(false);
categoryTextBox.setVisible(false);
}
private void initializeAuthorListBox() {
authorService.getAuthors(null, new AsyncCallback<List<AuthorDTO>>() {
#Override
public void onSuccess(List<AuthorDTO> arg0) {
for (AuthorDTO author : arg0) {
authorListBox.addItem(author.getAuthorName());
}
}
#Override
public void onFailure(Throwable arg0) {
Window.alert("Unable to fetch the list of authors");
}
});
authorListBox.setMultipleSelect(true);
authorTextBox.setVisible(false);
}
#UiHandler("cancelButton")
public void cancelAction(ClickEvent e) {
AddBook.this.hide();
}
#UiHandler("submitButton")
public void submitAction(ClickEvent e) {
AddBookDTO bookDTO = new AddBookDTO();
String bookTitle = titleTextBox.getText();
String bookCategory = categoryListBox.getSelectedValue() == null ? categoryTextBox.getText() : categoryListBox.getSelectedValue();
List<String> authorsList = new ArrayList<String>();
for (int i = 0; i < authorListBox.getItemCount(); i++) {
if (authorListBox.isItemSelected(i)) {
authorsList.add(authorListBox.getItemText(i));
}
}
if (null != authorTextBox.getText() && authorTextBox.getText().trim().length() > 0) {
String[] values = authorTextBox.getText().split("/");
for (String str : values) {
authorsList.add(str);
}
}
if (bookTitle == null || bookTitle.length() <= 0) {
Window.alert("Please enter a valid book title");
return;
} else if (bookCategory == null || bookCategory.length() <= 0) {
Window.alert("Please enter a valid book category");
return;
} else if (authorsList == null || authorsList.size() == 0) {
Window.alert("Please enter valid authors");
return;
}
bookDTO.setBookTitle(bookTitle);
bookDTO.setCategroyName(bookCategory);
bookDTO.setAuthors(authorsList);
libraryServiceAsync.addBook(bookDTO, new AsyncCallback<Boolean>() {
#Override
public void onFailure(Throwable arg0) {
Window.alert("There is some issue with database while adding book, Please contact your admin");
}
#Override
public void onSuccess(Boolean arg0) {
Window.alert("Book is successfully added !!!");
}
});
this.hide();
}
#UiHandler("newAuthorButton")
public void addAuthor(ClickEvent e) {
authorTextBox.setVisible(true);
}
#UiHandler("newCategoryButton")
public void addCategory(ClickEvent e) {
categoryTextBox.setVisible(true);
}
}
I am not sure, What is wrong but only header is appearing in the modal.
You are calling AddBook.this.show(); - this shows the Modal that is the base of this AddBook instance, not the instance defined in your UiBinder template. When you call setTitle(title); you are setting the header/title on this instance - this is why all you see is the header and not the rest of the modal. You should assign an ui:field to your Modal defined in your UiBinder template and show/hide it.
Also AddBook shouldn't be extending Modal - it shouldn't extend any widget class at all :) Normally, UiBinder classes are extending Composite - because your UiBinder template is composed of a variety of widgets and Composite is used to bring them together without exposing any of their APIs: you call initWidget with the result of binder.createAndBindUi(this).
But if you are creating a widget whose "main" widget is Modal, like here, you should just call binder.createAndBindUi(this) and ignore the Widget that is returned (just like you are doing now). This is because Modal attaches itself to the DOM, bypassing any GWT mechanism (actually, it conflicts with it).

how to create a focusable widget

i have created my own gwt widgets that consist of a TextLabel and an image.
I need that this widget be focusable. I extend this widget from the interface hasFocusHandler, focusable and blurhandler. Nothing is working. I am receiving neither focus nor blur event when i click on or outside of the widget. What should I do?
My code:
public class MyWidget extends ComplexPanel implements HasFocusHandlers, HasBlurHandlers, HasClickHandlers, Focusable{
private Icon icon = new Icon();
private TextNode text = new TextNode("");
private static final FocusImpl impl = FocusImpl.getFocusImplForWidget();
protected static FocusImpl getFocusImpl() {
return impl;
}
public HandlerRegistration addClickHandler(ClickHandler handler) {
return addDomHandler(handler, ClickEvent.getType());
}
#Override
public HandlerRegistration addBlurHandler(BlurHandler handler) {
return addDomHandler(handler,BlurEvent.getType());
}
#Override
public HandlerRegistration addFocusHandler(FocusHandler handler) {
return addDomHandler(handler, FocusEvent.getType());
}
#Override
public void onBrowserEvent(Event event) {
switch (DOM.eventGetType(event)) {
case Event.ONCLICK:
if (isEnabled()) {
super.onBrowserEvent(event);
}
break;
default:
super.onBrowserEvent(event);
break;
}
}
public int getTabIndex() {
return impl.getTabIndex(getElement());
}
#Override
public void setAccessKey(char key) {
DOM.setElementProperty(getElement(), "accessKey", "" + key);
}
#Override
public void setFocus(boolean focused) {
if (focused) {
impl.focus(getElement());
} else {
impl.blur(getElement());
}
}
#Override
public void setTabIndex(int index) {
impl.setTabIndex(getElement(), index);
}
#Override
protected void onAttach() {
super.onAttach();
int tabIndex = getTabIndex();
if (-1 == tabIndex) {
setTabIndex(0);
}
}
}
My implementation is not working (I am not receiving the onFocus call, when i click on the myWidget)
mywidget.addFocusHandler(new FocusHandler()
{
#Override
public void onFocus(FocusEvent event) {
//DO SOMETHING
}
});
We should have more information, because I miss some code, for example, where do you attach the Icon and TextNode to the DOM?
I have done one example and it works for me. Look:
#UiField Label labelText;
public MyWidget(String text) {
super();
//That is the key. Attach the widgets to the dom
setElement(uiBinder.createAndBindUi(this).getElement());
labelText.setText(text);
}
Also instead of having my internal widgets declared in the class, I have created a UiBinder class. Basically:
<!DOCTYPE ui:UiBinder SYSTEM 'http://dl.google.com/gwt/DTD/xhtml.ent'>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
</ui:style>
<g:FlowPanel>
<g:Label ui:field="labelText">
</g:Label>
</g:FlowPanel>
</ui:UiBinder>
In that case you can attach your widgets to the Panel quicker and easier. and in the constructor do only a setElement().
If you have any doubt, just ask!

Getting header column names in Cell table on click in GWT

I am using Cell Table of GWT 2.2 version. I want to get the name of the header column on which I have clicked. I didn't get any click event on the same.
Is there any work around by which I can accomplish my task.
Something like this? ;)
public class CellTableExample implements EntryPoint, ClickHandler {
private static class SomeEntity {
/* ... */
}
private static class ClickableTextHeader extends TextHeader {
private ClickHandler handler;
public ClickableTextHeader(String text, ClickHandler handler) {
super(text);
this.handler = handler;
}
#Override
public void onBrowserEvent(Context context, final Element elem,
final NativeEvent event) {
//maybe hijack click event
if(handler != null) {
if(Event.ONCLICK == Event.getTypeInt(event.getType())) {
handler.onClick(new ClickEvent() {
{
setNativeEvent(event);
setRelativeElement(elem);
setSource(ClickableTextHeader.this);
}
});
}
}
//default dom event handler
super.onBrowserEvent(context, elem, event);
}
}
CellTable<SomeEntity> cellTable;
TextColumn<SomeEntity> firstColumn;
TextColumn<SomeEntity> secondColumn;
TextColumn<SomeEntity> thirdColumn;
#Override
public void onModuleLoad() {
/* somehow init columns - it's not the point for this example */
cellTable.addColumn(firstColumn, new ClickableTextHeader("First column header", this));
cellTable.addColumn(secondColumn, new ClickableTextHeader("Second column header", this));
cellTable.addColumn(thirdColumn, new ClickableTextHeader("Third column header", this));
}
#Override
public void onClick(ClickEvent event) {
ClickableTextHeader source = (ClickableTextHeader) event.getSource();
Window.alert(source.getValue());
}
}
Hijacking event could look simpler if we used "simple listener interface" - i just wanted to be "semanticaly compliant with out-of-the-box Handlers" :)

CellList backed with ListDataProvider does not get redrawn on list change

I'm working on a project with GWT 2.1 and mvp4g. In a view, I'm using
a CellList backed with a ListDataProvider. If I pass a List with data to the constructor
when instantiating the ListDataProvider, the CellList shows this data.
The problem is that afterthat, the CellList never gets redrawn
whenever I change the list within the ListDataProvider. I don't know what I am
doing wrong or if I missing something.
Here is the code:
The UIBinder xml file:
<g:DockLayoutPanel unit="PX">
<g:west size="300">
<g:VerticalPanel styleName='{style.leftPanel}' spacing="8">
<g:Label>Expositores</g:Label>
<g:ScrollPanel addStyleNames='{style.exhibitorList}' width="250px" height="600px">
<c:CellList ui:field="exhibitorList" />
</g:ScrollPanel>
<g:Button ui:field="editExhibitorButton" addStyleNames='{style.button}'>Editar</g:Button>
</g:VerticalPanel>
</g:west>
...
The View class:
public class ExhibitorsAdminView extends Composite implements
ExhibitorsAdminPresenter.IExhibitorsAdminView {
interface Binder extends UiBinder<Widget, ExhibitorsAdminView> {}
private static final Binder binder = GWT.create( Binder.class );
private static class ExhibitorCell extends AbstractCell<Exhibitor> {
#Override
public void render(Cell.Context context, Exhibitor exhibitor,
SafeHtmlBuilder sb) {
if (exhibitor != null) {
sb.appendEscaped(exhibitor.getName());
}
}
}
private ListDataProvider<Exhibitor> exhibitorsDataProvider;
private SingleSelectionModel<Exhibitor> exhibitorsSelectionModel;
#UiField( provided = true )
CellList<Exhibitor> exhibitorList;
#UiField
Button editExhibitorButton;
// #UiField(provided = true)
// CellTable<Object> moduleList = new CellTable<Object>();
public ExhibitorsAdminView() {
exhibitorsSelectionModel = new
SingleSelectionModel<Exhibitor>(Exhibitor.KEY_PROVIDER);
exhibitorList = new CellList<Exhibitor>(new ExhibitorCell(),
Exhibitor.KEY_PROVIDER);
exhibitorList.setSelectionModel(exhibitorsSelectionModel);
exhibitorsDataProvider = new
ListDataProvider<Exhibitor>(getExhibitors());
exhibitorsDataProvider.addDataDisplay(exhibitorList);
exhibitorList.setPageSize(exhibitorsDataProvider.getList().size());
initWidget( binder.createAndBindUi( this ) );
}
public SingleSelectionModel<Exhibitor> getExhibitorsSelectionModel()
{
return exhibitorsSelectionModel;
}
public ListDataProvider<Exhibitor> getExhibitorsDataProvider() {
return exhibitorsDataProvider;
}
private List<Exhibitor> getExhibitors() {
List<Exhibitor> exhibitors = new ArrayList<Exhibitor>();
for (int i = 0; i < 10; i++) {
exhibitors.add(new Exhibitor(i, "aaaaaaaaaaaaaaa"));
}
return exhibitors;
}
public HasClickHandlers getEditExhibitorButton() {
return editExhibitorButton;
}
}
The presenter class:
#Presenter(view = ExhibitorsAdminView.class)
public class ExhibitorsAdminPresenter extends
BasePresenter<ExhibitorsAdminPresenter.IExhibitorsAdminView,
ExhibitorsEventBus> {
public interface IExhibitorsAdminView {
SingleSelectionModel<Exhibitor> getExhibitorsSelectionModel();
ListDataProvider<Exhibitor> getExhibitorsDataProvider();
HasClickHandlers getEditExhibitorButton();
}
private DispatchAsync dispatch = null;
#Inject
public ExhibitorsAdminPresenter(final DispatchAsync dispatch) {
this.dispatch = dispatch;
}
#Override
public void bind() {
getView().getExhibitorsSelectionModel().addSelectionChangeHandler(
new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
Exhibitor selected =
getView().getExhibitorsSelectionModel().getSelectedObject();
if (selected != null) {
Window.alert("You selected: " + selected.getName());
}
}
});
getView().getEditExhibitorButton().addClickHandler(
new ClickHandler() {
public void onClick(ClickEvent event) {
}
});
}
public void onGoToExhibitorsAdmin() {
}
public void onLoadExhibitors() {
dispatch.execute(new GetExhibitors(), new
AsyncCallback<GetExhibitorsResult>() {
public void onSuccess(GetExhibitorsResult result) {
getView().getExhibitorsDataProvider().setList(
result.getExhibitors());
getView().getExhibitorsDataProvider().refresh();
}
public void onFailure(Throwable caught) {
GWT.log("error executing command ", caught);
}
});
}
}
Thanks.
I solved it. I'm sorry, it was an issue related with mvp4g. I was doing something wrong that was causing to have to different instances of the view where the CellList was placed. The update operations I was doing on the list of the ListDataProvider were being done on the view instance that wasn't being shown.
You have to manipulate the list by getting it first of your provider like provider.getList().add(...). See How to add or remove a single element from/to CellList? for a minimal example.
Just call exhibitorsDataProvider.refresh() after all operations with underlying list.