Lekcja 3 - MVC - View [widok]

Kategoria: Kurs pisania komponentów dla Joomla 1.5 [MVC] Utworzono: czwartek, 01, maj 2008 Opublikowano: czwartek, 01, maj 2008 Wojciech Romanek Drukuj E-mail

Dziś zajmiemy się kolejną warstwą wzorca MVC jaką jest View czyli widok. Warstwa ta jest odpowiedzialna za prezentację danych. Pierwsze zagadnienie jakie postaram się omówić to organizacja plików. Do tej pory w katalogu naszego komponentu (strona admina czy fronotowa) mamy dwa pliki: witaj.php oraz controller.php. Wszystkie pliki widoku przechowywane będą w katalogu views który będzie znajdował się w katalogu głównym naszego komponentu. Zatem, utwórz katalog views (wewnątrz katalogu komponentu np com_witaj). Następnie wewnątrz katalogu tworzymy kolejne katalogi z dowolnymi nazwami naszych widoków(stosuje się kilka różnych wedle potrzeby do prezentacji innych danych itp.). Aby utworzyć widok domyślny należy użyć w nazwie katalogu nazwy naszego komponentu czyli jeśli nasz komponent nazywa się witaj (com_witaj) to nasz katalog widoku domyślnego będzie nazywał się witaj.(żeby się nie pogubić, ścieżka do tego katalogu wygląda tak: joomla/components/com_witaj/views/witaj/  dla strony frontowej lub joomla/administrator/components/com_witaj/views/witaj dla strony admina, gdzie joomla to nasz katalog główny w którym mamy zainstalowaną Joomla). W katalogu tym umieścimy plik view.html.php który będzie pobierał dane z modelu (o nim napiszemy później) i "wpychał" je do szablonów naszego widoku.

Teraz tworzymy katalog w którym umieścimy szablony dla danego modelu. Katalog ten nazwiemy tmpl (skrót od templates). W katalogu tmpl możesz utworzyć jeszcze domyślny szablon o nazwie default.php (kodem zajmiemy się później). Jeśli masz już utworzone katalogi i pliki o których pisałem wcześniej możemy zacząć pisać kod. Mój tekst może być miejscami trochę "zamotany" dlatego poniżej jeszcze lista plików naszego komponentu:

com_witaj/witaj.php
com_witaj/controller.php
com_witaj/views/witaj/view.html.php
com_witaj/views/witaj/tmpl/default.php

Ogólny szablon pliku view.html.php wygląda następującą:

<?php
 
defined( '_JEXEC' ) or die( 'Restricted access' );
 
jimport( 'joomla.application.component.view');
 
class WitajViewWitaj extends JView
{
    function display($tpl = null)
    {
       
        parent::display($tpl);
    }
}
?>

Pierwsze dwie linie tłumaczone były w poprzednim artykule, z tym wyjątkiem że linia dwa teraz odpowiedzialna jest za załadowanie biblioteki view. Każdy plik view.html.php składa się z jednej głównej klasy której nazwa jest zbudowana z nazwy komponentu słowa View oraz nazwy widoku. W naszym przypadku jest to WitajViewWitaj. Wewnątrz klasy mamy funkcję display której będziemy używać do przekazywania danych do szablonu. Oczywiście w miarę potrzeby i wzrostu umiejętności można dopisać inne funkcje.  Teraz wewnątrz funkcji display proponuję wpisać jakiś kod php np.

echo 'Napisalem to w moim widoku!';

Aby widok ten był wyświetlany domyślnie, w naszym pliku controller.php musimy dodać metodę display() która wygląda tak:

function display()
    {
        parent::display();
    }

Co ona wykonuje? Wywołuje funkcję display która jest zadeklarowana w bibliotece kontrolera. Mając taką funkcję w kontrolerze, możemy testować czy działa nasz widok. Wrzucamy wszystkie pliki na serwer i wpisujemy w przeglądarke adres do naszej jooml'i dodając: index.php?option=com_witaj jeśli wszystko zrobiłeś dobrze to powinieneś zobaczyć napis "Napisalem to w moim widoku!".

