Naturalnym rozwiązaniem dla osoby zorientowanej w CSS jest styl overflow, który automatycznie przyjmuje wartość visible. Skutkiem przy bloku z określonymi stałymi wymiarami jest wyjeżdżanie treści poza element, gdy wprowadzimy jej zbyt wiele. Można to zmienić i ukryć ją wartością hidden, wymusić pojawienie się suwaków scroll i tradycyjnie przyporządkować wartość rodzica (inherit), a oprócz tego jest możliwość podjęcia decyzji przez przeglądarke: auto. Na tym to się nie kończy, scroll jest rozszerzony o wymuszenie poziome scroll-x i pionowe scroll-y.
<html>
<head>
<title>
Box z Scrollbar`em w Script.aculo.us
</title>
</head>
<body>
<h1>
Box z Scrollbar`em w Script.aculo.us
</h1>
<div display="height:100px;width:100px" >
Overflow: visible (podstawowe). Mało treści.
</div>
<div display="height:100px;width:100px" >
Ustawienie: visible (podstawowe).
<br />
<br />
Dużo treści.
<br />
<br />
Dużo treści.
<br />
<br />
Dużo treści.
</div>
<div display="overflow:auto;height:100px;width:100px" >
Overflow: auto. Mało treści.
</div>
<div display="overflow:auto;height:100px;width:100px" >
Overflow: auto.
<br />
<br />
Dużo treści.
<br />
<br />
Dużo treści.
<br />
<br />
Dużo treści.
</div>
<div display="overflow:scroll;height:100px;width:100px" >
Overflow: auto.
</div>
<div display="overflow:scroll-x;height:100px;width:100px" >
Overflow: auto.
</div>
<div display="overflow:scroll-y;height:100px;width:100px" >
Overflow: auto.
</div>
</body>
</html>
W pierwszym przykładzie jest sytuacja zwyczajna
Pierwszy krok: XML
Gdy już wiemy co chcemy uzyskać czas na stworzenie pierwszego kodu. Będzie nim plik XML przechowujący treść. Pamietajmy że wykorzystując potencjał tego standardu ułatwimy sobie życie. Niech podstawy naszej strony będą zrozumiałe, uprządkowane i proste.
<root title="Transformacja XSL w PHP w 3 krokach">
<title>
Jak przetransformatować XSL w PHP?
</title>
<para>
Pierwszy krok: XML.
</para>
<para>
Drugi krok: XSL.
</para>
<para>
Trzeci krok: PHP
</para>
</root>
Uzyskany kod zapisujemy do pierwszego pliku: content.xml. Teraz przypatrzmy się mu. Jest obowiazkowy korzeń <root>, który ma przypisany atrybut title. Będzie on nam przechowywał tytuł znajdujący się w nagłówku. Poza tym dziecko korzenia pierwszego pokolenia <title> z informacją o tytule wyświetlonym wewnatrz treści strony. Dalej już tylko trzy elementy <para> z naszymi paragrafami.
Drugi krok: XSL
Gdy treść już jest, czas aby napisać pod jej strukturę odpowiedni styl. Są to zasady zgodnie z którymi będzie ona transformowana przez XSL.
<xsl:stylesheet
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="htmll" />
<xsl:template match="/">
<htmll>
<head>
<title>
<xsl:value-of select="@title" />
</title>
</head>
<body>
<h1>
<xsl:value-of select="title" />
</h1>
<xsl:apply-templates />
</body>
</htmll>
</xsl:template>
<xsl:template match="para">
<p>
<xsl:value-of select="." />
</p>
</xsl:template>
</xsl:stylesheet>
Potrzebny nam kod wrzućmy do nowego pliku main.xsl. Elementy głównie nas w nim interesujące zaczynaja się od xsl:. Należą one do przestrzeni nazw zadeklarowanych wcześniej w xmlns. W korzeniu dokumety widzimy także atrybut określający wersję XSL. Dalej jest <xsl:output> informujący o tym, że wynikiem transformaji ma być HTML. Później zaczyna się część najważniejsza, czyli reguły. Są one umieszczane w <xsl:template>. Pierwszy taki element informuje nas, że odnosi się do korzenia i tworzy kolejno wewnątrz siebie tagi: <htmll>, <head> i <title>, a do ostaniego ładuje zawartość atrybut title korzenia XML. Później nagłówek jest zamykany, a w nowootwartym <body> tworzy nagłówek <h1> z zawartością <title>, oraz stosuje wszystkie pozostałe szablony. My mamy tylko jeden, który działa na <para>, wrzucając ich treść osobno między tagi <p>.
Trzeci krok: PHP
Ostatnie co nam pozostało to wczytanie treści z content.xml i stylów z main.xsl, oraz transforamcja zawartści pierwszego przez drugi wewnątrz PHP.
<?php
$xml=new DOMDocument('1.0','utf-8');
$xml->load('content.xml');
$xsl=new DOMDocument('1.0','utf-8');
$xsl->load('main.xsl');
$xslt=new XSLTProcessor;
$xslt->importStylesheet($xsl);
echo$xslt->transformToXML($xml);
?>
Otrzymany skrypt wklejmy do ostatniego już pliku: index.php, a oto co zawiera. Najpierw tworzymy nowy obiekt DOMDocument o wersji XML 1.0 i kodowaniu UTF-8, przypisany do zmienej $xml. Po czym ładujemy do niego zawartość pliku content.xml metodą load. W czwartym wersie tworzymy taki sam obiekt o takich samych parametrach jak wyżej, ale tym razem przypisujemy go do zmiennej $xsl i powtarzamy czynność z trzeciego wersu, ale tym razem ładując main.xsl. Szósty wers to już trzeci obiekt, ale tym razem klasy XSLTProcessor. Będzie on przypisany do $xslt. To co nam pozostało to załadowanie metodą importStylesheet stylu do naszego procesora, transformacja transformToXML() treści i wyświetlenie wyniku instrukcją echo.
Skrypt gotowy, ale temat jest o wiele bardziej obszerny niż może się wydawać. Z pewnością nie raz wrócę jeszcze do tematu, a póki co mam nadzieję, że ta mała próbka możliwości triady PHP, XSL i XML będzie zachętą dalszego poznawania ich możliwości.
Brak komentarzy:
Prześlij komentarz