Graficzny widżet - Graphical widget

gtk3-demo, program do demonstrowania widżetów w GTK + w wersji 3.
Widżety Qt renderowane zgodnie z trzema różnymi skórkami (projekt artystyczny): Plastik, Keramik i Windows
Różne widżety wyświetlane w Ubuntu .
Przykład włączonych i wyłączonych widżetów; ramka na dole jest wyłączony, są wyszarzone.

Graficzny widżet (również graficzny element sterujący lub kontrolny ) w graficznym interfejsie użytkownika jest elementem oddziaływania , takie jak przycisk lub paska przewijania . Elementy sterujące to składniki oprogramowania , z którymi użytkownik komputera wchodzi w interakcję poprzez bezpośrednią manipulację w celu odczytania lub edycji informacji o aplikacji. Biblioteki interfejsu użytkownika, takie jak Windows Presentation Foundation , GTK i Cocoa , zawierają kolekcję kontrolek i logikę do ich renderowania.

Każdy widget ułatwia określony typ interakcji między użytkownikiem a komputerem i pojawia się jako widoczna część interfejsu GUI aplikacji, zgodnie z definicją w kompozycji i renderowaną przez silnik renderujący. Motyw sprawia, że ​​wszystkie widżety zachowują jednolitą estetykę i tworzą poczucie ogólnej spójności. Niektóre widżety obsługują interakcję z użytkownikiem, na przykład etykiety, przyciski i pola wyboru . Inne działają jako kontenery grupujące dodane do nich widżety, na przykład okna , panele i karty.

Strukturyzacja interfejsu użytkownika za pomocą zestawów narzędzi widgetów umożliwia programistom ponowne wykorzystanie kodu do podobnych zadań i zapewnia użytkownikom wspólny język do interakcji, zachowując spójność w całym systemie informacyjnym.

Kreatory graficznych interfejsów użytkownika ułatwiają tworzenie GUI w sposób WYSIWYG z wykorzystaniem języka znaczników interfejsu użytkownika . Automatycznie generują cały kod źródłowy widżetu na podstawie ogólnych opisów dostarczonych przez programistę, zwykle poprzez bezpośrednią manipulację .

Historia i zastosowanie

Każdy widżet wyświetla układ informacji, który może zmienić użytkownik, na przykład okno lub pole tekstowe . Cechą definiującą widżet jest zapewnienie pojedynczego punktu interakcji do bezpośredniej manipulacji danym rodzajem danych. Innymi słowy, widżety to podstawowe wizualne bloki konstrukcyjne, które połączone w aplikacji przechowują wszystkie dane przetwarzane przez aplikację i dostępne interakcje na tych danych.

Widżety GUI to elementy graficzne używane do tworzenia interfejsu człowiek-maszyna programu. Widżety GUI są implementowane jak komponenty oprogramowania . Zestawy narzędzi do widżetów i frameworki oprogramowania, takie jak np. GTK + lub Qt , zawierają je w bibliotekach oprogramowania, dzięki czemu programiści mogą ich używać do tworzenia GUI dla swoich programów.

Rodzina popularnych widżetów wielokrotnego użytku rozwinęła się w celu przechowywania ogólnych informacji na podstawie badań Palo Alto Research Center Inc. dotyczących interfejsu użytkownika Xerox Alto . Różne implementacje tych ogólnych widżetów są często spakowane razem w zestawach narzędzi widgetów , których programiści używają do tworzenia graficznych interfejsów użytkownika (GUI). Większość systemów operacyjnych zawiera zestaw gotowych do dostosowania widżetów, które programista może włączyć do aplikacji, określając sposób jej zachowania. Każdy typ widgetu jest ogólnie definiowany jako klasa przez programowanie obiektowe ( OOP ). Dlatego wiele widżetów wywodzi się z dziedziczenia klas.

W kontekście aplikacji widget może być włączony lub wyłączony w danym momencie. Włączony widget może reagować na zdarzenia, takie jak naciśnięcia klawiszy lub działania myszy. Widżet, który nie może reagować na takie zdarzenia, jest uważany za wyłączony. Wygląd widżetu zazwyczaj różni się w zależności od tego, czy jest włączony, czy wyłączony; po wyłączeniu widget może być rysowany jaśniejszym kolorem (wyszarzony) lub w jakiś sposób zasłonięty wizualnie. Jako przykład zobacz sąsiedni obraz.

Zaletą w porównaniu z całkowitym ukrywaniem niedostępnych elementów sterujących jest uczenie użytkowników ich istnienia i oznaczanie chwilowej niedostępności zamiast pozostawiania użytkownikowi szukania ukrytego elementu sterującego.

