16
lipca
2010
W najnowszej wersji Joomla! dodano plugin nazywany MooTools 1.2.4 upgrade plugin. Jest on domyślnie wyłączony i działa on na zasadzie - potrzebujesz MooTools 1.2.4 na swojej stronie ? - to włącz ten plugin. Osobiście jednak uważam, że dodanie takiego dodatku do Joomla! jest bardzo złym i nieprzemyślanym posunięciem.
Powiedzmy sobie otwarcie - jeżeli ktoś chciał korzystać z MooTools 1.2.4 na swojej stronie opartej o Joomla! to i tak to od dawna robił. Joomla 1.5.* od początku bazowała na MooTools 1.1.* i dodawanie takiej opcji do tego CMS-a w tym momencie oznacza jedno: developerzy rozszerzeń muszą (no dobrze - powinni) napisać spory kawałek warstwy client-side swoich produktów od nowa i dodatkowo tak rozwiązać problem by w zależności od wybranej wersji MooTools na witrynie dane rozszerzenie automatycznie wybierało z której wersji skryptu ma korzystać.
Pytanie podstawowe jakie się nasuwa - na co to komu ? Duża część rozszerzeń i tak prawdopodobnie nie zostanie zaktualizowana więc prawdopodobnie nowy tryb pracy będzie wykorzystywany sporadycznie. Bo o ile pogodzić jQuery i MooTools nie jest specjalnie trudno to niestety ale dwie różne wersje tego samego frameworka raczej nie chcą ze sobą współpracować.
Mam cichą nadzieję, że nie będzie podobnych przebojów z Joomla! 1.6 i MooTools 1.2.4 oraz MooTools 1.3.
13
lipca
2010
W Joomla! 1.5 pola formularza danego rozszerzenia można było łatwo modyfikować poprzez własne style CSS i skrypty JavaScript dołączając je np. w opisie danego rozszerzenia. Nie było to może rozwiązanie piękne, ale działało skutecznie. W Joomla! 1.6 niestety nie mamy już do dyspozycji opisu w miejscu gdzie występuje formularz konfiguracji danego rozszerzenia.
Na szczęście Joomla! udostępnia nam inny mechanizm, który możemy wykorzystać na nasze potrzeby - możliwość tworzenia własnych rodzajów pól formularza.
Własne pola formularza tworzymy na bazie klasy JFormField. Przykłady standardowych pól dostępnych w Joomla! możemy sobie przejrzeć w katalogu libraries/joomla/form/fields/.
Stworzymy więc własny rodzaj pola formularza, który pozwoli nam dołączać skrypty i style do danej strony. W tym celu tworzymy w katalogu z naszym rozszerzeniem folder admin/elements/ i umieszczamy w nim plik asset.php:
<?php
defined('JPATH_BASE') or die;
jimport('joomla.form.formfield');
class JFormFieldAsset extends JFormField {
protected $type = 'Asset';
protected function getInput() {
$doc = JFactory::getDocument();
if($this->element['extension'] == 'js') {
return $doc->addScript(JURI::root().$this->element['path']);
} else {
return $doc->addStyleSheet(JURI::root().$this->element['path']);
}
}
}
?>
Powyższa klasa definiuje pole formularza, które będzie miało następującą budowę:
<field type="asset" extension="ROZSZERZENIE" path="ŚCIEŻKA" />
Gdzie ROZSZERZENIE przyjmuje wartość js lub css natomiast ŚCIEŻKA to adres żądanego pliku. Na przykład: "templates/NAZWA_SZABLONU/admin/js/skrypt.js".
I już prawie jesteśmy u celu - pozostaje nam jeszcze poinformować skrypt gdzie będą znajdowały się dodatkowe klasy pól formularza - w tym celu w elemencie fieldset, który będzie zawierał nasz własny rodzaj pola formularza dodajemy atrybut addfieldpath (w Joomla! 1.5 był to atrybut addPath) ze ścieżką do naszego katalogu z dodatkowymi klasami, na przykład: "/templates/NAZWA_SZABLONU/admin/elements".
Po tym zabiegu możemy już śmiało tworzyć własne style CSS i skrypty dla formularzy w panelu administracyjnym znacząco rozszerzające ich zwyczajne możliwości.
12
lipca
2010
Szablony dla Joomla! mają tą cechę, że z reguły są dość rozbudowane, zwłaszcza jeżeli chodzi o kod CSS: tworząc szablon trzeba ostylować standardowe podstrony, dodatkowe moduły, komponenty. Im bardziej chcemy zadbać o detale tym bardziej rośnie ilość kodu. Kodu w którym pewne rzeczy się powielają. Dlatego od pewnego czasu jestem zwolennikiem wykorzystywania do tworzenia szablonów prekompilatorów CSS. Jednym z takich narzędzi jest LESS. Pokażę jak bezboleśnie zaimplementować LESS w swoim szablonie oraz jak wykorzystać jego możliwości.
LESS pierwotnie został stworzony w języku Ruby, jednak nie stanowi to żadnego problemu gdyż istnieją jego implementacje w innych językach m.in. w PHP (lessphp) i JavaScript (LESS.js). Wersja JavaScript jest mniej wymagająca pod względem dołączenia do szablonu, natomiast jeżeli wyłączymy JavaScript w przeglądarce to niestety mamy problem. Dlatego bezpieczniej skorzystać z wersji LESS, która działa po stronie serwera.
Tutaj mała uwaga - osobiście polecam korzystanie z LESS tylko na etapie tworzenia szablonu i jego ewentualnych modyfikacji. Dlaczego ? Nie ma sensu by LESS przetwarzał nasze pliki *.less przy każdym wywołaniu strony lub co określony czas (przy wykorzystaniu cache). Dlatego po zakończeniu prac najlepiej zamienić prezentowany kod na odwołania do wygenerowanych z użyciem LESS plików *.css.
LESS rozszerza składnię CSS-a o wiele nowych możliwości. Zacznijmy od mojej ulubionej czyli zmiennych. Większość layoutów ma to do siebie, że bazuje na kilku kolorach. W LESS zmienne tworzymy korzystając z zapisu:
@nazwa_zmiennej: WARTOŚĆ;
Przykład:
@kolor1: #000;
@kolor2: #fff;
#nawigacja{
color: @kolor1;
background: @kolor2;
}
.code{
color: @kolor2;
background: @kolor1;
}
W powyższej sytuacji gdybyśmy chcieli odwrócić kolory w elemencie #nawigacja oraz elementach z klasą code wystarczy zmienić wartości zmiennych. Niesamowicie przydatne gdy mamy ogromny plik CSS z mnóstwem powtarzających się kolorów.
Druga ważna funkcjonalność - zagnieżdżanie elementów. Zamiast pisać:
#nawigacja {}
#nawigacja a {}
#nawigacja a:hover {}
Zapisujemy:
#nawigacja {
/* tu style dla elementu #nawigacja */
color: #000;
margin: 10px;
a {
/* tu style dla linków w #nawigacja */
color:#aaa;
display:block;
/* a tu style dla pseudoklas */
:hover {
text-decoration:none;
}
}
}
Taki zapis jest o wiele czytelniejszy bo często niektórzy próbują kod formatować następująco:
#nawigacja {}
#nawigacja a {}
#nawigacja a:hover {}
By podkreślić, że selektory tyczą się elementów zagnieżdżonych w innym elemencie.
Inna warta wspomniena rzecz to możliwość ponownego wykorzystana raz już stworzonego kodu:
.test{
color:#000;
background:#fff;
}
Teraz możemy osadzić właściwości color i background w innym elemencie pisząc po prostu:
.test2{
.test;
}
Możemy też się odwoływać bezpośrednio do elementów zagnieżdżonych czy nawet do konkretnych wartości właściwości lub zmiennych, a nawet tworzyć klasy z parametrami.
Możliwości LESS są naprawdę duże - zainteresowanych odsyłam do dokumentacji lessphp
My tymczasem wróćmy do meritum tego posta czyli użycia LESS w Joomla!.
Aby użyć LESS polecam najpierw w katalogu zawierającym style CSS szablonu utworzyć katalog less/, który będzie zawierał pliki źródłowe *.less do przetworzenia. W katalogu ze stylami umieszamy plik lessphp.inc.php pobrany ze strony projektu lessphp.
W pliku index.php naszego szablonu dołączamy plik lessphp.inc.php:
require_once('css/lessc.inc.php');
oraz definiujemy następującą funkcję:
function generate_less($file, $template_name = 'beez5'){
try {
lessc::ccompile(JPATH_THEMES.DS.$template_name.DS.'css'.DS.'less'.DS.$file.'.less', JPATH_THEMES.DS.$template_name.DS.'css'.DS.$file.'.css');
echo '<link rel="stylesheet" type="text/css" href="templates/'.$template_name.'/css/'.$file.'.css" />';
} catch (exception $e) {
exit('LESS ERROR:'.$e->getMessage()."\nFILE:".$file.'.less');
}
}
Oczywiście musimy pamiętać też o zapewnieniu stosownych uprawnień do zapisu w katalogu css/ i zmienieniu w parametrach funkcji nazwy szablonu na nazwę naszego szablonu.
Dzięki temu możemy odwoływać się do plików CSS poprzez zapis:
<?php generate_less('template'); ?>
Powyższy zapis wygeneruje z pliku css/less/template.less plik css/template.css i umieści odnośnik do niego w miejscu wywołania.
Jedną z bolączek LESS jest dosyć małe wsparcie dla składni w edytorach. Osobiście korzystam z edytora Coda i tego rozwiązania.
LESS.js ma jeszcze tą wadę, że wszystkie generowane przez niego style są osadzane bezpośrednio w kodzie strony - stąd jeżeli mamy w plikach *.less odnośniki do grafik tła to musimy je definiować względem głównego dokumentu strony a nie położenia pliku *.less (oczywiście w wypadku naszych plików *.less odniesienia do plików tła tworzymy tak jakby się znajdowały one w katalogu css/ a nie css/less/).