2022年11月30日水曜日

APEX 22.2のアイテム・コンテナについて

 APEX 22.2よりリージョン・テンプレートにItem Containerが追加されました。APEX Office HourのPart 4: PWA, User and Developer Experienceの5:12より、開発者のVincent Morneauさんが紹介しています。

アイテム・コンテナにより、以下のようにボタンとアイテムを横一列に配置する際に、テンプレート・オプションで揃える位置を決めることができます。

以下は中央(Center)の例です。


APEX 22.2以前は、過去の記事に書きましたがCSSを定義する必要がありました。

アイテム・コンテナとは、外観テンプレートとしてItem Containerを選択した静的コンテンツのリージョンになります。


このリージョンを親としてボタンやページ・アイテムを配置します。ボタンを配置できる位置はButton StartButton End、ページ・アイテムを配置できる位置はItemです。他の位置には配置できません。

ボタンB_STARTを、Button Start位置に配置しています。


ページ・アイテムP1_ITEMは位置Itemに配置されます。


ボタンB_ENDは、Button End位置に配置しています。


ライブ・テンプレート・オプションを使って、テンプレートとしてItem Containerを指定しているリージョンのテンプレート・オプションを変更してみます。


AlignmentとしてCenterを選択した場合です。


AlignmentとしてStartを選択すると、上揃えになります。


AlignmentとしてEndを選択すると、下揃えになります。


Stretchを選択すると、ボタンの高さがアイテムの高さと同じになります。


Wrap Itemsにチェックを入れると、画面幅が狭い時にアイテムが回り込みます。



Stick On Mobile
にチェックが入っていると、コンポーネントの配置は以下のようになります。

アイテム・コンテナの紹介は以上になります。

アイテム・コンテナに含むボタンやページ・アイテムを作成するときの注意点です。

アイテム・コンテナのリージョンのコンテキスト・メニューよりボタンやページ・アイテムを作成しても、レイアウトリージョン親なしになり、コンテキスト・メニューを開いたリージョンになりません


リージョンとしてアイテム・コンテナを設定していないと位置を選択できないため、手動でリージョンを選択します。


リージョンとしてアイテム・コンテナが選択されると、位置を選択できるようになります。


以上です。

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

2022年11月29日火曜日

CSSのhas擬似クラスを使ったレポートのセルの色付け

 対話モード・レポートのセルに色を付けるために、対話モード・レポートのリフレッシュ後にJavaScriptを実行しているのだけど実装として今ひとつ。もっと良い方法は無いものか?という話がありました。

対話モード・レポートとしては以下のようになります。一番上はJavaScriptでセルに色付けを行っています。真ん中は対話モード・レポートの標準的な機能の範囲での実装です。最後はCSSの擬似クラスhasを使っています。


対話モード・レポートのソースとなるSELECT文は、すべて同じです。Oracle APEXに付属しているサンプル・データセットEMP/DEPTに含まれる表EMPをソースとしています。

給与(列SALのデータ)が1000より少ない時に列COLORの値がredになります。
select EMPNO,
       ENAME,
       JOB,
       MGR,
       HIREDATE,
       SAL,
       COMM,
       DEPTNO
       , case
       when sal < 1000 then 'red'
       else ''
       end color
  from EMP


APEXの標準の範囲での実装


SAL列の書式HTML式として、以下を設定しています。

<span style="background-color:#COLOR#;">#SAL#</span>


この設定で、列SALの値の背景色が赤になります。APEXでは、その親の要素の属性を変更する方法が提供されていないため、TD要素の背景色を変更できません。

結果として、セル全体の背景色の設定ができていません。


JavaScriptによる実装



JavaScriptによってセルの背景色を変更するために、列SALdata-color属性として色情報を含めるようにします。これも列の書式HTML式として設定します。

<span data-color="#COLOR#">#SAL#</span>


対話モード・レポートのリフレッシュ後に、動的アクションとして以下のJavaScriptを実行します。data-colorとして定義した値を、親の要素の背景色として設定しています。

document.querySelectorAll("#emp0 span[data-color]").forEach(
    (e) => {
        e.parentElement.style.backgroundColor = e.dataset.color;
    }
);
動的アクションは、初期化時にも実行するように設定します。


以上でセルの背景色が設定されます。


CSSの擬似クラスhasによる実装



動的アクションを作成する代わりに、ページ・プロパティCSSインラインに以下を記述します。
#emp2 td:has(span[data-color=red]) {
    background-color: red;
}

擬似クラスhasはFirefoxではまだサポートされていないようで、使うべきかどうかは迷うところではあります。それでもCSSで設定できるほうが、JavaScriptよりは有望です。

今回作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/css-has-cell-coloring.zip

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

対話モード・レポートでのテンプレート・ディレクティブの利用

 APEX 22.2より対話モード・レポートとクラシック・レポートでもテンプレート・ディレクティブが利用できるようになりました。

今までは条件ごとに列の表示を切り替えるために、主にCASE句を使用していました。これだとレポートのSELECT文が非常に見難くなります。

APEX 22.2より対話モード・レポートとクラシック・レポートで使用できるようになったテンプレート・ディレクティブにより、レポートのソースのSELECT文がどのように変わるか以下に紹介します。

アプリケーションのページに対話モード・レポートを3つ作成しています。最初の対話モード・レポートデフォルトは表SAMPLE_FILESにテスト・データを投入するために使用します。ページ作成ウィザードによって作成されたフォーム付き対話モード・レポートです。

対話モード・レポート従来の実装では、レポートのソースのSELECT文にCASE句を使っています。対話モード・レポートテンプレート・ディレクティブでは、レポートのソースのSELECT文ではなくテンプレート・ディレクティブで列の表示を切り替えています。

どちらも表示上は同じになっています。


表SAMPLE_FILESの作成


クイックSQLの以下のモデルより、表SAMPLE_FILESを作成しています。

# prefix: sample
files
    name vc80 /nn
    url vc400
    content file

生成されるDDLは以下になります。
create table sample_files (
    id                             number generated by default on null as identity 
                                   constraint sample_files_id_pk primary key,
    name                           varchar2(80 char) not null,
    url                            varchar2(400 char),
    content                        blob,
    content_filename               varchar2(512 char),
    content_mimetype               varchar2(512 char),
    content_charset                varchar2(512 char),
    content_lastupd                date
)
;
今回実装するレポートの列Nameに、以下の設定を行ないます。

列CONTENTにBLOBのデータが保存されている場合は、NameをクリックするとBLOBのデータをダウンロードします。そうでない場合は列URLを開きます。

また、列CONTENT_MIMETYPEよりファイルタイプに応じたアイコンを表示します。


従来の実装



従来の実装でのソースです。




レポートに現れる列はNAMEとTYPEですが、これらは両方ともHTMLなのでセキュリティ特殊文字のエスケープOFFにする必要があります。アプリケーションの安全性が下がります。


また列フィルタタイプとしてデフォルトの列タイプに基づくデフォルトが選択されていると、列のデータ(HTMLのA要素)がそのまま検索条件やソートの条件に使用されます。




テンプレート・ディレクティブ



テンプレート・ディレクティブの使用を前提とした、ソースのSELECT文です。



DOWNLOAD_URLEXTERNAL_URLFILE_EXISTが追加されています。列NAMEとTYPEにテンプレート・ディレクティブを使ったHTML式を記述する際に使用しますが、表示は不要です。これらの列の識別タイプ非表示にします。


NAME列の書式HTML式として、以下を記述します。



先頭の1行はコメントです。

{!#FILE_EXIST#/}

本来であればこの行が無くても同じ動作になるのですが、if文の条件に非表示文字列が使用されていると正しく認識されないという不具合があり、そのワークアラウンドとして先頭に非表示列を含むコメント行を含めています。

TYPEHTML式です。




列NAMEとTYPEともに検索結果のデータ自体はHTMLではないため、セキュリティ特殊文字のエスケープOFFにする必要はありません。より安全な実装になっています。

また、列フィルタの値もHTMLにはなりません。


列TYPEの列フィルタの値は、アイコンではなくMIMEタイプの文字列が表示されます。アイコンでは検索やソートはできないので、文字列が表示される方が実用的といえます。


対話モード・レポートでのテンプレート・ディレクティブの利用方法の紹介は以上になります。

今回使用したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/new-222-template-directive.zip

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

Oracle APEXの環境作成(12) - パッチの適用

 Oracle APEXの最新の修正は、My Oracle Supportよりダウンロードすることができます。

https://www.oracle.com/tools/downloads/apex-downloads.html

Patch Set Bundleのリンクをクリックすると、My Oracle Supportのパッチ詳細のページへリダイレクトされます。パッチをダウンロードするには、登録されているアカウントによるサインインが必要です。

2022年11月29日時点でダウンロードできたファイルはp34628174_2220_Generic.zipでした。このパッチをAPEX 22.2の環境に適用します。


現行の確認


管理サービスもしくは開発環境にサインインし、ヘルプ情報を開きます。

詳細製品のバージョン番号を確認します。


最初のスクリーンショットの画面に以下の記述があります。最新のパッチを適用すると製品のバージョンは22.2.1に変わります。現状は22.2.0なので、パッチは未適用であることがわかります。
The Patch Set Bundle was last updated on November 28, 2022 and its PATCH_VERSION is 1. When this patch is applied, the APEX product version will be updated to 22.2.1.
Oracle APEXが実行されているデータベース・サーバーからインターネットへの接続ができるようになっていると、開発環境のトップ画面にパッチが利用可能であることが表示されます。


インスタンス・パラメータIMAGE_PREFIXの値も確認します。データベースにSYSで接続し、以下を実行します。

exec dbms_output.put_line(apex_instance_admin.get_parameter('IMAGE_PREFIX'));




[oracle@apex ~]$ sqlplus sys/oracle@localhost/xepdb1 as sysdba


SQL*Plus: Release 21.0.0.0.0 - Production on Tue Nov 29 10:07:06 2022

Version 21.3.0.0.0


Copyright (c) 1982, 2021, Oracle.  All rights reserved.



Connected to:

Oracle Database 21c Express Edition Release 21.0.0.0.0 - Production

Version 21.3.0.0.0


SQL> set serveroutput on

SQL> exec dbms_output.put_line(apex_instance_admin.get_parameter('IMAGE_PREFIX'));

/i/22.2.0/


PL/SQL procedure successfully completed.


SQL> 


APEXの静的ファイルの位置として、ローカルのファイルシステムを指している場合(/i/22.2.0/)と、CDN(https://static.oracle.com/cdn/apex/22.2.0/)を指している場合でパッチの適用作業は変わります。


パッチの適用


パッチの適用方法は、パッチを解凍したディレクトリに含まれるREADME.txtに記載されています。パッチごとに手順が違う場合もあり得るので、README.txtは必ず確認します。

ユーザーoracleにて作業を行います。パッチのファイルは/home/oracle以下にアップロードしておきます。

最初にパッチ・ファイルp34628174_2220_Generic.zipunzipコマンドで解凍します。zipファイルが解凍されて、ディレクトリ34628174が作成されます。

[oracle@apex ~]$ unzip p34628174_2220_Generic.zip 

Archive:  p34628174_2220_Generic.zip

  inflating: 34628174/wwv_flow_approval.plb  

  inflating: 34628174/wwv_flow_authentication.plb  

  inflating: 34628174/wwv_flow_data_parser.plb  

  inflating: 34628174/wwv_flow_developer_toolbar.plb  

  inflating: 34628174/wwv_flow_imp_shared.plb  

  inflating: 34628174/wwv_flow_interactive_grid.plb  


[中略]


  inflating: 34628174/images/apex_ui/css/DevTools.min.css  

  inflating: 34628174/images/apex_ui/css/Theme-Standard.min.css  

  inflating: 34628174/images/apex_ui/css/Theme-Dark.min.css  

  inflating: 34628174/images/apex_ui/css/Theme-Dark.css  

[oracle@apex ~]$ ls

34628174  apex  i  META-INF  p34628174_2220_Generic.zip

[oracle@apex ~]$ 

作成されたディレクトリ34628174へ移動します。環境変数NLS_LANGおよびその他の環境変数を設定します。

[oracle@apex ~]$ cd 34628174/

[oracle@apex 34628174]$ . oraenv

ORACLE_SID = [oracle] ? XE

The Oracle base has been set to /opt/oracle

[oracle@apex 34628174]$ export NLS_LANG=American_America.AL32UTF8

[oracle@apex 34628174]$ 

パッチの適用前にOracle REST Data Servicesを停止します。systemctl stop ordsを実行します。

[oracle@apex 34628174]$ systemctl stop ords

==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units ====

Authentication is required to stop 'ords.service'.

Authenticating as: root

Password: ********

==== AUTHENTICATION COMPLETE ====

[oracle@apex 34628174]$ 


APEXがインストールされているPDBにSYSで接続し、catpatch.sqlを実行します。

[oracle@apex 34628174]$ sqlplus sys/********@localhost/xepdb1 as sysdba


SQL*Plus: Release 21.0.0.0.0 - Production on Tue Nov 29 10:30:05 2022

Version 21.3.0.0.0


Copyright (c) 1982, 2021, Oracle.  All rights reserved.



Connected to:

Oracle Database 21c Express Edition Release 21.0.0.0.0 - Production

Version 21.3.0.0.0


SQL> @catpatch.sql


. ORACLE

.

. Oracle APEX 22.2.%

. Patch Set Exception 34628174

........................................


APEX_VERSION

------------------------------

APEX_SCHEMA

--------------------------------------------------------------------------------

22.2.0

APEX_220200




PL/SQL procedure successfully completed.



Session altered.



APEX_SCHEMA

--------------------------------------------------------------------------------

APEX_220200



PL/SQL procedure successfully completed.


... Disabling Jobs


[中略]


PL/SQL procedure successfully completed.


... Enabling Jobs


PL/SQL procedure successfully completed.


...Validating APEX

...(10:30:20) Starting validate_apex for APEX_220200

...(10:30:21) Checking missing sys privileges

...(10:30:21) Re-generating APEX_220200.wwv_flow_db_version

... wwv_flow_db_version is up to date

...(10:30:21) Checking invalid public synonyms

...(10:30:21) Key object existence check

...(10:30:21) Setting DBMS Registry for APEX to valid

...(10:30:21) Exiting validate_apex


PL/SQL procedure successfully completed.


...Recompiling invalid public synonyms


PL/SQL procedure successfully completed.



PL/SQL procedure successfully completed.


timing for: Complete Patch 34628174

Elapsed: 00:00:12.00

Disconnected from Oracle Database 21c Express Edition Release 21.0.0.0.0 - Production

Version 21.3.0.0.0

[oracle@apex 34628174]$ 


catpatch.sqlによるパッチ適用開始初期に適用前の状況が画面に出力されます。catpatch.sqlが終了する前に、インストールの検証(Validating APEX)が実行されます。

再度、データベースに接続しパッチの適用状況を確認します。

select patch_number, patch_version, installed_on from apex_patches order by installed_on;

SQL> select patch_number, patch_version, installed_on from apex_patches order by installed_on;


PATCH_NUMBER PATCH_VERSION     INSTALLED_ON

------------ ------------------------------ -------------------

    34628174 1     2022-11-29 10:30:21


SQL> 


問題がなければcatpatch.sqlの実行は完了です。

ローカルのファイルシステムに静的ファイルが配置されている場合は、パッチに含まれているファイルに置き換えます。

imagesの下にあるファイルをIMAGE_PREFIXとなっているディレクトリに上書きします。

cp -r -p images/* /home/oracle/i/22.2.0/

[oracle@apex 34628174]$ cp -r -p images/* /home/oracle/i/22.2.0/

[oracle@apex 34628174]$ 


CDNを参照している場合は、ダウンロードのページに記載のあるように変更は不要です。
For APEX product versions 22.2.0 and 22.2.1 use https://static.oracle.com/cdn/apex/22.2.0/. The CDN contains the production APEX 22.2 static resources and the updated static resources included in PATCH_VERSION 1.

変更が必要な場合は、APEX_INSTANCE_ADMIN.SET_PARAMETERを実行しIMAPGE_PREFIXを更新します。

以上でパッチ適用が完了しました。Oracle REST Data Servicesを起動します。

systemctl start ords

[oracle@apex 34628174]$ systemctl start ords

==== AUTHENTICATING FOR org.freedesktop.systemd1.manage-units ====

Authentication is required to start 'ords.service'.

Authenticating as: root

Password: 

==== AUTHENTICATION COMPLETE ====

[oracle@apex 34628174]$ 

 最初に確認したヘルプの情報の製品のバージョン情報も22.2.1へ更新されます。