Widżety są czasami kwalifikowane jako wirtualne, aby odróżnić je od ich fizycznych odpowiedników, np. Wirtualne przyciski, które można klikać za pomocą wskaźnika , w porównaniu z fizycznymi przyciskami, które można naciskać palcem.

Pokrewną (ale inną) koncepcją jest widget na pulpicie , mała wyspecjalizowana aplikacja GUI, która zapewnia pewne informacje wizualne i / lub łatwy dostęp do często używanych funkcji, takich jak zegary, kalendarze, agregatory wiadomości, kalkulatory i notatki na pulpicie. Tego rodzaju widżety są hostowane przez silnik widżetów .

Etymologia

„Widget” wszedł do amerykańskiego angielskiego około 1920 roku jako ogólne określenie każdego użytecznego urządzenia, w szczególności produktu wytwarzanego na sprzedaż. W przypadku komputerów zostało zapożyczone jako skrócona forma „ gadżetu okiennego ” i po raz pierwszy zostało zastosowane do elementów interfejsu użytkownika podczas Projektu Atena w 1988 roku. Słowo to wybrano, ponieważ „wszystkie inne popularne terminy były przeładowane niewłaściwymi konotacjami” - od czasu Zestaw narzędzi Intrinsics projektu skojarzył każdy widżet z oknem bazowego systemu X Window - i ze względu na wspólny prefiks ze słowem window .

