Question

我创建了一个xpage来显示多米诺骨牌视图，并且我设置了“每页最大行数：20”，但是当我从Iphone查看xpage时，我发现该视图只有creen的一半。所以我设置了“每页最大行数：30”，但是当我从Ipad查看xpage时，视图只有一半的屏幕。

那么如何使xpage可以根据屏幕大小自动调整自动显示行？

以下是xpage编码：

<?xml version="1.0" encoding="UTF-8"?><xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
    <xp:dominoView var="view1" viewName="webvwbyDept" />
</xp:this.data>
<xp:viewPanel value="#{view1}" id="viewPanel1" var="rowData"
    viewStyle="width:99.0%" rows="38">
    <xp:this.facets>
        <xp:pager partialRefresh="true" layout="Previous Group Next"
            xp:key="headerPager" id="pager1">
        </xp:pager>

        <xp:pager partialRefresh="true" layout="Previous Group Next"
            xp:key="footerPager" id="pager2">
        </xp:pager>
    </xp:this.facets>


    <xp:viewColumn columnName="$4" id="viewColumn1"
        style="text-align:center;width:65.0px">
        <xp:this.facets>
            <xp:viewColumnHeader value="Location" xp:key="header"
                id="viewColumnHeader1" style="width:65.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="Dept" id="viewColumn2"
        style="text-align:center;width:88.0px">
        <xp:this.facets>
            <xp:viewColumnHeader value="Department" xp:key="header"
                id="viewColumnHeader2" style="width:88.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="signNO" id="viewColumn3"
        style="text-align:center;width:30.0px" displayAs="link"
        openDocAsReadonly="true">
        <xp:this.facets>
            <xp:viewColumnHeader value="Document No" xp:key="header"
                id="viewColumnHeader3" style="width:30.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>

        <xp:eventHandler event="onclick" submit="true"
            refreshMode="complete" id="eventHandler1">
            <xp:this.action><![CDATA[#{javascript:if (!rowData.isCategory())
                var url = "0/"+rowData.getUniversalID()+"?OpenDocument"
                facesContext.getExternalContext().redirect(url);}]]>
            </xp:this.action>
        </xp:eventHandler>
    </xp:viewColumn>
    <xp:viewColumn columnName="BDT" id="viewColumn4"
        style="width:65.0px;text-align:center">
        <xp:this.facets>
            <xp:viewColumnHeader value="Begin Date" xp:key="header"
                id="viewColumnHeader4" style="width:65.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="EDT" id="viewColumn5"
        style="width:65.0px;text-align:center">
        <xp:this.facets>
            <xp:viewColumnHeader value="End Date" xp:key="header"
                id="viewColumnHeader5" style="width:65.0px;text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="$3" id="viewColumn7"
        style="text-align:center;width:30.0px">
        <xp:this.facets>
            <xp:viewColumnHeader value="Reason" xp:key="header"
                id="viewColumnHeader7" style="text-align:center;width:30.0px">
            </xp:viewColumnHeader>
        </xp:this.facets>
    </xp:viewColumn>
    <xp:viewColumn columnName="F1" id="viewColumn9">
        <xp:this.facets>
            <xp:viewColumnHeader value="Project" xp:key="header"
                id="viewColumnHeader9" style="text-align:center">
            </xp:viewColumnHeader>
        </xp:this.facets>
        <xp:this.value><![CDATA[#{javascript:var maxLength=10;var columnValue=rowData.getColumnValue("F1");if (typeof columnValue == "java.util.Vector") { 
    columnValue = columnValue.toArray().join(",");
}return columnValue.length > maxLength?columnValue.substring(0,maxLength)+"...":columnValue;}]]></xp:this.value>
    </xp:viewColumn>
</xp:viewPanel>

Answer 1

以下是我认为可以帮助您的两个XPage片段。

http://openntf.org/XSnippets.nsf/snippet.xsp?id=react-to-css-media-queries-to-invoke-dynamic-server-side-content-and-logic

http://openntf.org/XSnippets.nsf/snippet.xsp?id=react-to-css-media-queries-using-client-side-javascript

仅供参考：如果您从未使用它们，CSS媒体查询允许您根据屏幕大小（以像素为单位）为每个设备指定某些CSS。您通常需要四个媒体查询：手机，平板电脑，桌面，大型桌面，您可能只需要前三个。

对于您，您希望根据媒体查询调整服务器端设置，这会增加额外的复杂性。请查看这些代码段，并根据您的需要进行修改。第一个是你应该关注的那个。两者都是IBM的Tony McGuckin，他是创建XPages团队的一员。

在第一个代码段中使用此示例，我认为您需要为每个设备设置不同的视图，并根据媒体查询显示正确的视图。 IMO这将是最好的用户体验。如果这太麻烦了，考虑使用Bootstrap，你会得到内置的响应。

Answer 2

没有一种简单的方法可以做到这一点，因为服务器端无法分辨页面加载前屏幕的大小。这是一个例子......

开始你必须

检查一个sessionScope变量，如果为空，则假设值为20.
有页面加载以确定屏幕大小
根据
使用JSONRPC
使用显示的新行数对视图进行部分刷新。

下面的代码显示了这个例子，但并不完美。视图中的CSS变量和行的大小太多，必须根据您的个人应用进行调整。

XPage代码

{{1}}

如何使xpage可以根据屏幕大小自动调整显示行？

2 个答案: