/ Indeks dokumentacji / Rozbudowa systemu / Rejestrowanie nowych klas w systemie / Nowe elementy systemu / Dołączanie styli CSS do elementów

Dołączanie styli CSS do elementów

W przypadku niektórych elementów strony konieczne jest dołączenie do nich styli lub kodu Javascript, który znajduje się w zewnętrznym pliku. Tagi dołączające te pliki powinny znajdować w nagłówku HTMLa. Oczywiście powinny one się tam znaleźć tylko i wyłącznie wtedy, gdy na stronie obecny jest element/tag który ich potrzebuje.

Implementacja interfejsu IRegisterHeadTags

Aby dodać dowolne pliki do nagłowka strony (tag <head>) należy do naszej klasy dodać implementację interfejsu IRegisterHeadTags.

Załóżmy że skorzystamy z naszej przykładowej klasy HelloWorldItem, która odpowiedzialna jest za wyświetlanie na ekranie napisu „Hello World!!!”. Chcemy skorzystać z pliku MyStyles.css w którym umieściliśmy rozmiar czcionki oraz kolor:

DIV.HelloWorldColor {
color: red;
font-size: 14px;
}

Załóżmy, że gdy klikniemy w napis HelloWorld powinien pojawić się komunikat o treści Hello!!!. Dlatego dodamy też następujący kod Javascript, który umieścimy w pliku HelloWorld.js. Oba pliki zarówno plik ze stylami jak i kod javascript będzie znajodwał się w katalogu /cms/classes/Domain/Extensions/HelloWorld.

HelloWorld.js

function sayHelloWorld() {
alert('Hello!!!');
}

Naszą klasę zmodyfikowaliśmy I wygląda ona teraz tak.

class HelloWorldItem extends StaticItem {
   public function render() {
   return '<div class=”HelloWorldColor” onClick="sayHelloWorld()">'.
   'Hello World !!!</div>';
   }
}

Pozostało nam jedynie dodać plik styli MyStyles.css. Robimy to w następujący sposób. Klasę HelloWorldItem rozszerzamy o interfejs IRegisterHeadTags co wymusza wypełnienie metody renderHeadTags(). Musi ona zwrócić kolekcję (array) tagów XhtmlElement. XhtmlElement to nic innego jak klasa opisująca tag htmla. Po klasie XhtmlElement dziedziczą takie klasy jak:

XhtmlScriptTag – wyświetla tag <script type=”text/javascript” src=”JAKIS_URL”></script>
XhtmlCssLinkTag – wyświetla tag <link rel="stylesheet" href="JAKIŚ_LINK" type="text/css"/>
etc.

Po implementacji interfejsu IRegisterHeadTags klasa wygląda tak:

class HelloWorldItem extends StaticItem implements IRegisterHeadTags {
   public function render() {
   return '<div class=”HelloWorldColor” onClick="sayHelloWorld()">'.
   'Hello World !!!</div>';
   }
   ///////////////////////////
   // IRegisterHeadTags
   public function renderHeadTags() {

   return array(
   // Link do css, CORE_PLUGIN_URL prowadzi do standardowego
             // katalogu z rozszerzeniami systemu: /cms/classes/Domain/Extensions
   new XhtmlCssLinkTag(CORE_PLUGIN_URL.'HelloWorld/MyStyles.css'),
   // JavaScript
   new XhtmlScriptTag(CORE_PLUGIN_URL.'HelloWorld/HelloWorld.js'),
   }

}

Tak przygotowana klasa spowoduje, że gdy dodamy element <cms:HelloWorld id="" /> do szablonu do w nagłówku strony pojawią się następujące tagi:

Plusem takie rozwiązania jest że system będzie sprawdzał czy np. tag <cms:HelloWorld id="" /> nie został dany kilka razy w szablonie. Jeżeli tak się zdarzy to zarówno style jak i kod javascript nie zostaną powielone. System będzie także kontrolował czy czasami nie następuje powielenie css'ów. Może tak się zdarzyć gdy dwa różne elementy korzystają z tego samego pliku css lub js.

Zobacz więcej...

Metryka dokumentu
Tytuł:	Dołączanie styli CSS do elementów
Opis:	Podpinanie styli należących do elementów strony.
Źródło:	+CMS Content Management System
Prawa autorskie:	+CMS Content Management System
Autor:	root	Zmodyfikowany przez:	root
Data utworzenia:	2010-02-11 23:08:15	Data modyfikacji:	2010-02-11 23:25:01
Data publikacji:	2010-02-11 23:25:01

Dołączanie styli CSS do elementów

Implementacja interfejsu IRegisterHeadTags

Metryka dokumentu