Lista popularnych widżetów ogólnych

  • Wybór i prezentacja kolekcji
    • Przycisk - kontrolka, na którą można kliknąć, aby wykonać akcję. Odpowiednik przycisku znajdującego się w przyrządach mechanicznych lub elektronicznych.
      • Przycisk radiowy - kontrolka, którą można kliknąć, aby wybrać jedną opcję z szeregu opcji, podobnie jak wybór stacji radiowej z grupy przycisków przeznaczonych do strojenia radia. Przyciski radiowe zawsze pojawiają się w parach lub w większych grupach i jednocześnie można wybrać tylko jedną opcję w grupie; wybranie nowej pozycji z przycisków grupy powoduje również odznaczenie poprzednio wybranego przycisku.
      • Pole wyboru - kontrolka, na którą można kliknąć, aby włączyć lub wyłączyć opcję. Nazywany również polem wyboru. Ramka wskazuje stan „włączony” lub „wyłączony” za pomocą znacznika wyboru / ptaszka ☑ lub krzyżyka. Może być wyświetlany w stanie pośrednim (zacieniony lub z kreską), aby wskazać, że różne obiekty w wielokrotnym zaznaczeniu mają różne wartości właściwości reprezentowanej przez pole wyboru. W przeciwieństwie do przycisków opcji, można zaznaczyć wiele pól wyboru w grupie.
      • Przełącznik dwustabilny - funkcjonalnie podobny do pola wyboru. Można je włączać i wyłączać, ale w przeciwieństwie do pól wyboru zwykle ma to natychmiastowy skutek.
      • Przycisk przełącznika - funkcjonalnie podobny do pola wyboru, działa jak przełącznik , chociaż pojawia się jako przycisk. Można go włączać i wyłączać.
      • Przycisk podziału - element sterujący łączący przycisk (zwykle wywołujący pewną domyślną akcję) i rozwijaną listę z powiązanymi, drugorzędnymi akcjami
      • Przycisk cyklu - przycisk, który przełącza swoją zawartość przez dwie lub więcej wartości, umożliwiając w ten sposób wybór jednej z grupy elementów.
    • Suwak - sterowanie za pomocą uchwytu, który można przesuwać w górę iw dół (suwak pionowy) lub w prawo iw lewo (suwak poziomy) na pasku, aby wybrać wartość (lub zakres, jeśli są obecne dwa uchwyty). Pasek umożliwia użytkownikom wprowadzanie zmian wartości lub procesu w zakresie dozwolonych wartości.
    • Pole listy - graficzny element sterujący, który umożliwia użytkownikowi wybranie jednego lub więcej elementów z listy zawartej w statycznym, wielowierszowym polu tekstowym.
    • Pokrętło - kontrolka wprowadzania wartości, która ma małe przyciski w górę iw dół do przechodzenia przez zakres wartości
    • Lista rozwijana - lista elementów do wyboru. Lista zwykle wyświetla elementy tylko po kliknięciu specjalnego przycisku lub wskaźnika.
    • Menu - sterowanie z wieloma akcjami, które można kliknąć, aby wybrać wybór do uaktywnienia
      • Menu kontekstowe - typ menu, którego zawartość zależy od kontekstu lub stanu obowiązującego w momencie wywołania menu
      • Menu kołowe - okrągłe menu kontekstowe, w którym wybór zależy od kierunku
    • Pasek menu - graficzny element kontrolny zawierający rozwijane menu
    • Pasek narzędzi - graficzny element sterujący, na którym umieszczone są przyciski ekranowe, ikony, menu lub inne elementy wejściowe lub wyjściowe
      • Wstążka - hybryda menu i paska narzędzi, wyświetlająca duży zbiór poleceń w układzie wizualnym za pośrednictwem interfejsu z kartami.
    • Pole kombi ( pole tekstowe z dołączonym menu lub polem listy ) - połączenie jednowierszowego pola tekstowego i listy rozwijanej lub pola listy , umożliwiające użytkownikowi wpisanie wartości bezpośrednio w kontrolce lub wybranie jej z listy istniejące opcje.
    • Ikona - szybko zrozumiały symbol narzędzia programowego, funkcji lub pliku danych.
    • Widok drzewa - graficzny element kontrolny przedstawiający hierarchiczny widok informacji
    • Widok siatki lub datagrid - tabelaryczny widok danych podobny do arkusza kalkulacyjnego , który umożliwia wprowadzanie liczb lub tekstu w wierszach i kolumnach.
  • Nawigacja
    • Link - tekst z pewnym rodzajem wskaźnika (zwykle podkreśleniem i / lub kolorem), który wskazuje, że kliknięcie go spowoduje przejście do innego ekranu lub strony.
    • Zakładka - graficzny element kontrolny, który pozwala na umieszczenie wielu dokumentów lub paneli w jednym oknie
    • Pasek przewijania - graficzny element sterujący, za pomocą którego można przewijać ciągły tekst, obrazy lub dowolną inną zawartość we wstępnie określonym kierunku (w górę, w dół, w lewo lub w prawo)
  • Wprowadzanie tekstu / wartości
    • Pole tekstowe - (pole edycyjne) - graficzny element kontrolny mający na celu umożliwienie użytkownikowi wprowadzenia tekstu
    • Pole kombi - graficzny element kontrolny łączący listę rozwijaną lub pole listy i jednowierszowe edytowalne pole tekstowe
  • Wynik
    • Etykieta - tekst używany do opisu innego widżetu
    • Etykietka - okno informacyjne, które pojawia się po najechaniu kursorem myszy na inną kontrolkę
    • Pomoc balonowa
    • Pasek stanu - graficzny element kontrolny, który tworzy obszar informacyjny, który zwykle znajduje się u dołu okna
    • Pasek postępu - graficzny element kontrolny służący do wizualizacji przebiegu rozszerzonej operacji komputera, takiej jak pobieranie, przesyłanie plików lub instalacja
    • Pasek informacyjny - graficzny element kontrolny używany przez wiele programów do wyświetlania użytkownikowi niekrytycznych informacji
  • Pojemnik
    • Okno - graficzny element sterujący składający się z obszaru wizualnego zawierającego niektóre elementy graficznego interfejsu użytkownika programu, do którego należy
      • Panel zwijany - panel, który może kompaktowo przechowywać zawartość, która jest ukryta lub ujawniona po kliknięciu zakładki widżetu.
        • Szuflada: boczne arkusze lub powierzchnie zawierające dodatkowe treści, które mogą być zakotwiczone, wyciągnięte lub wypchnięte poza lewą lub prawą krawędź ekranu.
      • Harmonijka - lista elementów ułożona pionowo, na przykład etykiety lub miniatury, gdzie każdy element można „rozwinąć”, aby odsłonić powiązaną zawartość
      • Okno modalne - graficzny element sterujący podporządkowany głównemu oknu aplikacji, który tworzy tryb, w którym nie można korzystać z okna głównego.
      • Okno dialogowe - małe okno, które przekazuje użytkownikowi informacje i prosi o odpowiedź
      • Okno palety - nazywane również „oknem narzędziowym” - graficzny element sterujący, który unosi się nad wszystkimi zwykłymi oknami i oferuje gotowe narzędzia, polecenia lub informacje dotyczące bieżącej aplikacji
        • Okno inspektora - rodzaj okna dialogowego, które pokazuje listę aktualnych atrybutów wybranego obiektu i pozwala na zmianę tych parametrów w locie
      • Ramka - rodzaj ramki, w której można zgrupować zbiór graficznych elementów sterujących, aby wizualnie pokazać relacje
      • Canvas - ogólny element rysunkowy służący do przedstawiania informacji graficznych
      • Cover Flow - animowany, trójwymiarowy element umożliwiający wizualne przeglądanie migawek dokumentów, zakładek witryn internetowych, okładek albumów lub zdjęć.
      • Bubble Flow - animowany, dwuwymiarowy element, który umożliwia użytkownikom przeglądanie i interakcję w całym widoku drzewa wątku dyskusji.

Zobacz też

Bibliografia

Linki zewnętrzne