Apps bouwen

Om een ​​applicatie te bouwen, moet u lay-outs en pagina's maken, deze vullen met inhoud en web-app-interactie instellen.

Indelingen

Eerder introduceerden we het concept van Lay-outs . Om met het maken van de lay-out te beginnen, moet u eerst de structuur van uw applicatie schetsen en de paginasjablonen identificeren die u wilt gebruiken.

Als u iets mist, hoeft u zich geen zorgen te maken. U kunt de lay-outlijst naar wens uitbreiden.

Lay-outlijst

De Lay-outlijst bevat alle lay-outs van uw webapplicatie. Hier kunt u diverse bewerkingen uitvoeren en lay-outs beheren.

Om toegang te krijgen tot de Lay-outlijst , selecteert u het 4e tabblad in de linkerwerkbalk op het tabblad UI Designer of gebruikt u de sneltoets 4 . Al uw applicatie-indelingen worden hier weergegeven.

Elke applicatie moet minimaal één lay-out hebben. Wanneer u een nieuwe applicatie aanmaakt, worden er automatisch één of meerdere lay-outs aangemaakt, afhankelijk van de geselecteerde applicatiesjabloon. Eén ervan is gemarkeerd als **standaard**.

In de lay-outlijst kunt u de volgende acties uitvoeren op lay-outs:

• selecteren,
• nieuwe toevoegen,
• hernoemen,
• duplicaat,
• verwijderen.

Standaard layout

De standaardlay-out wordt automatisch geselecteerd uit de lay-outlijst wanneer u een nieuwe pagina maakt. Dit kan echter indien nodig worden vervangen door een andere lay-out.

Het gebruik van de standaardlay-out verhoogt de ontwikkelingssnelheid. Daarom raden we aan de meest gebruikte lay-out als standaard te gebruiken. Houd er rekening mee dat er slechts één lay-out tegelijk als standaard kan worden ingesteld. Het overschrijven van de standaardlay-out heeft geen invloed op bestaande pagina's, tenzij de oorspronkelijke lay-out wordt verwijderd.

De standaardlay-out is gemarkeerd met een blauw sterpictogram in de lay-outlijst.

Maak een nieuwe lay-out

U kunt verschillende lay-outs ontwerpen voor verschillende paginatypen. Volg deze stappen om een ​​nieuwe lay-out te maken:

• Druk op CTRL/⌘+L of open de lay-outlijst (sneltoets 4 ) vanuit de linkerwerkbalk van de UI-ontwerper en klik op de plusknop in de paneelkop.
• Geef de lay-outnaam op in de modal die verschijnt. We raden u aan een leesbare titel te gebruiken die de structuur van de lay-out weerspiegelt, zodat u deze snel kunt herkennen bij het toewijzen van lay-outs aan de pagina's.
• Selecteer lay-outsjabloon:
  • Basis: blanco sjabloon zonder extra elementen, goed voor pagina's zonder navigatie, zoals auth- of foutpagina's.
  • Zijbalk links: sjabloon met zijbalkmenu, goed voor admin-panelen, CMS, ERP, enz.
  • Topmenu: sjabloon met topmenu, goed voor websites of landingspagina's.
• Schakel de instelling Standaardlay-out in als deze lay-out standaard moet worden gemaakt.
• Klik op de knop Maken .

Er is geen limiet aan het aantal lay-outs dat u kunt maken.

Naam van lay-out wijzigen

Om de naam van een lay-out te wijzigen, dubbelklikt u op de naam van de lay-out, brengt u de nodige wijzigingen aan en drukt u op Enter om op te slaan of Esc om de wijzigingen ongedaan te maken.

Lay-out dupliceren

Een lay-out dupliceren, samen met de inhoud en instellingen:

1. Beweeg over de lay-out die u wilt dupliceren.
2. Klik op het pictogram Dupliceren.

De gedupliceerde lay-outs verschijnen automatisch in de lijst met een index toegevoegd aan hun namen. Als u de standaardlay-out dupliceert, wordt de bronlay-out niet overschreven door de nieuw gemaakte lay-out.

Lay-out verwijderen

Om de lay-out te verwijderen:

1. Beweeg over de lay-out die u wilt verwijderen.
2. Klik op het prullenbakpictogram.
3. Bevestig verwijdering.

