Skip to content

lofidewanto/jsinterop-simple-jsframework-example

Repository files navigation

jsinterop-simple-jsframework-example

Simple Example for Accessing JavaScript Frameworks from Java GWT with Elemental2 and very early version of Akasha

This example uses GWT Boot as Starter Parent: https://github.com/gwtboot/gwt-boot-samples

Following articles are available as guidance:

We have three examples to use IndexedDB APIs on the web browser:

1. indexeddb-elemental2-example: this example uses Elemental2 lib.

2. indexeddb-elemental3-example: this example uses the Akasha lib.

3. indexeddb-elemental2-dagger2-example: this example shows how to use well known Design Patterns in GWT applications with IndexedDB.

Build Status GitHub Actions

Build example

To build the example:

mvn clean package

To run the example:

  1. First: go to the project you want to run: indexeddb-elemental2-example or indexeddb-elemental3-example or indexeddb-elemental2-dagger2-example

  2. In the directory run the GWT Dev Mode:

mvn gwt:generate-module gwt:devmode
  1. Second: open your browser and go to following address:
http://127.0.0.1:8888/calculator/
  1. GWT Dev Mode supports automatic transpiling. You just need to update your Java code in your IDE and reload your web browser. Your Java code will be automatically transpiled and your webapp stays uptodate without restarting the web server. If you change the index.html you need to push the restart button on the Swing GUI.

Some helps for using IndexedDB

Browsing in IndexedDB Chrome Webbrowser

IndexedDB Chrome

Tips for Elemental2

Return of this event could be null or Js.undefined()

	openDBRequest.onsuccess = event -> {
		addProducts(event);
		return null;
	};
		
	openDBRequest.onsuccess = event -> {
		addProducts(event);
		return Js.undefined();
	};

Generation process of JsInterops files (e.g. Elemental2 library)

Differences beetween JsInterop Generator generated file and Akasha files

IDBRequest.java from JsInterop Generator

@JsType(isNative = true, namespace = JsPackage.GLOBAL)
public class IDBRequest<T> implements EventTarget {
  @JsType(isNative = true, name = "?", namespace = JsPackage.GLOBAL)
  public interface ErrorUnionType {
    @JsOverlay
    static IDBRequest.ErrorUnionType of(Object o) {
      return Js.cast(o);
    }

    @JsOverlay
    default DOMError asDOMError() {
      return Js.cast(this);
    }

    @JsOverlay
    default DOMException asDOMException() {
      return Js.cast(this);
    }

    @JsOverlay
    default boolean isDOMError() {
      return (Object) this instanceof DOMError;
    }

    @JsOverlay
    default boolean isDOMException() {
      return (Object) this instanceof DOMException;
    }
  }

  @JsFunction
  public interface OnerrorFn {
    Object onInvoke(Event p0);
  }

  @JsFunction
  public interface OnsuccessFn {
    Object onInvoke(Event p0);
  }

  @JsType(isNative = true, name = "?", namespace = JsPackage.GLOBAL)
  public interface SourceUnionType {
    @JsOverlay
    static IDBRequest.SourceUnionType of(Object o) {
      return Js.cast(o);
    }

    @JsOverlay
    default IDBCursor asIDBCursor() {
      return Js.cast(this);
    }

    @JsOverlay
    default IDBIndex asIDBIndex() {
      return Js.cast(this);
    }

    @JsOverlay
    default IDBObjectStore asIDBObjectStore() {
      return Js.cast(this);
    }

    @JsOverlay
    default boolean isIDBCursor() {
      return (Object) this instanceof IDBCursor;
    }

    @JsOverlay
    default boolean isIDBIndex() {
      return (Object) this instanceof IDBIndex;
    }

    @JsOverlay
    default boolean isIDBObjectStore() {
      return (Object) this instanceof IDBObjectStore;
    }
  }

  public IDBRequest.ErrorUnionType error;
  @Deprecated public double errorCode;
  public IDBRequest.OnerrorFn onerror;
  public IDBRequest.OnsuccessFn onsuccess;
  public String readyState;
  public T result;
  public IDBRequest.SourceUnionType source;
  public IDBTransaction transaction;

