HTML5 Features

<module rename-to="html5lite">
  <inherits name="com.example.bookshelf.html5.Html5Lab" />
  <set-property name="canvasElementSupport" value="no" />
  <set-property name="audioElementSupport" value="no" />
  <set-property name="videoElementSupport" value="no" />
</module>

Canvas.isSupported=false
Audio.isSupported=false
Video.isSupported=false
Geolocation.isSupported=true
TypedArrays.isSupported=true

import com.google.gwt.storage.client.Storage;
import com.google.gwt.storage.client.StorageMap;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

/** The reader's reading list, kept in localStorage under the key prefix {@code bookshelf.reading.}. */
public class ReadingList {
  static final String PREFIX = "bookshelf.reading.";

  private final Storage store;
  private final StorageMap map;

  private ReadingList(Storage store) {
    this.store = store;
    this.map = new StorageMap(store);
  }

  /** Returns the list, or {@code null} when localStorage is missing or blocked. */
  public static ReadingList create() {
    Storage local = Storage.getLocalStorageIfSupported();
    return local == null ? null : new ReadingList(local);
  }

  public void add(long bookId, String title) {
    store.setItem(PREFIX + bookId, title);
  }

  public boolean contains(long bookId) {
    return map.containsKey(PREFIX + bookId);
  }

  public List<String> titles() {
    List<String> titles = new ArrayList<>();
    for (int i = 0; i < store.getLength(); i++) {
      String key = store.key(i);
      if (key.startsWith(PREFIX)) {
        titles.add(store.getItem(key));
      }
    }
    return titles;
  }

  /** Removes only this application's keys; Storage.clear() would remove every key of the origin. */
  public int clear() {
    int removed = 0;
    for (Iterator<Map.Entry<String, String>> it = map.entrySet().iterator(); it.hasNext(); ) {
      if (it.next().getKey().startsWith(PREFIX)) {
        it.remove();
        removed++;
      }
    }
    return removed;
  }
}

ReadingList list = ReadingList.create();
list.add(1, "Don Quijote de la Mancha");
list.add(2, "La Regenta");
list.add(1, "Don Quijote (edicion ilustrada)");
log("titles=" + list.titles());
log("contains(2)=" + list.contains(2) + " contains(3)=" + list.contains(3));
Storage.getLocalStorageIfSupported().setItem("other.app.key", "x");
log("clear removed=" + list.clear() + " left=" + Storage.getLocalStorageIfSupported().getLength());

titles=[La Regenta, Don Quijote (edicion ilustrada)]
contains(2)=true contains(3)=false
length=2
clear removed=2 left=1

import com.google.gwt.json.client.JSONNumber;
import com.google.gwt.json.client.JSONObject;
import com.google.gwt.json.client.JSONParser;
import com.google.gwt.json.client.JSONString;
import com.google.gwt.storage.client.Storage;

/** An unsent review, kept in sessionStorage so that it survives a reload but not a closed tab. */
public class ReviewDraft {
  private static final String KEY = "bookshelf.draft";

  private final Storage session = Storage.getSessionStorageIfSupported();

  public boolean save(long bookId, int stars, String text) {
    if (session == null) {
      return false;
    }
    JSONObject json = new JSONObject();
    json.put("bookId", new JSONNumber(bookId));
    json.put("stars", new JSONNumber(stars));
    json.put("text", new JSONString(text));
    session.setItem(KEY, json.toString());
    return true;
  }

  /** Returns the saved draft text, or {@code null} when there is none or it cannot be parsed. */
  public String load() {
    String raw = session == null ? null : session.getItem(KEY);
    if (raw == null) {
      return null;
    }
    try {
      JSONObject json = JSONParser.parseStrict(raw).isObject();
      return json == null ? null : json.get("text").isString().stringValue();
    } catch (RuntimeException e) {
      session.removeItem(KEY);
      return null;
    }
  }
}

draft saved=true
draft text=Slow start, great ending <b>x</b>
corrupt draft -> null, key kept=false

Storage.addStorageEventHandler(new StorageEvent.Handler() {
  @Override
  public void onStorageChange(StorageEvent event) {
    log("event key=" + event.getKey() + " old=" + event.getOldValue()
        + " new=" + event.getNewValue());
  }
});

