Elementi html

---

In questa pagina viene mostrato come creare elementi HTML vari.

Come regola generale si riceve un oggetto al quale si possono aggiungere “n” oggetti figli. Sfruttando Python, con la sintassi del punto è possibile «inscatolare» elementi all’interno di altri elementi: è possibile definire un contenitore (il primo contenitore predefinito come abbiamo visto è root) e inserire il contenuto che desideriamo al suo interno, o anche sfruttare i cicli o accedere al database.

Multicolor pane

La prima istruzione definisce il titolo:

root.div('Multicolor pane',margin='10px',
                    font_size='24px',text_align='center',
                    color='#666')

Abbiamo poi la creazione di un div contenitore:

mybox=root.div(width='400px', margin='auto',
                 padding='10px',
                 border='1px solid silver',rounded='10',
                 margin_top='50px',shadow='4px 4px 8px #666')

Il div appena definito ci viene restituito nella variabile mybox e in questa andiamo ad aggiungere del contenuto:

for j in range(96):
  mybox.div(height='15px',width='15px',shadow='2px 2px 3px #666',
            background_color='rgb(%i,%i,%i)'%(rn(0,255),rn(0,255),rn(0,255)),
            rounded='10',margin='5px',display='inline-block')

Durante il ciclo di for vengono aggiunti 96 div il cui colore è calcolato a caso componendo un colore RGB con le sue tre componenti.

Tabella HTML

Dopo aver creato il titolo, definiamo l’elemento table e tbody:

mytable=root.table(margin='auto',margin_top='50px',
                   border_spacing=0,border_collapse='collapse')
tbody=mytable.tbody(font_size='10px',color='gray')

Procediamo quindi a creare con 2 loop innestati le righe e le colonne:

for r in range (10):
    row=tbody.tr()
    for c in range (10):
        cell=row.td(padding='2px')
        cell.div('cell<br/>%i-%i'%(r,c),
                  padding_right='6px',padding_left='6px',
                  rounded=4,border='1px solid gray')

Alternativamente, come accennato, è possibile accedere direttamente a un database. Vediamo per esempio come accedere al database di regioni e province e mostrarne la lista degli elementi:

Tabella Regioni Province

Grazie all’oggetto table, possiamo compiere un’interrogazione al database (query) e di questa richiedere un risultato (fetch).

regioni=self.db.table('glbl.regione').query(order_by='$nome').fetch()

A questo punto per ogni elemento ottenuto, esattamente come nei casi precedenti, costruiamo un contenitore al cui interno inseriremo il nome della regione e le sue province.

for r in regioni:
         rgbox=root.div(width='400px',padding='5px',
                      border='1px solid silver',rounded='4', margin_top='5px')

         rgbox.div(r['nome'],font_size='14px',text_align='center',font_weight='bold',border_bottom='1px solid silver')

         province=self.db.table('glbl.provincia').query(where='$regione=:reg',
                                                        reg=r['sigla'],order_by='$nome').fetch()

         for p in province:
             rgbox.div(p['nome'],margin_left='10px')

Si noti che a scopo didattico stiamo rieseguendo nuovamente la query per ogni regione, al fine di ottenere solo le province di quella specifica regione. Vedremo successivamente come affinare questi meccanismi.