Projektant decyduje o dwóch podstawowych kwestiach związanych z pozycjami modułów - ich rozmieszczeniu na stronie oraz sposobie formatowania.

Umieszczanie pozycji modułów

Najprostszym sposobem umieszczenia pozycji modułu w szablonie jest wprowadzenie kodu:

<?php mosLoadModules( 'nazwa_pozycji'); ?>

W poleceniu tym wykorzystujemy funkcję Joomla! i Mambo, nakazującą serwerowi umieścić w tym miejscu kod HTML wyświetlający treść wszystkich opublikowanych i przypisanych do tego miejsca modułów.

Do jednej pozycji administratorzy serwisu mogą przypisać kilka modułów, a w przypadku każdego określić, na których stronach ma być wyświetlany. W konsekwencji:

• w tym samym obszarze strony mogą się pojawiać różne zestawy modułów,
• może się zdarzyć, że na niektórych stronach nie będzie wyświetlany żaden moduł.

Szablon winien być na tyle elastyczny, by uwzględniać te sytuacje. Służą temu między innymi techniki ukrywania kodu modułów oraz techniki ukrywania kolumn.

Formatowanie modułów

Sposób prezentacji treści modułu zależy od:

• szablonu modułu określonego w instrukcji wywołującej,
• właściwości klas .module oraz .moduletable   i ich wariantów zdefiniowanych w arkuszu stylów,
• parametrów modułów ustawianych przez administratorów.

Szablony modułów

W instrukcji wywołującej moduły projektant może, zdecydować o wyświetleniu modułów za pomocą jednego z pięciu dostępnych w Joomla! i Mambo szablonów - stylów. Umożliwia to pełna postać instrukcji wywołująca moduły:

<?php mosLoadModules( $nazwa_pozycji [, $styl] ); ?>

Na wybrany szablon modułu wskazuje drugi z argumentów: $styl. Dysponujemy następującymi opcjami:

•   0: szablon domyślny, oparty na jednokolumnowej tabeli,
•   1: szablon poziomy, oparty na tabeli wielokolumnowej,
• -1: szablon prosty, niesformatowany,
• -2: szablon X-html, oparty na CSS, umożliwia uzyskanie efektu zaokrąglonych narożników.
• -3: szablon X-html rozszerzony, oparty na CSS, umożliwia uzyskanie efektu zaokrąglonych narożników.

Styl 0: szablon domyślny

Domyślny szablon modułów oparty jest na jednokolumnowej tabeli. Moduły umieszczane są w układzie pionowym, jeden pod drugim, w kolejnych wierszach tabelki.

Aby wyświetlić moduły w szablonie domyślnym, można użyć jednej z dwóch instrukcji, np.:

<?php mosLoadModules( 'user1' ); ?>

lub

<?php mosLoadModules( 'user1',0 ); ?>

Rezultatem każdej z tych instrukcji będzie poniższy kod wynikowy w dokumencie HTML. Obok przedstawiamy wynik na stronie Joomla:

<div class="moduletable">
  <table cellpadding="0" cellspacing="0"
   class="moduletable[suffix]">
    <tr>
      <th valign="top">Tytuł modułu</th>
    </tr>
    <tr>
      <td>
        Treść modułu
      </td>
    </tr>
  </table>
  <table cellpadding="0" cellspacing="0"
   class="moduletable[suffix]">
    <tr>
      <th valign="top">Tytuł modułu</th>
    </tr>
    <tr>
      <td>
        Treść modułu
      </td>
    </tr>
  </table>
</div>

Jak widać na listigu, instrukcja umieszcza w dokumencie HTML element <div> z przypisaną klasą stylu CSS .moduletable, a wewnątrz utworzonego pojemnika umieszcza wielowierszową jednokolumnową tabelkę. z treściami modułu.

To, czy zostanie wyświetlony wiersz z tytułem, zależy od ustawień dokonanych we właściwościach konkretnego modułu.

