「逆引きリファレンス」カテゴリーアーカイブ

オープンソース - Curl Advanced UI

クリックなしタブ切り替え

動作

タブコンテナ、タブ・アコーディオンのタブを押さずにオープン・クローズのできるコンポーネントです。例えば以下の図のタブに触れますとクリックなしで、フレームが開きます。

バージョン

Curl Advanced UI 0.5

API説明

CoreTabPaneクラス

TabPaneのAdvanced UI基本クラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TabPane

プロパティ

なし

コンストラクタ

default
キーワード引数（show-without-click?:bool = true）:クリックなしでタブ切り替え

メソッド

なし

利用方法

TabPaneを作成し、TabContainer, TabAccordion, MultiTabAccordion等に割り当てます。

{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”}}

{value

    {spaced-vbox
        {hrule},
        {text MultiTabAccordion},
        {hrule},
        {MultiTabAccordion
            {CoreTabPane label = “TabPane Label 1”, {image source = {url “images/1.png”}}},
            {CoreTabPane label = “TabPane Label 2”, {image source = {url “images/2.png”}}},
            {CoreTabPane label = “TabPane Label 3”, {image source = {url “images/3.png”}}}
        },

        {hrule},
        {text TabAccordion},
        {hrule},
        {TabAccordion
            {CoreTabPane label = “TabPane Label 1”, {image source = {url “images/1.png”}}},
            {CoreTabPane label = “TabPane Label 2”, {image source = {url “images/2.png”}}},
            {CoreTabPane label = “TabPane Label 3”, {image source = {url “images/3.png”}}}
        },

        {hrule},
        {text TabContainer},
        {hrule},
        {TabContainer
            {CoreTabPane label = “TabPane Label 1”, {image source = {url “images/1.png”}}},
            {CoreTabPane label = “TabPane Label 2”, {image source = {url “images/2.png”}}},
            {CoreTabPane label = “TabPane Label 3”, {image source = {url “images/3.png”}}}
        }
    }
}

これらのタブコンテナをクリックすることなく、カーソルをタブに合わせるだけでオープン・クローズすることができます。

サンプル

タブ切り替えサンプル

ディスクロージャ

動作

フレームを表示したり、クローズしたりできるコンポーネントです。

バージョン

Curl Advanced UI 0.5

API説明

DisclosureFrameクラス

フレームを閉じたり・開いたりするフレーム・クラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

Frame

プロパティ

open?:bool　フレームを開いているか否か

コンストラクタ

default
キーワード引数（open?:bool = false）:初期状態で開くか否か

メソッド

open 開きます。
戻り値：void

close 閉じます
戻り値：void

switch open? == trueであれば閉じ、falseであれば開きます。
戻り値：void

DisclosureCommandButtonクラス

DisclosureFrameの開閉ボタンのクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

CommandButton

プロパティ

なし

コンストラクタ

default
    引数1(frame:DisclosureFrame):DisclosureFrame
    キーワード引数（open-label:Label）:開くボタンのラベル
    キーワード引数（close-label:Label）:開くボタンのラベル

メソッド

なし

利用方法

DisclosureFrameを作成し、DisclosureCommandButtonに割り当てます。（DisclosureFrameのみでも利用可能です。）

{curl 6.0 applet}
{applet manifest = “manifest.mcurl”}

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

{value
    || Disclosuer
    def frame1 =
        {DisclosureFrame
            width = 3cm,
            height = 5cm,
            background = “pink”,
            {spaced-vbox
                {TextField},
                {ComboBox}
            }
        }

    def frame2 =
        {DisclosureFrame
            width = 3cm,
            height = 5cm,
            background = “yellow”,
            {spaced-vbox
                {TextField},
                {ComboBox}
            }
        }

    {spaced-vbox
        {text Disclosure},

        || normal CommandButton
        {CommandButton
            label = “switch!”,
            {on Action do
                {frame1.switch}
            }
        },
        frame1,

        || DisclosureCommandButton
        {DisclosureCommandButton
            ||open-label = “open!!”,
            ||close-label = “close!!”,
            frame2
        },
        frame2
    }
}

このサンプルでは、ボタンを押下するとFrameが画面上に表示され、再度押下しますと、Frameが表示されなくなります。画面スペースを有効活用したい場合に効果のあるライブラリです。

サンプル

ディスクロージャサンプル

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

動作

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

バージョン

Curl Advanced UI 0.5

API説明

DrillDownComboBoxクラス

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

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

ComboBox

プロパティ

field-name:String　フィールド名

コンストラクタ

default
    引数1（field-name:String）:フィールド名（RecordSetのフィールド名）
    引数2（record-source:RecordSet）:データソースとなるRecordSet
    キーワード引数(parent-combo-box:#DrillDownComboBox = null):親のComboBox

メソッド

  create-child 子ComboBoxを生成します。（当ComboBoxの値が変更されたら、このメソッドにて生成された子のComboBoxno値を変更します。）
    引数1(field-name:String):フィールド名
    戻り値：DrillDownComboBox

利用方法

ルートのDrillDownComboBoxを作成し、create-childメソッドにてその子ComboBoxを生成します。データソースはRecordSetとなります。

{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”}}

