...
05. Customising BlackBox Styles
Reload Reactor を検討していたとき、ランクから外れた最初のタクシーの 1 つは、最新のインターフェイスを備えた新しいカレンダーを構築するための優れた JavaScript ライブラリを見つけることでした。 dHTMLx ライブラリ スイート、特に Scheduler にたどり着くまで、それほど時間はかかりませんでした。
...
続けて、ブラウザで[ソース] タブをクリックし、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次に、CSS クラスを見つけて、CSS を変更する必要があります。行った変更はすぐに適用されます。したがって、変更を適用します。:
...
Add to the CSS for an appointment barAnd 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:反映していないようですが、大丈夫、こういうこともあります。 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 プロパティを次のように変更/追加します。
| Code Block |
|---|
.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 タグは、Reactor に内部のすべてを解釈するように指示するだけです。この例では、これは単なるパラメーター名です。この行は 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!
<— Reactor Home パラメーターを取得し、Web ビューア に到達するまでに、Reactor タグの代わりになります。
ドキュメントを保存して再コンパイルします。新しいパラメータ セットで BlackBox を実行します
...
任務完了！Appointment バーのボックス カーブを好きなように設定できるようになりました。
これは、視覚要素の 1 つのタイプの 1 つのパラメーターにすぎません。あなたが望むかもしれない他の変更もあなたの指先にあります。対象となる HTML 要素を把握し、CSS プロパティのかなり基本的な理解を得ると、CSS ドキュメント (お気に入りのコード エディターで) と BlackBox プレビューを切り替えながらコンパイルすることで、これらの変更を非常に迅速に行うことができます。