intra-mart Accel Platform ポートレット プログラミングガイド 第12版 2021-04-01

11. Client Side Java Script API

ポートレット開発において利用可能な Client Side Java Script API について解説します。

11.1. ポートレットの初期処理を登録する

ポートレットが配置された後に、処理を実行する方法を説明します。
以下のAPIを利用することで、ポータルがすべてのポートレットを配置後に、各ポートレットの初期処理を随時呼び出します。
<script type="text/javascript">

  imPortal.ready('ポートレットID',function(){

     // ここにコードを記述

  });

</script>

コラム

ポートレットIDは以下のAPIで取得できます。

  • スクリプト開発

    PortalManagerのgetPortletId()

  • JavaEE開発

    jp.co.intra_mart.foundation.portal.common.PortalManagerのgetPortletId()

11.2. ポートレットの高さ変更に追随する

2015 Spring(Juno) 以降では、ユーザがポートレットの高さを変更できます。
ユーザによってポートレットの高さが変更された場合にポートレットのコンテンツのサイズ調整を行う方法を説明します。
<script type="text/javascript">

  imPortal.addUpdatedSizeListener('ポートレットID',function(widget,width,height){

     if(height > 0) {

       // ユーザによってポートレットの高さが変更された場合は、heightにはコンテンツエリアの高さが渡されます。
       // heightの値を利用してheight内に収まるようにコンテンツの高さを指定してください。
       // なお、コンテンツの高さがheightの値を超えるような調整を行った場合は、縦スクロールバーが表示されます。

     }
     else {

       // ポートレットの高さが自動調整モードの場合は、heightには0が渡されます。
       // ポートレットのコンテンツのデフォルトの高さに調整してください。

     }
  });

</script>

コラム

ポートレットIDは以下のAPIで取得できます。

  • スクリプト開発

    PortalManagerのgetPortletId()

  • JavaEE開発

    jp.co.intra_mart.foundation.portal.common.PortalManagerのgetPortletId()

11.3. 動的にポートレットのコンテンツが変更された場合にポートレット表示を調整する

ポートレットのイベント(リンクやボタンのクリック)などでAJAXを利用して動的にコンテンツが書き換わる場合に、ポートレット表示(高さなど)を調整する方法について説明します。

Client Side Java Scriptで動的にコンテンツを更新した場合は、 onResizePortal() メソッドを利用して、ポートレット表示を調整します。
<script type="text/javascript">

  function update_xxxxxx(){

     // 動的にコンテンツを書き換える処理
     ......

     // ポートレット表示の調整
     onResizePortal();

  });

</script>

注意

imPortal.addUpdatedSizeListener に設定する関数の内部では、利用しないでください。