Supporto volontario e collaborativo per Joomla!® in italiano

JToolBarHelper: le icone per un nuovo componente

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 
Icona componente

Il metodo statico JToolBarHelper::title viene usato per aggiungere un titolo alla pagina di un componente lato admin.

Tipicamente la chiamata viene inserita nel file view.html.php e ha questa forma:

JToolBarHelper::title ( JText::_ ( 'COM_COMPONENTNAME_XYZ' ), 'lamp' );

Il primo parametro contiene il titolo, spesso localizzato tramite JText, il secondo parametro determina l'"immagine" che compare alla sua sinistra. Metto immagine tra apici perchè vedremo che non si tratta di una immagine e nemmeno di una icona. Seguiamo l'evoluzione di questo pezzo di codice PHP:

JToolBarHelper::title ( 'HelloWorld manager', 'lamp' );

Si tradurrà nel più classico dei titoli - HelloWorld Manager - affiancato da una lampadina; a fronte di questa istruzione, il codice HTML prodotto dal framework Joomla! è il seguente:

<h1class="page-title">
   <span class="icon-lamp"></span>HelloWorld manager
</h1>

Da notare una cosa fondamentale, "HelloWorld manager" è fuori dal tag span.

Joomla! 2.5, come eravamo

Il codice prodotto da JToolbaHelper in Joomla! 2.5 era molto simile, ma la tecnica che produceva l'effetto grafico era radicamente diversa. L'icona era effettivamente un' immagine, di solito un .png 48x48, il cui nome era qualcosa di molto simile a 'icon-48-{nome_del_secondo_parametro}, nel nostro caso icon-48-lamp.png. Le immagini si trovavano tutte sotto la cartella "images/header/" nella home del template lato admin.

Joomla! 3, come siamo

Ecco, la cosa che mi fa impazzire è la tecnica usata dal template ISIS di Joomla! 3, che è applicabile ovunque anche a progetti che nulla hanno a che vedere con Joomla!, e secondo me è galattica. Il segreto, come spesso accade, è nel CSS.

Usando ISIS, il CSS dice questa cosa:

.icon-lamp::before {
    content: "t";
}
[class^="icon-"]::before, [class*=" icon-"]::before {
    font-family: "IcoMoon";
    font-style: normal;
}
.page-title [class^="icon-"], .page-title [class*=" icon-"] {
    margin-right: 16px;
}
[class^="icon-"], [class*=" icon-"] {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    margin-right: 0.25em;
    width: 14px;
}

Ok è un delirio, vediamo di psicanalizzare i punti che ci servono.

::before content ... eh?

::before è un selettore CSS, presente dal CSS2, che inserisce del contenuto prima del contenuto dell' elemento selezionato. La proprietà content specifica il testo da inserire. Nel nostro caso l'elemento a cui si applica è <span class="icon-lamp"></span>, che nasce vuoto, e il contenuto che il CSS inserisce nel tag span è una "t" ...  si una fantastica t di tavolo. uh? E quindi?

[class^="icon-"]::before, [class*=" icon-"]::before ... mh

"attribute^=value" è un altro selettore, questa volta disponbile da CSS3, che si applica ad ogni elemento HTML che abbia un attributo che inizi con il valore specificato. "attribute*=value" è molto simile, solo che il valore può essere contenuto nel valore dell'attributo in qualsiasi posizione. E' più difficile da scrivere che da capire. Nel nostro caso si applica a tutti gli elementi HTML che abbiano nel attributo class la stringa "icon-" all'inizio o " icon-" da qualche parte nel loro valore; ed è il caso del nostro titolo che ha '<span class="icon-lamp">'.

Ora, l'istruzione ::before precedente inseriva del contenuto, una "t". Questa istruzione (che contiene anch' essa ::before), applica uno stile a quel contenuto. Per la precisione applica "font-family : 'IcoMoon'".

Il magheggio

La nostra lampadina non è altro che la lettera "t" nel font "IcoMoon", che è un font iconico.

"Font icons" o "Glyph icons"

Per me una soluzione spaziale perchè:

  • E' flessibile. Il web è concepito per visualizzare testo, posso velocemente modificare il colore di foreground o background delle "icone", applicare altri stili come sottolineato, barrato, corsivo, grassetto.
  • E' scalabile. se vuoi una "icona" più grande, aumenta il font-size. Basta problemi con immagini sgranate o impastate quanto vengono rimpicciolite
  • Risoluzione sempre al top, anche da cellulare.
  • Download veloce, al massimo devi scaricare il font, non "n" immagini

Se siete interessati trovate molto materiale in rete.

Si ok, ma oltre alle lampadine?

Se siete degli sviluppatori di componenti Joomla! 3 pigri qui trovate una tabella parziale, perchè sono pigra anche io, esplosa con l'associazione tra il nome dell'incona, la lettera dell'alfabeto e il risultato:

 a  quotes-right   a
 b  database  b
 c  location  c
 d  zoom-in  d
 e  zoom-out  e
 f  expand  f
 g  contract  g
 h  expand-2  h
 i  contract-2  i
 l  unblock  l
 m  vcard  m
 n  clock  n
 o  compass  o
 p  address  p
 q  feed  q
 r  attachment  r
 s  pin  s
 t  lamp  t
 u  chart  u
 v  bars  v
 z  move  z
 A  star-2  A
 B  featured  B
 C  calendar  C
 D  calendar-2  D
 E  question  E
 F  support  F
 G  publish  G
 H  pending  H
 I  delete  I
 L  purge  L
 M  envelope  M
 N  envelope-opened  N
 O  unarchive  O
 P  archive  P
 Q  box-add  Q
 R  box-remove  R
 S  search  S
 T  filter  T
 U  camera  U
 V  play-2  V
 Z  menu  Z

Per trovare tutte le possibile combinazioni dovete solo addentrarvi nel file "{joomla_home}/administrator/templates/isis/css/template.css" e buona fortuna ...

... Ma anche no

Alex Red mi ha segnalato questo link dove potrete trovare tutte le possibili combinazioni.



commentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Mariella
Alcune informazioni su di me:
Sviluppatore freelance ad ampio spettro, da Oracle PL/SQL a PHP. Per Joomla! scrivo componenti, moduli e plugin. Associato JoomlaLombardia. Xdebug salverà il mondo!


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.7.2 Stabile Italiana
Data di rilascio: 23 Maggio 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: