Oggetti grafici e di testo che supportano il codice HTML

Gli Oggetti grafici e di testo che in Gambas supportano il codice HTML sono:

• TextLabel
• InputBox
• Message
• Balloon
• TextEdit ^{[Nota 1]}
• GridView[n, n] ^{[Nota 1]}

Supportano il codice html anche:

• la proprietà .Tooltip di qualunque oggetto;
• i metodi .DrawRichText() e .RichText() ^{[nota 2]} della Classe Paint ;
• in generale la Proprietà .RichText di qualsiasi oggetto grafico (qualora posseduta);
• l'oggetto WebView dei Componenti gb.gui.qt.webkit e gb.qt5.webkit.

Risultati ottimali si otterranno attivando il Componente gb.gui.qt o il Componente gb.qt5. ^{[nota 3]}

Per verificare il grado di compatibilità di tali Oggetti 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 5.

Dalla prova è emerso che non tutto il codice HTML è supportato, e che gli Oggetti, sopra elencati, supportano ciascuno un numero differente di comandi html. Ad ogni modo le non poche istruzioni riconosciute e gestite consentono di ottenere risultati ed effetti molto soddisfacenti soprattutto con le finestre.

Va innanzitutto detto che il codice va posto fra i segni di minore (<) e di maggiore (>): <codice_html>.
Inoltre, riferendosi esso per lo più al testo, il codice va scritto all'interno delle virgolette che racchiudono il testo. Esempio:

TextLabel1.Text = "<codice_HTML>eventuale_testo<altro_eventuale_codice_HTML>altro_eventuale_testo"

L'istruzione viene chiusa anteponendo uno slash: / .
Esempio pratico:

<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.

Tra i segni < > ed il comando html potrà essere presente anche lo spazio:

< B >

eccezion fatta per l'Oggetto WebView che vuole i tag HTML senza spazi all'interno.

Il codice Html utilizzabile

Cliccare sulla riga che segue:

elenco delle istruzioni HTML compatibili

per vedere le istruzioni HTML compatibili con gli oggetti Gambas, sopra visti, che supportano il protocollo HTML. ^{[nota 3]}

Uso di variabili del codice Gambas all'interno del codice Html

E' possibile utilizzare delle variabili del codice Gambas all'interno del codice Html.
Vediamo questo esempio dove sarà modificato velocemente nelle sue sfumature il colore e le dimensioni del carattere del testo nella TextLabel:

Public Sub Button1_Click()

 Dim a As String
 Dim j, s As Short

 For j = 0 To 255
   s = j / 31
   a = Hex(j, 2)
   TextLabel1.Text = "<FONT size=" & s & " color=#00" & a & "00><B>Testo qualsiasi</b></font>"
   Wait 0.01
 Next

End

Uso diretto delle Proprietà delle Classi del codice Gambas all'interno del codice Html

E' possibile utilizzare in lettura anche direttamente le Proprietà delle Classi del codice Gambas all'interno del codice Html:

 With GridView1[0, 0]
   .RichText = "<IMG src=/percorso/della/immagine height=" & .W & " width=" & .H & ">"
 End With

Utilizzare il codice Html contenuto in una variabile stringa

Il codice Html può essere contenuto in una variabile stringa, e quindi essere utilizzato passando al codice Gambas quella variabile stringa. Esso sarà perfettamente utilizzabile e funzionante, sia insieme con il testo:

Public Sub Form_Open()

 Dim s As String

' La variabile stringa "s" conterrà la riga di codice Html:
 s = "<FONT color=#FF0000><B>Testo qualsiasi</b></font>"

 Message.Info(s & "<IMG src=/percorso/della/immagine>")

End

che da solo:

Public Sub Form_Open()

 Dim b As Byte = 3
 Dim s1, s2, s3 As String

 s1 = "testo"
 s2 = "<FONT color=#FFFF00>"
 s3 = "</font>"

 TextLabel1.Text = Left(s1, 2) & s2 & Mid(s1, b, 1) & s3 & Right(s1, Len(s1) - (2 + 1))

End

Sarà, inoltre, possibile anche usare una variabile stringa per poter modificare un valore nel codice Html contenuto a sua volta in una variabile stringa:

Public Sub Form_Open()

 Dim a, b As String

 a = InputBox("Immetti il nome di un colore:")

' La variabile stringa "b" conterrà la riga di codice Html, e la variabile stringa "a" ne modifica dinamicante un valore:
 b = "<FONT color=" & a & "><B>Testo qualsiasi</b></font>"

 Message.Info(b)

End

La variabile stringa deve contenere il codice Html definitivo: ogni eventuale variazione dei suoi valori deve avvenire prima.

Uso dei colori

I colori possono essere inseriti generalmente indicando il loro codice esadecimale oppure il loro nome inglese, secondo il protocollo dei colori usati nel WEB.

E' possibile usare anche la trasparenza:

<font color=transparent>testo qualsiasi

Creare una nota al testo (ToolTip) in una TextEdit

In un oggetto TextEdit è possibile creare una nota al testo. Tale nota si mostrerà come una finestrina (un ToolTip) al di sotto del testo interessato. Per ottenere l'apparizione della nota al testo, bisognerà sostare con il puntatore del mouse sul testo interessato per qualche secondo.

Per generare una nota al testo (ovvero ToolTip) si potrà utilizzare il tag:

<ABBR Title=\"Testo della nota.\"</abbr>

oppure il tag:

<A HREF='#' Title=\"Testo della nota.\"</a>
ma anche così
<A HREF=' ' Title=\"Testo della nota.\"</a>

Solitamente la parte di testo che rimanda ad una nota al testo è di colore blu e sottolineata. Tale effetto potrà essere ottenuto con

<U><FONT color=blue>testo annotato</font></u>

oppure semplicemente con

<A HREF='#' Title=\"....>

Il testo all'interno della nota viene formattato secondo il protocollo html, supportando così diversi comandi di quel linguaggio. Bisogna, però, ricordare che:

• affinché il testo della nota al testo sia visibile, esso deve essere posto fra virgolette anticipate dal carattere speciale \ ;
• possono essere utilizzati al posto dei caratteri anche i relativi codici numerici o nominali;
• per andare a capo bisognerà porre nel testo il comando <BR> .

Esempi di codice per le note di testo

Testo semplice:

TextEdit1.RichText = "Testo principale <ABBR Title=\"Questa è una nota al testo.\"><U><FONT color=blue>testo annotato</font></u></abbr> segue il testo principale"

oppure

TextEdit1.RichText = "Testo principale <A HREF='#' Title=\"Questa è una nota al testo.\">testo annotato</a> segue il testo principale"

Testo con ritorno a capo:

TextEdit1.RichText = "Testo principale <A HREF='#' Title=\"Questa è una nota<BR> al testo.\">testo annotato</abbr> segue il testo principale"

Una nota può anche essere generata da un'immagine:

TextEdit1.RichText = "<IMG src=/percorso/della/immagine TITLE=\"Questa è una nota al testo.\"></abbr> eventuale testo"

Una nota può anche contenere un'immagine:

TextEdit1.RichText = "Testo principale <A HREF='#' TITLE=\"Questa è <IMG src=/percorso/della/immagine></img>una nota al testo.\">testo annotato</a> segue testo principale"

E' possibile impostare il colore del testo contenuto nella nota:

TextEdit1.RichText = "Testo principale <A HREF='#' TITLE=\"Questa è <FONT color=nome_colore>una nota al testo</font>.\">testo annotato</a> segue testo principale"

oppure con il codice numerico del colore:

TextEdit1.RichText = "Testo principale <A HREF='#' TITLE=\"Questa è <FONT& color=#numero_esadec._colore>una nota al testo</font>.\">testo annotato</a> segue testo principale"

Nota contenente una parte di testo normale, la parte centrale di un colore diverso ed in grassetto, la parte finale di identico colore, in corsivo e senza grassetto:

TextEdit1.RichText = "Testo principale <A HREF='#' TITLE=\"Questa è <FONT color=#numero_esadec._colore><B>una nota </b><I>al testo</i></font>.\">testo annotato</a> segue testo principale"

e così via per gli altri comandi html supportati.

Testo annotato di colore diverso

Come già detto, il testo che rinvia alla nota di testo appare nella TextEdit di norma sottolineato e di colore blu. Se si utilizza il tag: <A Href=\"... è possibile, volendo, cambiare il colore di tale testo annotato nel modo che segue:

 TextEdit1.RichText = "Testo principale <A HREF='#' TITLE=\"testo della nota\"><FONT color=nome/#num._colore>testo annotato</font></a> segue testo principale"

Uso di variabili stringa nelle note di testo

Anche per il codice relativo alle note è possibile utilizzare variabili stringa contenenti parti di codice html:

Public Sub Form_Open()

 Dim s As String

 s = "<FONT color=nome_colore/#num_esad._colore>"

 TextEdit1.RichText = "Testo principale <A HREF='#' TITLE=\"Questa è " & s & "una nota al testo.\">testo_annotato</a> segue testo principale"

End

L'oggetto WebView

Specificamente dedicato alla gestione del codice html è l'oggetto WebView, che può essere utilizzato attivando il Componente gb.gui.qt.webkit o il Componente gb.qt5.webkit.

L'uso del codice html potrà essere effettuato in particolare mediante le proprietà:

• .HTML che ritorna il codice html mostrato nella pagina web, oppure imposta quello da usare con l'oggetto WebView;
• .Url che ritorna l'URL mostrato nella pagina web, oppure imposta l'URL della pagina web che dovrà essere mostrata nell'oggetto WebView.

Per impostare l'oggetto WebView, mentre la proprietà .HTML richiede che si debba riportare nella sua stringa tutto il codice html, la proprietà .Url, invece, si servirà del codice html presente in un'altra pagina web per impostare l'oggetto WebView.

L'oggetto WebView supporta una quantità molto superiore di comandi (sopra non riportati) propri del protocollo html rispetto agli altri oggetti, all'inizio di questa pagina elencati.

La proprietà .HTML

La proprietà .HTML dell'oggetto WebView supporta una stringa formata dal codice HTML di una pagina web che si vuole mostrare nell'oggetto medesimo. ^{[nota 4] [nota 5]}

Esempio:

Public Sub Form_Open()

 WebView1.Html = "<HTML><BODY>Questo è un collegamento al " &
 "<A HREF='http://www.gambas-it.org/smf/index.php'>Forum della Comunità italiana dei programmatori di Gambas." &
 "</a></body></html>"

End

Il Metodo ".SetHtml()"

Se si usa il Componente grafico "gb.qt5.webview" oppure "gb.gtk3.webkit", allora si dovrà utilizzare il Metodo ".SetHtml()":

Public Sub Form_Open()

 WebView1.SetHtml("<HTML><BODY>Questo è un collegamento al " &
 "<A HREF='http://www.gambas-it.org/smf/index.php'>Forum della Comunità italiana dei programmatori di Gambas." &
 "</a></body></html>")

End

La Proprietà ".Url"

La Proprietà ".Url" consente di richiamare e mostrare nell'oggetto WebView una pagina web, esterna o contenuta nel programma.

Facciamo l'esempio di una pagina web, salvata in un file html, contenuto nella cartella Dati del progetto:

Public Sub Form_Open()

 WebView1.Url = "indirizzo_pagina_web.html"

End

In questo caso l'oggetto WebView mostrerà la pagina web, come composta ed impostata dal codice html in essa contenuto.

---

Note

[1] Per l'uso di TextEdit e per le celle dell'Oggetto GridView in Gambas si dovrà avere l'accortezza di usare la Proprietà ".RichText".
Esempio:

TextEdit1.RichText = "<FONT color=green><B>prova testo</b></font>"

[2] Il Metodo ".RichText()" deve essere seguito dal Metodo ".Fill()";

[3] Va comunque considerato che a tal riguardo B. Minisini ha affermato che:
«Gambas Rich Text non è un "Rich-text". Supporta solo ciò che è specificato nel wiki. Il fatto che Qt supporti di più non dovrebbe essere preso in considerazione. Può scomparire senza preavviso! Per i casi complessi è meglio utilizzare il controllo HtmlView di 'gb.form.htmlview'.»

[4] La Proprietà ".Html" non supporta tutto il codice HTML. In tal caso, ma anche quando essa non supporta altri linguaggi come il CSS o il JavaScript, è necessario scrivere tale codice in un file Html, e richiamarlo poi con la Proprietà ".Url" .

[5] La Proprietà ".Html" non va confusa con la Proprietà ".Text", la quale ultima, invece, restituisce il testo senza impostazione del codice HTML.