Jeśli wszystko dobrze działa, możemy zabrać się za szablon. Edytujemy plik default.php w katalogu tmpl naszego widoku i tutaj możesz wpisać co Ci się podoba(kod php). Zasada jest taka że w pliku szablonu używamy jak najmniej kodu php. Oczywiście zacząć musiymy od:

<?php
defined ('_JEXEC') or die('Restricted access');  
?>

Co dalej? Możesz np. coś wypisać, ja to zrobiłem np. tak przed znakami ?> dopisz echo 'Napisałem to w moim szablonie!'; po zapisaniu plików znów możesz sprawdzić działanie komponentu, najpierw powinieneś zobaczyć tekst Napisalem to w moim widoku! a pod nim Napisałem to w moim szablonie!. No dobrze ale co to nam daje? No narazie nic... To wypisywanie tekstów zaprezentowałem w celu zobrazowania Ci w jaki sposób działa widok i szablon. Tak naprawdę w pliku view.html.php nie używa się do wyświetlania danych, jest on tylko pośrednikiem między źródłem danych a szablonem. Na temat źródła danych będzie w następnym artykule. Teraz w celu zaprezentowania przekazywania danych do szablonu w widoku utworzymy jakąś zmienną. Np. $dane której przypiszemy nasz tekst. Do przekazania tej zmiennej do szablonu używamy funkcji z klasy JView  assignRef( 'nazwa', wartosc );  Pierwszy parametr to nazwa pod jaką będzie dostępna zmienna w pliku szablonu, drugi to jej wartość. Zmienne nie są dosłownie przekazywane do szablonu, przekazywane sa tylko referencje do nich (oszczędza to pamięć) po więcej informacji odsyłam tutaj .  Nasz widok, teraz może wyglądać tak:

<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
 
jimport( 'joomla.application.component.view');
 
class WitajViewWitaj extends JView
{
    function display($tpl = null)
    {
        $dane = 'Napisałem to w moim widoku!';
        $this->assignRef( 'mojedane', $dane );       
        parent::display($tpl);
    }
}
?>

Aby teraz użyć zmienną w szablonie odwołujemy się zawsze poprzez $this->nazwa_Zmiennej (taka jaką użyliśmy przy przekazywaniu). Więc teraz nasz plik szablonu (default.php) może wyglądać następująco:

<?php
defined('_JEXEC') or die('Restricted access');
?>
<h1><?php echo $this->mojedane; ?></h1>

Teraz proponuję pobawić się trochę tym aby zrozumiec jak to działa. Jeszcze jedna wskazówka do ćwiczeń. Aby z kontrolera wywołać inny widok lub szablon z danego widoku nalezy użyć odpowiednio:

JRequest::setVar('view', 'nazwa_widoku');
JRequest::setVar('layout','nazwa_szablonu');

Z tym że jeśli chcemy wybrać widok z szablonem domyślnym to używamy tylko pierwszy wiersz, jesli jednak chcemy wybrać inny szablon to musimy wpisać oba wiersze. Co one oznaczają? Nie jest to nic innego jak tylko ustawienie wartości zmiennych.

Na zadanie domowe stwórz kilka różnych widoków a w nich szablonów. Oraz kilka metod odpowiedzialnych za różne task'i (zadania - opisałem to w lekcji 2) tak aby wywołując różne zadania wyświetlane były inne widoki. Myślę że poradzisz sobie z tym bez problemu!

Jeśli uważasz, że z tych artykułów da się czegoś nauczyć głosuj w sondzie, widząc statystyki czytalności wiem że temat jest chętnie czytany, ale nie wiem z jakim skutkiem. Jeśli masz jakieś sugestie to zapraszam do kontaktu;) W krótce może jeśli będę miał czas to wymyslę jakiś sposób interakcji z osobami czytającymi artykuł.(wymyślone - system komentarzy)

Odsłony: 15895