07. チュートリアル:
...
かんばん ボードを作成する
general 一般的な Reactor guide and FRToolbox Reference document outline the suite of functionality that Reactor can provide. However, they don’t really achieve anything that can’t already be done in FileMaker.
The real power of Reactor comes when you use Reactor’s features with a fully-interactive JavaScript user interface, employing a dynamic library.
This article takes you through how to create a fully-interactive Kanban board using Reactor. What’s a Kanban board? It’s a visual project management tool used to show how tasks progress through different stages. It can be post-it notes on the wall, or be achieved through software.
The first step is to find a library that gets us as close to the finish line as possible. Why write something that someone has already written? It just so happens that the jQuery library has exactly what we need.
The Sortable interaction has a ‘Connect Lists’ example that allows us to reorder items within a grid. You can move them up or down vertically, or across horizontally.
https://jqueryui.com/sortable/#connect-lists
Ok, so let’s put together what we want to build. We’re planning three space exhibitions, in which we’re visiting various planets (presumably in a futuristic super-fast spaceship). The trips will be represented horizontally, and we’ll want to drag a planet into one of these ‘trips’ and even change the order in which we visit the planets.
So let’s start building our BlackBox.
From the Reactor main screen, click the + button to get started.
...
We’re starting from scratch.
Give your BlackBox a name and a description:
...
We’re using the JQuery library, so add the following as source files:
https://www.dropbox.com/s/i0bw4rpuokdxa3p/jquery-3.4.1.min.js?dl=0
https://www.dropbox.com/s/jpajabb9a9iee88/jquery-ui.min.js?dl=0
...
Now switch over to the Functions tab, and add your function, as well as the following parameters:
...
The first five are all FileMaker fields:
PlanetIDField: A unique ID for a planet record
PlanetNameField: The field containing the name of a planet
PlanetDescriptionField: The field containing the planet’s description
PlanetTripNoField: This represents what ‘trip’ we’ve selected for a planet
PlanetSortNoField: This represents the order of planets within a trip
And the last is a text parameter:
Columns: A comma separated list of columns to show
We’ve built the basics of our function, so now let’s go ahead and build a template file.
...
What’s a template file? You can read more about that in the General Reactor Tutorial, but basically, it does its best to get you started.
If you have added a JavaScript library (such as JQuery) it will ensure this is imported. If you have five parameters that are field names, it will store these as variables. It will also get you started with methods to read, update, create or delete records based on these field names, but we’ll be writing our own methods for this.
So go ahead and delete all those functions, and ensure your new HTML source file is as follows:
<html>
<head>
<style>
<!–– CSS Goes here ––>
</style>
</head>
<script type='text/javascript' ガイドと FRToolbox リファレンス ドキュメントでは、Reactor が提供できる一連の機能について概説しています。ただし、FileMaker で実現できないことは実際には実現していません。
Reactor の本来の力は、ダイナミックライブラリを採用した完全にインタラクティブな JavaScript ユーザーインターフェイスで Reactor の機能を使用するときに発揮されます。
この記事では、Reactor を使用して完全にインタラクティブなかんばんボードを作成する方法について説明します。かんばんボードとは、タスクがさまざまな段階でどのように進行するかを示すために使用される視覚的なプロジェクト管理ツールです。壁に貼るポストイットでも、ソフトウェアで実現することもできます。
最初のステップは、できるだけゴールに近づけるライブラリを見つけることです。なぜ誰かがすでに書いたものを書くのですか？ jQuery ライブラリにはまさに必要なものが含まれています。
Sortableインタラクションには、グリッド内でアイテムを並べ替えることができる「Connect Lists」の例があります。垂直方向に上下に移動することも、水平方向に移動することもできます。
https://jqueryui.com/sortable/#connect-lists
では、作りたいものをまとめましょう。私たちは 3 つの宇宙展を計画しており、さまざまな惑星を訪れています (おそらく未来の超高速宇宙船で)。旅行は水平に表され、惑星をこれらの「旅行」の 1 つにドラッグし、惑星を訪れる順序を変更することもできます。
それでは、BlackBox の構築を始めましょう。
Reactor Core のメイン画面から、[+] ボタンをクリックして開始します。
...
私たちはゼロから始めています。
BlackBox に名前と説明を付けます。：
...
JQuery ライブラリを使用しているので、ソース ファイルとして次を追加します。：
https://www.dropbox.com/s/i0bw4rpuokdxa3p/jquery-3.4.1.min.js?dl=0
https://www.dropbox.com/s/jpajabb9a9iee88/jquery-ui.min.js?dl=0
...
[関数] タブに切り替えて、関数と次のパラメーターを追加します。：
...
最初の 5 つはすべて FileMaker のフィールドです。：
PlanetIDField: 惑星レコードの一意の ID
PlanetNameField: 惑星の名前を含むフィールド
PlanetDescriptionField: 惑星の説明を含むフィールド
PlanetTripNoField: これは、惑星に対して選択した「トリップ」を表します
PlanetSortNoField: これは、トリップ内の惑星の順序を表します
そして最後はテキストパラメータです：
Columns: 表示する列のカンマ区切りリスト
関数の基本を構築したので、次はテンプレートファイルを構築します。
...
テンプレートファイルとは？これについては、一般的な Reactor チュートリアルで詳しく読むことができますが、基本的には、始めるために最善を尽くします。
JavaScript ライブラリ (JQuery など) を追加した場合は、これが確実にインポートされます。フィールド名である 5 つのパラメーターがある場合、これらは変数として格納されます。また、これらのフィールド名に基づいてレコードを読み取り、更新、作成、または削除するメソッドを開始することにもなりますが、このための独自のメソッドを作成します。
これらの関数をすべて削除し、新しい HTML ソース ファイルが次のようになっていることを確認します。：
| Code Block | ||
|---|---|---|
| ||
<html> <head> <style> <!–– CSS Goes here ––> </style> </head> <script type='text/javascript' src='FRToolBox.js'></script> |
...
<script src="jquery-3.4.1.min.js"></script> |
...
<script src="jquery-ui.min.js"></script> |
...
<!–– Import other sources here |
...
<script>
...
––> <script> FMLink = 'FM.link'; |
...
// This is where variables are set from the given |
...
var RecordsObj = new Object;
...
parameters var RecordsObj = new Object; FMTableOccurrenceName = '<?Reactor bbdev_TO( $PlanetIDField ) Reactor?>'; |
...
FunctionWhereClause = '<?Reactor bbdev_Relationship( bbdev_TO( $PlanetIDField |
...
) ) Reactor?>'; |
...
CreationValues = '<?reactor bbdev_relationshipKeyBuilder ( $FMTableOccurrenceName ) reactor?>'; |
...
PlanetIDField = '<?Reactor bbdev_Field( $PlanetIDField ) Reactor?>'; |
...
PlanetNameField = '<?Reactor bbdev_Field( $PlanetNameField ) Reactor?>'; |
...
PlanetDescriptionField = '<?Reactor bbdev_Field( $PlanetDescriptionField ) Reactor?>'; |
...
PlanetTripNoField = '<?Reactor bbdev_Field( $PlanetTripNoField ) Reactor?>'; |
...
PlanetSortNoField = '<?Reactor bbdev_Field( $PlanetSortNoField ) Reactor?>'; |
...
Columns = '<?Reactor $Columns Reactor?>'; |
...
</script> |
...
<body>
<div>
...
<body> <div> <!–– This is the main HTML for the BlackBox |
...
––> </div> |
...
</body> |
...
</html>
Great, so the first step with any BlackBox is to get your UI up and running - then when that’s done you hook your FileMaker data into it. The reason we do the UI first, is so we have somewhere to put our FileMaker data. If we started with that, we’d just be supplying our data to a dark indifferent void.
...
Ok, so let’s switch back to that JQuery example, and click view source:
Unfortunately it’s not a simple copy and paste - instead it’s 3 simple copy and pastes. Copies and paste?
Copy all of contents between the
<style>tags, and paste it between your BB<style>tags:
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
...
</html> |
BlackBox の最初のステップは、UI を起動して実行することです。それが完了したら、FileMaker データをそれに接続します。最初に UI を作成する理由は、FileMaker データをどこかに置くためです。そこから始めたら、暗い無関心な空虚にデータを提供することになります。
では、その JQuery の例に戻り、 view sourceをクリックしましょう。：
残念ながら、これは単純なコピー アンド ペーストではなく、3 つの単純なコピー アンド ペーストです。コピーs＆ペースト？
1. <style>タグの間のすべてのコンテンツをコピーし、BB <style> タグの間に貼り付けます。：
| Code Block |
|---|
#sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; |
...
margin: 0; |
...
padding: 5px 0 0 0; |
...
float: left; |
...
margin-right: 10px; |
...
}
...
} #sortable1 li, #sortable2 li |
...
{ margin: 0 5px 5px 5px; |
...
padding: 5px; |
...
font-size: 1.2em; |
...
width: 120px; |
...
} |
...
2. $( function()
...
ブロックをコピーして、BB <script> ブロックの最後に貼り付けます。：
| Code Block |
|---|
$( function() { |
...
$( "#sortable1, #sortable2" ).sortable({ |
...
connectWith: ".connectedSortable" |
...
}).disableSelection(); |
...
} ); |
Copy the HTML near the bottom, and paste it between your BB
<body>tags:
<ul 3. 下の方にある HTML をコピーして、BB <body> タグの間に貼り付けます。
| Code Block |
|---|
<ul id="sortable1" class="connectedSortable"> |
...
<li class="ui-state-default">Item 1</li> |
...
<li class="ui-state-default">Item 2</li> |
...
<li class="ui-state-default">Item 3</li> |
...
<li class="ui-state-default">Item 4</li> |
...
<li class="ui-state-default">Item 5</li> |
...
</ul> |
...
...
<ul id="sortable2" class="connectedSortable"> |
...
<li class="ui-state-highlight">Item 1</li> |
...
<li class="ui-state-highlight">Item 2</li> |
...
<li class="ui-state-highlight">Item 3</li> |
...
<li class="ui-state-highlight">Item 4</li> |
...
<li class="ui-state-highlight">Item 5</li> |
...
</ul> |
The full contents of your HTML file should now be as follows:
<html>
<head>
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
HTML ファイルの完全な内容は次のようになります。
| Code Block | ||
|---|---|---|
| ||
<html> <head> <style> #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; |
...
margin: 0; |
...
padding: 5px 0 0 0; |
...
float: left; |
...
margin-right: 10px; |
...
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
</head>
...
} #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> </head> <script type='text/javascript' src='FRToolBox.js'></script> |
...
<script src="jquery-3.4.1.min.js"></script> |
...
<script src="jquery-ui.min.js"></script> |
...
<script>
...
<script> FMLink = 'FM.link'; |
...
FMTableOccurrenceName = '<?Reactor bbdev_TO( $PlanetIDField ) Reactor?>'; |
...
FunctionWhereClause = '<?Reactor bbdev_Relationship( bbdev_TO( $PlanetIDField |
...
) ) Reactor?>'; |
...
CreationValues = '<?reactor bbdev_relationshipKeyBuilder ( $FMTableOccurrenceName ) reactor?>'; |
...
PlanetIDField = '<?Reactor bbdev_Field( $PlanetIDField ) Reactor?>'; |
...
PlanetNameField = '<?Reactor bbdev_Field( $PlanetNameField ) Reactor?>'; |
...
PlanetDescriptionField = '<?Reactor bbdev_Field( $PlanetDescriptionField ) Reactor?>'; |
...
PlanetTripNoField = '<?Reactor bbdev_Field( $PlanetTripNoField ) Reactor?>'; |
...
PlanetSortNoField = '<?Reactor bbdev_Field( $PlanetSortNoField ) Reactor?>'; |
...
Columns = '<?Reactor $Columns Reactor?>'; |
...
$( function() { |
...
$( "#sortable1, #sortable2" ).sortable({ |
...
connectWith: ".connectedSortable" |
...
}).disableSelection(); |
...
} ); |
...
</script> |
...
<body>
...
<body> <ul id="sortable1" class="connectedSortable"> |
...
<li class="ui-state-default">Item 1</li> |
...
<li class="ui-state-default">Item 2</li> |
...
<li class="ui-state-default">Item 3</li> |
...
<li class="ui-state-default">Item 4</li> |
...
<li class="ui-state-default">Item 5</li> |
...
</ul> |
...
...
<ul id="sortable2" class="connectedSortable"> |
...
<li class="ui-state-highlight">Item 1</li> |
...
<li class="ui-state-highlight">Item 2</li> |
...
<li class="ui-state-highlight">Item 3</li> |
...
<li class="ui-state-highlight">Item 4</li> |
...
<li class="ui-state-highlight">Item 5</li> |
...
</ul> |
...
</body> |
...
</html> |
...
|
Now switch to the ‘Preview’ screen and click the Compile button. You should see your new BlackBox appear before your eyes:
...
Ok, we have our base UI sorted, let’s start putting some data into it.
Accessing Planet Data
First, replace the contents inside our <body> tags with this:
...
This will open the BlackBox in your default web browser, where you can use the Developers Tools to debug it.
Changing sort order
So now we’ve got our Kanban board pulling in our Planet records and sorting them into the right columns. We can move these Planets around - but these changes are not recorded. The next time you load the web-viewer, your changes will be lost (unless you also change the data back in FileMaker Pro).
...
However, let’s ponder for a moment - let’s say we’re building this for a database hosted on FileMaker Server. We’re using the Kanban board to plan our various exhibitions, and another one of our Space Trip Planners moves Venus into Trip 2. If we want your Kanban board to update in real-time we’ll need to employ polling.
Polling for changes
Now we’re ensuring that our interactions with our BlackBox are persistent, it’s not just for show - it’s actually doing something.
...