event key=bookshelf.reading.1 old=null new=Don Quijote de la Mancha
event key=bookshelf.reading.2 old=null new=La Regenta
event key=bookshelf.reading.1 old=Don Quijote de la Mancha new=Don Quijote (edicion ilustrada)
event key=bookshelf.reading.2 old=La Regenta new=null
event key=bookshelf.reading.1 old=Don Quijote (edicion ilustrada) new=null

try {
  for (int i = 0; i < 50; i++) {
    local.setItem("big" + i, chunk.toString());
    stored++;
  }
} catch (JavaScriptException e) {
  log("quota: failed after " + stored + " chunks: " + e.getClass().getName()
      + " name=" + e.getName() + " description=" + e.getDescription());
}

quota: failed after 4 chunks: com.google.gwt.core.client.JavaScriptException name=QuotaExceededError description=: Failed to execute 'setItem' on 'Storage': Setting the value of 'big4' exceeded the quota.

import com.example.bookshelf.html5.shared.Book;
import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.canvas.dom.client.CssColor;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;

/** Draws the number of copies per decade as a bar chart. */
public class CopiesChart {
  private static final int WIDTH = 360;
  private static final int HEIGHT = 160;

  /** Returns the canvas, or {@code null} when the browser has no canvas. */
  public static Canvas draw(List<Book> books, double pixelRatio) {
    Canvas canvas = Canvas.createIfSupported();
    if (canvas == null) {
      return null;
    }
    // The coordinate space is the real number of pixels; the CSS size is what the page lays out.
    canvas.setCoordinateSpaceWidth((int) (WIDTH * pixelRatio));
    canvas.setCoordinateSpaceHeight((int) (HEIGHT * pixelRatio));
    canvas.setPixelSize(WIDTH, HEIGHT);

    Map<Integer, Integer> perDecade = new TreeMap<>();
    int max = 1;
    for (Book b : books) {
      int decade = b.getYear() / 10 * 10;
      int total = perDecade.getOrDefault(decade, 0) + b.getCopies();
      perDecade.put(decade, total);
      max = Math.max(max, total);
    }

    Context2d ctx = canvas.getContext2d();
    ctx.scale(pixelRatio, pixelRatio);
    ctx.setFillStyle(CssColor.make("#ffffff"));
    ctx.fillRect(0, 0, WIDTH, HEIGHT);
    ctx.setFillStyle("#336699");
    ctx.setFont("11px sans-serif");
    int slot = WIDTH / perDecade.size();
    int x = 0;
    for (Map.Entry<Integer, Integer> e : perDecade.entrySet()) {
      double h = (HEIGHT - 30) * e.getValue() / (double) max;
      ctx.setFillStyle("#336699");
      ctx.fillRect(x + 8, HEIGHT - 20 - h, slot - 16, h);
      ctx.setFillStyle("#222222");
      ctx.fillText(e.getKey() + "s", x + 8, HEIGHT - 6);
      x += slot;
    }
    return canvas;
  }
}

Canvas canvas = CopiesChart.draw(books, DomGlobal.window.devicePixelRatio);
if (canvas == null) {
  // no canvas: show the numbers as a table instead
} else {
  RootPanel.get("chart").add(canvas);
}

canvas coordinate space=360x160 css=360x160
canvas dpr=1 pixel(css 20,100) rgba=51,102,153,255
canvas toDataUrl prefix=data:image/png;base64, length>1000=true

canvas coordinate space=720x320 css=360x160
canvas dpr=2 pixel(css 20,100) rgba=51,102,153,255

import com.google.gwt.dom.client.AudioElement;
import com.google.gwt.dom.client.MediaElement;
import com.google.gwt.dom.client.VideoElement;
import com.google.gwt.event.dom.client.EndedEvent;
import com.google.gwt.event.dom.client.EndedHandler;
import com.google.gwt.media.client.Audio;
import com.google.gwt.media.client.Video;
import com.google.gwt.user.client.ui.Label;

