Как сделать страницу АПД отзывчивой и легко доступной с помощью мобильных телефонов

Question

Как сделать страницу ADF доступной для пользователей с помощью мобильных телефонов.Я пробовал макет кладки, представление списка вместо таблицы, но нет никаких изменений, связанных с отзывчивой функцией.

Обычная страница в компьютерной системе Страница на экране мобильного телефона

У меня есть шаблон для этой страницы JSF, который ... Шаблон:

    <af:xmlContent>
        <component xmlns="http://xmlns.oracle.com/adf/faces/rich/component">
            <display-name>SshrAppFragment</display-name>
            <facet>
                <facet-name>pageContents</facet-name>
            </facet>
            <facet>
                <facet-name>footerStart</facet-name>
            </facet>
            <facet>
                <facet-name>footer</facet-name>
            </facet>
            <facet>
                <facet-name>footerEnd</facet-name>
            </facet>
            <facet>
                <facet-name>startPanel</facet-name>
            </facet>
            <facet>
                <facet-name>endPanel</facet-name>
            </facet>
            <facet>
                <facet-name>headerStart</facet-name>
            </facet>
            <facet>
                <facet-name>header</facet-name>
            </facet>
            <facet>
                <facet-name>headerEnd</facet-name>
            </facet>
            <attribute>
                <attribute-name>Header-Height</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
            <attribute>
                <attribute-name>Header-Start-Width</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
            <attribute>
                <attribute-name>Header-End-Width</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
            <attribute>
                <attribute-name>Start-Side-Panel-Width</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
            <attribute>
                <attribute-name>End-Side-Panel-Width</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
            <attribute>
                <attribute-name>Footer-Height</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
            <attribute>
                <attribute-name>Footer-Start-Width</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
            <attribute>
                <attribute-name>Footer-End-Width</attribute-name>
                <attribute-class>java.lang.String</attribute-class>
                <default-value>0px</default-value>
            </attribute>
        </component>
    </af:xmlContent>

    <af:panelStretchLayout id="pt_psl1" startWidth="#{attrs['Start-Side-Panel-Width']}"
                           endWidth="#{attrs['End-Side-Panel-Width']}" topHeight="#{attrs['Header-Height']}"
                           bottomHeight="#{attrs['Footer-Height']}" dimensionsFrom="children"
                           styleClass="page-container AFStretchWidth">
        <f:facet name="bottom">
            <af:panelStretchLayout id="pt_psl2" topHeight="0px" bottomHeight="0px"
                                   startWidth="#{attrs['Footer-Start-Width']}"
                                   endWidth="#{attrs['Footer-End-Width']}" dimensionsFrom="children">
                <f:facet name="center">
                    <af:facetRef facetName="footer"/>
                </f:facet>
                <f:facet name="start">
                    <af:facetRef facetName="footerStart"/>
                </f:facet>
                <f:facet name="end">
                    <af:facetRef facetName="footerEnd"/>
                </f:facet>
            </af:panelStretchLayout>
        </f:facet>
        <f:facet name="center">
            <af:masonryLayout id="pt_ml1">


                    <af:facetRef facetName="pageContents"/>

            </af:masonryLayout>
        </f:facet>
        <f:facet name="start">
            <af:facetRef facetName="startPanel"/>
        </f:facet>
        <f:facet name="end">
            <af:facetRef facetName="endPanel"/>
        </f:facet>
        <f:facet name="top">
            <af:panelStretchLayout id="pt_psl3" dimensionsFrom="children" topHeight="0px" bottomHeight="0px"
                                   startWidth="#{attrs['Header-Start-Width']}"
                                   endWidth="#{attrs['Header-End-Width']}">
                <f:facet name="center">
                    <af:facetRef facetName="header"/>
                </f:facet>
                <f:facet name="start">
                    <af:facetRef facetName="headerStart"/>
                </f:facet>
                <f:facet name="end">
                    <af:facetRef facetName="headerEnd"/>
                </f:facet>
            </af:panelStretchLayout>
        </f:facet>
    </af:panelStretchLayout>

</af:pageTemplateDef>

