Question

我在CSS中使用了“@media only screen”来确定应根据用户屏幕大小显示的信息和信息。我有一个名为panelContainer的类，它设置为在屏幕大于767px时显示，还有一个名为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的目的有点困惑？如果要决定在移动屏幕或普通屏幕上显示什么，有更有效的方法来做到这一点。

在openNTF上使用最新版ExtLib中的新重定向控件。它完全符合名称的建议，并根据某些表达式重定向。让你把它放在一个页面上，然后说移动（或其他）是否重定向到这个页面。
有一个虚拟的默认加载页面，用于检查useragent字符串以查看要加载的页面（具有单独的移动/全屏页面）。这就是ExtLib附带的teamroom模板应用程序与其main.xsp一起使用，然后将其设置为默认启动选项。

或者，如果您尝试对手机/平板电脑是横向还是纵向进行操作，则应使用onOrientationChange事件而不是onResize。看看这个例子（不是问题中的代码也是我指向你的，他在使用webview时遇到问题）：

how to handle javascript onorientationchange event inside uiwebview

设置viewScope onLoad和onResize

1 个答案: