User Tools

Site Tools


k16:k16.2:start

16.2 TextLabel

The Text-Label component can display simple HTML text, also known as RichText. A text label will always be used if you only want to output the text to be displayed in plain format:

Richtext im Text-Label

Figure 16.2.1: Display of extensive RichText in a TextLabel

16.2.1 Text Label Properties

In a text label, you can display text that you assign via the Text Label, Text or Text Label, Caption property. Further properties of a text label are described in the table:

TextLabelData typeDefaultDescription
.AlignmentInteger0Sets the horizontal alignment of the text in the text label or returns its alignment→ class Align
.AutoresizeBooleanFalseSpecifies whether the size of the text label automatically adapts to the text.
.BorderIntegerNoneSets the border of the text label or determines the border shape or specifies whether a border exists and which border shape is used → class Border
.TextString~Sets or returns the text of the text label to be displayed
.PaddingInteger0Sets a distance between text and text label boundaries (edge)
.TransparentBooleanFalseSets the transparency of the text label or specifies whether the text label is transparent

Table 16.2.1.1: Selected text label properties

16.2.2 Syntax of RichText in Gambas

RichText in Gambas uses a subset of HTML. The following HTML tags are allowed to mark text elements:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> → Headlines
<b> → Bold font
<i> → Italic 
<s> → Crossed out
<u> → Underlined
<sub> → Subscript 
<sup> → Superscript
<small> → Small
<p> → Paragraph
<br> → Line break
<a> → Link
<font> → Font 

Information about <font> tag is given in the following table. Please note that the <font> tag no longer exists under HTML5.

Font attributeValuesNotes
FaceFont FamilyVarious fonts can be specified in a comma-separated list
ColorColor values via color names or as hexadecimal number or in RGB formatcolor = Red, color = #C3DDFF → light blue, color = RGB (255,175,255,95) → orange
SizeFont size (default=3)Absolute values from 1 to 7 or the two relative values -1 for smaller font or +1 for larger font

Table 16.2.2.2.1: Information about <font> tag

With <a>….</a> insert a link into the RichText. It is underlined and displayed in blue format - as it is expected for a hyperlink - but has no effect! After right-clicking on the link, you can copy the link address in the context menu.

These tags are also tested to mark single or multi-line source code, insert a horizontal line or display an unsorted list of n entries:

<tt> → single-line source text 
<pre> → multiline source code
<hr> → horizontal line
<ul> → unsorted list
<li> → list

Hints:

  • Change the font properties of a text label using the <font> tag. If you only want to use one font with one style and size, you can do without it and set the font properties in the Properties window (IDE) or in the source code.
  • Working with CSS is not supported, so that this text in a text label is not displayed as it would be possible in any browser.
  • It has proved to be a good idea to adapt the size of the text label to the text to be displayed.
  • You can use any HTML entity → http://unicode.e-workers.de/entities.php
  • To quickly and efficiently mark a longer text with the above tags (RichText) a text editor like BlueFish is sufficient. Create an HTML file with this editor and save it in the project directory of the Gambas project that should use RichText. In the IDE, you can open and edit the contents of the HTML file with the text editor BlueFish.

Like a simple label, you react with the TextLabel.Adjust() method if the text for a text label has changed at runtime and the text label size should automatically adapt to the changed text:

Public Sub btnAdjust_Click()  
  TextLabel.Wrap = False ' Bei längeren Textpassagen TRUE
  TextLabel.AutoResize = False
  TextLabel.Padding = 8
  TextLabel.Text = "<font size=4 face=Ubuntu color=#C3DDFF>IP-Adresse &rarr; IPv4</font>" 
  TextLabel.Text &= "<hr>Informationen auf <a href=http://de.wikipedia.org/wiki/IPv4>"
  TextLabel.Text &= "www.wikipedia.de</a>!"
  TextLabel.Adjust()
End ' btnAdjust_Click() 
 
