Curl Global Community

複数のツリー表示について

7 件の投稿

rom質問

こんにちは！

今回はツリーを扱いたくて色々調べていたのですが
ツリーを２つ以上表示させている場合に（今回は同じツリーの内容ですが・・・）
フォーカス?選択状態?がツリー毎に出てきています。。。

（例）
tree1を選択してtree2を選択してもtree1の選択状態が消えない！


どのようにすればtree1からtree2を選択したときに
tree1の選択状態を消すことが出来るでしょうか？

ご教示よろしくおねがいします。
Code:
{let tree_model:TreeModel=
    {TreeModel
            root =
                {TreeNode node-data="animal",
                    {TreeNode node-data="cat",
                        {TreeNode node-data="tama"},
                        {TreeNode node-data="mike"},
                        {TreeNode node-data="nyanko"}
                    },
                    {TreeNode node-data="dog",
                        {TreeNode node-data="poti"},
                        {TreeNode node-data="siba"},
                        {TreeNode node-data="wanko"}
                    }
                }
    }
}
{value
    {let tree1:TreeControl={TreeControl data-model = tree_model}}
    {let tree2:TreeControl={TreeControl data-model = tree_model}}
    {VBox
        tree1,tree2
    }
}
dyoshida回答 #1
フォーカスと選択状態は別のもので、画面に１つしか存在しないのはフォーカスの方ですね。
（破線で囲われているのがフォーカス、青くなっているのが選択と思って操作してみると
違いがわかるかも。）

ツリーを２つ表示させた場合は、フォーカスが別のツリーへ移動しても選択状態は維持
されているので、ツリーの項目が選択された際に他のツリーの選択を解除するという
処理が必要になりそうです。

選択は"selection"をキーワードにアクセッサやメソッドを探すとそれらしいものが
ありますが、selectionの変更イベントを受けてselectionを変更すると堂々巡りに
なってしまうので、ここはPointerReleaseイベントをつかってこんな感じではどうでしょう

Code:
{let tree_model:TreeModel=
    {TreeModel
        root =
            {TreeNode node-data="animal",
                {TreeNode node-data="cat",
                    {TreeNode node-data="tama"},
                    {TreeNode node-data="mike"},
                    {TreeNode node-data="nyanko"}
                },
                {TreeNode node-data="dog",
                    {TreeNode node-data="poti"},
                    {TreeNode node-data="siba"},
                    {TreeNode node-data="wanko"}
                }
            }
    }
}
{value
    {let tree1:TreeControl={TreeControl data-model = tree_model}}
    {let tree2:TreeControl={TreeControl data-model = tree_model}}
    {do
        {tree1.add-event-handler
            {on pr:PointerRelease do
                {tree2.select-nothing}
            }
        }
        {tree2.add-event-handler
            {on pr:PointerRelease do
                {tree1.select-nothing}
            }
        }
    }
    {VBox
        tree1,tree2
    }
}
umemura回答 #2
PointerRelease だと、ツリーの操作をマウス以外で行った場合に対応できないので、
選択を外す際のイベントは、フォーカスイベントにしたほうがよいかもしれません。

また、要件次第だとは思いますが、選択状態を残したいのであれば、
フォーカス状態に応じて「選択色」を変更する、という方法もあります。
この方法なら、コントロール間の制御も必要ないですしね。

Code:
    ||フォーカスアウト時に、選択色を灰色に
    ||フォーカスイン時に、選択色を戻す
{do

        {tree1.add-event-handler
            {on e:FocusOut at tc:TreeControl do
                set tc.selected-background = "darkgray"
                set tc.selected-color = "black"
            }
        }
        {tree2.add-event-handler
            {on e:FocusOut at tc:TreeControl do
                set tc.selected-background = "darkgray"
                set tc.selected-color = "black"
            }
        }
        {tree1.add-event-handler
            {on e:FocusIn at tc:TreeControl do
                {unset tc.selected-background }
                {unset tc.selected-color }
            }
        }
        {tree2.add-event-handler
            {on e:FocusIn at tc:TreeControl do
                {unset tc.selected-background }
                {unset tc.selected-color }
            }
        }
    }


rom回答 #3
>dyoshida さん

フォーカスと選択について分かりやすい説明ありがとうございます！
破線と青状態を意識してみることが無かったですが
見てみると簡単にわかりました！

>umemura さん

要件に合わせてFOCUS-IN/OUTを使って
想定していた動作が出来ました！ありがとうございます！


しかしながらもう一つ質問事項が出来ました・・・

要素のAction時に子が存在していて且つ、
展開されていない状態なら展開する
展開されていたら閉じる

をやってみたいのですが
.has-children?を使えば子があるかは判定できるのですが
展開されているか？という判定ができません！

ご教示よろしくおねがいします！

Code:
{let tree_model:TreeModel=
    {TreeModel
            root =
                {TreeNode node-data="animal",
                    {TreeNode node-data="cat",
                        {TreeNode node-data="tama"},
                        {TreeNode node-data="mike"},
                        {TreeNode node-data="nyanko"}
                    },
                    {TreeNode node-data="dog",
                        {TreeNode node-data="poti"},
                        {TreeNode node-data="siba"},
                        {TreeNode node-data="wanko"}
                    }
                }
    }
}

{let tree:TreeControl={TreeControl data-model = tree_model}}

{tree.add-event-handler
    {on Action do
        {if-non-null current = tree.current-node then
            {if current.has-children? == true then
                {tree.expand-node current}
            }
        }
    }

}

{value tree}

Yuhki回答 #4
dyoshidaさん＞
上記ソースだとタブ遷移してキーボード操作で選択したり
クリックしたままマウスを移動すると選択状態が残ってしまう気が…

umemura回答 #5
「開いているかどうか」は、TreeItem で取得できるようですね。

Code:
{value
    let tree:TreeControl={TreeControl data-model = tree_model}
    {VBox
        tree,
        {CommandButton
            label = "選択ノードの状態",
            takes-focus? = false,
            {on Action do

                def tc-ui = tree.ui-object asa SkinnableTreeControlUI


                {if-non-null crr-node = tree.current-node then

||++                || SkinnableTreeControlUI.cells からも取れるみたいだが、面倒
||++                || SkinnableTreeControlUI.get-item-for-node のほうが楽
||++                let current-item:#TreeItem = null
||++                {for c in tc-ui.cells do
||++                    def itm = c.item
||++                    {if itm.current? then
||++                        set current-item = itm
||++                        {break}
||++                    }
||++                }

                    {if-non-null current-item=  {tc-ui.get-item-for-node crr-node} then
                        {if current-item.expanded? then
                            {popup-message "開いている"}
                         else
                            {popup-message "閉じている"}
                        }
                    }
                 else
                    {popup-message "現在選択ノードなし"}
                }
            }
        }
    }
}
rom回答 #6
>umemura さん

ありがとうございます！
想定していた動作が出来ました！

回答をくださる皆様ありがとうございます！