Vorherige

Nächste

Erstellen einer Web-App in Eclipse

Abgeschlossen

Eclipse stellt Projektvorlagen zum Erstellen statischer und dynamischer Webprojekte bereit. Statische Webprojekte enthalten Dateien mit HTML- und clientseitigem JavaScript-Code. Dynamische Webprojekte enthalten typischerweise Dateien mit Java Server Pages (JSP), die auf dem Server ausgeführt werden. Azure App Service unterstützt sowohl statische als auch dynamische Webprojekte.

In dieser Lerneinheit lernen Sie die Grundlagen der Verwendung von Eclipse zum Erstellen dynamischer Webprojekte kennen. In der nächsten Lerneinheit führen Sie eine Übung durch, in der Sie ein dynamisches Webprojekt erstellen, das Sie als Azure-Web-App bereitstellen können.

Erstellen von dynamischen Web-Apps

Um eine dynamische Web-App zu erstellen, wählen Sie in Eclipse im Menü Datei die Option Neu und dann Dynamisches Webprojekt aus.

Der Assistent Dynamisches Webprojekt fordert Sie auf, die grundlegenden Informationen zum Projekt einzugeben. Die einzige obligatorische Angabe ist der Projektname. Für alle anderen Eigenschaften und Konfigurationsdetails stellt der Assistent Standardwerte bereit. Sie sollten allerdings die Zielruntime überprüfen, um die Funktionalität festzulegen, die Sie in Ihrer Web-App verwenden werden. Im folgenden Screenshot hat der Benutzer den Apache Tomcat v8.0-Server ausgewählt. Dieser Server eignet sich gut zum lokalen Testen und Debuggen. Sie können die Web-App nach dem Testen in Azure bereitstellen.

Erstellen von statischen und dynamischen Webseiten

Nachdem Sie eine dynamische Web-App erstellt haben, fügen Sie dem Projekt im Fenster Projekt-Explorer Ressourcen wie HTML-Dateien, JSP-Dateien und Cascading Stylesheets (CSS) hinzu. Um dem Projekt beispielsweise eine neue JSP-Seite hinzuzufügen, klicken Sie im Fenster Projekt-Explorer mit der rechten Maustaste auf den Projektnamen und wählen nacheinander Neu und JSP-Datei aus.

Eclipse generiert den grundlegenden Vorlagencode für eine Webseite. Dann können Sie den HTML-Editor verwenden, um das HTML-Markup zu erstellen, das den Hauptteil Ihrer Webseite definiert. Zu Ihrer Unterstützung enthält der Editor Eingabeaufforderungen im Stil von IntelliSense und bietet Codevervollständigung.

Eine dynamische Webseite enthält eine Mischung aus HTML-Markup und Java-Code. Sie können einer Webseite mithilfe von JSP-Tags Java-Code hinzufügen. Die folgenden Schritte beschreiben, wann und wie Sie diese Tags verwenden können:

• Zum Importieren von Java-Bibliotheken verwenden Sie die <%@ page ... %>-Anweisung. Im folgenden Beispiel wird die Bibliothek java.util importiert, indem die Anweisung am Anfang der Seite hinzugefügt wird:

  <%@ page import ="java.util.*" %>
  

• Zum Deklarieren von statischen Variablen verwenden Sie ein Paar aus <%!- und %>-Tags, und Sie können die Variablen gleichzeitig initialisieren. Im folgenden Codeausschnitt ist counter eine ganzzahlige Variable, und currencies ist ein Satz mit Details zu allen Währungen, die in der java.util-Bibliothek verfügbar sind.

  <%! int counter;
      Set<Currency> currencies = Currency.getAvailableCurrencies(); %>
  

  Beachten Sie, dass die Werte dieser statischen Variablen nur einmal initialisiert und zwischen den Aufrufen der Web-App beibehalten werden.

• Um prozeduralen Code hinzuzufügen, schließen Sie Ihren Code in ein Paar aus <%- und %>-Tags ein. Prozeduraler Code kann reguläres HTML-Markup umschließen. Im folgenden Codeausschnitt durchläuft die for-Schleife den Inhalt des currencies-Satzes und gibt bei jeder Iteration einen HTML-Absatz aus. Die Variable counter verfolgt die Anzahl der Iterationen nach, und „NNN“ ist ein temporärer Platzhalter, der im nächsten Codeausschnitt ersetzt wird:

  <% counter = 1;
     for(Currency currency : currencies){ %>
      <p>Currency is NNN </p>
  <%  counter++;
    } %>
  

• Um die Ergebnisse einer Java-Funktion oder eines Java-Ausdrucks anzuzeigen, können Sie ein Paar aus <%=- und %>-Ausdruckstags verwenden. Im folgenden Codeausschnitt wurde der Platzhalter „NNN“ aus dem vorherigen Codeausschnitt durch eine Zeichenfolgendarstellung der Währung ersetzt:

  <% counter = 1;
     for(Currency currency : currencies){ %>
     <p>Currency is <%= currency.toString() %> </p>
  <%   counter++;
    } %>
  <p> There are <%= counter %> currencies available.</p>
  

Die folgende JSP-Seite zeigt ein vollständiges Beispiel, das mithilfe der Methode Currency.getAvailableCurrencies aus der java.util-Bibliothek ein Liste mit Währungen abruft. Der Code generiert HTML-Markup, das die Währungen als eine Reihe von HTML-Absätzen sowie am Ende der Liste eine Zeile mit der Anzahl der Währungen anzeigt:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import ="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Currency Lister</title>
</head>
<body>
  <%! int counter;
      Set<Currency> currencies = Currency.getAvailableCurrencies(); %>
  
  <% counter = 1;
   for(Currency currency : currencies){ %>
        <p>Currency is <%= currency.toString() %> </p>
  <%    counter++;
    } %>
  <p> There are <%= counter %> currencies available.</p>

</body>
</html>

Die von diesem Code generierte Ausgabe finden Sie im nächsten Abschnitt.

Lokales Testen einer Web-App

Um eine Web-App zu testen, wählen Sie die Option Ausführen im Menü Ausführen oder die Schaltfläche Ausführen auf der Symbolleiste aus. Sie werden aufgefordert, den Server anzugeben, der zur Ausführung der Web-App verwendet werden soll. Der Standardwert ist der gleiche wie die Serverruntime, die Sie beim Erstellen des Projekts angegeben haben.

Klicken Sie auf Fertig stellen, um die Web-App zu starten. Wenn der Server derzeit angehalten ist, wird er gestartet. Danach wird die Web-App ausgeführt, und die Ergebnisse werden in einem Browserfenster in Eclipse angezeigt. Die Ergebnisse sollten ähnlich wie in der folgenden Abbildung aussehen:

Weiter