Programowanie bez kompilowania
W snapie możliwe jest pisanie kodu bez ciągłego wywoływania cabal install (czy też cabal build) po każdej zmianie. Aby to umożliwić przechodzimy do katalogu z projektem i wywołujemy:$ cabal clean ; cabal install -f development
To może zająć chwilę z uwagi na to, że możecie nie mieć odpowiednich bibliotek. Gdy się już przekompiluje to uruchamiamy nasz projekt tak jak ostatnio (czyli ./dist/build/
Spróbujmy teraz wywołać błąd. Dopiszmy w tej samej linijce np. cyfrę 1, tylko, że za cudzysłowem. O tak: writeText "<h1>Hello new world!</h1>" 1 i odświeżmy stronę. Zamiast "Hello new world!" dostaliśmy szereg informacji o błędach w kodzie, jakie by nam wypisał kompilator podczas kompilacji.
W ten sposób programuje się nieco szybciej przy małych zmianach w kodzie. Interpretacja jednak bardzo spowalnia aplikację więc nie da się w ten sposób używać aplikacji w produkcji. Gdybyśmy chcieli teraz normalnie skompilować aplikację to znów należy wykonać najpierw cabal clean, a później cabal install już bez dodatkowej opcji.
Heist
Jak już wspominałem w pierwszej części artykułu programowanie za pomocą writeText byłoby bardzo uciążliwe i czasochłonne. Pokażę Wam zatem lepszy sposób na wyświetlanie HTMLa.Heist jest systemem szablonów używanym w snapie. Pliki szablonów to zwyczajne pliki htmlowe (bądź xmlowe) z tą tylko różnicą, że Heist sprawdza poprawność tych plików przy uruchomieniu serwera (czyli czy są podomykane odpowiednie znaczniki itp.) oraz można utworzyć własne znaczniki, które Heist nam podmieni. Z tym, że nie muszą być to po prostu wartości, możemy np. utworzyć sobie własny znacznik <if>, który tylko, gdy podany warunek będzie spełniony to wyświetli to co jest pomiędzy znacznikiem otwierającym, a zamykającym itp. itd.
Pliki szablonów są trzymane w katalogu snaplets/heist/templates i muszą mieć rozszerzenie tpl. Utwórzmy tam plik hello.tpl o treści <h1>My first template</h1>. Teraz w naszej funkcji handleHelloWorld (w pliku Site.hs) wprowadzimy wyświetlenie tego szablonu. W tym celu usuwamy dotychczasową treść funkcji i wpisujemy: render "hello". Możemy odświeżyć stronę by zobaczyć efekt.
Funkcja render jako argument przyjmuje nazwę szablonu bez rozszerzenia i po prostu wyświetla szablon. Teraz spróbujmy wprowadzić jakiś własny znacznik do szablonu, np <name/>. Dodajmy go gdzieś w pliku szablonu i powróćmy do naszej funkcji handleHelloWorld. Zamieńmy jej treść na coś takiego:
renderWithSplices "hello" [("name", I.textSplice "Ala")]
Funkcja renderWithSplices różni się od funkcji render tym, że pozwala dodać własne znaczniki (technicznie nazywają to splice, dlatego właśnie renderWithSplices). Znaczniki dodaje się w parach (nazwa, wartość). Jeżeli chcemy dodać ich więcej to po prostu piszemy po przecinku kolejne pary w liście, np: renderWithSplices "hello" [("name", I.textSplice "Ala"), ("urodziny", I.textSplice "jutro")]. Funkcja textSplice tworzy znacznik, który jest po prostu tekstem (może być jeszcze innym znacznikiem lub komentarzem). Gdybyśmy podali jej jakiś tekst, który byłby kodem HTML to zmieniłby go tak aby się wyświetlił jako tekst, np. "<br>" nie wyświetliłby nowej linii lecz po prostu napis "<br>".
UWAGA: jeżeli w szablonie wpisalibyśmy coś takiego:
<h1 class="<name>">My first template</h1>
to oczywiście nie jest to poprawny kod HTMLa i Heist by zwrócił błąd. Jeżeli chcemy używać własnych znaczników w atrybutach należy użyć specjalnej składni:
<h1 class="${name}">My first template</h1>
To tyle na dziś. Następnym razem spróbujemy utworzyć ciekawsze znaczniki jak np. wspomniany wcześniej if. Do tego czasu postarajcie się dzisiejszą lekcję dobrze opanować.
Brak komentarzy:
Prześlij komentarz