z2-Environment

h1. Hello World Web App Sample

This sample application shows how to set up the most basic Java Web application in z2. 

Z2 integrates with the Jetty Web container and Web applications on Z2 are really just standard Java EE Web applications. What will be unfamiliar for Maven, Gradle, or Ant user is how applications are developed and modularized on Z2. This sample case is hence more about Web applications as developed on Z2 than it is about Web application development.

Please skip to [[#Step by Step - Or Setting Things Up Yourself|Step by Step - Or Setting Things Up Yourself]] unless you just want to see it running.

This sample is stored in the repository "z2-samples.hello-world-web":https://redmine.z2-environment.net/projects/z2-samples/repository/z2-samples.hello-world-web.

h2. Prerequisites

{{include(Java_Version_Requirements)}}

h2. Setting up the sample

Follow these instructions, if you just want to see it running. Otherwise we recommend skipping this section and rather follow the step by step instructions below.

Here's the really fast version:

{{include(Install_sample_prefix)}}

<pre><code>

git clone -b v2.8 https://www.z2-environment.net/git/z2-samples.hello-world-web

</code></pre>

{{include(Install_sample_postfix)}}

The first time you launch the sample, it will take a while to download all required resources.

h2. Step by Step - Or Setting Things Up Yourself

In this section we will manually create the basic structure of a Z2 module and see how it is discovered by Z2 during development.

We assume that you have prepared some development workspace install and that you installed z2-base.core, the core runtime of z2 in that folder. If you have not done so yet, run

{{include(Install_sample_prefix)}}

h3. Create a Module

Change into install and create a folder @com.zfabrik.samples.hello-world@ and in that folder create the following structure

<pre>

├── java

│   ├── src.api

│   ├── src.impl

│   └── z.properties

└── web

    ├── WebContent

    │   └── WEB-INF

    │       └── web.xml

    └── z.properties

</pre>

where @java/z.properties@:

<pre>

com.zfabrik.component.type=com.zfabrik.java

java.privateReferences=\

	com.zfabrik.servletjsp

</pre>

and @web/z.properties@:

<pre>

com.zfabrik.component.type=com.zfabrik.ee.webapp

webapp.path=/hello-world

webapp.requiredPaths=

webapp.server=environment/webServer

com.zfabrik.systemStates.participation=environment/webWorkerUp

</pre>

and @web/WEB-INF/web.xml@:

<pre><code class="xml">

<?xml version="1.0" encoding="UTF-8"?>

<web-app id="z2WebApp" version="3.0"

	xmlns="http://java.sun.com/xml/ns/javaee"

	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">

</web-app>

</code></pre>

*Note:* If you are using the Eclipse IDE and have installed the eclipsoid plugin ([[How_to_install_Eclipsoid]]) you can use the wizard at "File > New > Other > New Java/Web z2-Project". Note however that it may be necessary to adapt the generated files to match the ones above (in particular check for @web.xml@ to refere to servlet api 3.0 at least).

This is the most essential module structure for a Web Application: 

* You will find all Web Application resources directly under the web folder. 

* Java resources however would be put into the java component folder, in src.impl if they are not to be re-used by (or "not be visible to") other modules and in src.api, if they are to be re-used by (and hence "possibly be visible to") other modules.

h3. Let Z2 Find It

So now we have a module structure in a folder next to our z2 installation. Unfortunately so far this has no meaning for z2. That is because it is not visible through any registered component repository. Fortunately however there is the _Development Component Repository_ (see also "develop":http://www.z2-environment.eu/v28doc#develop) that allows us to dynamically publish modules on the local file system for discovery by Z2. It is configured to look for modules next to z2-base.core that are _armed_. 

In order to arm the new module, i.e. in order to make it visible to Z2, simple put an (empty) file LOCAL into the root of the module hierarchy. I.e. @com.zfabrik.samples.hello-world/LOCAL@. The module structure should now look like this:

<pre>

├── java

│   ├── src.api

│   ├── src.impl

│   └── z.properties

├── LOCAL

└── web

    ├── WebContent

    │   └── WEB-INF

    │       └── web.xml

    └── z.properties

</pre>

To tell Z2 that there is some change, we need to "synchronize". But first, we need to start Z2. 

{{include(Install_sample_postfix)}}

In order to synchronize (starting includes synchronization - but note for next time): Press the !clipboard-202102281850-fm6o9.png! button on the Z2 GUI or, from eclipsoid in Eclipse or IntelliJ press the Sync button in the IDE.

In the Z2 logs you should see 

<pre>

...pp.WebAppResource [800]: Starting WebApp: com.zfabrik.samples.hello-world/web

...pp.WebAppResource [800]: Done starting Web App (/hello-world): com.zfabrik.samples.hello-world/web

</pre>

and when accessing http://localhost:8080/hello-world you should see some default Jetty provided directory listing.

Congratulations: You have your first Web app running.

h3. Add Some Logic

Before closing, let's add some real "hello world" logic.

The simplest thing to do is to add an @index.jsp@ Java Server page: So let's add @com.zfabrik.samples.hello-world/web/WebContent/index.jsp@:

<pre><code class="xml">

<html>

<body>

<h1>Hello World!</h1>

</body>

</html>

</code></pre>

After adding the file, synchronize Z2 by either pressing the !clipboard-202102281850-fm6o9.png! button on the Z2 GUI or by using the Eclipsoid function in Eclipse or IntelliJ. 

Visiting http://localhost:8080/hello-world you will now see:

!clipboard-202102281913-sdv39.png!

Now. So far, this is neither running any Java code of ours nor does it even use any JSP logic. 

So, as our last enhancement, let's write a Servlet that prints "Servlet World" and include its output into @index.jsp@. Admittedly, that is not very useful, but so what.

As the Servlet is not supposed to be used by other modules, we will put it in @src.impl@. More specifically add  @com.zfabrik.samples.hello-world/java/src.impl/samples.hello.world.impl/WorldServlet.java@:

<pre><code class="java">

package sample.hello.world.impl;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@SuppressWarnings("serial")

@WebServlet(urlPatterns = {"/WEB-INF/world"})

public class WorldServlet extends HttpServlet {

	@Override

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		resp.getWriter().write("Servlet World");

	}

}

</code></pre>

and change @com.zfabrik.samples.hello-world/web/WebContent/index.jsp@:

<pre><code class="xml">

<html>

<body>

<h1>Hello <jsp:include page="/WEB-INF/world"/>!</h1>

</body>

</html>

</code></pre>

The module structure looks like this now:

<pre>

├── java

│   ├── src.api

│   ├── src.impl

│   │   └── sample

│   │       └── hello

│   │           └── world

│   │               └── impl

│   │                   └── WorldServlet.java

│   └── z.properties

├── LOCAL

└── web

    ├── WebContent

    │   ├── index.jsp

    │   └── WEB-INF

    │       └── web.xml

    └── z.properties

</pre>

Synchronizing and visiting http://localhost:8080/hello-world you will now see:

!clipboard-202102281913-13jtf.png!

h2. Final Note

We will stop here. Please have a look at other samples and the reference documentation of the current version:

{{include(Current Version)}}