Ptaszor i jego blog! Lol…

Mark Finkle na swoim blogu opublikował wersję beta prostego walidatora XUL.

Chcąc go użyć wystarczy kod języka XUL wkleić w pole formularza i sprawdzić jego poprawność.

Aktualnie walidator sprawdza poprawność i semantyczność kodu XUL. Kod jest sprawdzany na podstawie kilku zasad jakie zostały założone przed jego zaprojektowaniem. Walidator jest ciągle w fazie testów i wszelkie uwagi są mile widziane przez autora. Zapowiada on także jego rozbudowę w formie dodania kolejnych zasad.

Walidator XUL – strona testowa

Kod walidatora jest oparty na pliku JavaScript, który jest jego silnikiem xulcheck.js oraz na pliku zasad xulschema.json.

Dawno nie robiłem wpisów, czas co nieco nadrobić . Obiecałem zbiór w pdfie, ale znów mi nie wyszło, go dodać w tej części o języku XUL. Ok, zróbmy teraz menu, ale nie takie zwyczajne bo menu, które pozwoli nam przewijać zamieszczone w nim przyciski .

arrowscrollbox

Element ten tworzy pudełko, które zawiera strzałki przewijania na swoich końcach, aby można było przewijać zawartość utworzonego pudełka.

Jeśli w menu zabraknie dostępnej wolnej przestrzeni w oknie menu to automatycznie pojawią się na obu jego końcach strzałeczki. Jeśli najedziesz kursorem myszki na którąkolwiek strzałkę, to menu zostanie przewinięte w dół albo w górę. Jeśli natomiast jest więcej dostępnego miejsca, a menu jest się mieści w oknie to strzałki nie zostaną wyświetlone. Pojawienie się strzałek zależy od aktualnie zastosowanego motywu.

Powyższe zachowanie jest wywoływane automatycznie. Nie musimy nic więcej robić, aby pojawił się on w przewijanym menu. Znajdzie on zastosowanie do menu w pasku narzędzi, w wyskakujących okienkach lub listach menu. Zaimplementowany zostanie poprzez element arrowscrollbox.

Przykład menu:

Poniższy przykład pokazuje jak stworzyć przewijaną listę przycisków.

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="przyklad-menu" title="Jak zrobić przewijane menu"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<arrowscrollbox orient="vertical" flex="1">
  <button label="Przycisk 1"/>
  <button label="Przycisk 2"/>
  <button label="Przycisk 3"/>
  <button label="Przycisk 4"/>
  <button label="Przycisk 5"/>
  <button label="Przycisk 6"/>
  <button label="Przycisk 7"/>
  <button label="Przycisk 8"/>
  <button label="Przycisk 9"/>
  <button label="Przycisk 10"/>
  <button label="Przycisk 11"/>
  <button label="Przycisk 12"/>
</arrowscrollbox>

</window>

Zobacz przykład.

Prawda, że łatwe?

Więcej informacji:

• Kurs XUL
• Dokumentacja XUL

Jak obiecałem w poprzedniej części, w kolejnej części także napisze co nieco o skryptach JS w XUL.

Element script:

Możemy wykorzystać element script, aby dołączyć skrypty JS do plików XUL. Można także umieścić kod skryptu bezpośrednio w pliku XUL poprzez umieszczenie go pomiędzy otwartym i zamkniętym znacznikiem script. Korzystanie z plików zewnętrznych, przyspiesza czas ładowanie okna. Atrybut src jest stosowany celu powiązania zewnętrznego pliku JS ze skryptem. Aby dodać do naszego pliku XUL plik zewnętrzny należy umieścić poniższy kod przed znacznikiem window.

<script src="przykladowy_plik.js"/>

Oczywiście możemy zdefiniować więcej plików skryptów w jednym pliku XUL:

<script src="przykladowy_plik.js"/>
<script src="chrome://nazwa/zawartosc/nazwa.js"/>
<script src="http://www.przykladowy_adres.com/js/przykladowy_plik.js"/>

lub:

<script>
   function foo(){
     // kod
    }
</script>

Zdarzenie oncommand

Zazwyczaj prosty kod odnosi się do funkcji zdefiniowanej w oddzielnym skrypcie. Poniżej przykład odpowiedzi na wciśnięcie przycisku (kod obsługujący zdarzenie został zawarty w pliku XUL):

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="przyklad"
			title="Przycisk 2"
			xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="Naciśnij" oncommand="alert('Cześć, po raz drugi!');"/>;
</window>

Zobacz przykład

