1

CSSで「@mediaonlyscreen」を使用して、ユーザーの画面サイズに応じてどのような情報をどのように表示するかを決定しました。画面が767pxより大きい場合に表示するように設定されているpanelContainerというクラスと、画面がそれより小さい場合に表示するmobileContainerというクラスがあります。

2つのカスタムコントロールがあります。1つは標準のフォームレイアウトを含み、もう1つはモバイルデバイスのフォームレイアウトを含みます。もともと私は適切なstyleClassでそれぞれの周りにdivを配置しました。この方法の問題は、1つのフォームのみが表示されているにもかかわらず、両方がロードされているため、保存の問題が発生することでした。

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

手動で試した場合、フォームの1つだけが読み込まれ、期待どおりに機能するため、これが必要な結果を達成するためのより良い方法だと思います。

viewScopeが正しく設定されていない理由がわかりません。ページを読み込む前にページを縮小しても、常に「標準」に設定されています。隠し入力に値を書き込んでみましたが、これは機能しましたが、getComponent（ "hiddenInput1"）。getValue（）を使用して値にアクセスしようとすると、値が設定されていることを確認できたとしても、nullが返されます。ファイアバグ。

4

1 に答える 1

1

わかりました。いくつかのconsole.log（ ""）を介して、onResizeが呼び出され、正しい表示がプルダウンされていることなどを確認できますか（または、すでに持っている場合は教えてください）。

次に、onResizeを起動している可能性がありますが、viewScopeを使用している領域を部分的に更新していますか？

このコード例:(controlIDを自分のものに置き換えてください）

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

onResizeを使用する目的が何であるかについて少し混乱していますか？モバイル画面と通常の画面のどちらで何を表示するかを決定する場合は、これを行うためのはるかに効率的な方法があります。

  1. openNTFのExtLibの最新リリースで新しいリダイレクトコントロールを使用する。これは、名前が示唆していることを正確に実行し、特定の式に基づいてリダイレクトします。ページにドロップして、モバイル（またはその他）がこのページにリダイレクトするかどうかを指定します。

  2. ユーザーエージェント文字列をチェックしてロードするページを確認するダミーのデフォルトのロードページがあります（別のモバイル/フルスクリーンページがあります）。これは、ExtLibに付属するチームルームテンプレートアプリケーションがmain.xspで実行することであり、これがデフォルトの起動オプションとして設定されます。

または、携帯電話/タブレットが横向きか縦向きかを問わずに何かをしようとしている場合は、onResizeではなくonOrientationChangeイベントを使用する必要があります。この例を確認してください（質問のコードは私があなたに指摘しているものではありません。彼はそれをWebビューで機能させるのに問題があります）：

uiwebview内でjavascriptonorientationchangeイベントを処理する方法

于 2012-06-29T15:05:59.010 に答える