ドリルダウン・リストボックス

動作

ドリルダウン式にリストの値を変化させれるリストボックスです。

 

バージョン

Curl Advanced UI 0.5

API説明

DrillDownListBoxクラス

  ドリルダウンをするリストボックスのクラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  ListBox

プロパティ

  current-node:DrillDownNode 現在表示されているノード

コンストラクタ

  default
    引数1(root:DrillDownNode):ドリルダウンツリーのルートとなるノード 

メソッド

  drill-down 指定したノードへドリルダウンします。
    引数1(node:DrillDownNode):ドリルダウンするノード
    戻り値:void

  drill-up 現在のノードから1つ親ノードへドリルアップします。
    戻り値:void

  drill-up-to-pointed-node 指定したノードへドリルアップします。
    引数1(node:DrillDownNode):ドリルダウンするノード
    戻り値:void

DrillDownEventクラス

  ドリルダウンしたイベントのクラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  Event

プロパティ

  node:DrillDownNode ドリルダウンしたノード

DrillDownLeafEventクラス

  ドリルダウンしたイベントで、リーフに到達した場合に発生するイベントのクラスです。 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  Event

プロパティ

  leaf:DrillDownLead リーフ

DrillDownComponentクラス (abstract)

  ドリルダウンのデータの抽象クラスです。(これを継承したクラスにはDrillDownNodeとDrillDownLeafがあります。) 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  なし

プロパティ

  value:any 値
  parent:#DrillDownComponent 親のComponent

DrillDownNodeクラス 

  ドリルダウンのデータクラスです。このクラスは子のDrillDownComponentを持ちます 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  DrillDownComponent

プロパティ

  children:{Array-of DrillDownComponent} 子のDrillDownComponent(DrillDownNodeかDrillDownLeaf)
  children-values:{Array-of any} 子DrillDownComponentのvalueの配列

コンストラクタ

  default
    引数1(value:any):値

メソッド

  append ドリルダウンノードをchildrenへ追加します。
    引数1(com:DrillDownComponent):ドリルダウンデータのノード
    戻り値:void

  remove ドリルダウンノードをchildrenから削除します。
    引数1(com:DrillDownComponent):ドリルダウンデータのノード
    戻り値:void

DrillDownLeafクラス 

  ドリルダウンのデータクラスです。このクラスは子のDrillDownComponentを持ちません 

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  DrillDownComponent

コンストラクタ

  default
    引数1(value:any):値

 

利用方法

DrillDownNodeとDrillDownLeafを用いてツリー構造を作成します。このツリー構造のルートを引数にDrillDownListBoxのインスタンスを生成します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”}

{import * from COM.CURLAP.ADVANCED-UI.CONTROLS}

{import * from COM.CURL.GUI.STYLED-CONTROLS}
{install-style-sheet
    {manifest-url “file”, “DEFAULT-STYLE-SHEET”}
}

{define-class public DrillDownNodeButton
  {inherits CommandButton}

  field public-get node:DrillDownNode

  {constructor public {default
                          node:DrillDownNode,
                          …
                      }
    {construct-super {splice …}}
    set self.node = node
    set self.label = node.value & ” >”
  }
}

{def base-frame = {Frame}}

{do

    || data tree
    let root:DrillDownNode = {DrillDownNode “root”}
    {root.append {DrillDownLeaf “愛知県”}}
    {root.append {DrillDownLeaf “静岡県”}}
   
    let com1 = {DrillDownNode “千葉県”}
    {com1.append {DrillDownLeaf “千葉市”}}
    {com1.append {DrillDownLeaf “八千代市”}}
    {com1.append {DrillDownLeaf “市川市”}}
    {root.append com1}

    let com2 = {DrillDownNode “東京都”}
    {com2.append {DrillDownLeaf “世田谷区”}}
    {com2.append {DrillDownLeaf “港区”}}
    {root.append com2}

    let com3 = {DrillDownNode “八王子市”}
    {com3.append {DrillDownLeaf “1丁目”}}
    {com3.append {DrillDownLeaf “2丁目”}}
    {com2.append com3}

    let com4 = {DrillDownNode “八王子村”}
    {com4.append {DrillDownLeaf “1丁目”}}
    {com3.append com4}

 

    let page:HBox = {spaced-hbox height = 1cm}
    let list:DrillDownListBox =
        {DrillDownListBox
            root,
            height = 5cm,
            width = 3cm,
            font-size = 16pt,
            || listen DrillDownEvent
            {on e:DrillDownEvent at v:DrillDownListBox do
                {page.add
                    {DrillDownNodeButton
                        e.node,
                        style = “rollover”,
                        {on Action at v:DrillDownNodeButton do
                            {list.drill-up-to-pointed-node v.node}
                            {for n in page.reverse-ordered-children do
                                {if (n asa DrillDownNodeButton).node != v.node
                                 then
                                    {n.detach}
                                 else
                                    {break}
                                }
                            }
                        }
                    }
                }
            },
            || listen DrillDownLeafEvent
            {on e:DrillDownLeafEvent at v:DrillDownListBox do
                {popup-message e.leaf.value}
            }
        }
   
    {base-frame.add
        {spaced-vbox
            page,
            list,
            width = 10cm,
            {spaced-hbox
                {CommandButton
                    label = “drill up”,
                    {on Action do
                        {list.drill-up}
                        {{page.reverse-ordered-children.read-one}.detach}
                    }
                }
            }
        }
    }
}

{View
    base-frame,
    visibility = “normal”,
    {on WindowClose do
        {exit}
    }

このサンプルでは、リストボックスから値を選択しますと、ドリルダウンをし、その子要素の一覧にリストボックス内の値が変更されます。

サンプル

ドリルダウンリストボックス

関連Curl標準API

ListBox