Public Sub btnAutoResize_Click()
  TextLabel.AutoResize = True
  TextLabel.Padding = 8
  TextLabel.Text = "<font size=+1 face=Arial color=Red>Neue IP-Adresse &rarr; IPv6</font>" 
  TextLabel.Text &= "<hr>Informationen auf <a href=http://de.wikipedia.org/wiki/IPv6>"
  TextLabel.Text &= "www.wikipedia.de</a>!"
End ' btnAutoResize_Click() 

Alternatively, set the TextLabel. AutoResize property to True to achieve the same effect.

16.2.3 Project {c_hl} 16.2.3 Project {c_hl}

HotSpot2TextLabel

Figure 16.2.3.1: RichText display for each HotSpot in a text label

As you can see, the source code for the project is very straightforward:

' Gambas class file
 
Private mText As String[]
 
Public Sub Form_Open()
 
  FMain.Center
  FMain.Resizable = False
 
  mText = New String[]  
  mText = Split(File.Load("Text/architecture.txt"), "|")
 
  lblProject.Tag = mText[0]
  lblCompiler.Tag = mText[1]
  lblArchiver.Tag = mText[2]
  lblCompiledFiles.Tag = mText[3]
  lblExecutableFile.Tag = mText[4]
  lblMMAP.Tag = mText[5]
  lblClassLoader.Tag = mText[6]
  lblExecutionUnit.Tag = mText[7]
  lblSubRoutines.Tag = mText[8]
  lblComponentInterface.Tag = mText[9]
  lblComponentLoader.Tag = mText[10]
  lblInterpreter.Tag = mText[11]
  lblComponents.Tag = mText[12]
  lblNativeClasses.Tag = mText[13]
 
End ' Form_Open()
 
Public Sub HotSpots_MouseDown()
  TextLabel1.Text = Last.Tag
End

The procedure HotSpots_MouseDown() replaces, in conjunction with the special object Last - which returns a reference to the object that last triggered an event - here at least 14 individual procedures!

Download

16.2 TextLabel

Die Komponente Text-Label kann einfachen HTML-Text – auch bekannt als RichText – anzeigen. Ein Text-Label wird immer dann zum Einsatz kommen, wenn Sie den anzuzeigenden Text nur in einfacher Form formatiert ausgeben wollen:

Richtext im Text-Label

Abbildung 16.2.1: Anzeige von umfangreichem RichText in einem TextLabel

16.2.1 Eigenschaften Text-Label

In einem Text-Label können Sie Text anzeigen, den Sie über die Eigenschaft Textlabel.Text oder Textlabel.Caption zuweisen. Weitere Eigenschaften eines Text-Labels werden in der Tabelle beschrieben:

TextLabelDatentypDefaultBeschreibung
.AlignmentInteger0Setzt die horizontale Ausrichtung des Textes im Text-Label oder gibt dessen Ausrichtung zurück → Klasse Align
.AutoresizeBooleanFalseGibt an, ob sich die Größe des Text-Labels automatisch an den Text anpasst
.BorderIntegerNoneSetzt den Rand des Text-Labels oder bestimmt die Randform oder gibt an, ob ein Rand vorhanden ist und welche Randform verwendet wird → Klasse Border
.CaptionStringSynonym für .Text
.TextStringSetzt den anzuzeigenden Text des Text-Labels oder gibt diesen zurück
.PaddingInteger0Setzt einen Abstand zwischen Text und Text-Label-Grenzen (Rand)
.TransparentBooleanFalseLegt die Transparenz des Text-Labels fest oder gibt an, ob das Text-Label transparent ist

Tabelle 16.2.1.1: Ausgewählte Text-Label-Eigenschaften

16.2.2 Syntax von RichText in Gambas

