「オープンソース – Curl Advanced UI」カテゴリーアーカイブ

オープンソース - Curl Advanced UI

バリデーションチェック・フィールド

動作

入力バリデーションチェックをしてくれるTextFieldです。

バージョン

Curl Advanced UI 0.5

API説明

ValidationTextFieldクラス

バリデーションチェックのTextFieldクラスです。

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

MultiUIValueControlFrame-of

コンストラクタ

default
    キーワード引数（ui-object:#ValidationTextFieldUI = null）：ValidationtextFieldのUI
    キーワード引数（ok-image:#Url = null）：バリデーションチェックOKのイメージ
    キーワード引数（ng-image:#Url = null）：バリデーションチェックNGのイメージ

メソッド

なし

利用方法

ValidationTextFieldのインスタンスを生成します。バリデーションチェックはvalidate-withマクロを利用し、指定します。

{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 Normal TextField},
        {TextField
            {validate-with
                {NumericValidator}, required? = true
            },
            {on e:ValidationComplete at v:TextField do
                {if v.valid? then
                    {dump e, v}
                }
            }
        },

        {text ValidationTextField},
        {ValidationTextField
            {validate-with
                {NumericValidator},
                required? = true,
                dialog-on-finished? = false
            }
        },

        {ValidationTextField
            prompt = “Just numeric value.”,
            ok-image = {url “images/1.png”},
            ng-image = {url “images/5.png”},
            height = 2cm,
            width = 10cm,
            font-size = 1cm,
            color = “red”,
            {validate-with
                {NumericValidator},
                required? = true,
                dialog-on-finished? = false
            },
            || NOTE: v:CoreTextField (not ValidationTextField)
            {on e:ValueFinished at v:CoreTextField do
                {dump e, v.value}
            }
        }

}
}

TextFieldに入力しますとバリデーションチェックが行われ、チェックがOKであればok-imageが表示され、NGであれば、ng-imageが表示されます。

サンプル

バリデーションチェック

ガイドプロンプト

動作

TextFieldやTextAreaなどのコントロールに、入力ガイドプロンプトを表示する。

バージョン

Curl Advanced UI 0.5

API説明

CoreTextFieldクラス

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

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextField

コンストラクタ

default
    キーワード引数（prompt:#String = null）：プロンプト文字列
    キーワード引数（prompt-color:FillPattern = “grey”）：プロンプト文字列の色
    キーワード引数（prompt-background = “white”）：プロンプト文字列の背景色

メソッド

なし

CoreTextAreaクラス

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

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

TextArea

コンストラクタ

メソッド

なし

CoreDateFieldクラス

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

パッケージ

COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

DateField

コンストラクタ

メソッド

なし

利用方法

ガイドプロンプトを利用するには、コンストラクタ呼び出し時にprompt, prompt-color, prompt-backgroundを指定します。

{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 Normal TextField},
        {TextField},
        {TextField prompt = “入力してね。”},

        {text GuidePrompt TextField},
        {CoreTextField},
        {CoreTextField prompt = “入力してね。”},
        {CoreTextField prompt-background = “pink”},
        {CoreTextField control-content-background = “pink”},
        {CoreTextField
            prompt = “入力してね。”,
            prompt-color = “red”,
            prompt-background = “pink”,
            control-content-background = “yellow”,
            color = “green”
        },

        {text Normal DateField},
        {DateField},
        {DateField prompt = “入力してね。”},

        {text GuidePrompt DateField},
        {CoreDateField},
        {CoreDateField prompt = “入力してね。”},
        {CoreDateField prompt-background = “pink”},
        {CoreDateField control-content-background = “pink”},
        {CoreDateField
            prompt = “入力してね。”,
            prompt-color = “red”,
            prompt-background = “pink”,
            control-content-background = “yellow”,
            color = “green”
        },

        {text Normal TextArea},
        {TextArea},
        {TextArea prompt = “入力してね。”},

        {text GuidePrompt TextArea},
        {CoreTextArea},
        {CoreTextArea prompt = “入力してね。”},
        {CoreTextArea prompt-background = “pink”},
        {CoreTextArea control-content-background = “pink”},
        {CoreTextArea
            height = 2cm,
            width = 2cm,
            prompt-color = “white”,
            prompt-background = {url “images/curl-waves-32.gif”}
        }

}
}

サンプル

ガイドプロンプト

サムネイル作成

動作

簡単にサムネイル画像を作成することができます。

バージョン

Curl Advanced UI 0.5

API説明

create-thumbnailプロシージャ

サムネイルを作成するプロシージャです。

    引数1（v:Frame）：サムネイルの対象となるフレーム
    戻り値：Pixmap サムネイルのPixmap

パッケージ

COM.CURLAP.ADVANCED-UI.UTILS

create-thumbnail-to-urlプロシージャ

  サムネイルを作成するプロシージャです。ファイルとして保存します。

    引数1（v:Frame）：サムネイルの対象となるフレーム
    引数2（save-url:Url）：サムネイル画像の保存先
    キーワード引数（mime-type:String = “image/jpeg”）：mime type
    戻り値：void

パッケージ

COM.CURLAP.ADVANCED-UI.UTILS

利用方法

create-thumbnailもしくはcreate-thumbnail-to-urlプロシージャを利用して、サムネイル画像を作成します。

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

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

{value
    def v =
        {Frame
            valign = “top”,
            {spaced-vbox
                background = “pink”,
                {TextField width = 3cm},
                {ComboBox width = 3cm},
                {CommandButton label = “test”}
            }
        }

    def frame =
        {Frame width = 5cm, height = 5cm,
            {spaced-vbox
                v,
                {CommandButton
                    label = “pixmap”,
                    {on Action do
                        {create-thumbnail-to-url v,
                            {url “images/thumbnail.jpg”}}
                        def view =
                            {View {Frame width = 3cm, height = 2cm,
                                      background = {create-thumbnail v}}}
                        {view.show}
                    }
                }
            }
        }

    def tab-container =
        {TabContainer
            {TabPane
                {Frame valign = “top”,
                    {spaced-vbox
                        background = “pink”,
                        {TextField width = 3cm},
                        {text font-size = 28pt, 1}
                    }
                }
            },
            {TabPane
                {Frame valign = “top”,
                    {spaced-vbox
                        background = “yellow”,
                        {TextField width = 3cm},
                        {text font-size = 28pt, 2}
                    }
                }
            },
            {TabPane
                {Frame valign = “top”,
                    {spaced-vbox
                        background = “red”,
                        {TextField width = 3cm},
                        {text font-size = 28pt, 3}
                    }
                }
            }
        }

    {spaced-vbox
        {text test1},
        frame,
        {text test2},
        {spaced-vbox
            tab-container,
            {CommandButton
                label = “show thumbnails”,
                {on Action do
                    def thumbnails = {{Array-of Frame}}
                    {for tp in tab-container.tab-panes do
                        {thumbnails.append
                            {Frame width = 5cm, height = 2cm,
                                border-width = 2pt, border-style = BorderStyle.double,
                                background = {create-thumbnail (tp.content asa Frame)}}
                        }
                    }
                    def view =
                        {View width = 10cm, height = 10cm,
                            {spaced-vbox {splice thumbnails}}}
                    {view.show}
                }
            }
        }
    }
}

RadioFrame(rf)の値が変わったら、TextField(tf１)とTextField(tf2)のNotifyEventが実行されます。また、TextField2の値を変化させた場合、TextField1のNotifyEventが実行されます。

オープンソース - 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