Als u de lay-out wilt verwijderen die aan pagina's is gekoppeld, moet u de lay-out voor gekoppelde pagina's opnieuw toewijzen voordat u deze verwijdert. Dit kan via het bevestigingsmodaliteit of handmatig per pagina.

Als u de standaardlay-out wilt verwijderen, moet u een andere lay-out als standaard instellen.

❗️Belangrijk: u kunt een verwijderingsbewerking voor een lay-out niet ongedaan maken.

opmaak instellingen

Klik op de doellay-out in de lay-outlijst om toegang te krijgen tot de instellingen via de linker zijbalk Instellingen.

Vanuit de koptekst van de zijbalk Instellingen kunt u de naam van de geselecteerde lay-out wijzigen door op de naam te klikken, of deze verwijderen.

U kunt de geselecteerde lay-out als standaard instellen en hier alle gekoppelde pagina's bekijken. Om een ​​gekoppelde pagina te bewerken, klikt u erop in de lijst.

Bovendien kunt u bedrijfslogica voor de lay-out bouwen.

Indeling Bedrijfslogica

Selecteer op het tabblad Bedrijfslogica een trigger om een ​​actie in te stellen. Hierdoor wordt de bedrijfsproceseditor geopend, gericht op de geselecteerde trigger.

Hier kunt u een actiestroom maken voor een of meer triggers, zoals het implementeren van navigatie, het voorwaardelijk wijzigen van eigenschappen, het wisselen van zichtbaarheid, het verzenden van gegevens en meer. Raadpleeg onze handleiding over het bouwen van een bedrijfsproces voor meer informatie.

🔔 Voor optimale applicatieprestaties bouw je complexe bedrijfsprocessen aan de backend-kant.

Lay-out bewerken

Lay-outs passen, als globale componenten en paginasjablonen, automatisch alle wijzigingen toe op alle gekoppelde pagina's.

Om een ​​lay-out te bewerken, selecteert u het doelitem in de lay-outlijst en voegt u alle benodigde componenten toe vanuit het paneel met UI-elementen door ze naar het canvasgebied te slepen en neer te zetten.

Houd er bij het bewerken van een lay-out rekening mee dat de sjabloon een onveranderlijke paginacontainercomponent bevat. Dit bepaalt de plaatsing van uw pagina-inhoud binnen de sjabloon. De paginacontainer is groen gemarkeerd en kan geen interne componenten bevatten in de lay-outbewerkingsmodus. De inhoud wordt rechtstreeks op de pagina gedefinieerd en de grootte van de paginacontainer wordt bepaald door de bovenliggende component.

Pagina's

Nadat u de benodigde lay-outs heeft gemaakt, is dit het beste moment om te beginnen met het maken van de webapp-pagina's. Nadat u de benodigde lay-outs heeft gemaakt, is dit het beste moment om te beginnen met het maken van de webapp-pagina's. Elke webapplicatiepagina biedt inhoud die in de webbrowser van de gebruiker wordt weergegeven via de doel-URL.

Pagina's Boom

Paginaboom toont u de structuur van uw website: uw sitepagina's en de mappen waarin deze pagina's zijn ondergebracht. Hier kunt u verschillende bewerkingen uitvoeren en pagina's en mappen ordenen.

Om de paginaboom te openen, selecteert u het derde tabblad in de linkerwerkbalk van de UI Designer of drukt u op 3. Hier worden al uw toepassingspagina's weergegeven.

Elke aanvraag moet minimaal één pagina hebben. Wanneer u een nieuwe applicatie aanmaakt, worden er al één of meerdere pagina's aangemaakt, afhankelijk van de geselecteerde applicatiesjabloon.

U kunt de volgende acties uitvoeren op pagina's en mappen:

• selecteren,
• nieuwe pagina of map toevoegen,
• hernoemen,
• verplaats de pagina en mappen naar/uit de map,
• duplicaat,
• verwijderen.

Indexpagina

De Indexpagina is de eerste pagina van uw aanvraag. Wanneer uw toepassing wordt uitgevoerd, wordt deze pagina als eerste weergegeven als u geen omleidingen heeft gemaakt.

De Indexpagina heeft het Huispictogram in de paginaboom gemarkeerd en kan niet naar een andere pagina worden geschakeld. Standaard is deze pagina gekoppeld aan de standaardlay-out die automatisch wordt gemaakt, maar u kunt deze wijzigen in de Pagina-instellingen.

