mozilla
Wyniki wyszukiwania

    Zastosowanie odstępów

    Artykuł pokazuje jak dodać odstępy pomiędzy elementami jakie stworzyliśmy.

    Dodawanie odstępów

    Jednym z problemów przy programowaniu interfejsów użytkownika jest to, że każdy użytkownik posiada inny monitor. Niektórzy użytkownicy posiadają monitory o dużej rozdzielczości, natomiast inni mają monitory o małej rozdzielczości. W dodatku, różne platformy mają określone wymagania, jeśli dodamy obsługę wielu języków, tekst w jednym języku może wymagać więcej miejsca, niż inny język.


    Aplikacje, które potrzebują obsługę wielu platform i języków zazwyczaj posiadają własne okna z dużą przestrzenią pozwalającą na to. Niektóre platformy i zestawy narzędziowe interfejsu użytkownika dostarczają komponentów, które są wystarczająco eleganckie na zmianę rozmiaru i możliwość zmiany swojej pozycji, tak, aby dopasować się do potrzeb użytkownika (dla przykładu Java używa menedżera układu rozmieszczenia).

    XUL dostarcza możliwości do automatycznego pozycjonowania i zmiany rozmiaru elementów. Jak widzieliśmy, okno znajdowania plików pojawia się w takim rozmiarze, że dopasowuje elementy w swoim wnętrzu. Za każdym razem, gdy dodajemy kolejny element, okno staje się większe.

    XUL używa systemu rozkładu elementów nazwanego 'Model pudełkowy'. Pomówimy o tym w kolejnym rozdziale, ale zasadniczo pozwala podzielić okno na szereg pól przechowujących elementy. Pola będą pozycjonowane, a ich rozmiar zmieniany w oparciu o specyfikację jaką możesz zdefiniować. Teraz wiesz, że element window jest typem pola.

    Zanim przejdziemy do szczegółów pól, wprowadzimy inny element XUL użyteczny dla rozkładu, spacer. Odstęp jest bardzo prosty i wymaga tylko jednego atrybutu, jaki wyjaśnimy za chwilę. Najprostszy odstęp wygląda następująco:

    <spacer flex="1"/>
    

    spacer jest stosowany do umieszczenia pustej przestrzeni w oknie. Najbardziej użyteczną możliwością jest to, że może rosnąć lub się kurczyć, jeśli użytkownik zmienia rozmiar okna. Byłoby to jak gdyby umieszczenie przycisków z prawej strony lub u dołu okna i przymocowanie ich do prawego lub dolnego brzegu bez względu na to, jaki jest rozmiar okna. Jak zobaczymy, można użyć szeregu odstępów do stworzenia kliku efektów rozkładu elementów.

    W powyższej składni odstęp ma jeden atrybut nazwany flex. Jest on używany do definiowania elastyczności odstępu. W powyższym przypadku odstęp ma flex równy 1, czyni to element odstępu rozciągniętym. Jeśli umieścisz odstęp bezpośrednio wewnątrz okna, jego rozmiar będzie rósł, gdy będzie zmieniał się rozmiar okna.

    Wkrótce dodamy odstęp do naszego okna dialogowego Znajdź pliki. Najpierw, spójrzmy na to, co stanie się, kiedy bieżące okno dialogowe zmieni swój rozmiar.

    Grafika:springs1.png

    Jeśli zmienisz rozmiar okna znajdowania plików, zobaczysz, że elementy pozostały tam, gdzie były na początku. Żaden z nich nie został przesunięty lub nie zmienił się jego rozmiar, mimo że okno ma więcej miejsca. Zobaczmy, co się zdarzy, kiedy dodamy odstęp pomiędzy polem tekstowym a przyciskiem Znajdź.

    Grafika:springs2.png

    Po dodaniu odstępu i zmianie rozmiaru okna widać, że odstęp wypełnił przestrzeń. Przyciski zostały przesunięte.

    Przykład okna: Znajdź pliki

    Kod dodający odstęp został podany poniżej. Wstaw go przed przyciskiem Znajdź.

    <spacer flex="1"/>
    
    <button id="find-button" label="Znajdź"/>
    

    Więcej o elastyczności

    XUL rozkłada elementy w oknie poprzez obliczenie odpowiedniej szerokości i wysokości dla elementów, a potem dodaje przestrzeń, gdzie są elastyczne. O ile nie określisz informacji o szerokości i wysokości elementu, domyślny rozmiar elementu jest określony przez jego zawartość. Zauważ, że przycisk Anuluj w okienkach dialogowych jest zawsze ustawiony na taką szerokość aby zmieścił się wewnątrz niego cały tekst. Jeśli tworzysz przycisk z bardzo długą etykietą, domyślny rozmiar przycisku będzie dosyć duży aby przechować całą etykietę. Pozostałe elementy takie jak pole tekstowe mają wybrany odpowiedni domyślny rozmiar.

    Atrybut flex jest używany do określenia, czy element może zmienić rozmiar odpowiedniego pola (w tym przypadku, okna). Już widzieliśmy, że atrybut flex stosuje się do odstępów, ale może być zastosowany do dowolnego elementu. Na przykład możesz chcieć zmienić rozmiar przycisku Znajdź.

    Grafika:springs3.png

    Jak widzisz na obrazku, przez umieszczenie atrybutu flex w przycisku Znajdź, zmienia on rozmiar, kiedy zmieniany jest rozmiar okna. Odstęp nie jest w rzeczywistości niczym specjalnym. Właściwie może być rozpatrywany jako ukryte okno. Działa w ten sam sposób, co przycisk z wyjątkiem tego, że nie jest odrysowywany na ekranie.

    Na powyższym rysunku można zauważyć jeszcze jedną rzecz. Nie tylko przycisk Znajdź zmienia rozmiar, ale także przestrzeń pojawiająca się pomiędzy etykietą główną a przyciskiem. Oczywiście jest to odstęp, jaki wstawiliśmy wcześniej. Również on zmienia rozmiar sam. Jeśli spojrzysz dokładnie, powinieneś zauważyć, że zmiana w rozmiarze dokonała się równo pomiędzy odstępem a przyciskiem. Odstęp odebrał połowę wolnej przestrzeni a przycisk druga połowę.

    Przyczyna takiego efektu jest to, że zarówno odstęp jak i przycisk Znajdź mają atrybut flex. Ponieważ oba są elastyczne. Zarówno przycisk jak i odstęp równo zmieniają rozmiar.

    A co jeśli chcesz ustawić jeden element rosnący dwukrotnie w stosunku do innego? Możesz zastosować większą liczbę jako wartość atrybutu flex. Wartości elementu flex są współczynnikami. jeśli jeden element ma flex równy 1 a kolejny ma flex równy 2 drugi element wzrasta dwukrotnie w stosunku do pierwszego. W efekcie, flex równy 2 mówi, że ten element ma flex który jest dwa razy większy niż elementy mające flex równy 1.

    Atrybut flex jest używany do określenia aktualnego rozmiaru. Zamiast tego określa, jak pusta przestrzeń dzieli się miedzy potomkami pola kontenera. Przyjrzymy się polom w kolejnym rozdziale. Jeśli domyślny rozmiar potomków został określony, wartości elastyczności są używane do dzielenia pozostałej pustej przestrzeni pola. Na przykład jeśli pole ma 200 pikseli szerokości i zawiera dwa elastyczne przyciski, pierwszy na 50 pikseli a drugi na 90 pikseli będzie 60 pikseli przestrzeni między nimi, jeśli oba przyciski mają wartość flex równą 1, przestrzeń będzie dzielona równo z 30 dodatkowymi pikselami szerokości dla każdego przycisku. Jeśli elastyczność drugiego przycisku wzrosła do 2, pierwszy przycisk odbierze 20 pikseli dodatkowej przestrzeni a drugi przycisk odbierze 40 pikseli dodatkowej przestrzeni.

    Atrybuty flex może być umieszczony w dowolnym elemencie, jednak ma znaczenie tylko wtedy, gdy umieścimy go w elemencie bezpośrednio wewnątrz pola XUL. Oznacza to, że chociaż możesz umieścić flex w elemencie HTML-a, nie uzyskasz takiego efektu, jeśli ten element jest wewnątrz elementu, nie - pola.

    Spójrz na te przykłady:

    Przykłady flex
    Przykład 1:
      <button label="Znajdź" flex="1"/>
      <button label="Anuluj" flex="1"/>
    
    Przykład 2:
      <button label="Znajdź" flex="1"/>
      <button label="Anuluj" flex="10"/>
    
    Przykład 3:
      <button label="Znajdź" flex="2"/>
      <button label="Zastąp"/>
      <button label="Anuluj" flex="4"/>
    
    Przykład 4:
      <button label="Znajdź" flex="2"/>
      <button label="Zastąp" flex="2"/>
      <button label="Anuluj" flex="3"/>
    
    Przykład 5:
      <html:div>
        <button label="Znajdź" flex="2"/>
        <button label="Zastąp" flex="2"/>
      </html:div>
    
    Przykład 6:
      <button label="Znajdź" flex="145"/>
      <button label="Zastąp" flex="145"/>
    
    Przykład 1 
    W tym przypadku elastyczność jest dzielona równo pomiędzy oba przyciski. Oba przyciski zmienią rozmiar równo
    Przykład 2 
    Tu oba przyciski będą rosły, ale przycisk Anuluj będzie rósł 10 razy bardziej, niż przycisk Znajdź ponieważ ma wartość flex, która jest 10 razy większa od wartości flex przycisku Znajdź. Dostępna przestrzeń będzie dzielona na jedną część dla przycisku Znajdź i 10 części dla przycisku Anuluj.
    Przykład 3 
    Tylko dwa z tych przycisków są tu oznaczone jako elastyczne. Przycisk replace nigdy nie zmieni rozmiaru ale pozostałe dwa tak. Przycisk Anuluj zawsze będzie zmieniał rozmiar dwukrotnie w stosunku do przycisku Znajdź ponieważ jego wartość flex jest dwukrotnie większa.
    Przykład 4 
    W tym przypadku, wszystkie trzy przyciski są elastyczne. Przyciski Find i Replace będą tego samego rozmiaru ale przycisk Anuluj będzie nieco większy (dokładnie 50% większy)
    Przykład 5 
    Tu, dwa przyciski, są umieszczone wewnątrz elementu div. Elastyczność jest tu bez znaczenia ponieważ przyciski nie są bezpośrednio w polu. Efekt będzie taki sam, jeśli zostanie pominięty atrybut flex.
    Przykład 6 
    Ponieważ wartości flex są takie same w obu przyciskach, będą równo rozwijane. Działałoby to również z wartościami flex równymi jeden zamiast 145. Nie ma różnic w tym przypadku. Zalecane jest używanie mniejszych liczb dla zwiększenia czytelności.

    Zauważ, że pozostałe czynniki, takie jak etykiety przycisków i minimalne rozmiary przycisków będą wpływały na aktualny rozmiar przycisków. Na przykład przycisk nie zostanie zmniejszony mniej niż do przestrzeni potrzebnej do przechowania jego etykiety.

    Określenie wartości flex na 0 ma taki sam efekt, jak całkowite pominięcie atrybutu flex. Oznacza to, że elementy nie są wcale elastyczne. Czasami możesz zobaczyć wartość flex określoną w procentach. Nie ma to specjalnego znaczenia i jest traktowane tak, jak gdyby nie było tam znaku procenta.

    Możesz zauważyć, że kiedy zmieniasz rozmiar okna dialogowego pionowo, przyciski zmieniają rozmiar same dopasowując się do wysokości okna. Jest tak ponieważ wszystkie przyciski mają wbudowany pionowy flex dodany im przez okno. W kolejnym rozdziale nauczymy się jak to zmienić.

    Przykład: Znajdź pliki

    Źródła Podgląd

    W następnym artykule dowiemy się kilku dodatkowych możliwościach przycisku.

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Takenbot, fscholz, Mgjbot, Kabar, Cnr roxx, teoli, Ptak82
    Ostatnia aktualizacja: fscholz,