Witam wszystkich ponownie. Jak już sam tytuł sugeruje chciałbym poświęcić tego posta wstążkom (ang. Ribbon). Dlaczego akurat nim? Sądzę, że Ribbon jest jednym z bardziej interesujących wynalazków, wobec którego żaden programista aplikacji użytkowych nie powinien przejść obojętnie.

Co w artykule?

1. Wstęp i opis koncepcji. – czyli co to w ogóle jest Ribbon i do czego jest nam potrzebny. Co i jak robić, a czego się wystrzegać.
2. Co przed stworzeniem Ribbona? – Instalacja dodatkowej biblioteki i opis Command.
3. Przygotowanie Ribbona krok po kroku. – tutorial.

Wstęp i opis koncepcji.

Czym w ogóle jest Ribbon?

Wstążka (ang. Ribbon, Microsoft Fluent UI) – element interfejsu użytkownika, zastępujący tradycyjne menu i paski narzędzi. Wstążka po raz pierwszy pojawiła się w programie do modelowania 3D Blender. Kilka lat później pojawiła się również w pakiecie biurowym Microsoft Office 2007.

wikipedia.pl

Dlaczego właśnie Ribbon?

Co daje nam tak na prawdę Ribbon? Myślę, że kwestię tą można rozważyć z dwóch punktów widzenia: użytkownika oraz programisty. Poniżej przedstawiam trzy screen-shot’y odpowiednio: Worda 2003, 2007 i 2010:

Głównymi zaletami Ribbona dla mnie z punktu widzenia użytkownika to: estetyka i funkcjonalność. Przesiadka z Worda 2003 na 2007 prawdopodobnie na większości z nas nie wywarła pozytywnego wrażenia  jeśli chodzi o wstążkę. Szukanie opcji, które w starym Wordzie odnaleźlibyśmy z zamkniętymi oczami, było koszmarne i trwało zdecydowanie za długo.  Po pewnym czasie idzie się jednak do nich przyzwyczaić i to właśnie starsze aplikacje zaczynają sprawiać problemy.

Pierwszą rzucającą się w oczy cechą Ribbona jest rozmiar. Wydaje się on gigantyczny w porównaniu do tradycyjnego menu i toolbara. W rzeczywistości jednak (co prezentują również powyższe screen’y) jest tylko niewiele od nich wyższy! Ponadto, w prosty sposób można go zwinąć (podwójne kliknięcie na aktywną zakładkę) przez co zajmuje tyle miejsca co samo menu (pomyślcie ile czasu trwałoby schowanie aktywnych toolbar’ów w starszych Wordach):

Co jeszcze? Ribbon jest interaktywny. W przeciwieństwie do w pełni tekstowych tradycyjnych, dość statycznych, menu i prymitywnych ikonkowych toolbarów wstążka pozwala na wybieranie opcji z galerii, czy interaktywnych list wyboru.

Co Ribbon daje programiście? Wbrew pozorom nawet programistom wstążka może ułatwić pracę. Wymuszając stosowanie Command porządkuje aplikację i zmusza poniekąd do wyrobienia sobie pozytywnych nawyków jeśli chodzi o tworzenie aplikacji desktopowych. Ale więcej o tym na stronie drugiej.

Czy w ogóle potrzebuję Ribbona?

Pytanie to, wbrew pozorom, to jedno z najważniejszych, które należy sobie zadać przed stworzeniem aplikacji. Tworzenie aplikacji wyposażonej we wstążkę nie zawsze jest wskazane. Nie każda aplikacja potrzebuje Ribbona, wrzucanie go na siłę może pogorszyć usability naszej aplikacji. Dość obszerny i bardzo interesujący artykuł na temat wstążek można przeczytać na msdn (pisząc tego posta wielokrotnie się na nim opierałem). Porusza on wiele ciekawych kwestii, sugeruje jak (pod względem funkcjonalnym a nie implementacyjnym) budować Ribbona, oraz – co moim zdaniem jest dużo ważniejsze – jak nie budować Ribbona. Poniższy screen stanowi przykład tego jak nie budować Ribbona:

Biorę! Jak szybko przerobić aplikację z Menu i Toolbar’em na Ribbona?

Jeśli już kwestia użycia wstążki została przemyślana, to teraz zastanówmy się jak szybko przerobić “tradycyjną” aplikację na ribbonową. W tym względzie mam jedną radę, nie róbcie tego! Ribbon to zgoła inne podejście do interfejsu aplikacji aniżeli menu + toolbar. Jeśli chcesz mieć Ribbona w starej aplikacji, to usuń całe menu i toolbar’y oraz zaprojektuj całą wstążkę od nowa. Niektóre elementy (jak np. galerie) nie były dostępne wewnątrz toolbar’ów, stąd przy przerabianiu 1:1 braknie ich w Ribbonie. Ponadto, takie poprawianie interfejsu może poskutkować czymś, co przedstawiono poniżej:

Jedyną różnicą pomiędzy “tradycyjną” aplikacją a “nową” (lub nowoczesną jak kto woli) są … obrazki. Takiego czegoś nie należy robić.