mirror of
https://github.com/vaadin/framework.git
synced 2024-07-27 20:20:26 +02:00
86 lines
3.1 KiB
Plaintext
86 lines
3.1 KiB
Plaintext
---
|
|
title: Integrating A JavaScript Library As An Extension
|
|
order: 39
|
|
layout: page
|
|
---
|
|
|
|
[[integrating-a-javascript-library-as-an-extension]]
|
|
Integrating a JavaScript library as an extension
|
|
------------------------------------------------
|
|
|
|
JavaScript can also be used for creating Extensions e.g. for integrating
|
|
existing JavaScript libraries. See link:CreatingAUIExtension.asciidoc[Creating a UI extension] for general information about Extensions. The main
|
|
difference when using JavaScript is that you extend
|
|
`AbstractJavaScriptExtension`, that your shared state class should
|
|
extend `JavaScriptExtensionState` and then of course that your
|
|
client-side implementation is written in JavaScript. See link:IntegratingAJavaScriptComponent.asciidoc[Integrating a
|
|
JavaScript component] for basic information about how to use JavaScript
|
|
for your client-side logic.
|
|
|
|
This tutorial will create a simple Extension for integrating
|
|
https://developers.google.com/analytics/devguides/collection/gajs/[Google
|
|
Analytics]. Because the Analytics API just uses the same `_gaq.push`
|
|
function with different arguments, the JavaScript connector logic can be
|
|
equally simple. Aside from asynchronously loading ga.js, the client-side
|
|
code just adds a callback that the server-side code can use to push new
|
|
commands.
|
|
|
|
[source,javascript]
|
|
....
|
|
window._gaq = window._gaq || [];
|
|
|
|
(function() {
|
|
var ga = document.createElement('script');
|
|
ga.type = 'text/javascript';
|
|
ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ?
|
|
'https://ssl' : 'http://www') +
|
|
'.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
|
|
window.com_example_Analytics = function() {
|
|
this.pushCommand = function(command) {
|
|
_gaq.push(command);
|
|
}
|
|
}
|
|
....
|
|
|
|
The server-side Extension class provides the common Extension API for
|
|
extending a UI instance as well as API for some Analytics features. All
|
|
the Analytics features are based on the `pushCommand` method that
|
|
invokes the corresponding client-side callback.
|
|
|
|
The Analytics API used in this example has nothing that warrants using
|
|
shared state, but you can of course use shared state in your own
|
|
JavaScript Extension if you want to as long as your state class extends
|
|
`JavaScriptExtensionState`.
|
|
|
|
[source,java]
|
|
....
|
|
@JavaScript("analytics_connector.js")
|
|
public class Analytics extends AbstractJavaScriptExtension {
|
|
public Analytics(UI ui, String account) {
|
|
extend(ui);
|
|
pushCommand("_setAccount", account);
|
|
}
|
|
|
|
public void trackPageview(String name) {
|
|
pushCommand("_trackPageview", name);
|
|
}
|
|
|
|
private void pushCommand(Object... commandAndArguments) {
|
|
// Cast to Object to use Object[] commandAndArguments as the first
|
|
// varargs argument instead of as the full varargs argument array.
|
|
callFunction("pushCommand", (Object) commandAndArguments);
|
|
}
|
|
}
|
|
....
|
|
|
|
Extensions are suitable for integrating many existing JavaScript
|
|
libraries that do not provide a component that is added to a layout. By
|
|
using a client-side JavaScript connector for integrating the JavaScript
|
|
library, you can eliminate GWT from the equation to give you slightly
|
|
less code to maintain.
|