interfaccia
Competenza: realizzare le pagine dell'app. con testo, immagine e bottoni di comando.
Il primo passaggio per creare una nuova app. prima ancora di passare alla programmazione attraverso codice è quello di realizzare l'interfaccia.
Cliccando sul bottone "Rinomina", come indicato dalla freccia 1, possiamo dare il nome alla nuova app., si colorerà di bianco la zona del nome e potremmo scrivere il nuovo nome. Dopo aver premuto rinomina ci sarà il pulsante salva al posto del pulsante rinomina, cliccandoci sopra, dopo aver modificato il nome, avremo dato il nome alla nostra app.
La freccia 2 ci indica che per costruire l'interfaccia bisogna cliccare sul pulsante interfaccia. Come potete osservare c'è sia il pulsante interfaccia che il pulsante codice, perché la programmazione di un'app. si realizza passando di volta in volta dall'interfaccia al codice e viceversa.
Lo schermo è diviso in tre zone dove operare:
- a destra la zona dell'area di lavoro (riquadro rosso),
- al centro la cassetta degli attrezzi (riquadro verde),
- a sinistra c'è lo schermo del cellulare dove poter comporre l'interfaccia della mia app.
Nell'area di lavoro troviamo quattro opzioni:
- 1 è l'id (identificativo cioè il nome di quello schermo da utilizzare all'interno del codice di programmazione quando mi riferisco a questa pagina), consiglio di non cambiare nessun id perché quando scrivo il codice spesso trovo il nome dell'id. già impostato di default.
- 2 è il colore dello schermo.
- 3 ho la possibilità di inserire un'immagine a tutto schermo nella mia pagina.
- 4 posso duplicare la pagina in questo caso lo screen1.
Per inserire un testo posso utilizzare una casella "Text Area" semplicemente trascinando con il mouse dalla cassetta degli attrezzi allo schermo del cellulare. Si tratta di un riquadro che posso modificare:
- il colore dell'interno e del bordo della casella,
- la formattazione del testo: colore, forma, dimensione e posizione (destra, centro o sinistra),
- la dimensione della casella in verticale e in orizzontale,
- la posizione della casella in verticale e in orizzontale,
- la bordatura della casella (posso arrotondare gli spigoli del rettangolo).
Un'altra possibilità di inserimento del testo è l'attrezzo "abc Label" ma senza riquadro .
Sulla destra dell'area di lavoro si trovano i bottoni:
- Delete che ci consente di cancellare la casella di testo,
- Dupplicate che ci consente di duplicare la casella di testo,
- Apply Theme applica la formattazione iniziale che aveva la casella cioè quella di defaul, consiglio di non premere perché distruggi le modifiche che hai creato alla casella di testo.
Anche i comandi bottone ed casella d'immagine vengono presi dalla cassetta degli attrezzi e trascinati nello schermo del cellulare.
Nell'area di lavoro si trovano tutte le indicazioni di modifica di entrambi i comandi inseriti nell'interfaccia.
Bisogna solo cimentarsi per capire le possibili modifiche che si possono apportare in entrambi i comandi nell'area di lavoro.
Una sola precisazione per entrambi i comandi:
- nella casella immagine cliccando su choose si può scegliere l'immagine tra le cartelle del proprio pc o tablet.
- nel bottone ci sono due scritte, la freccia 1 si riferisce all'id (utilizzo questo nome quando voglio riferirmi a quel bottone nel codice di programmazione) mentre la freccia 2 si riferisce alla parola che compare scritta sul pulsante dello schermo.
Per inserire nuove pagine alla mia app. posso prendere dalla cassetta degli attrezzi e trascinare il disegnino Screen e si creerà un nuovo schermo.
Oppure se voglio duplicare lo schermo attuale basta cliccare sul pulsante duplica ma prima devo accertarmi che nell'area di lavoro è evidenziato lo screen perché se risultasse evidenziato ad esempio il bottone verrebbe duplicato il bottone. In alto a destra si trova una casella con menu a discesa e posso scegliere lo screen1 da duplicare. Successivamente apporterò delle modifiche per la seconda pagina.
In conclusione, tutto quello che voglio inserire nell'interfaccia lo prendo dalla cassetta degli attrezzi e lo trascino sullo schermo del cellulare.
Invece, se qualcosa che è sull'interfaccia ritengo di doverlo eliminare non faccio altro che trascinarlo dallo schermo del cellulare alla cassetta degli attrezzi che verrà eliminato.
L'area riquadrata giallo/verde ci consente di modificare il tema grafico/colore della mia interfaccia.
