|
| 1 | +# Dependency Injection |
| 2 | + |
| 3 | +!INCLUDE "../dependencies.md" |
| 4 | + |
| 5 | +## Why Dependency Injection? {#why-dependency-injection} |
| 6 | + |
| 7 | +When developing your App *you want to keep a maximum of business logic out of your Components*. |
| 8 | +For example you can create Services that can be reused across Components. |
| 9 | + |
| 10 | +But in Vue GWT you are not responsible for your Components instantiation. |
| 11 | +Apart from your application root, other Components are instantiated for you by Vue depending on your model. |
| 12 | + |
| 13 | +So how do you pass the instance of those Services to your Components? |
| 14 | +Sure you could have a static instance of those Services as a Singleton, but this is awful for testing. |
| 15 | + |
| 16 | +Luckily, **Vue GWT supports Dependency Injection**. |
| 17 | +An instance of your Services can be automatically provided when your Components are instantiated. |
| 18 | +You can also provide a mock yourself when you are [testing your Components](../tooling/unit-testing.md). |
| 19 | + |
| 20 | +## Setting up Dagger 2 {#dagger-2} |
| 21 | + |
| 22 | +In GWT two solutions exist for Dependency Injection: |
| 23 | + |
| 24 | +* [Dagger 2](https://google.github.io/dagger/users-guide) |
| 25 | +* [GIN](https://github.com/nishtahir/google-gin) *deprecated* |
| 26 | + |
| 27 | +In this documentation we will explain Injection with Dagger 2 as GIN is deprecated. |
| 28 | +However Vue GWT also works with GIN. |
| 29 | + |
| 30 | +To setup Dagger 2 on your project you can follow this guide: [Dependency injection in GWT using Dagger 2](http://www.g-widgets.com/2017/06/28/dependency-injection-in-gwt-using-dagger-2/). |
| 31 | + |
| 32 | +The version of the Maven dependency in the guide is a little out of date. |
| 33 | +You can check for the latest version of Dagger GWT to use on the [Dagger GWT Maven repo](https://mvnrepository.com/artifact/com.google.dagger/dagger-gwt). |
| 34 | + |
| 35 | +## Injecting a Vue GWT Component {#injecting-a-component} |
| 36 | + |
| 37 | +### Declaring the Component |
| 38 | + |
| 39 | +Let's say we have a `GotQuotesService` that is able to provide us with a random quote from a famous TV Show. |
| 40 | + |
| 41 | +We want to use that service in a `GotQuotesComponent` that will display a random quote. |
| 42 | +We simply add `GotQuotesService` as an attribute of our Component with the `@Inject` annotation. |
| 43 | + |
| 44 | +<p class="warning-panel"> |
| 45 | +It's not possible to use injected constructor parameters as Java constructors are not supported in Vue GWT Components. |
| 46 | +<p> |
| 47 | + |
| 48 | +```java |
| 49 | +@Component |
| 50 | +public class GotQuotesComponent extends VueComponent implements HasCreated { |
| 51 | + @JsProperty GotQuote quote; |
| 52 | + @Inject GotQuotesService gotQuotesService; |
| 53 | + |
| 54 | + @Override |
| 55 | + public void created() { |
| 56 | + changeQuote(); |
| 57 | + } |
| 58 | + |
| 59 | + @JsMethod |
| 60 | + protected void changeQuote() { |
| 61 | + quote = gotQuotesService.getRandomQuote(); |
| 62 | + } |
| 63 | +} |
| 64 | +``` |
| 65 | + |
| 66 | +We can then simply use `quote` in our `GotQuotesComponent` template: |
| 67 | + |
| 68 | +```html |
| 69 | +<div> |
| 70 | + <blockquote> |
| 71 | + {{ quote.getText() }} |
| 72 | + <cite> |
| 73 | + <strong>{{ quote.getAuthor() }}</strong>, Season <strong>{{ quote.getSeason() }}</strong>, Episode <strong>{{ quote.getEpisode() }}</strong> |
| 74 | + </cite> |
| 75 | + </blockquote> |
| 76 | + <button @click="changeQuote">Give me another!</button> |
| 77 | +</div> |
| 78 | +``` |
| 79 | + |
| 80 | +To make this Component work we now must find a way to have it Injected. |
| 81 | + |
| 82 | +### Instantiating the `GotQuotesComponent` with Injection |
| 83 | + |
| 84 | +Every Vue GWT Component get an associated Factory generated for them by the Vue GWT annotation processor. |
| 85 | +This means that `GotQuotesComponent` have a generated `GotQuotesComponentFactory`. |
| 86 | + |
| 87 | +To bootstrap injection we need to inject `GotQuotesComponentFactory`. |
| 88 | +Every instance of our `GotQuotesComponent` created using the injected `GotQuotesComponentFactory` will then be correctly injected. |
| 89 | + |
| 90 | +To inject this factory we declare a Dagger 2 Component. |
| 91 | + |
| 92 | +<p class="warning-panel"> |
| 93 | +Dagger 2 have it's own <code>Component</code> annotation. |
| 94 | +So you must be careful to use the right one when declaring your Dagger 2 Component. |
| 95 | +<p> |
| 96 | + |
| 97 | +```java |
| 98 | +@Component // ⚠️ This is Dagger 2 @Component annotation, not the Vue GWT one. |
| 99 | +@Singleton |
| 100 | +public interface ExampleInjector { |
| 101 | + GotQuotesComponentFactory gotQuoteComponentFactory(); |
| 102 | +} |
| 103 | +``` |
| 104 | + |
| 105 | +<p class="info-panel"> |
| 106 | +If <code>GotQuotesComponentFactory</code> doesn't exist, then check your annotation processor configuration in your IDE to make sure that it's running. |
| 107 | +<p> |
| 108 | + |
| 109 | + |
| 110 | +We can then create our Dagger Injector, get our `GotQuotesComponentFactory` and use it to create our injected `GotQuotesComponent`: |
| 111 | + |
| 112 | +```java |
| 113 | +public class VueGwtExamplesApp implements EntryPoint { |
| 114 | + public void onModuleLoad() { |
| 115 | + // Create Dagger Injector |
| 116 | + ExampleInjector exampleInjector = DaggerExampleInjector.builder().build(); |
| 117 | + // Get our Factory from the Injector |
| 118 | + GotQuotesComponentFactory factory = exampleInjector.gotQuoteComponentFactory(); |
| 119 | + // Create our Component, it will be correctly injected |
| 120 | + GotQuotesComponent component = factory.create(); |
| 121 | + // Mount (attach) our Component to an existing div |
| 122 | + component.$mount("#gotQuotesComponent"); |
| 123 | + } |
| 124 | +} |
| 125 | +``` |
| 126 | + |
| 127 | +And here is the resulting live Component: |
| 128 | + |
| 129 | +{% raw %} |
| 130 | +<div class="example-container" data-name="gotQuotesComponent"> |
| 131 | + <br/> |
| 132 | + <span id="gotQuotesComponent"></span> |
| 133 | +</div> |
| 134 | +{% endraw %} |
| 135 | + |
| 136 | +## Injecting Component's Children {#injecting-children} |
| 137 | + |
| 138 | +We injected our root Component, that's great, but how about it's children? |
| 139 | + |
| 140 | +Here is the good news: if you inject your root Component, then the whole tree of locally declared Components will be injected 🎉! |
| 141 | + |
| 142 | +For example if you have the following Components, you only need to inject `RootComponentFactory` and use it to create your `RootComponent`. |
| 143 | +All the Components used in the template and declared in `components` will be injected. |
| 144 | + |
| 145 | +### RootComponent |
| 146 | + |
| 147 | +```java |
| 148 | +@Component(components = {Child1Component.class, Child2Component.class}) |
| 149 | +public class RootComponent extends VueComponent {} |
| 150 | +``` |
| 151 | + |
| 152 | +```html |
| 153 | +<div> |
| 154 | + <!-- Create 10 instances of Child1Component --> |
| 155 | + <child1 v-for="i in 10"></child1> |
| 156 | + <child2></child2> |
| 157 | +</div> |
| 158 | +``` |
| 159 | + |
| 160 | +### Child1Component |
| 161 | + |
| 162 | +```java |
| 163 | +@Component(components = GrandChild1Component.class) |
| 164 | +public class Child1Component extends VueComponent { |
| 165 | + @Inject MyService myService; |
| 166 | +} |
| 167 | +``` |
| 168 | + |
| 169 | +```html |
| 170 | +<div> |
| 171 | + <grand-child1></grand-child1> |
| 172 | +</div> |
| 173 | +``` |
| 174 | + |
| 175 | +### Child2Component |
| 176 | + |
| 177 | +```java |
| 178 | +@Component |
| 179 | +public class Child2Component extends VueComponent { |
| 180 | + @Inject MyService myService; |
| 181 | + @Inject AnotherService anotherService; |
| 182 | +} |
| 183 | +``` |
| 184 | + |
| 185 | +### GrandChild1Component |
| 186 | + |
| 187 | +```java |
| 188 | +@Component |
| 189 | +public class GrandChild1Component extends VueComponent { |
| 190 | + @Inject AnotherService anotherService; |
| 191 | +} |
| 192 | +``` |
| 193 | + |
| 194 | +## Globally Registered Components {#globally-registered-components} |
| 195 | + |
| 196 | +It's also possible to inject Components that are declared globally. |
| 197 | +For this you only need to inject their factory and use it for the global registration. |
| 198 | +When used in the templates, the instances will automatically be injected. |
| 199 | + |
| 200 | +```java |
| 201 | +public class VueGwtExamplesApp implements EntryPoint { |
| 202 | + public void onModuleLoad() { |
| 203 | + ExampleInjector exampleInjector = DaggerExampleInjector.builder().build(); |
| 204 | + MyGlobalComponentFactory factory = exampleInjector.getMyGlobalComponentFactory(); |
| 205 | + VueGWT.register("my-global-component", factory); |
| 206 | + } |
| 207 | +} |
| 208 | +``` |
| 209 | + |
| 210 | +## Injecting Routes in Vue GWT Router {#vue-gwt-router} |
| 211 | + |
| 212 | +If you are using [Vue GWT Router](https://github.com/Axellience/vue-router-gwt), you can also inject your Routes. |
| 213 | + |
| 214 | +```java |
| 215 | +public class RoutesConfig implements CustomizeOptions { |
| 216 | + @Inject LoginComponentFactory loginComponentFactory; |
| 217 | + @Inject HomeComponentFactory homeComponentFactory; |
| 218 | + @Inject SettingsComponentFactory settingsComponentFactory; |
| 219 | + |
| 220 | + @Override |
| 221 | + public void customizeOptions(VueComponentOptions vueComponentOptions) { |
| 222 | + RouterOptions routerOptions = new RouterOptions() |
| 223 | + .setMode(RouterMode.HISTORY) |
| 224 | + .addRoute("/login", loginComponentFactory) |
| 225 | + .addRoute("/home", homeComponentFactory) |
| 226 | + .addRoute("/settings", homeComponentFactory); |
| 227 | + |
| 228 | + vueComponentOptions.set("router", new VueRouter(routerOptions)); |
| 229 | + } |
| 230 | +} |
| 231 | +``` |
0 commit comments