UWAGA: Strona zawiera materiały archiwalne. Większość artykułów dotyczy Joomla! 1.0
Start arrow Programowanie arrow Poradniki arrow Tworzenie komponentu w Mambo CMS
Tworzenie komponentu w Mambo CMS - Wstęp Drukuj Email
Spis treści
Wstęp
dailymessage.php
admin.dailymessage.php
admin.dailymessage.html.php
toolbar.dailymessage.php
toolbar.dailymessage.html.php
install.dailymessage.php i uninstall.dailymessage.php
dailymessage.xml
Dodatek 1. Komponenty versus Moduły
Dodatek 2: Zakładki na stronach administracyjnych

Wiele popularnych komponentów Mambo posiada funkcjonalność zakładek na swoich stronach, powodującą logiczny podział dla dużych i skomplikowanych stron. Kod obsługujący zakładki jest częścią środowiska Mambo, gotowy w oczekiwaniu na wykorzystanie w Twoim projekcie!

Uwaga!Przykładem takich zakładek może być strona konfiguracyjna Mambo (menu Witryna/Konfiguracja).

Komponent Wiadomość Dnia (Daily Message) ma stronę konfiguracyjną, która jest pokazywana, gdy klikamy na menu Configure (act='configure'). Plik admin.dailymessage.php rozpoznaje to i przekazuje klasie HTML_joeDailyMessage, aby wykonała funkcje, listConfiguration(), która to generuje HTML wyświetlający opcje konfiguracyjne.

Aczkolwiek oryginalny układ jest miły i przejrzysty, załóżmy, że autor jest zafascynowany zakładkami i chce je użyć również na tej stronie konfiguracyjnej. Bez większego wysiłku, możemy tak zmodyfikować oryginalny kod, aby pojawiły się zakładki:

function listConfiguration($option, &$rows)
{
?>
<form action="index2.php" method="post" name="adminForm">
<table cellpadding="4" cellspacing="0" border="0" width="100%" class="adminlist">
<?
$row = $rows[0];
?>
<tr><td>Bold</td><td><?php echo 
    mosHTML::yesnoSelectList( "bold", "", $row->bold ); ?></td></tr>
<tr><td>Italic</td><td><?php echo 
    mosHTML::yesnoSelectList( "italic", "", $row->italic ); ?></td></tr>
<tr><td>Underline</td><td><?php echo 
    mosHTML::yesnoSelectList( "underline", "", $row->underline ); ?></td></tr>
<tr><td>Show Date</td><td><?php echo 
    mosHTML::yesnoSelectList( "showdate", "", $row->showdate ); ?></td></tr>
</table>
<input type="hidden" name="option" value="<?php echo $option; ?>" />
<input type="hidden" name="task" value="" />
<input type="hidden" name="configid" value=<?php echo $row->configid ?> />
<input type="hidden" name="act" value="configure" />
</form> 
<?php
}

Jeśli nie pamiętasz o co chodziło w tym kodzie, zapraszam do fragmentu tego kursu objaśniającego plik admin.dailymessage.html.php. Dodajemy zakładki:

