Browser reloaded (3/3)

Endlich kommen wir zum "wie" ...

JSP's

Wenn ich die Entwicklung von dem Bild-Browser Revue passieren lasse, dann war es der Anforderungsklärung mit mir folgend ein iterativer Prozess, an dem am Ende ein ausführliches Refactoring stand. Zwischenzeitlich hatte ich für jeden Bildtyp einen eigenen Browser "gekopiert".

Es gibt fünf eng verwandte JSP Browser-Programme:

Parameter

Die fünf JSP Programme werden mit folgenden Parametern aufgerufen:

Die Aufrufparameter bedeuten:

• Team ist der Teamname
• Car bezeichnet einen Fahrzeugnamen
• myRange1 und myRange2 sind die x und y Dimensionen des Grids
• maxHits gibt die maximal gewünschte Anzahl von Ergebnissen einer Query an.
• Driver2forename und Driver2 sind Vor- und Nachname eines Fahrers
• step ist die Nummer der aktuellen Auswahl von Bildern (falls es mehrere Seiten gibt)
• round ist die Runde/das Rennen
• app bestimmt die Daten für die Posterapp (Poster, Cutaway, ..)
• year ist selbsterklärend, oder?

JAVA Klassen

Die unterschiedlichen Bilddaten-/typen bedingen unterschiedliche Anwendungsdaten. Für das Handling dieser anwendungsspezifischen Daten gibt es die Klasse "Poster.java":

Struktur der JSP

JSP sind im wesentlichen HTML Seiten in die Java Code eingebettet ist. Der Aufbau eines JSP Programmes folgt im wesentlichen dem Layout der Seite.

Die Navigationsleiste ist nur vorhanden, wenn es 2 Navigationsebenen gibt.

Der strukturelle Aufbau der JSP-Programme ist sehr ähnlich (da das Layout ähnlich ist), und im folgenden exemplarisch für PosterData.jsp dargestellt. Wenn ich mal wirklich Zeit habe werde ich den Code mal didaktisch Stück für Stück erklären.

JSP Header

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import = "java.io.*,java.util.*,java.sql.*"%>
<%@ page import="org.akis.nextthree.*" %>
<%@ page import="org.akis.nextthree.Driver" %>
<%@ page import="java.awt.image.BufferedImage" %>
<%@ page import="javax.imageio.ImageIO" %>

Daten initialisieren

Aufruf Parameter auslesen

<%
String app          = request.getParameter("app");
String year         = request.getParameter("year");
String step         = request.getParameter("step");
String myRange1     = request.getParameter("myRange1");
String myRange2     = request.getParameter("myRange2");

Anwendungsspezifische Werte / Einstellungen ermitteln

Poster myPoster     = new Poster(app);
String PrevYear     = myPoster.GetPrevYear(year);
String NextYear     = myPoster.GetNextYear(year);
String PrevStep     = myPoster.GetPrevStep( step, round, year, picsPerPage);
String NextStep     = myPoster.GetNextStep( step, round,  year, picsPerPage);
String[] rounds     = myPoster.GetAllRounds(year);
if (round.isEmpty() || round.equals("flat"))
{       round=myPoster.getFirstRound(rounds);}

Anzuzeigende Photos ermitteln (Query absetzen oder Directory auslesen)

int anzPics         = myPoster.getAnzPictures( year,round );
String[] pics       = myPoster.getPictures(year,"flat", step,picsPerPage);
int anz             = pics.length;
if(pics.length!=picsPerPage)
    lines   = pics.length/col;
int rest            = anz % col;
int percent         = (int)(100/col);
boolean morePages   = picsPerPage < anzPics;

Session Variablen setzen

request.getSession().setAttribute("App", app);
request.getSession().setAttribute("Year", year);
request.getSession().setAttribute("Round", round);
request.getSession().setAttribute("Step", step);
request.getSession().setAttribute("PrevYear", PrevYear);
request.getSession().setAttribute("NextYear", NextYear);
request.getSession().setAttribute("PrevStep", PrevStep);
request.getSession().setAttribute("NextStep", NextStep);
request.getSession().setAttribute("myRange1", myRange1);
request.getSession().setAttribute("myRange2", myRange2);
request.getSession().setAttribute("Sliderstep",   myPoster.SLIDERSTEP);
request.getSession().setAttribute("Sliderstart",  myPoster.SLIDERSTART);
request.getSession().setAttribute("Sliderend",    myPoster.SLIDEREND);
request.getSession().setAttribute("Modelcontent", myPoster.MODALCONTENT)
%>

HTML Header

<head>
    <link rel="icon" type="image/x-png" href="/favicon.png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/styles/w3.css">
    <link rel="stylesheet" href="/styles/F1-Header.css">
    <link rel="stylesheet" href="/styles/F1-Browser.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!--  Font Awesome Solid + Brands -->
    <link rel="stylesheet" href="/styles/css/all.css" >
    <title> ${App} <% out.print(year);%></title>
</head>

Browser Header

<header class="w3-container w3-padding w3-light-grey w3-text-dark-gray w3-center">
    <%@ include file="sidebar.html" %>
    <div class="w3-row-padding w3-margin-top">
        <div class="w3-col m3 w3-center">
            <a href="PosterData.jsp?app=${App}&year=${PrevYear}&round=&step=1...">
                <% out.print(PrevYear);%> <i class="fa fa-solid fa-chevron-left"></i>
            </a>
        </div>
        <div class="w3-col m6 w3-center">
            <div class="headContainer">
                <img src="/prod/Images/${App}.png" style="width:60%;opacity: 0.4;">
                <div class="centeredHead">
                    <h1><b> <% out.print(year); %></b></h1>
                </div>
            </div>
        </div>
        <div class="w3-col m3 w3-center">
            <a href="PosterData.jsp?app=${App}&year=${NextYear}&round=&step=1...">
                <i class="fa fa-solid fa-chevron-right"></i> <% out.print(NextYear); %>
            </a>
        </div>
    </div>
</header>

Die meisten Gizmos bestehen aus CSS und JavaScript-Code. Die Quellen sind meist von www.w3schools.com und dann, wenn nötig, an das Frontend angepasst.

Top Button — CSS

<button onclick="topFunction()" id="myBtn" title="Go to top"> <i class="fa-solid fa-circle-up"></i></button>

Top Button — Javascript

// Get the button
let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        mybutton.style.display = "block";
    } else {
        mybutton.style.display = "none";
    }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}