  public native void addEventListener(
      String type, EventListener listener, EventTarget.AddEventListenerOptionsUnionType options);

  public native void addEventListener(String type, EventListener listener);

  public native boolean dispatchEvent(Event evt);

  public native void removeEventListener(
      String type, EventListener listener, EventTarget.RemoveEventListenerOptionsUnionType options);

  public native void removeEventListener(String type, EventListener listener);
}

IDBRequest.java from Akasha


/**
 * The IDBRequest interface of the IndexedDB API provides access to results of asynchronous requests to databases and database objects using event handler attributes. Each reading and writing operation on a database is done using a request.
 *
 * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest">IDBRequest - MDN</a>
 * @see <a href="https://www.w3.org/TR/IndexedDB/#idbrequest">IDBRequest - Indexed Database API 2.0</a>
 * @see <a href="https://www.w3.org/TR/IndexedDB/#request-api">IDBRequest - Indexed Database API 2.0</a>
 */
@Generated("org.realityforge.webtack")
@JsType(
    isNative = true,
    namespace = JsPackage.GLOBAL,
    name = "IDBRequest"
)
public class IDBRequest extends EventTarget {
  /**
   * The following example requests a given record title, onsuccess gets the associated record from the IDBObjectStore (made available as objectStoreTitleRequest.result), updates one property of the record, and then puts the updated record back into the object store. Also included at the bottom is an onerror function that reports what the error was if the request fails. For a full working example, see our To-do Notifications app (view example live.)
   *
   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/onerror">IDBRequest.onerror - MDN</a>
   * @see <a href="https://www.w3.org/TR/IndexedDB/#dom-idbrequest-onerror">onerror - Indexed Database API 2.0</a>
   * @see <a href="https://w3c.github.io/IndexedDB/#dom-idbrequest-onerror">onerror - Indexed Database API Draft</a>
   */
  @Nullable
  public EventHandler onerror;

  /**
   * The following example requests a given record title, onsuccess gets the associated record from the IDBObjectStore (made available as objectStoreTitleRequest.result), updates one property of the record, and then puts the updated record back into the object store. For a full working example, see our To-do Notifications app (view example live.)
   *
   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/onsuccess">IDBRequest.onsuccess - MDN</a>
   * @see <a href="https://www.w3.org/TR/IndexedDB/#dom-idbrequest-onsuccess">onsuccess - Indexed Database API 2.0</a>
   * @see <a href="https://w3c.github.io/IndexedDB/#dom-idbrequest-onsuccess">onsuccess - Indexed Database API Draft</a>
   */
  @Nullable
  public EventHandler onsuccess;

  protected IDBRequest() {
  }

  /**
   * A DOMError containing the relevant error. In Chrome 48+/Firefox 58+ this property returns a DOMException because DOMError has been removed from the DOM standard. The following error codes are returned under certain conditions:
   *
   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/error">IDBRequest.error - MDN</a>
   * @see <a href="https://www.w3.org/TR/IndexedDB/#dom-idbrequest-error">error - Indexed Database API 2.0</a>
   * @see <a href="https://w3c.github.io/IndexedDB/#dom-idbrequest-error">error - Indexed Database API Draft</a>
   */
  @JsProperty(
      name = "error"
  )
  @Nullable
  public native DOMException error();

  /**
   * The IDBRequestReadyState of the request, which takes one of the following two values:
   *
   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/readyState">IDBRequest.readyState - MDN</a>
   * @see <a href="https://www.w3.org/TR/IndexedDB/#dom-idbrequest-readystate">readyState - Indexed Database API 2.0</a>
   * @see <a href="https://w3c.github.io/IndexedDB/#dom-idbrequest-readystate">readyState - Indexed Database API Draft</a>
   */
  @JsProperty(
      name = "readyState"
  )
  @Nonnull
  @IDBRequestReadyState
  public native String readyState();