{value

    def records =
        {RecordSet
            {RecordFields
                {RecordField “first”, domain = String},
                {RecordField “second”, domain = String},
                {RecordField “third”, domain = int},
                {RecordField “fourth”, domain = double}
            },
            {RecordData first = “mori”, second = “akira”, third = 27, fourth = 1.0},
            {RecordData first = “mori”, second = “akira”, third = 27, fourth = 2.0},
            {RecordData first = “mori”, second = “akira”, third = 28, fourth = 3.0},
            {RecordData first = “mori”, second = “akira”, third = 28, fourth = 10.0},
            {RecordData first = “mori”, second = “akira”, third = 30, fourth = 20.0},
            {RecordData first = “okada”, second = “hitoshi”, third = 1, fourth = 40.0},
            {RecordData first = “okada”, second = “hitoshi”, third = 2, fourth = 5.0},
            {RecordData first = “okada”, second = “hitoshi”, third = 3, fourth = 4.0},
            {RecordData first = “okada”, second = “hitoshi”, third = 3, fourth = 50.0},
            {RecordData first = “okada”, second = “taro”, third = 3, fourth = 6.0},
            {RecordData first = “okada”, second = “taro”, third = 4, fourth = 7.0},
            {RecordData first = “okada”, second = “jiro”, third = 5, fourth = 8.0},
            {RecordData first = “mori”, second = “aki-na”, third = 27, fourth = 9.0},
            {RecordData first = “kodan”, second = “xxxx”, third = 22, fourth = 8.0},
            {RecordData first = “kodan”, second = “yyyy”, third = 25, fourth = 7.0},
            {RecordData first = “kodan”, second = “xxxx”, third = 22, fourth = 6.0},
            {RecordData first = “kodan”, second = “yyyy”, third = 25, fourth = 5.0},
            {RecordData first = “mori”, second = “ero”, third = 24, fourth = 9.0}
        }

    def first-combo =
        {DrillDownComboBox
            “first”,
            records
        }
    def second-combo = {first-combo.create-child “second”}
    def third-combo1 = {second-combo.create-child “third”}
    def third-combo2 = {second-combo.create-child “third”}
    def fourth-combo1 = {third-combo1.create-child “fourth”}
    def fourth-combo2 = {third-combo2.create-child “fourth”}

    {spaced-vbox
        {text Drilldown ComboBox},
        {spaced-hbox
            first-combo,
            second-combo,
            {spaced-vbox third-combo1, third-combo2},
            {spaced-vbox fourth-combo1, fourth-combo2}
        },
        {RecordGrid
            record-source = records
        }
    }
}

このサンプルでは、コンボボックスから値を選択しますとその条件にあうデータに絞り込まれ、子コンボボックスのリストにデータが挿入されます。

サンプル

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

電卓テキストフィールド

動作

電卓付のテキストフィールドです。電卓を表示させることなく、フィールド内で計算ができます。

バージョン

Curl Advanced UI 0.5

API説明

CalculatorTextFieldクラス

電卓になるTextFieldクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextField

プロパティ

value-as-double:double　計算結果をdoubleで取得

コンストラクタ

default
キーワード引数(value-format:String = “%.12f”):表示するフォーマット（formatマクロと同様のフォーマット形式）
キーワード引数（prompt:String = “0.”）：初期表示プロンプト

メソッド

clear （値を初期値に戻します）

利用方法

CalculatorTextFieldクラスのオブジェクトを生成し、画面へ配置する。

{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”}}

{value
    {spaced-vbox
        {text CalculatorTextField},
        {CalculatorTextField},
        {CalculatorTextField value-format = “%.0f”, prompt = “0”}
    }
}

このサンプルでは、テンキーから入力し、計算ができます。

サンプル

電卓サンプル

From To日付フィールド

動作

日付フィールドでよくあるFrom toをコントロールとして提供します。

バージョン

Curl Advanced UI 0.5

API説明

FromToDateFieldContainerクラス

from to のDateFieldコンテナ・クラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

Frame

プロパティ

from:CoreDateField　FromのDateField
to:CoreDateField　toのDateField
from-value:#DateTime　FromのDateFieldのvalue
to-value:#DateTime　toのDateFieldのvalue
vertical?:bool　縦並びにするか否か
valid-values?:bool from <= toならtrue, from > toならfalse

コンストラクタ

