ラベル UI の投稿を表示しています。 すべての投稿を表示
ラベル UI の投稿を表示しています。 すべての投稿を表示

2022年6月7日火曜日

コンポーネント、入力フィールド、ボタンの角を丸くする

 テーマ・ローラーを使って、コンポーネント、入力フィールドおよびボタンの角を丸くすることができます。

コンポーネントの四隅は、コンテナのコンテナ枠線の角の丸めで調整します。


内部的には、CSS変数の--ut-component-border-radiusの値を変更しています。
:root {
  --ut-component-border-radius: 28px;
}
カスタムCSSで変更したときは、カスタムCSSの定義が優先されます。


ボタンの角は、ボタンの枠線の角の丸めで調整します。変更しているCSS変数は--a-button-border-radiusです。


入力フィールドは、フォームの枠線の角の丸めで調整します。変更しているCSS変数は--a-field-input-border-radiusと--a-filedrop-border-radiusです。

通常、テーマ・ローラーでの見かけの変更は、即時で反映されます。保存は不要です。


ただし、モーダル・ダイアログのページについては、即時で反映されないようです。


テーマ・ローラーでの変更を保存し、再度ダイアログを開くと、変更されていることを確認できます。


変更されたCSS変数は、静的アプリケーション・ファイルの領域に保存され（共有コンポーネントからは参照できない）、ブラウザに読み込まれます。


ファイルの内容を確認すると、多数のCSS変数に値が設定されていることがわかります。


利用可能なCSS変数についての説明は、ユニバーサル・テーマのサンプル・アプリケーションに、Referenceとして含まれています。

簡単ですが、テーマ・ローラーで、コンポーネント、入力フィールド、ボタンの角を丸くする設定の紹介は以上です。

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

完
投稿者 時刻:
ラベル: ,

2021年9月6日月曜日

単一行ビューのアクション・メニューよりRefreshを除く

 対話グリッドの静的IDとしてempが設定が設定されているとします。

ページ・プロパティのJavaScriptのページ・ロード時に実行に以下のコードを記述します。これで単一行ビューのアクション・メニューからRefreshが除かれます。

let grid = apex.region("emp").widget();
let sv$ = grid.interactiveGrid("getViews", "grid").singleRowView$;
let actions = sv$.recordView("getActions");
actions.remove("refresh-record");


ページを実行すると、Refreshがなくなっていることが確認できます。


単一行ビューのリフレッシュでなければ、対話グリッドのJavaScript初期化コードから無効化できます。

function(config) {
config.initActions = function(actions) {
actions.remove("refresh"); // アクションのDataのRefresh
actions.remove("row-refresh"); // 行メニューのRefresh
actions.remove("selection-refresh"); // アクションのセレクションのRefresh
actions.remove("refresh-record"); // これは効かない
}
return config;
}


アクションのデータのリフレッシュはこちらです。

アクションのセレクションのリフレッシュです。


行メニューのリフレッシュです。


先程のJavaScript初期化コードが記述されていると、上記すべてがメニューから除かれます。

もしかしたらdefaultSingleRowOptionsにactionsContextを設定することで、単一行ビューのメニューをカスタマイズできるかもしれません。試してみましたが成功しなかったので、メニューが初期化された後に、actionsメニューから取り除きました。

以上になります。

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

完
投稿者 時刻:
ラベル: , ,

メディアクエリの活用してアプリケーションを自動ダークモードに対応させる

Oracle APEXを開発しているTim Kimberlさんが、先日のOffice Hour - Deep Dive: Universal theme in APEX 21.1にて、デバイスの設定に従って、アプリケーションの外観を自動的に切り替える方法を紹介しています。CSSのメディアクエリを使って、ライト・モードとダーク・モードに切り替えています。


サンプル・データセットのEMP/DEPTから自動的に作成されるアプリケーションを使って、Office Hourで説明されている実装を確認してみます。Oracle APEX 21.1でユーザー・インターフェースのテーマとしてVitaが選択されていれば、どのようなアプリケーションでも実装の確認に使用できます。


開発者ツール・バーのカスタマイズよりテーマ・ローラーを実行し、グローバル色のヘッダー・アクセントを50783c(緑)に変更します。（Timのビデオの操作を確認するための操作です。異なる設定を行うこともできます。)


変更したテーマを名前を付けて保存します。今回はスタイル名をEvergreenとして保存します。


