summaryrefslogtreecommitdiffstats
path: root/documentation
diff options
context:
space:
mode:
authorJens Jansson <Peppe@users.noreply.github.com>2016-07-04 13:50:32 +0300
committerArtur Signell <artur@vaadin.com>2016-08-29 23:16:48 +0300
commit22ea7ea1f4068db7c0fc160fceb37d0b59610f69 (patch)
treeb2bb8104805cef429a87d224c3f9cb76735e4fb9 /documentation
parent3e9779ce78157a4670d01bc451c6f8256d9ecea1 (diff)
downloadvaadin-framework-22ea7ea1f4068db7c0fc160fceb37d0b59610f69.tar.gz
vaadin-framework-22ea7ea1f4068db7c0fc160fceb37d0b59610f69.zip
Code highlighting and fixed a broken comment
Change-Id: Ibc5844aa4ffba5691a6e3a2d1b962ce28e2aebcf
Diffstat (limited to 'documentation')
-rw-r--r--documentation/gwt/gwt-javascript.asciidoc25
1 files changed, 12 insertions, 13 deletions
diff --git a/documentation/gwt/gwt-javascript.asciidoc b/documentation/gwt/gwt-javascript.asciidoc
index 517740b33a..a46dbfc3c4 100644
--- a/documentation/gwt/gwt-javascript.asciidoc
+++ b/documentation/gwt/gwt-javascript.asciidoc
@@ -26,7 +26,7 @@ component.
The example library includes a single [classname]#MyComponent# component,
defined in [filename]#mylibrary.js#.
-
+[source,javascript]
----
// Define the namespace
var mylibrary = mylibrary || {};
@@ -70,7 +70,7 @@ mylibrary.MyComponent = function (element) {
When used in an HTML page, the library would be included with the following
definition:
-
+[source,html]
----
<script type="text/javascript"
src="mylibrary.js"></script>
@@ -78,7 +78,7 @@ definition:
You could then use it anywhere in the HTML document as follows:
-
+[source,html]
----
<!-- Placeholder for the component -->
<div id="foo"></div>
@@ -99,7 +99,7 @@ image::img/javascript-component.png[]
You could interact with the component with JavaScript for example as follows:
-
+[source,html]
----
<a href="javascript:foo.setValue('New value')">Click here</a>
----
@@ -112,7 +112,7 @@ To begin integrating such a JavaScript component, you would need to sketch a bit
how it would be used from a server-side Vaadin application. The component should
support writing the value as well as listening for changes to it.
-
+[source,java]
----
final MyComponent mycomponent = new MyComponent();
@@ -137,7 +137,7 @@ layout.addComponent(mycomponent);
A JavaScript component extends the [classname]#AbstractJavaScriptComponent#,
which handles the shared state and RPC for the component.
-
+[source,java]
----
package com.vaadin.book.examples.client.js;
@@ -173,7 +173,7 @@ package name of this server-side class.
The shared state of the component is as follows:
-
+[source,java]
----
public class MyComponentState extends JavaScriptComponentState {
public String value;
@@ -189,9 +189,8 @@ for them, which you can use in the component.
== Defining a JavaScript Connector
A JavaScript connector is a function that initializes the JavaScript component
-and handles communication between the server-side and the JavaScript code.//TOD
-Clarify -
-code?
+and handles communication between the server-side and the JavaScript code.
+//TODO Clarify - code?
A connector is defined as a connector initializer function that is added to the
[literal]#++window++# object. The name of the function must match the
@@ -203,7 +202,7 @@ function. The [methodname]#this.getElement()# method returns the HTML DOM
element of the component. The [methodname]#this.getState()# returns a shared
state object with the current state as synchronized from the server-side.
-
+[source,javascript]
----
window.com_vaadin_book_examples_client_js_MyComponent =
function() {
@@ -251,7 +250,7 @@ object.
Continuing from the server-side [classname]#MyComponent# example we defined
earlier, we add a constructor to it that registers the function.
-
+[source,java]
----
public MyComponent() {
addFunction("onClick", new JavaScriptFunction() {
@@ -273,7 +272,7 @@ An RPC call is made simply by calling the RPC method in the connector. In the
constructor function of the JavaScript connector, you could write as follows
(the complete connector code was given earlier):
-
+[source,javascript]
----
window.com_vaadin_book_examples_gwt_js_MyComponent =
function() {