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
• TextEdit ^{[nota 1]}
• GridView[n, n] ^{[nota 1]}
• InputBox
• Message
• Balloon
• WebView

Supportano il codice html anche:

• i Metodi ".DrawRichText()" e ".RichText()" ^{[nota 2]} della Classe Paint ;
• in generale la Proprietà ".RichText" di qualsiasi oggetto grafico in possesso di tale Proprietà;
• la Proprietà ".Tooltip" di qualunque oggetto;
• il Commento alla dichiarazione di una risorsa nel codice.

Risultati ottimali si otterranno attivando i Componenti basati sulle risorse grafiche di QT. ^{[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

Uso dei TAG del protocollo HTML nei Commenti delle dichiarazioni delle risorse

Come sappiamo ^{[nota 4]}, è possibile far apparire un nostro commento a una risorsa nell'apposita finestrina della guida durante la scrittura dell'identificatore di tale risorsa nell'editor del codice.

Mediante alcuni TAG del protocollo HTML è possibile attribuire alcune caratteristiche al testo del commento (anche facendo usare e apparire Oggetti multimediali nella finestra della guida dei commenti).
Così ogni qual volta nel resto del codice si scriverà il nome dell'identificatore della risorsa commentata, si vedrà nella finestra della guida il commento con le caratteristiche testuali impostate mediante i TAG del protocollo HTML.

Esempi pratici

Modificare l'aspetto del font del commento

Private Const VALORE As Integer = 10000 ''<B><I><U><FONT Size=5>Questo è un commento

o così:

'' <B><I><U>Questo è un commento
Private Const VALORE As Integer = 10000

Attribuire un colore al commento

Private Const VALORE As Integer = 10000 ''<FONT Color=red>Questo è un commento

Usare file mediali

Usare un file immagine

Private Const VALORE As Integer = 10000 ''<IMG Src=/percorso/del/file/immagine>Questo è un commento</img>

dal web:

Private Const VALORE As Integer = 10000 ''<IMG Src=https://www.gambas-it.org/wiki/resources/assets/gambas-wiki-logo.png>Questo è un commento</img>

Eseguire un file audio/Midi/video/immagine

Private Const VALORE As Integer = 10000 ''<A Href=/percorso/del/file/mediale>Questo è un commento</a>

Per eseguire il file mediale, si dovrà ovviamente cliccare sul testo del commento.
Per terminare l'esecuzione, sarà sufficiente premere sulla tastiera il tasto "Back Space" (ossia quello che cancella i caratteri a sinistra del cursore).
Analogamente per l'esecuzione di un video dal web:

Private Const VALORE As Integer = 10000 ''<A Href=https://cdn.pixabay.com/video/2016/01/14/1917-152081339_large.mp4>Questo è un commento</a>

Usare anche i TAG del protocollo HTML specifici per la gestione dei file mediali

Per i file audio e Midi:

Private Const VALORE As Integer = 10000 ''<AUDIO controls><Source src=file:///percorso/del/file/audio/o/Midi  type=audio/TIPO /></audio>

Il tipo sarà così impostato:
Per i file WAV => wav
Per i file OGG => ogg
Per i file MP3 => mpeg
Per i file Midi => midi

Per i file video:

Private Const VALORE As Integer = 10000 ''<VIDEO width=640 height=480 controls><Source src=file:///percorso/del/file/video /></video>

analogamente per vedere un video dal web:

Private Const VALORE As Integer = 10000 ''<VIDEO width=640 height=480 controls><Source src=https&058;//cdn.pixabay.com/video/2016/01/14/1917-152081339_large.mp4 /></video>

Mostrare un sito web

Private Const VALORE As Integer = 10000 ''<A Href=https://www.gambas-it.org/smf>Questo è un commento</a>

Anche in questo caso, per far caricare e mostrare la pagina del sito web indicata, bisognerà cliccare sul testo del commento.

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.

Il Metodo ".SetHtml()"

Il Metodo ".SetHtml()" del Controllo WebView supporta una stringa formata dal codice HTML di una pagina web che si vuole mostrare nel WebView.

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

---

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] Vedasi la seguente pagina: Far apparire un commento a una risorsa nella finestrina guida nell'editor del codice