Kolejnym małym skrypcikiem będzie skrypt funkcji, która zwróci nam nazwę użytego elementu w jakimś tam fragmencie naszego okna, a wszystko będzie możliwe po kliknięciu kursorem w dany element:

 <vbox oncommand="alert(event.target.tagName);">
  <button label="OK"/>
  <checkbox label="Pole wyboru"/>
  <radio label="Pole opcji"/>
 </vbox>

Przykład

Hmm dalej o skryptach, co nieco napisze w kolejnej części. Miałem dołączyć plik w PDF-ie lecz zrobię to kolejnym razem.

Zobacz więcej:

• Kurs XUL
• XUL

Dawno nie pisałem nic na temat XUL-a, lecz postaram się to nadrobić. Między czasie tłumaczyłem trochę dokumentację XUL, znajdującą się na MDC w wersji PL. Przy okazji tego tłumaczenia znalazłem kilka fajnych elementów, które pokaże w miarę tego i następnych postów o XUL-u. Od następnej wersji pomyślałem, że warto dodać wszystkie posty o XUL z mojego bloga w formacie *.pdf. Taki mały zbiór , który bym rozszerzał co dwa lub trzy nowe posty jakie napisze nt. języka XUL. Ok, zajmijmy się pracą ze
skryptami w języku XUL.

W jaki sposób możemy stworzyć obsługę zdarzeń, funkcji? Odpowiedź: za pomocą JavaScriptu (a ściślej z DOM). Sposób działania DOM polega na tworzeniu drzewa elementów. Więcej o samym DOM znajdziecie na MDC.

Pierwszym naszym przykładem będzie przycisk z kodem JavaScriptu.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="test-przycisku"
			title='Zastosowanie JS'
			xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button id='name' label='Przycisk skryptu' /> 
</window>

Wyświetli:

Zobacz plik

Powyższy kod jest tylko ‘nieżywym’ przyciskiem, aby go ‘ożywić’ dodajmy do elementu button:

<button id='name' label='Przycisk skryptu' onclick='alert("Cześć");' /> 

Zobacz plik

W powyższym przykładzie, zwrócę tylko uwagę na zamieszczaniu w zdarzeniu onclick, tekstu w cudzysłowach.

Ok, tyle jeśli chodzi o JS w XUL-u na dziś, lecz to jeszcze nie koniec bo chciałem Wam bardzo fajny element znaleziony podczas tłumaczenia dokumentacji XUL. W kolejnym poście postaram się dodać i omówić element script. Teraz o…

Element colorpicker:

Paleta kolorów, z której użytkownik może wybrać jedną komórkę siatki z kolorem poprzez kliknięcie w nią. Spójrzmy na prosty kod elementu:

<colorpicker type="button"/>

Przykład tego elementu wygląda natomist tak:

Tym kolorowym akcentem zapraszam na kolejną porcję XUL-a. Gwarantuje, że będzie o wiele wiele dłuższa.

BTW: Ma ktoś jakiś fajny pomysł na aplikację, którą można by było wykonać w XUL-u?

Zobacz także:

• Dokumentacja XUL
• Kurs XUL

Wszystkich zainteresowanych językiem XUL, chciałbym poinformować, że niebawem (niestety nie jestem w stanie określić daty ukończenia) powstanie polskojęzyczna wersja dokumentacji XUL. Treść dokumentacji najpierw jest przenoszona na wersje polką MDC, a następnie pomału tłumaczona. Wydaje mi się, że zajmie to sporu czasu – bo i spora dokumentacja do przetłumaczenia .

Warto śledzić zmiany oraz czytać już te fragmenty, które są już przetłumaczone. Czytając poprawiajcie znalezione błędy, literówki czy orty. W ten sposób przyczynicie się, aby powstała pierwsza polskojęzyczna wersja dokumentacji XUL (bo treści o XUL w Internecie jest bardzo mało, a po polsku nie ma prawie nic).

W Polsce XUL – nie jest dość popularnym i znanym językiem . Efekty widać po wpisaniu w Google słowa kluczowego xul. Więc warto, przetłumaczyć w pełni i tą dokumentację.

Zobacz także:

1. Dokumentacja XUL – polska wersja strony nt. dokumentacji XUL (aktualnie tłumaczona).
2. Dokumentacja XUL – wersja angielska.

