Crash Course 101
10 moduły
5 Tygodnie

Projektowanie komponentów

Kliknij, aby skopiować

Projektowanie komponentów graficznych dla aplikacji internetowych


Możliwe byłoby proste umieszczenie elementów na pustej przestrzeni płótna, ale lepiej od razu spróbować zrobić wszystko porządnie. Dlatego na początek zaprojektujemy przestrzeń roboczą. Dodajmy element (Container) do płótna, w którym umieścimy wszystkie pozostałe elementy. Po dodaniu należy kliknąć na ikonę koła zębatego i przejść do konfiguracji tego kontenera.

Ustawienia kontenera

Przejdźmy przez dostępne ustawienia.

  • Name - nazwa, pod którą możemy się odwoływać do tego kontenera w procesach biznesowych aplikacji. Na przykład, jeśli chcemy stworzyć proces biznesowy, który będzie zmieniał jakieś ustawienia tego kontenera.
  • Direction - kierunek, w którym będą układane elementy wewnątrz danego kontenera. Poziomo, jeśli chcemy ułożyć je w rzędzie, jeden za drugim, lub odwrotnie, pionowo, gdy elementy przechodzą pod sobą.
  • Wrap - ustawienie wyjścia elementów. Czy powinny być w tej samej linii (nowrap), czy mogą być zawijane (wrap).
  • Alignment - jak mają być wyrównane elementy w kontenerze (osobne ustawienie dla wyrównania poziomego i pionowego).
  • Size - rozmiar kontenera. Może być ustawiony jako procent dostępnej przestrzeni lub mieć ściśle ustalony rozmiar w pikselach.
  • Max Width -maksymalna dopuszczalna szerokość (w przypadku, gdy nie jest ona ściśle ustalona i zmienia się w zależności od zawartości).
  • Margin/Padding - wcięcie od granic kontenera. Odpowiednio zewnętrzne lub wewnętrzne.
  • Image, Gradient or Overlay (Background color) - możliwość ustawienia pożądanego tła. Możesz wybrać konkretny kolor (lub kombinację różnych kolorów z gradientem) lub wybrać obraz tła.
  • Border - wybór obramowania i jego wyglądu (kolor, grubość, promień zaokrąglenia).
  • Visible - widoczność elementu (jak również wszystkich zagnieżdżonych elementów).

Wybrane ustawienia można zobaczyć na zrzucie ekranu. Oczywiście możesz eksperymentować i zmieniać je, wybierając swój unikalny projekt.

Do utworzonego kontenera dodajmy kolejny. Dodamy do niego niezbędne pola wejściowe. Ustawmy je na pionowe, wyrównane do środka, o szerokości 40% i z lewym paddingiem (padding-left 20px).

Elementy aplikacji

Następnie dodajemy do kontenera same komponenty. Nasz proces biznesowy przyjmuje dwie liczby typu float. Aby je wprowadzić, należy dodać dwa Input komponenty (float), a Button, który rozpocznie proces obliczania, oraz dokonać małej korekty wizualnej, aby podpisać ich Label.

Dodajmy jeszcze jeden blok, w którym podpiszemy co planujemy ogólnie obliczyć (sumowanie, odejmowanie itp.). Ustawmy szerokość na 30% z elementami ułożonymi pionowo, wyśrodkowanymi i wyrównanymi do prawej (end/center). Do samego kontenera dodajmy 5 elementów Label i od razu zmieńmy ich tekst na pożądany.

Ostatnim krokiem w projekcie wizualnym jest dodanie kolejnego kontenera do wyświetlania wyniku obliczeń. Dodaliśmy go analogicznie do poprzedniego kontenera, ale ustawiliśmy wyrównanie do prawej strony z niewielkim paddingiem po lewej stronie. Cechą tego kontenera jest to, że początkowo będzie on niewidoczny (przełącznik Visible jest wyłączony). Włączmy go w momencie, gdy będziemy mieli wynik obliczeń. Dodajmy do niego 5 komponentów Label, przy czym nie musimy nawet zmieniać ich tekstu, ponieważ blok jest nadal niewidoczny (najważniejsze jest ustawienie ich Name, aby można było zidentyfikować potrzebny element podczas tworzenia procesów biznesowych).

Jeśli wszystko zostało wykonane poprawnie, to w projektancie internetowym zobaczymy następujący rezultat:

A to w opublikowanej aplikacji:

Was this article helpful?
Nadal szukasz odpowiedzi?