Components

Web applications consist of different components, each of which is defined in a separate file. The components are then referenced within Components via the <ComponentReference> element.

Inheritance of properties via navigation is not possible.

There are different types of components:

Component	Tag	Description
Detail Component	`DetailComponent`	Displays text.
List component	`ListComponent`	Displays data in the form of dynamically generated lists.
Calendar Component	`CalendarComponent`	Displays a calendar.
Master/Detail component	`MasterDetailComponent`	Can consist of the structural elements `Master`, `Detail` and `Overlay`. A dynamically generated list is displayed in the `master` area. Depending on the selected entry in this list, more detailed information on this entry is displayed in the `detail` structure element.
ExternalWeb component	`ExternalWebComponent`	Embeds an external website into a web app.
Grid component	`GridComponent`	Displays data in a tabular format.

More detailed differences between the components are explained in the respective chapters.

XML

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

Components can be nested within each other.

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>

When components are nested, they are displayed as sub-items in the menu:

When nesting components, make sure that a Components element is first created within the outer component. Components contains the subordinate components.

Attributes for components

Components can have the following attributes:

Attribut	Description
`fontFamily`	Defines the font family within the component. The property is inherited by all controls and actions of the component. Possible values: Font code from the font list, e.g. `Font04`
`fontSize`	Defines the font size within the component. The property is inherited by all controls and actions of the component. Possible values: Any integer or decimal number with a dot as decimal separator, e.g. `20`; `20.8`; `.9` Font size in pixels, e.g. `20px` Font size in point, e.g. `18pt` Font size compared to the font size of the parent element, e.g. `.8em` or `120%`. Key words:`xx-Small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`, `smaller`, `larger`
`fontStretch`	Defines the width of the individual characters. The property is inherited by all controls and actions of the component. Possible values: `Condensed` `Expanded` `ExtraCondensed` `ExtraExpanded` `Medium` `Normal` (default) `SemiCondensed` `SemiExpanded` `UltraCondensed` `UltraExpanded`
`fontStyle`	Defines the slant of the font. The property is inherited by all controls and actions of the component. Possible values: `italic`: italic font `normal`: normal font (default) `oblique`: oblique font style (calculated)
`fontWeight`	Defines the font weight. The property is inherited by all controls and actions of the component. Possible values: `Black` `Bold` `DemiBold` `ExtraBlack` `ExtraBold` `ExtraLight` `Heavy` `Light` `Medium` `Normal` (default) `Regular` `SemiBold` `Thin` `UltraBlack` `UltraBold` `UltraLight`
`iconColor`	Defines the color of the component's icon. This setting overwrites the default color of the color scheme! Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value or a shortened notation of the color value! Colour code from the colour palette of the web app (cf. Theming), e.g. `A200`
`iconURL`	Path to a graphic file or specification of a material icon that is used as the icon of the component. The graphic file must be contained in the `Resources` folder directly within the web app project. Path specification relative to the `Resources` folder. The material icon must be specified with the prefix `icon`, e.g. `icon:<MaterialIconName>`. Possible values: Character string (URI), e.g. `clock.png` `icon:<MaterialIconName>` , e.g. `icon:extension` With `Ctrl`+`space` you get an overview of the available icons. Another overview is also available online. The selection may differ from the actual material icons available.
`process`	Required. Path to the `.wrf` file that provides the data for the component. The Technical Process must be contained in the `Services/Processes` folder. Path relative to the `Services/Processes` folder. Possible values: String (URI)
`title`	Title of the component. Displayed in the application as a header. Data binding possible Possible values: Any character string or data binding expression
`titleBackground`	Defines the title background color. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash (#) before the color value and do not use a shortened notation of the color value! Color code from the color palette of the web app (cf. Theming), e.g. `A200`
`titleForeground`	Defines a color for the title foreground. Possible values: Hexadecimal color value, e.g. `ff5a00` Do not use a hash before the color value and do not use a shortened notation of the color value! Color code from the color palette of the web app (cf. Theming), e.g. `A200`

Components must contain a layout.