Úkol 2

Cílem je vytvořit webovou stránku, která při každém načtení zobrazí náhodně zvolený citát a náhodně zvolený obrázek. Stránka může vypadat nějak takhle (v projektu jsou k tomu připravené styly), ale fantazii se meze nekladou:

1. Udělej fork zdrojového repository do svého účtu na GitHubu.
2. Naklonuj si repository ze svého účtu na GitHubu na lokální počítač.
3. Spusť si naklonovanou aplikaci a otevři v prohlížeči stránku http://localhost:8080/. Zobrazí se stránka s jedním citátem a obrázkem. Stránka je ovšem statická, při obnově stránky se nic nemění.
4. Uprav stránku tak, aby byla dynamická – aby se při každém načtení text i obrázek náhodně měnil.
5. Zkontroluj výsledek v prohlížeči.
6. Commitni a pushnni změny (výsledný kód) do svého repository na GitHubu.
7. Vlož odkaz na své repository do tabulky s úkoly na Google Drive ()

Mohlo by se hodit

Jako zdroj obrázků může použít třeba Unsplash – web s obrázky a fotografiemi zdarma. Obrázky z něj můžeš stáhnout do své aplikace nebo je můžeš odkazovat přímo z jejich webu. Pokud chceš odkázat přímo na fotku s kódem XXX (kód je těch cca 10 znaků na konci URL fotky), můžeš použít následující odkaz:

https://source.unsplash.com/XXX
https://source.unsplash.com/XXX/1600x900

Druhá varianta určuje požadované rozměry obrázku – pokud má obrázek jiný poměr stran, ořízne se na požadovaný poměr stran. Přesné rozměry obrazovky uživatele ale neřeš – obrázek se pomocí CSS natáhne nebo smrští tak, aby pokryl celou stránku.

Jako zdroj citátů můžeš použít soubor src/main/resources/citaty.txt, který je součástí staženého projektu.

Náhodná čísla

Pro generování náhodných čísel v Javě slouží třída Random.

Načtení textového souboru z resourců

Kód pro načtení řádků souboru v resourcech do seznamu řetězců (List<String>):

private static List<String> readAllLines(String resource)throws IOException{
    //Soubory z resources se získávají pomocí classloaderu. Nejprve musíme získat aktuální classloader.
    ClassLoader classLoader=Thread.currentThread().getContextClassLoader();

    //Pomocí metody getResourceAsStream() získáme z classloaderu InpuStream, který čte z příslušného souboru.
    //Následně InputStream převedeme na BufferedRead, který čte text v kódování UTF-8 
    try(InputStream inputStream=classLoader.getResourceAsStream(resource);
        BufferedReader reader=new BufferedReader(new InputStreamReader(inputStream,StandardCharsets.UTF_8))){

    //Metoda lines() vrací stream řádků ze souboru. Pomocí kolektoru převedeme Stream<String> na List<String>.
    return reader
        .lines()
        .collect(Collectors.toList());
    }
}

// příklad volání: readAllLines("citaty.txt")

Vytvoření seznamu textových řetězců přímo ve zdrojovém kódu Javy

Pokud chci vytvořit seznam několika textových řetězců a nechci je mít v externím souboru, můžu použít metodu Arrays.asList():

List<String> seznamTextu=Arrays.asList("řetězec 1","řetězec 2","další řetězec","ještě jiný řetězec");

Obrázek na pozadí v inline stylu

Kaskádové styly (CSS) je možné psát i ve formě inline stylů – příslušný CSS kód je uvedený hned u HTML elementu, ke kterému se vztahuje, konkrétně v atributu style. Následující HTML kód tedy vytvoří div, který bude mít nastavenou červenou barvu pozadí.

<div style="background-color: red">Tento text má červenou barvu pozadí.</div>

Vložení HTML místo obyčejného textu přes Thymeleaf

Když v Thymeleaf použiješ atribut th:text, vloží se obsah atributu do stránky jako obyčejný text. Tzn. pokud bude obsahovat nějaké HTML značky, zobrazí se tyto značky na stránce textově, např. <div>. Pokud chceš vložit text jako HTML, je potřeba použít th:utext (jako unescaped text). Pozor, takto vložený kód se nijak nekontroluje. Je tedy potřeba takto vkládat pouze HTML kód, kterému důvěřuješ. V žádném případě takto nelze vkládat kód, který pochází od uživatele. Uživatel by totiž mohl do kódu podstrčit třeba značku <script> a spustit v prohlížeči jakýkoli svůj kód.

Odkazy

• odkaz na stránku Lekce 2
• Java SE 11 Javadoc – dokumentace všech tříd, které jsou součástí základní Javy ve verzi 11.
• Dokumentace Spring Boot – odsud je anotace @SpringBootApplication a třída SpringApplication.
• Dokumentace Spring Framework – odsud jsou anotace @Controller, @GetRequest a třída ModelAndView.
• Dokumentace Thymeleaf – šablonovací systém pro HTML použitý v projektu.
• Unsplash – obrázky a fotografie k použití zdarma