Components in der Web App-Definition referenzieren

Jede einzelne in der Web App verwendete Component wird in einer separaten Definition deklariert. Diese einzelnen Definitionen werden anschließend in der Web App-Definition über das Element <ComponentReference> referenziert.

Innerhalb der <ComponentReference> können weitere <Components> mit ihren jeweiligen Referenzen (<ComponentReference>) enthalten sein. Damit kann eine hierarchische Navigation umgesetzt werden.

Das Element <ComponentReference> verfügt über folgende Attribute:

Attribut	Beschreibung
`default`	Bei genau einer Component erforderlich. Legt fest, welche Component zuerst angezeigt wird ("Startseite"). Mögliche Werte: `true` / `false`
`displayName`	Anzeigename der Component im Menü. Mögliche Werte: Beliebige Zeichenkette mit dem Anzeigenamen der Component
`fontFamily`	Legt die Schriftfamilie innerhalb der Component fest. Die Eigenschaft wird an alle Controls und Actions 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 Actions der Component vererbt. Mögliche Werte: 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. Die Eigenschaft wird an alle Controls und Actions 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 Actions der Component 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 Actions der Component vererbt. Mögliche Werte: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (Standard) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`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. Die Auswahl kann von den tatsächlich verfügbaren Material Icons abweichen.
`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`
`name`	Eindeutiger Name der Component. Mögliche Werte: Beliebige Zeichenkette mit dem Namen der Component
`path`	Erforderlich. Eindeutige URL der Component, sichtbar in der Adresszeile des Browsers. Mögliche Werte: Zeichenkette aus alphanumerischen Zeichen (keine Umlaute, Punkte usw.)
`showInMenu`	Legt fest, ob die Component im Menü angezeigt wird. Dieses Attribut hat keine Auswirkungen auf eine Master/Detail Component. Mögliche Werte: `true` (default) / `false` Diese Einstellung bezieht sich auch auf alle Subcomponents. Wenn keine Component im Menü angezeigt wird, dann wird das gesamte Menü ausgeblendet. Der Inhaltsbereich erstreckt sich dann über die gesamte Breite.
`source`	Pfad zur Definitionsdatei relativ zum Ordner `Components`. Mögliche Werte: Zeichenkette (URI)
`title`	Titel der Component. Wird in der Component als Header angezeigt. Data Binding möglich Mögliche Werte: Beliebige Zeichenkette mit dem Titel der Component
`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`

Beispiel

Definition des integrierten Beispielprojektes Simple CRM

XML

<?xml version="1.0" encoding="UTF-8"?>
<WebApp xmlns="http://softproject.de/webapp/1.0"
        path="SimpleCRM">
	<Translations>
		<Translation displayName="Deutsch" name="de"/>
		<Translation displayName="English" name="en"/>
	</Translations>
	<Modules>
		<Module displayName="My Module" path="Module">
			<Components>
				<ComponentReference default="true" displayName="$Customers" 
                     iconUrl="logo.png" name="Home"
                     path="Home" source="Customer/Customer.masterdetail"/>
				<ComponentReference displayName="Statistik" iconUrl="Statistic.png" 
                     path="Statistic" source="Statistic/Statistic.detail"/>
				<ComponentReference displayName="$Administration" iconUrl="Gear.png" 
                     path="Administration" source="Administration/Administration.detail">
				  <Components>
						<ComponentReference displayName="$Country" iconUrl="Country.png" 
                             name="Countries" path="Country"
                             source="Administration/Country/Country.masterdetail"/>
						<ComponentReference displayName="$Category" iconUrl="Category.png" 
                             name="Categories" path="Category"
                             source="Administration/Category/Category.masterdetail"/>
						<ComponentReference displayName="$LegalForm" iconUrl="LegalForm.png" 
                             name="LegalForm" path="LegalForm"
                             source="Administration/LegalForm/LegalForm.masterdetail"/>
						<ComponentReference displayName="$Event" iconUrl="Event.png" 
                             name="Event" path="Event"
                             source="Administration/Event/Event.masterdetail"/>
				 </Components>
			    </ComponentReference>	
		   </Components>
		</Module>
	 </Modules>
</WebApp>