# 4 attention to detail.

# 4

attention to detail.

make quality evident in everything ...

your Porsche may drive better but ...

create delightfull experiences ...

annoying. ajax stuff you can’t bookmark broken back buttons error type 11 page that crashes during submit, what now?

annoying.

ajax stuff you can’t bookmark

broken back buttons

error type 11

page that crashes during submit, what now?

history. [ for dummies ]

history.

[ for dummies ]

LISTEN TO HISTORY EVENTS public class Example implements EntryPoint, HistoryListener { public void onModuleLoad() { History.addHistoryListener(this); } public void onHistoryChanged (String historyToken) { ... } } CREATE HISTORY EVENTS History.newItem(“profile”); = http://localhost:8080/example #profile History.newItem(“search”); = http://localhost:8080/example #search History.newItem(“edit”); = http://localhost:8080/example #edit

LISTEN TO HISTORY EVENTS

public class Example implements EntryPoint, HistoryListener {

public void onModuleLoad() {

History.addHistoryListener(this);

}

public void onHistoryChanged (String historyToken) { ... }

}

CREATE HISTORY EVENTS

History.newItem(“profile”); = http://localhost:8080/example #profile

History.newItem(“search”); = http://localhost:8080/example #search

History.newItem(“edit”); = http://localhost:8080/example #edit

history. [ demystified ]

history.

[ demystified ]

BEHIND THE SCENES browser history does not only effect top level pages browser history also works for iFrames History maintains a stack of applied tokens these tokens can be used to map to specific application state background timer which check each ¼ of a second if $wnd.location has changed, if so it triggers the History listener (onHistoryChanged)

BEHIND THE SCENES

browser history does not only effect top level pages

browser history also works for iFrames

History maintains a stack of applied tokens

these tokens can be used to map to specific application state

background timer which check each ¼ of a second if $wnd.location

has changed, if so it triggers the History listener (onHistoryChanged)

error handling. [ best practices ]

error handling.

[ best practices ]