Rysunek poniżej ilustruje rezultat.

Projektant szablonu dla Joomla może określić właściwości:

• elementu blokowego <div>, w którym umieszczona jest tabelka,
• tabeli,
• wiersza nagłówkowego tabeli, w tym nazwy modułu,
• komórki i umieszczonych w niej elementów.

Styl 1: szablon poziomy

Szablon poziomy natomiast oparty jest na jednowierszowej tabeli wielokolumnowej. Moduły umieszczane są w nim poziomo, jeden obok drugiego w tabelach zagnieżdżonych w kolejnych komórkach.

Aby wyświetlić moduły w szablonie poziomym, używamy takiej np. instrukcji, np.:

<?php mosLoadModules( 'user1', 1 ); ?>

Rezultatem zastosowania tego szablonu będzie kod wynikowy w dokumencie HTML przedstawiony poniżej:

<div class="moduletable">
  <table cellspacing="1" cellpadding="0" 
     border="0"  width="100%">
    <tr>
      <td valign="top">
        <table cellpadding="0" cellspacing="0" 
          class="moduletable[suffix]">
          <tr>
            <th valign="top">Tytuł modułu</th>
          </tr>
          <tr>
            <td>
              Treść modułu
            </td>
          </tr>
        </table>
      </td>
      <td valign="top">
        <table cellpadding="0" cellspacing="0" 
          class="moduletable[suffix]">
          <tr>
           <th valign="top">Tytuł modułu</th>
          </tr>
          <tr>
            <td>
              Treść modułu
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

Podobnie jak w poprzednim przypadku, instrukcja umieszcza w dokumencie HTML element <div> z przypisaną klasą stylu CSS .moduletable, a wewnątrz niego tabelkę, tym razem jednowierszową, z jedną lub kilkoma kolumnami - zależnie od ilości umieszczonych w tej pozycji modułów. Dla każdego bowiem modułu tworzona jest odrębna kolumna tabeli, a w umieszczonej w niej komórce zagnieżdżona jedno- lub dwuwierszowa tabela.

Gdy redaktorzy opublikują w tym szablonie trzy moduły, uzyskamy efekt jak na poniższej ilustracji. Na górny obrazku mamy trzy moduły z tytułami, na dolnym bez tytułów.

Podobnie jak w przypadku szablonu domyślnego, projektant szablonu dla Joomla decyduje o właściwościach:

• elementu blokowego <div>, w którym umieszczona jest tabelka,
• tabeli,
• wierszy nagłówkowych zagnieżdżonych tabel,
• komórek i umieszczonych w nich elementów,

Wykorzystując selektory potomka, może różnicować wygląd kolejnych modułów.

Ten szablon jest raczej rzadko stosowany. Trudno orzec, czy to z powodu zbyt dużej ilości nadmiarowego, niesemantycznego kodu, czy raczej ze względu na niedostrzeżone, choć wątpliwe - właśnie ze względu na ów nadmiarowy kod - walory.

Styl -1: szablon prosty

Instrukcja umieszczająca moduły w prostym szablonie może mieć np. taką postać (zwróć uwagę na znak minusa przed jedynką):

<?php mosLoadModules( 'user1', -1 ); ?>

Ten szablon jest w pewnym sensie przeciwieństwem poprzednich. O ile zastosowanie poprzednich wiąże się ze sporą ilością niesemantycznego kodu, to szablon prosty nie generuje go w ogóle. Po prostu, pozycję modułu wypełnia treść opublikowanych modułów.

 
  Treść modułu 1 Treść modułu 2 Treść modułu 3

Przestrzeń zajmowaną przez dane wyznacza nadrzędny blok obejmujący. Jeśli instrukcja wczytująca zostanie umieszczona np. w obrębie centralnej kolumny szablonu, to zawartość modułu rozłoży się na całej jej szerokości.

