Dodawanie elementów HTML

Wiemy już, jak się dodaje przyciski, więc pora na dodanie kilku innych elementów.

Dodawanie elementów języka HTML do okna

Dodatkowo do wszystkich elementów XUL, które są dostępne, możemy dodać elementy języka HTML, bezpośrednio do wewnątrz pliku XUL. Aktualnie możemy zastosować dowolny element języka HTML w pliku XUL, co oznacza, że aplety Javy lub tabele mogą zostać umieszczone w naszym oknie. Powinniśmy unikać stosowania elementów HTML w plikach XUL, jeśli jest to tylko możliwe. Jednakże w tym artykule został opisany sposób ich stosowania. Zapamiętaj, że XML uwzględnia wielkość liter, więc musimy wprowadzać znaczniki oraz atrybuty z małej litery.

Przestrzeń nazw XHTML

Chcąc zastosować elementy języka HTML w pliku XUL, musimy zadeklarować, że to robimy, więc do tego celu stosujemy przestrzeń nazw XHTML. W ten sposób przeglądarka Mozilli będzie mogła odróżnić znaczniki HTML od znaczników XUL. Poniższy atrybut powinien zostać dodany do elementu window w pliku XUL lub do znajdującego się najdalej na zewnątrz elementu HTML.

xmlns:html="https://www.w3.org/1999/xhtml"

Jest to deklaracja języka HTML i jest bardzo podobna do tej, jaką zastosujemy w deklaracji XUL. Musimy ją wpisać dokładnie tak, jak pokazano poniżej, bo inaczej nie będzie ona działała poprawnie. Zwróć uwagę, że przeglądarka Mozilli nie pobierze tego adresu URL, lecz uzna go jako początek języka HTML.

Tu mamy przykład jaki może być dodany do okna Znajdź pliki:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
   id="findfile-window"
   title="Znajdź pliki"
   orient="horizontal"
   xmlns:html="https://www.w3.org/1999/xhtml"
   xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Następnie możemy stosować znaczniki HTML trzymając się następujących reguł:

Musisz dodać prefiks html: na początku każdego znacznika, zakładając, że zadeklarowałeś przestrzeń nazw HTML, jak zostało to pokazane powyżej.
Znaczniki muszą być wprowadzone z małej litery .
"Cudzysłowy" muszą być umieszczone wraz ze wszystkimi wartościami atrybutów.
XML wymaga zamykającego znaku slash (/) na końcu znaczników, które nie posiadają żadnej zawartości. Wytłumaczone jest to w poniższym przykładzie.

Zastosowanie elementów HTML

Możemy stosować jakikolwiek znacznik HTML, lecz niektóre znaczniki, takie jak head i body, nie są w rzeczywistości potrzebne. Przykłady zastosowania elementów HTML są pokazane poniżej:

<html:img src="banner.jpg"/>

<html:input type="checkbox" value="true"/>

<html:table>
  <html:tr>
    <html:td>
      Prosta tabela
    </html:td>
  </html:tr>
</html:table>

W tym przykładzie utworzony zostanie obrazek z pliku banner.jpg, pole wyboru oraz pojedyncza komórka tabeli. Powinniśmy zawsze stosować własności XUL-a, jeśli są one dostępne i najprawdopodobniej nie powinniśmy stosować tabelek do układu graficznego w XUL (ponieważ są elementy XUL do tworzenia układu graficznego). Zwróć uwagę, że prefiks html: został dodany z przodu każdego znacznika. Dzięki temu przeglądarka Mozilli wie, że są to znaczniki HTML-a, a nie XUL-a. Jeśli opuścimy część html:, przeglądarka pomyśli, że element był elementem XUL i nie będą wyświetlone, ponieważ elementy img, input, table nie są poprawnymi znacznikami XUL.

W XUL możesz dodać etykiety za pomocą elementu description lub label. Powinniśmy stosować te elementy jak najczęściej. Możemy również dodawać etykiety do kontrolek poprzez zastosowanie elementu HTML - label lub możemy po prostu wstawiać tekst do wewnątrz innego bloku elementów HTML (takich jak p lub div) w sposób pokazany poniżej:

Przykład 1 : Źródła Podgląd

<html:p>
  Szukaj dla: 
  <html:input id="find-text"/>
  <button id="okbutton" label="OK"/>
</html:p>

Ten kod spowoduje, że będzie wyświetlony tekst Szukaj dla:, następnie element input i przycisk OK. Zwróć uwagę, że przycisk XUL może się pojawić wewnątrz elementu HTML, jak jest to tu pokazane. Tekst będzie tylko wyświetlony, jeśli umieścimy go wewnątrz znacznika, który normalnie pozwala na wyświetlenie tekstu (takiego znacznika jak p). Tekst na zewnątrz nie będzie wyświetlony, chyba że element XUL-a, w którym się on znajduje, pozwala na to (na przykład element description). Przykład poniżej pomoże w zrozumieniu tego:

Przykłady elementów HTML

Tutaj mamy kilka przykładów dodawania elementów HTML do okien. W każdym przypadku okno i inne zwykłe informacje zostaną pominięte dla uproszczenia przykładu.

Okno dialogowe z polem wyboru

Przykład 2 : Źródła Podgląd

<html:p>
  Zaznacz poniższe pole, aby zapamiętać tą decyzje.
  <html:p>
    <html:input id="rtd" type="checkbox"/>
    <html:label for="rtd">Zapamiętaj tą decyzję</html:label>
  </html:p>
</html:p>

W tym przypadku znacznik p został zastosowany do umieszczenia tekstu, a inne zostały zastosowane do podzielenia tekstu na wiele linii.

Tekst poza blokami HTML

Przykład 3 : Źródła Podgląd

<html:div>
    Chciałbyś zapisać następujące dokumenty?
    <html:hr/>
</html:div>   
Kosztorys 1
Co robiłem ostatniego lata
<button id="yes" label="Tak"/>
<button id="no" label="Nie"/>

Jak widać na tym obrazku, tekst wewnątrz znacznika div został wyświetlony, ale pozostały tekst ( Kosztorys 1 i Co robiłem ostatniego lata ) już nie. Jest tak, ponieważ nie ma otaczającego go elementu HTML-a lub elementu XUL zdolnego do wyświetlenia tekstu. Mając taki tekst, powinniśmy wstawić go wewnątrz znacznika div lub otoczyć tekst znacznikiem description.

Niepoprawne zastosowanie elementów HTML

<html:po>Przypadek 1</html:po>
<div>Przypadek 2</div>
<html:description value="Przypadek 3"/>

Wszystkie powyższe trzy przypadki nie zostaną wyświetlone, każdy z innego powodu:

Przypadek 1: po nie jest poprawnym znacznikiem HTML-a, a przeglądarka Mozilli nie wie, jak odczytać ten znacznik.
Przypadek 2: div jest poprawny, ale tylko w HTML-u. Aby działał i tu, musimy dodać kwalifikator html:.
Przypadek 3: Element description jest poprawny tylko w XUL-u, a nie w HTML-u. Nie powinniśmy mieć kwalifikatora html: przed tym elementem.

W następnym artykule zobaczymy, jak dodać odstęp pomiędzy elementami.

« Poprzedni Następny »