Omówienie projektanta interfejsu użytkownika

Po pomyślnym utworzeniu aplikacji zostaniesz przekierowany do zakładki UI Designer.

Projektant interfejsu użytkownika w aplikacji AppMaster został zaprojektowany tak, aby był przyjazny dla użytkownika i umożliwiał łatwe tworzenie wspaniałych stron aplikacji internetowych.

Dzięki intuicyjnemu interfejsowi „przeciągnij i upuść” możesz projektować strony internetowe i płynnie wypełniać je treścią, eliminując potrzebę zaawansowanych umiejętności kodowania.

Projektant interfejsu użytkownika jest podzielony na cztery główne sekcje, z którymi użytkownicy mogą wchodzić w interakcję:

1. Lewy pasek narzędzi
2. Górny panel
3. Panel dolny
4. Obszar płótna
5. Panel Właściwości

Lewy pasek narzędzi

Pasek narzędzi po lewej stronie oferuje narzędzia do tworzenia struktury witryny. Kliknięcie ikon znajdujących się na górze tego paska bocznego spowoduje wyświetlenie następujących paneli:

• Lista elementów interfejsu użytkownika
• Drzewo elementów
• Drzewo stron
• Drzewo układów
• Menedżer aktywów

Lista elementów interfejsu użytkownika (skrót: 1 )

Lista elementów interfejsu użytkownika zawiera wszystkie elementy, które można dodać do obszaru roboczego, przeciągając je z panelu.

Elementy interfejsu użytkownika są podzielone na kategorie w zależności od ich przeznaczenia, co ułatwia nawigację i znajdowanie odpowiedniego widżetu dla Twojej aplikacji.

Aby szybko dostać się do elementu możesz skorzystać z paska wyszukiwania znajdującego się na górze panelu.

Drzewo elementów (skrót: 2 )

Z Drzewa Elementów możesz zarządzać i organizować wszystkie komponenty umieszczone na wybranej stronie Twojej aplikacji internetowej.

Tutaj możesz wchodzić w interakcję z tymi elementami:

• przenosić elementy pomiędzy drzewami poprzez przeciąganie,
• zmienić nazwę komponentów,
• zmienić stan widoczności elementów na płótnie (ukryj/pokaż).

Użyj paska wyszukiwania u góry panelu, aby znaleźć element szybkiego wyszukiwania w drzewie.

Drzewo stron (skrót: 3 )

Drzewo stron umożliwia organizowanie stron witryny i zarządzanie nimi. Tutaj możesz tworzyć nowe strony lub foldery.

W Pages Tree możesz powielać lub usuwać strony lub foldery.

Użyj paska wyszukiwania u góry panelu, aby znaleźć stronę szybkiego wyszukiwania lub folder w drzewie.

Lista układów (skrót: 4 )

Drzewo układów pomaga w zarządzaniu układami strony. Podobnie jak w Pages Tree możesz powielać lub usuwać układy.

Użyj paska wyszukiwania u góry panelu, aby wyświetlić układ szybkiego wyszukiwania w drzewie.

Menedżer aktywów (skrót: 5 )

Menedżer zasobów ułatwia przesyłanie i organizowanie zasobów (takich jak dokumenty, obrazy i animacje) do użytku w witrynie.

Wszystkie zasoby, które prześlesz podczas opracowywania, będą przechowywane w Menedżerze zasobów i można je ponownie wykorzystać bez ponownego przesyłania.

Możesz także usunąć dowolny zasób, którego już nie potrzebujesz.

Górny pasek

Górny pasek udostępnia dodatkowy zestaw ustawień widoku. Zaczynając od lewej strony, obok przycisku menu i kończąc na prawej stronie, masz następujący zestaw narzędzi:

• Bieżący dokument: wyświetla stronę lub układ, nad którym aktualnie pracujesz.
• Punkty przerwania: ikony punktów przerwania umożliwiają przełączanie między różnymi punktami przerwania w celu podglądu i modyfikowania wyglądu witryny na urządzeniach o różnych rozmiarach.
• Cofnij i Ponów: przyciski Cofnij i Ponów umożliwiają cofnięcie lub ponowne zastosowanie działań wykonanych w Projektancie, takich jak zastosowanie stylu lub usunięcie elementu. Dostępne są także skróty: do cofania akcji - CRTL/⌘+Z i do ponawiania akcji - CTRL/⌘+SHIFT+Z .

Dolny pasek

Panel dolny umożliwia powiększanie lub zmianę rozmiaru widoku strony.

Po lewej stronie panelu możesz ustawić niestandardową rozdzielczość strony, ustawiając wysokość i szerokość obszaru roboczego.

Po prawej stronie możesz kontrolować skalę:

• Powiększ lub pomniejsz
• Ustaw skalę w procentach
• Ustaw rzeczywisty rozmiar
• Dopasuj bieżące okno do widocznego obszaru

Płótno

Płótno to interaktywna przestrzeń robocza. Tutaj możesz wchodzić w interakcję z komponentami strony. Możesz wybierać elementy, zmieniać ich położenie i edytować treść bezpośrednio na stronie.

Możesz także kopiować ( CRTL/⌘+C ) i wklejać ( CRTL/⌘+V ) elementy pomiędzy stronami i aplikacjami lub powielać elementy w obrębie bieżącej strony ( CRTL/⌘+D ).

Panel Właściwości

Panel Właściwości po prawej stronie Projektanta umożliwia dostosowanie wyglądu i zachowania wybranego elementu, układu lub strony.

Panel Właściwości składa się z 4 głównych paneli:

• Panel wyglądu
• Panel opcji dodatkowych (opcjonalnie)
• Panel zapytań o media
• Panel logiki biznesowej

W nagłówku panelu możesz zmienić nazwę wybranego elementu klikając na nazwę elementu, przeczytać opis lub usunąć element klikając ikonę Kosza.

Panel wyglądu

Panel Wyglądu umożliwia dostęp do wyświetlanej zawartości statycznej i właściwości wybranego elementu. Możesz wprowadzić lub wybrać te wartości w odpowiednich polach, a style zostaną natychmiast zastosowane do elementów na płótnie.

Jeśli na kanwie nie zostaną zaznaczone żadne elementy, w tym panelu zostaną wyświetlone ustawienia bieżącej strony lub układu.

Panel opcji dodatkowych

Panel opcji dodatkowych przeznaczony jest dla elementów wymagających dodatkowych danych lub opcji ustawień.

Można ustawić źródło danych lub ręcznie wprowadzić opcje w zależności od wybranego komponentu.

Panel zapytań o media

Panel Zapytania o media umożliwia przesłonięcie właściwości elementu dla każdego zdefiniowanego punktu przerwania.

Panel logiki biznesowej

Panel logiki biznesowej udostępnia wszystkie wyzwalacze dla elementu i umożliwia ustalenie interakcji elementów po uruchomieniu wyzwalacza.