Overzicht van UI-ontwerper

Nadat u de applicatie succesvol heeft gemaakt, wordt u doorgestuurd naar het tabblad UI Designer.

De UI Designer in AppMaster is gebruiksvriendelijk ontworpen, zodat u moeiteloos verbluffende webapp-pagina's kunt maken.

Via de intuïtieve drag-and-drop-interface kunt u webpagina's ontwerpen en deze naadloos vullen met inhoud, waardoor de noodzaak voor geavanceerde codeervaardigheden wordt geëlimineerd.

De UI-ontwerper is verdeeld in vier primaire secties waarmee gebruikers kunnen communiceren:

1. Linker werkbalk
2. Bovenste paneel
3. Onderste paneel
4. Canvasgebied
5. Paneel Eigenschappen

Linker werkbalk

De werkbalk aan de linkerkant biedt hulpmiddelen voor het structureren van uw website. Door op de pictogrammen bovenaan deze zijbalk te klikken, worden de volgende panelen zichtbaar:

• Lijst met UI-elementen
• Elementen Boom
• Pagina's Boom
• Lay-outs Boom
• Vermogensbeheerder

Lijst met UI-elementen (sneltoets: 1 )

De lijst met UI-elementen biedt alle elementen die aan het canvasgebied kunnen worden toegevoegd door vanuit het paneel te slepen.

UI-elementen zijn ingedeeld in categorieën op basis van hun doel, waardoor u gemakkelijker kunt navigeren en de juiste widget voor uw app kunt vinden.

Om snel naar het element te gaan, kunt u de zoekbalk bovenaan het paneel gebruiken.

Elementenboom (sneltoets: 2 )

Vanuit de Elementenboom kunt u alle componenten beheren en ordenen die op de geselecteerde pagina van uw webapp zijn geplaatst.

Hier kunt u met deze elementen communiceren:

• items tussen boomstructuren verplaatsen door te slepen,
• componenten hernoemen,
• verander de zichtbaarheidsstatus van elementen op het canvas (verbergen/tonen).

Gebruik de zoekbalk bovenaan het paneel voor het snelle zoekelement in de boomstructuur.

Paginaboom (sneltoets: 3 )

Met de Paginastructuur kunt u uw sitepagina's ordenen en beheren. Hier kunt u nieuwe pagina's of mappen aanmaken.

In Paginaboom kunt u pagina's of mappen dupliceren of verwijderen.

Gebruik de zoekbalk bovenaan het paneel voor de snelle zoekpagina of map in de boomstructuur.

Lay-outslijst (sneltoets: 4 )

De lay-outstructuur helpt bij het beheren van uw paginalay-outs. Net als in Paginaboom kunt u lay-outs dupliceren of verwijderen.

Gebruik de zoekbalk bovenaan het paneel voor de snelle zoeklay-out in de boomstructuur.

Vermogensbeheerder (sneltoets: 5 )

De Assets Manager vergemakkelijkt het uploaden en organiseren van assets (zoals documenten, afbeeldingen en animaties) voor gebruik op uw website.

Alle assets die u tijdens de ontwikkeling uploadt, worden bewaard in Asset Manager en kunnen worden hergebruikt zonder opnieuw te uploaden.

U kunt ook alle activa verwijderen die u niet langer nodig heeft.

Bovenste balk

De bovenste balk biedt een extra set weergave-instellingen. Beginnend aan de linkerkant, naast de menuknop, en uitbreidend naar rechts, beschikt u over de volgende set hulpmiddelen:

• Huidig ​​document: geeft de pagina of lay-out weer waaraan u momenteel werkt.
• Breekpunten: met de breekpuntpictogrammen kunt u schakelen tussen verschillende breekpunten om een ​​voorbeeld te bekijken en aan te passen hoe uw site op verschillende apparaatgroottes wordt weergegeven.
• Ongedaan maken en Opnieuw: met de knoppen Ongedaan maken en Opnieuw kunt u acties die u in de Designer hebt gemaakt, ongedaan maken of opnieuw toepassen, zoals het toepassen van een stijl of het verwijderen van een element. Er zijn ook sneltoetsen beschikbaar: voor het ongedaan maken van een actie - CRTL/⌘+Z en voor het opnieuw uitvoeren van een actie - CTRL/⌘+SHIFT+Z .

Onderste balk

Met het onderste paneel kunt u inzoomen of de grootte van de paginaweergave wijzigen.

Aan de linkerkant van het paneel kunt u een aangepaste paginaresolutie instellen door de hoogte en breedte van uw canvas in te stellen.

Aan de rechterkant kunt u de schaal bedienen:

• Inzoomen of uitzoomen
• Schaal instellen in percentages
• Stel de werkelijke grootte in
• Pas het huidige venster aan het zichtbare gebied aan

Canvas

Het canvas is uw interactieve werkruimte. Dit is waar u met de paginacomponenten kunt werken. U kunt elementen selecteren, verplaatsen en de inhoud rechtstreeks op de pagina bewerken.

U kunt ook elementen kopiëren ( CRTL/⌘+C ) en plakken ( CRTL/⌘+V ) tussen pagina's en toepassingen, of elementen binnen de huidige pagina dupliceren ( CRTL/⌘+D ).

Paneel Eigenschappen

Met het venster Eigenschappen aan de rechterkant van de Designer kunt u de visuele weergave en het gedrag van het geselecteerde element, de lay-out of de pagina aanpassen.

Het paneel Eigenschappen bestaat uit 4 hoofdpanelen:

• Uiterlijk paneel
• Paneel met extra opties (optioneel)
• Paneel Mediaquery's
• Bedrijfslogicapaneel

In de koptekst van het paneel kunt u de naam van het geselecteerde item wijzigen door op de itemnaam te klikken, de beschrijving lezen of het item verwijderen door op het prullenbakpictogram te klikken.

Uiterlijk paneel

Via het Vormgevingspaneel heeft u toegang tot de weergegeven statische inhoud en eigenschappen van het geselecteerde element. U kunt deze waarden in de overeenkomstige velden invoeren of selecteren, waarna de stijlen onmiddellijk op uw elementen op het canvas worden toegepast.

Als er geen elementen op het canvas zijn geselecteerd, geeft dit paneel de instellingen van de huidige pagina of lay-out weer.

Paneel met extra opties

Het paneel Extra opties is bedoeld voor elementen waarvoor extra instellingsgegevens of opties nodig zijn.

Afhankelijk van het geselecteerde onderdeel kunt u de gegevensbron instellen of opties handmatig invoeren.

Paneel Mediaquery's

Met het paneel Mediaquery's kunt u de itemeigenschappen voor elk gedefinieerd breekpunt overschrijven.

Bedrijfslogicapaneel

Het Business Logic Panel biedt alle triggers voor een element en stelt u in staat elementinteractie tot stand te brengen wanneer de trigger wordt geactiveerd.