Web Tools Platform

  1. We gaan een kijken wat de Eclipse plug-ins die samen het zogenaamde Web-Tools-Platform (wtp) vormen te bieden hebben. WTP staat voor Web Tools Platform. Het is een verzameling plugins die het maken van een web-applicatie moeten vereenvoudigen. De plugins zijn afhankelijk van andere plugins. Wil men geen moeilijke installatie-perikelen, dan is het aan te bevelen om een download te maken van een all-in-one instalatie. Na het installeren van Eclipse met wtp gelden een aantal zaken die ook gelden als er niet met wtp wordt gewerkt. Zo zal ook het werken met java binnen Eclipse met wtp weer gebruik gemaakt moeten worden van de jdk. Controleer of de juiste jdk geinstalleerd: in de java preferences (window | preferences... +java | installed JRE's. Anders toevoegen met behulp van Add...
  2. We willen nu een server-runtime aan kunnen spreken om onze web-projecten te kunnen testen, debuggen en runnen. In een wtp-download zitten geen server-runtimes. Die moeten apart gedownload en geinstalleerd worden. Wel zijn er adapters voor een aantal webservers aanwezig. Ook voor de tot dusver gebruikte Tomcat (en voor de Oracle webserver, voor JBoss, IBM Websphere...). Maak aan Eclipse-wtp bekend dat de Tomcat is geinstalleerd en de standaard te gebruiken webserver zal zijn via window | preferences ... +server | Installed runtimes. Is Tomcat 4.1 een instaled runtime? Zo niet Add... +Apache | Tomcat4.1 (of een andere indien gewenst).
    Via Next opgeven waar de rootdirectory van de instalatie op schijf staat. Opmerking. Behalve deze server-preference heeft eclipse-wtp ook een groot aantal preferences voor het werken met xml/html-achtige zaken. Alleen de ondersteuning van xml-stylesheets lijkt erg zwak: zie window | preferences | web and xml.
  3. Maak een applicatie via File | new | project... Nu verschijnt een menu waarin voor het soort project kan worden gekozen. Kies voor +Web | Dynamic Web Project. Zorg er voor dat "Add project to an EAR" niet is aangevinkt: Wordt een standaard "standalone" web-module. Als projectnaam: wtp3Q gekozen. >>next (laat standaard geselecteerde opties staan) >>next Nu kan Context Root en Content Directory worden opgegeven. De eerste (Context Root: wtp3Q) geeft aan onder welke naam de applicatie in een browser wordt genoemd bij de aanvraag van pagina's. En de tweede (Content Directory: WebContent) is een naam die intern door wtp gebruikt wordt. De ordening van de files gebeurt binnen wtp op een andere manier dan in de uiteindelijke web-applicatie. >>finish
  4. Even een licentie accepteren omdat een DTD nu lokaal op de PC wordt opgeslagen.
  5. Check project explorer (Dynamic Projects) en bekijk wat er allemaal is aangemaakt. Onder de Tomcat staat ook de servlet.jar
  6. We gaan nu weer op de bekende manier een java-servlet aanmaken. We maken gebruik van het java-Perspectief. Als deze nog niet open staat: Kies Window | Open perspectve | java
  7. File | new | class...
    Maak een servlet BoekennServlet2 die een subklasse is van de standaard javax.servlet.http.HttpServlet. Ook nu wordt de servlet weer in een package odbc_access gezet.
  8. Maak de volgende tekst voor de servlet aan (die komt overeen met de tekst van de eerder gemaakte servlet): package odbc_access;
    import java.io.*;
    import java.sql.*;
    
    import javax.servlet.*;
    import javax.servlet.http.*;
    
    public class BoekenServlet2 extends HttpServlet {
    
    
       public void doGet (
                HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
          Connection conn=null;
          ResultSet resultSet=null;
          //set content type header before accessing the Writer
          response.setContentType("text/html");
          PrintWriter out = response.getWriter();
    
          out.println("<html>" +
                   "<head><title>Alle boeken</title></head>" +
                   "<body  bgcolor=\"#ffffff\">"+
                   "<center> <hr> <br> &nbsp;" +
                   "<h1>"+
                   "<font size=\"+2\" color=\"red\">D3Q </font>" +
                   "<font size=\"+2\" color=\"green\">Boeken</font>" +
                   "</h1>"+
                   "</center>");
          out.println("<pre>Connection settings: ");
    
          try {
               Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
          }
          catch(ClassNotFoundException e) {
               System.out.println("Driver not found.");
               System.out.println(e.toString());
          }
          try {
    //         Connect to the Database
            conn = DriverManager.getConnection("jdbc:odbc:boeken_A", "", "");
            Statement statement = conn.createStatement();
            resultSet = statement.executeQuery("SELECT id, titel, id_auteur"
               + " FROM boek");
            out.println("getCatalog = " + conn.getCatalog());
            out.println("getAutoCommit = " + conn.getAutoCommit());
            out.println("</pre>");
            out.println("<hr>");
            out.println("<p>Return result:</p>");
    
    
            out.println("<table border=1"+
                            " cellpadding=2 cellspacing=0 width=500");
             
            int countrows = 0;
            while (resultSet.next()) {
               out.print("<tr height=\"302\">");
               out.print("<td height=\"16\">"+
                              resultSet.getInt("id")+"</td>");
               out.print("<td height=\"16\">"+
                              resultSet.getString("titel")+"</td>");
               out.print("<td height=\"16\">"+
                              resultSet.getInt("id_auteur")+"</td>");
               countrows++;
               out.print("</tr>");
            }
    
            out.print("</table>");
            out.print("<p>aantal boeken:"+countrows+"</p>");
          }
          catch(SQLException e) {
            System.out.println("An error occurs.");
            System.out.println(e.toString());
          }
    
    
          out.println("</body> </html>");
          out.close();
       }
    
       public String getServletInfo() {
          return "De boeken2 als voorbeeld" ;
       }
          
    }
    
  9. Ga in de Package explorer naar +WebContent +WEB-INF | web.xml en dubbelclick. De xml-editor wordt geopend en er verschijnt een window met twee tabs: Design en Source. Selecteer Source. De file begint met de regels:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE web-app PUBLIC 
          "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 
          "http://java.sun.com/dtd/web-app_2_3.dtd">
    <web-app id="WebApp_ID">
       <display-name>wtpDrikus</display-name>
    ...
    
    Het doctype geeft aan wat in de file mag voorkomen. De volgorde van de elementen is ook belangrijk! Ga met de cursor vlak voor het element <welcome-file-list> staan en druk op de toetsencombinatie CTRL+Space. In beeld komen nu ale elementen die ind file mogen voorkomen. Kies het element <servlet> en dubbelclick hierop. Automatisch wordt ook de eind-tag </servlet> in de tekst gezet. Ook wordt met een rood kringeltje onder <servlet> aangegeven dat het element nog niet is gevuld met nodige informatie.
    Maak de tekst af totdat deze wordt:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE web-app PUBLIC 
          "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" 
          "http://java.sun.com/dtd/web-app_2_3.dtd">
    <web-app id="WebApp_ID">
      <display-name>wtp3Q</display-name>
      <description>
         Welcome to Dtesting...Tomcat
      </description>
    
      <servlet>
            <servlet-name>Boek</servlet-name>
            <servlet-class>odbc_access.BoekenServlet2</servlet-class>
        </servlet>
       <servlet-mapping>
          <servlet-name>Boek</servlet-name>
          <url-pattern>*.d3Q</url-pattern>
       </servlet-mapping>
    
    </web-app>
    
    (ik heb de welcome file's er weer uitgehaald).
  10. We willen de servlet nu testen. Maak een server aan door de view servers te openen: (window | Show View | other... +Servers | server) Er verschijnt een View server. Met een rechtermuisclick in het venster en New is de Tomcat te selecteren. De server wordt aangemaakt en komt in de toestand Stopped. Ook krijgen we in de wizard de mogelijkheid om het project wtp3Q aan de server toe te wijzen.
  11. Click op de startknop (groene driehoek) en de Tomcat wordt gestart. Click hierna op de bij de Server View horende rode knop om de server wer te stoppen.
  12. Open de Webbrowser (waarschijnlijk IExplorer) en bekijk de servlet: http://localhost:8080/wtp3Q/xyz.d3Q. Het is ook mogelijk om gebruik te maken van de interne webbrowser van Eclipse-wtp: open dan de view Window | showView | other | basic | internal webbrowser.
  13. Het is ook mogelijk om te debuggen. Zet ergens een breakpoint in de servlet-code door te dubbelclicken in de balk links naast de tekst: er verschijnt een blauwgroen cirkeltje in de balk. Click op de view servers. Stop eerst de server door op de rode knop te clicken en start de server in debug-mode door op het icoon met beestje te clicken. Vraag met de browser de servlet weer op en de code-uitvoering zal stoppen op de breakpunt. Je krijgt de mogelijkheid om de waarden van de verschillende variablen te zien.
  14. Tenslotte nog een voordeel van wtp: je kunt in een view de data in de database bekijken en sql-queries naar de database sturen. Alleen is mij dat niet gelukt vor een Access database, wel voor bijv. de derby database. Er worden verschillende databases ondersteund (Access komt in het rijtje dus niet voor): mysql, oracle, db2 om er een paar te noemen. De functionaliteit is op te roepen door twee views (database explorer en data output, beide op te roepen via window | show view | other... | data) en een editor die te openen is via File |new | other... | data | SQL scrapbook. Gebruik de view database explorer voor het opzetten van een connectie met de database. Als de connectie werkt verschijnt In de exprorer het schema van de database (je kunt dus de namen van tabellen bekijken). Opmerking: Bij het gebruik van databases moet de web-applicatie de database-drivers kunnen vinden. Plaats daarvoor de benodigde jar-files in de WEB-INF/lib. Als meerdere applicaties van dezelfde database gebruik maken is dit niet de beste oplossing, maar voor testen is het een gemakkelijke optie.
  15. Het aanmaken van een jsp-file. Ga naar File | New | other | web | jsp. Dubbelclick en kies een folder (wtp3Q) en geef een filenaam op (clBrowser.jsp). Je komt in een jsp-editor. Je krijgt assistentie bij het aanmaken van de code. Druk op CTRL+SPACE en de mogelijke jsp-tags verschijnen in het venster.
  16. Zorg voor de volgende code:
    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Browser eigenschap</title>
    </head>
    <body>
    <table border="1">
       <tr><th>Header</th><th>Value</th></tr>
       <tr><td>user-agent</td>
       <td><%= request.getAttribute("client.browser")%></td></tr>
    </table>
    </body>
    </html>
    
  17. Bekijk de jsp-pagina weer in de tomcat-server op de bij de servlet beschreven manier: vraag in de browser om de pagina wtp3Q/clBrowser.jsp
versie: 3 mei 2006; copyright: Drikus Kleefsman