CATCH UNCAUGHT EXCEPTIONS catch exceptions at the top-level just before they escape to the browser useful for event callbacks, timers, rpc… which are hard to try / catch GWT. setUncaughtExceptionHandler (new GWT.UncaughtExceptionHandler() { public void onUncaughtException(Throwable e) { Window.alert(“You thought you could get away didn’t you !!!"); } });

CATCH UNCAUGHT EXCEPTIONS

catch exceptions at the top-level just before they escape to the browser

useful for event callbacks, timers, rpc… which are hard to try / catch

GWT. setUncaughtExceptionHandler (new GWT.UncaughtExceptionHandler() {

public void onUncaughtException(Throwable e) { Window.alert(“You thought you could get away didn’t you !!!"); } });

STANDARDIZE EXCEPTION HANDLING public abstract class ApplicationAsyncCallback<T> implements AsyncCallback<T> { public final void onSuccess (T object) { onSuccessInternal (object); } public final void onFailure (Throwable throwable) { onFailureInternal (throwable); Window.alert(“KABOEMMMM”); } protected void onSuccessInternal (T object) {} protected void onFailureInternal (Throwable throwable) {} }

STANDARDIZE EXCEPTION HANDLING

public abstract class ApplicationAsyncCallback<T>

implements AsyncCallback<T> {

public final void onSuccess (T object) {

onSuccessInternal (object);

}

public final void onFailure (Throwable throwable) {

onFailureInternal (throwable);

Window.alert(“KABOEMMMM”);

}

protected void onSuccessInternal (T object) {}

protected void onFailureInternal (Throwable throwable) {}

}

LOG, LOG, LOG, LOG EVERYWHERE (1/4)  Log.debug(“Some log message”); public class Log { private static final Logger logger = GWT.isScript() ? new com.FireBugLogger() : new HostedModeLogger(); public static void debug (String message) { log(DEBUG, message); } protected static void log (Level level, String message) { if (enabled && level.getWeight() <= getMaxLevel(). getWeight()) { switch (level) { case ERROR: logger.error(message); break; case WARN: logger.warn(message); break; case INFO: logger.info(message); break; case DEBUG: logger.debug(message); break;

LOG, LOG, LOG, LOG EVERYWHERE (1/4)

 Log.debug(“Some log message”);

public class Log {

private static final Logger logger =

GWT.isScript() ? new com.FireBugLogger() : new HostedModeLogger();

public static void debug (String message) { log(DEBUG, message); }

protected static void log (Level level, String message) {

if (enabled && level.getWeight() <= getMaxLevel(). getWeight()) {

switch (level) {

case ERROR: logger.error(message); break;

case WARN: logger.warn(message); break;

case INFO: logger.info(message); break;

case DEBUG: logger.debug(message); break;

LOG, LOG, LOG, LOG EVERYWHERE (2/4) // request log level at runtime  http://localhost:8080/x.html?log.level=error public static native String getLoglevel () /*-{ var level; var args = $wnd.location.search ; var startLang = args.indexOf(&quot; log.level &quot;); if (startLang >= 0) { var value = args.substring(startLang); var begin = value.indexOf(&quot;=&quot;) + 1; var end = value.indexOf(&quot;&&quot;); if (end == -1) { end = value.length; } level = value.substring(begin, end); } return level; }-*/;

LOG, LOG, LOG, LOG EVERYWHERE (2/4)

// request log level at runtime  http://localhost:8080/x.html?log.level=error

public static native String getLoglevel () /*-{

var level;

var args = $wnd.location.search ;

var startLang = args.indexOf(&quot; log.level &quot;);

if (startLang >= 0) {

var value = args.substring(startLang);

var begin = value.indexOf(&quot;=&quot;) + 1;

var end = value.indexOf(&quot;&&quot;);

if (end == -1) {

end = value.length;

}

level = value.substring(begin, end);

}

return level;

}-*/;

LOG, LOG, LOG, LOG EVERYWHERE (3/4) public class FireBugLogger implements Logger { private boolean fireBugInstalled = false; protected FireBugLogger() { checkIfFireBugInstalled () ; } protected native void checkIfFireBugInstalled () /*-{ this.@com.FireBugLogger::fireBugInstalled = ( typeof console != 'undefined' ); }-*/; public native void debug (String message) /*-{ if (this.@com.FireBugLogger::fireBugInstalled) console.debug(message) ; }-*/;

LOG, LOG, LOG, LOG EVERYWHERE (3/4)

public class FireBugLogger implements Logger {

private boolean fireBugInstalled = false;

protected FireBugLogger() {

checkIfFireBugInstalled () ;

}

protected native void checkIfFireBugInstalled () /*-{

this.@com.FireBugLogger::fireBugInstalled = ( typeof console != 'undefined' );

}-*/;

public native void debug (String message) /*-{

if (this.@com.FireBugLogger::fireBugInstalled) console.debug(message) ;

}-*/;

LOG, LOG, LOG, LOG EVERYWHERE (4/4) public class HostedModeLogger implements Logger { public void debug (String message) { log(toMessageWithLineInformation(&quot;DEBUG&quot;, message)); } public void log (String message) { GWT.log(message, null); } private String toMessageWithLineInformation (String logLevel, String message) { StackTraceElement line = new Throwable().getStackTrace()[4]; return (logLevel + &quot; &quot; + toLine(line) + &quot;: &quot; + message); } private String toLine (StackTraceElement line) { return line.getClassName() + &quot;(&quot; + line.getLineNumber() + &quot;)&quot;; }

LOG, LOG, LOG, LOG EVERYWHERE (4/4)

public class HostedModeLogger implements Logger {

public void debug (String message) {

log(toMessageWithLineInformation(&quot;DEBUG&quot;, message));

}

public void log (String message) { GWT.log(message, null); }

private String toMessageWithLineInformation (String logLevel, String message) {

StackTraceElement line = new Throwable().getStackTrace()[4];

return (logLevel + &quot; &quot; + toLine(line) + &quot;: &quot; + message);

}

private String toLine (StackTraceElement line) {

return line.getClassName() + &quot;(&quot; + line.getLineNumber() + &quot;)&quot;;

}

what’s wrong with the log example?

what’s wrong with the log example?

AUTOMATED USER ACCEPTANCE TESTS WITH SELENIUM your code Label firstnameLabel = new Label(); label.ensureDebugId(“firstnameLabel”); // if not enabled  does nothing enable debug mode – go Selenium gooooo….. <inherits name=“com.google.gwt.user.Debug”/> // DOM.setElementProperty(…) under the hood – UIObject private static DebugIdImpl debugIdImpl = GWT.create(DebugIdImpl.class); public static void ensureDebugId(Element elem, String id) { debugIdImpl.ensureDebugId(elem, id); }

AUTOMATED USER ACCEPTANCE TESTS WITH SELENIUM

your code

Label firstnameLabel = new Label();

label.ensureDebugId(“firstnameLabel”); // if not enabled  does nothing

enable debug mode – go Selenium gooooo…..

<inherits name=“com.google.gwt.user.Debug”/> // DOM.setElementProperty(…)

under the hood – UIObject

private static DebugIdImpl debugIdImpl = GWT.create(DebugIdImpl.class);

public static void ensureDebugId(Element elem, String id) {

debugIdImpl.ensureDebugId(elem, id);

}

MAARTENVOLDERS. com PASSIONATE ABOUT PEOPLE AND TECHNOLOGY

MAARTENVOLDERS. com

PASSIONATE ABOUT PEOPLE AND TECHNOLOGY