Creazione di app

Per creare un'applicazione, devi creare layout, pagine, riempirli di contenuti e impostare l'interazione dell'app Web.

Layout

In precedenza abbiamo introdotto il concetto di layout . Per iniziare la creazione del layout, devi prima delineare la struttura della tua applicazione e identificare i modelli di pagina da utilizzare.

Se ti perdi qualcosa, non preoccuparti. È possibile aumentare l'elenco dei layout come e quando richiesto.

Elenco dei layout

L'Elenco layout fornisce tutti i layout della tua applicazione web. Qui è possibile eseguire una serie di operazioni e gestire i layout.

Per accedere all'Elenco layout , selezionare la quarta scheda sulla barra degli strumenti sinistra nella scheda Progettazione interfaccia utente o utilizzare il tasto di scelta rapida 4 . Tutti i layout dell'applicazione verranno visualizzati qui.

Ogni applicazione deve avere almeno un layout. Quando crei una nuova applicazione, verranno creati automaticamente uno o più layout a seconda del modello di applicazione selezionato. Uno di questi è contrassegnato come **predefinito**.

Nell'Elenco layout è possibile eseguire le seguenti azioni sui layout:

• Selezionare,
• aggiungere nuova,
• rinominare,
• duplicare,
• eliminare.

Layout predefinito

Il layout predefinito viene selezionato automaticamente dall'elenco dei layout quando si crea una nuova pagina. Tuttavia, se necessario, questo può essere sostituito con un layout diverso.

L'utilizzo del layout predefinito aumenta la velocità di sviluppo, quindi ti consigliamo di utilizzare il layout utilizzato più frequentemente come predefinito. Tieni presente che è possibile impostare come predefinito solo un layout alla volta. La sostituzione del layout predefinito non influisce sulle pagine esistenti a meno che il layout iniziale non venga eliminato.

Il layout predefinito è contrassegnato da un'icona a forma di stella blu nell'elenco dei layout.

Crea nuovo layout

Puoi progettare layout diversi per diversi tipi di pagina. Segui questi passaggi per creare un nuovo layout:

• Premi CTRL/⌘+L o apri l'Elenco layout (scorciatoia 4 ) dalla barra degli strumenti sinistra dell'UI Designer e fai clic sul pulsante Più sull'intestazione del pannello.
• Fornisci il nome del layout nella finestra modale visualizzata. Si consiglia di utilizzare un titolo leggibile che rifletta la struttura del layout per una rapida identificazione durante l'assegnazione dei layout alle pagine.
• Seleziona modello di layout:
  • Base: modello vuoto senza elementi aggiuntivi, ottimo per pagine senza navigazione, come pagine di autenticazione o di errore.
  • Barra laterale a sinistra: modello con menu della barra laterale, ottimo per pannelli di amministrazione, CMS, ERP, ecc.
  • Menu principale: modello con menu principale, ottimo per siti Web o pagine di destinazione.
• Abilitare l'impostazione Layout predefinito se questo layout deve essere reso predefinito.
• Fare clic sul pulsante Crea .

Non c'è limite al numero di layout che puoi creare.

Rinominare il layout

Per rinominare un layout, fare doppio clic sul nome del layout, apportare le modifiche necessarie e premere Enter per salvare o Esc per annullare le modifiche.

Duplicazione del layout

Per duplicare un layout, insieme al suo contenuto e alle sue impostazioni:

1. Passa il mouse sopra il layout che desideri duplicare.
2. Fare clic sull'icona Duplica.

I layout duplicati appaiono automaticamente nell'elenco con un indice aggiunto ai loro nomi. Se duplichi il layout impostato come predefinito, il layout di origine non verrà sovrascritto da quello appena creato.

Eliminazione del layout

Per rimuovere il layout:

1. Passa il mouse sopra il layout che desideri eliminare.
2. Fai clic sull'icona del cestino.
3. Confermare la cancellazione.

Per eliminare il layout collegato a qualsiasi pagina, è necessario riassegnare il layout per qualsiasi pagina collegata prima di eliminarla. Questo può essere fatto attraverso la modalità di conferma oppure manualmente per ogni pagina.

