Budowanie interfejsu użytkownika

Aby zaprojektować użyteczność i strukturalny interfejs, AppMaster Web Designer udostępnia szeroką gamę atomowych komponentów interfejsu użytkownika. Komponenty te można łączyć i grupować na różne sposoby, aby dostosować je do swoich celów.

AppMaster oferuje następujące komponenty interfejsu użytkownika:

• Kontenery: podstawowe elementy służące do logicznego organizowania i grupowania innych komponentów.
• Modale i szuflady: interaktywne komponenty umożliwiające wyświetlanie dodatkowych informacji lub działań bez opuszczania bieżącego ekranu.
• Komponenty wyjściowe wartości dynamicznej: obejmują listy , siatki i tabele umożliwiające dynamiczną prezentację danych.
• Podstawowe elementy interfejsu użytkownika: takie jak przyciski , tekst i ikony , niezbędne do podstawowych interakcji w interfejsie.
• Elementy nawigacyjne: w tym menu pionowe i poziome, karty i podobne narzędzia nawigacyjne.
• Elementy formularza: różne dane wejściowe i elementy sterujące umożliwiające interakcję z użytkownikiem i gromadzenie danych.

Regularne aktualizacje biblioteki komponentów zwiększają możliwości wydajniejszego tworzenia aplikacji internetowych.

Skonstruujmy interfejs użytkownika dla naszej prostej aplikacji kalkulatora, aby zademonstrować możliwości narzędzia do tworzenia witryn internetowych metodą „przeciągnij i upuść” AppMaster. Ta aplikacja wyświetli wyniki różnych operacji matematycznych na podstawie wartości wejściowych.

Kontener elastyczny

Dzięki Flex Container możesz łatwo zarządzać wyrównaniem i układaniem wszystkich elementów podrzędnych w kontenerze.

Flex Container to podstawowy komponent do budowy struktury Twojej strony internetowej. Flex Container w projektancie aplikacji internetowych AppMaster umożliwia użytkownikom elastyczne rozmieszczanie elementów podrzędnych (widżetów lub kontenerów). Obsługuje wyrównania w poziomie i w pionie, umożliwiając programistom tworzenie złożonych układów, które dostosowują się do różnych rozmiarów ekranu.

Dodawanie kontenerów

Użyjemy dwóch głównych kontenerów: jednego do wprowadzania danych, a drugiego do wyświetlania wyników obliczeń zapakowanych w jeden wspólny kontener.

Najpierw dodaj Flex Container do płótna, aby pomieścić wszystkie pozostałe elementy.

W panelu Wygląd możesz sprawdzić szereg ustawień:

• Identyfikator elementu: Unikalny identyfikator służący do odwoływania się do kontenera w procesach biznesowych.
• Grupa wspólna: ustawienia definiujące domyślny stan komponentu, np. widoczność i styl kursora.
• Grupa podrzędna Flex: określa zachowanie elementu w komponencie flex-parent.
• Układ: Ustawienia rozmieszczania elementów podrzędnych w kontenerze.
• Rozmiary: Aby określić wymiary elementów.
• Odstępy : dostosowuje odstęp wewnątrz i wokół elementu.
• Tło: Opcje kolorów i warstw tła.
• Promień narożnika, obramowania, cień: dostosowywanie krawędzi elementów, obramowań i efektów cienia.
• Etykietka narzędzia: dodaje podpowiedź dotyczącą działań związanych z najechaniem myszką lub fokusem.

Dostosuj swój główny pojemnik. Na przykład ustawmy Kierunek na poziomy i dostosuj Odstęp , Dopełnienie , Promień narożnika i Obramowanie .

Następnie dodaj kolejny kontener Flex do głównego, aby formularz mógł wprowadzać wartości. Ustaw go na pełną szerokość, aby wypełnić dostępną przestrzeń w kontenerze nadrzędnym.

Zduplikuj ten kontener (używając CTRL/⌘+D ), aby utworzyć oddzielny blok do wyświetlania wyników. Ustaw właściwość Szerokość na 30%.

Dodawanie elementów interfejsu użytkownika

Aby kontynuować budowanie aplikacji, czas dodać niezbędne elementy interfejsu użytkownika.

Dodaj formularz

Nasz proces biznesowy wymaga od użytkownika wprowadzenia dwóch liczb, obu typu Float. Aby było to możliwe, dodaj dwa wejścia pływające i przycisk, aby rozpocząć proces obliczeń.

Przełącz lewą stronę Flex Container Direction na Vertical i dodaj odstęp , aby zagnieżdżone elementy miały między sobą niewielką przestrzeń. Dodaj do tego kontenera Flex zmienną wejściową dla pierwszej wartości, którą oznaczymy jako „X”:

• Przeciągnij i upuść element Float wejściowy do kontenera po lewej stronie.
• W panelu Wygląd spersonalizuj pole, dodając etykietę i symbol zastępczy .
• Dostosuj wygląd pola, aby dopasować go do projektu aplikacji.

Wybierz dodane pole na płótnie i zduplikuj je za pomocą CTRL/⌘+D . Zmodyfikuj etykietę i symbol zastępczy zduplikowanego pola, aby reprezentowały drugą wartość „Y”.

Teraz przeciągnij i upuść element Button poniżej dodanych pól. W panelu Wygląd dostosuj przycisk tak, aby obejmował całą szerokość. Można to osiągnąć, ustawiając właściwość Align w grupie Flex Child na Stretch .

Wprowadź etykietę przycisku i opcjonalnie dodaj ikonę , aby poprawić jego atrakcyjność wizualną.

Po dodaniu tych elementów dobrą praktyką jest zmiana ich nazw dla przejrzystości i łatwości identyfikacji. Ułatwia to odwoływanie się do nich w procesach biznesowych, zwiększając zrozumiałość i przyspieszając proces rozwoju.

Dodaj blok wyników

Po prawej stronie kontenera nadrzędnego skonfigurujemy przestrzeń do wyświetlania wyników po wykonaniu naszego procesu biznesowego. Najpierw ustaw właściwość Direction tego kontenera na Vertical i dodaj małą przerwę , aby elementy były równomiernie rozmieszczone. Zmień jego szerokość na 30%.

W prawym kontenerze wstaw nowy kontener Horizontal Flex i dodaj do niego element Icon reprezentujący operację, blok tekstowy z symbolem równości oraz blok tekstowy , w którym zostanie wyświetlony wynik operacji. Zduplikuj ten kontener cztery razy, aktualizując każdy z naszych zdefiniowanych operacji matematycznych.

Dostosuj każdy element według własnego uznania za pomocą panelu wyglądu .

Dodaj blok podpowiedzi

Aby zwiększyć użyteczność interfejsu, tworzymy symbol zastępczy, który będzie wyświetlany do czasu uzyskania wyników. W tym celu dodaj dodatkowy kontener elastyczny , odzwierciedlający szerokość prawego kontenera (30%) i umieść w nim blok tekstowy z podpowiedź opisową.

Kluczową cechą kontenera z wynikami jest jego początkowy stan widoczności. Domyślnie wyłącz przełącznik Widoczny , początkowo czyniąc go niewidocznym.

Ukryj element

Uwidocznimy ten kontener i zaktualizujemy dane dopiero po wykonaniu procesu biznesowego i uzyskaniu wyniku. Ważne jest nadanie nazw blokom tekstowym, zapewniających łatwą identyfikację podczas tworzenia procesów biznesowych i zapisywania wyników do wyświetlenia.

🎉 Dobra robota! Stworzyliśmy idealny interfejs użytkownika dla naszej aplikacji i jesteśmy gotowi dodać interaktywność do naszych elementów.