设置 viewScope onLoad 和 onResize

Question

我在我的 CSS 中使用了“@media only screen”来根据用户的屏幕大小确定应该如何以及显示哪些信息。我有一个名为 panelContainer 的类，它设置为在屏幕大于 767 像素时显示，还有一个名为 mobileContainer 的类，它在屏幕小于该值时显示。

我有几个自定义控件，一个包含标准表单布局，另一个包含移动设备表单布局。最初我用适当的 styleClass 在每个周围放置了一个 div。这种方式的问题在于，虽然只有一个表单可见，但它们都已加载，因此导致保存问题。

<xp:div id="panelContainer" styleClass="panelContainer">
    <xc:content_sCompany></xc:content_sCompany>
</xp:div>
<xp:div id="mobileContainer" styleClass="mobileContainer">
    <xc:content_iCompany></xc:content_iCompany>
</xp:div>

我已经使用 panelContainer 的 styleClass 在我的 Xpage 中添加了一个 div，然后我添加了返回 div 的 style.display 的 onLoad 和 onResize 事件，然后这些应该将结果写入 viewScope。但是我发现它只会写 onLoad 并且虽然该函数被调用 onResize 它不会改变 viewScope 变量。

<xp:scriptBlock id="scriptBlock1" type="text/javascript">
    <xp:this.value>
        <![CDATA[var init = function() {
            obj=document.getElementById('formType');
            if(getStyleDisplay(obj)=="none"){
                formType='#{javascript:viewScope.put("formFormat","mobile");}';
            }else{ 
                formType='#{javascript:viewScope.put("formFormat","standard")}';
           }
        }

        dojo.addOnLoad(init);
        dojo.connect(window,"onresize",init);

        function getStyleDisplay(obj) {
            if(obj.currentStyle) { // IE – Opera
                return obj.currentStyle.display;
            } else { // firefox
                return getComputedStyle(obj,'').getPropertyValue('display');
            }
        }]]>
    </xp:this.value>
</xp:scriptBlock>
<div id="formType" class="panelContainer"></div>

.....这个 viewScope 变量然后以下列方式使用：

<xc:content_Company xp:key="ContentControl">
    <xp:this.facets>
        <xc:content_sCompany id="content_sCompany"
            xp:key="standard">
        </xc:content_sCompany>
        <xc:content_iCompany id="content_iCompany"
             xp:key="mobile">
        </xc:content_iCompany>
    </xp:this.facets>
</xc:content_Company>

.....从 content_Company 中提取......

<xp:callback facetName="#{viewScope.formFormat}" id="cbkCompanyFormContent">
</xp:callback>

我觉得这是实现我需要的结果的更好方法，因为当我手动尝试它时，它只会加载其中一个表单并且它们按预期工作。

我看不出为什么 viewScope 没有被正确设置，它总是被设置为“标准”，即使我在加载页面之前缩小了我的页面。我确实尝试将值写入隐藏输入，这有效，但是每当我尝试使用 getComponent("hiddenInput1").getValue() 访问该值时，它都会返回 null，即使我可以在查看时看到该值已设置萤火虫。

Answer 1

好的，您能否通过一些 console.log("") 检查（或告诉我您是否已经拥有）正在调用 onResize 并且正在下拉正确的显示等。

接下来它可能会触发 onResize 但您是否正在部分刷新正在使用 viewScope 的区域？

此代码示例：（将 controlID 替换为您的）

XSP.partialRefreshGet("controlID", {
    onError: function() { console.log('Error'); }
});

我对使用 onResize 的目的有点困惑？如果是决定在移动屏幕还是普通屏幕上显示什么，有更有效的方法可以做到这一点。

1. 在 openNTF 上的 ExtLib 最新版本中使用新的重定向控件。它完全按照名称所暗示的那样做，并根据某些表达式进行重定向。让你把它放在一个页面上，然后说是否移动（或其他）重定向到这个页面。

2. 有一个虚拟的默认加载页面，它检查用户代理字符串以查看要加载的页面（具有单独的移动/全屏页面）。这就是 ExtLib 附带的 teamroom 模板应用程序对其 main.xsp 所做的事情，然后将其设置为默认启动选项。

或者，如果您尝试处理手机/平板电脑是横向还是纵向，您应该使用 onOrientationChange 事件而不是 onResize。看看这个例子（不是问题中的代码也是我指向你的，他有一个问题让它在 webview 中工作）：

how to handle javascript onorientationchange event inside uiwebview