Per eliminare il layout predefinito, è necessario impostare un altro layout come predefinito.

❗️ Importante: non è possibile annullare un'operazione di eliminazione del layout.

Impostazioni di Layout

Fare clic sul layout di destinazione nell'Elenco layout per accedere alle relative impostazioni dalla barra laterale delle impostazioni di sinistra.

Dall'intestazione della barra laterale Impostazioni, puoi rinominare il layout selezionato facendo clic sul nome o eliminarlo.

Puoi impostare il layout selezionato come predefinito e visualizzare tutte le pagine collegate qui. Per modificare una pagina collegata, fare clic su di essa nell'elenco.

Inoltre, puoi creare una logica aziendale per il layout.

Logica aziendale del layout

Nella scheda della logica aziendale, seleziona un trigger per impostare un'azione. Verrà aperto l'editor dei processi aziendali, incentrato sul trigger selezionato.

Qui puoi creare un flusso di azioni per uno o più trigger, come l'implementazione della navigazione, la modifica condizionale delle proprietà, l'attivazione/disattivazione della visibilità, l'invio di dati e altro ancora. Per ulteriori informazioni, consulta la nostra guida sulla creazione di un processo aziendale.

🔔 Per prestazioni ottimali delle applicazioni, crea processi aziendali complessi sul lato back-end.

Modifica della disposizione

I layout, come componenti globali e modelli di pagina, applicano automaticamente tutte le modifiche a tutte le pagine collegate.

Per modificare un layout, seleziona l'elemento di destinazione nell'elenco dei layout e aggiungi tutti i componenti necessari dal pannello degli elementi dell'interfaccia utente trascinandoli nell'area di disegno.

Durante la modifica di un layout, ricorda che il modello include un componente contenitore di pagina immutabile. Ciò determina il posizionamento del contenuto della pagina all'interno del modello. Il contenitore della pagina è evidenziato in verde e non può contenere componenti interni durante la modalità di modifica del layout. Il contenuto è definito direttamente nella pagina e la dimensione del contenitore della pagina è determinata dal suo componente principale.

Pagine

Dopo aver creato i layout necessari, è il momento migliore per iniziare a creare le pagine dell'app Web. Dopo aver creato i layout necessari, è il momento migliore per iniziare a creare le pagine dell'app Web. Ogni pagina dell'applicazione Web fornisce il contenuto visualizzato nel browser Web dell'utente tramite l'URL di destinazione.

Albero delle pagine

L'albero delle pagine ti mostra la struttura del tuo sito web: le pagine del tuo sito e le cartelle che ospitano quelle pagine. Qui è possibile eseguire varie operazioni e organizzare pagine e cartelle.

Per aprire l'albero delle pagine, seleziona la terza scheda dalla barra degli strumenti sinistra dell'UI Designer o premi 3. Qui verranno visualizzate tutte le pagine dell'applicazione.

Ogni domanda deve avere almeno una pagina. Quando crei una nuova applicazione, vengono già create una o più pagine a seconda del modello di applicazione selezionato.

È possibile eseguire le seguenti azioni su pagine e cartelle:

• Selezionare,
• aggiungi una nuova pagina o cartella,
• rinominare,
• spostare la pagina e le cartelle nella/fuori cartella,
• duplicare,
• eliminare.

Pagina indice

La pagina Indice è la pagina iniziale della tua domanda. Quando l'applicazione viene eseguita, questa pagina verrà visualizzata per prima se non hai creato alcun reindirizzamento.

La pagina Indice contrassegnata dall'icona Casa nell'albero delle pagine e non può essere spostata in un'altra pagina. Per impostazione predefinita, questa pagina è collegata al layout predefinito creato automaticamente, ma puoi modificarlo nelle Impostazioni della pagina.

Crea nuova pagina

Per aggiungere una pagina alla tua applicazione web:

