05. Customising BlackBox Styles
Reload Reactor を検討していたとき、ランクから外れた最初のタクシーの 1 つは、最新のインターフェイスを備えた新しいカレンダーを構築するための優れた JavaScript ライブラリを見つけることでした。 dHTMLx ライブラリ スイート、特に Scheduler にたどり着くまで、それほど時間はかかりませんでした。
https://dhtmlx.com/docs/products/dhtmlxScheduler/
(黒い) 箱から出してすぐに素晴らしいように見えますが、FileMaker 開発者として、私たちは構築したものをカスタマイズする機能に慣れています。 この記事では、Demo BlackBox をカスタマイズして、FileMaker アプリケーションにシームレスに統合する方法を示します。
BlackBox は基本的に Web ページであり、通常は次のもので構成されます。
JavaScript ライブラリ - この例では dHTMLxScheduler
HTML ドキュメント - Web ページの構造と、ライブラリが FileMaker と通信する方法を定義します。
CSS - BlackBox の外観を定義します
この記事は、CSS ドキュメントのみに関係しています。 第 1 部では、CSS への変更のハードコーディングについて検討し、記事の第 2 部では、少し動的な Reactor ジャズに足を踏み入れます。
Part 1 - CSS カスタマイズ
xScheduler カレンダーの「appointment」は角が直角ですが、角を丸くしたいですか?
これを行うために、CSS の専門家である必要はありません。 では、希望どおりの外観にするために何を変更する必要があるか、どのように変更すればよいかをどのように判断しますか? これは、友人の助けを借りて行うことができます。 Web ブラウザ、および任意の Web 検索エンジン。
まず、CSS オブジェクトに角丸を追加する方法を見てみましょう。 簡単な Web 検索で、border-radius プロパティを使用するように指示されます。
https://www.w3schools.com/css/css3_borders.asp
何を変更する必要があるかはわかりましたが、どこを変更すればよいかわかりません。 ここで Web ブラウザの出番です。
Reactor には便利な機能：デバッグ モードに入る機能があります。これを行うには、Webビューアで次の関数を評価します。
BlackBoxDebbugging( "YES" )
Webビューア上の Reactor BlackBox に、右下隅に小さな Reactor ボタンが表示されます。 これを使用してエラー メッセージをデバッグしたり、さらに重要なこととして、BlackBox を Web ブラウザで開くことができます。
簡単なメモとして、これらの手順とスクリーンショットは Google Chrome に関連しています。 他の Web ブラウザでは、これらの領域の名前が少し異なりますが、同様の方法でそこに到達する方法を理解できるはずです。
Calendar appointment オブジェクト のスタイルを変更しようとしています。 これを行うには、どの CSS 要素を変更する必要があるかを調べる必要があります。 これらの appointment 要素のいずれかを右クリックし、[検査(Inspect)] を選択します。
これにより、次のことがわかります。
HTML を見ると、クラスの <div> オブジェクトに要約されていることがわかります。
dhx_cal_event_line
これが、変更する必要がある CSS のクラスです。
最初に、ここに次の CSS 行を追加して、角を丸くする CSS の追加をテストしましょう (タブの 2 行目の [スタイル] タブにいることを確認する必要があります)。
Changing the style of an HTML element ad-hoc
border-radius:20px;
バーを見て、変更されているかどうかを確認します。
すごい！ これで、適切な CSS クラスと適切な CSS プロパティが見つかったことがわかりました。 ただし、まだ何も変更していません。その単一のバーの CSS プロパティを変更しただけです。 ページを更新するとすぐに、通常の状態に戻ります。 次に、CSS ドキュメントに変更を加える必要があります。
続けて、ブラウザで[ソース] タブをクリックし、CSS ファイルを見つけます。
次に、CSS クラスを見つけて、CSS を変更する必要があります。行った変更はすぐに適用されます。したがって、変更を適用します。:
バーをチェックして、変更が行われたかどうかを確認します。:
反映していないようですが、大丈夫、こういうこともあります。 CSS はカスケードです。つまり、私たちが試したものは、チェーンのさらに上に設定された CSS プロパティと互換性がありません。プロパティ値に !important を追加するだけです。これは、継承されたプロパティをオーバーライドすることを意味します。:
バーを確認します。:
成功！
ここでの教訓は、CSS プロパティが機能していないように見える場合は、!important ディレクティブを試してみることです。
ただし、これもページのリロード時にリセットされ、元の CSS ファイルがリロードされます。しかし今、私たちは何を変える必要があり、どこを変えるべきかを知っています。そのため、Reactor を使用して、BlackBox のファイルのリストにある「編集」アイコンをクリックして、実際の CSS ドキュメントを開きます。
Web ブラウザから CSS をコピーして貼り付け、ファイルを保存し、BlackBox 画面またはプレビュー画面の [コンパイル] ボタンをクリックして、BlackBox を再コンパイルします。
出来上がり！これで、カレンダーの appointment の角が丸く表示されます。
Part 2 - CSS プロパティをパラメーターに変換する
これで、BlackBox の CSS を変更する方法がわかりました。しかし、上記のすべてを行う必要なく、このカレンダーの外観を変更できる機能を誰かに提供したい場合はどうでしょうか? BlackBox のパラメーターを作成して、ユーザーが必要とするプロパティを動的に設定できます。
たとえば、BlackBox に event_bar_curve というパラメーターを指定し、CSS に小さな変更を加えてこの値を読み取り、appointment のバーに適用することができます。
まず、Reactor の [関数] タブに切り替えて、xScheduler 関数の新しいパラメーターを追加し、それが「テキスト」に設定されていることを確認します。これは、BlackBox が FileMaker から読み込むフィールド名ではなく、単に引き渡される値であるためです。
この BlackBox のメイン CSS ファイル dhtmlxscheduler_flat.css を開きます。
次に、dhx_cal_event_line クラスを見つけて、border-radius プロパティを次のように変更/追加します。
.dhx_cal_event_line{
padding-left:10px;
cursor:pointer;
overflow:hidden;
border-radius: <?Reactor $event_bar_curve Reactor?> !important;
}
<?Reactor Reactor?> タグは、Reactor に内部のすべてを解釈するように指示するだけです。この例では、これは単なるパラメーター名です。この行は event_bar-curve パラメーターを取得し、Web ビューア に到達するまでに、Reactor タグの代わりになります。
ドキュメントを保存して再コンパイルします。新しいパラメータ セットで BlackBox を実行します
任務完了！Appointment バーのボックス カーブを好きなように設定できるようになりました。
これは、視覚要素の 1 つのタイプの 1 つのパラメーターにすぎません。あなたが望むかもしれない他の変更もあなたの指先にあります。対象となる HTML 要素を把握し、CSS プロパティのかなり基本的な理解を得ると、CSS ドキュメント (お気に入りのコード エディターで) と BlackBox プレビューを切り替えながらコンパイルすることで、これらの変更を非常に迅速に行うことができます。