Questa pagina è ufficiosa, in quanto la definizione delle regole di styling del framework è ancora in fase di completamento

Esistono regole css predefinite in geoweb che possono essere utilizzate in vari ambiti:

• valori widget html, widget htmlTemplate
• valori nodi dom creati tramite le js api

Nelle Report Jasper al momento, pur essendo possibile scrivere del codice html, non è possibile utilizzare tag class=““, che vengono troncati, mentre si possono usare solo alcuni parametri del tag style=”“, come color e background.

Pattern dei selettori css per il colore del testo: 'gw'+[color_name]+'Color'

Elenco css class predefinite:

• gwGreenColor #339933 #339933
• gwGreenMapSelectionColor #B0C782 #B0C782
• gwRedColor #CC3333 #CC3333
• gwPinkColor #ffc0cb #ffc0cb
• gwYellowColor #CCCC66 #CCCC66
• gwYellowMapMeasureColor #FFAA32 #FFAA32
• gwBlueColor #6699CC #6699CC
• gwFolderColor #FFD800 #FFD800
• gwGreenExcelColor #008000 #008000
• gwGreenCSVColor #008000 #008000
• gwRedPDFColor #CB0606 #CB0606
• gwMainColor #007AC2 #007AC2
• gwLightGrayColor #F6F6F6#F6F6F6
• gwGrayColor #A9A9A9 #A9A9A9
• gwDarkGrayColor #808080 #808080
• gwUIBorderColor #EFEFEF #EFEFEF
• gwUICommandColor #777777 #777777
• gwUISelectedColor #CCDAE5 #CCDAE5
• gwUINotSelectedColor #BBC9D4 #BBC9D4
• gwWhiteColor #FAFAFA #FAFAFA
• gwBlackColor #333333 #333333
• gwWhiteHTMLColor #FFFFFF #FFFFFF
• gwBlackHTMLColor #000000 #000000
• gwLightGrayHTMLColor #D3D3D3 #D3D3D3
• gwGrayHTMLColor #A9A9A9 #A9A9A9
• gwDarkGrayHTMLColor #808080 #808080
• gwPageHeaderInfoSectionColor #363636 #363636

Pattern dei selettori css per il colore dello sfondo dei nodi dom: 'gw'+[color_name]+'Background'

Elenco css class predefinite:

• gwMainColorBackground #007AC2 #007AC2
• gwWhiteBackground #FAFAFA #FAFAFA
• gwWhiteHTMLBackground #FFFFFF #FFFFFF
• gwBlackBackground #333333 #333333
• gwBlackHTMLBackground #000000 #000000
• gwLightGrayBackground #F6F6F6 #F6F6F6
• gwLightGrayHTMLBackground #D3D3D3 #D3D3D3
• gwGrayBackground #A9A9A9 #A9A9A9
• gwGrayHTMLBackground #A9A9A9 #A9A9A9
• gwDarkGrayBackground #808080 #808080
• gwDarkGrayHTMLBackground #80808 #808080
• gwPageHeaderInfoSectionBackground #363636 #363636

L'utente configuratore può impostare l'icona dei vari componenti UI generalmente nei seguenti punti:

• attributi image nei vari tag dell'xml di progetto
• value delle proprietà iconClass ove supportato nelle api js

Geoweb, nella versioni 4.5.X e successive utilizza per gli stili dojo flat, che si basa per la parte di icone su Fontawesome. Quindi nativamente i componenti dojo (come alberi, editor, ecc..) utilizzando css class specicifice, costruite su Fontawesome.

Per ragioni di uniformità è stato deciso di supportare anche direttamente il set di icone di Fontawesome (al momento solo le free).

L'utente configuratore quindi, non dovrebbe utilizzare i selettori css per le icone di dojo, che sono dichirati nel codice e non fruibili, ma quelli pubblicati da Fontawesome, comodamente indicizzati e filtrabili.

Esempio: non utilizzare dijitIconCut, ma fa-solid fa-scissors

Geoweb 4.5.X+ utilizza Fontawesome 5

Geoweb 4.6.X+ utilizza Fontawesome 6

Rispetto a Fontawesome 5, in Fontawesome 6 sono cambiati alcuni selettori css di stile:

• il selettore di stile fas diventa fa-solid
• il selettore di stile far diventa fa-regular
• il selettore di stile fab diventa fa-brand

Ed alcuni selettori css di tipo:

• per esempio la css class per l'icona dell'ingranaggio, fa-cog, ora è fa-gear

Esempi regole per versione:

Fontawesome 5
'fas fa-house'
'far fa-house'
'far fa-cog'

Fontawesome 6
'fa-solid fa-house'
'fa-regular fa-house'
'fa-solid fa-gear'

Fontawesome ha comunque garantito il pieno supporto alle vecchie regole, e quindi inderettamente anche Geoweb 4.6.X+.

Determina la tipologia d'immagine rappresentata nell'icona, senza considerare stile, dimensione, e colore.

Libreria icone Fontawesome:

• https://fontawesome.com/search (Fontawesome 6, compatibile con geoweb 4.6.X+)
• https://fontawesome.com/v5/search (Fontawesome 5, compatibile con geoweb 4.5.X+)

Stili icone FontAwesome 6:

• fa-solid (free)
• fa-regular (free)
• fa-brands (free)
• fa-light (a pagamento)
• fa-thin (a pagamento)
• fa-duotone (a pagamento)

La dimensione di default è 16×16 px.

In alcuni contesti potrebbe essere forzata la dimensione di default (es: icon leafItem 32×32 px).

Sono predefiniti le seguenti classi css che, usate insieme agli altri selettori css, forzano le dimensioni (in px) dell'icona:

• icon16x16
• icon20x20
• icon24x24
• icon30x30
• icon32x32
• icon40x40
• icon48x48

Di default il color delle icone corrisponde al gwBlackColor (#333333). In alcuni contesti potrebbe essere utilizzato uno specifico colore. Si possono comunque sia forzare i colori, scegliendo fra quelli presenti nella sezione [gwusermanual:interface:style_and_icons:stili_ed_icone#Colori Font|Colori Font]].

Si possono combinare tutti i selettori di cui sopra, seguendo il pattern:

[style] + [type] + [dimension] + [color]

L'ordine non è mandatorio, ma solo suggerito.

Esempi:

fa-regular fa-house

fa-solid fa-house icon32x32

fa-solid fa-house icon20x20 gwRedColor

Fontawesome mente a disposizione potenti strumenti la stilizzazione delle icone, tra cui la possibilità di rotazione, flip, sizing, stacking, ed altro ancora

In particolare lo stacking, coadiuvato dalle altre funzionalità permette di creare icone complesse a piacere, componendo in varia maniera il materiale delle varie librerie.

Nel Geowebadmin è disponibile, nel menu della gestione della icona di una qualsiasi gwAction, una UI per comporre in maniera arbitraria varie icone, scegliendone l'ordine di comparsa, il dimensionamento, il colore, la rotazione, e ottenere un codice html utilizzabile cosi come è in una qualsiasi struttura dom html.

Esempio di icona stacked (RadiusSelectionCommand nella scheda Layout2D):

<span class="fa-stack fa-2x gwStacked16 " style="">
    <i class="fa-solid fa-circle fa-stack-2x gwDarkGrayHTMLColor" style="font-size: 18px; left: -1px; top: -1px;"></i>
    <i class="fa-solid fa-circle fa-stack-2x gwGreenMapSelectionColor" style="font-size: 16px; left: 0px; top: 0px;"></i>
    <i class="fa-solid fa-arrow-pointer fa-stack-2x gwDarkGrayHTMLColor" style="font-size: 13px; left: 6px; top: 7px;"></i>
    <i class="fa-solid fa-arrow-pointer fa-stack-2x gwLightGrayHTMLColor" style="font-size: 12px; left: 7px; top: 8px;"></i>
</span>

E' inoltre possibile, usando l'apposito button, copiare nella console il codice base64 dell'elaborato, ed utilizzarlo in ogni punto di configurazione, tra cui l'attributo image nei tag dell'xml di progetto.