Controlli e finestre che supportano il codice HTML
Da Gambas-it.org - Wikipedia.
I controlli e le finestre che in Gambas {vedi nota: 1} supportano il codice HTML sono:
- TextLabel
- InputBox
- Message.
- Balloon
- TextEdit {2}
Per verificare il grado di compatibilità di tali elementi con il codice HTML, anche al fine di comprendere quali istruzioni siano supportate e gestite, si è proceduto ad effettuare una prova empirica delle varie istruzioni HTML 4.
Dalla prova è emerso che non tutto il codice HTML è supportato; ma ad ogni modo le non poche istruzioni supportate consentono di ottenere risultati ed effetti molto soddisfacenti soprattutto con le finestre, altrimenti difficilmente raggiungibili.
Come esempio nelle seguenti spiegazioni prenderemo l'oggetto TextLabel. Va innanzitutto detto che il codice, riferendosi per lo più al testo, va scritto all'interno delle virgolette che racchiudono il testo:
TextLabel1.Text = "<codice_HTML>eventuale_testo<altro_eventuale_codice_HTML>".
L'istruzione viene chiusa antecedendo uno slash: / . Esempio: <H3>testo scritto</H3> .
Questa regola vale anche se il testo non è presente, o se il codice si riferisce ad altri elementi diversi dal testo in sé, per esempio una immagine.
[modifica] Il codice utilizzabile
Riguardo al codice HTML in particolare ecco l'elenco delle istruzioni, delle quali si è avuto modo di accertare la compatibilità con Gambas (i codici scritti in grassetto vanno compresi fra i due segni < >, es.: <H3>:
| TESTO: | ||
| <Hnum.> | : | dimensione del testo (H1....H6), ritorno a capo e una riga vuota; |
| <B> oppure < STRONG > | : | grassetto; |
| <I> oppure < CITE > oppure < EM > | : | corsivo; |
| <U> | : | testo sottolineato; |
| <S> | : | testo cancellato con una linea nel mezzo; |
| <BIG> | : | testo ingrandito; |
| <SMALL> | : | testo rimpicciolito; |
| <TT> | : | testo scritto con carattere simile a macchina da scrivere; |
| <CENTER> | : | testo centrato; |
| <DIV align=center> | : | testo centrato; |
| <DIV align=justify> | : | testo giustificato; |
| <DIV align=right> | : | testo a destra; |
| <DIV align=left> | : | testo a sinistra; |
| <SUP> | : | apice; |
| <SUB> | : | pedice; |
| <FONT color=#numero_colore> | : | testo colorato (es.: =#FF0000); |
| <FONT color=nome_colore> | : | testo colorato (es.: =red); |
| <FONT face=nome_font> | : | imposta il font del testo; |
| <FONT size=num._dimens.> | : | imposta la dimensione del testo; |
| <BR> {3} | : | inserisce un ritorno a capo del testo; |
| <P> | : | inizia un nuovo paragrafo; |
| <P align=center> | : | inizia un nuovo paragrafo con spazio in giù e testo centrato; |
| <P align=justify> | : | inizia un nuovo paragrafo con spazio in giù e testo giustificato; |
| <P align=right> | : | inizia un nuovo paragrafo con spazio in giù e testo a destra; |
| <P align=left> | : | inizia un nuovo paragrafo con spazio in giù e testo a sinistra; |
| <HR> | : | inserisce una linea spaziatrice; |
| <HR width=num%> | : | inserisce una linea spaziatrice definendone la lunghezza in % rispetto all'ampiezza dell'elemento, in cui è inserita; |
| <SPAN style=font-family:nome_font> | : | specifica il tipo di font utilizzato; |
| <SPAN style=font-size:dim_font> | : | specifica la dimensione del font utilizzato, espressa in valori assoluti (xx-small, x-small, small, medium, large, x-large, xx-large), relativi (smaller e larger) ed in percentuale; |
| <SPAN style=font-style:stile_font> | : | specifica lo stile del font utilizzato: oblique, italic e normal; |
| <SPAN style=font-weight:peso_font> | : | specifica il peso del font utilizzato. Viene espresso con valori assoluti: normal, lighter (più sottile), bold (grassetto), bolder (grassetto più marcato); oppure numerici: 100, 200, 300, 400 (che equivale a: normal), 500, 600, 700 (che equivale a: bold), 800, 900; e con valori relativi: lighter e bolder; |
| <SPAN style=font-variant:var_font> | : | specifica la variazione del font: normal e small-caps (maiuscoletto); |
| <SPAN style=color:colore_font> | : | specifica il colore del testo. Può essere utilizzato il numero (es.: #FF0000) oppure il nome; |
| <SPAN style=background-color:colore_sottofondo> | : | colora il sottofondo del testo; |
| <SPAN style=text-decoration:underline> | : | testo sottolineato; |
| <SPAN style=text-decoration:overline> | : | pone una linea al di sopra del testo; |
| <SPAN style=text-decoration:throught> | : | pone una linea in mezzo al testo (effetto "cancellato"); |
| LISTE: | ||
| <UL type=disc><LI> | : | inserisce una lista con le voci precededute da un pallino; |
| <UL type=circle><LI> | : | inserisce una lista con le voci precededute da un cerchietto; |
| <UL type=square><LI> | : | inserisce una lista con le voci precededute da un quadratino; |
| <OL type=1><LI> | : | inserisce una lista con le voci precededute da numeri arabi; |
| <OL type=a><LI> | : | inserisce una lista con le voci precededute da lettere minuscoli; |
| <OL type=A><LI> | : | inserisce una lista con le voci precededute da lettere maiuscole; |
| <OL type=i><LI> | : | inserisce una lista con le voci precededute da numeri romani minuscoli; |
| <OL type=I><LI> | : | inserisce una lista con le voci precededute da numeri romani maiuscoli; |
| GESTIONE IMMAGINI: | ||
| <IMG SRC> | : | inserisce un'immagine; |
| <IMG align=top> | : | inserisce un'immagine ed allinea il testo rispetto ad essa in alto; |
| <IMG align=middle> | : | inserisce un'immagine ed allinea il testo rispetto ad essa in mezzo; |
| <IMG align=bottom> | : | inserisce un'immagine ed allinea il testo rispetto ad essa in basso; |
| COLLEGAMENTI A FILE: | ||
| <A HREF> | : | indica un collegamento ad un file; |
| TABELLE: | ||
| <TABLE> | : | inserisce una tabella; |
| <TABLE bgcolor=nome_colore oppure #num_colore> | : | inserisce una tabella colorata; |
| <TABLE background=percorso_del_file_immagine> | : | inserisce un'immagine in una tabella; |
| <TABLE border> | : | inserisce una tabella con bordi; |
| <TABLE border=num.> | : | inserisce una tabella con bordi di num. pixel; |
| <TABLE border cellpadding=num > | : | inserisce una tabella con impostazione di quanto spazio lasciare fra i bordi ed il contenuto delle singole celle; |
| <TABLE border cellspacing=num > | : | inserisce una tabella con impostazione di quanto spazio vuoto lasciare tra le singole celle di dati di una tabella; |
| <TR> | : | inserisce una riga; |
| <TR bgcolor=nome_colore oppure #num_colore> | : | inserisce una riga colorata; |
| <TD> | : | inserisce una cella; |
| <TD bgcolor=nome_colore oppure #num_colore> | : | inserisce una cella colorata; |
| <TD colspan=num.> | : | inserisce una cella avente la dimensione pari a num. colonne della medesima tabella; |
| <TD rowspan=num.> | : | inserisce una cella avente la dimensione pari a num. righe della medesima tabella; |
| <TD align=right> {4} | : | imposta il testo a destra in una cella; |
| <TD align=left> | : | imposta il testo a sinistra in una cella; |
| <TD align=center> | : | imposta il testo al centro in una cella; |
| <TD align=justify> | : | imposta il testo giustificato in una cella; |
| <TD width=num.> | : | inserisce una cella di lunghezza espressa in % o in pixel; |
| <TD height=num.> | : | inserisce una cella di altezza espressa in % o in pixel; |
| <TD valign=top> {4} | : | imposta il testo nella parte superiore della cella; |
| <TD valign=middle> | : | imposta il testo nella parte di mezzo della cella; |
| <TD valign=bottom> | : | imposta il testo nella parte inferiore della cella. |
E' possibile inserire anche caratteri unicode, i cui codici{5} scritti in decimale, per essere compatibili con HTML, devono essere preceduti da &# e seguiti dal punto e virgola. Esempio: ♦
[modifica] Note
[1] Risultati ottimali si otterranno attivando il componente gb.qt4 .
[2] Per l'uso di "TextEdit" in Gambas-3 si dovrà avere l'accortezza di usare .RichText. Esempio: TextEdit1.RichText = "<FONT color=green><B>prova testo</b></font>" .
[3] Vedere la nota particolare per il MessageBox.
[4] align e valign possono essere posti anche con <TABLE> e <TR> a seconda se si vuole imporre quelle caratteristiche a tutta la tabella o ad una intera riga.
[5] E' possibile vedere la mappa dei caratteri speciali ed i simboli con i relativi codici in questa pagina: mappa caratteri Unicode, codici ASCII. Per l'uso di Unicode con gli oggetti di testo, vedere qui: Uso di Unicode in Gambas