Nieuwe pagina maken

Om een ​​pagina aan uw webapplicatie toe te voegen:

1. Druk op CTRL/⌘+P of open de paginastructuur (sneltoets 3 ) vanuit de linkerwerkbalk van de UI-ontwerper en klik op de plusknop in de koptekst van het paneel.
2. Geef de pagina-URL op in het modale venster dat wordt weergegeven.
3. Selecteer de bovenliggende map voor de pagina of laat het veld leeg om de pagina in de hoofdmap te plaatsen.
4. Selecteer Pagina-indeling .
5. Klik op de knop Maken .

💡 Om een ​​geneste route te bouwen zonder mappen te maken, geeft u een volledig pad naar de doelpagina op in het veld Pagina-URL, bijvoorbeeld instellingen/profiel. In dit geval wordt de pagina Profiel genest in de map Instelling gemaakt.

U kunt een onbeperkt aantal pagina's en mappen aanmaken voor uw webapplicatie.

🔔 Web-apps die met AppMaster Studio zijn gebouwd, genereren app-routing op basis van pagina-URL. Gebruik dus bij het genereren van pagina's de pagina-URL in het juiste formaat en gebruik voor het beste begrip een gebruiksvriendelijke URL.

Maak een nieuwe map

U kunt mappen maken om de navigatie te organiseren en de juiste router voor de pagina's te bouwen. Een nieuwe map maken:

• Druk op CTRL/⌘+SHIFT+P of open de paginastructuur (sneltoets 3) vanuit de linkerwerkbalk van de UI-ontwerper en klik op de knop Map in de kop van het paneel.
• Geef de mapnaam op in het modale venster dat verschijnt.
• Selecteer indien nodig de bovenliggende map om een ​​geneste router te maken
• Klik op de knop Maken .

UI-elementen

De gebruikersinterface van uw app bestaat uit elementen: invoervelden, knoppen, afbeeldingen, selectievakjes, kalenders, afbeeldingen en pictogrammen die elk een specifiek doel dienen.

AppMaster biedt een visuele editor met slepen en neerzetten waarmee u elementen rechtstreeks op de pagina kunt kiezen en plaatsen in plaats van code te schrijven en er onmiddellijk een voorbeeld van te bekijken.

Elementen toevoegen

Een element aan het canvas toevoegen:

1. Open het paneel UI-elementen met een lijst met UI-elementen (snelkoppeling 1 ).
2. Selecteer het benodigde element of gebruik de zoekbalk.
3. Sleep het geselecteerde element naar de pagina of het lay-outcanvas.

Om het sleepelement binnen het doel te plaatsen, plaatst u het element boven de doelelementen.

Om een ​​element voor of na een element toe te voegen, sleept u het element boven de doelrand totdat er een scheidingsteken verschijnt.

De scheidingslijn is afhankelijk van de richting van de bovenliggende container:

• Als de bovenliggende container Direction Vertical is , worden elementen vanaf de boven- of onderkant toegevoegd.
• Als de bovenliggende container Direction Horizontaal is , worden elementen van links of rechts toegevoegd.

Elementen aanpassen

Elk onderdeel dat u aan het canvas toevoegt, is voorzien van een uitgebreide reeks aanpasbare instellingen. Met elementeigenschappen kunt u zowel het uiterlijk van het element als de gegevens die worden weergegeven beheren.

Een element configureren:

• Selecteer de doelcomponent op het canvas.
• Navigeer naar het deelvenster Uiterlijk, het eerste tabblad in de rechterzijbalk.
• Kies in het paneel het specifieke instellingsitem dat u wilt wijzigen.
• Voer uw voorkeurswaarden in de daarvoor bestemde velden in.

Het canvas reageert in realtime en laat uw aanpassingen onmiddellijk zien.

Voor extra hulp kunt u uw muiscursor kort over een instelling bewegen. Er verschijnt tooltip met een beknopte beschrijving van de functie van die instelling.

Naast deze interactieve functies verbetert AppMaster de aanpassingsmogelijkheden via de speciale bedrijfsprocesblokken, Eigenschappen instellen en Gegevens instellen . Deze blokken bieden een geavanceerd toegangsniveau, waardoor u de instellingen van elk onderdeel programmatisch in uw webapplicatie kunt wijzigen.