ProgramBash czyli o programowaniu na wesoło

Przed urlopem umieściłem informację o nowym projekcie, który zamierzam zrealizować w ramach nauki Javy. Padło na JSF, Hibernate i RichFaces. Powstała kategoria ProgramBash, która jest jednocześnie nazwą aplikacji. A o co w niej konkretnie chodzi? Wszyscy znają portale takie jak http://bash.org.pl, czy http://demotywatory.pl – ja z kolei wpadłem na pomysł by użyć podobnego konceptu do publikacji śmiesznych/ciekawych fragmentów kodu, albo też sytuacji z życia zespołów programistycznych. Nie jest to zbyt skomplikowane, ale na pewno jest dobrym pomysłem na “edukacyjną” aplikację.

Oczywiście jak zawsze trzeba wyjść od wyglądu. Ja tak jakoś mam, że w projektach, które tworzę na bloga lubię pracować od razu na gotowym szablonie graficznym – od samego początku mogę publikować ładne screeny i mam większe pojęcie o tym jak ostatecznie będzie wyglądać aplikacja. Tym razem wybrałem ciekawy layout, który pobrałem ze strony free-css-templates.com o nazwie redbusiness. Mając zaś gotowy layout pora na przemyślenie ogólnej koncepcji serwisu. Generalnie na pewno będzie możliwość dodawania wpisów (odkrywcze), ich kategoryzacji, przeglądania według różnych kryteriów oraz oczywiście oceniania. Zasadniczo nie wyjdzie to w jakiś znaczący sposób poza CRUDa, choć może zerknę edukacyjnie w stronę webservice. Dla własnego rozwoju rzecz jasna.

Pierwotnie celem tego wpisu było stworzenie krok po kroku funkcjonującej strony głównej, skonfigurowanie Hibernate w stopniu umożliwiającym korzystanie z danych zawartych w bazie, a także zrobienie czegoś ładnego z RichFaces. Jednakże jestem przeciwny publikacji kolubryn na kilkadziesiąt stron, zatem ten wpis na razie zostanie poświęcony tylko ogarnięciu widoku i layoutu, a także zapoznanie się z pakietem Apache Tiles.

Operować zaczniemy na przykładzie, który już wcześniej stworzyłem. Jak już pisałem wcześniej JSF ma to do siebie, że w czystej postaci niewiele jest w stanie zdziałać. Dotyczy to również domyślnych metod renderowania widoku i ogarnięcia czegoś tak prozaicznego jak layout. W mojej książce mądrzy ludzie napisali, iż mamy w tej materii do wyboru dwie drogi. Pierwsza z nich zakłada tworzenie kodu w formie old-JSP, a mi brzydko się ona kojarzy z instrukcją require_once z PHP. W sumie i nic dziwnego, gdyż metoda ta zakłada stworzenie oddzielnych widoków – np. górnej belki, menu, czy stopki. Zaś następnie należy takowe importować (poprzez używanie znacznika c:import z biblioteki JSTL). Nie jest to dobre rozwiązanie.

Drugie podejście wiąże się z użyciem pakietu Apache Tiles. Cały ten pakiet służy właśnie temu, aby przede wszystkim za pomocą tzw. “kafelków” (stąd nazwa), zarządzać widokami w aplikacji javowej. Należy odwiedzić oficjalną stronę pakietu i ściągnąć najnowszą wersję – 2.3.1. Następnie wypakować wszystkie pliki JAR z archiwum (z głównego katalogu oraz podkatalogu /lib) i wrzucić do katalogu WEB-INF/lib w naszej aplikacji. Tak twierdzi dokumentacja. Następnie trzeba poinformować naszą aplikację (poprzez plik web.xml) o serwlecie, który będzie nam potrzebny. Do tego pliku dopisujemy taki kod:

<servlet>
<servlet-name>tiles</servlet-name>
<servlet-class>org.apache.tiles.web.startup.TilesServlet</servlet-class>
<init-param>
<param-name>
 org.apache.tiles.definition.DefinitionsFactory.DEFINITIONS_CONFIG
