Lekcja 11 – klasa JHTML

Kategoria: Kurs pisania komponentów dla Joomla 1.5 [MVC] Utworzono: wtorek, 28, październik 2008 Opublikowano: wtorek, 28, październik 2008 Wojciech Romanek Drukuj E-mail

Witam ponownie po małej przerwie, długo się zastanawiałem jak w prosty sposób przedstawić tworzenie części administracyjnej, postanowiłem podzielić ten kurs na kilka części (co najmniej dwie, ile wyjdzie się okaże). Jako takie wprowadzenie zdecydowałem się przedstawić Wam klasę JHTML którą dość często będziemy wykorzystywać przy tworzeniu zaplecza.

Na dobry początek, może dla tych którzy są niecierpliwi a znają dobrze php: plik zawierający klasę JHTML znajduje się w katalogu libraries/joomla/html a plik ma nazwę bardzo wymowną: html.php . Właściwie to na tym mógłbym skończyć...Otwierasz plik i studiujesz... No ale dobra, nie będę ja szedł na łatwiznę i chociaż trochę o klasie a dokładniej o jej metodach napiszę. Ogólnie rzecz ujmując klasa JHTM jak sama nazwa sugeruje służy nam do wstawiania w kod kodu HTML wygenerowanego na podstawie jakichś konkretnych parametrów metod wywoływanych z tej klasy.

Dlaczego JHTML? Dlatego że, pisząc jakiś komponent gdzie skupiamy się na jakichś ciekawych mechanizmach, algorytmach i strukturze bazy danych łatwiej i szybciej będzie nam napisać:

JHTML::_('link', 'index.php?option=com_content&view=article&id=1', 'jakis artykul');

niż:

<a href="../inne/wyprowadzenia-i-opis-portu-rownoleglego-lpt-centronic.html">jakis artykul</a>

Kod html powyżej to kod zwrócony przez metodę _() w tym przypadku długość jest porównywalna ale na pewno składniowo łatwiej zapisać pierwszy kod. Podałem przykład, bez czytania dalej sprawdziłeś go w swoim komponencie i nie działa? Nic dziwnego, przed użyciem klasy JHTML musimy ją dodać do naszego komponentu. Stosujemy więc zapis (na początku pliku):

jimport(joomla.html.html);

Bardziej bystrzy zauważą tutaj analogię parametru do ścieżki do pliku w którym się ona znajduje;)

W jaki sposób zadziałał kod pierwszy? Przyjrzyjmy się parametrom. Pierwszy z nich link jest nazwą metody która znajduje się w klasie JHTML (jeśli nie wierzysz to sprawdź plik o którym pisałem na początku). Dalsze parametry są parametrami pobieranymi przez tą metodę tak ona wygląda w pliku html.php

function link($url, $text, $attribs = null)

jak widac, my nie zastosowaliśmy argumentu $attribs który mógł np. przyjąć wartość 'id="1" class="jakas_klasa"'.

W ten sam sposób możemy wywoływać inne metody znajdujące się w klasie JHTML np. metodę Image. Jak to będzie wyglądać? A no np. tak:

JHTML::('image', 'images/save.png', 'jakis_obrazek', 'width="300"');

oczywiście to co zwraca ta metoda można przypisać jakiejś zmiennej i wtedy to wyświetlić lub wyświetlić bezpośrednio.

echo JHTML::('image', 'images/save.png', 'jakis_obrazek', 'width="300"');

lub:

$obrazek = JHTML::('image', 'images/save.png', 'jakis_obrazek', 'width="300"');
echo $obrazek;

Jeśli chcesz poznać inne metody musisz przewertować plik o którym cały czas mowa (ścieżka do pliku na początku).

Jak zauważyłeś (jeśli zaglądałeś do katalogu libraries/joomla/html) jest w nim jeszcze jeden katalog o nazwie html. Co w nim jest? Są kolejne klasy, a w nich kolejne metody. Jak z nich korzystać? Otóż tak samo z tym że tym razem zamiast nazwy metody jako parametr podajemy 'nazwa_klasy.nazwa_metody'. Za przykład tym razem nam posłuży metoda images z klasy list.

echo JHTML::_('list.images', 'obrazki');

Tutaj już nic nie wyjaśniam odsyłam do odpowiednich plików! Jakich? To już powinieneś wiedzies, leśli nie wiesz to przeczytaj jeszcze raz... i tak do skutku.

Na zadanie domowe przestudiujcie sobie te wszystkie klasy z katalogu libraries/joomla/html/html

p.s. Nie uwierze jeśli ktoś będzie wolał pisać coś jak poniżej zamiast tej jednej linijki którą zapisałem przed chwilą.

<select name="obrazki" id="obrazki" class="inputbox" size="1" onchange="javascript:if (document.forms.adminForm.obrazki.options[selectedIndex].value!='') {document.imagelib.src='../images/stories/' + document.forms.adminForm.obrazki.options[selectedIndex].value} else {document.imagelib.src='../images/blank.png'}"><option value=""  selected="selected">- Select Image -</option><option value="articles.jpg" >articles.jpg</option><option value="clock.jpg" >clock.jpg</option><option value="ext_com.png" >ext_com.png</option><option value="ext_lang.png" >ext_lang.png</option><option value="ext_mod.png" >ext_mod.png</option><option value="ext_plugin.png" >ext_plugin.png</option><option value="joomla-dev_cycle.png" >joomla-dev_cycle.png</option><option value="key.jpg" >key.jpg</option><option value="pastarchives.jpg" >pastarchives.jpg</option><option value="powered_by.png" >powered_by.png</option><option value="taking_notes.jpg" >taking_notes.jpg</option><option value="web_links.jpg" >web_links.jpg</option></select>
Odsłony: 12014