问题
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.
So How to make the xpage can be adjusted automatically according to the size of the screen automatically displays rows??
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>
回答1:
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-logic
http://openntf.org/XSnippets.nsf/snippet.xsp?id=react-to-css-media-queries-using-client-side-javascript
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.
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.
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.
回答2:
There isn't a simple way to do this because the server side cannot tell how large the screen is before the page loads. Here is an example....
To start you have to
- check a sessionScope variable and if blank assume a value = 20.
- have the page load to determine the size of the screen
- figure out how many rows you want to show based on that
- set the sessionScope value using JSONRPC
- partialrefresh the view with the new number of rows displayed.
The code below shows an example of this but is not perfect. There are too many variables for CSS in the view and the size of your rows, it would have to be adapted for your individual application.
The XPage code
<?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>
来源：https://stackoverflow.com/questions/29965940/how-to-make-the-xpage-can-be-adjusted-automatically-according-to-the-size-of-the