sap.m.page与sap.m.semantic.SemanticPage的区别

Question

sap.m.Page和sap.m.semantic.SemanticPage有什么区别？因为两者都适用于FIORI页面。

Answer 1

页面是一个简单的容器，只有几个属性，比如"title“和"showNavButton”。页面中的其他所有内容都是您从库中自由选择并设置的控件。例如，如果要添加页脚，可以使用库中的通用<footer>控件。

SemanticPage也是一个容器，但是，它有许多可以使用的特定控件，并且它们有一个预定义的行为。例如，它有一个特定的页脚(<semantic:footer>...</semantic:footer>)，旨在使您每次使用它时都具有相同的外观。

下面的代码显示了来自SDK的语义页面示例，您可以看到语义页面中使用了许多<semantic:控件：

<semantic:SemanticPage
        id="mySemanticPage"
        headerPinnable="true"
        toggleHeaderOnTitleClick="true"
        preserveHeaderStateOnScroll="false"
        titleAreaShrinkRatio="1:1.6:1.6"
        showFooter="true">

        <!-- Title Heading-->
        <semantic:titleHeading>
            <Title text="{/title}" />
        </semantic:titleHeading>

        <!-- Title Breadcrumbs-->
        <semantic:titleBreadcrumbs>
            <Breadcrumbs>
                <Link text="Home" />
                <Link text="Page 1" />
                <Link text="Page 2" />
                <Link text="Page 3" />
                <Link text="Page 4" />
                <Link text="Page 5" />
            </Breadcrumbs>
        </semantic:titleBreadcrumbs>

        <!-- Title Snapped On Mobile Content-->
        <semantic:titleSnappedOnMobile>
            <Title text="Header Title On Phone"/>
        </semantic:titleSnappedOnMobile>

        <!-- Title Content-->
        <semantic:titleContent>
            <Image src="./test-resources/sap/f/images/KPI.png" tooltip="This is just a placeholder, not a real KPI control." height="2rem" width="3.5rem"/>
        </semantic:titleContent>

        <!-- TitleExpanded content-->
        <semantic:titleSnappedContent>
            <Text text="{/titleSnappedContent/text}"/>
        </semantic:titleSnappedContent>

        <!-- Header Content -->
        <semantic:headerContent>
            <layout:HorizontalLayout allowWrapping="true">
                <layout:VerticalLayout class="sapUiMediumMarginEnd">
                    <ObjectAttribute title="Functional Area" text="{/objectDescription/category}"/>
                    <ObjectAttribute title="Cost Center" text="{/objectDescription/center}"/>
                    <ObjectAttribute title="Email" text="{/objectDescription/email}"/>
                </layout:VerticalLayout>

                <layout:VerticalLayout>
                    <ObjectAttribute title="Availability"/>

                    <ObjectStatus text="In Stock" state="{/objectDescription/status}" />
                </layout:VerticalLayout>
            </layout:HorizontalLayout>
        </semantic:headerContent>

        <!-- Content -->
        <semantic:content>
            <Table
                id="idProductsTable"
                inset="false"
                items="{path:'/ProductCollection'}"
                class="sapFSemanticPageAlignContent"
                width="auto">

                <columns>
                    <Column>
                        <Text text="Name"/>
                    </Column>
                    <Column minScreenWidth="Tablet" demandPopin="true">
                        <Text text="Category"/>
                    </Column>
                    <Column minScreenWidth="Tablet" demandPopin="true">
                        <Text text="SupplierName"/>
                    </Column>
                </columns>

                <items>
                    <ColumnListItem vAlign="Middle">
                        <cells>
                            <ObjectIdentifier title="{Name}" text="{ProductId}"/>
                            <Text text="{Category}"/>
                            <Text text="{SupplierName}"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </semantic:content>

        <semantic:titleMainAction>
            <semantic:TitleMainAction text="Edit"/>
        </semantic:titleMainAction>

        <semantic:addAction>
            <semantic:AddAction />
        </semantic:addAction>

        <semantic:deleteAction>
            <semantic:DeleteAction />
        </semantic:deleteAction>

        <semantic:copyAction>
            <semantic:CopyAction />
        </semantic:copyAction>

        <semantic:editAction>
            <semantic:EditAction />
        </semantic:editAction>

        <semantic:favoriteAction>
            <semantic:FavoriteAction />
        </semantic:favoriteAction>

        <semantic:flagAction>
            <semantic:FlagAction />
        </semantic:flagAction>

        <semantic:closeAction>
            <semantic:CloseAction />
        </semantic:closeAction>

        <semantic:fullScreenAction>
            <semantic:FullScreenAction visible="{/notMobile}"/>
        </semantic:fullScreenAction>

        <semantic:exitFullScreenAction>
            <semantic:ExitFullScreenAction visible="{/notMobile}"/>
        </semantic:exitFullScreenAction>

        <!-- Custom Title Text Content-->
        <semantic:titleCustomTextActions>
            <Button text="ToggleFooter" press="showFooter"/>
        </semantic:titleCustomTextActions>

        <!-- Custom Title Icon Content-->
        <semantic:titleCustomIconActions>
            <OverflowToolbarButton icon="sap-icon://cart" text="cart" />
        </semantic:titleCustomIconActions>

         <!--Semantic ShareMenu Buttons-->
        <semantic:discussInJamAction>
            <semantic:DiscussInJamAction />
        </semantic:discussInJamAction>

        <semantic:shareInJamAction>
            <semantic:ShareInJamAction />
        </semantic:shareInJamAction>

        <semantic:printAction>
            <semantic:PrintAction />
        </semantic:printAction>

        <semantic:sendEmailAction>
            <semantic:SendEmailAction />
        </semantic:sendEmailAction>

        <semantic:sendMessageAction>
            <semantic:SendMessageAction />
        </semantic:sendMessageAction>

        <!-- Custom Share Actions -->
        <semantic:customShareActions>
            <Button icon= "sap-icon://bed" text="Bed" />
            <Button icon= "sap-icon://flight" text="Flight" />
        </semantic:customShareActions>

        <!-- Semantic Footer Buttons -->
        <semantic:positiveAction>
            <semantic:PositiveAction />
        </semantic:positiveAction>

        <semantic:negativeAction>
            <semantic:NegativeAction />
        </semantic:negativeAction>

        <semantic:messagesIndicator>
            <semantic:MessagesIndicator press="onMessagesButtonPress"/>
        </semantic:messagesIndicator>

        <!-- Custom Footer Content-->
        <semantic:footerCustomActions>
            <Button text="Save" />
            <Button text="Cancel" />
        </semantic:footerCustomActions>

    </semantic:SemanticPage>