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 ファイルを見つけます。
Now we need to find the CSS class, and change the CSS. Any changes you make will be applied immediately. So we apply the change:
Add to the CSS for an appointment bar
And check the bars to see if our change has taken:
Nothing seems to have changed…
No sale. That’s ok, sometimes this happens. CSS is cascading, meaning what we just tried isn’t compatible with a CSS property set further up the chain. We just need to add !important to the property value, this means it will override any inherited properties:
Making sure our new attribute has a say
And check the bars:
We now have rounded appointments!
Success!
The lesson here, if a CSS property doesn’t seem to be taking, try the !important directive.
However, once again, this will be reset when the page reloads, and the original CSS file is reloaded. But now we know what we need to change, and where to change it. So use Reactor to open the actual CSS document, by clicking the ‘edit’ icon in the list of files for the BlackBox.
Copy and paste the CSS from your web browser, save the file, and re-compile the BlackBox, by clicking the ‘compile’ button, either on the BlackBox screen, or the Preview screen.
Voila! Now the calendar shows rounded corners for the calendar appointments.
Part 2 - Turning a CSS Property Into a Parameter
Now you know how to change the CSS for a BlackBox. But how about if you wanted to give someone the ability to change the look and feel of this calendar without needing to do all the above? You could create a parameter for a BlackBox, to dynamically set a property at whatever the user wanted.
For example, you could give the BlackBox a parameter called event_bar_curve, and make some small modifications to the CSS to read in this value, and apply it to the appointment bars.
To start with, switch to the Functions tab in Reactor, add a new parameter for the xScheduler function and ensure it is set to ’Text’. This is because it’s not a field name for the BlackBox to read in from FileMaker, it’s simply a value to be handed over.
Open the main CSS file for this BlackBox, dhtmlxscheduler_flat.css.
Then find the the dhx_cal_event_line class and change/add the border-radius property like so:
.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!