• Renderizzato in HTML

  • Renderizzato in PDF

  • Renderizzato in CSV

Questo DSL viene utilizzato per visualizzare informazioni con capacità di modifica limitate. I campi possono essere stilizzati.

Esempio di codice

UiShowSpecifier buildUserShow(User u) {
    new UiShowSpecifier().ui {
        field 'Picture',                                (1)
            attachmentUiService.previewFull(u.mainPicture?.id)
        fieldLabeled u.username_                        (2)
        fieldLabeled u.firstName_
        fieldLabeled u.lastName_
        fieldLabeled u.businessUnit_
        fieldLabeled u.subsidiary_
        fieldLabeled u.mail_
        fieldLabeled u.manager_
    }
}
1 Etichetta e valore espliciti (qui codice HTML)
2 L’etichetta viene dedotta dal campo; notare il trattino basso (_) alla fine del nome del campo
screenshot dsl show
Figure 1. Rendering corrispondente, all’interno di una finestra modale

▶ Try it live

Sezioni, azioni e stili

new UiShowSpecifier().ui {
    section "Partner", {
        showAction ActionIcon.SHOW * IconStyle.SCALE_DOWN,  (1)
            this.&showContact as MC, partner.id
        fieldLabeled Style.EMPHASIS + Style.BLUE,           (2)
            partner.name_
        fieldLabeled partner.branding_
    }
}
1 L’icona viene visualizzata alla fine del valore del campo successivo; deve essere rimpicciolita per adattarsi accanto al campo
2 Gli stili vanno indicati per primi e possono essere combinati usando +

Layout a griglia (Grid Layout)

new UiShowSpecifier().ui ShowLayout.GRID, {                      (1)
    fieldLabeled item.ref_
    fieldLabeled item.name_
    fieldLabeled item.itemStatus_
    fieldLabeled item.gtin_
    fieldLabeled Style.SPAN_TWO, item.labeling_                  (2)
    fieldLabeled Style.BOLD + Style.SPAN_FULL, item.description_ (3)
}
1 ShowLayout.GRID dispone i campi su una griglia auto-adattante invece che verticalmente in una colonna. Il valore predefinito è ShowLayout.LIST.
2 Ogni campo occupa una cella della griglia per impostazione predefinita. Style.SPAN_TWO / Style.SPAN_THREE consentono a un campo di estendersi su più colonne.
3 Style.SPAN_FULL fa sì che un campo occupi l’intera riga.

La griglia adatta automaticamente tante colonne quante ne consente la larghezza del contenitore, ciascuna larga almeno 220px (il minimo può essere sovrascritto nel proprio CSS tramite la classe taackShowGrid).

screenshot dsl show grid

Contenuto HTML

Alcuni elementi scrivono il loro valore String così com’è, altri lo sanificano (vengono mantenuti solo i tag di formattazione di base e i link, mentre <img>, <div> o gli script vengono rimossi):

Elemento HTML

fieldLabeled field_, fieldUnlabeled field_

Sanificato

field style, html (senza etichetta)

Sanificato

field label, html

Scritto così com’è

field html (un argomento)

Scritto così com’è

inlineHtml html, cssClass

Scritto così com’è, in un div con la classe CSS specificata

 
new UiShowSpecifier().ui {
    field 'Picture', attachmentUiService.previewFull(u.mainPicture?.id) (1)
    field Style.BOLD, '<b>Summary</b><img src="...">'                   (2)
    fieldLabeled u.username_                                            (3)
}
1 Campo con etichetta: l’HTML dell’immagine viene visualizzato così com’è
2 Senza etichetta: sanificato, il testo in grassetto viene mantenuto, il tag <img> viene rimosso
3 Valore di un campo di dominio: sanificato
Gli elementi scritti così come sono non vengono sottoposti a escape: passare loro solo HTML generato dall’applicazione, mai dati inseriti dagli utenti.

Elementi del DSL

  • section: gruppo di campi con etichetta

  • fieldLabeled: valore del campo con etichetta dedotta dal campo (i18n)

  • fieldUnlabeled: valore del campo senza etichetta

  • field: campo con etichetta esplicita (field 'Print Date', new Date().toString()), o codice HTML (field Style.ALIGN_CENTER, '<h1>Title</h1>')

  • inlineHtml: codice HTML grezzo, con una classe CSS opzionale

  • showAction: icona o link che chiama un’azione, visualizzato alla fine del campo successivo

Gerarchia dei simboli DSL

Diagram
Figure 2. Diagramma della gerarchia dei simboli per Show DSL