Страница JSF ... ... 1014 *

            <!--<af:panelHeader text="" id="ph1">
                <af:query rows="2" maxColumns="2"  modeChangeVisible="false" saveQueryMode="hidden" id="qryId1" headerText="Notifications" disclosed="true"
                          value="#{bindings.NotifDtlVOCriteriaQuery.queryDescriptor}"
                          model="#{bindings.NotifDtlVOCriteriaQuery.queryModel}"
                          queryListener="#{bindings.NotifDtlVOCriteriaQuery.processQuery}"
                          queryOperationListener="#{bindings.NotifDtlVOCriteriaQuery.processQueryOperation}"
                          resultComponentId="::resId1"/>
            </af:panelHeader>
            <af:table value="#{bindings.NotifDtlVO1.collectionModel}" var="row"
                      rows="#{bindings.NotifDtlVO1.rangeSize}" styleClass="AFStretchWidth" columnStretching="column:resId1c2"
                      emptyText="#{bindings.NotifDtlVO1.viewable ? 'No data to display.' : 'Access Denied.'}" scrollPolicy="page"
                      rowBandingInterval="0" selectedRowKeys="#{bindings.NotifDtlVO1.collectionModel.selectedRow}"
                      selectionListener="#{bindings.NotifDtlVO1.collectionModel.makeCurrent}" rowSelection="single"
                      fetchSize="#{bindings.NotifDtlVO1.rangeSize}" id="resId1">
                <af:column headerText="#{bindings.NotifDtlVO1.hints.RefId.label}" id="resId1c1">
                    <af:outputText value="#{row.RefId}" shortDesc="#{bindings.NotifDtlVO1.hints.RefId.tooltip}"
                                   id="ot1"/>
                </af:column>
                <af:column headerText="#{bindings.NotifDtlVO1.hints.NotifSubject.label}" id="resId1c2">
                    <af:link text="#{row.NotifSubject}"
                             shortDesc="#{bindings.NotifDtlVO1.hints.NotifSubject.tooltip}" id="ot56"
                             actionListener="#{backingBeanScope.NotificationBean.openNotification}"/>
                </af:column>
                <af:column headerText="#{bindings.NotifDtlVO1.hints.FromUserName.label}" id="resId1c3">
                    <af:outputText value="#{row.FromUserName}"
                                   shortDesc="#{bindings.NotifDtlVO1.hints.FromUserName.tooltip}" id="ot3"/>
                </af:column>
                <af:column headerText="#{bindings.NotifDtlVO1.hints.Notifdateval.label}" id="resId1c4">
                    <af:outputText value="#{row.Notifdateval}"
                                   shortDesc="#{bindings.NotifDtlVO1.hints.Notifdateval.tooltip}" id="ot4">
                        <af:convertDateTime pattern="#{bindings.NotifDtlVO1.hints.Notifdateval.format}"/>
                    </af:outputText>
                </af:column>
            </af:table>-->
            <af:listView value="#{bindings.NotifDtlVO11.collectionModel}" var="item"
                         emptyText="#{bindings.NotifDtlVO11.viewable ? 'No data to display.' : 'Access Denied.'}"
                         fetchSize="#{bindings.NotifDtlVO11.rangeSize}" id="lv2" selection="single">
                <af:listItem id="li1" >
                    <af:panelGroupLayout layout="vertical" id="pgl2" >
                        <f:facet name="separator">
                            <af:spacer width="5" id="s1"/>
                        </f:facet>
                        <af:panelGridLayout id="pgl3">
                            <af:gridRow marginTop="2px" height="auto" marginBottom="2px" id="gr1">
                                <af:gridCell marginStart="auto" width="20%" id="gc1">
                                    <af:outputFormatted value="#{item.bindings.RefId.inputValue}" id="of16"/>
                                </af:gridCell>
                                <af:gridCell marginStart="5px" width="10%" id="gc2">
                                    <af:outputFormatted value="#{item.bindings.FromUserName.inputValue}" id="of4"/>
                                </af:gridCell>
                                <af:gridCell marginStart="5px" width="50%" id="gc3">
                                    <af:link text="#{item.bindings.NotifSubject.inputValue}" id="of10"
                                             actionListener="#{backingBeanScope.NotificationBean.openNotification}"/>
                                </af:gridCell>
                                <af:gridCell marginStart="5px" width="10%" marginEnd="5px" id="gc4">
                                    <af:outputFormatted value="#{item.bindings.Notifdateval.inputValue}" id="of15">
                                        <af:convertDateTime pattern="#{bindings.NotifDtlVO11.hints.Notifdateval.format}"/>
                                    </af:outputFormatted>
                                </af:gridCell>
                            </af:gridRow>
                        </af:panelGridLayout>
                    </af:panelGroupLayout>
                </af:listItem>
            </af:listView>       
    </f:facet>
</af:pageTemplate>