GWT - how dynamically change a static css of theme in GWT Dev Mode

We know that all static resources e.g. images, css should be kept in project structure in static way e.g. through resource or public packages. This principle supposes that these kind of resources rarely will be changed. But if in your RIA GWT project you have to override some theme's css by some custom-style.css and see the result lets say "right now" in Dev Mode there would be the problem because if both css stored statically you can not dynamically see the result of the change just by refreshing the browser page e.g. F5.

If you want to see your css changes dynamically in GWT Dev Mode you have to inject your e.g. custom-style.css through ClientBundle somewhere in the beginning e.g. onModuleLoad().

===== Create this class inside resource package in you java src ====
 
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.resources.client.CssResource.NotStrict;

/**
 * Created by panoand on 08/05/2015.
 */
public interface AppResources extends ClientBundle {

    AppResources INSTANCE = GWT.create(AppResources.class);

    @Source("css/custom-style.css")
    @NotStrict
    CssResource foo();
}

===== In your EntryPoint class put it inside onLoadModule() methode =====
AppResources.INSTANCE.foo().ensureInjected();

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> {

HTML & CSS - Схлопывание внешних отступов

http://habrahabr.ru/post/257327/

Comparision of Mvp4g and GwtP

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

Google DI Guice - @ImplementedBy

The content below is taken from here:
http://blog.decaresystems.ie/2007/06/14/juicy-code-with-google-guice-part-4/
All parts about GUICE from the same source:
Part 2 – First Code
Part 3 – Dependency Injection
Part 4 – @ImplementedBy and Annotating Bindings
Part 5 – Custom Providers and Conclusions

As I mentioned in the previous blog entries, you configure Google Guice by creating a class that implements the Module interface or better, one that extends AbstractModule class. In this class you specify the bindings that logically connects implementations to interfaces. However, there’s a way that lets you create the bindings using annotations without needing to write the code in a Module implementation. You can do that using the@ImplementedBy annotation decorating an interface.

Let’s see a quick example:

1 2 3 4 5 6 7 8

import com.google.inject.ImplementedBy; @ImplementedBy(MobilePhone.class) public interface Phone { public void ring(); }

The simple interface above is decorated with the @ImplementedBy annotation and the name of the implementer is specified as a single attribute.

1 2 3 4 5 6 7

public class MobilePhone implements Phone { public void ring() { System.out.println("It's playing some annoying melody..."); } }

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