Oracle APEX標準の動的コンテンツを使って画像を表示する

htmx、Turbo Frames、Unpolyを使って画像を表示するAPEXアプリケーションを作成してきましたが、画像を表示する程度であれば、Oracle APEXの標準機能である動的コンテンツ・リージョンでできることを思い出しました。

以下よりOracle APEX標準の動的コンテンツを使用した実装を紹介します。

今回作成したアプリケーションも今までと同じく、見かけはhtmxを使ったものと同じです。

以下よりアプリケーションについて簡単に紹介します。

リージョンImageのタイプを動的コンテンツに変更し、ソースのCLOBを返すPL/SQLファンクション本体として以下を記述します。

画像の選択をするために、ページ・アイテムP1_ANIMALを作成し、送信するページ・アイテムとして設定します。

ページ・アイテムP1_ANIMALのタイプは非表示とします。動的アクションで値を設定するため、設定の保護された値はオフにします。

ボタンを押した時に実行するTRUEアクションとして、最初に値の設定を実行します。設定のタイプの設定に静的割当てを選択し、値に表示する動物のなまえを指定します。影響を受ける要素の選択タイプにアイテム、アイテムとしてP1_ANIMALを選択し、静的に割り当てた値をページ・アイテムP1_ANIMALに設定します。初期化時に実行はオフにします。

続いて、リージョンImageのリフレッシュを実行します。影響を受ける要素の選択タイプはリージョン、リージョンはImageです。こちらも初期化時に実行はオフにします。

動的アクションは３つあるので、値の設定でたぬき、シマウマ、レッサーパンダをそれぞれのアクションに設定します。

Oracle APEX標準の動的コンテンツを使った実装の紹介は以上になります。動的コンテンツによる実装の場合は、RESTサービスを作成する必要はありません。

WebSocketやSSEなどOracle APEX単体では実装が困難な機能もあります。そのような場合に、htmxやTurbo Frames（実際にはTurbo Streams）、Unpolyといったライブラリは実装の助けになるでしょう。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/sample-dynamic-contents.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完

コード検索アプリの作成 - その２

 昨日、記事やGistから過去に書いたサンプル・コードを探すアプリケーションを作成したのですが、どうも使いにくいです。Gistに対象を絞って検索するページを作成してみました。

public gistであればgistが提供している検索を使えるのですが、今までprivate gistとして作成していたのと、private gistはpublic gistに変更できない（作り直し）ので仕方がありません。

作成したアプリの画面です。

https://apex.oracle.com/pls/apex/r/japancommunity/codesearch/code

ファセット検索とAPEX 22.2の動的コンテンツ・リージョンを組み合わせています。

少しだけ実装の解説をします。

ファセット検索は、クラシック・レポートを検索結果のリージョンとして使用している、一般的な実装です。クラシック・レポートのソースは以下です。

select
    a.id
    ,d.title
    ,d.url
    ,a.raw_url
    ,a.raw_content
    ,a.file_name
    ,a.file_ext
    ,a.embedded_url
from cds_documents d join cds_attachments a 
  on d.id = a.post_id

ファイルタイプの選択であるファセットF6_FILE_EXTは、列FILE_EXTの個別値をチェックボックスで選択するように構成しています。

検索ボックスのP6_SEARCHは、検索のソースを列RAW_CONTENT（これは実際のコード）に限定しています。

検索されたコードを表示するリージョンはList Gist Snippetsとして作成しました。

タイプは動的コンテンツです。ソースは以下のPL/SQLコードです。

ブログ記事に埋め込んでいるGist由来のスクリプトをscriptタグとで出力しています。

動的コンテンツからクラシック・レポートの検索結果を取得するために、パイプライン表関数get_gist_faceted_search_dataを作成しています。

一般的にはファセットが変更されたときは、リージョンをリフレッシュします。今回は<script src="..."></script>を動的コンテンツで出力しています。Gist由来のコード中でDocument.writeが使われているため、リフレッシュでの画面更新時は出力が無視されます。

そのため、ファセット変更（Facet Change）で実行されるTRUEアクションとして、ページの送信を指定しています。

以上が、今回作成したアプリケーションの説明です。

自分のために作成したアプリですが、何かの役に立てば幸いです。

完

CKEditor5による画像アップロードを実装する(5) - 動的コンテンツを使う

APEX 22.2よりPL/SQL動的コンテンツのリージョンがレガシーになり、新たに動的コンテンツというタイプが追加されました。一番の違いはリージョンのリフレッシュに対応している点です。

以下の記事で作成したAPEXアプリケーションに、動的コンテンツ・リージョンにより文書を表示するページを追加してみます。

CKEditor5による画像アップロードを実装する(4) - 画像をオブジェクト・ストレージに保存する

作成したページは以下のように動作します。

ページを新規に作成します。

ページの作成をクリックします。

空白ページを選択します。

名前は任意ですが、ここでは動的コンテンツとしています。ページ・モードは標準です。

ページが作成されます。

作成されたページに文書を選択するためのページ・アイテムを作成します。

Body上でコンテキスト・メニューを表示させ、アイテムの作成を実行します。

識別の名前はP5_DOCUMENT_ID、タイプは選択リストを選びます。ラベルは表示する文書とします。LOVのタイプとしてSQL問合せを選択し、SQL問合せに以下を記述します。

select title d, id r from rte_documents

追加値の表示はOFF、NULL値の表示はON、NULL表示値として--文書を選択 --を入力します。

同様にして、Bodyにリージョンを新規作成します。

リージョンの識別のタイトルはドキュメント、タイプに動的コンテンツを選択します。ソースのCLOBを返すPL/SQLファンクション本体として、以下を記述します。

送信するページ・アイテムとしてP5_DOCUMENT_IDを指定します。

最後にP5_DOCUMENT_ID上でコンテキスト・メニューを表示させ、動的アクションを作成します。

作成した動的アクションの識別の名前は文書の切り替えとします。タイミングのイベントは変更、選択タイプはアイテム、アイテムはP5_DOCUMENT_IDとなります。

TRUEアクションの識別の名前は文書の再表示とします。

アクションはリフレッシュ、影響を受ける要素の選択タイプはリージョン、リージョンはドキュメントを選択します。

このままだと画像が大きく表示されるため、CSSを定義します。

ページ・プロパティのCSSのインラインに以下を記述します。

#mydoc img {

    width: 80%;

}

動的コンテンツのリージョンに静的IDとしてmydocを割り当てます。

以上で動的コンテンツを実装したページの完成です。実行すると先頭のGIF動画の動作をします。

今回作成したアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/ckeditor-image-sample-dyn.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完