如何让xpage可以根据屏幕大小自动调整自动显示行? [英] How to make the xpage can be adjusted automatically according to the size of the screen automatically displays rows?

问题描述

我创建了一个 xpage 来显示多米诺视图，并且我设置了每页最大行数:20"，但是当我从我的 Iphone 中查看 xpage 时，我发现视图只有屏幕的一半.所以我设置了每页最大行数:30"，但是当我从 Ipad 查看 xpage 时，再次只看到一半的屏幕.

I have created a xpage to show the domino view, and I have set the "Maximum rows per page:20", but when I review the xpage from my Iphone, I found that the view only half of the creen. So I have set the "Maximum rows per page:30", but when I review the xpage from Ipad, the view only half of the screen again.

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

So How to make the xpage can be adjusted automatically according to the size of the screen automatically displays rows??

以下是xpage编码:

Following is the xpage coding:

<?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>

推荐答案

这里有两个 XPage 片段，我认为它们会对您有所帮助.

Here are two XPages snippets that I think will help you.

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

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

仅供参考:如果您从未使用过它们，CSS 媒体查询允许您根据屏幕大小(以像素为单位)为每个设备指定特定的 CSS.您通常需要四种媒体查询:手机、平板电脑、台式机、大型台式机，您可能只需要前三个.

FYI: In case you never used them, a CSS media query allows you to specify certain CSS for each device based on screen size in pixels. You generally need four media queries: phone, tablet, desktop, large desktop, you might only need the first three.

对于您来说，您希望根据媒体查询调整服务器端设置，这会增加额外的复杂性.请查看这些片段，并根据您的需要进行修改.第一个是你应该关注的.两者均由 IBM 的 Tony McGuckin 撰写，他是 XPage 开发团队的一员.

For you, you want to adjust a serverside setting based on a media query which adds an extra layer of complexity. Please check out these snippets, and modify to fit your need. The first one is the one you should focus on. Both are by Tony McGuckin of IBM, who is part of the team that created XPages.

在第一个片段中使用这个例子，我认为你需要为每个设备有一个不同的视图，并根据媒体查询显示正确的.IMO 这将是最好的用户体验.如果这太麻烦，请考虑使用 Bootstrap，您将获得内置的响应能力.

Using this example in the first snippet, I think you will need to have a different view for each device, and show the correct on based on the media query. IMO this will be the best user experience. If this is too much trouble, considering using Bootstrap and you will get responsiveness built in.

这篇关于如何让xpage可以根据屏幕大小自动调整自动显示行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！