RichText in Gambas nutzt eine Untermenge von HTML. Die folgenden HTML-Tags sind erlaubt, um Textelemente auszuzeichnen:

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> → Überschriften
<b> → Fettschrift, 
<i> → kursiv, 
<s> → durchgestrichen, 
<u> → unterstrichen
<sub> → tiefgestellt, 
<sup> → hochgestellt, 
<small> → schmal, 
<p> → Absatz 
<br> → Zeilenwechsel, 
<a> → Link, 
<font> → Schrift-Font 

Informationen zum <font>-Tag werden in der folgenden Tabelle angegeben. Bitte beachten Sie, dass der Tag <font> unter HTML5 nicht mehr existiert.

Font-AttributWerteHinweise
faceSchriftfamilieVerschiedene Schriften können in einer komma-getrennten Liste angegeben werden
colorFarbwerte über Farbnamen oder
als hexadezimale Zahl oder
im RGB-Format
color = Red,
color = #C3DDFF → hellblau,
color = RGB(255,175,255,95) → orange
sizeSchriftgröße (Default = 3)Absolute Werte von 1 bis 7 oder die zwei relativen Werte -1 für kleinere Schrift oder +1 für größere Schrift

Tabelle 16.2.2.1: Informationen zum <font>-Tag

Mit <a>…</a> fügen Sie einen Link in den RichText ein. Er wird unterstrichen und in der Farbe blau formatiert ausgegeben – so, wie es für einen Hyperlink erwartet wird – er bleibt jedoch ohne Wirkung! Nach einem Klick mit der rechten Maustaste auf den Link können Sie sich aber im Kontextmenü die Link-Adresse kopieren.

Erprobt sind auch diese Tags, um ein- oder mehrzeiligen Quelltext auszuzeichnen oder um eine horizontale Linie einzufügen oder eine unsortierte Liste mit n Einträgen anzuzeigen:

<tt> → einzeiliger Quelltext, 
<pre> → mehrzeiliger Quelltext, 
<hr> → horizontale Linie
<ul> → unsortierte Liste, 
<li> → Listeneintrag

Hinweise:

  • Ändern Sie die Font-Eigenschaften eines Text-Labels über das <font>-Tag. Wenn Sie nur eine Schrift mit einem Stil und in einer Größe verwenden wollen, können Sie darauf verzichten und setzen die Font-Eigenschaften im Eigenschaften-Fenster (IDE) oder im Quelltext.
  • Das Arbeiten mit CSS wird nicht unterstützt, so dass dieser Text in einem Text-Label nicht so angezeigt wird, wie das in jedem Browser möglich wäre.
  • Es hat sich als günstig erwiesen, die Größe des Text-Labels an den anzuzeigenden Text anzupassen.
  • Sie können jede HTML-Entität verwenden → http://unicode.e-workers.de/entities.php
  • Um schnell und effizient einen längeren Text mit den o.a. Tags (RichText) auszuzeichnen reicht ein Texteditor wie BlueFish aus. Legen Sie eine HTML-Datei mit diesem Editor an und speichern Sie diese im Projektverzeichnis des Gambas-Projekts, das den RichText verwenden soll. In der IDE können Sie den Inhalt der HTML-Datei mit dem Texteditor BlueFish öffnen und bearbeiten.

Wie bei einem einfachen Label reagieren Sie mit der Methode TextLabel.Adjust(), wenn sich der Text für ein Text-Label zur Laufzeit geändert hat und sich die Text-Label-Größe automatisch an den geänderten Text anpassen soll:

Public Sub btnAdjust_Click()  
  TextLabel.Wrap = False ' Bei längeren Textpassagen TRUE
  TextLabel.AutoResize = False
  TextLabel.Padding = 8
  TextLabel.Text = "<font size=4 face=Ubuntu color=#C3DDFF>IP-Adresse &rarr; IPv4</font>" 
  TextLabel.Text &= "<hr>Informationen auf <a href=http://de.wikipedia.org/wiki/IPv4>"
  TextLabel.Text &= "www.wikipedia.de</a>!"
  TextLabel.Adjust()
