From 7ac2089afb27af6fdb4f187c934a9a1dde937f1b Mon Sep 17 00:00:00 2001 From: Teemu Suo-Anttila Date: Thu, 12 May 2016 14:24:33 +0300 Subject: Add basic AppWidgetset documentation Change-Id: Iaea8b5267c7ccb2a6bc667cc89078bd3c4bf2435 --- .../getting-started-first-project.asciidoc | 40 ++-- .../getting-started/getting-started-maven.asciidoc | 20 +- .../getting-started/img/myproject-compiletheme.png | Bin 0 -> 3210 bytes .../img/myproject-compilewidgetset.png | Bin 60613 -> 4556 bytes .../img/myproject-created-annotated-hi.png | Bin 159382 -> 180152 bytes .../getting-started/img/myproject-created.png | Bin 161562 -> 113354 bytes .../img/netbeans-created-annotated-hi.png | Bin 100861 -> 138602 bytes .../img/netbeans-newproject-created.png | Bin 22317 -> 16261 bytes .../myproject-created-annotated.svg | 202 ++++++++------------- .../netbeans-created-annotated.svg | 197 +++++++------------- 10 files changed, 171 insertions(+), 288 deletions(-) create mode 100644 documentation/getting-started/img/myproject-compiletheme.png (limited to 'documentation/getting-started') diff --git a/documentation/getting-started/getting-started-first-project.asciidoc b/documentation/getting-started/getting-started-first-project.asciidoc index 73976baeaf..bfc9ddf154 100644 --- a/documentation/getting-started/getting-started-first-project.asciidoc +++ b/documentation/getting-started/getting-started-first-project.asciidoc @@ -26,11 +26,11 @@ This walkthrough assumes that you have already installed the Eclipse IDE, the Va ifdef::web[] [[getting-started.first-project.ivy]] -== Creating the Project +== Creating an Ivy Project endif::web[] ifdef::web[] -_The following describes the creation of an Ivy project. The upcoming version of the Eclipse plug-in creates Maven projects. For that, see <>._ +NOTE: The following describes the creation of an Ivy project. The upcoming version of the Eclipse plug-in creates Maven projects. For that, see <>. endif::web[] ifdef::web[] @@ -162,7 +162,7 @@ project hierarchy shown in the Project Explorer is shown in [[figure.getting-started.first-project.exploring]] .A New Vaadin Project -image::img/myproject-ivy-created.png[scaledwidth=60%] +image::img/myproject-ivy-created.png[width=40%, scaledwidth=60%] The Vaadin libraries and other dependencies are managed by Ivy. Notice that the libraries are not stored under the project folder, even though they are listed @@ -224,8 +224,8 @@ endif::web[] == Creating a Maven Project ifdef::web[] -_The following describes project creation in the upcoming version of the Eclipse plug-in, which creates Maven rather than Ivy projects. -To use it, you must have installed the experimental version of the plug-in._ +NOTE: The following describes project creation in the upcoming version of the Eclipse plug-in, which creates Maven rather than Ivy projects. +To use it, you must have installed the experimental version of the plug-in. endif::web[] Let us create the first application project with the tools installed in the previous section. @@ -272,12 +272,13 @@ Finally, click [guibutton]#Finish# to create the project. [[getting-started.first-project.exploring]] == Exploring the Project -After the [guilabel]#New Project# wizard exits, it has done all the work for you: a UI class skeleton has been written to the [filename]#src# directory. +After the [guilabel]#New Project# wizard exits, it has done all the work for you. +A UI class skeleton has been written to the [filename]#src# directory. The project hierarchy shown in the Project Explorer is shown in <>. [[figure.getting-started.first-project.exploring]] -.A new Vaadin Project -image::img/myproject-created-annotated-hi.png[width=80%, scaledwidth=90%] +.A new Vaadin project +image::img/myproject-created-annotated-hi.png[width=80%, scaledwidth=100%] The Vaadin libraries and other dependencies are managed by Maven. Notice that the libraries are not stored under the project folder, even though they are listed in the "Java Resources > Libraries > Maven Dependencies" virtual folder. @@ -295,7 +296,6 @@ import com.vaadin.ui.UI; ... @Theme("mytheme") -@Widgetset("com.example.myproject.MyAppWidgetset") public class MyUI extends UI { @Override @@ -325,14 +325,14 @@ public class MyUI extends UI { } ---- -[[getting-started.first-project.widgetset]] -== Compiling the Widget Set and Theme +[[getting-started.first-project.theme]] +== Compiling the Theme -Before running the project for the first time, select [guilabel]#Compile Widgetset and Theme# from the menu shown in <>. +Before running the project for the first time, click the [guilabel]#Compile Vaadin Theme# button in the toolbar, as shown in <>. -[[figure.getting-started.first-project.compilewidgetset]] -.Compile Widgetset and Theme Menu -image::img/myproject-compilewidgetset.png[width=50%] +[[figure.getting-started.first-project.compiletheme]] +.Compile Vaadin Theme +image::img/myproject-compiletheme.png[width=40%, scaledwidth=60%] [[getting-started.first-project.coding]] == Coding Tips for Eclipse @@ -460,8 +460,9 @@ Updating the libraries can take several minutes. You can see the progress in the Eclipse status bar. You can get more details about the progress by clicking the indicator. -. If you have compiled the widget set for your project, recompile it by clicking -the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar. +. _In Vaadin 7.6 and older_: if you have compiled the widget set for your project, recompile it by clicking the *Compile Vaadin Widgetset* button in the Eclipse toolbar. ++ +image::img/myproject-compilewidgetset.png[width=50%, scaledwidth=60%] . Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by right-clicking the server and selecting [guilabel]#Clean# as well as @@ -497,8 +498,9 @@ Updating the libraries can take several minutes. You can see the progress in the Eclipse status bar. You can get more details about the progress by clicking the indicator. -. If you have compiled the widget set for your project, recompile it by clicking -the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar. +. If you have compiled the widget set for your project, recompile it by clicking the *Compile Vaadin Widgetset* button in Eclipse toolbar. ++ +image::img/myproject-compilewidgetset.png[width=50%, scaledwidth=60%] . Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by right-clicking the server and selecting Clean as well as Clean Tomcat Work diff --git a/documentation/getting-started/getting-started-maven.asciidoc b/documentation/getting-started/getting-started-maven.asciidoc index 5d4618cb94..501f072912 100644 --- a/documentation/getting-started/getting-started-maven.asciidoc +++ b/documentation/getting-started/getting-started-maven.asciidoc @@ -11,7 +11,7 @@ layout: page In previous sections, we looked into creating a Vaadin Maven project in different IDEs. In this section, we look how to create such a project on command-line. -You can then import such a project to your IDE. +You can then import such a project in your IDE. In addition to regular Maven, you can use any Maven-compatible build or dependency management system, such as Ivy or Gradle. For Gradle, see the @@ -35,7 +35,7 @@ line): -DarchetypeGroupId=com.vaadin \ -DarchetypeArtifactId=[replaceable]#vaadin-archetype-application# \ -DarchetypeVersion=[replaceable]#7.x.x# \ - -DgroupId=[replaceable]#your.company# \ + -DgroupId=[replaceable]#com.pany# \ -DartifactId=[replaceable]#project-name# \ -Dversion=[replaceable]#0.1# \ -Dpackaging=war @@ -96,13 +96,14 @@ WAR package. You can do this with the [literal]#++package++# goal as follows: The location of the resulting WAR package should be displayed in the command output. You can then deploy it to your favorite application server. -The easiest way to run Vaadin applications with Maven is to use the light-weight -Jetty web server. After compiling the package, all you need to do is type: +The easiest way to run Vaadin applications with Maven is to use the light-weight Jetty web server. +After compiling the package, all you need to do is type: [subs="normal"] ---- [prompt]#$# [command]#mvn# jetty:run ---- + The special goal starts the Jetty server in port 8080 and deploys the application. You can then open it in a web browser at http://localhost:8080/project-name. @@ -110,17 +111,16 @@ http://localhost:8080/project-name. (((range="endofrange", startref="term.maven.compiling"))) [[getting-started.maven.addons]] -== Using Add-ons and Custom Widget Sets +== Using Add-ons ((("Maven", "using add-ons", id="term.maven.addons", range="startofrange"))) - -If you use Vaadin add-ons that include a widget set or make your custom widgets, -you need to enable widget set compilation in the POM. The required configuration -is described in -<>. +_In projects that use Vaadin 7.6 or older_, you need to compile the widget set manually. +See the add-on usage instructions. (((range="endofrange", startref="term.maven.addons"))) (((range="endofrange", startref="term.maven.creating"))) diff --git a/documentation/getting-started/img/myproject-compiletheme.png b/documentation/getting-started/img/myproject-compiletheme.png new file mode 100644 index 0000000000..ff8ae55519 Binary files /dev/null and b/documentation/getting-started/img/myproject-compiletheme.png differ diff --git a/documentation/getting-started/img/myproject-compilewidgetset.png b/documentation/getting-started/img/myproject-compilewidgetset.png index ae6791277b..8a77aaaf58 100644 Binary files a/documentation/getting-started/img/myproject-compilewidgetset.png and b/documentation/getting-started/img/myproject-compilewidgetset.png differ diff --git a/documentation/getting-started/img/myproject-created-annotated-hi.png b/documentation/getting-started/img/myproject-created-annotated-hi.png index 6927b883ed..4107110829 100644 Binary files a/documentation/getting-started/img/myproject-created-annotated-hi.png and b/documentation/getting-started/img/myproject-created-annotated-hi.png differ diff --git a/documentation/getting-started/img/myproject-created.png b/documentation/getting-started/img/myproject-created.png index c9cc605325..b995edfd5a 100644 Binary files a/documentation/getting-started/img/myproject-created.png and b/documentation/getting-started/img/myproject-created.png differ diff --git a/documentation/getting-started/img/netbeans-created-annotated-hi.png b/documentation/getting-started/img/netbeans-created-annotated-hi.png index 5abea08c58..7d2e737406 100644 Binary files a/documentation/getting-started/img/netbeans-created-annotated-hi.png and b/documentation/getting-started/img/netbeans-created-annotated-hi.png differ diff --git a/documentation/getting-started/img/netbeans-newproject-created.png b/documentation/getting-started/img/netbeans-newproject-created.png index 6fc0bd8978..30ad5600c3 100644 Binary files a/documentation/getting-started/img/netbeans-newproject-created.png and b/documentation/getting-started/img/netbeans-newproject-created.png differ diff --git a/documentation/getting-started/original-drawings/myproject-created-annotated.svg b/documentation/getting-started/original-drawings/myproject-created-annotated.svg index 70fc378bdc..ca012a031a 100644 --- a/documentation/getting-started/original-drawings/myproject-created-annotated.svg +++ b/documentation/getting-started/original-drawings/myproject-created-annotated.svg @@ -14,7 +14,7 @@ height="744.09448" id="svg1901" sodipodi:version="0.32" - inkscape:version="0.48.4 r9939" + inkscape:version="0.91 r" sodipodi:docname="myproject-created-annotated.svg" version="1.1"> + width="490" + height="435" + x="70" + y="149.09448" + ry="3.7880721" + transform="translate(0,308.2677)" /> + height="428.90781" + width="352.83734" /> @@ -155,7 +155,7 @@ sodipodi:cy="419.09448" sodipodi:rx="9.1659365" sodipodi:ry="9.1659365" - d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z" + d="M 34.165936,419.09448 A 9.1659365,9.1659365 0 0 1 25,428.26042 9.1659365,9.1659365 0 0 1 15.834064,419.09448 9.1659365,9.1659365 0 0 1 25,409.92855 a 9.1659365,9.1659365 0 0 1 9.165936,9.16593 z" transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" /> The UI class skeleton - - - - - - - + + transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" + cx="25" + cy="419.09448" + r="9.1659365" /> - - + + transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" + cx="25" + cy="419.09448" + r="9.1659365" /> - - + + transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" + cx="25" + cy="419.09448" + r="9.1659365" /> The widget set - The theme + y="759.17407">The theme Maven project configuration + y="859.77722">Maven project configuration Project README skeleton + y="877.28015">Project README skeleton diff --git a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg index ae0176f25b..b61f1549c8 100644 --- a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg +++ b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg @@ -14,7 +14,7 @@ height="744.09448" id="svg1901" sodipodi:version="0.32" - inkscape:version="0.48.4 r9939" + inkscape:version="0.91 r" sodipodi:docname="netbeans-created-annotated.svg" version="1.1"> image/svg+xml - + @@ -137,188 +137,129 @@ x="-12.462494" id="image3215" xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/netbeans-newproject-created.png" - width="587.46252" - height="487.08057" - mask="url(#mask3028)" /> + width="312" + height="354" + mask="url(#mask3028)" + transform="matrix(1.1875352,0,0,1.1875352,2.3371561,-91.708359)" /> - - + + transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" + cx="25" + cy="419.09448" + r="9.1659365" /> The UI class skeleton - - - - - + x="389.74399" + y="768.6167">The UI class skeleton - - + + transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)" + cx="25" + cy="419.09448" + r="9.1659365" /> - - + + transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" + cx="25" + cy="419.09448" + r="9.1659365" /> The widget set definition - The theme + x="389.74399" + y="664.86194">The application theme Maven project configuration + x="388.75201" + y="829.60632">Maven project configuration -- cgit v1.2.3