Kurs XUL:Paski postępu

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

W tym artykule przyjrzymy się bliżej sposobom tworzenia pasków postępu.

[edytuj] Dodanie paska postępu

Pasek postępu jest paskiem, który wyświetla, jaka cześć zadania jest już wykonana. Najczęściej spotykamy się z paskiem postępu podczas pobierania plików lub podczas trwania długotrwałych operacji. XUL posiada zdefiniowany element progressmeter, który stosuje się do tworzenia nowego paska. Rozróżniamy dwa typy pasków postępu: określony i nieokreślony.

Określone paski postępu są stosowane, gdy znamy długość czasu, jaki będzie potrzebny do wykonania danej operacji. Pasek postępu będzie się wypełniał, gdy będzie już pełny, operacja powinna zostać zakończona. Najczęściej wykorzystywanymi okienkami, które stosują ten typ paska, to okienka dialogowe pobierania pliku, oczywiście, jeśli znany jest rozmiar pliku.

Nieokreślone paski postępu stosujemy, gdy nie znamy długości czasu, jaki będzie potrzebny do wykonania danej operacji. Pasek postępu będzie posiadał animację wypełniających się słupków lub wypełniającego się paska, zależy to od wykorzystywanej platformy systemowej oraz ustawionego motywu przeglądarki.

Określony pasek postępu:

Nieokreślony pasek postępu:

Pasek postępu posiada następującą składnię:

<progressmeter
    id="identifier"
    mode="determined"
    value="50%"/>

Atrybutami są:

id: Unikalny identyfikator paska postępu,
mode: Typ paska postępu. Jeśli jest ustawiony na wartość determined, pasek postępu jest określonym paskiem postępu, wypełniającym się do momentu ukończenia wykonywanego zadania. Jeśli jest ustawiony na wartość undetermined, pasek postępu jest nieokreślony, przy którym nieznany jest czas trwania operacji. Jeśli typ paska nie zostanie ustawiony, to przyjęta zostanie wartość domyślna - determined.
value: Bieżąca wartość paska postępu. Stosujemy dla określonych pasków postępu. Wartość wyrażona w procentach powinna zawierać się w przedziale od 0% do 100%. Wartość byłaby zmieniana przez skrypt, kiedy zadanie zakończy się.

[edytuj] Przykład okna: `Znajdź pliki`

Dodajmy pasek postępu do naszego okna dialogowego Znajdź pliki. Normalnie powinno się stosować nieokreślony pasek postępu, ponieważ nie wiemy jak wiele plików będziemy szukać lub jak długo będzie trwało szukanie. Jednakże, możemy dodać jeden normalny pasek jako animowany pasek postępu, który może być nieokreślony podczas programowania. Pasek postępu będzie wyświetlany normalnie tylko podczas szukania. W kolejnych artykułach dodamy skrypty do uruchomienia paska postępu.

<hbox>

  <progressmeter value="50%" style="margin: 4px;"/>

  <spacer flex="1"/>
</hbox>

Wartość ustawiona jest na 50%, aby widoczny był pasek postępu w oknie. Margines został ustawiony na 4 piksele tak, aby pasek był o tyle oddalony od brzegu okna. Jak wcześniej wspomniano, chcemy, aby pasek postępu był wyświetlany jedynie podczas szukania plików. Skrypt będzie go wyświetlał oraz ukrywał, zależnie od konieczności.

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