eTemplate è un motore di rendering utilizzato nelle precedenti versioni di EGroupware per generare l’interfaccia utente per la maggior parte delle applicazioni. Prende il contenuto di un’applicazione più un modello e lo rende sul server come HTML. Quando l’utente invia quel modulo HTML nel suo browser, il motore eTemplate lo riceve di nuovo sul server, convalida l’input e lo passa di nuovo all’applicazione.
Tutto questo veniva fatto sul server e la reazione all’input dell’utente richiedeva per lo più un giro del server. Non c’erano API per manipolare un template già renderizzato sul lato client o browser.
Tutto questo cambia con eTemplate2 nella 14.1:
le applicazioni utilizzano un’API in gran parte identica sul lato server, sono facili da portare alla 14.1
che eT2 API invia il contenuto come JSON (JavaScript Object Notation) incl. un url alla descrizione di un modello XML per il browser
Il motore eTemplate2 nel browser carica il modello e rende l’interfaccia utente (UI)
la parte client-side dell’app interagisce direttamente con l’eTemplate: ad es. mostra o nasconde un elemento dell’interfaccia utente / widget o cambia il suo aspetto
eTemplate e app usano EGroupware API lato client, per esempio. per interrogare una preferenza dell’utente, un dettaglio dell’account o il titolo di un link
se viene usato un nuovo modello a schede, ad esempio il modello 14.1 Pixelegg, l’API persiste sul client e cache i dati richiesti dal server
Potreste chiedere: tutto questo è molto teorico, cosa ne ricavo? Descriverò un paio di nuovi widget, per illustrare i grandi miglioramenti di usabilità nella 14.1 e le nuove possibilità disponibili:
Menu contestuali e barre degli strumenti
Elenchi, alberi in fatti tutti gli elementi dell’UI possono ora avere un menu contestuale che mostra quali azioni sono disponibili su una riga o un elemento dell’albero. Questo sostituisce a volte un numero enorme di icone che avevamo nelle liste prima. Alcune applicazioni ad es. la nuova posta usa ora le barre degli strumenti per mostrare le azioni disponibili. L’utente può riordinare queste icone secondo le proprie esigenze e anche nascondere quelle meno utilizzate in un menu a tendina “more…”.
Trascinare e rilasciare all’interno di EGroupware e da e verso il tuo desktop
I file possono essere caricati trascinandoli dal desktop su un popup che modifica una voce, ad esempio. un InfoLog o una mail composta. Puoi anche trascinare un file su una riga di una lista.
Il file può essere trascinato fuori, per esempio. dall’app Filemanager sul tuo desktop, se il tuo browser lo supporta, attualmente solo Chrome lo fa.
Caricamenti di file
non sono più limitati dal limite di memoria di PHP, grazie al nostro supporto di API di file html5.
L’applicazione Filemanager è ora un cittadino di prima classe e i file memorizzati in essa sono disponibili ovunque per allegare o collegare, mentre le versioni precedenti di EGroupware richiedevano di scaricare e ricaricare un file del genere.
Le voci di EGroupware possono anche essere collegate trascinandole su un’altra voce.
Scorrimento senza fine nelle liste
Prima di EGroupware 14.1 tutte le applicazioni web dovevano implementare qualcosa chiamato paginazione per le loro liste. L’applicazione mostrava solo un numero limitato di righe in una lista e le frecce per caricare il set di righe successivo o precedente. Gli utenti dovevano sempre scegliere tra una lista veloce e breve o una lunga e lenta.
Le liste di eTemplate2 ora mostrano una barra di scorrimento per l’intera lista e caricano ulteriori voci su richiesta mentre si scorre in alto o in basso.
Le liste di eTemplate2 ora permettono anche di ridimensionare le loro colonne e di avere una navigazione da tastiera. Permettono di selezionare più righe ed eseguire azioni su di esse.
Caricamento di parti UI su richiesta
eTemplate2 può posticipare il rendering e anche il caricamento di elementi UI non visibili. Eg. una scheda della cronologia non carica il suo contenuto prima che un utente la cambi. Poi impiega la lista a scorrimento infinito sopra descritta per mostrare tutta la storia di una voce, ma carica solo un paio di righe dal server.
I set di template incorniciati come quello nuovo di Pixelegg caricano anche solo l’app attiva, rimandando il caricamento di tutte le altre aperte finché l’utente non sceglie di guardarle.
Questo è solo un estratto dei nuovi elementi dell’UI e dei miglioramenti di usabilità resi disponibili da eTemplate2 e la sua attenzione sul rendering e l’interazione con l’utente su client- aka. lato browser.
Con la 14.1 ci siamo concentrati soprattutto sullo sviluppo del motore eTemplate2 e sul porting delle applicazioni con le caratteristiche che già avevano. Le prossime versioni vedranno un uso ancora maggiore di queste nuove possibilità e riscritture complete delle applicazioni come abbiamo fatto nella 14.1 con la posta e parzialmente con l’amministrazione. Ne parlerò nei miei prossimi articoli.
Ralf Becker
Direttore dello sviluppo del software
