Ionic linee guida
copia linkIntroduzione
Nella versione 16.5 di Instant Developer è stato introdotto un nuovo tema che è possibile utilizzare con le applicazioni di tipo Mobile.
Tale tema (Ionic) utilizza classi ed i componenti del framework Ionic per la renderizzazione degli oggetti
Per ottenere questo risultato è stato riscritto il framework client delle applicazioni mobile in modo da potersi interfacciare con le classi di Ionic e garantire una user experience simile a quella nativa. Per questo motivo bisogna tenere conto del funzionamento del framework quando si crea una nuova applicazione o si aggiorna una delle applicazioni esistenti al tema Ionic.
Livelli di compatibilità
- iOS: vengono supportate le versioni iOS 9, 10 e 11 su dispositivi iPhone, iPad e iPad mini.
- Android: viene supportato Android dalla versione 6.0 fino alla versione 8 (Oreo).
Differenze con i temi mobile
-
Il tema Ionic non utilizza il posizionamento assoluto ma suddivide i campi presenti nel layout dettaglio di un pannello in righe.
Tutti i campi che si sovrappongono vengono inseriti nella stessa riga, ordinati da destra a sinistra. - Il tema Ionic non supporta il ridimensionamento verticale dei campi.
- I campi fuori lista non sono supportati e la posizione della lista è fissata all'inizio del pannello.
In questo esempio vengono mostrati due campi sovrapposti che verranno inseriti nella stessa riga.
Anche in questo caso i due campi verranno inseriti nella stessa riga.
Icone di tipo Font
Le applicazioni sviluppate con il tema Ionic non utilizzano immagini ma usano icone di tipo font, in particolare viene utilizzato ionIcons. E' possibile utilizzare queste icone in tutte le stringhe mostrate a video utilizzando il formato {{icon-nomeIcona|color}}.
Ad esempio per usare l'cona 'add' è sufficiente scrivere {{icon-add}} nel testo.
Gli oggetti che supportano tale caratteristica sono:
- Caption dei campi di pannello in lista e dettaglio.
- Contenuto dei campi statici e pulsanti.
- Caption dei commandset.
- Caption dei comandi.
- Caption dei frame.
- Span non abilitati.
- Caption delle pagine di pannello.
- Caption delle Tab.
- Testo contenuto nei nodi degli alberi.
E' possibile utilizzare una sola icona per oggetto, che viene estratta dal framework e posizionata all'interno dell'oggetto dove previsto da Ionic.
Inoltre si può specificare anche uno dei sette colori di tema (primary, secondary, danger, light, dark, bright, vibrant). Se non specificato verrà utilizzato primary.
Colori di tema
Il tema Ionic prevede sette colori di base, configurabili dal wizard dei parametri. Questi colori sono:
- accent (primary)
- secondary
- danger
- light
- bright
- dark
- vibrant
Questi colori possono essere utilizzati nelle proprietà ClassName degli oggetti per applicare le stilizzazioni previste da Ionic.
Scroll nativo
Tutti gli elementi scrollabili nell'applicazione utilizzeranno lo scroll nativo.
Questo è valido anche per i Book, nel caso abbiano una sola pagina o siano state spente le funzionalità di SnapToPage e OptimizeDom usando la procedura SetScrollMode. In caso contrario verrà utilizzato lo scroll simulato come nei temi precedenti.
FAB
E' possibile configurare un pannello perchè usi i FAB (Floating Action Button).
Questo può essere fatto scrivendo FAB nella proprietà CSSClass del pannello.
In questa modalità il pulsante di Inserimento e il pulsante di Modifica verranno mostrati come FAB e non nella toolbar superiore.
Personalizzazione classi di grigliatura
A partire dalla versione 18.5 è possibile inserire nella proprietà CSSClass dei frame token particolari per sovrascrivere gli attributi della cella della griglia calcolati dal framework.
I token devono avere questa forma: "{{attribute attribute}}".
ES: Orders.CSSClass = "{{col-sm-2 col-md-4}}"
Le classi definite all'interno del token vengono utilizzate solo nel caso di frame in una divisione orizzontale e permettono di personalizzare le classi applicate dal sistema alle colonne della griglia della videata.
Pulsante svuota campo date
Dalla versione 18.0.7000 è stato aggiunto un pulsante per svuotare il campo all'header dei selettori per i campi di tipo Date, Time e DateTime:
- il pulsante viene mostrato solo se il campo è opzionale e se ha un valore quando viene aperto il selettore;
- nel caso si volesse nascondere il pulsante è possibile usare la classe css picker-toolbar-clear-button impostando display:none; .
Icone di tipo logo
Dalla versione 18.0.7000 sono supportate le icone di tipo logo tra le icon string.
Per usare un icona di tipo logo è sufficiente definirla nella stringa ( {{icon-logo-twitter}} ).
Icone di tipo stringa nelle messageBox
Dalla versione 18.0.7000 è stato abilitato l'uso delle icone di tipo stringa nelle messagebox del tema Ionic.
Gestito CloseOnSelection
Dalla versione 18.0.7000 è stata abilitata la gestione della selezione della riga per le videate di lookup:
- la selezione viene gestita solo se il pannello non ha il layout dettaglio e la gestione automatica;
- ora toccare l'attivatore di un campo in dettaglio non dà più fuoco al campo, in questo modo non si apre la tastiera se viene aperta una nuova videata.
Configurare posizione toolbar di ricerca
Dalla versione 18.5.7200 è stata aggiunta la proprietà di pannello SearchInContent per poter configurare dove mostrare la toolbar di ricerca. Questa proprietà è supportata solo dal tema Ionic.
Larghezza cella di grigliatura
Dalla versione 18.5.7200 è possibile usare la proprietà CSSClass dei frame per impostare la larghezza da assegnare alla cella della griglia Ionic.
Gli attributi da assegnare vanno scritti tra i caratteri "{{" e "}}".
Ad esempio il valore "{{col-sm-10 col-md-8}} frame" imposta la classe "frame" sul frame e gli altri attributi sulla cella della griglia che contiene il frame.
Questa funzionalità è supportata solo nel tema Ionic. Dalla versione 18.0 la stessa funzionalità è presente anche nei temi Bootstrap e BootstrapZen.
Supportati gruppi collassabili
Dalla versione 18.5.7200 è stata abilitata la gestione del flag 'collassabile' dei gruppi di pannello nel layout dettaglio.
Gestito flag 'mostra bordi'
Dalla versione 18.5.7200 il flag dei pannelli 'mostra bordi' è stato gestito anche per il tema Ionic.
Per allineare il comportamento alla grafica del tema non vengono impostati bordi ma un padding di 5px attorno ai pannelli.
Visualizzazione tooltip
Dalla versione 18.5.7200 i tooltip modificano il padding superiore della cella, in modo da avere più spazio per essere visualizzati.
Questo comportamento allinea la gestione dei tooltip del tema Ionic a quella dei temi Mobile.
Stile visuale gruppi in dettaglio
Dalla versione 18.5.7200 le intestazioni dei gruppi in dettaglio vengono mostrate in grassetto, al contrario delle versioni precedenti; è sufficiente modificare lo stile visuale 'Default Mobile Style' per ritornare al comportamento precedente.
Debug su Caravel
Dalla versione 18.5.7200 è possibile vedere il debug di un'applicazione Ionic in Caravel.
Per aprire il debug è necessario usare la funzione DTTOpenDebug.
Come per gli altri temi Mobile il debug non è ottimizzato per la sua fruizione da dispositivo.
Swipe Menu per cancellazione in lista
Dalla versione 19.0.7400 è stato abilitato lo swipe menu per cancellare le righe della lista: lo swipe è abilitato se il pannello può cancellare e non è visibile la multiselezione.
Tastierino popup per campi numerici
Dalla versione 19.0.7400 è stato abilitato il tastierino popopver per i campi numerici nelle applicazioni realizzate con il tema Ionic.
Il tastierino sostituisce la tastiera nativa del dispositivo e può essere disabilitato usando il flag 'usa popup' dei campi di pannello.
Textarea e scrollbar in anteprima
A partire dalla versione 19.0.7400 le scrollbar vengono mostrate solo se il testo contenuto nel campo eccede la zona visibile, ovvero le scrollbar diventano visibili solo se attivate.
Nelle versioni precedenti le textarea mostrate in anteprima sul browser desktop mostravano sempre le scrollbar, anche se non necessarie.
Menu orizzontale nascosto se non ci sono CommandSet visibili
Dalla versione 19.0.7400 le applicazioni che utilizzano il tema Ionic nascondono il menù orizzontale se non ci sono CommandSet globali visibili.
Pannelli in lista su iOS
Prima della versione 19.0.7400 per visualizzare i pannelli in lista su iOS occorreva inserire questa classe CSS nel file custom.css :
.text-input {
margin: 12px 8px 13px 0;
padding: 0;
width: calc(100% - 8px);
}
Modalità scura per il tema Ionic
Nella versione 19.5.7600 è stato aggiunto il parametro di compilazione 'Tema Scuro Ionic'.
Questo parametro può avere tre valori:
- YES: L'applicazione viene mostrata usando la modalità scura.
- NO: L'applicazione viene mostrata usando la modalità chiara (come nelle versioni precedenti).
- AUTO: La modalità dell'applicazione viene scelta all'avvio in base all'impostazione del sistema operativo.
Note:
- L'impostazione AUTO dipende dal supporto del browser nell'identificare la modalità del sistema operativo; nel caso il browser non lo supporti verrà applicata la modalità chiara.
- Nel caso il parametro sia impostato a AUTO il sistema desatura i colori di accento del 30% in modalità scura, in modo che possano essere compatibili con entrambe le modalità.
- Nel caso il parametro sia impostato a YES o AUTO è necessario verificare i colori presenti nei Visual Style in modo da poterne garantire la corretta visualizzazione in entrambe le modalità; in particolare è necessario modificare il colore dello stile visuale Primary Key Field MOB sostituendo il rosso che è l'impostazione predefinita in dettaglio.
Titolo campo e combo di tipo Alert
Dalla versione 19.5.7600 le combo di tipo Alert mostrano anche il titolo del campo di pannello così da rendere più semplice per l'utente sapere quale campo sta modificando.
Le combo interessate sono quelle di tipo Alert nel tema Ionic mostrate su Smartphone o per i campi di tipo smartlookup.
Migliorato tastierino numerico
Sono stati effettuati i seguenti miglioramenti al tastierino numerico Ionic:
- è stata aggiunta l'intestazione del campo che si sta modificando ed il valore attuale;
- il font è stato reso più grande;
- il simbolo per il pulsante di inversione valore è stato modificato;
- ora il valore può venire completamente cancellato con una pressione prolungata sul pulsante C. Il tempo necessario ad attivare la cancellazione è di 2 secondi e può essere modificato cambiando il valore del parametro PopupControl.ClearTimerValue da Javascript.
Pulsante indietro su Android
Dalla versione 19.5.7600 in seguito alla pressione del pulsante indietro su disposiditi Android, il sistema segue le seguenti logiche:
- se c'è una combo aperta questa viene chiusa;
- se c'è una MessageBox o un InputBox aperto questa viene chiusa;
- se c'è un datepicker o tastierino numerico aperto questo viene chiuso;
- se il menù laterale è aperto viene chiuso;
- se nella videata attiva c'è un pannello in dettaglio questo viene portato in lista;
- se nella videata attiva c'è un albero e questo mostra un nodo espanso il nodo corrente viene chiuso ed il sistema torna al nodo precedente;
- se la videata mostra il pulsante indietro la videata viene chiusa;
- se la videata è modale o pupup e mostra il pulsante Chiudi questa viene chiusa.
Note
- Il sistema si ferma al verificarsi della prima condizione. Se nessuna delle condizioni è vera l'applicazione viene chiusa.
- Il comportamento del sistema può essere modificato personalizzando le funzioni javascript WebEntryPoint.OnBackButton e WebForm.OnBackButton.
Combo multicolonnari
Prima della versione 19.5.7600 per visualizzare una combo multicolonnare occorreva inserire nel file custom.css la seguente classe css:
.alert-radio-label span+span{
padding-left:5px;
}
Visualizzazione errata di campi di tipo combo
Prima della versione 19.5.7600 i campi di tipo combo in dettaglio non erano visualizzati correttamente se erano stati disegnati ad altezza predefinita (36px).
Anche nelle versioni precedenti era comunque possibile aumentare l'altezza del campo oppure inserire questa regola CSS :
ion-select {
padding: 8px 8px 6px 16px;
}
Multiselezione e allineamento intestazione
Per attivare la multiselezione prima della versione 20.0.7800, al fine di mantenere l'intestazione del primo campo allineata ai valori, occorre utilizzare queste classi CSS nel file custom.css :
ion-list.show-multiple-sel > ion-list-header.list-header-md > .item-inner { margin-left: 56px; }
ion-list.show-multiple-sel > ion-list-header.list-header-ios > .item-inner { margin-left: 38px; }
Altezza intestazione campi in lista
Dalla versione 20.0.7800 è possibile impostare l'altezza dell'intestazione dei campi in lista.
La struttura del framework Ionic imposta l'altezza mimina dell'intestazione a 40px (se visibile).
Colore pulsanti e colore di accento
Prima della versione 20.0.7800 per mostrare alla pressione di un pulsante il colore di accento impostato occorre inserire questa classe CSS nel file custom.css:
.button.activated {
/* impostare il colore desiderato */
background-color: #32DB64;
}
Box cliccabili contenute in box scrollabili
Dalla versione 20.5.8500 le box contenute in box scrollabili possono essere rese cliccabili.
Nelle versioni precedenti se una box Mastro aveva il flag Mostra Scrollbar attivato le box contenute al suo interno non erano cliccabili. Pertanto se si collegava una procedura alla box questa non veniva attivata.
Comandi vocali su Ionic
Dalla versione 21.0.8100 i comandi vocali sono supportati nelle applicazioni con tema Ionic.
OnMouseClick e multiselezione attiva
Dalla versione 21.0.8100, se il pannello è impostato con multiselezione attiva, l'evento OnMouseClick contiene il parametro Row. Nelle versioni precedenti era valorizzato -1.
Il parametro Column vale sempre -1; questo limite è strutturale e non può essere gestito.
Icona mostrata in un pulsante primary
Dalla versione 22.0.8500 sono visibili le icone di tipo stringa nei pulsanti con colore primary: ad esempio, "{{icon-add}}".
Nelle versioni precedenti occorre specificare il colore dell'icona per renderla visibile: ad esempio "{{icon-add|secondary}}".
Funzionalità non supportate
Le funzionalità non supportate rispetto agli altri temi mobile sono le seguenti:
- D&D.
- Lista raggruppata.
- Campi HTML Editor.
- Screen Zone.
- Scrollbar di ricerca.
- Posizione etichette della TabbedView sinistra e destra.
- Editing in lista.
- Selezione testuale.
- Stampa in anteprima di un Book non mostrato nella videata.
Nota Bene
- Per il deploy su IIS di un'applicazione con tema Ionic è necessario che IIS sia abilitato a servire file con estensione .woff e .woff2. Potrebbe essere necessario aggiungerlo ai mime/type supportati dal server.
Ultima modifica: 26/07/2023 / Validità: da 16.5.6850