Siła języka XUL tkwi w jego sposobie, w jaki pozyskuje on dane użytkowników. Użytkownik podczas korzystanie z aplikacji XUL, nie zobaczy różnicy pomiędzy nim a jakimiś innymi aplikacjami napisanym w znanych dotąd językach. Dodatkowo, np aplikacje napisane, w Javie potrzebują własne środowisko – które zainstalujemy po jego pobraniu. Zajmuje to niestety niezbędny dla nas czas! Java też wymaga “mocniejszego” komputera, co nie znaczy, że jest złym językiem – bo wg mnie jest bardzo dobrym, lecz w tym miejscu, jeśli chodzi o aplikacje internetowe jej konkurentem stał się XUL.

Ok, napiszmy coś nowego o XUL. W tym poście chciałbym zająć się elementem <tabbox>, który służy do tworzenia pudełka kart. Najpierw spójrzmy na poniższy kod:

<tabbox id="tablist">
  <tabs>
    <!-- elementy tab -->
  </tabs>
  <tabpanels>
    <!-- elementy tabpanel -->
  </tabpanels>
</tabbox>

gdzie:

1. <tabbox> – pudełko zewnętrzne, które zawiera karty.
2. <tabs> – pudełko wewnętrzne, które stanowi pojedynczą kartę.
3. <tab> – określona karta.
4. <tabpanels> – kontener dla strony.
5. <tabpanel> – za pomocą tego elementu umieszczamy zawartość strony karty.

Z powyższego napisanego kodu możemy wywnioskować, że tabbox posiada dwa elementy potomne; tabs oraz tabpanels. Analogicznie wnioski możemy wyciągnąć w stosunku do elementów tab, które umieszczamy wewnątrz elementu tabs. W przypadku tabpanels jest podobnie. Przykład:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="tabbox"
               title="Element tabbox"
               xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<tabbox>
  <tabs>
    <tab label="Karta 1"/>
    <tab label="Karta 2"/>
  </tabs>
  <tabpanels>
    <tabpanel id="przycisk1">
      <button label="Przycisk 1"/>
    </tabpanel>
    <tabpanel id="przycisk2">
      <button label="Przycisk 2"/>
    </tabpanel>
  </tabpanels>
</tabbox>
</window>

tabbox.xul –
powinniśmy zobaczyć podobny efekt powyższego kodu:

Zobacz także:

• Kurs XUL
• Pozostałe wpisy na moim blogu

W pierwszej części o kontrolkach listy w języku XUL, wspominałem, że nie opisałem, jednego przykładu, oto i on:

Wiersz nagłówka

Możemy również na zastosować elementy specjalnego wiersza nagłówka w utworzonym przeze mnie przykładu. Wiersz nagłówka jest wyświetlany w inny sposób i odróżnia się on od pozostałych elementów.

Do jego powstania będziemy potrzebować:

1. <listhead> – stosuje się w wierszach nagłówka.
2. <listheader> – stosujemy dla każdej komórki wiersza nagłówka, a atrybut label do ustawienia etykiety dla wszystkich komórek nagłówka.

<listbox>
  <listhead>
    <listheader label="Nazwa"/>
    <listheader label="Produkt"/>
  </listhead>

  <listcols>
    <listcol/>
    <listcol flex="1"/>
  </listcols>
  <listitem>
    <listcell label="Element"/>
    <listcell label="Element"/>
  </listitem>
  <listitem>
    <listcell label="Element"/>
    <listcell label="Element"/>
  </listitem>
  <listitem>
    <listcell label="Element"/>
    <listcell label="Element"/>
  </listitem>
</listbox>

Przykład XUL

Ok, to tyle jeśli chodzi o element listbox.

Listy rozwijane

XUL posiada element <menulist>, który możemy wykorzystać do tworzenia menu z listą rozwijaną (HTML-u służy do tego select). Do zdefiniowania listy rozwijanej potrzebne są trzy elementy.

1. menulist – który tworzy pole tekstowe z przyciskiem przy nim.
2. menupopup – tworzy okienko pojawiające się po kliknięciu przycisku.
3. menuitem – tworzy poszczególne pozycje.

<menulist label="Elementy">
  <menupopup>
    <menuitem label="Element 1"/>
    <menuitem label="Element 2"/>
    <menuitem label="Element 3" selected="true"/>
    <menuitem label="Element 4"/>
  </menupopup>
</menulist>

Przykład XUL

W tym przypadku lista rozwijana składa się z czterech pozycji do wyboru, jeden dla każdego elementu menuitem. Aby wyświetlić pozycje listy, kliknij w przycisk strzałki na liście. Kiedy jedna pozycja jest zaznaczona, to pojawiająca się pozycja jest wybrana z listy. Atrybut selected stosuje się do wskazania wartości, która jest zaznaczona domyślnie.

Aby utworzyć edytowalną listę rozwijaną, dodaj atrybut editable w sposób pokazany poniżej:

