如何让xpage可以根据屏幕大小自动调整自动显示行数？答案

【问题标题】：How to make the xpage can be adjusted automatically according to the size of the screen automatically displays rows?如何让xpage可以根据屏幕大小自动调整自动显示行数？
【发布时间】：2015-04-30 10:59:49
【问题描述】：

我创建了一个 xpage 来显示 domino 视图，并且我设置了“每页的最大行数：20”，但是当我从 Iphone 查看 xpage 时，我发现视图只有屏幕的一半。所以我设置了“每页的最大行数：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>

【问题讨论】：

CSS 媒体查询将成为您的朋友。我将不得不对如何在此 SSJS 设置中使用它们进行一些研究。
@SteveZavocki 感谢您的帮助！我已经添加了我的 xpage 编码，请帮我修改编码。非常感谢！
我去看看，但我整个上午都有会议。任何碰巧看到这个的人，请随意跳进去（显然）。
如果您需要为每个设备自定义显示，我会做的是为台式机设置一个视图控件，为平板电脑设置一个视图控件，为手机设置一个视图控件。（您的垂直平板电脑和手机可能相同）。然后只使用媒体查询向每个用户代理显示正确的设备。您也可以只自定义一个视图控件，如下面的链接所示。
这是一篇关于 XPages 中媒体查询的博文：xomino.com/tag/css-media-queries

标签： xpages

【解决方案1】：

这里有两个我认为对你有帮助的 XPages sn-ps。

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。您通常需要四个媒体查询：手机、平板电脑、桌面、大型桌面，您可能只需要前三个。

对您而言，您希望根据媒体查询调整服务器端设置，这会增加额外的复杂性。请查看这些 sn-ps，并根据您的需要进行修改。第一个是你应该关注的。两者都由 IBM 的 Tony McGuckin 设计，他是 XPages 开发团队的一员。

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

【讨论】：

感谢您的帮助！！但我仍然不知道如何解决这个问题。
我猜我在说什么，没有“灵丹妙药”可以轻松解决您的问题。您将不得不选择为每个设备进行定制，或者找到您可以忍受的快乐平衡。我没有使用 Tony 的 sn-p，但它似乎可以帮助您计算基于设备的服务器端“每页行数”设置。

【解决方案2】：

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

要开始，你必须

检查 sessionScope 变量，如果为空，则假定值 = 20。
让页面加载来确定屏幕的大小
据此确定要显示的行数
使用 JSONRPC 设置 sessionScope 值
部分刷新视图，显示新的行数。

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

XPage 代码

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <script src="jquery-1.11.2.min.js"></script>
    <xp:this.data>
        <xp:dominoView var="view3" viewName="vwSomeData"></xp:dominoView>
    </xp:this.data>

    <xe:jsonRpcService id="jsonRpcService1" serviceName="myRPC">
        <xe:this.methods>
            <xe:remoteMethod name="setRows"
                script="sessionScope.put('numRows', rows)">
                <xe:this.arguments>
                    <xe:remoteMethodArg name="rows" type="boolean"></xe:remoteMethodArg>
                </xe:this.arguments>
            </xe:remoteMethod>
        </xe:this.methods>
    </xe:jsonRpcService>


    <xp:panel styleClass="viewWrapper" id="viewWrapper">
        <xp:viewPanel value="#{view3}" id="viewPanel1">
            <xp:this.facets>
                <xp:pager partialRefresh="true"
                    layout="Previous Group Next" xp:key="headerPager" id="pager1"
                    rendered="false">
                </xp:pager>
            </xp:this.facets>
            <xp:this.rows><![CDATA[#{javascript:
                var temp = sessionScope.get("numRows");
                print (temp)
                //if no sessionScope value assume 10
                return (temp || 10)
                }]]>
            </xp:this.rows>
            <xp:viewColumn columnName="Record_ID" id="viewColumn1">
                <xp:this.facets>
                    <xp:viewColumnHeader value="Record_ i d"
                        xp:key="header" id="viewColumnHeader1">
                    </xp:viewColumnHeader>
                </xp:this.facets>
            </xp:viewColumn>
            <xp:viewColumn columnName="departdate" id="viewColumn2">
                <xp:this.facets>
                    <xp:viewColumnHeader value="D e p a r t d a t e"
                        xp:key="header" id="viewColumnHeader2">
                    </xp:viewColumnHeader>
                </xp:this.facets>
            </xp:viewColumn>
            <xp:viewColumn columnName="returndate" id="viewColumn3">
                <xp:this.facets>
                    <xp:viewColumnHeader value="R e t u r n d a t e"
                        xp:key="header" id="viewColumnHeader3">
                    </xp:viewColumnHeader>
                </xp:this.facets>
            </xp:viewColumn>
        </xp:viewPanel>
    </xp:panel>

    <xp:scriptBlock id="scriptBlock1">
        <xp:this.value><![CDATA[
        $(document).ready(function(){

            //This is only rendered if there is no sessionScope variable
            var rowFactor = parseInt($(window).height()/32);
            console.log(rowFactor)

            $.when(myRPC.setRows(rowFactor))
            .then(function(){
                var temp = $('.viewWrapper').attr("id");

                XSP.partialRefreshGet(temp, {})
            })

        })
        ]]>
        </xp:this.value>
        <xp:this.rendered><![CDATA[#{javascript:
            var temp1 = !sessionScope.get('numRows'); 
            print (temp1); 
            return temp1;
            }]]></xp:this.rendered>
    </xp:scriptBlock>
</xp:view>

【讨论】：