Update documentation with @JSmethod

Author: adrienbaron

docs-source/book/advanced/extending-components.md

@@ -23,6 +23,7 @@ Let's say we have the following Component:
 public abstract class ParentComponent extends VueComponent {
     @JsProperty String parentMessage = "This is a message from the parent";
 
+    @JsMethod
     public int parentMultiplyBy2(int value) {
         return value * 2;
     }

docs-source/book/essential/class-and-style.md

@@ -199,10 +199,11 @@ It is often a good idea to bind to a style object directly so that the template
 ```
 ```java
 @Component
-public class StylishComponent extends VueComponent {
+public class StylishComponent extends VueComponent implements HasCreated {
     @JsProperty JsObject<String> styleObject;
 
-    public StylishComponent() {
+    @Override
+    public void created() {
         this.styleObject = map(e("color", "red"), e("fontSize", "20px"));
     }
 }

docs-source/book/essential/components.md

@@ -294,14 +294,15 @@ The proper answer to these use cases are:
 
 ```java
 @Component
-public class MyComponent extends VueComponent {
+public class MyComponent extends VueComponent implements HasCreated {
     @Prop
     @JsProperty
     public String initialCounter;
 
     @JsProperty String counter;
 
-    public MyComponent() {
+    @Override
+    public void created() {
         this.counter = this.initialCounter;
     }
 }
@@ -438,6 +439,7 @@ Here's an example:
 public class ButtonCounterComponent extends VueComponent {
     @JsProperty int counter = 0;
 
+    @JsMethod
     public void increment() {
         this.counter++;
         // When incrementing, we fire an event.
@@ -459,6 +461,7 @@ public class ButtonCounterComponent extends VueComponent {
 public class CounterWithEventComponent extends VueComponent {
     @JsProperty int total = 0;
 
+    @JsMethod
     public void incrementTotal() {
         this.total++;
     }
@@ -486,6 +489,7 @@ For example, let's change our counter component to pass the value of it's counte
 public class ButtonCounterComponent extends VueComponent {
     @JsProperty int counter = 0;
 
+    @JsMethod
     public void increment() {
         this.counter++;
         // Pass the current value of the counter with the event.
@@ -511,6 +515,7 @@ public class CounterWithEventComponent extends VueComponent {
     @JsProperty int total = 0;
 
     // But we can now get the value of the event as parameter
+    @JsMethod
     public void incrementTotal(int childCounterValue) {
         this.total += childCounterValue;
     }

docs-source/book/essential/computed-and-watchers.md

@@ -81,6 +81,7 @@ public class ReverseComponent extends VueComponent {
     @JsProperty String message = "Hello";
 
     // Note that there a no more @Computed annotation
+    @JsMethod
     public String getReversedMessage() {
         return new StringBuilder(message).reverse().toString();
     }

docs-source/book/essential/events.md

@@ -45,6 +45,7 @@ For example:
 ```java
 @Component
 public class GreetComponent extends VueComponent {
+    @JsMethod
     public void greet() {
         Window.alert("Hello from GWT!");
     }
@@ -79,6 +80,7 @@ Instead of binding directly to a method name, we can also use methods in an inli
 ```java
 @Component
 public class HiWhatComponent extends VueComponent {
+    @JsMethod
     public void say(String message) {
         Window.alert(message);
     }

docs-source/book/essential/forms.md

@@ -74,6 +74,7 @@ In those case you can use the following syntax:
 public class TodoTextComponent extends VueComponent {
     @JsProperty Todo todo = new Todo("Hello World!");
 
+    @JsMethod
     public void updateMessage(NativeEvent event) {
         this.todo.setText(JsTools.get(event.getEventTarget(), "value"));
     }

docs-source/book/introduction/README.md

@@ -34,14 +34,14 @@ public class SimpleLinkComponent extends VueComponent {
 
 ##### Why `@JsProperty`?
 
-Only `JsInterop` attributes of our Class will be accessible in our template.
+Only `JsInterop` attributes and methods of our Class will be accessible in our template.
 
 Meaning either:
 
- * Adding the `@JsType` annotation to our Class and setting attributes to `public`
- * Adding the `@JsProperty` annotation to each attribute and setting them to at least `protected`.
+ * Adding the `@JsType` annotation to our Class and setting attributes/methods to `public`
+ * Adding the `@JsProperty`/`@JsMethod` annotation to each attribute/method and setting them to at least `package-protected`.
 
-In this documentation we chose to use the `@JsProperty` annotation on properties.
+In this documentation we chose to use the `@JsProperty`/`@JsMethod` annotation on properties/methods.
 
 ##### HTML Template
 
@@ -117,10 +117,7 @@ Behind the scene, our Java `VueComponent` Class is converted to the options that
         linkName: null
     },
     methods: {
-        created: function() {
-        	const javaInstance = new SimpleLinkComponent(); 
-            this.linkName = javaInstance.linkName;
-        }
+    	...
     }
 }
 ```
@@ -289,6 +286,7 @@ To let users interact with your app, we can use the `v-on` directive to attach e
 public class ExclamationComponent extends VueComponent {
     @JsProperty String message = "Hello Vue GWT!";
 
+    @JsMethod // Notice the @JsMethod annotation to expose this method to our template
     public void addExclamationMark() {
         this.message += "!";
     }
@@ -424,6 +422,7 @@ The `@Prop` annotation tells Vue GWT that our `todo` property will be passed fro
 Be careful, you still need to use the `@JsProperty` to tell VueGWT to not rename this property.
 
 ***TodoComponent.html***
+
 ```html
 <li>
     {{ todo.getText() }}

docs-source/examples/src/main/java/com/axellience/vuegwtexamples/client/examples/extendjavacomponent/ChildComponent.java

@@ -3,6 +3,7 @@
 import com.axellience.vuegwt.client.component.hooks.HasCreated;
 import com.axellience.vuegwt.jsr69.component.annotations.Component;
 import com.axellience.vuegwt.jsr69.component.annotations.Computed;
+import jsinterop.annotations.JsMethod;
 import jsinterop.annotations.JsProperty;
 
 /**
@@ -19,11 +20,13 @@ public void created()
         this.childValue = 10;
     }
 
+    @JsMethod
     public int childMultiplyBy10(int value)
     {
         return value * 10;
     }
 
+    @JsMethod
     public int childMultiplyBy4(int value)
     {
         return this.parentMultiplyBy2(this.parentMultiplyBy2(value));

docs-source/examples/src/main/java/com/axellience/vuegwtexamples/client/examples/extendjavacomponent/ParentComponent.java

@@ -3,6 +3,7 @@
 import com.axellience.vuegwt.client.component.VueComponent;
 import com.axellience.vuegwt.jsr69.component.annotations.Component;
 import com.axellience.vuegwt.jsr69.component.annotations.Computed;
+import jsinterop.annotations.JsMethod;
 import jsinterop.annotations.JsProperty;
 
 /**
@@ -13,6 +14,7 @@ public abstract class ParentComponent extends VueComponent
 {
     @JsProperty String parentMessage = "This is a message from the parent";
 
+    @JsMethod
     public int parentMultiplyBy2(int value)
     {
         return value * 2;

docs-source/examples/src/main/java/com/axellience/vuegwtexamples/client/examples/extendsjscomponent/ChildJavaComponent.java

@@ -3,6 +3,7 @@
 import com.axellience.vuegwt.jsr69.component.annotations.Component;
 import com.axellience.vuegwt.jsr69.component.annotations.Computed;
 import com.axellience.vuegwtexamples.client.examples.extendsjscomponent.parent.ParentJsComponent;
+import jsinterop.annotations.JsMethod;
 import jsinterop.annotations.JsProperty;
 
 /**
@@ -13,11 +14,13 @@ public class ChildJavaComponent extends ParentJsComponent
 {
     @JsProperty int childValue = 10;
 
+    @JsMethod
     public int childMultiplyBy10(int value)
     {
         return value * 10;
     }
 
+    @JsMethod
     public int childMultiplyBy4(int value)
     {
         return this.parentMultiplyBy2(this.parentMultiplyBy2(value));