いいね!数

0

閲覧数
110

これはXagesの質問ではないかもしれないのですが・・・

フォームにコードを書きすぎたのが、フォーム全体が表示されるまで時間がかかるように

なってしまいました。特にリッチテキスト(ck editor)の表示が遅いです。そして、完全にフォームが

表示される前にボタンクリックなどのアクションを起こすと反応がなかったり、エラーが出

たりしてしまいます。

そこで、フォームが完全に表示されるまではマウスポインタを砂時計マークにできればと

思っています。

そのようなことは可能なのでしょうか?

可能であれば実装方法を教えて頂けないでしょうか?

足りない情報等ありましたらご指摘ください。

よろしくお願い致します。

サーバー情報: | クライアント情報: | 
カテゴリ:アプリ開発 - XPages | タグ:
  | 質問日時:Aug 7, 2017 3:39:52 PM

回答・コメント

いいね!数

1

XSnippetsにコードを張り付けました。

https://xpages.jp/XSnippetsJ.nsf/snippet.xsp?id=%E3%83%AD%E3%83%BC%E3%83%88%E3%82%99%E3%81%AB%E6%99%82%E9%96%93%E3%81%AE%E3%81%8B%E3%81%8B%E3%82%8B%E3%83%AA%E3%83%83%E3%83%81%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%88%E3%82%99%E3%81%AE%E8%AA%AD%E8%BE%BC%E3%81%8B%E3%82%99%E5%AE%8C%E4%BA%86%E3%81%99%E3%82%8B%E3%81%BE%E3%81%A6%E3%82%99please-wait%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%82%B3%E3%83%BC%E3%83%88%E3%82%99

 

解説すると、

まず、今回ロードが遅い理由をリッチテキストフィールドのせいだと決めつけました。

基本的には一般のブラウザはHTMLのロードが完了しないとボタンなどのアクションは動作しません。そこでAyaさんの言う「フォーム全体が表示されるまで時間がかかる」という現象はリッチテキストフィールド(CKEditor)のコンテンツが大きいことに起因すると考えています。(+部分更新処理をCSJSのonLoad処理から呼び出すとうの複雑なことはしていないと仮定)

そこで、コードの対策は

まず、

  <xp:this.resources>
    <xp:dojoModule name="extlib.dijit.Loading"></xp:dojoModule>
  </xp:this.resources>

 

により砂時計にあたる「Please Wait」の表示を行えるようにします。

次に<xp:panel> でコード全体を囲ってやります。

最後に、

<xp:panel> のonClientLoad イベントに

XSP.startAjaxLoading();
CKEDITOR.on('instanceReady', function() { XSP.endAjaxLoading()

 

を追加します。

 

1行目はHTMLの読込が完了した直後に砂時計「Please Wait」を表示にする処理。

2行目はCKEditorで instanceReady イベント呼び出し時にに砂時計「Please Wait」を非表示にする処理

となっています。

 

参考URL:

「CKEditorで instanceReady イベント」

http://ckeditor.com/forums/CKEditor/Execute-code-when-CKEditor-is-fully-loaded

 

「クライアントサイドJavaScriptからCKEDITORのインスタンスを取得する方法」

https://www-10.lotus.com/ldd/ddwiki.nsf/dx/%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%81%8B%E3%82%89CKEDITOR%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

回答日時:Aug 7, 2017 5:41:48 PM

いいね!数

0

Kazu Tatsukiさん、

大変貴重な参考になるご回答をありがとうございます。

早速、設定してみたのですが・・・

編集モードで開いたときはうまく動作して感動したのですが、読み込みモードで開いたときに「please waite」という文字が

でっぱなしで消えなくなってしまいました。編集モードで開いたときのみ動作するようにする必要があるのでしょうか?

また、このDBはワークフローになっており、あるステータスではCKEditrorは非表示となる場面もあります。

このようにケースで処理を分ける方法はあるのでしょうか。

良い方法があれば教えてください。

よろしくお願い致します。

回答日時:Aug 8, 2017 10:07:06 AM

いいね!数

0

以下のコードで上記、解決しました!

try{
CKEDITOR.on('instanceReady', function() { XSP.endAjaxLoading() });
XSP.startAjaxLoading();
}catch(e){
}

回答日時:Aug 8, 2017 2:20:57 PM