</param-name>
<param-value>
 /WEB-INF/tiles-defs.xml
</param-value>
</init-param>
<load-on-startup>2</load-on-startup>
</servlet>

Run aplikacji… ZONK. Oczywiście krzyk, że nie potrafi odnaleźć takiej klasy jak org.apache.tiles.web.startup.TilesServlet. PPM na elemencie library w projekcie i dodanie ww. plików JAR załatwiło sprawę. Apache Tiles wstępnie skonfigurowane.

Zabawa z konfiguracją kafli dopiero się zaczyna. Pomysł generalnie jest taki – tworzymy na razie jeden plik z layoutem przeznaczony dla użytkowników niezalogowanych w serwisie. Taki plik layoutu będzie nam renderował górne menu, główną zawartość konkretnej strony oraz stopkę. Nad wyhaczeniem co z czym spędziłem chyba łącznie 3 godziny. Moja książka do JSF jedno, dokumentacja co innego, a praktyka pokazała jeszcze co innego. Masakra. Generalnie jak widze najlepszym przyjacielem jest NetBeans, który podpowiada co w danej sytuacji/tagu można wpisać – podpowiedzi z definicji działają. Koniec gadania – oto co trzeba zrobić:

  • XML – czyli musimy dopisać odpowiednie zapisy konfiguracyjne w pliku WEB-INF/tiles-defs.xml
  • wrzucić CSS oraz obrazki do niego
  • zaimplementować wygląd kafelka w formie pliku(ów) JSP
  • wrzucić wygląd do konkretnej strony JSP, którą chcemy wyświetlić

Jak wygląda layout już wiadomo. Plik konfiguracyjny powinien zatem wyglądać mniej więcej tak:

<tiles-definitions>
<definition name="guestLayout" template="/WEB-INF/layout/guestLayout.jsp">
<put-attribute name="upperMenu" value="/WEB-INF/layout/upperMenuTemplate.jsp" />
<put-attribute name="content" />
<put-attribute name="footer" value="/WEB-INF/layout/footerTemplate.jsp" />
</definition>
</tiles-definitions>

W tym kroku tworzymy definicję – czyli określamy pewien abstrakt widoku, który otrzymuje stosowną nazwę, wiążemy go z konkretnym widokiem istniejącym gdzieś w formie pliku JSP, a także nadajemy mu atrybuty, którym również przypisujemy nazwy i wartości (kolejne odwołania do plików JSP). Uwaga! Nalezy zwrócić uwagę, że wszystkie ścieżki podajemy bezwzględnie (zaczynamy je znakiem ‘/’), a korzeniem jest folder web. Może pojawić się pytanie – dlaczego elementy layoutu umieszczamy w katalogu WEB-INF? To dość proste – by nie można było się do nich dostać pojedynczo poprzez przeglądarkę.

Stworzyłem plik guestLayout.jsp. Pytanie kolejne! Jakie ścieżki wpisać w sekcji HEAD naszej strony layoutu? Choćby by dobrać się do plików CSS lub JSa? Ano i tutaj mała niespodzianka – podajemy ścieżkę względem katalogu web, jednakże nie traktując go jako korzenia. Oto jak to wygląda u mnie:

	<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

Rzecz jasna utworzyłem sobie folder css, aby nie wprowadzać niepotrzebnego bałaganu. CSS na pewno mamy już podpięty, ale co w takim razie zrobić z grafiką w projekcie? Obrazki z layoutu wrzuciłem również do katalogu web do utworzonego specjalnie w tym celu podkatalogu images. By jednakże były one przez nasz plik CSSa widoczne, musimy ich adresowanie z poziomu reguł CSSa potraktować relatywnie. Czyli wygląda to choćby tak:

#wrap #menu li { line-height: 26px; background: #F6F6F6 url(../images/li-line.gif) no-repeat bottom left;}

Uporawszy się z tymi zagadnieniami pora spojrzeć na plik guestLayout.jsp. U mnie wygląda on tak:

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>

