Curl Global Community
ツリーコントロールのカスタマイズ - Printable Version

+- Curl Global Community (https://communities.curl.com)
+-- Forum: Discussions (https://communities.curl.com/forumdisplay.php?fid=1)
+--- Forum: General Curl questions (https://communities.curl.com/forumdisplay.php?fid=2)
+--- Thread: ツリーコントロールのカスタマイズ (/showthread.php?tid=910)



ツリーコントロールのカスタマイズ - umemura - 06-12-2013

ツリーコントロールの外見を下記のように変更したいです。

■デフォルト
□─┐ラベル1
│  ├─ラベル1-1
│  ├─ラベル1-2
│  └─ラベル1-3
├─┐ラベル2
│  ├─ラベル2-2
│  └─ラベル2-3


■望む変更
この「+-」の展開・折りたたみボタンを大きくしたい
↓  ↓線を長くし、途中から枝わけしたい
□──┬──ラベル1
│   ├────ラベル1-1
│   ├────ラベル1-2
│   └────ラベル1-3
│                ←ノードの親レベルで間を少し空けたい
├──┬───ラベル2
│   ├────ラベル2-2
│   └────ラベル2-3


「スキンが適用されたツリーコントロール」の項目を見て、
関係しそうなプロパティを変更しましたが、
望む外観と派なりませんでした。

Code:
{def toggle-open-skin =
    {ShadedSkinSpec
        "white",
        "white",
        margin-spec = {OffsetSpec 20px}
    }
}
{def toggle-closed-skin =
    {ShadedSkinSpec
        "white",
        "white",
        margin-spec = {OffsetSpec 20px}
    }
}
{def tree-ss =
    {StyleSheet
        {StyleRule "TreeControl/toggle",
            skin = toggle-closed-skin,
            checked-skin = toggle-open-skin,
            width =5in
        }
    }
}
{install-style-sheet-on-Graphic
    {TreeControl data-model = foods},
    tree-ss
}

あとは、draw メソッドで、うまいこと線を引くスキンを自作してUIで利用する方法が考えられますが、
実装コードがわかりません。

もし、ツリーコントロールをカスタマイズした方がいらっしゃったら教えてください。



RE: ツリーコントロールのカスタマイズ - umemura - 06-18-2013

よこの長さは TreeControl.indentation で指定できました。
ただ、トグルボタンを大きくした際に、レイアウトが崩れる問題は解決できていおらず、
margin-spec で6px より大きくすると、目に見えてレイアウトがおかしくなります。

Code:
||ツリーの見栄えを変える
    def tree-control =
        {TreeControl
            tree-item-creation-proc = new-tree-item-creation-proc,
            name = "tree-control",
            || インデント幅
            indentation = 15mm
        }
    {install-style-sheet-on-Graphic
        tree-control,
        {StyleSheet
            ||トグルボタン
            {StyleRule "TreeControl/toggle",
                skin = {ShadedSkinSpec
                           "white",
                           "white",
                           rollover-start-color = "lightblue",
                           border-color = "gray",
                           rollover-border-color = "blue",
                           draw-content-background? = false,
                           margin-spec = {OffsetSpec 6px},
                           overlay-decoration = "plus"
                           ||corner-radius = 3px
                       },
                checked-skin = {ShadedSkinSpec
                                   "white",
                                   "white",
                                   rollover-start-color = "lightblue",
                                   border-color = "gray",
                                   rollover-border-color = "blue",
                                   draw-content-background? = false,
                                   margin-spec = {OffsetSpec 6px},
                                   overlay-decoration = "minus"
                                   ||corner-radius = 3px
                               }
            },
            ||TreeItemのマージンを広げる
            {StyleRule "DefaultTreeItem",
                margin = 2mm
            }
        }
    }