viewScope onLoad 및 onResize 설정

Question

내 CSS에서 '@ 미디어 전용 화면'을 사용하여 사용자 화면 크기에 따라 표시 할 정보와 정보를 결정했습니다. 769px보다 큰 화면을 표시하도록 설정된 panelContainer 클래스와 화면이 작을 때 표시되는 mobileContainer라는 클래스가 있습니다.

표준 양식 레이아웃을 포함하는 두 개의 사용자 지정 컨트롤과 모바일 장치 양식 레이아웃이 포함 된 컨트롤이 있습니다. 원래 각 div 주위에 적절한 스타일 클래스로 div를 두었습니다. 이 방법의 문제점은 오직 하나의 양식 만 표시 되더라도 두 가지 모두로드되어 저장 문제가 발생했기 때문입니다. 에는 panelcontainer의 styleClass 내 Xpage에 사업부를 추가하기 때문에

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

, 나는 다음 사업부의 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 ("") 's를하여 onResize가 호출되고 올바른 표시 등

그 다음 아래로 당겨지는 것을 통해 수 onResize를 실행할 수도 있지만 viewScope를 사용하고있는 영역을 새로 고치고 있습니까?

이의

코드 예제는 :

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

내가하여 onResize를 사용하는 목적을 위해 무엇인지에 대해 조금 혼란 스러워요 (당신으로 ​​된 controlID 교체)? 모바일 또는 일반 화면에서 무엇을 표시할지 결정하는 것이 더 효율적인 방법입니다.

1. openNTF의 ExtLib 최신 릴리스에서 새로운 리디렉션 컨트롤 사용. 그것은 정확하게 이름이 제시하고 특정 표현에 따라 리디렉션하는 역할을합니다. 페이지에 드롭하고 모바일 (또는 무엇이든)이 페이지로 리디렉션되는지 여부를 말합니다.

2. 사용자 에이전트 문자열을 검사하여로드 할 페이지 (개별 모바일/전체 화면 페이지 있음)를 확인하는 더미 기본로드 페이지가 있습니다. 이것이 ExtLib과 함께 제공되는 팀룸 템플릿 응용 프로그램이 main.xsp로 수행 한 작업이며 기본 실행 옵션으로 설정됩니다.

또는 전화/태블릿이 가로 또는 세로 그렇지하여 onResize onOrientationChange 이벤트를 사용해야에 있는지 여부와 뭔가를 시도하는 경우.

how to handle javascript onorientationchange event inside uiwebview