<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<f:view>
<html>
    <head>
        <title>ProgramBash</title>
        <meta http-equiv="Content-Language" content="Polish" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="author" content="Michał 'Chlebik' Piotrowski" />
        <meta name="Robots" content="index,follow" />
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
    </head>

    <body>
       
        <tiles:insertAttribute name="upperMenu" />
  
        <div class="content">
                        
            <div id="main">
               
                <div id="left_side">
                                        
                    <div class="rs">
                         <tiles:insertAttribute name="content" />
                    </div>
                </div>
        
                <tiles:insertAttribute name="footer" />

            </div>
    </body>
</html>
</f:view>

Nie ma tu niczego odkrywczego z wyjątkiem elementów <tiles: >. Ano służą one w tym miejscu do “wrzucenia” pewnych konkretnych atrybutów – czyli w naszym przypadku po prostu kolejnych widoków, które znajdują się w plikach JSP. Atrybuty o nazwach upperMenu oraz footer zostały przyporządkowane do plików JSP w deklaracji definicji widoku w pliku tiles-defs.xml. Jednakże pozostawiliśmy tam wolne miejsce dla atrybutu content, tzn. nie przypisaliśmy mu żadnego widoku. I tak miało być! Albowiem ten atrybut będzie reprezentował bieżący widok, który jest różny dla każdego requestu (no może nie każdego, większości).

Docelowo operowałem na pliku welcomeJSF.jsp, który leży sobie od samego początku w katalogu web. Wystarczyło przeredagować go na taką formę:

<%@taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<tiles:insertDefinition name="guestLayout" flush="true">
<tiles:putAttribute name="content" value="/glowna/content.jsp" />
</tiles:insertDefinition>

I przy posiadaniu takiej struktury plików:

strukturaProjektuJSF

Ostatecznie mym oczom ukazał się taki jakże miły każdemu sercu widok:

glownaProgramBash

To tyle na dziś. Wygląda to bardzo łatwo i skromnie, ale przyznaję, że trochę czasu nad rozkminianiem tego spędziłem. Zadziwiająco mało momentami Google wie na temat JSF i ewentualnych jego bugów czy współpracy z innymi technologiami. Oby się to zmieniło.

Advertisements

7 thoughts on “ProgramBash czyli o programowaniu na wesoło

  1. copernic777

    Przyjrzyj się lepiej Faclets’om jako silnikowi szablonów dla JSF. Dużo lepiej się z nimi integruje i jest bardzo prosty.

  2. chlebik Post author

    Wyszedlem od Tilesow, gdyz caly rozdzial w ksiazce mialem o nich. I wygladalo to dosc prosto i klarownie. Ostatecznie jaki jest kon kazdy widzi, ale teraz juz za bardzo nie chce mi sie przebudowywac od podstaw. O Facelets mam jakas ksiazke chyba od Jacka to poczytam sobie w wolnej chwili.

  3. Marek Podsiadły

    Dziwi mnie trochę Twoje podejście, że najpierw musi być wygląd strony. Owszem jest to ważne w końcowym efekcie, ale czy podczas pisania aplikacji nie lepiej skoncentrować się od samego początku na jej logice? Wygląd przecież może się wielokrotnie zmieniać później dzięki wykorzystaniu css.

  4. chlebik Post author

    Oj ten wyglad to rzecz jasna jest istotny w przypadku tworzenia aplikacji “pod bloga”. Raz, ze moge pokazac jakies dzialajace juz screeny (a nie kilka zwyklych stringow), a dwa – nie pisalem nigdy w JSF jeszcze i dlatego od razu chcialem miec rowniez przygotowany layout. No i po trzecie – ladnie wygladajaca (chocby poldzialajaca) aplikacje moge wystawic tez juz na necie (co pewnie niedlugo nastapi).

  5. chlebik Post author

    Na swoim hostingu gdzie stoi HowToJava. Dogadac sie tylko musze jeszcze co do Postgresa.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s