Evergreenがカレントのテーマになります。ダーク・モードのスタイルはVita Darkを元に作成します。カレントとなるテーマとして、Vita Darkを選択します。


Vita Darkのヘッダー・アクセントも50783c(緑)に変更します。


変更したスタイルをEvergreen Darkとして、名前を付けて保存します。


カレントのテーマをEvergreenに戻し、保存します。


テーマ・ローラによる変更が保存されているファイル名を確認します。

共有コンポーネントのテーマを開きます。


Universal Theme - 42 *のリンクをクリックします。Oracle APEX 5.xより、提供されるテーマはUniversal Themeのみです。Oracle APEX 5.x以前に作成されたアプリケーションまたはカスタマイズしたテーマを使用している場合を除き、Universal Theme以外の選択はありません。


テーマの編集画面が開くので最底部のスタイルのセクションまでスクロールし、スタイルのEvergreen Darkを開きます。


テーマ・スタイルEvergreen Darkの出力CSSファイルURLをクリップボードにコピーします。取消をクリックして、テーマ・スタイルを閉じます。


アプリケーション・プロパティの編集をクリックする、もしくは、共有コンポーネントのアプリケーション定義属性を開きます。


ユーザー・インターフェースのタブを開き、カスケード・スタイルシートのセクションに移動します。ファイルURLとしてメディアクエリを使ってダーク・モードのテーマ・スタイルであるファイルを指定します。CSSのファイル名は、先ほどクリップボードにコピーしたファイル名を指定します。

[media="(prefers-color-scheme: dark)"]#THEME_DB_IMAGES#31836887163503540672.css

デバイスの設定がダーク・モードであれば(preferes-color-schemeがdarkであれば)、ダーク・モードのスタイルを定義したCSSファイルが読み込まれます。ファイルURLを追加したら、変更の適用をクリックします。


以上で設定は完了です。macOSの場合、以下のような効果が得られます。


以上になります。CSSのメディア・クエリはダーク・モード以外でも色々な活用方法があるでしょう。

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

完
投稿者 時刻:
ラベル: , ,

2021年9月3日金曜日

Menu Popupの紹介

 Universal Themeについて調べていて、Menu Popupという実装を知りました。Universal Themeのサンプル・アプリケーションに含まれています。以下のような動作をするボタンを作ることができます。


Universal Themeのサンプル・アプリケーションに含まれているMenu Popupは、こちらからアクセスできます。

以下の手順で実装します。

最初に共有コンポーネントのリストを作成します。


サンプル・アプリケーションのMenu PopupではUT - Sample Menu PopupとUT - Sample Menu Popup (Actions)の、２つのリストが使用されています。


リスト自体の定義には、Menu Popupだからといって特別なことはありません。

リストを作成したら、そのリストをソースとしたリージョンを作成します。リージョンのタイプはリスト、ソースのリストにはUT - Sample Menu Popupが指定されています。外観のテンプレートとしてBlack with Attributesを選択します。詳細の静的IDとしてactionsを設定しています。


このリージョンであるリストを、ボタンのクリックで開きます。ボタンの外観のCSSクラスとしてjs-menuButtonを指定します。これは決め打ちです。動作のアクションとして動的アクションで定義を選択します。ただし、動的アクション自体の定義は不要です。詳細のカスタム属性としてdata-menu="actions_menu"を設定します。actionsの部分は、リストが実装されているリージョンの静的IDになります。


サンプル・アプリケーションに含まれている２つめのMenu Popupの設定です。ソースのリストがUT - Sample Menu Popup (Actions)、詳細の静的IDがcustomizedになっています。


ボタンでは、詳細のカスタム属性としてdata-menu="customized_menu"が設定されています。


Menu Popupの実装方法の説明は以上になります。

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

完
投稿者 時刻:
ラベル: , ,

2021年5月19日水曜日

リファクタリングされたユニバーサル・テーマ

 パッと見た目では気がつかないのですが、Oracle APEX 21.1に含まれているユニバーサル・テーマ（のテンプレート）は、CSS変数を使うように書き変えられています。

サンプル・データセットのEMP/DEPTをインストールして作成したアプリケーションを例に、どのようにリファクタリングされたのか紹介します。

Oracle APEX 20.2で作成したアプリケーションです。