<menulist editable="true">
  <menupopup>
    <menuitem label="Element 1"/>
    <menuitem label="Element 2"/>
    <menuitem label="Element 3" selected="true"/>
    <menuitem label="Element 4"/>
  </menupopup>
</menulist>

Przykład XUL

Zobacz także:

1. Kurs XUL
2. Dokumentacja XUL (dokumentacja XUL jest aktualnie tworzona)

Trzecia część kursu języka XUL, w której chciałbym przedstawić Wam kolejne elementy, które możemy dodać do okna dialogowego.

Elementy tekstowe:

Pierwszym nowym elementem będzie etykieta (label), którą stosujemy do opisu poszczególnych elementów naszego okna. Etykietę możemy podzielić na dwa różne elementy:

• <label> – stosujemy gdy chcemy zawrzeć opis w jednej linii. Wyświetlany tekst nie jest zawijany w oknie.
• <description> – stosujemy gdy chcemy zawrzeć dłuższy opis, pozwala ona na zawijanie tekstu do nowej linii.

Element <label> (przykład: zobacz, źródło):

<label value="Pierwszy tekst w oknie"/>

gdzie: value – w tym atrybucie określamy tekst do wyświetlenia.

Element <description> (przykład: zobacz, źródło):

<description>
Tekst który zostanie wyświetlony w oknie przykładu.
</description>

Czy widzicie różnice pomiędzy label, a description? Zrzuty wszystko wyjaśniają.

Obrazki:

Aby wstawić obrazek w XUL-u, postępujemy podobnie jak w języku HTML, tylko z tą różnicą, że do zdefiniowania obrazka użyjemy elementu image, zamiast img.

<image src="images/przyklad.jpg"/>

gdzie: src – w tym atrybucie określamy ścieżkę do pliku obrazka.

Do elementu image, możemy także zastosować arkusze stylów CSS.

Zobacz także:

• Kurs XUL – etykiety i obrazki,
• Kurs XUL – zastosowanie CSS.

Przedstawiam drugą część opisująca język XUL.

Chciałem rozpocząć, małym sprostowaniem. Otóż w poprzednim poście dotyczącym pierwszego okna w XUL. Mianowicie edytor do pisania postów w Wordpressie sam dodał dziwne fragmenty do fragmentu kodu. I przestrzeń nazw powinna wyglądać tak:

> < ?xml-stylesheet xhref="chrome://global/skin/" type="text/css"?>

Błąd ten objawia się w postaci dodania litery “x” do fragmentu “href“, co nam daje błedny zapis “xhref“. Za ta małą nieścisłość przepraszam . I dzięki PablO, który zwrócił mi na to uwagę.

OK, teraz kolejny fragment o XUL-u. Poprzednim razem do okna dodałem dwa przyciski. Tym razem rozszerzę ten przykład o kilka atrybutów przycisków (button), dodatkowo podam kod, ale w formie pliku tekstowego, a fragmenty kodu będę opisywał w postaci kodu.

Ostatnio dodane przyciski posiadają większe możliwości, niż ostatnio podałem. Oto rozszerzony opis atrybutów, jakie posiadają przyciski <button>

<button
id="first-button"
class="dialog"
label="Pierwszy"
image="img/obrazek.jpg"
disabled="true"
accesskey="p"/>

1. id – unikatowy identyfikator,
2. class – klasa stylu przycisku. Atrybutu używamy do wskazania stylu,
3. label – etykieta, jaka pojawi się na przycisku,
4. image – URL obrazka, jaki możemy wyświetlić na przycisku,
5. disabled – przyjmuje dwie wartości: true i false. Służy do włączenia lub wyłączenia przycisku, w przykładzie poniżej przycisk jeden jest włączony, a drugi wyłączony, (czyli wyszarzony),
6. accesskey – skrót klawiaturowy. W przykładzie naszym będzie to litera p, ona zostanie podkreślona na przycisku i oznaczać, będzie skrót klawiaturowy.

Chcę, aby nasz dwa poziome przyciski miały nadane skróty klawiszowe oraz jeden z nich był wyszarzony. Do poprzedniego kodu przycisków dodaję kolejne atrybuty z tych ww.:

<button id="first-button" label="Pierwszy" disabled="true" accesskey="p" />
<button id="second-button" label="Drugi" disabled="false" accesskey="d" />

Po zastosowaniu kilku nowo poznanych atrybutów do naszego przykładu (nie wszystkich) , będzie on wyglądał następująco:

Kod w edytorze XUL-a:

Jego pełny kod w formie pliku tekstowego i pliku XUL:

