diff options
author | Marko Gronroos <magi@vaadin.com> | 2016-05-20 14:44:42 +0300 |
---|---|---|
committer | Marko Grönroos <magi@vaadin.com> | 2016-06-30 11:13:20 +0000 |
commit | 93767cf76b2fb14c65b758066c67fc8b48cc2eeb (patch) | |
tree | 958ddb8c45271e9a505280ef750ae07ebeda170f /documentation/getting-started | |
parent | edad7348bb8eba807225bfa72d4b0a4342426c71 (diff) | |
download | vaadin-framework-93767cf76b2fb14c65b758066c67fc8b48cc2eeb.tar.gz vaadin-framework-93767cf76b2fb14c65b758066c67fc8b48cc2eeb.zip |
Scaled images for print edition and fixed errors up to the beginning of layouts chapter (#19835). Also major revision of Tree, CustomField, and layouts overview.
Change-Id: I19f5e9511b83f953ce4707f324d81c2821ebb69d
Diffstat (limited to 'documentation/getting-started')
-rw-r--r-- | documentation/getting-started/chapter-getting-started.asciidoc | 5 | ||||
-rw-r--r-- | documentation/getting-started/getting-started-first-project.asciidoc | 88 | ||||
-rw-r--r-- | documentation/getting-started/getting-started-idea.asciidoc | 12 | ||||
-rw-r--r-- | documentation/getting-started/getting-started-netbeans.asciidoc | 10 | ||||
-rw-r--r-- | documentation/getting-started/getting-started-overview.adoc | 8 | ||||
-rw-r--r-- | documentation/getting-started/img/idea-maven-newproject-1.png | bin | 48841 -> 30956 bytes | |||
-rw-r--r-- | documentation/getting-started/img/idea-newproject-1.png | bin | 47846 -> 29951 bytes | |||
-rw-r--r-- | documentation/getting-started/img/idea-newproject-2.png | bin | 48811 -> 29030 bytes | |||
-rw-r--r-- | documentation/getting-started/img/netbeans-newproject-1.png | bin | 55377 -> 45003 bytes | |||
-rw-r--r-- | documentation/getting-started/img/netbeans-newproject-2.png | bin | 49508 -> 39198 bytes | |||
-rw-r--r-- | documentation/getting-started/img/netbeans-server.png | bin | 27387 -> 18349 bytes |
11 files changed, 73 insertions, 50 deletions
diff --git a/documentation/getting-started/chapter-getting-started.asciidoc b/documentation/getting-started/chapter-getting-started.asciidoc index 22397eb352..687029adaa 100644 --- a/documentation/getting-started/chapter-getting-started.asciidoc +++ b/documentation/getting-started/chapter-getting-started.asciidoc @@ -5,7 +5,6 @@ This chapter gives practical instructions for creating a Vaadin application proj The instructions are given separately for the Eclipse IDE, NetBeans, and IntelliJ IDEA. - include::getting-started-overview.adoc[leveloffset=+2] include::getting-started-libraries.asciidoc[leveloffset=+2] @@ -14,12 +13,12 @@ include::getting-started-archetypes.asciidoc[leveloffset=+2] include::getting-started-first-project.asciidoc[leveloffset=+2] -include::getting-started-maven.asciidoc[leveloffset=+2] - include::getting-started-netbeans.asciidoc[leveloffset=+2] include::getting-started-idea.asciidoc[leveloffset=+2] +include::getting-started-maven.asciidoc[leveloffset=+2] + include::getting-started-package.asciidoc[leveloffset=+2] include::getting-started-scala.asciidoc[leveloffset=+2] diff --git a/documentation/getting-started/getting-started-first-project.asciidoc b/documentation/getting-started/getting-started-first-project.asciidoc index 0ec7ed9c58..73976baeaf 100644 --- a/documentation/getting-started/getting-started-first-project.asciidoc +++ b/documentation/getting-started/getting-started-first-project.asciidoc @@ -14,7 +14,7 @@ Vaadin Plugin. The task will include the following steps: . Write the source code -. Configure and start Tomcat (or some other web server) +. Configure and start web server . Open a web browser to use the web application @@ -41,13 +41,13 @@ previous section. First, launch Eclipse and follow the following steps: . In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7 Project" and click [guibutton]#Next#. + -image::img/myproject-ivy-new-vaadin.png[width=70%] +image::img/myproject-ivy-new-vaadin.png[width=70%, scaledwidth=100%] . In the [guilabel]#Vaadin Project# step, you need to set the basic web project settings. You need to give at least the __project name__ and the runtime; the default values should be good for the other settings. + -image::img/myproject-ivy-settings.png[width=70%] +image::img/myproject-ivy-settings.png[width=70%, scaledwidth=100%] [guilabel]#Project name#:: Give the project a name. The name should be a valid identifier usable cross-platform as a filename and inside a URL, so using only lower-case @@ -110,7 +110,7 @@ settings, or click [guibutton]#Next#. the settings are pre-filled, and you should normally accept them as they are. + -image::img/myproject-ivy-web.png[] +image::img/myproject-ivy-web.png[scaledwidth=100%] [guilabel]#Context Root#:: The context root (of the application) identifies the application in the URL used for accessing it. For example, if the project has a [literal]#++myproject++# @@ -131,7 +131,7 @@ If you are trying out Vaadin for the first time, you should not need to change anything. You can set most of the settings afterwards, except the creation of the portlet configuration. + -image::img/myproject-vaadin.png[] +image::img/myproject-vaadin.png[scaledwidth=100%] [guilabel]#Create project template#:: Make the wizard create an UI class stub. @@ -236,17 +236,17 @@ First, launch Eclipse and follow the following steps: . In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7 Project (Maven)" and click [guibutton]#Next#. + -image::img/myproject-new-vaadin.png[width=70%] +image::img/myproject-new-vaadin.png[width=70%, scaledwidth=90%] . In the [guilabel]#Select a Maven archetype# step, you need to select the project type. To create a simple test project, select the [guilabel]#Single-module Application Project#. + -image::img/myproject-archetype-selection.png[width=70%] +image::img/myproject-archetype-selection.png[width=70%, scaledwidth=90%] . In the [guilabel]#Specify archetype parameters# step, you need to give at least the [guilabel]#Group Id# and the [guilabel]#Artifact Id#. The default values should be good for the other settings. + -image::img/myproject-settings.png[width=70%] +image::img/myproject-settings.png[width=70%, scaledwidth=90%] [guilabel]#Group Id#:: Give the project an organization-level identifier, for example, [packagename]#com.example#. @@ -277,7 +277,7 @@ The project hierarchy shown in the Project Explorer is shown in <<figure.getting [[figure.getting-started.first-project.exploring]] .A new Vaadin Project -image::img/myproject-created-annotated-hi.png[width=80%] +image::img/myproject-created-annotated-hi.png[width=80%, scaledwidth=90%] 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. @@ -337,6 +337,8 @@ image::img/myproject-compilewidgetset.png[width=50%] [[getting-started.first-project.coding]] == Coding Tips for Eclipse +=== Code Completion + One of the most useful features in Eclipse is __code completion__. Pressing kbd:[Ctrl+Space] in the editor will display a pop-up list of possible class name and method name completions, as shown in @@ -345,21 +347,20 @@ context of the cursor position. [[figure.getting-started.first-project.coding.codecompletion]] .Java Code Completion in Eclipse -image::img/codingtips-codecompletion.png[] - -To add an [literal]#++import++# statement for a class, such as -[classname]#Button#, simply press kbd:[Ctrl+Shift+O] or click the red error indicator on -the left side of the editor window. If the class is available in multiple -packages, a list of the alternatives is displayed, as shown in -<<figure.getting-started.first-project.coding.import>>. For server-side -development, you should normally use the classes under the -[package]#com.vaadin.ui# or [package]#com.vaadin.server# packages. You can not -use client-side classes (under [package]#com.vaadin.client#) or GWT classes for -server-side development. +image::img/codingtips-codecompletion.png[scaledwidth=100%] + +=== Generating Imports + +To automatically add an [literal]#++import++# statement for a class, such as +[classname]#Button#, simply press kbd:[Ctrl+Shift+O] or click the red error indicator on the left side of the editor window. +If the class is available in multiple packages, a list of the alternatives is displayed, as shown in <<figure.getting-started.first-project.coding.import>>. [[figure.getting-started.first-project.coding.import]] -.Importing Classes Automatically -image::img/codingtips-automaticimports.png[scaledwidth=80%] +.Importing classes automatically +image::img/codingtips-automaticimports.png[scaledwidth=70%] + +For server-side Vaadin development, you should generally use the classes under the [package]#com.vaadin.ui# or [package]#com.vaadin.server# packages. +_You can not use client-side classes (under [package]#com.vaadin.client#) or GWT classes for server-side development._ [[getting-started.first-project.server]] == Setting Up and Starting the Web Server @@ -375,29 +376,39 @@ directory. Follow the following steps: -. Switch to the Servers tab in the lower panel in Eclipse. List of servers should be empty after Eclipse is installed. Right-click on the empty area in the panel and select "New > Server". +. Switch to the [guilabel]#Servers# tab in the lower panel in Eclipse. +List of servers should be empty after Eclipse is installed. +Right-click on the empty area in the panel and select "New > Server". +ifdef::web[] + -image::img/tomcat-startserver-1.png[] - +image::img/tomcat-startserver-1.png[width=60%, scaledwidth=100%] +endif::web[] . Select "Apache > Tomcat v7.0 Server" and set [guilabel]#Server's host name# as [literal]#++localhost++#, which should be the default. If you have only one Tomcat installed, [guilabel]#Server runtime# has only one choice. Click [guibutton]#Next#. +ifdef::web[] + -image::img/tomcat-startserver-2.png[] - +image::img/tomcat-startserver-2.png[width=60%, scaledwidth=100%] +endif::web[] . Add your project to the server by selecting it on the left and clicking [guibutton]#Add# to add it to the configured projects on the right. Click [guibutton]#Finish#. +ifdef::web[] + -image::img/tomcat-startserver-3.png[] +image::img/tomcat-startserver-3.png[width=60%, scaledwidth=100%] +endif::web[] . The server and the project are now installed in Eclipse and are shown in the [guilabel]#Servers# tab. To start the server, right-click on the server and select [guilabel]#Debug#. To start the server in non-debug mode, select [guilabel]#Start#. +ifdef::web[] + -image::img/tomcat-startserver-4.png[] +image::img/tomcat-startserver-4.png[width=60%, scaledwidth=100%] +endif::web[] . The server starts and the WebContent directory of the project is published to the server on http://localhost:8080/myproject/. +ifdef::web[] + -image::img/tomcat-startserver-5.png[] +image::img/tomcat-startserver-5.png[width=60%, scaledwidth=100%] +endif::web[] [[getting-started.first-project.run]] == Running and Debugging @@ -406,8 +417,12 @@ Starting your application is as easy as selecting [guilabel]#myproject# from the [guilabel]#Project Explorer# and then "Run > Debug As > Debug on Server". Eclipse then opens the application in built-in web browser. +//// +// This is rather irrelevant +// .Running a Vaadin Application -image::img/runningMyProject.png[width=60%] +image::img/runningMyProject.png[width=60%, scaledwidth=80%] +//// You can insert break points in the Java code by double-clicking on the left margin bar of the source code window. For example, if you insert a breakpoint in @@ -418,14 +433,20 @@ examine and change the state of the application. To continue execution, select [guilabel]#Resume# from [guilabel]#Run# menu. .Debugging a Vaadin Application -image::img/debuggingMyProject.png[] +image::img/debuggingMyProject.png[scaledwidth=100%] Above, we described how to debug a server-side application. Debugging client-side applications and widgets is described in <<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging Client-Side Code">>. [[getting-started.eclipse.mavenlibraryupdate]] +ifdef::web[] == Updating the Vaadin Libraries in Maven Projects +endif::web[] +// The book only describes Maven projects +ifndef::web[] +== Updating the Vaadin Libraries +endif::web[] Updating the Vaadin plugin does not update Vaadin libraries. The libraries are project specific, as a different version might be required for different @@ -449,6 +470,7 @@ right-clicking the server and selecting [guilabel]#Clean# as well as If you experience problems after updating the libraries, you can try using "Maven > Update Project". +ifdef::web[] [[getting-started.eclipse.libraryupdate]] == Updating the Vaadin Libraries in Ivy Projects @@ -486,3 +508,5 @@ If you experience problems after updating the libraries, you can try clearing the Ivy resolution caches by right-clicking the project and selecting "Ivy > Clean all caches". Then, do the "Ivy > Resolve" and other tasks again. + +endif::web[] diff --git a/documentation/getting-started/getting-started-idea.asciidoc b/documentation/getting-started/getting-started-idea.asciidoc index c573770755..74f155a6d8 100644 --- a/documentation/getting-started/getting-started-idea.asciidoc +++ b/documentation/getting-started/getting-started-idea.asciidoc @@ -35,7 +35,7 @@ the [guilabel]#Java SDK# to be used for the project. Vaadin requires at least Java 6. If you have not configured a Java SDK previously, you can configure it here. + -image::img/idea-newproject-1.png[] +image::img/idea-newproject-1.png[scaledwidth=100%] + Click [guibutton]#Next#. @@ -45,7 +45,7 @@ Click [guibutton]#Next#. path. You probably also want an application stub, so select [guilabel]#Create sample application# and give a name for the generated UI class. + -image::img/idea-newproject-2.png[] +image::img/idea-newproject-2.png[scaledwidth=100%] + Do __not__ click [guibutton]#Finish# yet. @@ -54,7 +54,7 @@ Set it as an integrated server that you have configured in IntelliJ IDEA, as des ifdef::web[] + -image::img/idea-newproject-3.png[] +image::img/idea-newproject-3.png[scaledwidth=100%] endif::web[] . Click [guibutton]#Finish#. @@ -62,7 +62,7 @@ endif::web[] The project is created with the UI class stub and a [filename]#web.xml# deployment descriptor. -image::img/idea-newproject-4.png[] +image::img/idea-newproject-4.png[scaledwidth=100%] The wizard does not currently create a servlet class automatically, and uses Servlet 2.4 compatible deployment with a [filename]#web.xml# deployment @@ -92,7 +92,7 @@ server using a run/debug configuration. . Enter a project name, location, and the Java SDK to be used for the project. Vaadin requires at least Java 6. + -image::img/idea-maven-newproject-1.png[] +image::img/idea-maven-newproject-1.png[scaledwidth=100%] + Click [guibutton]#Next#. //<?dbfo-need height="6cm" ?> @@ -101,7 +101,7 @@ Click [guibutton]#Next#. [guilabel]#Version# for the project, or use the defaults. + -image::img/idea-maven-newproject-2.png[] +image::img/idea-maven-newproject-2.png[scaledwidth=100%] . Check [guilabel]#Create from archetype# //<?dbfo-need height="6cm" ?> diff --git a/documentation/getting-started/getting-started-netbeans.asciidoc b/documentation/getting-started/getting-started-netbeans.asciidoc index f5fa0afb14..64948471fe 100644 --- a/documentation/getting-started/getting-started-netbeans.asciidoc +++ b/documentation/getting-started/getting-started-netbeans.asciidoc @@ -24,13 +24,13 @@ theme, and so on. . In the [guilabel]#New Project# window that opens, select the [guilabel]#Vaadin# category and one of the Vaadin archetypes from the right. + -image::img/netbeans-newproject-1.png[] +image::img/netbeans-newproject-1.png[width=80%, scaledwidth=100%] + The archetypes are described in more detail in <<getting-started-archetypes#getting-started.archetypes, "Overview of Maven Archetypes">>. . In the [guilabel]#Name and Location# step, enter the project parameters. + -image::img/netbeans-newproject-2.png[] +image::img/netbeans-newproject-2.png[width=80%, scaledwidth=100%] [guilabel]#Project Name#:: A project name. The name must be a valid identifier that may only contains alphanumerics, minus, and underscore. @@ -66,7 +66,7 @@ The project hierarchy shown in the Project Explorer is shown in <<figure.getting [[figure.getting-started.netbeans.exploring]] .A new Vaadin project in NetBeans -image::img/netbeans-created-annotated-hi.png[width=80%] +image::img/netbeans-created-annotated-hi.png[width=80%, scaledwidth=100%] [filename]#mytheme#:: The theme of the UI. @@ -89,12 +89,12 @@ Once created, you can run it in a server as follows. . In the [guilabel]#Select deployment server# window, select a server from the [guilabel]#Server# list. It should show either GlassFish or Apache Tomcat or both, depending on what you chose in NetBeans installation. + -image::img/netbeans-server.png[width=75%] +image::img/netbeans-server.png[width=75%, scaledwidth=100%] + Also, select [guilabel]#Remember Permanently# if you want to use the same server also in future while developing applications. + Click [guibutton]#OK#. -+ + The widget set will be compiled at this point, which may take a while. If all goes well, NetBeans starts the server in port 8080 and, depending on your diff --git a/documentation/getting-started/getting-started-overview.adoc b/documentation/getting-started/getting-started-overview.adoc index d9fa9d6fe6..6adde0a9b4 100644 --- a/documentation/getting-started/getting-started-overview.adoc +++ b/documentation/getting-started/getting-started-overview.adoc @@ -15,8 +15,8 @@ The recommended way to create a Vaadin application project is to use a Maven arc The archetypes contain all the needed dependencies, which Maven takes care of. The Eclipse IDE plugin currently also supports creating a normal Eclipse web project using the Ivy dependency manager. -In this chapter, we give: +In this chapter, we: -. An overview of the Vaadin libraries -. List the available Maven archetypes -. Step-by-step instructions for creating a project in the Eclipse IDE, NetBeans IDE, and IntelliJ IDEA, as well as with command-line. +* Give an overview of the Vaadin libraries +* List the available Maven archetypes +* Give step-by-step instructions for creating a project in the Eclipse IDE, NetBeans IDE, and IntelliJ IDEA, as well as with command-line. diff --git a/documentation/getting-started/img/idea-maven-newproject-1.png b/documentation/getting-started/img/idea-maven-newproject-1.png Binary files differindex 6a24a14ea8..6b078abd65 100644 --- a/documentation/getting-started/img/idea-maven-newproject-1.png +++ b/documentation/getting-started/img/idea-maven-newproject-1.png diff --git a/documentation/getting-started/img/idea-newproject-1.png b/documentation/getting-started/img/idea-newproject-1.png Binary files differindex 739b210fdc..4c78f9c390 100644 --- a/documentation/getting-started/img/idea-newproject-1.png +++ b/documentation/getting-started/img/idea-newproject-1.png diff --git a/documentation/getting-started/img/idea-newproject-2.png b/documentation/getting-started/img/idea-newproject-2.png Binary files differindex 882a4eed18..24c4d6f462 100644 --- a/documentation/getting-started/img/idea-newproject-2.png +++ b/documentation/getting-started/img/idea-newproject-2.png diff --git a/documentation/getting-started/img/netbeans-newproject-1.png b/documentation/getting-started/img/netbeans-newproject-1.png Binary files differindex 4100e315f8..39b3d749b2 100644 --- a/documentation/getting-started/img/netbeans-newproject-1.png +++ b/documentation/getting-started/img/netbeans-newproject-1.png diff --git a/documentation/getting-started/img/netbeans-newproject-2.png b/documentation/getting-started/img/netbeans-newproject-2.png Binary files differindex ee5711cfa8..930538c396 100644 --- a/documentation/getting-started/img/netbeans-newproject-2.png +++ b/documentation/getting-started/img/netbeans-newproject-2.png diff --git a/documentation/getting-started/img/netbeans-server.png b/documentation/getting-started/img/netbeans-server.png Binary files differindex 026c70eac2..28f73da8cf 100644 --- a/documentation/getting-started/img/netbeans-server.png +++ b/documentation/getting-started/img/netbeans-server.png |