LA RISPOSTA DI PAGINA

Regioni e componenti globali

La proprieta regions divide la pagina in sei parti. Cinque contengono componenti globali, condivisi da tutte le pagine della stessa lingua: testate, pie di pagina, componenti condivisi e navigazione delle guide. La sesta contiene le aree di contenuto della singola pagina.

Le sei regioni

Tutte e sei le proprieta di regions sono sempre presenti come elenchi, anche quando sono vuote. Un elenco vuoto indica che il layout non prevede quella regione o che non contiene componenti.

Regione	Contenuto
`topHeader`	Barra sopra la testata: recapiti, avvisi, selettore di lingua. Componenti globali.
`header`	Testata: menu di navigazione, immagini e pulsanti condivisi. Componenti globali.
`contentAreas`	Aree di contenuto della singola pagina. Componenti editoriali, con un contratto diverso.
`footer`	Pie di pagina: menu a colonne, dati societari, note legali. Componenti globali.
`shared`	Componenti condivisi non legati a una posizione fissa, fra cui il contenuto del popup del layout.
`docNavigation`	Albero di navigazione della documentazione. Valorizzato soltanto sulle pagine della guida.

Le cinque regioni di componenti globali dipendono dal sito e dalla lingua, non dalla pagina: sono identiche in tutte le risposte della stessa lingua. Un software di rendering puo quindi memorizzarle per la durata della sessione e rigenerarle quando cambia la versione del sito.

Il componente globale

Tutti gli elementi delle regioni globali condividono lo stesso contratto, ricorsivo: un componente puo contenere altri componenti dello stesso tipo attraverso children. E cosi che si rappresentano i menu a piu livelli.

Proprieta	Descrizione
`id`	Identificativo stabile del componente, adatto come chiave nei cicli di rendering.
`type`	Tipo del componente. Determina quali altre proprieta risultano valorizzate.
`name`	Nome interno assegnato nel pannello. Serve a riconoscere il componente in fase di sviluppo, non e destinato alla pubblicazione.
`columns`	Numero di colonne su cui il componente distribuisce i propri figli. Presente sui contenitori.
`column`	Colonna del contenitore in cui il componente si colloca, a partire da 1.
`heading`	Intestazione del componente. Nei componenti globali il titolo espone la sola proprieta text, non formattata.
`text`	Testo semplice, usato dal solo tipo SharedText.
`html` e `raw`	Testo formattato del componente, nelle due forme HTML e nodi strutturati.
`link`	Destinazione del componente, per le voci di menu e i pulsanti.
`media`	Contenuto multimediale del componente: immagine, icona, SVG o etichetta.
`badge`	Etichetta di rilievo con variant e text. La variante vale Positive, Urgent, Warning o Informational.
`backgroundVariant`	Variante cromatica dello sfondo, con gli stessi quattro valori del badge.
`visibility`	Regole di visibilita per desktop, tablet e mobile.
`children`	Componenti figli, nell'ordine di rendering. Sempre presente, eventualmente vuoto.

I tipi di componente globale

I tipi si dividono in tre famiglie: elementi condivisi, contenitori di menu e voci di menu.

Famiglia	Tipi	Note
Elementi condivisi	`SharedParagraph, SharedText, SharedImage, SharedButton, SharedButtonIcon`	Non hanno figli. Usano html e raw, oppure text, media e link.
Contenitori di menu	`MenuNav, MenuAccordion, MenuDropdown, MenuInline, MenuVertical, MenuFooter, MenuTopBar`	Definiscono la forma di presentazione del menu e contengono le voci in children.
Voci di menu	`MenuItemLink, MenuItemDivider, MenuItemImage, MenuItemTitle, MenuItemButton, MenuItemParagraph`	MenuItemLink e MenuItemButton hanno link; MenuItemDivider e un separatore senza contenuto.
Navigazione delle guide	`GuideRoot, GuideFolder, GuidePage, GuideTitle`	Compaiono soltanto nella regione docNavigation.

Un tipo non riconosciuto dal software di rendering va ignorato insieme al proprio sottoalbero, senza interrompere il rendering del resto della regione. Nuovi tipi possono essere introdotti in una versione successiva del contratto.

Annidamento, colonne e ordinamento

L'ordine degli elenchi e gia quello di rendering: non esiste una proprieta di ordinamento da applicare. Il client percorre children nell'ordine ricevuto.

La distribuzione su piu colonne si legge combinando due proprieta: il contenitore dichiara columns, cioe in quante colonne si divide, e ciascun figlio dichiara column, cioe in quale colonna si colloca. E il caso tipico del menu del pie di pagina, dove un contenitore a tre colonne raccoglie piu gruppi di voci.

L'annidamento non ha una profondita fissa nel contratto: una voce di menu puo a sua volta contenere altre voci. Il software di rendering percorre l'albero in modo ricorsivo e limita la profondita in base alla propria presentazione, non in base al dato.

La regione docNavigation segue le stesse regole: le radici contengono cartelle e pagine, i separatori di sezione sono voci senza destinazione. La pagina corrente si riconosce confrontando link.url con route.path.

Testata con menu annidato

{
  "header": [
    {
      "id": "54f8ae53-b35a-4c28-a71e-42e636ce40a1",
      "column": 1,
      "name": "Rating di legalita",
      "type": "SharedImage",
      "heading": { "title": { "text": "Rating di legalita" } },
      "visibility": {
        "hiddenOnDesktop": false,
        "hiddenOnTablet": false,
        "hiddenOnMobile": false
      },
      "media": {
        "type": "Image",
        "url": "https://static.gajacms.com/smea/images/shared/rating.webp",
        "alt": "Rating di legalita",
        "width": 250,
        "height": 81
      },
      "children": []
    },
    {
      "id": "1f0a1f4b-0000-0000-0000-000000000000",
      "name": "Menu principale",
      "type": "MenuNav",
      "children": [
        {
          "id": "24703430-d19d-43eb-a5d9-06c5c8c52556",
          "column": 1,
          "name": "AZIENDA",
          "type": "MenuDropdown",
          "heading": { "title": { "text": "AZIENDA" } },
          "link": { "type": "Internal", "url": "/azienda", "openInNewTab": false },
          "children": [
            {
              "id": "3512e1c1-3e5a-472a-b7a0-226293ebe514",
              "column": 1,
              "name": "CHI SIAMO",
              "type": "MenuItemLink",
              "heading": { "title": { "text": "CHI SIAMO" } },
              "link": { "type": "Internal", "url": "/azienda", "openInNewTab": false },
              "children": []
            }
          ]
        }
      ]
    }
  ]
}