Skip to content
JoachimRohde edited this page Jul 31, 2012 · 6 revisions

Html5 Project

About

The wicket-html5 module contains classes that give wicket support for using exciting new Html5 features like FileApi, Geolocation, <video>, <audio>.

Maven snippet

Add this to your pom.xml:

<dependency>
	<groupId>org.wicketstuff</groupId>
	<artifactId>wicketstuff-html5</artifactId>
	<version>[some-version]</version>
</dependency>

Fileapi package

This package contains support for the Html5 FileApi.

Brief info about Html5 FileApi

Gives limited access for javascript to read information (name, file size, type, last modified date) about the files choosen for a file upload field. Currently it is implemented in Chrome, Firefox and Opera but not in Internet Explorer.

FileFieldSizeCheckBehavior

This behavior can be added to FileUploadField-s to provide a convenient and fast size checking for users using FileApi supporting browsers. Using this has the benefit that the user does not have to upload the whole file data to receive an error about it exceeding the size limit. By default an ajax call is triggered when the user changes the value of the upload field (selects/deselects files). For browsers not implementing the FileApi this behavior does not change or break anything (so it is safe for IE users).

Usage is very simple (similar to an AjaxButton), just add it to the field and specify what should happen when validation passes or fails:

final FileUploadField uploadField = new FileUploadField("file");

// add our FileApi based size check, errors are reported trough a
// feedback panel
uploadField.add(new FileFieldSizeCheckBehavior() {
	private static final long serialVersionUID = 7228537141239670625L;

	@Override
	protected void onSubmit(AjaxRequestTarget target, FileList fileList) {
		target.add(feedback);
	}

	@Override
	protected void onError(AjaxRequestTarget target, FileList fileList) {
		target.add(feedback);
	}
});

If you want to do something different than check for size you can subclass FileFieldChangeBehavior.

Geolocation package

This package contains support for the HTML5 GeoLocation API.

Brief info about HTML5 GeoLocation API

The GeoLocation API tries to determine the position of the hosting device. E.g via GPS if a signal is availbale (on smartphones) or via network signals like the IP adress. Therefore no guarantee is given that the location is accurate.

AjaxGeolocationBehavior

Usage is very simple, just add it to a WebMarkupContainer and specify what should happen when you received a location (or no location can't be received):

        final WebMarkupContainer geoLocator = new WebMarkupContainer("geolocator");

        AjaxGeolocationBehavior geolocationBehaviour = new AjaxGeolocationBehavior()
        {

            private static final long serialVersionUID = 1L;

            // onGeoAvailable is abstract so you have to implement it
            @Override
            protected void onGeoAvailable(AjaxRequestTarget target, String latitude,
                    String longitude)
            {
                // permission to locate user was granted
                // you can do now whatever you want with the longitude and latitude values.
                String result = "We received a location. Latitude: "+ latitude+" Longitude: " + longitude +"\n";
            }

            // the onNotAvailable-method is available since version 6.0.0-beta3
            // you don't need to implement this method if you don't want to react on failure
            @Override
            protected void onNotAvailable(AjaxRequestTarget target, String errorCode, String errorMessage)
            {
                // if the location is not available, show the reason why
                String result = "An error occured. Error code: "+ errorCode + " Error message:" + errorMessage;
            }
        };
        // if the user does not react on the request to share his location with
        // us within 5 seconds we want the onNotAvailable-method to get triggered
        // this method is also available only since version 6.0.0-beta3
        geolocationBehaviour.setTimeout(5000);

        geoLocator.add(geolocationBehaviour);


        add(geoLocator);
    <wicket:extend>
                <span wicket:id="geolocator"></span>
    </wicket:extend>

New methods in version 6.0.0-beta3

Since 6.0.0-beta3 you can react on the event that no location can be obtained. The new methods are onNotAvailable and setTimeout. If the user is ignoring the request for sharing his location or postpones his decision (in Firefox the "Not now" option) no callback method is called. This is intended by design (see https://bugzilla.mozilla.org/show_bug.cgi?id=650247 ). For those cases we can set a timeout. After the specified amount of time the onNotAvailable method is called.

The specification (http://dev.w3.org/geo/api/spec-source.html#position_error_interface) defines also a timeout attribute: "The length of time specified by the timeout property has elapsed before the implementation could successfully acquire a new Position object."

So it applies only for the case the user grants permission to share his location and is NOT the timeout which is set in the setTimeout-method!

It MIGHT happen that the determination of the location takes a bit longer, even though the user granted permission to share his location. In this case first the method onNotAvailable will be called and as soon as the location could be obtained the method onGeoAvailable will be called. So don't set the timeout too low.

If onNotAvailable is called you can determine the cause via the errorCode parameter:

  • "1" indicates a "permission denied"
  • "2" indicates that the position could not be determined
  • "3" indicates a timeout

The errorMessage parameter is mainly for debugging purposes since it does not have to contain a meaningful message which can be directly delegated to the user.

Dependencies

Wicketstuff-html5 depends on wicket 1.5-RC7<= and Java 6<=.

Further reading

For more info see the javadoc of the classes. For a complete example see the wicketstuff-html5-examples web application.

Clone this wiki locally