「オープンソース – 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が表示されます。

サンプル

バリデーションチェック 

関連Curl標準API

TextField

 

ガイドプロンプト

動作

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

コンストラクタ

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

メソッド

  なし

CoreDateFieldクラス

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

パッケージ

  COM.CURLAP.ADVANCED-UI.CONTROLS

スーパークラス

  DateField

コンストラクタ

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

メソッド

  なし

利用方法

ガイドプロンプトを利用するには、コンストラクタ呼び出し時に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標準API

TextField
TextArea
DateField

 

サムネイル作成

動作

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

 

バージョン

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(tf1)とTextField(tf2)のNotifyEventが実行されます。また、TextField2の値を変化させた場合、TextField1のNotifyEventが実行されます。

 

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

動作

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

tab1.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

バージョン

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標準API

MultiTabAccordion
TabAccordion
TabContainer

 

ディスクロージャ

動作

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

 

バージョン

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標準API

Frame
CommandButton

 

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

動作

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

 

バージョン

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標準API

ComboBox

 

電卓テキストフィールド

動作

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

 

バージョン

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

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

サンプル

電卓サンプル

関連Curl標準API

TextField

 

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では、カレンダー・コントロールの表示、フォーカス移動を自動的に実施してくれます。(ユーザのマウスクリック動作を軽減することができます。)

サンプル

FromToフィールドサンプル

関連Curl標準API

DateField
Frame

ウィザード

動作

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

 

バージョン

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標準API

Frame

 

アニメーション・ビュー

動作

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

 

バージョン

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を非表示にします。

サンプル

アニメーションビュー

関連Curl標準API

View

 

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

動作

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

vibration1.jpg

 

 

 

 

 

 

 

 

 

 

 

バージョン

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上のすべてのコントロールが震えます。

サンプル

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

関連Curl標準API

Timer
Canvas

 

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

動作

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

key-map1.jpg 

 

バージョン

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

関連Curl標準API

CommandButton
KeyAccel

 

ドメインコントロール

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 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

関連Curl標準API

TextField