Tworzenie kreatora

Wiele aplikacji używa kreatorów aby pomóc użytkownikowi przejść złożone zadania. XUL dostarcza łatwego sposobu na tworzenie kreatorów

Kreator

Kreator jest specjalnym typem okna dialogowego, które zawiera kilka stron. Na dole tego okna dialogowego pojawiają się przyciski nawigacyjne do przełączania między stronami. Kreatory są zazwyczaj używane do pomocy użytkownikom przy wykonywaniu złożonych zadań. Każda strona zawiera pojedyncze pytanie lub zbiór powiązanych pytań. Po ostatniej stronie jest wykonywane działanie XUL dostarcza elementu wizard który może być użyty do stworzenia kreatora.

Zawartość wewnątrz elementu wizard obejmuje całą zawartość każdej strony kreatora. Atrybutu umieszczone w wizard są używane do sterowania nawigacją kreatora. Kiedy tworzymy kreator, użyjemy znacznika wizard zamiast znacznika window.

Zauważ, że kreatory obecnie pracują poprawnie z chrom URL.

Kreator składa się składa się z kilku sekcji, chociaż dokładny rozkład będzie różny dla każdej platformy. Kreator będzie generalnie wyświetlany jak te na platformie użytkownika. Typowy rozkład będzie obejmował tytuł na górze, zbiór przycisków nawigacyjnych na dole i zawartość strony po środku.

Tytuł u góry jest stworzony przy zastosowaniu atrybutu title, podobnie jak robi się to w zwykłym oknie. Przyciski nawigacyjne są tworzone automatycznie. Strony kreatora są tworzone przy użyciu elementu wizardpage. Możesz umieścić jakąkolwiek zawartość jaką chcesz wewnątrz każdego wizardpage.

Przykład kreatora

Źródła

<?xml version="1.0"?>

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

<wizard id="example-window" title="Select a Dog Wizard"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

  <wizardpage>
    <description>
      This wizard will help you select the type of dog that is best for you."
    </description>
    <label value="Why do you want a dog?"/>
    <menulist>
      <menupopup>
        <menuitem label="To scare people away"/>
        <menuitem label="To get rid of a cat"/>
        <menuitem label="I need a best friend"/>
      </menupopup>
    </menulist>
  </wizardpage>

  <wizardpage description="Dog Details">
    <label value="Provide additional details about the dog you would like:"/>
    <radiogroup>
      <caption label="Size"/>
      <radio value="small" label="Small"/>
      <radio value="large" label="Large"/>
    </radiogroup>
    <radiogroup>
      <caption label="Gender"/>
      <radio value="male" label="Male"/>
      <radio value="female" label="Female"/>
    </radiogroup>
  </wizardpage>

</wizard>

Ten kreator ma dwie strony, jedną z menu rozwijanym i drugą ze zbiorem przycisków opcji. Kreator będzie sformatowany automatycznie, z tytułem na górze i zbiorem przycisków na dole. Użytkownik może nawigować pomiędzy stronami kreatora przyciskami Wstecz oraz Dalej. Przyciski te włączają się i wyłączają same w odpowiedniej chwili. Dodatkowo na ostatniej stronie pojawia się przycisk Zakończ. Wszystko to jest automatyczne, więc nie musisz robić niczego aby manipulować stronami.

Atrybut description może opcjonalnie umieścić element wizardpage dostarczający podnagłówków dla tej strony. W powyższym przykładzie będzie umieszczony na drugiej stronie, ale nie na pierwszej.

Obsługa zmian strony

Generalnie chcesz zrobić coś po tym jak naciśniesz przycisk Zakończ. Możesz ustawić atrybut onwizardfinish w elemencie wizard aby to wykonać. Ustaw go w skrypcie który wykonuje jakieś zadanie jakie chcesz a potem zwraca prawdę. Ten skrypt może być używany do zapisania informacji, jaką użytkownik wprowadził podczas pracy z kreatorem.

<wizard id="example-window" title="Select a Dog Wizard"
  onwizardfinish="return saveDogInfo();"
  xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

Kiedy użytkownik nacisnął przycisk Zakończ, będzie wywołana funkcja saveDogInfo(), będąca zdefiniowaną w pliku skryptu zapisującym informację jaka została wprowadzona. Jeśli funkcja zwraca true, kreator zostanie zamknięty. Jeśli zwróci false, wtedy kreator się nie zamknie, co może wystąpić, jeśli funkcja saveDogInfo() napotka niepoprawną daną wejściową, na przykład.

Są również powiązane atrybuty onwizardback, onwizardnext i onwizardcancel, które są wywoływane, kiedy są naciśnięte przyciski Wstecz, Dalej i Anuluj. Te funkcje są wywoływane bez względu na to jaka strona jest aktualnie wyświetlana.

Aby mieć różny kod wywoływany w zależności od strony na jakiej jesteś, użyj atrybutów onpagerewound lub onpageadvanced w elemencie wizardpage. Pracują one podobnie do innych funkcji z wyjątkiem tego, że możesz użyć różnego kodu dla każdej strony. Pozwala Ci to sprawdzenie poprawności wprowadzonych danych wejściowych zanim użytkownik będzie kontynuował.

Trzecią metodą jest zastosowanie atrybutów onpagehide i onpageshow w elemencie wizardpage. Będą one wywoływane kiedy strona jest ukrywana lub pokazywana bez względu na to jaki przycisk naciśnięto (z wyjątkiem, kiedy naciśnięto przycisk Anuluj -- musisz użyć onwizardcancel, aby to sprawdzić).

Te trzy metody powinny dostarczyć dosyć elastyczności dla obsługi nawigacji jakiej potrzebujemy. Poniżej mamy podsumowanie funkcji atrybutów, które są wywoływane, kiedy użytkownik naciśnie Dalej, w porządku, w jakim będą sprawdzane. Jeśli tylko jedna zwróci false, nawigacja zostaje przerwana.

Podobny proces wystąpi dla przycisku Wstecz.

 <wizardpage pageadvanced='return funcName()'></wizardpage></code>

W kolejnym artykule, zobaczymy kilka dodatkowych możliwości kreatorów.