• dwaprzyciski2.xul
• dwaprzyciski2.txt

Niestety WordPress znowu mnie wkurzył! Nie pozwolił na przesłanie pliku w formacie *.xul. Grrr…
Wiem, że pomału idzie mi tłumaczenie, od następnego postu o XUL-u postaram się trochę przyspieszyć. W kolejnym poście o XUL-u, co nieco omówię kolejne elementy okna, czyli etykiety (label) i elementy opisu description.

Przydatne odnośniki:

• MDC: Dodawanie przycisków,
• Ostatni mój opis tworzenia okna w XUL-u.

Ostatnio dość szczegółowo się zająłem językiem XUL. Poniżej chciałbym przedstawić więcej szczegółów dotyczących tego języka opracowanego przez Mozillę. W tym poście zajmę się podstawową składnią pliku XUL-a. Utworzę okno z dwoma przyciskami. Najpierw może kilka wiadomości, czym jest ten XUL .
Otóż, XUL to XML User Interface Language (wymowa “zul”). Jego możliwości to tworzenie interfejsów użytkownika aplikacji WWW. W ramach pliku .xul możliwe jest tworzenie m.in. przycisków, pasków przewijania, opcji i list. Posiada on oczywiście o wiele szersze zastosowanie, wymieniłem tylko pierwsze, które mi się nasunęły. Znaczniki użyte w XUL-u stanowią różne elementy interfejsu użyte do tworzenia interfejsu graficznego. Swój przykład okna dialogowego nazwę dwaprzyciski.xul, dodam, że wszystkie przykłady sprawdziłem w edytorze XUL, o którym pisałem ostatnio.

Każdy plik XUL-a posiada kilka podstawowych elementów, które należy zdefiniować. Poniżej składnia podstawowego okna pliku napisanego w XUL-u:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"  type="text/css"?>
<window
id="twobutton-window"
title="Dwa przyciski"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
...
</window> 

Ok, co jest, co. Czyli omówię po linia po linii, co powyższy fragment kodu znaczy.
W pierwszej linii <?xml version="1.0"?> został zadeklarowany język XML w wersji 1.0. W drugiej linii deklarujemy ścieżkę do szablonu, ze składni widać, że znajduje się on w chrome. Kolejnym fragmentem kodu jest znacznik <window, w którym możemy umieścić wiele atrybutów. W moim przykładzie atrybutami są id, title, orient oraz xmlns. Oznaczają one odpowiednio:

1. id to unikalny identyfikator okna, jego nazwa nie może być ponownie użyta w tej samej aplikacji.
2. title to tytuł, jaki pojawi się w oknie aplikacji w pasku tytułu.
3. orient określa położenie elementów w aplikacji (o ułożeniu elementów postaram się napisać w jednym, z kolejnych postów na moim blogu).
4. xmlns to przestrzeń nazw, z jakiej korzysta znacznik window.

No dobra pozostało już tylko zamknąć sam znacznik window oraz umieścić na końcu kodu zamknięcia otwartego znacznika window. W kodzie powyżej, użyłem trzech kropek do zaznaczenia miejsca, w którym możemy umieszczać dowolne elementy interfejsu naszego okna. Na koniec wszystko musimy zapisać do pliku dwaprzyciski.xul i podejrzeć w osobnym oknie edytora XUL-a. Za wiele na nim nie zobaczymy, więc dodajmy w końcu jakieś pierwsze elementy tworzonego okna. Będą to dwa przyciski, które się pojawią w miejscu aktualny trzech kropek.

Do utworzenia wspomnianych przycisków, będzie nam służył znacznik button, którego także rozszerzymy o atrybuty: label oraz id. Znaczenie atrybutu id, jest taki sam jak w przypadku znacznika window. Natomiast label pozwala nam określić tekst, który zostanie wyświetlony na przycisku. Teraz pora na kod, jaki należy wstawić w miejsce trzy kropka!

<button id="first-button" label="Pierwszy"/>
<button id="second-button" label="Drugi"/> 

I … Oto efekt wstawienia powyższego kodu do edytora.

Poniżej znajduje sie nasze pierwsze okienko dialogowe utworzone w XUL,

Na początek to tyle, postaram się jak najszybciej opisać więcej możliwości plików XUL-a. Więcej można znaleźć na stronie Kursu XUL z polskiej wersji strony MDC lub jej angielskiego odpowiednika. Zaznaczam, że wersja pl, jest nadal tłumaczona i proszę nie brać zawartej tam treści jako w pełni poprawnej. Gdyż mogą w niej występować jakieś pomyłki .