<mvc:View
	controllerName="sap.m.sample.IllustratedMessageInPage.controller.Main"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	xmlns:core="sap.ui.core"
	xmlns:form="sap.ui.layout.form"
	height="100%">
	<Page>
		<form:SimpleForm editable="true" width="450px">
			<VBox>
				<Label text="Illustration Size:"/>
				<Select change="onSelectSize" items="{/sizeTypes}">
					<core:Item key="{key}" text="{text}"/>
				</Select>
				<Text text="{= ${/sSelectedSize} === 'Auto' ? 'IllustratedMessage will chose its size automatically according to its parent container width.' : 'Forced State. IllustratedMessage will keep its size even if the parent container width is changed.'}" />
			</VBox>
			<VBox>
				<Label text="Enable Vertical Responsiveness:"/>
				<Switch change="onSwitchEVS" state="{/sSelectedEVS}"/>
				<Text text="{= ${/sSelectedSize} === 'Auto' &amp;&amp; ${/sSelectedEVS} ? 'IllustratedMessage will chose its size automatically according to its parent container height.' : 'Forced State. IllustratedMessage will keep its size even if the parent container height is changed.'}" />
			</VBox>
			<Label text="Illustration Type"/>
			<Select change="onSelectType" items="{/typeTypes}">
				<core:Item key="{key}" text="{text}"/>
			</Select>
		</form:SimpleForm>

		<IllustratedMessage
			id="im"
			illustrationSize="{/sSelectedSize}"
			illustrationType="{/sSelectedType}"
			enableVerticalResponsiveness="{/sSelectedEVS}">
			<additionalContent>
				<Button text="Action (optional)" />
			</additionalContent>
		</IllustratedMessage>
	</Page>
</mvc:View>