com.asayama.gwt.angular.site.examples.client.ImageResourceExampleDocumentation.html Maven / Gradle / Ivy
Show all versions of ImageResource Show documentation
GWT Angular supports the inclusion of GWT's ImageResource
into the HTML views via a directive, data-gwt-image-resource.
Unlike simply setting the <IMG> src attribute, by using
the ImageResource, the image files you include in your page
become cache safe, in a sense that its cache header in HTTP response can
be set to indefinitely cache the file in the browser, much like any other
resources.
View
The directive, data-gwt-image-resource takes an Angular
variables, STREET, WTC, BOAT, and PEOPLE. These variables are bound to the
controller via Angular scope to ImageResource objects.
Controller
The controller for the view declares the variables, STREET, WTC, BOAT, and
PEOPLE. They are declared as public final so that GWT Angular's
automatic binding takes care of the binding of these values to Angular's
scope. The objects assigned to these variables are declared in
ImageResourceDemoResources, which extends GWT's ClientBundle
. The methods, street(), wtc(),
boat(), people() each are associated with an image file,
indicated by the @Source annotation right above it. The names
of files should be something that makes it easy to identify the image, and
you do not need to worry about making these file names cache safe. GWT
compiler hashes the name of the file, so that the browser can safely cache
the file. If the image content is updated, keeping the file name is the
same, GWT compiler will generate a new name for it, so that the newer
version of the file is loaded by the browser.
In this example, the following resource names are compiled as follows.
On a browser that supports it, you may see the images compiled into
data: URL for directly embedded into the resulting HTML. Otherwise,
you should see http: URL for asynchronously loading from the
server via hashed filename.
ImageResources class seen in the controller class is an
extension of GWT Angular's ClientResources class.
Configuration
The following modules are required in the gwt.xml.
The following Maven dependencies are required in the pom.xml.
<dependency>
<groupId>com.asayama.gwt</groupId>
<artifactId>gwt-angular-resources</artifactId>
<version>{{ GWT_ANGULAR_VERSION }}</version>
</dependency>
You can also browse the full source code on Github.
{{ GITHUB_GWT_ANGULAR_EXAMPLES_URL }}/blob/master/gwt-angular-examples/ImageResource