diff --git a/src/main/markdown/doc/latest/tutorial/index.md b/src/main/markdown/doc/latest/tutorial/index.md index 90ff6a551..e6fa6c5fe 100644 --- a/src/main/markdown/doc/latest/tutorial/index.md +++ b/src/main/markdown/doc/latest/tutorial/index.md @@ -37,7 +37,7 @@ You may also optionally do the following: ### Build a Sample GWT Application -1. [Build a Sample GWT Application](gettingstarted.html) +1. [Build a Sample GWT Application](gettingstarted-v2.html) * Get started with GWT by developing the StockWatcher application from scratch. You'll learn to create a GWT project, build the UI with GWT wigdets and panels, code the client-side functionality in the Java language, debug in development mode, apply CSS styles, compile the Java into JavaScript, and run the application in production mode. ### Client-Server Communication diff --git a/src/main/markdown/download.md b/src/main/markdown/download.md index 29bb3cd54..5bec02840 100644 --- a/src/main/markdown/download.md +++ b/src/main/markdown/download.md @@ -47,7 +47,7 @@ Download [Old versions]

- Next: Go to Getting Started with the GWT SDK + Next: Go to Getting Started with the GWT SDK

@@ -66,7 +66,7 @@ Download
Download Plugin & SDKs

- Next: Go to Set up Eclipse, then Build a Sample App + Next: Go to Set up Eclipse, then Build a Sample App

