TextBlock | X4Documentation

Mit <TextBlock>-Controls können Sie Textblöcke innerhalb einer Web-Anwendung formatieren.

Hinweise zur Verwendung

Ein <TextBlock>-Control wird mit dem Element <TextBlock> erzeugt.

<TextBlock>
...
</TextBlock>

<TextBlock>-Controls können in allen verfügbaren Layouttypen verwendet werden. Weitere Informationen finden Sie unter Layouts.

Attribute

Das <TextBlock>-Control wird über die Standardattribute für Controls definiert.

Elemente

Das Element <TextBlock> kann folgende Elemente enthalten:

Freitext
<Binding>
<Break>
<Paragraph>

<TextLink>
<Translation>

Element `<Binding>`

Das Element <Binding> wird für Data Binding verwendet.

Sie können das folgende Attribut für das Element <Binding> definieren:

Attribut	Beschreibung
`value`	Bindet eine gültige Data-Binding-Zeichenkette. Beachten Sie, dass keine Konstanten erlaubt sind.

Beispiel <Binding>

XML

<Span>
    Span with binding
    <Break />
    value = '<Binding value="#test" />'
</Span>

Element `<Break>`

Das Element <Break> wird verwendet, um Zeilenumbrüche innerhalb eines Textabschnitts einzufügen.

Beispiel <Break>

XML

<Paragraph>
   	SoftProject GmbH
  	<Break/>
   	Am Erlengraben 3
   	<Break/>
  	D-76275 Ettlingen
   	<Break />
   	E-Mail: info@softproject.de
</Paragraph>

Element `<Paragraph>`

Das Element <Paragraph> wird verwendet, um Texte in verschiedene Absätze zu unterteilen und kann folgende Elemente enthalten:

Freitext
<Binding>
<Break>
<Paragraph>

<TextLink>
<Translation>

Sie können die folgenden Attribute für das Element <Paragraph> definieren:

Attribut	Beschreibung
`background`	Definiert eine Farbe für den Hintergrund des Controls. Hinweis: Diese Einstellung überschreibt die Standardfarbe des Farbschemas. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Hinweis: Verwenden Sie keine Raute vor dem Farbwert. Verwenden Sie keine verkürzte Schreibweise des Farbwerts. Farbcode aus der Farbpalette der Web App, z. B. `A200.` Weitere Informationen finden Sie unter Theming.
`fontFamily`	Legt die Schriftfamilie fest. Hinweis: Mit diesem Attribut wird die Standardschrift der Web App für das Control überschrieben. Wenn das Attribut auf einem Element definiert wird, dann wird die Schriftfamilie an die Kindelemente des Elementes vererbt, sofern die Kindelemente das Attribut `fontFamily` nicht explizit gesetzt haben. Mögliche Werte: `MainFont`: hinterlegte Hauptschrift Fontcode aus der Font-Palette, z. B. `Font04`
`fontSize`	Legt die Schriftgröße fest. Hinweis: Mit diesem Attribut wird die Standardschriftgröße der Web App für das Control überschrieben. Mögliche Werte: Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. `20`, `20.8`, `.9` Schriftgröße in Pixel, z. B. `20px` Schriftgröße in Punkt, z. B. `18pt` Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. `.8em` oder `120%` Schlüsselwörter, z. B. `small` oder `larger`
`fontStretch`	Legt die Breite der einzelnen Schriftzeichen fest. Hinweis: Mit diesem Attribut wird die Standardbreite der Schriftzeichen für das Control überschrieben. Mögliche Werte: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (Standard) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Legt die Neigung der Schrift fest. Hinweis: Mit diesem Attribut wird die Standardneigung der Schriftzeichen für das Control überschrieben. Mögliche Werte: `italic`: kursive Schrift `normal`: normale Schrift (Standard) `oblique`: schräg gestellter Schriftstil (berechnet)
`fontWeight`	Legt die Schriftstärke fest. Hinweis: Mit diesem Attribut wird die Standardstärke der Schriftzeichen für das Control überschrieben. Mögliche Werte: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (Standard) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`foreground`	Definiert eine Farbe für den Vordergrund (Texte usw.) des Controls. Hinweis: Diese Einstellung überschreibt die Standardfarbe des Farbschemas. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Hinweis: Verwenden Sie keine Raute vor dem Farbwert. Verwenden Sie keine verkürzte Schreibweise des Farbwerts. Farbcode aus der Farbpalette der Web App, z. B. `A200` Weitere Informationen finden Sie unter Theming.
`justifyText`	Legt die Textausrichtung innerhalb des Textblocks fest. Mögliche Werte: `justify`: Blocksatz `center`: Zentriert `left` (Standard): Linksbündig `right`: Rechtsbündig
`textOverflow`	Gibt an, was passieren soll, wenn das Control voll ist. Mögliche Werte: `ellipsis` (Standard): Zeigt mit `...`, dass der Text nicht zu Ende ist. `hidden`: Bricht den Text ab, ganze Wörter werden beachtet. `wordBreak`: Bricht den Text innerhalb des Wortes ab. `allow`: Bricht den Text zwischen den Wörtern um.

Beispiel <Paragraph>

XML

<Paragraph justifyText="justify" textOverflow="allow">
    Paragraph
    <Binding value="#test" />
</Paragraph>

Element ``

Das Element  wird verwendet, um Textabschnitte oder einzelne Textelemente zu formatieren und kann folgende Elemente enthalten:

Freitext
<Binding>
<Break>
<Paragraph>

