Skip to content

Commit f0426dc

Browse files
adrienbaronadrienbaron
committed
Update documentation for 1.0-beta-3
1 parent 167db9a commit f0426dc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+402
-762
lines changed

‎docs-source/book/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ When you are ready, you can get started with by **[setting it up on your project
4848
If you use it on a small project, please <a href="https://gitter.im/Axellience/vue-gwt" target="_blank">let us know how it goes</a>.
4949
</p>
5050

51-
*This documentation was last updated for [Vue.js v2.4.3](https://github.com/vuejs/vue/releases/tag/v2.4.3) and Vue GWT 1.0-beta-2*
51+
*This documentation was last updated for [Vue.js v2.4.3](https://github.com/vuejs/vue/releases/tag/v2.4.3) and Vue GWT 1.0-beta-3*
5252

5353
## Who made this?
5454

‎docs-source/book/project-setup.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ To add Vue GWT to your Maven project, simply add the following to your `pom.xml`
1313
<dependency>
1414
<groupId>com.axellience</groupId>
1515
<artifactId>vue-gwt</artifactId>
16-
<version>1.0-beta-2</version>
16+
<version>1.0-beta-3</version>
1717
</dependency>
1818
<!-- Annotation Processors for Vue GWT -->
1919
<dependency>
2020
<groupId>com.axellience</groupId>
2121
<artifactId>vue-gwt-processors</artifactId>
22-
<version>1.0-beta-2</version>
22+
<version>1.0-beta-3</version>
2323
<optional>true</optional>
2424
</dependency>
2525
</dependencies>

‎docs/advanced/integrating-with-js-components.html‎

Lines changed: 24 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -686,12 +686,12 @@
686686

687687
</li>
688688

689-
<li class="chapter " data-level="5.3" data-path="../gwt-integration/user-panels.html">
689+
<li class="chapter " data-level="5.3" data-path="../gwt-integration/widgets.html">
690690

691-
<a href="../gwt-integration/user-panels.html">
691+
<a href="../gwt-integration/widgets.html">
692692

693693

694-
User Panels
694+
Vue GWT and Widgets
695695

696696
</a>
697697

@@ -715,10 +715,10 @@
715715

716716
<li class="chapter " data-level="5.4.1" data-path="../js-interop/">
717717

718-
<a href="../js-interop/#js-object">
718+
<a href="../js-interop/#js-property-map">
719719

720720

721-
JsObject
721+
JsPropertyMap
722722

723723
</a>
724724

@@ -741,10 +741,10 @@
741741

742742
<li class="chapter " data-level="5.4.3" data-path="../js-interop/">
743743

744-
<a href="../js-interop/#js-array">
744+
<a href="../js-interop/#array-object">
745745

746746

747-
JsArray
747+
Array
748748

749749
</a>
750750

@@ -763,19 +763,6 @@
763763

764764

765765

766-
</li>
767-
768-
<li class="chapter " data-level="5.4.5" data-path="../js-interop/">
769-
770-
<a href="../js-interop/#js-tools">
771-
772-
773-
JsTools
774-
775-
</a>
776-
777-
778-
779766
</li>
780767

781768

@@ -998,7 +985,7 @@ <h2 id="using-js-components-in-java">Using JS Components in Java </h2>
998985
<p class="info-panel">
999986
This examples declare Vue components directly in the index.html.
1000987
For this to work, you need Vue loaded before you declare them.
1001-
You can comment <code>VueLib.inject()</code> in your GWT app, and a JS dependency to Vue in your index.html instead.
988+
You can use <code>VueGWT.initWithoutVueLib()</code> in your GWT app, and a JS dependency to Vue in your index.html instead.
1002989
</p>
1003990

1004991
<h3 id="instantiating-a-js-component-in-java">Instantiating a JS Component in Java</h3>
@@ -1041,8 +1028,8 @@ <h3 id="declaring-our-js-component-interface">Declaring our JS Component Interfa
10411028
<p>We would like to manipulate our instances from Java.
10421029
For this we need some kind of Java definition.</p>
10431030
<p>Let&apos;s do it for our <code>FullJsWithMethodsComponent</code>:</p>
1044-
<pre><code class="lang-java"><span class="hljs-meta">@JsComponent</span>
1045-
<span class="hljs-meta">@JsType</span>(isNative = <span class="hljs-keyword">true</span>, namespace = JsPackage.GLOBAL)
1031+
<pre><code class="lang-java"><span class="hljs-meta">@JsComponent</span>(<span class="hljs-string">&quot;FullJsWithMethodsComponent&quot;</span>)
1032+
<span class="hljs-meta">@JsType</span>(isNative = <span class="hljs-keyword">true</span>, namespace = JsPackage.GLOBAL, name = <span class="hljs-string">&quot;Function&quot;</span>)
10461033
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FullJsWithMethodsComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">VueComponent</span> </span>{
10471034
<span class="hljs-keyword">public</span> <span class="hljs-keyword">int</span> value;
10481035

@@ -1052,7 +1039,7 @@ <h3 id="declaring-our-js-component-interface">Declaring our JS Component Interfa
10521039
<p>Looks pretty similar to our Java Components, but there a few key differences:</p>
10531040
<ul>
10541041
<li>We use the <code>@JsComponent</code> annotation instead of <code>@Component</code></li>
1055-
<li>We have to use the <code>@JsType</code> annotation with <code>isNative = true</code></li>
1042+
<li>We have to use the <code>@JsType</code> to tell GWT this is a native <code>Function</code></li>
10561043
<li>Our JS methods are declared as <code>native</code> in our Java class.
10571044
We don&apos;t need to provide their implementations, they will come from the JS Component.</li>
10581045
<li>You only need to declare what you want to interact with in the Class.
@@ -1073,19 +1060,18 @@ <h3 id="declaring-our-js-component-interface">Declaring our JS Component Interfa
10731060
</div>
10741061

10751062

1076-
<h4 id="about-jstype">About <code>@JsType</code></h4>
1077-
<p>You may have noticed we also pass <code>namespace = JsPackage.GLOBAL</code> to our <code>@JsType</code> annotation.
1078-
This is because by default, GWT will use the Java package and the Class Name to determine where the JS Constructor is in the JavaScript Context.</p>
1079-
<p>So if your Java Class is: <code>com.mypackage.MyComponent</code>, it will look for:</p>
1080-
<pre><code class="lang-js"><span class="hljs-built_in">window</span>.com = {
1081-
mypackage: {
1082-
MyComponent: MyComponentConstructor
1083-
}
1084-
}
1085-
</code></pre>
1086-
<p>By passing <code>namespace = JsPackage.GLOBAL</code> we tell GWT that the JS Constructor is on Window directly.
1087-
If your JS Constructor is in an object <code>ComponentsBundle</code> on Window, then pass <code>namespace = &quot;ComponentsBundle&quot;</code>.
1088-
You can also pass <code>name = &quot;MyJSName&quot;</code> to indicate the name of your JS Constructor, if it differs from your Java Class name.</p>
1063+
<h4 id="how-does-jscomponent-find-the-existing-js-component">How does <code>@JsComponent</code> find the existing JS Component?</h4>
1064+
<p>You may have noticed we also pass <code>&quot;FullJsWithMethodsComponent&quot;</code> to our <code>@JsComponent</code> annotation.
1065+
This is used to find the Js Component on <code>window</code>.</p>
1066+
<p>So if you put <code>@JsComponent(&quot;MyVueLib.MyComponent&quot;)</code>, it will link your <code>JsComponent</code> class to: <code>window.MyVueLib.MyComponent</code>.</p>
1067+
<h4 id="what-if-the-js-library-exposes-a-component-options-object">What if the JS library exposes a Component options object?</h4>
1068+
<p>Some libraries like <a href="http://vue-chartjs.org/" target="_blank">Vue ChartJS</a> exposes a Component options object and not a Component Constructor.
1069+
You can use the same method, and Vue GWT will automatically create a Vue Component constructor from those options for you.
1070+
The only change is you have to tell GWT that the instance is an <code>Object</code> and not a <code>Function</code>:</p>
1071+
<pre><code class="lang-java"><span class="hljs-meta">@JsComponent</span>(<span class="hljs-string">&quot;VueChartJs.Line&quot;</span>)
1072+
<span class="hljs-meta">@JsType</span>(isNative = <span class="hljs-keyword">true</span>, namespace = JsPackage.GLOBAL, name = <span class="hljs-string">&quot;Object&quot;</span>)
1073+
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AbstractVueLineChartComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">VueComponent</span>
1074+
</span></code></pre>
10891075
<h3 id="using-our-js-component-in-a-java-one">Using Our JS Component in a Java One</h3>
10901076
<p>You can use your JS Component just like the Java ones.
10911077
Which means you can also pass them to the <code>@Component</code> annotation <a href="../essential/components.html#using-components">as local components</a>:</p>
@@ -1150,7 +1136,7 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
11501136
<script>
11511137
var gitbook = gitbook || [];
11521138
gitbook.push(function() {
1153-
gitbook.page.hasChanged({"page":{"title":"Integrating With JS Components","level":"8.1","depth":1,"next":{"title":"Using JS Components in Java","level":"8.1.1","depth":2,"anchor":"#using-js-components-in-java","path":"advanced/integrating-with-js-components.md","ref":"advanced/integrating-with-js-components.md#using-js-components-in-java","articles":[]},"previous":{"title":"Routing","level":"7.1","depth":1,"path":"scaling-up/routing.md","ref":"scaling-up/routing.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["include","toggle-chapters"],"pluginsConfig":{"include":{},"toggle-chapters":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"advanced/integrating-with-js-components.md","mtime":"2017-09-10T17:55:25.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-10T15:06:21.162Z"},"basePath":"..","book":{"language":""}});
1139+
gitbook.page.hasChanged({"page":{"title":"Integrating With JS Components","level":"8.1","depth":1,"next":{"title":"Using JS Components in Java","level":"8.1.1","depth":2,"anchor":"#using-js-components-in-java","path":"advanced/integrating-with-js-components.md","ref":"advanced/integrating-with-js-components.md#using-js-components-in-java","articles":[]},"previous":{"title":"Routing","level":"7.1","depth":1,"path":"scaling-up/routing.md","ref":"scaling-up/routing.md","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["include","toggle-chapters"],"pluginsConfig":{"include":{},"toggle-chapters":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"advanced/integrating-with-js-components.md","mtime":"2017-11-18T09:24:57.571Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-11-18T11:51:52.642Z"},"basePath":"..","book":{"language":""}});
11541140
});
11551141
</script>
11561142
</div>

‎docs/advanced/unsupported-features.html‎

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -684,12 +684,12 @@
684684

685685
</li>
686686

687-
<li class="chapter " data-level="5.3" data-path="../gwt-integration/user-panels.html">
687+
<li class="chapter " data-level="5.3" data-path="../gwt-integration/widgets.html">
688688

689-
<a href="../gwt-integration/user-panels.html">
689+
<a href="../gwt-integration/widgets.html">
690690

691691

692-
User Panels
692+
Vue GWT and Widgets
693693

694694
</a>
695695

@@ -713,10 +713,10 @@
713713

714714
<li class="chapter " data-level="5.4.1" data-path="../js-interop/">
715715

716-
<a href="../js-interop/#js-object">
716+
<a href="../js-interop/#js-property-map">
717717

718718

719-
JsObject
719+
JsPropertyMap
720720

721721
</a>
722722

@@ -739,10 +739,10 @@
739739

740740
<li class="chapter " data-level="5.4.3" data-path="../js-interop/">
741741

742-
<a href="../js-interop/#js-array">
742+
<a href="../js-interop/#array-object">
743743

744744

745-
JsArray
745+
Array
746746

747747
</a>
748748

@@ -761,19 +761,6 @@
761761

762762

763763

764-
</li>
765-
766-
<li class="chapter " data-level="5.4.5" data-path="../js-interop/">
767-
768-
<a href="../js-interop/#js-tools">
769-
770-
771-
JsTools
772-
773-
</a>
774-
775-
776-
777764
</li>
778765

779766

@@ -993,7 +980,7 @@ <h1 class="search-results-title">No results matching "<span class='search-query'
993980
<script>
994981
var gitbook = gitbook || [];
995982
gitbook.push(function() {
996-
gitbook.page.hasChanged({"page":{"title":"Unsupported Features","level":"8.2","depth":1,"previous":{"title":"Using our Java Components in JS","level":"8.1.2","depth":2,"anchor":"#using-java-components-in-js","path":"advanced/integrating-with-js-components.md","ref":"advanced/integrating-with-js-components.md#using-java-components-in-js","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["include","toggle-chapters"],"pluginsConfig":{"include":{},"toggle-chapters":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"advanced/unsupported-features.md","mtime":"2017-09-10T17:55:25.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-10T15:06:21.162Z"},"basePath":"..","book":{"language":""}});
983+
gitbook.page.hasChanged({"page":{"title":"Unsupported Features","level":"8.2","depth":1,"previous":{"title":"Using our Java Components in JS","level":"8.1.2","depth":2,"anchor":"#using-java-components-in-js","path":"advanced/integrating-with-js-components.md","ref":"advanced/integrating-with-js-components.md#using-java-components-in-js","articles":[]},"dir":"ltr"},"config":{"gitbook":"*","theme":"default","variables":{},"plugins":["include","toggle-chapters"],"pluginsConfig":{"include":{},"toggle-chapters":{},"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"}},"file":{"path":"advanced/unsupported-features.md","mtime":"2017-09-10T17:55:25.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-11-18T11:51:52.642Z"},"basePath":"..","book":{"language":""}});
997984
});
998985
</script>
999986
</div>

0 commit comments

Comments
 (0)