Components | X4Documentation

Web-Anwendung bestehen aus verschiedenen Components, die jeweils in einer separaten Datei definiert werden. Anschließend werden die Components innerhalb von Components über das Element <ComponentReference> referenziert.

Die Vererbung von Properties über die Navigation ist nicht möglich.

Es gibt verschiedene Arten von Components:

Komponente	Tag	Beschreibung
Detail Component	`DetailComponent`	Zeigt Text an.
List Component	`ListComponent`	Zeigt Daten in Form von dynamisch erzeugten Listen an
Calendar Component	`CalendarComponent`	Zeigt einen Kalender an
Master/Detail Component	`MasterDetailComponent`	Kann aus den Strukturelementen `Master`, `Detail` und `Overlay` bestehen. Im `master`-Bereich wird eine dynamisch erzeugt Liste angezeigt. Je nach ausgewähltem Eintrag in dieser Liste werden die detaillierteren Informationen zu diesem Eintrag im `detail`-Strukturelement angezeigt.
ExternalWeb Component	`ExternalWebComponent`	Bettet eine externe Webseite in eine Web App ein.
Grid Component	`GridComponent`	Zeigt Daten in einer tabellarischen Darstellung an.

Die detaillierteren Unterschiede zwischen den Components sind in den jeweiligen Kapiteln erläutert.

XML

<WebApp xmlns="http://softproject.de/webapp/1.0" path="BeispielProjekt">
	<Modules>
		<Module path="Module" displayName="My Module">
			<Components>
				<!-- Bereich für die Components -->
				<ComponentReference/>
			</Components>
		</Module>
	</Modules>
</WebApp>

Components können ineinander verschachtelt werden.

XML

<WebApp xmlns="http://softproject.de/webapp/1.0">
	<Modules>
		<Module displayName="My Module" path="Module">
			<Components>
				<ComponentReference default="true" displayName="$Customers" iconUrl="logo.png" name="Home"
                path="Home" source="Customers/Customers.masterdetail"/>				
				<ComponentReference displayName="$Administration" iconUrl="Gear.png" path="Administration"
                source="Administration/Administration.masterdetail">
					<Components>
						<ComponentReference displayName="$Country" iconUrl="Country.png" name="Countries" 
						path="Countries" source="Administration/Country/Country.masterdetail"/>
						...
						<ComponentReference displayName="$Event" iconUrl="Event.png" name="Event" 
						path="Event" source="Administration/Event/Event.masterdetail/>
					</Components>
				</ComponentReference>
			</Components>
		</Module>
	</Modules>
</WebApp>

Wenn Components verschachtelt werden, werden sie im Menü als Unterpunkt angezeigt:

Bei der Verschachtelung von Components ist darauf zu achten, dass innerhalb der äußeren Component zunächst ein Element Components erzeugt wird. Components enthält die untergeordneten Components.

Attribute für Komponenten

Components können folgende Attribute besitzen:

Attribut	Beschreibung
`fontFamily`	Legt die Schriftfamilie innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Aktionen der Component vererbt. Mögliche Werte: Fontcode aus der Font-Palette, z. B. `Font04`
`fontSize`	Legt die Schriftgröße innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Aktionen der Component vererbt. 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:`xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Legt die Breite der einzelnen Schriftzeichen fest. Die Eigenschaft wird an alle Controls und Aktionen der Component vererbt. Mögliche Werte: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (Standard) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Legt die Neigung der Schrift fest. Die Eigenschaft wird an alle Controls und Aktionen der Components vererbt. Mögliche Werte: `italic`: kursive Schrift `normal`: normale Schrift (Standard) `oblique`: schräg gestellter Schriftstil (berechnet)
`fontWeight`	Legt die Schriftstärke fest. Die Eigenschaft wird an alle Controls und Aktionen der Components vererbt. Mögliche Werte: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (Standard) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`iconColor`	Definiert die Farbe des Icons der Component. Diese Einstellung überschreibt die Standardfarbe des Farbschemas! Mögliche Werte: Hexadezimaler Farbwert, z. B.`ff5a00` Verwenden Sie keine Raute vor dem Farbwert oder eine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`iconURL`	Pfad zu einer Grafikdatei oder Angabe eines Material Icons, der als Icon der Component verwendet wird. Die Grafikdatei muss im Ordner `Resources` direkt unterhalb des Web-App-Projekts enthalten sein. Pfadangabe relativ zum Ordner `Resources`. Das Material Icon muss mit dem Präfix `icon`, z. B. `icon:<MaterialIconName>` angegeben werden. Mögliche Werte: Zeichenkette (URI), z. B. `clock.png` `icon:<MaterialIconName>` , z. B. `icon:extension` Mit `Strg`+`Leertaste` erhalten Sie eine Übersicht der verfügbaren Icons. Eine weitere Übersicht ist auch online verfügbar. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen.
`process`	Erforderlich. Pfad zur `.wrf`-Datei, die die Daten für die Component liefert. Der Technical Process muss im Ordner `Services/Processes`enthalten sein. Pfadangabe relativ zum Ordner `Services/Processes`. Mögliche Werte: Zeichenkette (URI)
`title`	Titel der Komponente. Wird in der Anwendung als Header angezeigt. Data Binding möglich Mögliche Werte: Beliebige Zeichenkette oder Ausdruck für Data Binding
`titleBackground`	Definiert eine Titel-Hintergrundfarbe. Mögliche Werte: Hexadezimaler Farbwert, z. B.`ff5a00` Verwenden Sie keine Raute vor dem Farbwert und keine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`
`titleForeground`	Definiert eine Farbe für den Titel-Vordergrund. Mögliche Werte: Hexadezimaler Farbwert, z. B.`ff5a00` Verwenden Sie keine Raute vor dem Farbwert und keine verkürzte Schreibweise des Farbwerts! Farbcode aus der Farbpalette der Web App (vgl. Theming), z. B. `A200`

Components müssen ein

Layout

enthalten.