Grailsujemy dalej, czyli początki aplikacji w Grails

W poprzednim wpisie powiadomiłem wszem i wobec o nowym projekcie na blogu. Przyszedł zatem czas na konkrety – oto początki tworzenia aplikacji internetowej w Grails.

Wbrew wcześniejszym zapewnieniom użyte IDE to ponownie Netbeans, tyle tylko, że w wersji 6.5, która posiada wsparcie dla projektów pisanych w Groovym i Grailsach. Należy zatem zaopatrzyć się w wersję 6.5 Netbeans’a i z menu wybrać File->New Project->Groovy->Grails Project (oczywiście wypadałoby mieć w tym czasie również zainstalowane Grails i Groovy, ale jak tego dokonać napsiałem w poprzednim wpisie. IDE pobuduje nam projekt i oto co powinno pokazać się naszym oczom:

Projekt Grails

Projekt Grails

Jak na rasowy framework przystało, Grails odwalił kupę dobrej roboty, aby tworzenie projektu odbyło się łatwiej i przystępniej. Mamy zatem na razie puste katalogi z kontrolerami, modelami (domenami), usługami sieciowymi, a także kilka ciekawych rzeczy. Standardowo framework ten jest dostarczany z szeregiem bibliotek JavaScriptu, które mają w zamyśle wspomagać pracę z AJAXem. Widać tam i Prototype, a także opartą na nim bibliotekę Scriptaculous, z którymi miałem okazję pracować, ale jednak obecnie korzystam z JQuery i za nic nie chcę widzieć alternatyw 🙂 Zmianą używanych bibliotek zajmę się później.

Mamy też katalog ‘Views and layouts’, którego przeznaczenie jest raczej oczywiste. Widoki w Grails są tworzone z użyciem Grails Server Pages (swoistej odmiany JSP). Do tematu jednakoż jeszcze za chwilkę powrócę. Warto rozejrzeć się trochę po projekcie w jego początkowej fazie. Daje to pojęcie od czego zaczynamy na samym początku pracę i da obraz zmian i ogromu pracy jaką wykona za nas Grails.

Teraz może kilka słów o projekcie, który zamierzam zrealizować. Nie raz dało się słyszeć głosy (na różnych forach), iż społeczność javovców w polskim internecie (podkreślam INTERNECIE), nie ma tak mocnego ośrodka jak choćby forum php.pl, na którym zawsze można znaleźć odpowiedzi na masę pytań i nie tylko (HydePark rządzi). Pomijając kwestie natury społecznościowej, to dobrze byłoby mieć jedno miejsce, gdzie na 99% znajdzie się odpowiedź na większość swoich wątpliwości. I tak kiedy jechałem do pracy przyszedł mi do głowy ciekawy pomysł. Może należałoby stworzyć prosty serwis (prosty, bo też tworzony w ramach nauki), w którym możnaby zamieścić pytanie z prośbą o poradę, a użytkownicy portalu mogliby na nie odpowiadać. Czyli takie forum, ale nastawione tylko i wyłącznie na porady dotyczące języka programowania, a także pokrewnych technologii. Podobne portale istnieją w odniesieniu do wielu dziedzin życia, ale moje ambicje nie sięgają tak daleko. Rozwiązań tego typu w polskim internecie przeznaczonych TYLKO DLA JAVY, jakoś nie mogłem się doszukać, zatem i ciekawy pomysł, a i może przyda się komuś 🙂 Jakby jeszcze ktoś chciał wesprzeć tanim hostingiem to w ogóle byłoby miodzio.

W tym wpisie opiszę tylko dwa kroki – ‘oprawienie’ aplikacji w inny niż standardowy wygląd, a także dodanie biblioteki JQuery i usunięcie istniejących. To tyle na rozruch, poważniejszymi zadaniami zajmę się niedługo. Wpierw zatem wygląd. Przejrzałem szereg ciekawych propozycji i z pomocą żony wybrałem taki, który najlepiej moim zdaniem nadaje się do moich celów. Pobrana paczka składa się z obrazków, kodu CSS oraz przykładowej strony HTMLa. No i teraz po kolei.

Kod CSS wrzucamy do katalogu /css. Konkretnie znajduje się on KATALOG_APLIKACJI/web-app/css. Domyślnie tworzony jest w nim plik main.css, ale nie przejmumy się tym – zapisałem CSS dla całego layoutu pod nazwą layout.css. W tym samym katalogu (KATALOG_APLIKACJI/web-app) mamy także katalog /images. Tam zgodnie z nazwą wrzucamy pliki graficzne dla ściągniętego layoutu.

Grailsy ucieleśniają dość standardowy mechanizm – mamy zarówno layout, jak i konkretne szablony dla obecnie wyświetlanej akcji. Domyślnie (zaraz po stworzeniu projektu) posiadamy dwa pliki. Jeden to plik layoutu w katalogu Views and layouts/layouts/main.gsp, a także pierwszy plik szablonu w katalogu Web Application/index.gsp. Dla celów instruktażowych należy stworzyć kopię pliku index.gsp w tym samym katalogu – wypada tylko zmienić jego nazwę, na np. example.gsp. Na nim będziemy eksperymentować. Na razie jednakże zajmijmy się plikiem layoutu. Jego zawartość powinna wyglądać mniej więcej tak:

kodlayout1

Wygląda to na standardowy kod HTMLa ze specjalnymi tagami GSP. I właśnie te tagi są dla nas najważniejsze. Należy uruchomić naszą stronkę (prawy przycisk na projekcie->run). Netbeans puści w ruch całą maszynerię wdrożenia aplikacji i na końcu zastartuje serwer i odpali przeglądarkę (przynajmniej u mnie tak to działa :). Naszym oczom powinna ukazać się strona powitalna Grails. Zachęcam do spojrzenia w kod źródłowy strony (w przeglądarce), a następnie zapozanie się z treścią pliku index.gsp w katalogu /web-app. Ciekawe prawda? Nie jest potrzebna większa znajomość frameworka, aby zobaczyć, iż w miejsce znaczników i zostały ‘wstrzyknięte’ kawałki kodu z wyświetlanego obecnie widoku.

Zatem uzbrojeni w tę wiedzę należy teraz poinformować aplikację, aby wczytywała również kod CSS z pliku layout.css. W tym celu do pliku main.gsp należy dopisać tę linijkę:

	<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'layout.css')}" />