/** Audio and video for the book detail page: an audio sample and a book trailer. */
public class CoverPlayer {
  /** Returns the audio widget, or {@code null} when the browser has no audio element. */
  public static Audio sample(String wavUrl, final Label status) {
    Audio audio = Audio.createIfSupported();
    if (audio == null) {
      return null;
    }
    audio.addSource(wavUrl, AudioElement.TYPE_WAV);
    audio.setControls(true);
    audio.setPreload(MediaElement.PRELOAD_METADATA);
    audio.addEndedHandler(new EndedHandler() {
      @Override
      public void onEnded(EndedEvent event) {
        status.setText("ended");
      }
    });
    return audio;
  }

  public static Video trailer(String webmUrl, String posterUrl) {
    Video video = Video.createIfSupported();
    if (video == null) {
      return null;
    }
    video.addSource(webmUrl, VideoElement.TYPE_WEBM);
    video.setPoster(posterUrl);
    video.setControls(true);
    video.setMuted(true);
    return video;
  }

  /** "", "maybe" or "probably" for each container/codec pair. */
  public static String canPlay(MediaElement element, String type) {
    String answer = element.canPlayType(type);
    return answer.isEmpty() ? "no" : answer;
  }
}

audio canPlayType wav=maybe mp3=probably ogg=maybe ogg+opus=probably
video canPlayType webm=maybe vp9=probably mp4=maybe h264=probably

audio initial {"paused":true,"rs":4,"dur":0.5,"err":null,"controls":true,"preload":"metadata","src":"http://127.0.0.1:18913/sample.wav","sources":1,"type":"audio/wav"}
video state {"paused":false,"rs":4,"w":160,"h":90,"t":true,"err":null,"poster":"http://127.0.0.1:18913/poster.png","muted":true,"controls":true,"type":"video/webm"}
after real click: status label = "ended"  ended= true

import com.google.gwt.typedarrays.shared.ArrayBuffer;
import com.google.gwt.typedarrays.shared.DataView;
import com.google.gwt.typedarrays.shared.TypedArrays;
import com.google.gwt.typedarrays.shared.Uint8Array;
import java.nio.charset.StandardCharsets;

/**
 * Packs a book into a compact binary record: version (u8), year (u16), copies (u16), id (f64),
 * title length (u8), UTF-8 title bytes, checksum (u8). Big-endian.
 */
public final class BookCodec {
  public static final int VERSION = 1;
  private static final int HEADER = 1 + 2 + 2 + 8 + 1;

  private BookCodec() {}

  public static ArrayBuffer encode(Book book) {
    byte[] title = book.getTitle().getBytes(StandardCharsets.UTF_8);
    if (title.length > 255) {
      throw new IllegalArgumentException("title longer than 255 bytes: " + title.length);
    }
    ArrayBuffer buffer = TypedArrays.createArrayBuffer(HEADER + title.length + 1);
    DataView view = TypedArrays.createDataView(buffer);
    view.setUint8(0, VERSION);
    view.setUint16(1, book.getYear());
    view.setUint16(3, book.getCopies());
    view.setFloat64(5, book.getId());
    view.setUint8(13, title.length);
    Uint8Array bytes = TypedArrays.createUint8Array(buffer);
    for (int i = 0; i < title.length; i++) {
      bytes.set(HEADER + i, title[i] & 0xFF);
    }
    bytes.set(buffer.byteLength() - 1, checksum(bytes, buffer.byteLength() - 1));
    return buffer;
  }

  public static Book decode(ArrayBuffer buffer) {
    Uint8Array bytes = TypedArrays.createUint8Array(buffer);
    int last = buffer.byteLength() - 1;
    if (bytes.get(last) != checksum(bytes, last)) {
      throw new IllegalArgumentException("checksum mismatch");
    }
    DataView view = TypedArrays.createDataView(buffer);
    if (view.getUint8(0) != VERSION) {
      throw new IllegalArgumentException("unsupported version " + view.getUint8(0));
    }
    int length = view.getUint8(13);
    byte[] title = new byte[length];
    for (int i = 0; i < length; i++) {
      title[i] = (byte) bytes.get(HEADER + i);
    }
    return new Book((long) view.getFloat64(5), new String(title, StandardCharsets.UTF_8),
        view.getUint16(1), view.getUint16(3));
  }

