BOOTSTRAP tooltip example (links)

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tooltips.php

http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=tooltips

GWTBootstrap - custom email validation for TextBox

=== JAVA CODE ===

TextBox emailLookup = new TextBox();
emailLookup.addValidator(new Validator() {
            @Override
            public int getPriority() {
                return 0;
            }

            @Override
            public List<EditorError> validate(Editor editor, Object value) {
                List<EditorError> result = new ArrayList<EditorError>();
                String valueStr = value == null ? "" : value.toString();
                if (!valueStr.matches(EMAIL_REGEXP)) {
                    result.add(new BasicEditorError(emailLookup, value, "Not a valid email address"));
                } else if (isEmailReapeated(valueStr)) {
                    result.add(new BasicEditorError(emailLookup, value, "Email address is repeated"));
                }
                return result;
            }
        });

=== UI BINDER ===

<b:Row addStyleNames="{style.padding}">
    <b:Column size="XS_12">
        <b:Row>
            <b:Column size="XS_2">
                <b:FormGroup>
                    <b:TextBox ui:field="emailLookup" placeholder="Enter email" allowBlank="false"/>
                    <b:InlineHelpBlock iconType="EXCLAMATION"/>
                </b:FormGroup>
            </b:Column>

            <b:Column size="XS_1">
                <b:Button ui:field="addContact" text="Add"/>
            </b:Column>

        </b:Row>
    </b:Column>
</b:Row>

GWT DataGrid with LeafValueEditor

====== UIBINDER =======

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:b.grid='urn:import:org.gwtbootstrap3.client.ui.gwt'
             xmlns:b='urn:import:org.gwtbootstrap3.client.ui' >

Bootstrap free themes - link

http://bootswatch.com/

GWT project settings

=========== app-client =================

<?xml version="1.0" encoding="UTF-8"?>
<project
        xmlns="http://maven.apache.org/POM/4.0.0"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

GWT - LeafValueEditor implementation for RadioButton widget with Enum type

package com.paniov.bitwitwebapp.client.widgets.editors;

import com.google.gwt.editor.client.LeafValueEditor;
import com.google.gwt.uibinder.client.UiConstructor;
import org.gwtbootstrap3.client.ui.RadioButton;
import org.gwtbootstrap3.client.ui.html.Div;

import java.util.HashMap;
import java.util.Map;

/**
 * Created by Paniov on 06.05.15.
 */
public class EnumRadiobuttonEditor extends Div implements LeafValueEditor<ButtonsType> {

GWT - links on ListEditor example code

https://sites.google.com/site/mygwtexamples/home/ui/listeditor

https://goo.gl/J5wCvQ

GWT - SelectActionCell. ActionCell with options menu

import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.cell.client.ValueUpdater;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.BrowserEvents;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.EventTarget;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.safehtml.client.SafeHtmlTemplates;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import org.gwtbootstrap3.client.ui.constants.ButtonSize;
import org.gwtbootstrap3.client.ui.constants.ButtonType;

import java.util.*;

public class SelectActionCell<T> extends AbstractCell<T> {

Comparision of Mvp4g and GwtP

https://code.google.com/p/mvp4g/wiki/Mvp4g_vs_GWTP

UX research - Label Placement in Forms

Read this article:
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Conclusions

Some interesting guidelines arose from this brief analysis of our test results. Coupling the following guidelines with Luke Wroblewski’s form design guidelines will help you to build the best form possible in each different situation.

• Label position—Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
• Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
• Bold labels—Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
• Drop-down list boxes—Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.
• Label placement for drop-down list boxes—To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.

GWT facet configs

-Xmx1024m -XX:MaxPermSize=512m -Dgwt.codeserver.port=9876

-logLevel DEBUG -port 8082 -noserver

-Xss1024k

-XdisableCastChecking

How to use TextResource in GWT ClientBundle (link)

interface Resources extends ClientBundle {
  Resources INSTANCE = GWT.create(Resources.class);

  @Source("a.txt")
  TextResource synchronous();

  @Source("b.txt")
  ExternalTextResource asynchronous();
}

// Using a TextResource
myTextArea.setInnerText(Resources.INSTANCE.synchronous().getText());

// Using an ExternalTextResource
Resources.INSTANCE.asynchronous().getText(new ResourceCallback<TextResource>() {
  public void onError(ResourceException e) { ... }
  public void onSuccess(TextResource r) {
    myTextArea.setInnerText(r.getText());
  }
});

http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html#TextResource

Encoding configs of Maven pom.xml in GWT project

<properties>
        <java.version>1.7</java.version>
        <resources.encoding>UTF-8</resources.encoding>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        ...

GWTBootstrap3 sample project structure

git clone https://github.com/gwtbootstrap3/gwtbootstrap3-sample-app.git