1. Premi CTRL/⌘+P o apri l'albero delle pagine (scorciatoia 3 ) dalla barra degli strumenti sinistra dell'UI Designer e fai clic sul pulsante Più sull'intestazione del pannello.
2. Fornisci l' URL della pagina nella finestra modale visualizzata.
3. Seleziona la cartella principale per la pagina o lascia il campo vuoto per posizionare la pagina alla radice.
4. Seleziona Layout di pagina .
5. Fare clic sul pulsante Crea .

💡 Per creare un percorso annidato senza creare cartelle, fornisci un percorso completo alla pagina di destinazione nel campo URL della pagina, ad esempio impostazioni/profilo. In questo caso la pagina Profilo verrà creata nidificata nella cartella Impostazioni.

Puoi creare pagine e cartelle illimitate per la tua applicazione web.

🔔 Le app Web create con AppMaster Studio generano il routing delle app in base all'URL della pagina, quindi nel modulo di generazione della pagina, utilizza l'URL della pagina nel formato corretto e, per una migliore comprensione, utilizza un URL amichevole.

Crea una nuova cartella

Puoi creare cartelle per organizzare la navigazione e costruire il router giusto per le pagine. Per creare una nuova cartella:

• Premi CTRL/⌘+SHIFT+P o apri la struttura delle pagine (scorciatoia 3) dalla barra degli strumenti sinistra dell'UI Designer e fai clic sul pulsante Cartella sull'intestazione del pannello.
• Fornire il nome della cartella nella finestra modale visualizzata.
• Seleziona la cartella principale se necessario per creare un router nidificato
• Fare clic sul pulsante Crea .

Elementi dell'interfaccia utente

L'interfaccia utente della tua app è composta da elementi: campi di input, pulsanti, immagini, caselle di controllo, calendari, immagini e icone, ciascuno con uno scopo specifico.

AppMaster offre un editor visivo drag-and-drop che ti consente di selezionare e posizionare gli elementi direttamente sulla pagina invece di scrivere codice e visualizzarlo immediatamente in anteprima.

Aggiunta di elementi

Per aggiungere un elemento alla tela:

1. Apri il pannello Elementi dell'interfaccia utente con un elenco di elementi dell'interfaccia utente (scorciatoia 1 ).
2. Seleziona l'elemento necessario o utilizza la barra di ricerca.
3. Trascina l'elemento selezionato sulla pagina o sull'area di disegno del layout.

Per posizionare l'elemento di trascinamento all'interno della destinazione, rilascia l'elemento sopra gli elementi di destinazione.

Per aggiungere un elemento prima o dopo un elemento, trascina l'elemento sopra il bordo della destinazione finché non viene visualizzato un separatore.

Il divisore dipende dalla direzione del contenitore principale:

• Se la Direzione del contenitore principale è Verticale , gli elementi verranno aggiunti dall'alto o dal basso.
• Se la direzione del contenitore principale è orizzontale , gli elementi verranno aggiunti da sinistra o destra.

Personalizza elementi

Ogni componente aggiunto all'area di disegno è dotato di un set completo di impostazioni personalizzabili. Con le proprietà dell'elemento, puoi gestire sia l'aspetto dell'elemento che i dati che verranno visualizzati.

Per configurare un elemento:

• Seleziona il componente di destinazione nell'area di disegno.
• Passare al pannello Aspetto, la prima scheda sulla barra laterale destra.
• All'interno del pannello, scegli la voce di Impostazione specifica che desideri modificare.
• Inserisci i tuoi valori preferiti nei campi designati.

La tela risponde in tempo reale, mostrando immediatamente le tue modifiche.

Per ulteriori indicazioni, posiziona brevemente il cursore del mouse su un'impostazione per visualizzare una descrizione comando che fornisce una descrizione concisa della funzione di tale impostazione.

Oltre a queste funzionalità interattive, AppMaster migliora le capacità di personalizzazione attraverso i suoi speciali blocchi di processi aziendali, Imposta proprietà e Imposta dati . Questi blocchi forniscono un livello di accesso avanzato, consentendoti di modificare le impostazioni di ciascun componente in modo programmatico nella tua applicazione web.