设置viewScope onLoad和onResize [英] Setting viewScope onLoad and onResize

问题描述

我在CSS中使用了仅@media"屏幕来确定应如何以及根据用户屏幕大小显示哪些信息.我有一个名为panelContainer的类，该类设置为在屏幕大于767px时显示，而有一个名为mobileContainer的类，在屏幕小于该值时显示.

I have used the '@media only screen' in my CSS to determine how and what information should be shown depending on the users screen size. I have a class called panelContainer which is set to display when the screen is greater than 767px, and a class called mobileContainer which displays when the screen is less than that.

我有几个自定义控件，一个包含标准表单布局，另一个包含移动设备表单布局.最初，我在每个div周围放置了一个具有适当styleClass的div.这种方式的问题在于，尽管仅可见一种形式，但它们都被加载，所以这会导致保存问题.

I have a couple of custom controls, one that contains the standard form layout and another that contains the mobile device form layout. Originally I placed a div around each with the appropriate styleClass. The problem with it this way was that although only one form is visible, they were both loaded so this caused save issues.

<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，然后添加了onLoad和onResize事件，它们返回div的style.display，然后将这些结果写入viewScope.但是我发现它只会写onLoad，尽管该函数被称为onResize，但它不会更改viewScope变量.

I have since added a div to my Xpage with the styleClass of panelContainer, I then added onLoad and onResize events which return the style.display of the div, these should then write the result to a viewScope. But I found it would only write onLoad and although the function was being called onResize it wouldn't change the viewScope variable.

<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变量:

.....this viewScope variable is then used in the following way:

<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中提取...

.....extract from content_Company......

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

我认为这是获得所需结果的更好方法，因为当我手动尝试时，它只会加载其中一种表格，并且它们会按预期工作.

I feel this is the better way to achieve the result I need, as when I have tried it manually it does only load one of the forms and they work as expected.

即使在加载页面之前收缩页面，我也看不到为何未正确设置viewScope，而是始终将其设置为标准".我确实尝试将值写入到隐藏输入中，该方法可以正常工作，但是每当我尝试使用getComponent("hiddenInput1").getValue()访问该值时，它都会返回null，即使我在浏览时可以看到已设置了该值.萤火虫.

I cannot see why the viewScope is not being set properly, it is always being set to 'standard', even if I shrink my page before loading the page. I did try writing the value to a Hidden Input, which worked but whenever I tried to access the value using getComponent("hiddenInput1").getValue() it would return null, even though I could see that value had been set when viewing in firebug.

推荐答案

好的，您可以通过一些console.log(")检查(或告诉我您是否已经拥有)onResize正在被调用且正确吗?显示屏被拉下等.

Ok can you check (or tell me if you already have) through some console.log("") 's that the onResize is being called and the correct display is being pulled down etc.

接下来它可能会触发onResize，但是您是否会分手刷新使用viewScope的区域?

next it may be firing the onResize but are you then partail refreshing the area which is using the viewScope?

此代码示例:(将controlID替换为您的)

Code example of this: (replace controlID with yours)

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

我对使用onResize的目的有什么困惑?如果要决定在手机屏幕还是普通屏幕上显示什么内容，可以使用更有效的方法.

I'm a little confused about what the purpose of using onResize is for ? if is to decide what to show whether on mobile or normal screen there are much more efficient ways of doing this.

1. 在openNTF的最新版本的ExtLib中使用新的重定向控件.它完全按照名称暗示，并根据某些表达式进行重定向.让您将其放在页面上，并说是否移动设备(或其他任何设备)重定向到该页面.

1. Using the new redirect control in the latest release of the ExtLib on openNTF. It does exactly what the name suggests and redirects based on certain expressions. leaving you to drop it on a page and say if mobile (or whatever) redirect to this page.

具有一个虚拟的默认加载页面，该页面检查useragent字符串以查看要加载的页面(具有单独的移动/全屏页面).这就是ExtLib随附的teamroom模板应用程序对其main.xsp所做的工作，然后将其设置为默认启动选项.

Having a dummy default load page that checks the useragent string to see which page to load (having a separate mobile / fullscreen pages). This is what the teamroom template application that comes with the ExtLib does with its main.xsp and then this is set as the default launch option.

或者，如果您尝试对手机/平板电脑是横向还是纵向进行某些操作，则应该使用onOrientationChange事件而不是onResize.查看此示例(问题中的代码也不是我也要向您指出的内容，他在使该内容在网络视图中工作时遇到了问题):

Or if you are trying to do something with whether the phone / tablet is on landscape or portrait you should be using the onOrientationChange event not onResize. check out this example (not the code in the question is what I'm pointing you too, he has a problem getting that to work in a webview):

如何处理uiwebview内部的javascript onorientationchange事件

这篇关于设置viewScope onLoad和onResize的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！