Oracle APEX自体が21.1にアップグレードされても、テーマをリフレッシュするまではリファクタリングされたユニバーサル・テーマは適用されません。

新しいバージョンのユニバーサル・テーマがあり、アプリケーションに適用可能な場合は共有コンポーネントを開くと、テーマのリフレッシュを行うボタンが表示されます。

テーマのリフレッシュを行った後（コピーしたアプリケーションで実施するとよいでしょう）、アプリケーションを実行して確認します。

見た目では違いは分かりません。（違いが出ないようにリファクタリングされているので、当然と言えば当然ですが。。。)

ブラウザの開発者ツールを使って確認します。--utで始まる大量のCSS変数が定義されていることが確認できます。


21.1以前のユニバーサル・テーマでは、CSS変数はほとんど使用されていません。


あまり良い例が思いつかないのですが、フォントをsans-serifからserifに変えてみます。

テーマ・ローラを開いて、カスタムCSSとして以下を設定します。

:root {
--ut-base-font-family: serif;
}


フォントがいわゆる明朝体に変わっていることが確認できます。Oracle APEX 21.1からはテーマ・ローラーもCSS変数を変更するような実装になっています。テーマ・ローラーで設定可能であれば、CSS変数を直接扱わなくてもよいでしょう。

テーマ・ローラ以外では、ページのプロパティとしてCSSのインラインに設定することによっても、CSS変数を変更することができます。


CSSに静的ファイルを使用する方法などもあります。こちらは以前に記事を書いています。

ユニバーサル・テーマとして定義されているCSS変数の一覧や説明といったものは、残念ですが無いようです。

以上になります。

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

完
投稿者 時刻:
ラベル: , ,

2020年10月30日金曜日

ドロップゾーンの見栄えを良くする

Philipp Hartenfellerさんが彼のブログで、Oracle APEX 20.2で新しく追加されたコンポーネントである、ドロップゾーン（ファイルをドラッグ＆ドロップで選択させるページ・アイテム - ファイル参照）の見栄えを良くするCSSを公開していました。彼の記事APEX 20.2: improve Dropzone UX with CSSはこちらです。

試しにCSSを設定した結果はこちらです。


元々はこんな感じです。


CSSを設定する場所はページ・プロパティのインラインCSSです。

設定するCSSについては、Philipp HartenfellerさんのGitHubを参照してください。

完
投稿者 時刻:
ラベル: , ,

2020年8月6日木曜日

ユニバーサル・テーマのコンテント・モディファイアを使う

Oracle APEXのユニバーサル・テーマに含まれるコンテント・モディファイアについて紹介します。

コンテント・モディファイアは以下に説明があります。

コンテント・モディファイアは、主にページ・アイテムに対して適用します。プロパティの詳細に含まれるCSSクラスです。
指定可能なコンテント・モディファイアについて、効果を確認します。

実際の効果を確認するためにアプリケーションを作成しています。

テキストの配置に関する指定は以下になります。
  • u-textStart: 左揃え
  • u-textCenter: 中央揃え
  • u-textEnd: 右揃え
テキストの変換に関する指定は以下になります。
  • u-textUpper: 英字を大文字にする
  • u-textLower: 英字を小文字にする
  • u-textInitCap: 英単語の先頭文字だけを大文字にする
テキストのスタイルに関する指定は以下になります。
  • u-bold: 太字
  • u-italics: 斜体
  • u-underline: 下線付き
  • u-fixedFont: 固定幅フォント
これ以外に、アクセシビリティに対応するために、u-VisuallyHiddenというモディファイアがあります。以前のブログ記事に利用例があります。


といったハートマークが入ったロゴですが、ソースは以下になります。
<span class="footer-apex">Built with 
  <span class="fa fa-heart">
    <span class="u-VisuallyHidden">love</span>
  </span> 
  using <a href="https://apex.oracle.com/" target="_blank" title="Oracle Application Express">Oracle APEX</a>
</span>
最新のOracle APEXでは、スイッチひとつでアプリケーションの画面に追加することができるようになっています。

ここで、以下の定義はu-VisuallyHiddenが指定されているため、画面には表示されません。
<span class="u-VisuallyHidden">love</span>
画面には表示されませんが、スクリーン・リーダーの対象になります。結果として、上記のロゴは以下のように読み上げられます。

Built with love using Oracle APEX

完
投稿者 時刻:
ラベル: ,
登録: 投稿 (Atom)