Настройка viewScope onLoad и onResize

Question

Я использовал экран «@media only» в своем CSS, чтобы определить, как и какую информацию следует показывать в зависимости от размера экрана пользователя. У меня есть класс под названием panelContainer, который установлен для отображения, когда экран больше 767 пикселей, и класс под названием mobileContainer, который отображается, когда экран меньше этого.

У меня есть несколько настраиваемых элементов управления, один из которых содержит стандартный макет формы и другой, который содержит макет формы мобильного устройства. Первоначально я разместил div вокруг каждого с соответствующим styleClass. Проблема с этим была в том, что, хотя видима только одна форма, они оба загружены, поэтому это вызвало проблемы с сохранением.

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

С тех пор я добавил к моему DIV XPage с styleClass из panelContainer, я потом добавил OnLoad и OnResize события, которые возвращают style.display в DIV, они должны затем записать результат в 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 не устанавливается должным образом, его всегда устанавливают на «стандарт», даже если я уменьшаю свою страницу перед загрузкой страницы. Я попытался записать значение в Hidden Input, который работал, но всякий раз, когда я пытался получить доступ к значению с помощью getComponent («hiddenInput1»). GetValue() возвратит значение null, хотя я мог видеть, что это значение было задано при просмотре в поджигатель.

Answer 1

Ok вы можете проверить (или скажите мне, если у вас уже есть) через некоторое console.log («») «s, что OnResize вызывается и правильный дисплей тянет вниз и т.д.

рядом это может быть обстрел onResize, но потом вы повторно обмениваете область, использующую viewScope?

Пример кода этого: (заменить ControlID с вашим)

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

Я немного запутался о том, что цель использования OnResize для? если нужно решить, что показать, есть ли на мобильном или обычном экране гораздо более эффективные способы сделать это.

1. Использование нового элемента управления переадресацией в последней версии ExtLib на openNTF. Он делает именно то, что предлагает название, и перенаправляет на основе определенных выражений. оставляя вас бросить его на странице и сказать, если мобильный (или любой другой) перенаправление на эту страницу.

2. Имея страницу загрузки по умолчанию, которая проверяет строку useragent, чтобы увидеть, какую страницу загружать (с отдельными страницами мобильного/полноэкранного просмотра). Это то, что приложение шаблона Teamroom, входящее в состав ExtLib, делает с его main.xsp, а затем устанавливается как опция запуска по умолчанию.

Или, если вы пытаетесь сделать что-то с ли телефон/планшет на пейзаж или портрет вы должны использовать событие onOrientationChange не OnResize. проверить этот пример (не код в вопрос, что я указываю вам тоже, у него есть проблемы, получая, что работать в WebView):

how to handle javascript onorientationchange event inside uiwebview