default
    引数1（from:CoreDateField）:fromのDateField
    引数2（to:CoreDateField）:toのDateField
    キーワード引数(between-date-fields:#Grapic = null):fromとtoの間に含める文字列（Graphic）
    キーワード引数(vertical?:bool = false):縦並びにするか否か

なし

利用方法

FromとToのCoreDateFieldを指定し、FromToDateFieldContainerクラスを生成します。

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

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

{value

    def container =
        {FromToDateFieldContainer
            {CoreDateField}, {CoreDateField}, width = 10cm}

    {spaced-vbox
        {text Nomal DateField},
        {DateField width = 5cm},

        {text Advanced DateField},
        {CoreDateField width = 5cm},
        {FromToDateFieldContainer
            {CoreDateField}, || frome
            {CoreDateField}, || to
            between-date-fields = {text 〜},
            width = 10cm,
            {on e:ValueFinished at v:FromToDateFieldContainer do
                {if not v.valid-values? then
                    {popup-message “Not valid values…”}
                }
            }
        },

        {spaced-hbox
            container,
            {CommandButton label = “valid values?”,
                {on Action do
                    {popup-message container.valid-values?}
                }
            }
        }
    }
}

このFromToDateFieldでは、カレンダー・コントロールの表示、フォーカス移動を自動的に実施してくれます。（ユーザのマウスクリック動作を軽減することができます。）

サンプル

ＦｒｏｍＴｏフィールドサンプル

ウィザード

動作

ウィザード画面を簡単に作成するためのコンポーネントです。

バージョン

Curl Advanced UI 0.5

API説明

WizardManagementFrameクラス

ウィザードを管理するFrameクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

Frame

プロパティ

current-page:int　現在のウィザードページ
total-page:int　すべてのウィザードページ数
first?:bool　最初のウィザードページか否か
last?:bool　最後のウィザードページか否か

コンストラクタ

default
引数1（wizard-frames:{Array-of Frame}）:ウィザードとする全ページのFrame
キーワード引数(start-page:int = 1):開始ページ番号

メソッド

move-next (次のFrameへ移動)
　　戻り値：int

move-previous (前のFrameへ移動)
　　戻り値：int

move-last(最後のFrameへ移動)
　　戻り値：int

move-first (最初のFrameへ移動)
　　戻り値：int

move (指定したFrameへ移動)
　引数1(page:int):ページ番号
　戻り値：int

利用方法

WizardManagementFrameクラスを生成し、move-xxxxメソッドを用いてウィザードを制御します。

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

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

{value
     def wizard =
        {WizardManagementFrame
            start-page = 2,
            {{Array-of Frame}
                {Frame width = 10cm, height = 5cm, background = “grey”,
                    {spaced-vbox
                        {bold #1}, {TextField}, {ComboBox}, {CommandButton}
                    }
                },
                {Frame width = 10cm, height = 5cm, background = “orange”,
                    {spaced-vbox
                        {bold #2}, {CommandButton}, {TextArea}, {ComboBox}
                    }
                },
                {Frame width = 10cm, height = 5cm, background = “green”,
                    {spaced-vbox
                        {bold #3}, {TextField}, {ComboBox}, {CommandButton}
                    }
                },
                {Frame width = 10cm, height = 5cm, background = “red”,
                    {spaced-vbox
                        {bold #4}, {TextArea width = 8cm}, {ComboBox}
                    }
                }
            }
        }
    def page:Dynamic = wizard.current-page

    || display
    {spaced-vbox
        {text Wizard},
        wizard,
        {spaced-hbox
            || first
            {CommandButton label = “<<“,
                {on Action do
                    set page.value = {wizard.move-first}
                    {popup-message “first page”}
                }
            },
            || previous
            {CommandButton label = “<“,
                {on Action at v:CommandButton do
                set page.value = {wizard.move-previous}
                    {if wizard.first? then
                        {popup-message “first page”}
                    }
                }
            },
            || next
            {CommandButton label = “>”,
                {on Action at v:CommandButton do
                    set page.value = {wizard.move-next}
                    {if wizard.last? then
                        {popup-message “last page”}
                    }
                }
            },
            || last
            {CommandButton label = “>>”,
                {on Action do
                    set page.value = {wizard.move-last}
                    {popup-message “last page”}
                }
            },
            page, “/” & wizard.total-page
        }
    }
}

このサンプルでは、”<<“, “<“, “>”, “>>”ボタンを押下し、ウィザード形式でページ遷移します。

サンプル

ウィザードサンプル

アニメーション・ビュー

動作

透過度を変化させたり、フレームサイズを変化させながら、表示・非表示のできるアニメーションを用いたビューです。

バージョン

Curl Advanced UI 0.5

API説明

AnimationViewクラス

アニメーション的に表示するViewクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

View

プロパティ

なし

メソッド

show-animation (Viewを表示)
    キーワード引数（interval:Time = .002s）：表示間隔
    キーワード引数（repeat:int = 100）：表示までのアニメーション回数
    キーワード引数（pattern:String = “opacity”）：表示パターン (opacity or stretch)
    キーワード引数(finish-proc:#{proc-type {v:AnimationView}:void} = null)
　　戻り値：void

  hide-animation　（Viewを隠す）
    キーワード引数（interval:Time = .002s）：非表示間隔
    キーワード引数（repeat:int = 100）：非表示までのアニメーション回数
    キーワード引数（pattern:String = “opacity”）：非表示パターン (opacity or stretch)
    キーワード引数(finish-proc:#{proc-type {v:AnimationView}:void} = null)
　　戻り値：void

利用方法

AnimationViewクラスを生成し、show-animationメソッドでViewをアニメーションを利用し表示。hide-animationでViewを非表示にします。

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

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

{value
     def view1 =
        {AnimationView
            width = 10cm,
            height = 10cm,
            {image source = {url “images/1.png”}}
        }
    def view2 =
        {AnimationView
            width = 10cm,
            height = 10cm,
            {spaced-vbox width = 9cm, height = 9cm,
                {image source = {url “images/2.png”}},
                {TextField}
            }
        }

        {spaced-hbox
            || opacity 透明度を変更しながら表示・非表示
            {CommandButton
                label = “show view (opacity)”,
                {on Action do
                    {view1.show-animation
                        finish-proc =
                            {proc {v:AnimationView}:void
                                {popup-message “loaded!!”}
                            }
                    }
                }
            },
            {CommandButton
                label = “hide view (opacity)”,
                {on Action do
                    {view1.hide-animation
                        finish-proc =
                            {proc {v:AnimationView}:void
                                ||{v.close}
                                {popup-message “hide!!”}
                            }
                    }
                }
            },

            || stretch　（伸張度を変更しながら表示・非表示）
            {CommandButton
                label = “show view (stretch)”,
                {on Action do
                    {view2.show-animation pattern = “stretch”}
                }
            },
            {CommandButton
                label = “hide view (stretch)”,
                {on Action do
                    {view2.hide-animation pattern = “stretch”}
                }
            }
        }
    }
}

このサンプルでは、”show view(xxx)”を押下し、アニメーションを利用したViewの表示、”hide view(xxx)”を押下し、表示しているViewを非表示にします。

サンプル

アニメーションビュー

バイブレーション・キャンバス

動作

入力ミスなどを検知した場合に、コントロールが震えるようなコンポーネントです。例えば以下の”fire vibration”ボタンを押下しますとテキストフィールドがぶるぶる震えます。

バージョン

Curl Advanced UI 0.5

API説明

VibrationControlCanvas クラス

揺れるコントロールを配置するCanvasクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTAINERS

スーパークラス

Canvas

プロパティ

なし

メソッド

vibrate (コントロールを揺らす)
    引数1:バイブレートさせるコントロール
    キーワード引数（vibration-width:Distance = .5mm）：バイブレーションの幅
    キーワード引数（interval:Time = .01s）：バイブレーションの間隔
    キーワード引数（repeat:int = 6）：繰り返し回数
　　戻り値：AnimationTimer

vibrate-all-children （Canvas上にあるすべてのコントロールを揺らす）
    キーワード引数（bibration-width:Distance = .5mm）：バイブレーションの幅
    キーワード引数（interval:Time = .01s）：バイブレーションの間隔
    キーワード引数（repeat:int = 6）：繰り返し回数
　　戻り値：AnimationTimer

利用方法

VibrationControlCanvasクラスを生成し、addメソッドでバイブレーションさせるコントロールをCanvasに追加します。

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

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

{value
    def tf = {TextField}
    def cb = {ComboBox}
    def f = {Frame width = 1cm, height = 1cm, background = “red”}

    def canvas =
        {VibrationControlCanvas
            width = 5cm,
            height = 5cm,
            background = “pink”
        }
    {canvas.add tf, x = 1cm, y = 1cm}
    {canvas.add cb, x = 1cm, y = 2cm}
    {canvas.add f, x = 1cm, y = 3cm}

        canvas,
        {spaced-hbox
            {CommandButton
                label = “fire vibration!!”,
                {on Action do
                    {canvas.vibrate tf, vibration-width = 1mm, interval = .02s}
                }
            },
            {CommandButton
                label = “fire all vibrations!!”,
                {on Action do
                    {canvas.vibrate-all-children}
                }
            }
        }
}

このサンプルでは、”fire vibration!!”ボタンを押下したらTextFieldが震えます。”fire all vibrations!!”を押下したらCanvas上のすべてのコントロールが震えます。

サンプル

バイブレーションキャンバス

キーマッピング・コマンドボタン

動作

ファンクションキー（F1, F2, F3…F12）やキーボード操作(Alt+xx, Ctrl+xx)をイベントにマッピングさせる機能を用いたボタンです。以下のファンクションキーの例では、F1からF12を押下しますと、ボタン押下イベントが発生し、ポップアップメッセージを表示します。

バージョン

Curl Advanced UI 0.5

API説明

CoreCommandButton クラス

Advanced UIのCommandButton基本クラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

CommandButton

プロパティ

extra-mnemonic:#String キーマッピングする文字列を指定

メソッド

なし

利用方法

マッピングしたいキーをCoreCommandButtonの引数extra-mnemonicに指定します。指定する文字列は、KeyAccelクラスのkey-accel-stringと同様の方法です。例えば、ファンクションキーであれば、”f1″, “f2”, “f3” ….”f12″を、Ctrlボタン＋Aボタンであれば、”Ctrl+A”を指定します。

{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”}}

{value
    {Frame
        background = “grey”,
        {spaced-hbox
            || extra-mnemonic tests :handle any key events
            {CoreCommandButton
                label = “F1”,
                extra-mnemonic = “f1”,
                {on Action do
                    {popup-message “mnemonic1”}
                }
            },
            {CoreCommandButton
                label = “F2”,
                extra-mnemonic = “f2”,
                {on Action do
                    {popup-message “mnemonic2”}
                }
            },
            {CoreCommandButton
                label = “F3”,
                extra-mnemonic = “f3”,
                enabled? = false,
                {on Action do
                    {popup-message “mnemonic3”}
                }
            },
            {CoreCommandButton
                label = “F12”,
                extra-mnemonic = “f12”,
                {on Action do
                    {popup-message “mnemonic12”}
                }
            }
        }
    }
}

このサンプルでは、ファンクションキーF1を押下したら、label=”F1″のActionイベントの処理が実行されます。（CommandButtonと同様の処理）

サンプル

t-core-command-button.curl

ドメインコントロール

RecordGrid上に表示される各コントロールと同様に、ドメインによってコントロールの表示を制御します。これらのコントロールを使用すると、フォーカスアウト時に指定されたフォーマットに従って入力文字が自動で指定されたフォーマットに変換されます。

バージョン

Curl Advanced UI 0.5

API説明

DomainControlInterfaceクラス

ドメイン制御の機能を提供するコントロールの基底クラスです。このクラス自体は抽象クラスのため、具象化することが出来ません。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

DomainTextFieldクラス

ドメイン制御の機能が埋め込まれたTextFieldです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextField,DomainControlInterface

コンストラクタ

default
キーワード引数（domain:Domain = {Domain.from-type String}）：このTextFieldに適用するドメイン

キーワード引数（value:any = null）：このTextFieldの初期値。Domainが示す形式に合った型である必要があります。

その他の引数についてはTextFieldのヘルプを参照してください。

DomainTextDisplayクラス

ドメイン制御の機能が埋め込まれたTextDisplayです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextField,DomainControlInterface

コンストラクタ

default
キーワード引数（domain:Domain = {Domain.from-type String}）：このTextFieldに適用するドメイン

キーワード引数（value:any = null）：このTextFieldの初期値。Domainが示す形式に合った型である必要があります。

その他の引数についてはTextDisplayのヘルプを参照してください。

メソッド

なし

DomainDateFieldクラス

ドメイン制御の機能が埋め込まれたDateFieldです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextField,DomainControlInterface

コンストラクタ

default
キーワード引数（domain:Domain = {Domain.from-type DateTime}）：このDateFieldに適用するドメイン

キーワード引数（value:any = null）：このTextFieldの初期値。Domainが示す形式に合った型である必要があります。

その他の引数についてはTextFieldのヘルプを参照してください。

メソッド

なし

利用方法

Domainコントロール各種にドメインと初期値を渡してください。

{DomainTextField
domain = {StandardDateDomain},
value = {DateTime “1980-10-14”}
}

{DomainTextDisplay
domain = {StandardDateDomain},
value = {DateTime “1989-01-09”}
}

{DomainDateField
domain = {StandardDateDomain},
value = {DateTime}
}

テキスト入力後、フォーカスアウト時に指定したドメインと同じフォーマットで値が自動変換されます。

サンプル

http://developers.curlap.com/curl/advanced-ui/tests/t-domain-ui.curl

関連Curl標準API

TextField,TextDisplay,DateField

オープンソース - Curl Advanced UI

オートコンプリ－ト・テキストフィールド

予め指定された入力値を元に、ユーザーのキーボード入力に対して入力候補となる値をプルダウン表示します。

バージョン

Curl Advanced UI 0.5

API説明

AutoCompleteTextFieldクラス

AutoComplete機能を提供するTextFieldクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextField

コンストラクタ

default
キーワード引数（proposed-values:any = null）：入力候補となる値のリスト

その他の引数についてはTextFieldのヘルプを参照してください。

メソッド

なし

利用方法

AutoCompleteTextFieldの引数としてproposed-valuesを指定すると、指定した値がプルダウンで表示されます。

{AutoCompleteTextField
    height = 1cm,
    font-size = 1cm,
    proposed-values =
        {{Array-of String}
            “aaa”,
            “aab”,
            “abc”,
            “abd”,
            “abe”,
            “abf”,
            “bbb”,
            “ccc”,
            “ddd”,
            “eee”,
            “fff”,
            “あいうえお”
        }

}

サンプル

http://developers.curlap.com/curl/advanced-ui/tests/t-auto-complete.curl

Basic認証・Digest認証

CurlでBasic認証(ベーシック認証)・Digest認証（ダイジェスト認証）を行うには、まずはWebサーバの設定を行います。例えば、Apacheであれば.htaccessファイル、Tomcatではweb.xmlの設定を行います。

これらの設定後、Curlからこのサイトへアクセスすると認証用ダイアログが表示されます。もしこの認証用ダイアログを利用したくない場合は、set-http-authenticationプロシージャを利用します。サイトアクセス前にこのプロシージャの引数にURLプリフィックス, ユーザ名・パスワードを指定して実行します。

このプロシージャの利用方法はBasic認証でもDigest認証でも変わりません。

また、認証エントリの一覧を取得するために、get-http-authentications、認証エントリからの削除を行うために、clear-http-authenticationが用意されています。

ユーザインターフェース

コントロールの作成3

アコーディオン

Ajaxフレームワークでよく見かけるアコーディオン・コントロールですが、もちろんCurlのAPIで用意されています。これを実現するには、TabAccordionとTabPaneを利用します。以下にサンプルを掲載します。

アコーディオンを作成するためにTabAccordionコンテナを作成し、その引数としてTabPaneを必要なタブ数分作成します。上記の例では３つのTabPaneをつくっています。また、アコーディオンを縦・横を指定するためにtab-orientationオプションを利用します。デフォルトは“vertical”で、上記イメージ上のようになります。これを上記イメージ下のように変更したいのであれば、”horizontal”を指定します。

また、TabAccordionは１度に１つのTabPaneのみ表示となりますが、同時に複数のTabPaneを開きたい場合は、TabAccordionの代わりにMuitiTabAccordionを利用してください。

        || TabAccordion
        {TabAccordion
            tab-orientation = “horizontal”, || 指定しない場合はvertical
            {TabPane
                label = “A1”,
                tab-button-tooltip = “first tab”,
                {TextFlowBox font-size = 50pt, “1つ目”}
            },
            {TabPane
                label = “A2”,
                tab-button-tooltip = “second tab”,
                {TextFlowBox font-size = 50pt, “2つ目”}
            },
            {TabPane
                label = “A3”,
                tab-button-tooltip = “third tab”,
                {TextFlowBox font-size = 50pt, “3つ目”}
            }
        },

DateField（datepicker）

日付入力及び選択のためのTextField（一般的にはDatePickerと呼ばれるのかもしれません。）がCurlに標準で装備されています。

単純に以下のコードのみで上記のイメージのように表示できます。

{DateField}

参考ドキュメント

タブコンテナ

セキュリティ

SHA-1を用いたメッセージダイジェスト出力

ハッシュ関数について、「MD5を用いたメッセージダイジェスト出力」で紹介したものに加えて、SHA-1をCurlにて利用する方法をご紹介いたします。MD5のメッセージダイジェストの長さは128ビットですが、SHA-1は160ビットとなっています。

まず、SHA-1を利用するには、CURL.CRYPTO.MSG-DIGESTパッケージをimportします。

{import * from CURL.CRYPTO.MSG-DIGEST”}

SHA-1-Digesterクラスのインスタンスを生成し、digest-from-stringからMsgDigestオブジェクトを取得することができます。

{value
let digester:SHA-1-Digester = {SHA-1-Digester}
{digester.digest-from-string “abc”} & “”
}

実行結果

A9993E364706816ABA3E25717850C26C9CD0D89D

セキュリティ

MD5を用いたメッセージダイジェスト出力

認証やデジタル署名などでよく使われるMD5という、入力値などに対して128ビットのハッシュ値を出力するハッシュ関数（一方向関数）があります。

CurlにてMD5を利用する場合、標準APIとしては提供されていません。ただし、MD5を利用してメッセージダイジェストを出力するサンプルは、以下のディレクトリに格納されていますので、それをもとにご紹介いたします。

C:\Program Files\Curl Corporation\Surge\7\docs\default\examples\dguide\dll-interface.zip（Windowsの場合）

こちらからもダウンロードできるようにしておきました。

まず、MD5を利用するには、以下のようにMD5.scurlをロードし、MD5のパッケージをimportします。

{import * from MD5, location = “MD5.scurl”}

MD5-Digesterクラスのインスタンスを生成し、digest-from-stringからMsgDigestオブジェクトを取得することができます。

{value
let digester:MD5-Digester = {MD5-Digester}
{digester.digest-from-string “abc”} & “”
}

実行結果

900150983CD24FB0D6963F7D28E17F72

イベント

キー・イベントのハンドリング

キーボードからのキー・イベント（例えば、ファンクションキー、コントロールキー（Ctrl）、シフトキー（Shift）、Altキー、複合キー（Ctrl＋Alt+AキーやShift＋Aキーなど））が発生した場合に、何かの処理を実行する方法を説明します。

以下のサンプルでは、Ctrl＋Aの操作が行われた場合に、ポップアップメッセージを表示いたします。

{value
        {Frame
            background = “red”, width = 3cm, height = 3cm,
            {on e:AttachEvent at v:Frame do
                def accel =
                    {KeyAccel
                        key-accel-string = “Ctrl+A”,
                        {on Action do
                            {popup-message “Press the Ctrl+A key.”}
                        }
                    }

                {if-non-null
                    focus-manager = {v.get-focus-manager}
                 then
                    {focus-manager.add-key-accel accel}
                }
            }
        }
}

まず、あるキーイベントが発行されたときの動作を定義するために、KeyAccelオブジェクトを引数にキーを文字列で指定します。これを表示している画面に登録するため（実際にはFocusManagerに登録することとなります）、Frameからget-focus-managerを利用して、FocusManagerを取得し、add-key-accelで作成したKeyAccelを追加します。複数キーを登録する場合もこれと同様に新しいKeyAccelを作成し、FocusManagerに追加していきます。

上記コードにより、Ctrl＋Aを押下すると、「press the Ctrl+A key.」というメッセージボックスが表示されます。

また、各コントロールのオプションでmnemonicというオプションがあり、これを用いることで簡単にキーイベントを設定することができます。ただし、これは”Alt＋キー”しかできませんので注意してください。

データ操作

Google EarthをCurlで操作

今回は、Google EarthをCurlからGoogle Earth COM APIを利用して、操作する方法を説明していこうと思います。これを用いることで、Google Earth上を自由に移動・観光したり、３D建物を配置したり、画面のスクリーンショットを取得することができます。ここではGoogle Earth4.3のインストールを前提としています。

まずは、Google Earthをインストール後、以下のコマンドにてCOMレジストリの登録を実施します。

“C:Program FilesGoogleGoogle Earthgoogleearth.exe” /RegServer

コーディング（Google Earth COM API）

CurlでGoogle Earth COM APIを利用するには、ActiveXObjectを利用します。ActiveXの扱い方についてはこちらのページを参考ください。

まずは、CURL.GRAPHICS.ACTIVEXパッケージをインポートし、ActiveXObjectオブジェクトを生成します。この際、ProgIdにGoogleEarth.ApplicationGEを指定します。

{import * from CURL.GRAPHICS.ACTIVEX}

{def ge = {ActiveXObject ProgId = “GoogleEarth.ApplicationGE“}}

これにより、IApplicationGEオブジェクトが生成されます。このオブジェクトからバージョン情報を取得する簡単なサンプルは以下の通りです。（IApplicationGEのゲッターであるVersionMajor、VersionMinor、VersionBuild、VersionAppTypeを利用）

{output ge.VersionMajor & “.” & ge.VersionMinor & “.” & ge.VersionBuild}
{output ge.VersionAppType}

これだけでは面白くないので、カメラ位置を設定して、いろいろな場所へ移動できるようにしてみます。まずは、カメラ・オブジェクト（ICameraInfoGE）をIApplicationGEのGetCameraメソッドから取得します。このICameraInfoGEのいくつかのセッターを設定し、再度IApplicationGEオブジェクトにカメラをセットすることで場所の移動が可能となります。

|| カメラの取得
def ge-cam = {ge.GetCamera 0}

|| カメラのプロパティに値をセット
set ge-cam.FocusPointLatitude = 35.3800 || 緯度
set ge-cam.FocusPointLongitude = 139.0000 || 軽度
set ge-cam.FocusPointAltitudeMode = 2 || 1 or 2
set ge-cam.FocusPointAltitude = 1000.0 || 高度(meter)
set ge-cam.Range = 1000.0 || カメラとフォーカスポイントの距離(meter)
set ge-cam.Tilt = 80.0 || 傾き
set ge-cam.Azimuth = 90 || 方位

|| カメラをIApplicationGEにセット
{ge.SetCamera ge-cam, 0.5}

また、目的地の場所から移動することができます。これにはGetFeatureByNameメソッドを利用し、IFeatureGEオブジェクトを取得し、存在すればSetFeatureViewで移動します。例えば以下のようにディズニーランドに飛んでみます！

def feature = {ge.GetFeatureByName “アメリカフロリダ州、ディズニーランド”}
{if-non-null feature then
{ge.SetFeatureView feature, 10.0} || 場所の移動
{ge.ShowDescriptionBalloon feature} || バルーンの表示
}

実行しますと、ディズニーランドに飛びます。

Google Earth上の画面左の検索・場所・レイヤを操作することもできます。これにはSearchController（検索）やGeｔMyPlace（場所）等を用いて、操作できます。例えば検索の例は以下の通りです。

def search = ge.SearchController || ISearchControllerGEの取得
{search.Search “東京タワー”} || 検索
def feature-collection = {search.GetResults} || 検索結果の取得
{dump {feature-collection.Item 1}.Name}

さらに「場所」にある”観光”名所をツアーすることもできます。これには、以下のようなコードにて実現できます。

def tour = ge.TourController || ツアーオブジェクト
{tour.PlayOrPause} ||画面左の「観光」をツアー

最後に3DオブジェクトをGoogle Earth上に配置する方法を記載します。Google Earth上に配置されるオブジェクトはKML（Keyhole Markup Language）というフォーマット形式で記述された情報を元に作成されます。これにはGoogle SketchUpを利用し、作成することができます。またGoogle 3D Galleryからダウンロードすることもできます。

ここではそれらから作成されたファイルをCurlで開きます。コードは以下のようになります。（たった一行）

{ge.OpenKmlFile “C:\doc.kml”, true}

これを実行しますと以下のように3Dオブジェクト（車）が配置されます。

ユーザインターフェース

Curl で 3D

3D空間をCurlでどのように作成するかをご紹介します。

１．Sceneとは？

Sceneは3D空間を提供するグラフィックAPIです。

２．Sceneを作成する方法

Sceneを作成する方法は簡単で、Sceneオブジェクトをインスタンス化するのみです。もちろんこのままではSceneで見えるものはなにもありません。

let my-scene:Scene={Scene}

3.作成したSceneの中にオブジェクトを作成し加える方法

オブジェクトをSceneに追加するには、Sceneのメソッドである add-object を使用します。（削除するときは remove-objectメソッドを使用します。）

標準APIに組み込まれているSceneに加えられるオブジェクトは3つあります：Triangle, Quad, Polygonset

独自のオブジェクトを作成したい場合は SceneObject　もしくは上記3点のオブジェクトを継承して作成することが可能です。

他にも、TextSceneObjectのように３D空間にテキストを置くためのクラスがあります。

また、PolygonSetに光を当てたい場合は、SceneObject を継承した SceneLight を実装します。（SceneLightには直接継承しているサブクラスとして PointLight, SpotLight, DirectionalLight があります。）

{let my-scene:Scene = {Scene}}
{my-scene.add-object my-object}

４．Sceneを表示させる方法

最も簡単にSceneを表示させる方法は、Graphic を継承した SceneGraphic を使うことです。

{let scene-graphic:SceneGraphic =
{SceneGraphic
my-scene,
width= 20cm,
height= 20cm,
border-width = 5cm,
border-color=”black”,
background = {FillPattern.get-black}
}
}

５．視点の移動方法

すべてのSceneは Camera オブジェクトを持っています。Scene の camera メソッドを使用することで色々な視点を切り替えることが可能です。

６．光を当てる方法

Curlでは、SceneLightsクラスを使用し、３種類の光を提供しています：PointLight（電球のような光）, SpotSlight（円錐内の原点から発せられる光線）, DirectionalLight（方向性を持つ複数の光線）の3種類です。

他のオブジェクトと同様に、SceneLightはSceneに追加します。SceneLightは自分自身を描画しませんが、その光によってオブジェクトが光っていることが確認できると思います。尚、現時点ではPolygonSetのみがSceneLightに対応しています。

７．マウスクリック等のイベントを取得する方法

SceneObject は EventTarget を継承しているので、マウスクリックやポインタイベントに反応させるためには、EventHandlersを設定することが必要です。EventHandler の作成の際に、SceneEvent を継承したものを使う場合が多くなります（PointerPress ではなく PointerPressSceneEvent を使用する、等）。

８．複数のSceneObjectをグループ化する方法。

SceneGroup を使って複数のSceneObjectをグループ化します。add-object メソッドを使い SceneObject を追加していきます。

そして、そのSceneGroup を Scene に追加すれば終わりです。

SceneGroupを使用するメリットとして、複数の SceneObject の制御、管理を一括で行うことが挙げられます。

ソースサンプル

３Dソースサンプル

リフレクションの利用

Curlでのリフレクションの使用方法について記載していきます。そもそもリフレクションとはCurlのクラスからメソッドやゲッターの情報を取得するAPIのことです。また、取得したメソッド等を実行することができます。

リフレクションを利用するためには、CURL.LANGUAGE.REFLECTIONというパッケージをインポートする必要があります。

{import * from CURL.LANGUAGE.REFLECTION}

まず当機能を説明するにあたって以下のクラス（Foo）を例にとっていきたいと思います。

{curl 6.0 package}
{package COM.CURLAP.TEST}

{define-class public open Foo

field private _a:String
field private _b:int

{getter public {a}:String
{return self._a}
}

{getter public {b}:int
{return self._b}
}

{constructor public {default
                          a:String,
                          b:int
                      }

    set self._a = a
    set self._b = b
}

{method public open {display}:void

{dump self._a, self._b}
}
}

文字列からインスタンス作成

文字列のパッケージ名やクラス名からオブジェクトを生成する方法を下のソースコードをもとに説明していきます。

文字列（”COM.CURLAP.TEST”）から、Packageクラス（パッケージのクラスです。）のオブジェクトを生成するため、ComponentSelectorを利用します。この生成されたPackageオブジェクトから、その中に含まれるクラスやプロシージャを取得するため、get-memberメソッドを文字列のクラス名（”Foo”）を指定して実行します。get-memberメソッドはPackageMemberをかえします。

このPackageMemberのget-valueを利用し、ClassTypeクラスのオブジェクトを取得します。そのClassTypeからget-constructorを用いてConstructorを取得できますので、newメソッドを利用し、Fooクラスのオブジェクトを生成できます。

    || Package
    let p:Package =
        {import-package
            {ComponentSelector name = “COM.CURLAP.TEST”}
        }

    || PackageMember
    let m:#PackageMember = {p.get-member “Foo”}

|| ClassType
let t:ClassType = {m.get-value}

|| Constructor
let c:#Constructor = {t.get-constructor “default”}

|| オブジェクトの生成
{dump {c.new “xxxx”, 999}}

オブジェクトからクラス名等の名前を取得

オブジェクトからクラス名やメソッド名、ゲッター・セッター名等を取得する方法を下のソースコードをもとにご説明します。

最初に、Fooオブジェクトを通常通り生成します。このFooオブジェクトのゲッターとメソッドの情報をリフレクションを利用し、取得することとします。

リフレクションの利用にあたってまずはFooオブジェクトのClassTypeオブジェクトをtype-ofマクロを用いて取得します。パッケージ名を取得するには、このClassTypeオブジェクトのpackage.nameアクセッサーを利用することで取得できます。次のゲッターやメソッドを取得するため、ClassType.get-membersメソッドを利用します。この際、ゲッターならClassMember.getter-filterをメソッドならClassMember.method-filterをキーワード引数のfilterに指定します。これによりすべてのゲッター名やメソッド名を取得することができます。

また、上記で取得した名前を元に、{ClassType.get-getter ゲッター名}でGetterオブジェクトを取得し、そのget-valueメソッドで値を主時できますし、{ClassType.get-method “メソッド名”}でMethodオブジェクトを取得し、invokeメソッドでメソッドを実行することができます。

    let foo:Foo = {Foo “foo-foo-foo”, 1234}

    || ここからリフレクション！
    let t:ClassType = {type-of foo} asa ClassType
    {dump t.package.name} || パッケージ名の表示

    || getter
    {for m in {t.get-members
                  filter = ClassMember.getter-filter}
     do
        def getter-name = m.name
        def getter:Getter = {t.get-getter getter-name} asa Getter
        {dump getter-name, {getter.get-value foo}}　|| ゲッター名とその値の表示

    }

    || method
    {for m in {t.get-members
                  search-superclasses? = false,
                  filter = ClassMember.method-filter}
     do
        def method-name = m.name
        def method:Method = {t.get-method method-name} asa Method
        {dump method-name, {method.invoke foo}} || メソッド名とその値の表示

    }

もちろんその他、セッターやプロシージャ等々の情報も取得し、実行することができます。

Curlでスクリプトの作成

Curlでは、dcurlやcurlのようなアプレット以外に、スクリプトと作成して実行することができます。これにはcurl.exeを利用して、コマンドラインからスクリプトを実行します。以下にサンプルを紹介します。

{curl 6.0 script}

{do
    let v:int = 0
    {for arg in script-args do
        set v = v + {arg.to-int}
    }
    {output v}
}

スクリプトとして作成するにはヘラルドにappletではなくscriptと記載し、ファイル名の拡張子を.xcurlとします。（ここではrun.xcurlで保存しています。）

また、コマンドラインの引数をCurlで受け取るにはscript-args変数で受け取ることができます。上記サンプルでは引数で指定した値をすべて加算するものです。例えば、以下のように実行します。

“c:\Program Files\Curl Corporation\Surge\7\bin\curl.exe” run.xcurl 1 2 3 4

実行結果

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

動作

バージョン

API説明

利用方法

サンプル

関連Curl標準API

バージョン

API説明

利用方法

サンプル

バージョン

API説明

利用方法

サンプル

関連Curl標準API

アコーディオン

DateField（datepicker）

参考ドキュメント

コーディング（Google Earth COM API）

１．Sceneとは？

２．Sceneを作成する方法

3.作成したSceneの中にオブジェクトを作成し加える方法

４．Sceneを表示させる方法

５．視点の移動方法

６．光を当てる方法

７．マウスクリック等のイベントを取得する方法

８．複数のSceneObjectをグループ化する方法。

ソースサンプル

関連ヘルプドキュメント

文字列からインスタンス作成

オブジェクトからクラス名等の名前を取得

関連ドキュメント