Update documentation on Style to remove reference to @Style

Author: adrienbaron

docs-source/book/SUMMARY.md

@@ -47,8 +47,9 @@
 * [Plugins](composition/plugins.md)
 
 ## Integration with GWT
-* [Styles](gwt-integration/styles.md)
-* [Client Bundles](gwt-integration/client-bundles.md)
+* [Client Bundles and Styles](gwt-integration/client-bundles-and-styles.md)
+    * [Client Bundles](gwt-integration/client-bundles-and-styles.md#client-bundles)
+    * [Styles (CssResource)](gwt-integration/client-bundles-and-styles.md#styles)
 * [Vue GWT and Widgets](gwt-integration/widgets.md)
 * [JsInterop](js-interop/README.md)
     * [JsPropertyMap<T>](js-interop/README.md#js-property-map)

docs-source/book/gwt-integration/client-bundles-and-styles.md

@@ -0,0 +1,177 @@
+# Client Bundles and Styles
+
+!INCLUDE "../dependencies.md"
+
+You can use any valid Java expression in your template.
+This means that Vue GWT is compatible with GWT 2.x `ClientBundles`.
+
+## Exposing a `ClientBundle` to the Template {#client-bundles}
+
+Lets see how this work with an example.
+
+First, we create a simple `ClientBundle` with an `ImageResource`:
+
+```java
+public interface KittenClientBundle extends ClientBundle {
+    KittenClientBundle INSTANCE = GWT.create(KittenClientBundle.class);
+
+    @Source("kitten.jpg")
+    ImageResource myKitten();
+}
+```
+
+There is no need for any special annotations on it.
+
+We then create a Component to use our `ClientBundle`.
+In this component we add a computed property for our `KittenClientBundle`.
+This will expose the bundle to the Template.
+
+```java
+@Component
+public class KittenComponent extends VueComponent {
+    @Computed
+    public KittenClientBundle getMyKittenBundle() {
+        return KittenClientBundle.INSTANCE;
+    }
+}
+```
+
+We can then simply access our bundle instance from the template:
+
+```html
+<img v-bind:src="myKittenBundle.myKitten().getSafeUri().asString()"/>
+```
+
+{% raw %}
+<div class="example-container" data-name="kittenComponent">
+    <span id="kittenComponent"></span>
+</div>
+{% endraw %}
+
+You could also directly expose your ImageResource to the template, it's really up to you.
+
+## Using `CssResources` in Vue GWT {#styles}
+
+Vue GWT is compatible with GSS styles.
+You can declare your `CssResource` interfaces and use them within your Vue GWT Components.
+
+You also get type checking of your styles rules at compile type.
+So if you try to use `myStyle.bob()` in your template, and this style doesn't exist, the compilation will break with an explicit error.
+
+Let see it in action with a simple example.
+
+### Setting up a Small `CssResource`
+
+Let's say we have the following `CssResource` (and it's associated `gss` file):
+
+```java
+public interface MelisandreComponentStyle extends CssResource {
+    String red();
+    String bold();
+}
+```
+
+Our `MelisandreComponentStyle` is exposed in an `AppClientBundle`:
+
+```java
+public interface AppClientBundle extends ClientBundle {
+    AppClientBundle INSTANCE = GWT.create(AppClientBundle.class);
+
+    @Source("melisandreComponentStyle.gss")
+    MelisandreComponentStyle melisandreStyle();
+}
+```
+
+And in our `RootGwtApp` we call `ensureInjected` to make sure it's injected:
+
+```java
+public class RootGwtApp implements EntryPoint {
+    public void onModuleLoad() {
+        VueGWT.init();
+        AppClientBundle.INSTANCE.melisandreStyle().ensureInjected();
+        // ...
+    }
+}
+```
+
+### Using Our Small `CssResource` in a Component
+
+Let's use our style in a small Component.
+As with the `ClientBundle`, we can use a computed method to expose our Style.
+
+```java
+@Component
+public class MelisandreComponent extends VueComponent {
+    @Computed
+    public MelisandreComponentStyle getMyStyle() {
+        return MelisandreComponentClientBundle.INSTANCE.melisandreComponentStyle();
+    }
+}
+```
+
+We can then simply use Vue `v-bind` directive to bind our style.
+
+```html
+<div v-bind:class="myStyle.red()">
+    For the night is dark and full of terrors.
+</div>
+```
+
+## Adding More Than One CSS Class
+
+You can add more than one CSS Class to your Components by using the [`array` builder](../js-interop/README.md#array):
+
+```html
+<div v-bind:class="array(myStyle.red(), myStyle.bold())">
+    For the night is dark, full of terrors and bold.
+</div>
+```
+
+## Conditional Styling
+
+You can apply a Style conditionally.
+First we add a boolean in our `MelisandreComponent`:
+
+```java
+@Component
+public class MelisandreComponent extends VueComponent {
+    @JsProperty boolean isRed = true;
+    
+    @Computed
+    public MelisandreComponentStyle getMyStyle() {
+        return MelisandreComponentClientBundle.INSTANCE.melisandreComponentStyle();
+    }
+}
+```
+ 
+Then we simply use a ternary expression (be careful with the quotes):
+
+```html
+<div v-bind:class='isRed ? myStyle.red() : ""'>
+    For the night is dark, full of terrors and might or not be red.
+</div>
+```
+
+## Conditional Styling With Several CSS Class
+
+You can combine both the `array` and the ternary syntax:
+ 
+```html
+<div v-bind:class='array(isRed ? myStyle.red() : "", myStyle.bold())'>
+    For the night is dark, full of terrors, might or not be red and always BOLD.
+</div>
+```
+
+## Here is our finished `MelisandreComponent`
+
+{% raw %}
+<div class="example-container" data-name="melisandreComponent">
+    <span id="melisandreComponent"></span>
+</div>
+{% endraw %}
+
+You can try toggling the red color on the two bottom sentences by typing in your browser console:
+
+```
+melisandreComponent.isRed = false;
+```

docs-source/book/gwt-integration/client-bundles.md

@@ -1,6 +1,7 @@
 package com.axellience.vuegwtexamples.client;
 
 import com.axellience.vuegwt.core.client.VueGWT;
+import com.axellience.vuegwtexamples.client.examples.melisandre.MelisandreComponentClientBundle;
 import com.google.gwt.core.client.EntryPoint;
 
 /**
@@ -14,6 +15,7 @@ public class VueGwtExamplesApp implements EntryPoint
     public void onModuleLoad()
     {
         VueGWT.initWithoutVueLib();
+        MelisandreComponentClientBundle.INSTANCE.melisandreComponentStyle().ensureInjected();
         VueGwtExamplesService.initExamples();
     }
 }

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

@@ -1,5 +1,3 @@
-<vue-gwt:import style="com.axellience.vuegwtexamples.client.examples.melisandre.MelisandreComponentStyle" name="myStyle"/>
-
 <div>
     <div v-bind:class="myStyle.red()">
         For the night is dark and full of terrors.

docs-source/examples/src/main/java/com/axellience/vuegwtexamples/client/examples/melisandre/MelisandreComponent.html

@@ -1,7 +1,8 @@
 package com.axellience.vuegwtexamples.client.examples.melisandre;
 
-import com.axellience.vuegwt.core.client.component.VueComponent;
 import com.axellience.vuegwt.core.annotations.component.Component;
+import com.axellience.vuegwt.core.annotations.component.Computed;
+import com.axellience.vuegwt.core.client.component.VueComponent;
 import jsinterop.annotations.JsProperty;
 
 /**
@@ -11,4 +12,10 @@
 public class MelisandreComponent extends VueComponent
 {
     @JsProperty boolean isRed = true;
+
+    @Computed
+    public MelisandreComponentStyle getMyStyle()
+    {
+        return MelisandreComponentClientBundle.INSTANCE.melisandreComponentStyle();
+    }
 }

docs-source/examples/src/main/java/com/axellience/vuegwtexamples/client/examples/melisandre/MelisandreComponent.java

@@ -0,0 +1,12 @@
+package com.axellience.vuegwtexamples.client.examples.melisandre;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+
+public interface MelisandreComponentClientBundle extends ClientBundle
+{
+    MelisandreComponentClientBundle INSTANCE = GWT.create(MelisandreComponentClientBundle.class);
+
+    @Source("MelisandreComponentStyle.gss")
+    MelisandreComponentStyle melisandreComponentStyle();
+}