UI bouwen

Om een ​​gebruiksvriendelijke en gestructureerde interface te ontwerpen, biedt AppMaster Web Designer een uitgebreid scala aan atomaire UI-componenten. Deze componenten kunnen op verschillende manieren worden gecombineerd en gegroepeerd om aan te sluiten bij uw doelstellingen en doelstellingen.

AppMaster biedt de volgende UI-componenten:

• Containers: fundamentele elementen voor het logisch structureren en groeperen van andere componenten.
• Modals en lades: Interactieve componenten voor het weergeven van aanvullende informatie of acties zonder het huidige scherm te verlaten.
• Componenten voor dynamische waarde-uitvoer: Bevat lijsten , rasters en tabellen voor het dynamisch presenteren van gegevens.
• Basis UI-elementen: zoals knoppen , tekst en pictogrammen , essentieel voor basisinterface-interacties.
• Navigatiecomponenten: inclusief verticale en horizontale menu's , tabbladen en soortgelijke navigatiehulpmiddelen.
• Formulierelementen: verschillende invoer en bedieningselementen voor gebruikersinteractie en gegevensverzameling.

Regelmatige updates van de componentenbibliotheek vergroten uw vermogen om webapplicaties efficiënter te ontwikkelen.

Laten we een gebruikersinterface bouwen voor onze eenvoudige rekenmachinetoepassing om de mogelijkheden van een AppMaster-websitebouwer met slepen en neerzetten te demonstreren. Deze app toont het resultaat van verschillende wiskundige bewerkingen op basis van invoerwaarden.

Flexcontainer

Met Flex Container kunt u eenvoudig het uitlijnings- en stapelbeheer beheren voor alle onderliggende elementen binnen een container.

Flex Container is een basiscomponent om de structuur van uw webpagina op te bouwen. Met Flex Container in AppMaster webapp designer kunnen gebruikers onderliggende elementen (widgets of containers) flexibel indelen. Het ondersteunt zowel horizontale als verticale uitlijningen, waardoor ontwikkelaars complexe lay-outs kunnen creëren die zich aanpassen aan verschillende schermformaten.

Containers toevoegen

We gebruiken twee hoofdcontainers: één voor gegevensinvoer en de andere voor het weergeven van berekeningsresultaten, verpakt in één gemeenschappelijke container.

Voeg eerst Flex Container toe aan het canvas om alle andere elementen te huisvesten.

In het deelvenster Vormgeving kunt u een reeks instellingen verkennen:

• Element-ID: een unieke identificatie voor het verwijzen naar de container in bedrijfsprocessen.
• Gemeenschappelijke groep: Instellingen om de standaardstatus van het onderdeel te definiëren, zoals zichtbaarheid en cursorstijl.
• Flex Child Group: Bepaalt hoe het element zich gedraagt ​​binnen een flex-parent component.
• Lay-out: Instellingen voor het rangschikken van onderliggende items binnen de container.
• Maten: Om de afmetingen van de elementen te specificeren.
• Afstand : Past de ruimte binnen en rond het element aan.
• Achtergrond: Opties voor achtergrondkleuren en lagen.
• Hoekradius, randen, schaduw: aanpassing van elementenranden, randen en schaduweffecten.
• Tooltip: Voegt tooltip toe voor hover- of focusacties.

Pas uw hoofdcontainer aan. Laten we Richting bijvoorbeeld instellen op horizontaal en de Gap , Padding , Corner radius en Borders aanpassen.

Voeg vervolgens nog een Flex-container toe aan uw hoofdcontainer, zodat het formulier waarden kan invoeren. Stel deze in op volledige breedte om de beschikbare ruimte in de bovenliggende container te vullen.

Dupliceer deze container (met CTRL/⌘+D ) om een ​​apart blok te maken voor het weergeven van de resultaten. Stel de eigenschap Breedte in op 30%.

UI-elementen toevoegen

Om door te gaan met het bouwen van uw applicatie, is het tijd om de benodigde UI-elementen toe te voegen.

Formulier toevoegen

Ons bedrijfsproces vereist dat de gebruiker twee cijfers invoert, beide van het type Float. Om dit mogelijk te maken, voegt u twee Float-ingangen en een knop toe om het berekeningsproces te starten.

Schakel de linkerkant van de Flex Container Direction naar Verticaal en voeg een opening toe zodat de geneste elementen een beetje ruimte ertussen hebben. Voeg in deze Flex-container een Input Float toe voor de eerste waarde, die we zullen labelen als 'X':

• Sleep het Input Float- element naar de container aan de linkerkant.
• Personaliseer het veld in het Vormgevingspaneel door een Label en Tijdelijke aanduiding toe te voegen.
• Stem het uiterlijk van het veld af op het ontwerp van uw toepassing.

Selecteer het toegevoegde veld op het canvas en dupliceer het met CTRL/⌘+D . Wijzig het Label en de tijdelijke aanduiding van het gedupliceerde veld zodat de tweede waarde, 'Y', wordt weergegeven.

Sleep nu een Button- element onder de toegevoegde velden. Pas in het deelvenster Vormgeving de knop aan zodat deze de volledige breedte bestrijkt. Dit kunt u bereiken door de eigenschap Align in de groep Flex Child in te stellen op Stretch .

Voer een label in voor de knop en voeg optioneel een pictogram toe om de visuele aantrekkingskracht ervan te vergroten.

Nadat u deze elementen heeft toegevoegd, is het een goede gewoonte om ze een andere naam te geven, zodat ze duidelijker en gemakkelijker te herkennen zijn. Hierdoor kunt u er makkelijker naar verwijzen in uw bedrijfsprocessen, waardoor de begrijpelijkheid toeneemt en het ontwikkelproces wordt versneld.

Resultatenblok toevoegen

Aan de rechterkant van de bovenliggende container configureren we een ruimte om de resultaten weer te geven na het uitvoeren van ons bedrijfsproces. Stel eerst de eigenschap Direction van deze container in op Verticaal en voeg een kleine tussenruimte toe om de elementen netjes uit elkaar te houden. Verander de breedte naar 30%.

Voeg binnen deze rechtercontainer een nieuwe Horizontal Flex-container in en voeg daarin een Icon- element toe dat de bewerking vertegenwoordigt, een tekstblok met een gelijk-symbool en een tekstblok waar het resultaat van de bewerking wordt weergegeven. Dupliceer deze container vier keer en update elke keer voor onze gedefinieerde wiskundige bewerkingen.

Pas elk element naar wens aan met het Vormgevingspaneel .

Voeg hintblok toe

Om de bruikbaarheid van de interface te verbeteren, maken we een tijdelijke aanduiding die wordt weergegeven totdat de resultaten worden ontvangen. Voeg hiervoor een extra Flex Container toe, die de breedte van de rechter container weerspiegelt (30%), en plaats een tekstblok erin met een beschrijvende hint.

Een belangrijk kenmerk van de container met resultaten is de initiële zichtbaarheidsstatus. Zet de schakelaar Zichtbaar standaard uit, waardoor deze in eerste instantie onzichtbaar wordt.

Element verbergen

We zullen deze container pas zichtbaar maken en gegevens bijwerken nadat het bedrijfsproces is uitgevoerd en het resultaat is verkregen. Het is belangrijk om tekstbloknamen toe te wijzen, zodat ze gemakkelijk kunnen worden geïdentificeerd tijdens het maken van bedrijfsprocessen en het schrijven van de weer te geven resultaten.

🎉 Goed gedaan! We hebben de perfecte gebruikersinterface voor onze applicatie gemaakt en zijn klaar om interactiviteit aan onze elementen toe te voegen.