diff --git a/src/main/markdown/gettingstarted-v2.md b/src/main/markdown/gettingstarted-v2.md new file mode 100644 index 000000000..eedb20b34 --- /dev/null +++ b/src/main/markdown/gettingstarted-v2.md @@ -0,0 +1,207 @@ +Getting Started +=== + +Starting with 2.11.0 of the GWT SDK the [webAppCreator](gettingstarted-outdated.html) is deprecated. Instead, we will use +the [gwt-maven-archetypes](https://github.com/tbroyer/gwt-maven-archetypes) by Thomas Broyer to create a new GWT project. Using the **artifactId: modular-webapp** +the plugin generates a Maven project with separate modules for + +* client +* server +* shared. + +**Separation of code is the way to go in modern web development.** + +## TOC + +* [Prerequisites](#prereqs) +* [Create your first web application](#create) +* [Run locally in super dev mode](#run) +* [Make a few changes](#change) +* [Debugging the browser](#bebug) +* [Compile and run in production mode](#compile) +* [Set up an IDE](#setup) + +## Prerequisites + +1. GWT 2.11.0 still supports Java 8 (running and building). We suggest to use at least Java 11 or 17. If necessary, download and + install the Java SE Development Kit (JDK) from Eclipse Temurin for your platform. Install the JDK by following the + installation instructions. +2. Apache Maven is also necessary to run the gwt-maven-archetype. In this sample the Maven CLI is used. If + you don't already have it, install Apache Maven. + +If you have problems running the gwt-maven-archetype from the command line, try setting the +$JDK_HOME environment variable with export JDK_HOME="[pathToJDK]" and $MAVEN_HOME environment variable with export MAVEN_HOME="[pathToMaven]" +and add both to the path. + +## Create your first web application + +Open a terminal and choose the directory you like to generate the project into. Generate a new project using: + +``` +mvn archetype:generate \ + -DarchetypeGroupId=net.ltgt.gwt.archetypes \ + -DarchetypeVersion=LATEST \ + -DarchetypeArtifactId=modular-webapp +``` + +The archetype will request values for: + +* **groupId**: com.mycompany.mywebapp +* **artifactId**: mywebapp +* **version**: HEAD-SNAPSHOT +* **package**: com.mycompany.mywebapp +* **module-short-name**: mywebap + +After entering the parameter above, the terminal shows something like that: + +``` +[INFO] Using property: module = App +Define value for property 'groupId': com.mycompany.mywebapp +Define value for property 'artifactId': mywebapp +Define value for property 'version' 1.0-SNAPSHOT: : HEAD-SNAPSHOT +Define value for property 'package' com.mycompany.mywebapp: : com.mycompany.mywebapp +Define value for property 'module-short-name' app: : MyWebApp +Confirm properties configuration: +module: App +groupId: com.mycompany.mywebapp +artifactId: mywebapp +version: HEAD-SNAPSHOT +package: com.mycompany.mywebapp +module-short-name: mywebapp + Y: : +``` + +Enter **Y** to continue. + +Now, the new project will be generated and you see the following messages: + +``` +[INFO] ---------------------------------------------------------------------------- +[INFO] Using following parameters for creating project from Archetype: modular-webapp:LATEST +[INFO] ---------------------------------------------------------------------------- +[INFO] Parameter: groupId, Value: com.mycompany.mywebapp +[INFO] Parameter: artifactId, Value: mywebapp +[INFO] Parameter: version, Value: HEAD-SNAPSHOT +[INFO] Parameter: package, Value: com.mycompany.mywebapp +[INFO] Parameter: packageInPathFormat, Value: com/mycompany/mywebapp +[INFO] Parameter: package, Value: com.mycompany.mywebapp +[INFO] Parameter: module-short-name, Value: MyWebApp +[INFO] Parameter: module, Value: App +[INFO] Parameter: groupId, Value: com.mycompany.mywebapp +[INFO] Parameter: artifactId, Value: mywebapp +[INFO] Parameter: version, Value: HEAD-SNAPSHOT +[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-client/pom.xml +[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-shared/pom.xml +[INFO] Parent element not overwritten in /Users/gwt-user/Desktop/mywebapp/mywebapp-server/pom.xml +[INFO] Project created from Archetype in dir: /Users/gwt-user/Desktop/mywebapp +[INFO] ------------------------------------------------------------------------ +[INFO] BUILD SUCCESS +[INFO] ------------------------------------------------------------------------ +[INFO] Total time: 01:09 min +[INFO] Finished at: 2023-12-17T17:38:02+01:00 +[INFO] ------------------------------------------------------------------------ +``` + +Switch to the generated directory by entering `cd mywebapp`. + +Listing of the directory (**Windows**: dir, **Mac and Linux**: ls -la), shows: + +``` +drwxr-xr-x@ 6 gwt-user staff 192 Dec 17 17:38 . +drwx------@ 50 gwt-user staff 1600 Dec 17 17:38 .. +drwxr-xr-x@ 4 gwt-user staff 128 Dec 17 17:38 mywebapp-client +drwxr-xr-x@ 4 gwt-user staff 128 Dec 17 17:38 mywebapp-server +drwxr-xr-x@ 4 gwt-user staff 128 Dec 17 17:38 mywebapp-shared +-rw-r--r--@ 1 gwt-user staff 7423 Dec 17 17:38 pom.xml +``` + +## Run locally in super dev mode + +To start the code server, run the following command: + +``` +mvn gwt:codeserver -pl *-client -am +``` + +and entering the following command in another terminal window to start the server: + +``` +mvn jetty:run -pl *-server -am -Denv=dev +``` + +Now, switch to your preferred browser (we suggest using: Chrome, FireFox or Opera) and enter: + +``` +http://lcoalhost:8080 +``` + +Yet, the application is running in super dev mode. You see something like this in the browser: + +
Screenshot
+ +## Make a few changes + +Let's change the label of the button. Because this is something on the client side, we need to locate the source code in the client module. +The source code is located in the `mywebapp-client/src/main/java/com/mycompany/mywebapp` subdirectory and the source in the `App.java` class. + +Look inside `App.java`. Line 42 constructs the "Send" button. + +``` +final Button sendButton = new Button("Send"); +``` + +Change the text from "Send" to "Send to Server". + +``` +final Button sendButton = new Button("Send to Server"); +``` + +Save the file and simply click "Refresh" in your browser to see your change. The button should now say "Send to Server" instead of "Send": + +## Debugging the browser + +In super dev mode, you can easily debug your client code in the browser. While running your application, open the dev tools +in your browser. Select the `Sources`-tab and press `ctrl-P` (Windows/Linux) or `cmd-P` (macOS). A popup opens. Enter `App.java` and press return. + +
Screenshot
+ +The source code of the `App.java` class is displayed in the debugger. Add a breakpoint by clicking of Line number 94. Press the send button. +The execution will stop at line 94. The stacktrace is visible, the content of the variable, etc. + +
Screenshot
+ +## Compile and run in production mode + +To run the application as JavaScript in what GWT calls "production mode", create the application by executing: + +``` +mvn clean package +``` + +The Maven "package" goal invokes the GWT compiler which generates a number of JavaScript and HTML files from the +MyWebApp Java source code in the `target/` subdirectory. There you will find a `mywebapp-server-HEAD-SNAPSHOT.war`. +You can deploy this war file to every servlet engine and run it. Once running, enter `mywebapp-server-HEAD-SNAPSHOT/index.html` +in your web browser. The application should look identical to the super dev mode above. You can change the name of the war using +Maven 'buildname`. + +Congratulations! You've created your first web application using GWT. +Since you've compiled the project, you're now running pure JavaScript and +HTML that works in Edge, Chrome, Firefox, Safari, and Opera. You could now deploy +your application to production by serving the HTML and JavaScript files from your servlet engine. + +In case you prefer a Spring Boot server, check the +[gwt-maven-springboot-archetype](https://github.com/NaluKit/gwt-maven-springboot-archetype) plugin. It creates a +project in a similar way, but uses Spring Boot instead of Jetty on the server side. + +## Set up an IDE + +Now that you've created your first app, you probably want to do something a +bit more interesting. But first, if you normally work with an IDE you'll want to +set up your IDE to use the GWT SDK: + +[Set up Eclipse](usingeclipse.html) + +[Set up IntelliJ](usingintellij.html) + +Now, with your sample project set up, head over to [Build a Sample GWT App](doc/latest/tutorial/gettingstarted.html). diff --git a/src/main/markdown/gettingstarted.md b/src/main/markdown/gettingstarted.md index 7171990e7..97f0b0ea0 100644 --- a/src/main/markdown/gettingstarted.md +++ b/src/main/markdown/gettingstarted.md @@ -1,6 +1,9 @@ Getting Started === +Note: Starting with GWT 2.11.0 the webAppCreator is deprecated, please see the [new instructions](gettingstarted-v2.html). + + * [Prerequisites](#prereqs) * [Download and Install GWT](#download) * [Create your first web application](#create) @@ -13,11 +16,11 @@ Getting Started 1. You will need the Java SDK version 1.8 or later. If necessary, download and install the Java SE Development Kit (JDK) from Oracle or from Adopt OpenJDK for your platform. 2. Apache Ant is also necessary to run command line arguments in this sample. If - you don't already have it, install Apache Ant. + you don't already have it, install Apache Ant. If you have problems running Ant on the Mac, try setting the $JDK_HOME environment variable with export JDK_HOME="/Library/Java/Home" @@ -55,7 +58,7 @@ run and use the SDK are located in the extracted directory. ## Create your first web application -GWT ships with a command line utility called [webAppCreator](https://www.gwtproject.org/doc/latest/RefCommandLineTools.html#webAppCreator) that automatically generates all the files you'll need in order to start a GWT project. It also generates [Eclipse](http://www.eclipse.org/) project files and launch config files for easy debugging in GWT's development mode. +GWT ships with a command line utility called [webAppCreator](https://www.gwtproject.org/doc/latest/RefCommandLineTools.html#webAppCreator) that automatically generates all the files you'll need in order to start a GWT project. It also generates [Eclipse](https://www.eclipse.org/) project files and launch config files for easy debugging in GWT's development mode. You can create a new demo application in a new MyWebApp directory by running `webAppCreator`: @@ -156,4 +159,4 @@ set up Eclipse to use the GWT SDK: [Set up Eclipse](usingeclipse.html) If you are going to stick with the command line, check out Speed Tracer and then -head over to [Build a Sample GWT App](doc/latest/tutorial/gettingstarted.html). +head over to [Build a Sample GWT App](doc/latest/tutorial/gettingstarted-v2.html). diff --git a/src/main/markdown/index.md b/src/main/markdown/index.md index 646ca214c..252db485d 100644 --- a/src/main/markdown/index.md +++ b/src/main/markdown/index.md @@ -45,11 +45,11 @@ GWT (pronounced 'gwit') is the official open source project for GWT releases 2.7 - +
-
Get Started
+
Get Started
Walk through the first steps needed to get a web application up and running. From there, work through the fundamentals of GWT development with an in-depth tutorial.

diff --git a/src/main/markdown/learnmore-sdk.md b/src/main/markdown/learnmore-sdk.md index c7b3586a1..498a1e3bc 100644 --- a/src/main/markdown/learnmore-sdk.md +++ b/src/main/markdown/learnmore-sdk.md @@ -111,8 +111,8 @@ GWT is free, and all of the [code](https://gwt.googlesource.com/) is available u ## Ready to get started? - + -[Download the SDK](gettingstarted.html) and get a simple web application up and running. +[Download the SDK](gettingstarted-v2.html) and get a simple web application up and running. diff --git a/src/main/markdown/overview.md b/src/main/markdown/overview.md index 910d82303..91a2f37f3 100644 --- a/src/main/markdown/overview.md +++ b/src/main/markdown/overview.md @@ -11,7 +11,7 @@ GWT is a development toolkit for building and optimizing complex browser-based a The [GWT SDK](learnmore-sdk.html) contains the Java API libraries, compiler, and development server. It lets you write client-side applications in Java and deploy them as JavaScript. -* [Get Started](gettingstarted.html) +* [Get Started](gettingstarted-v2.html) * [Tutorials](doc/latest/tutorial/index.html) * [Developer Guide](doc/latest/DevGuide.html) @@ -49,4 +49,4 @@ When you're ready to deploy, GWT compiles your Java source code into optimized, ## Ready to get started? -[Download the SDK](gettingstarted.html) and get a simple web application up and running. From there, work through the fundamentals of GWT development with the in-depth [tutorials](doc/latest/tutorial/index.html). +[Download the SDK](gettingstarted-v2.html) and get a simple web application up and running. From there, work through the fundamentals of GWT development with the in-depth [tutorials](doc/latest/tutorial/index.html). diff --git a/src/main/markdown/usingintellij.md b/src/main/markdown/usingintellij.md new file mode 100644 index 000000000..22d6afa7f --- /dev/null +++ b/src/main/markdown/usingintellij.md @@ -0,0 +1,58 @@ +Using IntelliJ +=== + +GWT provides a set of tools that can simply be used with a +text editor, the command line, and a browser. However, you may also use GWT with your +favorite IDE. The Idea IntelliJ Ultimate Edition provides a GWT plugin, but the free Idea IntelliJ Community Edition +is all you need. IntelliJ provides awesome Maven support, enabling the IDE to read the project classpath, and easily create run configurations for compiling and running a GWT project. + +* [Download IntelliJ](#intellij) +* [Import a Web Application](#importing) +* [Run locally in Super Dev Mode](#running) + +## Download IntelliJ + +If you do not already have IntelliJ, you may download it from the [IntelliJ Website](https://www.jetbrains.com/idea/download/). + +## Import a Web Application + +To import a Web Application - create with an archetype creator, select **File > New > Project from existing source** +from the File menu. Select the root directory of the project you want to import and press `enter`. + +A dialog opens: + +
Screenshot
+ +Press `Create`. The import process starts and after a few seconds, the project window appears: + +
Screenshot
+ +## Run locally in Super Dev Mode + +To improve the development experience, you can set up two run configurations, one for the code server and another for the server. + +### Code Server Run Configuration + +Press `Edit configuration`, a popup appears. Now press `+` and select `Maven`. + +Enter `gwt:codeserver -pl mywebapp-client -am` in the field under `Run`: + +
Screenshot
+ +Now you have a run configuration, that starts the code server. + +Note: When running the code server from the command line, you need to run `gwt:codeserver -pl *-client -am`. +This will not work inside a running configuration. Here you have to use the module name instead of '*'. Inside a run +configuration, the command line looks like that: `gwt:codeserver -pl mywebapp-client -am`. + +### Server Run Configuration + +Press `Edit configuration`, a popup appears. Now press `+` and select `Maven`. + +Enter `mvn jetty:run -pl *-server -am -Denv=dev` in the field under run: + +
Screenshot
+ +Now, you have a run configuration, that starts the server. + +Note: you have to use the module name instead of '*'. diff --git a/src/main/resources/main.tpl b/src/main/resources/main.tpl index 535dc52b7..4fd96e20e 100644 --- a/src/main/resources/main.tpl +++ b/src/main/resources/main.tpl @@ -40,7 +40,7 @@