スタイル・ルールは、データ・プロパティーの
1 つが指定値に達したときにノードまたはリンクのアスペクトを変更します。「定義済みインタラクターのパラメーターへのリンク」で、ボタンの状況を
@status データ・プロパティーに接続しました。Designer を使用してダイアグラムに動的なカスタマイズを追加するには、@status
プロパティーが変化するとき、つまり、ユーザーがノードをクリックしたときにノードのアスペクトを変更するスタイル・ルールを使用します。
-
「定義済みインタラクターのパラメーターへのリンク」で作成したダイアグラムを開きます。
-
「スタイル・ルール」ペインで「
node」を右クリックし、ポップアップ・メニューから「スタイル・ルールの作成」をクリックします。
「スタイル・ルールの作成」コマンドスタイル・ルールの作成ウィザードが表示されます。 -
スタイル・ルールの作成ウィザードで「次へ」をクリックします。
-
「スタイル・ルール」タブで、次の条件を設定します。
status does not equal BUTTON_DOWN
新規スタイル・ルールの作成 -
「終了」をクリックします。
-
「スタイリング・カスタマイザー」で「記号の割り当て」をクリックします。「記号の割り当て」ダイアログ・ボックスが開きます。
-
Rectangular (矩形) 記号を選択します。
スタイル・ルールへの Rectangular 記号の割り当て -
「適用」をクリックします。
-
「スタイル・ルール」ペインで「
status does not equal BUTTON_DOWN」ルールを選択します。 -
「スタイリング・カスタマイザー」で、このルールの
push_stateフィールドの値を@statusに設定します。
ノードが選択されていないときには通常のノード記号が表示されるスタイル・ルールが作成できました。このルールが正しく適用されたことを確認するには、CSS
を確認します。
CSS を確認するには、以下の手順に従います。
-
status does not equal BUTTON_DOWNルールを右クリックし、ポップアップ・メニューから「表示」を選択します。「CSS として表示」ダイアログ・ボックスが表示されます。
スタイル・ルールの CSS を表示 -
CSS ルールを確認したら、「OK」をクリックします。
ノードがクリックされたときに別の記号を表示するには、以下の手順に従います。
-
「スタイル・ルール」ペインで「
node」を右クリックし、ポップアップ・メニューから「スタイル・ルールの作成」を選択します。スタイル・ルールの作成ウィザードが表示されます。 -
「次へ」をクリックします。
-
「スタイル・ルール」タブで、
status equals BUTTON_DOWNを選択します。 -
「終了」をクリックします。
-
「スタイル・ルール」ペインで「
status equals BUTTON_DOWN」ルールを選択します。 -
「スタイリング・カスタマイザー」で「記号の割り当て」ボタンをクリックします。「記号の割り当て」ダイアログ・ボックスが開きます。
スタイル・ルールへの Oval 記号の割り当て -
Oval (楕円形) 記号を選択します。
-
「適用」をクリックします。
-
「スタイリング・カスタマイザー」で、このルールの
push_stateフィールドの値を@statusに設定します。
ノードがダイアグラムでクリックされると、ノードを表す記号が変更されるようになりました。