Sposób prezentacji danych zależy od ich oznakowania i właściwości standardowych elementów HTML określonych w arkuszu stylów. Projektant może też umieścić instrukcję wywołującą w dowolnym elemencie HTML, zwykle jednak wykorzystuje się element <div>, np.

<div class="jakas_klasa"><?php mosLoadModules( 'user1', -1 ); ?></div>

<div id="jakis_identyfikator"><?php mosLoadModules( 'user1', -1 ); ?></div>

W arkuszu stylów można wówczas zdefiniować odpowiednie reguły dla klasy stylu bądź bloku #jakis_identyfikator.

Styl -2: szablon X-html

Nieco tajemnicza nazwa X-html sygnalizuje zgodność tego szablonu ze standardem XHTML. Szablon nie zawiera elementów formatujących. Tytuły modułów ujmowane są w znaczniki <h4> </h4>, a treść w znacznik div.

Nieco myląca dla projektantów może być nazwa klasy: <div class="moduletable"> zastosowana w elemencie obejmującym. Można by z niej wnioskować, że szablon korzysta z tabeli. Tak jednak nie jest!

Instrukcja umieszczająca moduły w szablonie X-Joomla może mieć np. taką postać:

<?php mosLoadModules( 'user1', -2 ); ?>

Rezultatem zastosowania tego szablonu będzie kod wynikowy w dokumencie HTML przedstawiony poniżej:

 
<div class="moduletable[suffix]">
  <h4>Tytuł modułu</h4>
  Treść modułu
</div>
<div class="moduletable[suffix]">
  <h4>Tytuł modułu</h4>
  Treść modułu
</div>

Zależnie od ustawień dokonanych przez administratorów, moduły zostaną wyświetlone z tytułami bądź bez:

W arkuszu stylów definiujemy właściwości klasy .moduletable. Korzystając z selektora potomka - .moduletable h4{} - można nadać specyficzne, odmienne cechy typografizne tytułowi (tło, wyrównanie, rozmiar i krój czcionki, itp.).

Styl -3: szablon X-html rozszerzony

Gdy we wszystkich przeglądarkach, jak obecnie w Mozilli zostanie zaimplementowana właściwość border-radius, stanowiąca część specyfikacji CSS3, ten szablon straci zapewne na atrakcyjności. Umożliwia on bowiem uzyskanie efektu zaokrąglonych narożników.

Skorzystanie z tej możliwości wymaga następującego sposobu umieszczenia modułów w kodzie pliku index.php:

<?php mosLoadModules( 'user1', -3 ); ?>

Tak skonstruowana instrukcja wyświetli wszystkie moduły przypisane do pozycji user1 w zagnieżdżonych elementach blokowych. W znacznikach h4 ujęte będą tytuły modułów, a w znacznikach div ich treść.

Oto kod wynikowy, jaki przyniesie zastosowanie tego szablonu i przykładowy efekt na stronie:

 
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h4>Tytuł modułu</h4>
        Treść modułu
      </div>
    </div>
  </div>
</div>
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h4>Tytuł modułu</h4>
        Treść modułu
      </div>
    </div>
  </div>
</div>

Ilustracja poniżej przedstawia obrazowo nałożenie kilku elementów <div>. Dla każdego modułu tworzony jest element <div class="module"> (żółty kolor), w którym zagnieżdżone są trzy następne elementy <div>. W ostatnim z elementów umieszczana jest zawartość modułu.

Uzyskanie efektu zaokrąglonych krawędzi wymaga zamieszczenia w arkuszu stylów odpowiednich reguł, formatujących obszar modułu.

Uwagi, źródła

Jeżeli masz sugestie odnośnie treści lub chcesz zgłosić poprawki do tego rozdziału, skomentuj go albo umieść wiadomość na forum: Dokumentacja - Propozycje, zmiany, poprawki

Dziękujemy!

Stefan Wajda, Zespół Dokumentacji PCJ