<mvc:View
    displayBlock="true"
    xmlns:core="sap.ui.core"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    controllerName="opensap.myapp.controller.App">
    <App>
        <pages>
            <Page title="openSAP - Developing with SAPUI5">
                <content>
                    <IconTabBar id="idTopLevelIconTabBar" class="sapUiResponsiveContentPadding">
                        <items>
                            <IconTabFilter id="start" text="{i18n>gettingStartedFilter}">
                                <Carousel class="myAppCrs1">
                                    <pages>
                                        <Image src="images/img1.jpg" height="400px"/>
                                        <Image src="images/img2.jpg" height="400px"/>
                                    </pages>
                                </Carousel>
                                <Button text="{i18n>showHelloButtonText}" press="onShowHello"/>
                                <Input
                                    value="{
                                        path: 'helloPanel>/recipient/name',
                                        type: 'sap.ui.model.type.Float',
                                        formatOptions : {
                                            minFractionDigits : 2
                                        },
                                        constraints: {
                                            maximum: 3000
                                        }
                                    }"
                                    description="Hello {helloPanel>/recipient/name}"
                                    width="60%"/>
                            </IconTabFilter>
                            <IconTabFilter id="layouts" text="{i18n>layoutFilter}">
                                <MessageStrip type="Information" showIcon="true" text="Here's a Form Layout inside an Icon Tab Bar …"></MessageStrip>
                                <f:SimpleForm id="simpleFormChange" title="Address" editable="true" class="editableForm sapUiSmallMarginTopBottom">
                                    <f:content>
                                        <Label text="{i18n>layoutFormName}"/>
                                        <Input value="{address>/Name}"/>
                                        <Label text="{i18n>layoutFormStreet}"/>
                                        <Input value="{address>/Street}"/>
                                        <Label text="{i18n>layoutFormHouseNumber}"/>
                                        <Input value="{address>/HouseNumber}"/>
                                        <Label text="{i18n>layoutFormZIPCode}"/>
                                        <Input value="{address>/ZIPCode}"/>
                                        <Label text="{i18n>layoutFormCity}"/>
                                        <Input value="{address>/City}"/>
                                        <Label text="{i18n>layoutFormCountry}"/>
                                        <Select>
                                            <items>
                                                <core:Item text="{i18n>layoutCountryGermany}"/>
                                                <core:Item text="{i18n>layoutCountryUSA}"/>
                                                <core:Item text="{i18n>layoutCountryEngland}"/>
                                            </items>
                                        </Select>
                                    </f:content>
                                </f:SimpleForm>
                                <Toolbar class="sapUiSmallMarginTopBottom">
                                    <ToolbarSpacer/>
                                    <Button text="{i18n>layoutPublishButton}" type="Accept" icon="sap-icon://outbox"/>
                                    <Button text="{i18n>layoutDraftButton}" icon="sap-icon://save"/>
                                </Toolbar>
                            </IconTabFilter>
                            <IconTabFilter text="{i18n>dataBindingFilter}" key="db">
                                <List
                                    id="productsList"
                                    width="auto"
                                    items="{
                                        path: '/ProductSet',
                                        sorter: {
                                            path: 'Category',
                                            group: true
                                        },
                                        parameters: {
                                            expand: 'ToSupplier'
                                        }
                                    }"
                                    growing="true"
                                    growingThreshold="5"
                                    growingScrollToLoad="false"
                                    mode="SingleSelectMaster"
                                    selectionChange="onItemSelected">
                                    <headerToolbar>
                                        <Toolbar>
                                            <Title text="{i18n>productListTitle}"/>
                                            <ToolbarSpacer/>
                                            <SearchField width="50%" search="onFilterProducts"/>
                                        </Toolbar>
                                    </headerToolbar>
                                    <items>
                                        <ObjectListItem
                                            title="{Name}"
                                            number="{
                                                parts: [
                                                    {path: 'Price'},
                                                    {path: 'CurrencyCode'}
                                                ],
                                                type: 'sap.ui.model.type.Currency',
                                                formatOptions: {
                                                    showMeasure: false
                                                }
                                            }"
                                            numberState="{= ${Price} > 500 ? 'Error' : 'Success'}"
                                            intro="{ProductID}"
                                            numberUnit="{CurrencyCode}">
                                            <firstStatus>
                                                <ObjectStatus
                                                    text="{ parts: [
                                                        {path: 'WeightUnit'},
                                                        {path: 'WeightMeasure'} ],
                                                    formatter : '.formatter.delivery'
                                                }"/>
                                            </firstStatus>
                                            <secondStatus>
                                                <ObjectStatus
                                                    title="Delivered from"
                                                    text="{ToSupplier/Address/City}"/>
                                            </secondStatus>
                                        </ObjectListItem>
                                    </items>
                                </List>
                                <Panel
                                    id="productDetailsPanel"
                                    headerText="Product Details"
                                    visible="false">
                                    <l:Grid>
                                        <Text text="Product ID: {ProductID}"/>
                                        <Text text="Product Name: {Name}"/>
                                        <Text text="Description: {Description}"/>
                                        <Text text="Price: {Price}"/>
                                    </l:Grid>
                                </Panel>
                            </IconTabFilter>
                        </items>
                    </IconTabBar>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>