  public static String toHex(ArrayBuffer buffer) {
    Uint8Array bytes = TypedArrays.createUint8Array(buffer);
    StringBuilder sb = new StringBuilder();
    for (int i = 0; i < bytes.length(); i++) {
      String h = Integer.toHexString(bytes.get(i));
      sb.append(h.length() == 1 ? "0" : "").append(h);
    }
    return sb.toString();
  }

  private static int checksum(Uint8Array bytes, int length) {
    int sum = 0;
    for (int i = 0; i < length; i++) {
      sum = (sum + bytes.get(i)) & 0xFF;
    }
    return sum;
  }
}

Book in = new Book(42, "Cien años de soledad", 1967, 7);
ArrayBuffer buffer = BookCodec.encode(in);
log("record bytes=" + buffer.byteLength() + " hex=" + BookCodec.toHex(buffer));
Book out = BookCodec.decode(buffer);

record bytes=36 hex=0107af00074045000000000000154369656e2061c3b16f7320646520736f6c6564616493
decoded=42|Cien años de soledad|1967|7
tampered -> checksum mismatch

hex=0106450003404500000000000018446f6e205175696a6f7465206465206c61204d616e6368614c bytes=39
OK (2 tests)

import com.example.bookshelf.html5.shared.Libraries;
import com.google.gwt.core.client.Callback;
import com.google.gwt.geolocation.client.Geolocation;
import com.google.gwt.geolocation.client.Position;
import com.google.gwt.geolocation.client.PositionError;

/** Finds the library branch closest to the reader. */
public class NearestBranch {
  /** Receives the branch name or an explanation. */
  public interface Result {
    void show(String text);
  }

  public static void find(final Result result) {
    Geolocation geo = Geolocation.getIfSupported();
    if (geo == null) {
      result.show("This browser has no geolocation; pick a branch from the list.");
      return;
    }
    Geolocation.PositionOptions options = new Geolocation.PositionOptions()
        .setTimeout(5000)
        .setMaximumAge(60000);
    geo.getCurrentPosition(new Callback<Position, PositionError>() {
      @Override
      public void onSuccess(Position position) {
        Position.Coordinates c = position.getCoordinates();
        Libraries.Branch branch = Libraries.nearest(c.getLatitude(), c.getLongitude());
        result.show(branch.name + " (accuracy " + c.getAccuracy() + " m)");
      }

      @Override
      public void onFailure(PositionError error) {
        switch (error.getCode()) {
          case PositionError.PERMISSION_DENIED:
            result.show("Location denied; pick a branch from the list.");
            break;
          case PositionError.POSITION_UNAVAILABLE:
            result.show("Position unavailable: " + error.getMessage());
            break;
          case PositionError.TIMEOUT:
            result.show("Timed out; pick a branch from the list.");
            break;
          default:
            result.show("Unknown error: " + error.getMessage());
        }
      }
    }, options);
  }
}

import com.example.bookshelf.html5.shared.Libraries;
import com.google.gwt.core.client.Callback;
import com.google.gwt.geolocation.client.Geolocation;
import com.google.gwt.geolocation.client.Position;
import com.google.gwt.geolocation.client.PositionError;

/** Keeps the "nearest branch" label current while the reader moves. */
public class BranchWatcher {
  private final Geolocation geo = Geolocation.getIfSupported();
  private int watchId = -1;

  public boolean start(final NearestBranch.Result result) {
    if (geo == null || watchId != -1) {
      return false;
    }
    watchId = geo.watchPosition(new Callback<Position, PositionError>() {
      @Override
      public void onSuccess(Position p) {
        result.show(Libraries.nearest(p.getCoordinates().getLatitude(),
            p.getCoordinates().getLongitude()).name);
      }

      @Override
      public void onFailure(PositionError e) {
        result.show("error " + e.getCode());
      }
    }, new Geolocation.PositionOptions().setHighAccuracyEnabled(false));
    return watchId != -1;
  }

  /** Call from the view's onUnload or when the user leaves the page, or the watch keeps running. */
  public void stop() {
    if (geo != null && watchId != -1) {
      geo.clearWatch(watchId);
      watchId = -1;
    }
  }
}

watch started=true
watch: Madrid Central
watch: error 2
watch: Bilbao Riverside
watch stopped