function listConfiguration($option, &$rows)
{
?>
<script language="Javascript" src="js/dhtml.js"></script>

Dodajemy skrypt Javascript, który obsługuje funkcjonalność zakładek. Jest on integralną częścią Mambo i wykonuje za nasz większość roboty.

<?
$row = $rows[0];
?>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td width="" class="tabpadding"> </td><td id="tab1" class="offtab" onClick="dhtml.cycleTab(this.id)">Bold</td><td id="tab2" class="offtab" onClick="dhtml.cycleTab(this.id)">Italic</td><td id="tab3" class="offtab" onClick="dhtml.cycleTab(this.id)">Underline</td><td id="tab4" class="offtab" onClick="dhtml.cycleTab(this.id)">Show Date</td><td width="90%" class="tabpadding"> </td></tr>
</table>

Gdy tylko wczytamy dane konfiguracyjne z bazy danych, budujemy zakładki na samej górze formularza używając tabeli. Identyfikator 'id' każdej z komórek tabeli jest ustawiony jako ’tabX’, gdzie X odpowiada pozycji zakładki w tabeli, zaczynając od numeru 1. Mała pusta komórka na początku tabeli zapewnia, że zakładki nie ’zjadą’ na lewą stronę strony. Ostatnia komórka zapobiega rozciągnięciu się zakładek na cala długość strony. Aczkolwiek, jej szerokość jest ustawiona na 90%, rzadko kiedy będzie zajmować tyle miejsca.

<form action="index2.php" method="post" name="adminForm">
<div id="page1" class="pagetext">
<center>Bold: <?php echo mosHTML::yesnoSelectList( "bold", "", $row->bold ); ?></center>
</div>

Zaczynamy tworzenie formularza od dodania zawartości pierwszej zakładki. Używając analogicznego schematu nazewnictwa, jak powyżej, nadajemy zawartości każdej z zakładek nazwę pasującą do nazwy samej zakładki, czyli tab1 = page1, tab2 = page2 itd. To pozwala Javascript wykonanie całej funkcjonalności za nas, a my możemy się skoncentrować na wyglądzie.

<div id="page2" class="pagetext">
<center>Italic: <?php echo 
   mosHTML::yesnoSelectList( "italic", "", $row->italic ); ?></center>
</div>
 
<div id="page3" class="pagetext">
<center>Underline: <?php echo 
   mosHTML::yesnoSelectList( "underline", "", $row->underline ); ?></center>
</div>
 
<div id="page4" class="pagetext">
<center>Show Date: <?php echo 
   mosHTML::yesnoSelectList( "showdate", "", $row->showdate ); ?></center>
</div>

Następne fragmenty kodu są powtórzeniem poprzedniego wraz z odpowiednią zmianą nazewnictwa i wyświetlanych danych.

<input type="hidden" name="option" value="<?php echo $option; ?>" />
<input type="hidden" name="task" value="" />
<input type="hidden" name="configid" value=<?php echo $row->configid ?> />
<input type="hidden" name="act" value="configure" />
</form>

Tutaj nic się nie zmienia, więc polecam lekturę oryginalnego kursu. Proszę zauważyć, że tutaj również zamykamy formularz (). Wynikiem, czego wszystkie nasze 4 elementy konfiguracyjne są na jednym formularzy ’adminForm’. To może być błogosławieństwo albo przekleństwo w zależności od efektu, jaki chcesz uzyskać. Jeśli chciałeś na każdej z zakładek uzyskać inny pasek narzędzi, odpowiedni do ustawień, to nie tędy droga. Problem polega na tym, że wszystkie skrypty w Mambo odnoszą się do formularza ’adminForm’ i do niczego innego. Jeślibyś próbował kilku wersji formularza ’adminForm’ na jednej stronie, Javascript ’zgłupieje’ i zawiesi się. Aczkolwiek, jeśli masz dużo opcji konfiguracyjnych przechowywanych w jednej tablicy i nie mieszczą Ci się na jednej stronie, zakładki mogą ułatwić Twoje życie.

<script language="javascript" type="text/javascript">dhtml.cycleTab('tab1');</script>
 
<?
}

To jeszcze nie koniec. Musimy powiadomić Mambo, którą zakładkę ma pokazać jako domyślną. Może się to wydawać niepotrzebne na pierwszy rzut oka, ale tak naprawdę daje nam to więcej elastyczności w projektowaniu zakładek. Powiedzmy, że z innych stron administracyjnych chciałbyś odesłać administratora do pewnej konkretnej grupy ustawień. Możesz przesłać zmienną i wprowadzając tutaj odpowiednie warunki if() lub switch() wymusić wyświetlenie konkretnej zakładki.



Zmieniony ( 14.12.2007. )
 
« poprzedni artykuł