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;
}
The <?Reactor Reactor?> tags just tell Reactor to interpret everything within, which in this instance is simply a parameter name. This line will grab the event_bar-curve parameter, and by the time it makes it to the web-viewer, will take the place of the Reactor tags.
Now save the document and recompile. Run the BlackBox with the new parameter set.
Appointments are now curved according to the parameter provided
Mission accomplished! We can now set the box curve for an appointment bar at whatever we desire.
This is only one parameter for one type of visual element. Any other changes you might desire are at your fingertips as well. Once you know the HTML element you’re targeting, and get a fairly basic understanding of CSS properties, you can make these changes extremely quickly, by switching back-and-forth between your CSS document (in your favourite code editor) and the BlackBox preview, recompiling as you go!