  /**
   * any
   *
   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/result">IDBRequest.result - MDN</a>
   * @see <a href="https://www.w3.org/TR/IndexedDB/#dom-idbrequest-result">result - Indexed Database API 2.0</a>
   * @see <a href="https://w3c.github.io/IndexedDB/#dom-idbrequest-result">result - Indexed Database API Draft</a>
   */
  @JsProperty(
      name = "result"
  )
  @Nullable
  public native Any result();

  /**
   * An object representing the source of the request, such as an IDBIndex, IDBObjectStore or IDBCursor.
   *
   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/source">IDBRequest.source - MDN</a>
   * @see <a href="https://www.w3.org/TR/IndexedDB/#dom-idbrequest-source">source - Indexed Database API 2.0</a>
   * @see <a href="https://w3c.github.io/IndexedDB/#dom-idbrequest-source">source - Indexed Database API Draft</a>
   */
  @JsProperty(
      name = "source"
  )
  @Nullable
  public native IDBObjectStoreOrIDBIndexOrIDBCursorUnion source();

  /**
   * An IDBTransaction.
   *
   * @see <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBRequest/transaction">IDBRequest.transaction - MDN</a>
   * @see <a href="https://www.w3.org/TR/IndexedDB/#dom-idbrequest-transaction">transaction - Indexed Database API 2.0</a>
   * @see <a href="https://w3c.github.io/IndexedDB/#dom-idbrequest-transaction">transaction - Indexed Database API Draft</a>
   */
  @JsProperty(
      name = "transaction"
  )
  @Nullable
  public native IDBTransaction transaction();

  @JsOverlay
  public final void addErrorListener(@Nonnull final EventListener callback,
      @Nonnull final AddEventListenerOptions options) {
    addEventListener( "error", Js.cast( callback ), options );
  }

  @JsOverlay
  public final void addErrorListener(@Nonnull final EventListener callback,
      final boolean useCapture) {
    addEventListener( "error", Js.cast( callback ), useCapture );
  }

  @JsOverlay
  public final void addErrorListener(@Nonnull final EventListener callback) {
    addEventListener( "error", Js.cast( callback ) );
  }

  @JsOverlay
  public final void removeErrorListener(@Nonnull final EventListener callback,
      @Nonnull final EventListenerOptions options) {
    removeEventListener( "error", Js.cast( callback ), options );
  }

  @JsOverlay
  public final void removeErrorListener(@Nonnull final EventListener callback,
      final boolean useCapture) {
    removeEventListener( "error", Js.cast( callback ), useCapture );
  }

  @JsOverlay
  public final void removeErrorListener(@Nonnull final EventListener callback) {
    removeEventListener( "error", Js.cast( callback ) );
  }

  @JsOverlay
  public final void addSuccessListener(@Nonnull final EventListener callback,
      @Nonnull final AddEventListenerOptions options) {
    addEventListener( "success", Js.cast( callback ), options );
  }

  @JsOverlay
  public final void addSuccessListener(@Nonnull final EventListener callback,
      final boolean useCapture) {
    addEventListener( "success", Js.cast( callback ), useCapture );
  }

  @JsOverlay
  public final void addSuccessListener(@Nonnull final EventListener callback) {
    addEventListener( "success", Js.cast( callback ) );
  }

  @JsOverlay
  public final void removeSuccessListener(@Nonnull final EventListener callback,
      @Nonnull final EventListenerOptions options) {
    removeEventListener( "success", Js.cast( callback ), options );
  }

  @JsOverlay
  public final void removeSuccessListener(@Nonnull final EventListener callback,
      final boolean useCapture) {
    removeEventListener( "success", Js.cast( callback ), useCapture );
  }

  @JsOverlay
  public final void removeSuccessListener(@Nonnull final EventListener callback) {
    removeEventListener( "success", Js.cast( callback ) );
  }
}

Summary JsInterop Generator and Akasha

  • Elemental2 which is generated from JsInterop Generator is actually more JavaScript oriented since the source is from hand written Closure Externs.
  • Akasha is more Java oriented.

About

Simple Example for Accessing JavaScript Frameworks from Java GWT

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published