End ' btnAdjust_Click() 
 
Public Sub btnAutoResize_Click()
  TextLabel.AutoResize = True
  TextLabel.Padding = 8
  TextLabel.Text = "<font size=+1 face=Arial color=Red>Neue IP-Adresse &rarr; IPv6</font>" 
  TextLabel.Text &= "<hr>Informationen auf <a href=http://de.wikipedia.org/wiki/IPv6>"
  TextLabel.Text &= "www.wikipedia.de</a>!"
End ' btnAutoResize_Click() 

Alternativ setzen Sie die Eigenschaft TextLabel.AutoResize auf True, um den gleichen Effekt zu erzielen.

16.2.3 Projekt

Eine Grafik mit mehreren sensitiven, anklickbaren Bereichen nennt man ImageMap. Diese Bereiche definieren so genannte HotSpots innerhalb eines Bildes → Abbildung 16.2.3.1, die Sie mit ausgewählten Aktionen verlinken. Das können Aufrufe von HTML-Seiten, von Dateien oder von Programmen sein. Die Website des Gambas-Projekts zum Beispiel nutzt solche HotSpots in einer ImageMap um im Abschnitt Gambas-Architektur Erläuterungen zur Architektur der Sprache Gambas anzuzeigen. Um eine solche Anzeige in einem Gambas-Projekt nachzubilden, werden für die Hotspots auf einem Bild transparente Label über ausgewählten Bereichen eingefügt. Die Anzeige des mit einem HotSpot korrespondierenden Textes wird in einem Text-Label realisiert. Der Text für alle Hotspots liegt in einer Datei im RichText-Format. Jeder Textabschnitt wird durch ein Pipe-Zeichen abgeschlossen. Das Zeichen | darf natürlich im Text nicht vorkommen. Außerdem wird die Group-Eigenschaft aller transparenten (HotSpot-) Label auf den Wert 'HotSpots' gesetzt. Die Eigenschaft (HotSpot-)Label.Tag vom Typ String wird dazu verwendet, den anzuzeigenden Text aufzunehmen.

HotSpot2TextLabel

Abbildung 16.2.3.1: Anzeige von RichText für jeden HotSpot in einem Text-Label

Wie Sie sehen ist der Quelltext für das Projekt sehr überschaubar:

' Gambas class file
 
Private mText As String[]
 
Public Sub Form_Open()
 
  FMain.Center
  FMain.Resizable = False
 
  mText = New String[]  
  mText = Split(File.Load("Text/architecture.txt"), "|")
 
  lblProject.Tag = mText[0]
  lblCompiler.Tag = mText[1]
  lblArchiver.Tag = mText[2]
  lblCompiledFiles.Tag = mText[3]
  lblExecutableFile.Tag = mText[4]
  lblMMAP.Tag = mText[5]
  lblClassLoader.Tag = mText[6]
  lblExecutionUnit.Tag = mText[7]
  lblSubRoutines.Tag = mText[8]
  lblComponentInterface.Tag = mText[9]
  lblComponentLoader.Tag = mText[10]
  lblInterpreter.Tag = mText[11]
  lblComponents.Tag = mText[12]
  lblNativeClasses.Tag = mText[13]
 
End ' Form_Open()
 
Public Sub HotSpots_MouseDown()
  TextLabel1.Text = Last.Tag
End ' HotSpots_MouseDown()

Die Prozedur HotSpots_MouseDown() ersetzt, in Verbindung mit dem speziellen Objekt Last - das eine Referenz auf das Objekt zurück gibt, das als letztes ein Ereignis ausgelöst hat – hier mindestens 14 einzelne Prozeduren!

Download

The website uses a temporary session cookie. This technically necessary cookie is deleted when the browser is closed. You can find information on cookies in our privacy policy.
k16/k16.2/start.txt · Last modified: 02.07.2018 (external edit)

Page Tools