<TextLink>
<Translation>

Sie können die folgenden Attribute für das Element  definieren:

Attribut	Beschreibung
`background`	Definiert eine Farbe für den Hintergrund des Controls. Hinweis: Diese Einstellung überschreibt die Standardfarbe des Farbschemas. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Hinweis: Verwenden Sie keine Raute vor dem Farbwert. Verwenden Sie keine verkürzte Schreibweise des Farbwerts. Farbcode aus der Farbpalette der Web App, z. B. `A200.` Weitere Informationen finden Sie unter Theming.
`fontFamily`	Legt die Schriftfamilie fest. Hinweis: Mit diesem Attribut wird die Standardschrift der Web App für das Control überschrieben. Wenn das Attribut auf einem Element definiert wird, dann wird die Schriftfamilie an die Kindelemente des Elementes vererbt, sofern die Kindelemente das Attribut `fontFamily` nicht explizit gesetzt haben. Mögliche Werte: `MainFont`: hinterlegte Hauptschrift Fontcode aus der Font-Palette, z. B. `Font04`
`fontSize`	Legt die Schriftgröße fest. Hinweis: Mit diesem Attribut wird die Standardschriftgröße der Web App für das Control überschrieben. Mögliche Werte: Beliebige ganze Zahl oder Dezimalzahl mit einem Punkt als Dezimaltrennzeichen, z. B. `20`, `20.8`, `.9` Schriftgröße in Pixel, z. B. `20px` Schriftgröße in Punkt, z. B. `18pt` Schriftgröße im Vergleich zur Schriftgröße des Elternelements, z. B. `.8em` oder `120%` Schlüsselwörter, z. B. `small` oder `larger`
`fontStretch`	Legt die Breite der einzelnen Schriftzeichen fest. Hinweis: Mit diesem Attribut wird die Standardbreite der Schriftzeichen für das Control überschrieben. Mögliche Werte: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (Standard) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Legt die Neigung der Schrift fest. Hinweis: Mit diesem Attribut wird die Standardneigung der Schriftzeichen für das Control überschrieben. Mögliche Werte: `italic`: kursive Schrift `normal`: normale Schrift (Standard) `oblique`: schräg gestellter Schriftstil (berechnet)
`fontWeight`	Legt die Schriftstärke fest. Hinweis: Mit diesem Attribut wird die Standardstärke der Schriftzeichen für das Control überschrieben. Mögliche Werte: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (Standard) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`foreground`	Definiert eine Farbe für den Vordergrund (Texte usw.) des Controls. Hinweis: Diese Einstellung überschreibt die Standardfarbe des Farbschemas. Mögliche Werte: Hexadezimaler Farbwert, z. B. `ff5a00` Hinweis: Verwenden Sie keine Raute vor dem Farbwert. Verwenden Sie keine verkürzte Schreibweise des Farbwerts. Farbcode aus der Farbpalette der Web App, z. B. `A200` Weitere Informationen finden Sie unter Theming.

Beispiel 

XML

<Span fontWeight="ExtraBold" foreground="GaugeAxisMiddle">
    Span
    <Binding value="#test" />
</Span>

Element `<TextLink>`

Das Element <TextLink> wird verwendet, um eine Verlinkung zu erstellen. Um die Verlinkung zu generieren, muss eine Action definiert werden. Weitere Informationen finden Sie unter Actions.

Folgende Actions werden unterstützt:

CustomAction
DownloadAction
SelectAction
UploadAction

Beispiel <TextLink>

XML

<?xml version="1.0" encoding="UTF-8"?>
<DetailComponent xmlns="http://softproject.de/webapp/1.0">
	<FlowLayout>
		<Header value="Welcome to my new Web App!" />
		<TextBlock>
			<Link>
				<SelectAction
					process="myProcess.wrf"
					displayName="Click here"></SelectAction>
			</Link>
		</TextBlock>
	</FlowLayout>
</DetailComponent>

Element `<Translation>`

Das Element <Translation> wird verwendet, um für mehrsprachige Oberflächen einen Übersetzungsschlüssel zu hinterlegen.

Sie können das folgende Attribut für das Element Translation definieren:

Attribut	Beschreibung
`value`	Gibt den Übersetzungsschlüssel an.

Beispiel <Translation>

XML

<Span>
    Span with translation
    <Break />
    value = '<Translation value="$TranslationKey" />'
</Span>

Beispiel

TextBlock in der Detail Component

XML

<DetailComponent xmlns="http://softproject.de/webapp/1.0" name="PasswordBox">
    <FlowLayout>
        <TextBlock>
            <Paragraph>
                <Span fontWeight="Bold" fontSize="larger" foreground="500"> User details </Span>
            </Paragraph>
            <Paragraph>
                <Span>User name:</Span>
                <Span fontWeight="Bold">demo.user</Span>
                <Break/>
                <Break/>
                <Span>Email:</Span>
                <Span fontWeight="Bold">demo.user@softproject.de</Span>
                <Break/>
                <Break/>
            </Paragraph>
            <Paragraph justifyText="center">
                <TextLink>
                    <CustomAction externalLinkTarget="new" externalLink="https://www.softproject.de/de/" displayName="Go to SoftProject website">
					</CustomAction>
                </TextLink>
            </Paragraph>
        </TextBlock>
    </FlowLayout>
</DetailComponent>

Hinweise zur Verwendung

Attribute

Elemente

Element <Binding>

Element <Break>

Element <Paragraph>

Element <Span>

Element <TextLink>

Element <Translation>