Edycja: Dzięki mejlowi od Mariusza Pieniążka zdałem sobie sprawę, że poniższy fragment jest totalnie nielogiczny i zagmatwany. Stąd nowa wersja.

Należałoby też wyczyścić zawartość znacznika w naszym pliku layoutu (main.gsp) – zostawiamy tylko znacznik GSP . Z kolei w naszym pliku (dla przypomnienia: example.gsp) należałoby wkleić zawartość widoku ściągniętego ze strony z templejtami (link podałem gdzieś wcześniej). Jedyną rzeczą do dopisania w samym widoku jest linijka:

To co ostatecznie musimy osiągnąć to plik layoutu (main.gsp), w którym znajdują się maksymalnie rozbudowane sekcje HEAD (wszystkie znaczniki META oraz importy plików, np. CSSów czy JSa), a także dość krótka i nienarzucająca się sekcja BODY. Oczywiście w ostatecznym wyglądzie HowToJava plik layoutu trochę rozbudowałem (głównie dla obsługi sidebara), jednakże zasada jest ta sama.
Zaś plik widoku (aktualnie renderowanego) powinien zawierać w sekcji HEAD taki oto znacznik:

<meta name="layout" content="main" />

Dzięki temu layout z main.gsp zintegruje się z naszym widokiem. Do pełni szczęścia okazało się, że trzeba wyedytować plik layout.css – przy odnośnikach do plików graficznych trzeba dopisać “../”, aby Grails zobaczył obrazki. Póki co dziwne (nie wiem pod kątem czego odbywa się przeszukiwanie katalogów, no ale rozwiązanie to na razie działa). Z pewnością dowiem się już niedługo więcej na temat routingu w tym frameworku. Oto co uzyskałem po małych przeróbkach ze swojej strony (adres pod którym uruchamiam aplikację to: http://localhost:8080/Howtojava/example.gsp):

howtojava

Wygląda to już dość przyzwoicie, teraz przyszedł czas na JQuery. Ja po prostu usunąłem katalog Prototype z folderu /web-app/js i wgrałem tam ‘czystą’ bibliotekę JQuery. W pliku main.gsp dodałem tylko tę linijkę ( w sekcji <head>):

<g:javascript library="jquery-1.3.2.min" />

Przetestowanie czy JQuery jest banalnie proste. Króciutki kod wklejony bezpośrednio do pliku example.gsp powiedział prawdę:

jQuery().ready(function(){$('#logo').fadeOut();});

I po przeładowaniu strony napis ‘HowToJava.pl’ powinien powoli sobie zniknąć. Krótko mówiąc – podpięliśmy inną bibliotekę JavaSCriptu niż dostarczane standardowo. To tyle na dziś. W następnej części przedstawię technologię rusztowania (ang. scaffolding), która zgodnie z nazwą umożliwia stworzenie znacznej części aplikacji automatycznie. Na pewno będzie ciekawie.

Advertisements

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