「ユーザインターフェース」カテゴリーアーカイブ

ユーザインターフェース

DataTimeデータを用いたチャート

※v8.0からサポートされました。

SimpleDateTimeAxis クラスが追加されています。 これは、チャートに DateTime のデータを利用する為のものです。

 

{SimpleDateTimeAxis.default
    label-group:ChartLabelGroup = {ChartLabelGroup},
    axis-group:Shape = {ShapeGroup},
    axis-line-group:Shape = {ShapeGroup},
    major-tick-group:Shape = {ShapeGroup},
    minor-tick-group:Shape = {ShapeGroup},
    …
}

新しい SimpleDateTimeAxis を作成します。
　label-group: ChartAxis.label-group の初期値。
　axis-group: ChartAxis.axis-group の初期値。
　axis-line-group: ChartAxis.axis-line-group の初期値。
　major-tick-group: ChartAxis.major-tick-group の初期値。
　minor-tick-group: ChartAxis.minor-tick-group の初期値。
　…: Shape が受け取る引数のいずれか。これらは主に、オプションの初期化を表すキーワード引数です。

http://developers.curlap.com/curl/v8/simpledate/help/help.curl

http://developers.curlap.com/curl/v8/simpledate/mychart.curl

 

 

ユーザインターフェース

Activeドキュメントコンテナ

※v8.0からサポートされました。

Microsoft Excel® などのActiveドキュメントサーバから提供されるActiveドキュメント(.xlsファイルなど)をCurlアプレットに埋め込んで表示できるようになりました。

 

{ActiveXObject.default
    ProgId:#String = null,
    ClsId:#String = null,
    FileExtension:#String = null,
    DataFile:#String = null,
    initial-url:#Url = null,
    initial-read-only?:bool = false,
    …
}:ActiveXObject

以下の引数が追加されました。

initial-url: 起動時にロードするように COM オブジェクトに指示するローカルファイルの Url。ローカルファイルでない場合は例外が発生します。

initial-read-only?: initial-url は、読み取り専用でロードされなければなりません。

ローカルに存在するエクセルファイルをCurlオブジェクト内に描画するサンプルです。

 http://developers.curlap.com/curl/v8/excel_activex.curl

 

 

ユーザインターフェース

グラフカスタマイズ-円グラフのカスタマイズ

Curlでは様々なグラフが提供されており、また色々とカスタマイズが可能ですが、どのようにカスタマイズしたらよいか悩んでいる人もいるのではないでしょうか。

このシリーズでは、円グラフのカスタマイズ例をご紹介していきます。

まず、Curlの円グラフはPieSetとPieChartから構成されています。

簡単に説明するとPieSetが実際の円グラフで、PieChartはその円グラフを入れる箱のようなものです。

今回はPieSetで使用されるラベルと凡例のカスタマイズ方法をご紹介します。

まず、円グラフの元となるデータを下記の形式で設定します。

let rs:RecordSet = 　{RecordSet
                               {RecordFields
                                   {RecordField
                                       “Event”,
                                       domain = String
                                   },
                                   {RecordField
                                       “Risk”,
                                       domain = double
                                   },
                                   {RecordField
                                       “Number”,
                                       domain = int64
                                   }
                               },
                               {RecordData Event = “むぎ茶”, Risk = 25.0, Number = 250},
                               {RecordData Event = “玄米茶”, Risk = 50., Number = 500},
                               {RecordData Event = “烏龍茶”, Risk = 12.5, Number = 125},
                               {RecordData Event = “緑茶”, Risk = 12.5, Number = 125}
                           　}

次に円グラフとなるPieSetを作成します。少し長いですが、ポイントはコメントで記述してあります。

    let pieset:PieSet = {PieSet
                            rs,
                            “Risk”,
                            ||枠線の色
                            wedge-group =
                                {ShapeGroup
                                    border-color = “white”
                                },
                            ||ラベルに使用するデータ
                            label-data =
                                {ChartDataSeries rs, “Event”},
　　　　　　　　　　　　　　　　||ラベルの作成
                            label-factory = {proc {pie-set:PieSet,
                                                   set-label:#String,
                                                   data-label:#String,
                                                   value-label:#String,
                                                   position:Distance2d,
                                                   data:ChartDataSeries,
                                                   record:Record,
                                                   record-index:int,
                                                   inner-radius:Distance,
                                                   outer-radius:Distance,
                                                   total-radius:Distance,
                                                   start-angle:Angle,
                                                   stop-angle:Angle
                                                  }:Shape　　　||返却の型がShapeなので文字以外でも画像等をラベルに指定することも可能です

                                                let font-col:FillPattern = “#222222” ||まず、基本の文字色を宣言します
                                                {if record[“Risk”] asa double >= 25 then ||Risk項目が25%以上であれば、文字色を赤に設定します
                                                    set font-col = “red”
                                                }
                                               
                                                {return
                                                    {TextShape
                                                        font-size = 10pt,
                                                        color = font-col,
                                                        halign = “center”,
                                                        valign = “center”,
                                                        translation = position,　||文字の配置は、この部分で変更できます
                                                        {non-null data-label}
                                                    }
                                                }
                                            },
                            ||凡例の表示
                            legend-enabled? = true,
                            ||凡例の作成
                            legend-entry-factory =  {proc {chart:Chart,
                                                           data-series:ChartDataSeries,
                                                           record:#Record,
                                                           color:FillPattern,
                                                           legend-index:int
                                                          }:Graphic
                                                        let font-col:FillPattern = “black”
                                                        {return
                                                            {HBox
                                                                valign = “center”,
                                                                 ||%に連動した棒グラフを作成しています
                                                                {Fill
                                                                    width = (record[“Risk”] asa double * .5pt) + 10pt,
                                                                    height = 8pt,
                                                                    background = color, ||色は円グラフの色と連動しています
                                                                    border-width = 0px
                                                                },
                                                                {Fill width = {make-elastic minimum-size = 20pt}},
                                                                ||%が25%以上のデータに対しては、文字列を赤く変更しています
                                                                {if-non-null record then
                                                                    {if record[“Risk”] asa double >= 25 then
                                                                        set font-col = “red”
                                                                    }
                                                                    {HBox
                                                                        color = font-col,
                                                                        {TextFlowBox
                                                                            width = 50pt,
                                                                            {data-series.field.domain.format
                                                                                record[data-series.field.name]
                                                                            }
                                                                        },
                                                                        {TextFlowBox width = 40pt, record[“Number”] & “件”},
                                                                        {TextFlowBox width = 30pt, {String record[“Risk”]} & “%”}
                                                                    }
                                                                 else
                                                                    data-series.field.caption
                                                                }
                                                            }
                                                        }
                                                    }
                        }

最後に円グラフを入れる箱となるPieChartを作成します。 

    {let testpiechart:PieChart = {PieChart
                                     width = 15cm,
                                     height = 10cm,
                                     pieset
                                 }
    }

 このPieChartを表示するとカスタマイズされた円グラフが表示されます。

 

ちなみに、カスタマイズしていない凡例とラベルの場合は下記のようになります。

 

 

あまり派手な変化ではないですが、このように凡例とラベルの変更は、PieSet作成時に設定することができます。

 次の記事では、この円グラフに対してよりインタラクティブな機能を持たせる方法をご紹介します。

ユーザインターフェース

グラフカスタマイズ-インタラクティブな円グラフ

Curlでは様々なグラフが提供されており、また色々とカスタマイズが可能ですが、どのようにカスタマイズしたらよいか悩んでいる人もいるのではないでしょうか。

このシリーズでは、円グラフのカスタマイズ例をご紹介していきます。

まず、Curlの円グラフはPieSetとPieChartから構成されています。

簡単に説明するとPieSetが実際の円グラフで、PieChartはその円グラフを入れる箱のようなものです。

 今回は、PieSetを継承して作成した、マウスオーバーをするとその項目がハイライトされるInterractivePieSetをご紹介します。

API説明

InteractivePieSetクラス

マウスオーバーした領域をハイライトします。

パッケージ

COM.CURLAP.ADVANCED-CHART

スーパークラス

PieSet

プロパティ

sample-color-array:{Array-of FillPattern}　色を保持するフィールド

highlight-color:FillPattern　ハイライトした際の色

コンストラクタ

default
引数1(records:RecordSet)  表示用データ
引数2(major:String)          円の比率を決定する基準レコード名
引数3(event-name:String) 凡例に用いるレコード名

下記の引数は任意になります
引数4(colors:{Array-of FillPattern} = self.sample-color-array) 円グラフの色
引数5(highlight-color:FillPattern = “red”) ハイライトする色（独自色）
引数6(just-hilight?:bool = true)ハイライトの際に、ただ色を薄くするだけかの判断
引数7(wedge-border-color:FillPattern = “white”)円グラフを縁取る色

メソッド

なし

利用方法

InteractivePieSetとして宣言します。独自の引数のほかに、PieSetの引数も使用することが可能です。 
今回は、円グラフのカスタマイズの記事で使用したPieSetを引用してInteractivePieSetを宣言します。

 

    let pieset:InteractivePieSet= {InteractivePieSet
                            rs,
                            “Number”,
                            “Event”,
                            ||ここから下の引数はPieSetと同じです
                            ||枠線の色
                            wedge-group =
                                {ShapeGroup
                                    border-color = “white”
                                },
                            ||ラベルに使用するデータ
                            label-data =
                                {ChartDataSeries rs, “Event”},
　　　　　　　　　　　　　　　　||ラベルの作成
                            label-factory = {proc {pie-set:PieSet,
                                                   set-label:#String,
                                                   data-label:#String,
                                                   value-label:#String,
                                                   position:Distance2d,
                                                   data:ChartDataSeries,
                                                   record:Record,
                                                   record-index:int,
                                                   inner-radius:Distance,
                                                   outer-radius:Distance,
                                                   total-radius:Distance,
                                                   start-angle:Angle,
                                                   stop-angle:Angle
                                                  }:Shape　　　||返却の型がShapeなので文字以外でも画像等をラベルに指定することも可能です

                                                let font-col:FillPattern = “#222222” ||まず、基本の文字色を宣言します
                                                {if record[“Risk”] asa double >= 25 then ||Risk項目が25%以上であれば、文字色を赤に設定します
                                                    set font-col = “red”
                                                }
                                               
                                                {return
                                                    {TextShape
                                                        font-size = 10pt,
                                                        color = font-col,
                                                        halign = “center”,
                                                        valign = “center”,
                                                        translation = position,　||文字の配置は、この部分で変更できます
                                                        {non-null data-label}
                                                    }
                                                }
                                            },
                            ||凡例の表示
                            legend-enabled? = true,
                            ||凡例の作成
                            legend-entry-factory =  {proc {chart:Chart,
                                                           data-series:ChartDataSeries,
                                                           record:#Record,
                                                           color:FillPattern,
                                                           legend-index:int
                                                          }:Graphic
                                                        let font-col:FillPattern = “black”
                                                        {return
                                                            {HBox
                                                                valign = “center”,
                                                                 ||%に連動した棒グラフを作成しています
                                                                {Fill
                                                                    width = (record[“Risk”] asa double * .5pt) + 10pt,
                                                                    height = 8pt,
                                                                    background = color, ||色は円グラフの色と連動しています
                                                                    border-width = 0px
                                                                },
                                                                {Fill width = {make-elastic minimum-size = 20pt}},
                                                                ||%が25%以上のデータに対しては、文字列を赤く変更しています
                                                                {if-non-null record then
                                                                    {if record[“Risk”] asa double >= 25 then
                                                                        set font-col = “red”
                                                                    }
                                                                    {HBox
                                                                        color = font-col,
                                                                        {TextFlowBox
                                                                            width = 50pt,
                                                                            {data-series.field.domain.format
                                                                                record[data-series.field.name]
                                                                            }
                                                                        },
                                                                        {TextFlowBox width = 40pt, record[“Number”] & “件”},
                                                                        {TextFlowBox width = 30pt, {String record[“Risk”]} & “%”}
                                                                    }
                                                                 else
                                                                    data-series.field.caption
                                                                }
                                                            }
                                                        }
                                                    }
                        }

このInteractivePieSetをPieChartにセットして表示させると結果は下記のようになります。

 

サンプル

円グラフサンプル

＊Version7で作成しています。ランタイムのダウンロードはこちらから。

ユーザインターフェース

RecordSet大量更新の高速化

RecordSetを大量更新する際、更新毎に更新イベントが発生します。これを一時的に回避することで、何十倍もしくはそれ以上、高速になります。

以下がサンプルになります。大量更新をするロジックをwithブロックで囲み、RecordSetのbatch-events?セッターにtrueをセットします。

 

def rs = {RecordSet …….} || RecordSet定義
{with rs.batch-events? = true do
    {for r in rs do
        || RecordSetの更新ロジック
    }
    {rs.commit} || 更新をcommit
}

 

ユーザインターフェース

RecordGridのセルフォーカスをEnterキーで移動する

RecordGridのセルフォーカスをEnterキーで移動するにはRecordGridCellのカスタマイズが必要です。

以下のサンプルソースをご覧ください。

 

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

{define-class public EnterKeyCell {inherits StandardStringCell}

  {constructor public {default}
    {construct-super}
  }

  {method public {create-editor}:TextField
    let editor:TextField = {super.create-editor}

    ||セル上で操作するテキストフィールドに対して、
    ||Enterキーのイベントを追加する。
    {editor.add-event-handler
        {on e:KeyPress at tf:TextField do
            {if e.value == KeyPressValue.enter
             then
                {self.grid.ui.traverse forward? = not e.shift?}
                   
            }
        }
    }

    {return editor}
   
  }
}

{let people:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField “First”, domain = String},
            {RecordField “Last”, domain = String},
            {RecordField “Age”, domain = int}
        },
        {RecordData First = “John”, Last = “Smith”, Age = 25},
        {RecordData First = “Jane”, Last = “Smith”, Age = 29},
        {RecordData First = “Jane”, Last = “Jones”, Age = 28}
    }
}
{value
    {RecordGrid
        record-source = people,
        height = 3cm,
        cell-spec = EnterKeyCell
    }
}

 このサンプルを実行すると、以下のような実行結果が得られます。

サンプルでEnterキーを押下すると、グリッド上のセルフォーカスが移動します。

 enter.jpg

 

 

ユーザインターフェース

RecordGridのセルに色をつける

RecordGridで任意のセルに色をつけたい場合は、RecordGridCellをカスタマイズする必要があります。

ここでは、データを更新したセルに色をつける実装方法について紹介します。

サンプルソース

{define-class public ColorCell {inherits StandardStringCell}

  {constructor public {default}
    {construct-super}
  }

  ||セルの色を制御するにはrefresh-dataメソッドを
  ||オーバーライドします。
  {method public {refresh-data}:void

    ||スーパークラスのメソッドを呼び出します。
    {super.refresh-data}

    {if-non-null record:Record = self.record
     then
        ||当該セルのデータが更新された場合に、
        ||背景色を設定します。
        {if {record.field-pending-update? self.column.field-name}
         then
            set self.background = “pink”
        }
    }
   
  }

 
}

{let people:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField “First”, domain = String},
            {RecordField “Last”, domain = String},
            {RecordField “Age”, domain = int}
        },
        {RecordData First = “John”, Last = “Smith”, Age = 25},
        {RecordData First = “Jane”, Last = “Smith”, Age = 29},
        {RecordData First = “Jane”, Last = “Jones”, Age = 28}
    }
}

||データを更新します。
{do
    let r:Record = {non-null {people.select-one}}

    {r.set “Last”,”Update”}
}

{value
    {RecordGrid
        record-source = people,
        height = 3cm,
        ||cell-specで上記で作成したセルを指定します。
        cell-spec = ColorCell
    }
}

これを実行すると、以下のような結果が表示されます。データを編集すると、編集したセルの色がピンクになります。

colorcell.jpg

 

ユーザインターフェース

RecordGridのformat-specの使用法

RecordGrid.format-specはグリッド上における値の表示方法を制御するためのプロシージャです。format-specを利用することで、簡単にマスタデータの参照が行えるようになります。 

サンプルコード：

||参照する元のデータを取得します。
{let people:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField “id”,domain = int},||データを一意にするIDを付加します。
            {RecordField “First”, domain = String},
            {RecordField “Last”, domain = String},
            {RecordField “Age”, domain = int}
        },
        {RecordData id = 1,First = “John”, Last = “Smith”, Age = 25},
        {RecordData id = 2,First = “Jane”, Last = “Smith”, Age = 29},
        {RecordData id = 3,First = “Jane”, Last = “Jones”, Age = 28}
    }
}

||値を入力する枠を作成します。
{let list:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField “id”,domain = int}
        },
        {RecordData},
        {RecordData},
        {RecordData}
       
    }
}

{bold 元のデータ}

{RecordGrid
    record-source = people,
    height = 3cm
}

{bold format-spec利用後}

{value
    {RecordGrid
        record-source = list,
        height = 3cm,
        automatic-columns? = false,
        {RecordGridColumn “id”},
        {RecordGridColumn
            “id”,
            ||cells-take-focus?を指定して
            ||直接編集できないようにします。
            cells-take-focus? = false,
            ||format-specを利用して表示するデータを取得します。
            format-spec =
                {proc {val:any}:String
                    ||
                    let r:#Record =
                        {people.select-one
                            filter = {RecordData id = val}
                        }
                   
                    {return
                        {if-non-null r
                         then
                            ||peopleにデータが存在した場合はデータを表示します。
                            {String r[“First”] , ” ” , r[“Last”]}
                         else
                            ||存在しなかった場合は空の文字列を返します。
                            “”
                        }
                    }
                }
        }
    }
}

 

このコードを実行し、下のグリッドにidを入力すると、変数peopleに登録されているFirstとLastの値が2列目に表示されます。

実行結果

 format-spec.jpg

 

 

 

 

 

 

ユーザインターフェース

特権のエラー表示を回避する方法

特権が必要なアプレットを実行するときに、ユーザーは特権をつけ忘れてしまう場合が多くあります。
その際に、無機質な赤文字の警告をユーザーに見せることを回避する方法をお伝えします。
特権が付いているかどうかを判断するには

{process-privileged?}

を使います。
これを起動アプレット(多くの場合は start.curl だと思います。）のマニフェスト直下に置きます。以下に簡単な例を示します。

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{applet
manifest = “manifest.mcurl”,
{compiler-directives careful? = true}
}
{value
{if not {process-privileged?} then
{popup-message “特権がありません！”}
{exit}
}

…

上記のように、特権が与えられていない場合の振る舞いの動作をアプリの最初の呼び出しの箇所で定義することで、赤い画面が表示されることが回避されます。

以下のサンプルで試してみてください。

(developers.curlap.com)に特権がついていない場合は、ダイアログが表示され、該当アプリは停止します。

サンプルアプリケーション

特権が必要なアプリケーション(start.curl)

特権が必要なアプリケーション(zip)

ユーザインターフェース

コントロールの作成3

アコーディオン

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

accordion01.jpg

アコーディオンを作成するために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に標準で装備されています。

datefield01.jpg

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

{DateField}

参考ドキュメント

タブコンテナ

 

ユーザインターフェース

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

関連ヘルプドキュメント

３Dグラフィック

シーン





ユーザインターフェース

コントロールの作成2

タブコンテナの作成

タブコンテナは一組の情報をいくつかのサブセットに編成します。
各サブセットはコントロール内で別々のペインに表示されます。
以下に簡単なサンプルをご紹介します。

以下にソースを示します。

{TabContainer
    {TabPane
        {text font-size = 28pt, 1}
    },
    {TabPane
        {text font-size = 28pt, 2}
    },
    {TabPane
        {text font-size = 28pt, 3}
    }
}

TabContainerはTabPaneを含みます。TabPaneは、ペインに表示されるコントロールと、
ペインの概観および動作を制御するいくつかのオプションを提供します。
TabPaneを含まないTabContainerを作成し、後からアプレットでペインを追加することもできます。
上記の例は、コンストラクタに3つのTabPaneを追加する、簡単なTabContainerを作成しています。

テキストフィールドの作成

TextFieldを使用すると、テキストをダイアログもしくはアプレットに入力することができます。
TextFieldは一度にテキストを一行表示します。
以下に簡単なサンプルをご紹介します。


以下にソースを示します。
{let last-event:Frame =
    {Frame width = 4in, margin = 2px, background = “silver”}
}
{let field:TextField =
    {TextField
        {on e:Action at tf:TextField do
            {last-event.add replace?=true,
                {format “event=%s value=\”%s\””, e, tf.value}
            }
        },
        {on e:DialogEvent at tf:TextField do
            {last-event.add replace?=true,
                {format “event=%s value=\”%s\””, e, tf.value}
            }
        }
    }
}
 
{HBox spacing = 6px,
    field,
    {CommandButton
        label = “Set Value”,
        {on Action do
            set field.value = “new value”
        }
    },
    last-event
}

テキストフィールドに入力するとTextFieldのvalueプロパティが変化し、TextField自身がTextFieldイベントを
起動します。テキストフィールド内で切り抜き、コピーまたは貼り付けを行うと、ValueChangedが起動します。
また、ENTERキーを押すと、ValueFinishedイベントが起動した後にTextField自身がActionイベントを起動し、
値の入力が完了したと解釈します。

テキスト領域の作成

TextFieldはテキストの一行のみの表示でしたが、TextAreaを使用すると複数行のプレーンテキストを
ダイアログもしくはアプレットに入力することができます。TextAreaはテキストの入力だけでなく、表示も
サポートしています。表示する複数行のテキストが所定のスペースに入りきらない場合は、
垂直スクロールバーが表示されます。
以下に簡単なサンプルをご紹介します。

以下にソースを示します。

{let experience:any,
    vb:VBox = {VBox}
}
{spaced-vbox
    background = {FillPattern.get-beige},
　　{text Describe your prior experience in the space below:},
    {TextArea
        height = 2cm,
        prompt = “PRIOR EXPERIENCE: “,
        || Attach dynamic event handler
        {on ValueFinished at ta:TextArea do
            set experience = ta.value
            {vb.add
                {text
                    color = “blue”,
                    {value experience}
                }
            }
            {popup-message
                modal? = true,
                vb
            }
        }
    }
}

TextAreaのvalueプロパティの現在値は、TextArea内の現在のテキストと関連づけられています。
これをプログラムから設定すると、表示されているテキストも変化します。
入力したテキストは自動的に次の行へ折り返されます。TextAreaの形状が変化するとそれに伴って
再び折り返されます。明示的に改行を入力した場合、その改行は保持されます。
TextFieldとは異なり、TextAreaはENTERキーを押してもActionやイベントは起動せず、値の入力が
完了したとは解釈しません。代わりに、カーソルを次の行に移動してさらにデータを入力できるように
します。テキストの入力を終了するには、ウィンドウの他の部分をマウスでクリックしてフォーカスを
TextAreaの外へ移動する必要があります。
この動作によりValueFinishedイベントが起動されます。

スクロールボックスの作成

スクロールボックスは、表示したいグラフィカルオブジェクトがコンテナに完全に収まらない場合に、
コンテンツを圧縮せずに水平または垂直スクロールバーを提供します。
以下に簡単なサンプルをご紹介します。


以下にソースを示します。
  {ScrollBox

    width = 5cm,
    height = 3cm,
    {Frame
        width = 7cm,
        {text
            {paragraph
                The {monospace ScrollBox} class is used to
                contain a graphical object and provide
                horizontal and/or vertical scroll bars should
                the entire graphical object not fit entirely
                within the container.
            }
            {paragraph
                The {monospace ScrollBox} class is used to
                contain a graphical object and provide
                horizontal and/or vertical scroll bars should
                the entire graphical object not fit entirely
                within the container.
            }
            {paragraph
                Graphical options specific to the {monospace
                ScrollBox} include:
            }
        }
    }
}

ScrollBoxは、子グラフィックと呼ばれるグラフィカルオブジェクトを含むFrameの１つの型です。
したがって、直接複数の子オブジェクトを含むことができません。

ProgressBarの作成

プログレスバーは、アプリケーションで時間のかかる操作の進捗状況を視覚的に表すコントロールです。
処理の進行速度と、処理がどの程度完了しているかがわかります。
以下に簡単なサンプルを示します。

以下にソースを示します。

{let max:double = 700}
{let simple-bar:ProgressBar =
    {ProgressBar
        width = 5cm,
        min-value = 0,
        max-value = max,
        value = 0,
        caption = “Press Start to Begin”,
        {on e:ValueChanged at pb:ProgressBar do
            set pb.caption = pb.percent-complete & “%”
            {pb.update-view}
        }
    }
}
{HBox
    “Progress:”,
    simple-bar,
    {CommandButton
        label = “Start”,
        {on Action at cb:CommandButton do
            {with-busy-cursor
                {for i = 1.0 to max do
                    {simple-bar.set-value-with-events i}
                    || 待機時間を作ります。
                    {sleep .01s}
                }
            }
        }
    },
    {CommandButton
        label = “Show Popup”,
        {on Action do
            {popup-message “Message”}
        }
    }
}

一般的に、アプリケーションがファイルのコピーやドキュメントの印刷などのタスクを実行する際に
使用されます。ユーザーは、視覚的な表示がないとアプリケーションが応答していないと考える
場合があります。アプリケーションでProgressBarを使用すると、アプリケーションが長時間の
タスクを実行していて、応答中であることを示すことができます。

関連ヘルプドキュメント

「Curl開発者ガイド→グラフィカルユーザーインターフェイス→タブコンテナ」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→テキストコントロール→テキストフィールド」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→テキストコントロール→テキスト領域」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→グラフィカルコンテナ→フレーム→スクロールボックス」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→その他のコントロール→プログレスバー」

ユーザインターフェース

チャートの作成

チャートとは、グラフを表すオブジェクトです。グラフの種類は大きく分けて、Ｘ，Ｙ座標を使用して２次元でプロットするグラフと、円グラフの２種類あります。

基本的なグラフの作成方法

以下のようなグラフを作成する簡単なサンプルをご紹介します。

ソースを以下に示します。

{curl 6.0 applet}           

{curl-file-attributes character-encoding = “shift-jis”}
{applet manifest = “manifest.mcurl”,
    {compiler-directives careful? = true}

}

{import * from CURL.GUI.CHARTS}

||データの作成
{let records:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField　“name”,caption = “名前“,domain = String　},
            {RecordField　“age” ,caption = “年齢“,domain = int　}
        },
        {RecordData name = “John”,    age = 25},
        {RecordData name = “Jane”,    age = 29},
        {RecordData name = “Julie”,   age = 12},
        {RecordData name = “Josh”,    age = 58},
        {RecordData name = “Jon”,     age = 6},
        {RecordData name = “Damian”, age = 30},
        {RecordData name = “Nova”,    age = 41},
        {RecordData name = “Gabriel”, age = 35}
    }
}
 
||表示
{value
    {ShapeBox
        width = chart.width,
        height = chart.height,
        chart
    }
}

 

||チャートの作成
{let chart:LayeredChart =
    {LayeredChart
        width = 15cm,
        height = 6cm,
        {BarLayer
            {ChartDataSeries records, “age”},
            x-axis-data = {ChartDataSeries records, “name”},
            {DataSeriesColorPair
               {ChartDataSeries records, “age”},
                FillPattern.orange
            }
        },
        {LineLayer
            {ChartDataSeries records, “age”}
        },
        {ScatterLayer
            {ChartDataSeries records, “age”},
            {DataSeriesColorPair
                {ChartDataSeries records, “age”},
                FillPattern.orange
            }
        }
    }

}

グラフを作成するには、Chartクラスを使用します。
また、グラフのデータはRecordSetに入力してから使用する必要があります。
LayeredChartは、Ｘ座標とＹ座標を使用して２次元でデータをプロットするグラフです。棒グラフや折れ線グラフなどのグラフは、ChartLayerオブジェクトによって実装されます。ChartLayerオブジェクトは、データおよびそのプロット方法を定義するための抽象クラスであるため、実際にはLineLayer,AreaLayer,ScatterLayer,BubbleLayer,BarLayerといったグラフレイヤをLayeredChartに追加することにより実装します。また、１つ以上のChartLayerオブジェクトを用い、より複雑なグラフを作成することもできます。
上記の例では、以下のグラフレイヤを使用して複数のグラフを表しています。
　・BarLayer(棒グラフ)
　・LineLayer(折れ線グラフ)
　・ScatterLayer(散布図)

円グラフの作成方法

次に、以下のような簡単な円グラフを作成するサンプルをご紹介します。

以下はサンプルソースです。

{curl 6.0 applet}

{curl-file-attributes character-encoding = “shift-jis”}

{applet manifest = “manifest.mcurl”,

    {compiler-directives careful? = true}

}

{import * from CURL.GUI.CHARTS}

||データの作成

{let records:RecordSet =

    {RecordSet

        {RecordFields

            {RecordField “name”,caption = “名前“,domain = String},

            {RecordField “age” ,caption = “年齢“,domain = int}

        },

        {RecordData name = “John”,   age = 25},

        {RecordData name = “Jane”,   age = 29},

        {RecordData name = “Julie”,  age = 12},

        {RecordData name = “Josh”,   age = 58},

        {RecordData name = “Jon”,    age = 6},

        {RecordData name = “Damian”, age = 30},

        {RecordData name = “Nova”,   age = 41},

        {RecordData name = “Gabriel”,age = 35}

    }

}

||グラフ作成

{AntialiasedFrame

    {PieChart

        width = 10cm,

        height = 10cm,

        {PieSet

            records,

            “age”,

            label-data = {ChartDataSeries records, “name”}

        }

    }

}

円グラフはPieChartを使用して作成します。基本的なグラフを作成する際、ChartLayerを用いてLayeredChartを構成したのと同様に、PieChartはPieSetオブジェクトを用いて構成します。また、PieChartに複数のPieSetを追加した場合は、最初のPieSetが中央に、それ以外のPieSetが追加された順に同心円状に配置されたグラフになります。

サンプルではRecordSetにデータを入力していましたが、データベースサーバーからのデータをConnectedRecordSetに入力してグラフ化することもできます。
RecordSetとConnectedRecordSetの使用については、下記をご参照ください。
「Curl開発者ガイド→データの管理と表示」

関連ヘルプドキュメント

「Curl開発者ガイド→グラフ」

ユーザインターフェース

高さや幅の自動伸長・圧縮設定

従来の企業システムのクライアントサーバーアプリケーションやデスクトップアプリケーションでは画面のサイズを固定（変更できないように）してエンドユーザーに提供していたものが多くありました。それは技術的にユーザーの操作によってレイアウト変更が生じた場合、中で表示されているコンテンツの配置を制御することが非常に難しく工数がかかるため提供側として断念していたという実態があります。
しかし昨今ブラウザベースのWebアプリケーションに企業システムも移行されてきて自由にブラウザのサイズを変更することが当たり前になり、提供側（開発側）はブラウザの制御を実装するのが大変になりました。その結果、スクロールを多用して見づらい画面になってしまっていました。
CurlはElastic(日本語でいうとゴムひも)という伸張圧縮技術をもっています。Curlで表現できるグラフィックオブジェクトの幅や高さにElasticを設定するとユーザーの操作に応じて自動的に伸張したり圧縮したりできます。そのため開発者はグラフィックコンテンツを作るのに幅や高さに対する制御に神経を使うことなく柔軟なレイアウトが実現できる画面を簡単に作成することができます。

make-elasticプロシージャの使い方

グラフを表示する簡単なサンプルをご紹介します。
以下のようにグラフが表示されますがブラウザのサイズを変更してもあわせて自動的に伸び縮みします。

elastic0.jpg

 

 

以下にそれぞれのボタンを使用したサンプルソースを紹介します。

{document-style PlainDocument}

||–データ部
{let records:RecordSet =
    {RecordSet
        {RecordFields
            {RecordField
                “region”,
                caption=”地域”,
                domain = String
            },
            {RecordField “M1”, caption = “1月”, domain = int},
            {RecordField “M2”, caption = “2月”, domain = int},
            {RecordField “M3”, caption = “3月”, domain = int}
        },
        {RecordData region = “東京”, M1 = 100, M2 = 140, M3 = 130 },
        {RecordData region = “名古屋”, M1 = 110, M2 = 140, M3 = 170},
        {RecordData region = “大阪”, M1 = 140, M2 = 100, M3 = 130},
        {RecordData region = “福岡”, M1 = 160, M2 = 190, M3 = 140}
    }
}

||–チャート
{let chart:LayeredChart =
    {LayeredChart
||–        width = 10cm,
||–        height = 6cm,
        {BarLayer
            stacking-mode = ChartStackingMode.stacked,
            {ChartDataSeries records, “M1”},
            {ChartDataSeries records, “M2”},
            {ChartDataSeries records, “M3”},
            x-axis-data = {ChartDataSeries records, “region”}
        }
    }
}

||–表示部分
{value
    {ShapeBox
        margin=5pt,
        width={make-elastic preferred-size=1m},
        height={make-elastic preferred-size=1m},
        chart
    }
}

 

上記の例ではデータ定義とチャート定義、表示部分があります。
チャートの作り方とデータ（RecordSet）については以下を参照ください。

　「Curl開発者ガイド　→　データの管理と表示」
　「Curl開発者ガイド　→　グラフ」

チャートに固定の大きさを指定した場合はブラウザの大きさを変更しても大きさは変更されませんが、チャートを含んでいるShapeBoxのwidthとheightの部分が”make-elastic”プロシージャを使用しています。”make-elastic”プロシージャを使用すると自動的に親のオブジェクトに合わせて自動的に伸張・圧縮することができます。
一方、オブジェクトの幅と高さの動作を指定したい場合もあります。その場合は固定の高さ・幅（例えば10ptや1mなどのDistance）を設定します。

複合的な画面の設定

次のサンプルではmake-elastricプロシージャを使って、いくつかのグラフィカルオブジェクトを組み合わせてそれぞれのオブジェクトのサイズの割合を制御するものです。
通常Curlで作られる画面では複数のグラフィカルオブジェクトが組み合わさって作られます。
以下の例ではグラフィカルオブジェクトが階層構造になっています。
この画面は青のFrameと黄色のFrameが常に１：４の割合で伸張圧縮します。
したの白黒の部分は１：４を確認するためのスケールとしてHBoxにFillを組み合わせて作っています。白黒のFillは等間隔で伸張します。

elastic1.jpg

下のように画面サイズをユーザーが変更すると常に１：４で青と黄色のFrameが伸張圧縮するのが分かると思います。

elastic2.jpg

 

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
{document-style PlainDocument}

{value
    {VBox
        width={make-elastic preferred-size=10cm},
        margin=5pt,
        background=”red”,
        {HBox
            margin=5pt,
            background=”green”,
            width={make-elastic
                      preferred-size=10cm},
            {Frame
                background=”blue”,
                height={make-elastic},
                width={make-elastic
                          stretchiness=1
                      }
            },
            {Frame
                background=”yellow”,
                height={make-elastic},
                width={make-elastic
                          stretchiness=4
                      }
            }
        },
　　　　
        {HBox
            margin=5pt,
            background=”aqua”,
            {Fill height=5mm, width={make-elastic preferred-size=1cm},background=”white”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”black”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”white”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”black”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”white”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”black”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”white”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”black”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”white”},
            {Fill height=5mm,width={make-elastic preferred-size=1cm},background=”black”}
        }}
}

ソースコードを見ると全体を伸張させるために赤のVboxと緑のHBoxのwidth（幅）にそれぞれmake-elasticプロシージャが設定されていますが青のFrameと黄色のFrameのwidth(幅)へのmake-elasticプロシージャの設定にはstrechinessというパラメータが設定されています。
このstretchinessというパラメータは日本語でいいますと「伸張係数」といいますが分かりやすく言いますと伸張圧縮の割合を設定することができます。
青の設定は“１”で黄色の設定は“４”となっており、つまり１：４の割合で伸張圧縮することになります。
それぞれの値を変更すると伸張圧縮のしかたが変わりますので色々試してみてください。
そのほかにも様々なパラメータがありますのでヘルプCurl開発者ガイドで確認してみてください。

 

サンプルコードのダウンロード

 サンプルソース

関連ヘルプドキュメント

Curl開発者ガイド→グラフィカルユーザーインターフェイス→エラスティックとページレイアウト
 

ユーザインターフェース

スタイルコントロールの使い方

スタイルコントロールは、Curlのバージョン6.0から追加された機能です。

スタイルコントロールを使うことにより、簡単にCurlアプレットの見た目（色やグラデーション）を自由に変更することができます。

１．スタイルコントロールのインストールとダウンロード

スタイルコントロールのインストールとダウンロードについては、「クイックスタート：デザインを変更してみる　～　スタイルコントロールの利用」を参照してください。

２．新規プロジェクトの作成と、スタイルシートの適用

IDEの[ファイル]→[新規プロジェクトの作成]を選択し、2番目のアプレット プロジェクトを選択してください。以下のように設定を行います。

マニフェスト名＝スタイルシートサンプル
ディレクトリ＝c:curlstyle-control-sample
APIバージョン=6.0

[スタイル シート の設定]を選択し、スタイル シートの使用にチェックを入れます。パッケージ、コンポーネント名については既定のままで結構です。

上記の設定後、[OK]ボタンを押します。

start.curlには、スタイル シート適用に必要な以下の2文が記述されているかと思います。

{import * from COM.CURL.GUI-STYLED-CONTROLS}

{install-style-sheet
{manifest-url “file”, “DEFAULT-STYLE-SHEET”}
}

まだこの段階でアプレットを実行してもエラーが出てしまいます。スタイル コントロールの機能を使うには、必ずスタイルコントロールライブラリのマニフェストファイルを、プロジェクトのデリゲート先に追加しなければいけません。

IDE の [プロジェクト] から [デリゲート先の追加] を選択してインストールしたスタイルシートのマニフェストファイル(manifest.mcurl）を指定してください。

start.curlに以下のコードを追加します。

{TextField} これは TextField です

{CommandButton} これは CommandButton です

これは RichTextArea です{br}
{RichTextArea height = 2in}

これはTabPaneです
{TabContainer
{TabPane
{text font-size = 28pt, 1}
},
{TabPane
{text font-size = 28pt, 2}
},
{TabPane
{text font-size = 28pt, 3}
}
}

保存し、実行してみます。
いかがでしょうか？下図のようにスキンが適用されている画面が見えるかと思います。

３．スタイルシートのカスタマイズ

次に、スタイルシートのカスタマイズとその適用方法をご紹介します。

Curl.incでは、見ばえのカスタマイズを簡単に行うことができるツール（スタイルデザイナー）を提供しています。

このツールを使って独自のスタイルシートを作成してみましょう。

スタイルデザイナー

下図は、スタイルデザイナーの画面紹介です。

style-designer-disp.jpg

左側のプロパティ変更パネルを操作すると、右側の結果確認パネルにその変更が反映されます。

一通りの設定が終わりましたら、[File]→[Write Style Sheet]をクリック、書き込みを許可するポップアップが出てきますので、OKを選択します。（＊http://developers.curl.comに特権をつけてない場合にこのポップアップがでてきます。特権の設定方法については「チュートリアル：セキュリティの設定（特権設定）」を参照してください。）

ファイル名＝my-style-sheet
ディレクトリ＝c:curlstyle-control-sample

としてファイルを保存します。以下のようなポップアップが出てきた場合は、[OK]を押してください。（ここでは、特権についての説明は省略します。）

C:curlstyle-control-sample直下にmy-style-sheet.scurlが作成されていることを確認してください。

次に、プロジェクトにもどり、プロジェクトのマニフェストファイル（manifest.mcurl)に以下のコードを追加します。このことにより、作成したファイルの位置情報がこのプロジェクトに登録されます。（マニフェストの詳細は、ヘルプドキュメントを参照）

{component file MY-STYLE-SHEET,
location = “my-style-sheet.scurl”
}

start.curlに移り、

{install-style-sheet
{manifest-url “file”, “DEFAULT-STYLE-SHEET”}
}

の部分を

{install-style-sheet
{manifest-url “file”, “MY-STYLE-SHEET”}
}

に変更します。

マニフェストファイル、start.curlファイル共に保存し、実行します。

いかがでしょうか？先ほどと違う色、グラデーションで見えていますでしょうか？

以上がスタイルシートの作成、適用方法です。

サポートバージョン

Curl ver 6.0以上

関連ヘルプドキュメント

ユーザインターフェース

透明な画面

Curlアプレットの透明な画面（View）の作り方です。これはCurl6.0からViewの不透明度を設定することが可能になり実現することができるようになりました。これにより透けたViewを作ることができます。

利用するにはViewクラスのset-opacityメソッドを利用します。

{View.set-opacity opacity:FloatFraction}

この一行を実行するだけで任意の透明度のViewが作成できます。opacityには、0（完全な透明）から1（不透明）を指定できます。

transparent01.jpg

 

全ソースコード 

{curl 6.0 applet}

{import * from CURL.GUI.SHAPES}
{value
    def view =
        {View
            visibility = “normal”,
            width      = 10cm,
            height     = 10cm,
            background = “blue”,
            valign     = “center”,
            halign     = “center”,
            {italic
                font-weight = “bold”,
                font-size   = 25pt,
                color       = “white”,
                View Opacity Sample
            }
        }
    {view.set-opacity .6 asa float}
    {view.show}
}

 

サポートバージョン

Curl6.0以上

 

ユーザインターフェース

グラフィカルコンテナ

グラフィカルコンテナとはグラフィカルインターフェースを作成するときに使用するコンテナつまり箱です。グラフィカルコンテナの中にテキストやイメージ、メニュー、コントロールを含めることができます。HTMLの場合はframeというものがありますがそのようにエリアを割り付けたりする場合にも使えますし、グラフィカルコンテナに含まれるコンテンツを自動的に並べたりすることもできます。通常、「画面」を作る場合は最初にグラフィカルコンテナを配置し、その中にコントロールなどのコンテンツを配置していくことが一般的です。

グラフィカルコンテナの種類

グラフィカルコンテナは主に以下のようなものを良く使います。左のVBoxとHBoxは中に入るコンテンツ（コントロールとかイメージなど）を簡単に縦方向、横方向に並べてくれます。Frameは写真のフレームスタンドと同じようなイメージで中のコンテンツを入れ替えて使う場合に良く使います。また、座標指定でコンテンツを配置できるCanvasなども良く使われますが、動的に画面のサイズが変更されるような場合はあまり適しておらず、画面サイズが固定の場合に使用されます。

 

graphical-container01.jpg

Frame

以下にFrameを使用して中のコンテンツ（テキスト）をレイアウトするサンプルソースを紹介します。

{curl 6.0 applet}

{Frame
    background = “yellow”,
   “Curl’s Tutorial Tours”
}
{Frame
   width = 2in,
   height = 1in,
   background = “yellow”,
   “Curl’s Tutorial Tours”
}

Frameは１つのコンテンツを含むことができます。上記の例では”Curl’s Tutorial Tours”という文字列を含めています。Frameやその他のグラフィカルコンテナには上記のwidth(幅)やbackground(背景色)などさまざまな見た目を変更するためのオプションも用意されています。

VBoxとHBox

以下にVBoxとHBoxを使用して中のコンテンツ（RectangeleGraphicという四角い箱）を並べるサンプルソースを紹介します。

{curl 6.0 applet}

{HBox
   {RectangleGraphic
       width = 1cm,
       fill-color = “blue”,
       height = 1cm
   },
   {RectangleGraphic
       width = 1cm,
       fill-color = “red”,
       height = 1cm
   }
}
{VBox
   {RectangleGraphic
       width = 1cm,
       fill-color = “blue”,
       height = 1cm
   },
   {RectangleGraphic
       width = 1cm,
       fill-color = “red”,
       height = 1cm
   }

}

VBoxは中のコンテンツを上から縦方向に並べることができます。逆にHBoxは左から横方向にコンテンツを並べます。どちらのコンテナも中に含めるコンテンツをいくつも持つことができるので動的に中に入るコンテンツが変わる場合などは非常に便利です。ちなみに動的にコンテンツを追加する場合は”add”というメソッドを使用すると追加することができます。

サンプルコードのダウンロード

Frameサンプル

VBoxとHBoxのサンプル

関連ヘルプドキュメント

　　Curl開発者ガイド→グラフィカルユーザーインターフェイス→グラフィカルコンテナ

ユーザインターフェース

コントロールの作成1

画面に表示されるコンテンツは色々ありますが、一般的なものとしてはコントロールと呼ばれる「ボタン」、「入力用のテキストコントロール」、「リストコントロール(選択式のコントロール)、さらに「テキスト」、「イメージ」などがあります。Curlにはそれ以外にもアニメーションコンテンツや２Ｄ、３Ｄまで作成することができます。

ボタンの作成

ボタンと言ってもCurlの場合は通常の「押す」だけのボタン以外にも候補の中から複数選択するようなチェックボタンや１つを選ぶ場合のラジオボタンなどがあります。

 

 
以下にそれぞれのボタンを使用したサンプルソースを紹介します。

 

{curl 6.0 applet}
{curl-file-attributes character-encoding = “shift-jis”}
||-コマンドボタンの例
{CommandButton
   label=”Press me！”,
   style =”rollover”
}
{CommandButton
   label = “Don’t press me！”,
   enabled? = false,
  height=.5in
}
||-チェックボタンの例
{VBox
   spacing = 3.5pt,
   {CheckButton
       label = “Uncheck me!”,
       value = true
   },
   {CheckButton
       label = “Can’t select me!”,
       value = true,
       enabled? = false,
       height = 1in,
       background =”yellow”
   }
}
||-ラジオボタンの例
{RadioFrame
   {VBox
       {RadioButton
style=”command-button-standard”,
 label = “Italy”,
 radio-value = “ITY”
},
       {RadioButton label = “Spain”, radio-value = “SPN”},
       {RadioButton label = “Germany”, radio-value = “GMY”}
   },
   value = “SPN”
}

 

 

ボタンはCommandButtonクラスを使用して作成します。 ボタンに表示されるラベルについてはlabelオプションを使用し、スタイルについてはstyleオプションを使用します。standard、 rollover、または  label-only のスタイルから選択できます。それぞれ試してみてください。また、高さ（height） および 幅（width）が指定されていない場合は、ラベルの内容に合わせて、ボタンのサイズが調整されます。
チェックボタンはCheckButtonクラスを使用します。
ボタンと同じようにstyleを設定でき、standard、 label-only、 command-button-standard、または  command-button-rollover のスタイルから選択できます。

状態（チェックされているかされていないか）は”true “または “false “(オンまたはオフ) というbool型になります。
ラジオボタンはRadioButtonクラスを使用しますがラジオボタンを使用するときは「どれか１つを選択する」というインタフェースを作ることが一般的なのでRadioButtonを含むRadioFrame クラスを使用してRadioButtonをまとめます。

オプション等についてはボタンやチェックボタンと基本的に同じです。

 

選択式コントロール

選択式コントロールとはユーザーが表示されたデータなどの中から１つまたはどれかを選ぶコントロールです。以下の図の左のようなリストコントールが一般的なインタフェースだと思いますが右のようなリストボックスの中にチェックボタンが入ったようなものもあります。

 

 
更に複合型の選択式コントロールとして「スピンコンロール」、「カレンダーコントロール」、「スライダ」などもあります。

選択式コントロールの作成

以下に色々な選択式コントロールを使用したサンプルを紹介します。 
select-control.jpg

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

{VBox
   {italic{bold 好きなアクティビティを選択してください。}},
   {ComboBox
       value=”Biking”,
       {ListValueItem “Hiking”,label={text color=”red”, Hiking}},
       {ListValueItem “Biking”,label={text color=”blue”, Biking}},
       {ListValueItem “Kayaking”,label={image
                          source = {url “images/kayaking.jpg”},
                          width = 2cm,
                          height = 1cm
                      }
       }
      
   }
}

{DropdownList
   prompt=”Tシャツの色を選択してください。”,
   width=2in,
   {ListValueItem 1,label={RectangleGraphic fill-color=”red”}},
   {ListValueItem 2,label={RectangleGraphic fill-color=”blue”}},
   {ListValueItem 3,label={RectangleGraphic fill-color=”yellow”}}
}

{spaced-vbox
   {italic{bold 好きなアクティビティを選択してください（複数選択可）}},
   {ListBox
       style=”checkbutton”,
       height=1in,
       {ListValueItem “HIK”,label={text color=”red”, Hiking}},
       {ListValueItem “BIK”,label={text color=”blue”, Biking}},
       {ListValueItem “RAF”,label={text color=”cyan”, Rafting}},
       {ListValueItem “SWM”,label={text color=”purple”, Swimming}},
       {ListValueItem “SKY”,label={text color=”green”, Sky Diving}}

   }
}
 

 上記のサンプルの3種類のコントロールは表示方法が異なります。 ListBoxクラスでは、常にすべての値が直接画面またはページに表示されます。一方、他の 2 種類のコントロールで値を表示するには、通常、最初から表示されているフィールドの右にある小さな矢印をクリックするという操作が必要です。 ComboBoxは、ドロップダウン リストに表示されている値から選択するのではなく、ユーザーが値を直接入力できるテキスト フィールドがあるという点でDropdownListとは異なります。 
上記３つの選択式コントロールには、さまざまな表示オプションを設定できるプロパティがあります。次に挙げるものは一般的に設定されている選択肢の一部です。
注目すべき部分はコントロールに表示されるものが通常は「文字」というのが一般的ですが、Curlの場合は画像や色などといったCurlで表現できるグラフィカルオブジェクトであればほとんどのオブジェクトを表示することができるところです！

select-image-control.jpg

以下にはそれぞれのコントロールに設定できるオプションの代表的なものをご紹介します。

  •  ローカル オプション
    border-style：このオブジェクトの枠線の外観を指定します。
    border-width：このオブジェクトの枠線の幅を指定します。
    height： Dimension を指定し、オブジェクトの元の高さを書き換えます。
    tooltip：この  Visual  にヒントを関連付けます。
    width： Dimension を指定し、オブジェクトの元の幅を書き換えます。
  •  非ローカル オプション
    control-content-background：コントロールのコンテンツに背景色がある場合、これを制御します。コントロールの非ローカル オプションのControlFrame.control-appearance-changeable? が true でない場合は、効果はありません。
    control-color：コントロールのボタンのようなパーツの主要部分の色を制御します。
    enabled?： Graphic  を有効に指定します。
  •  アクセッサ
    label：ボタンに表示できる文字列、イメージ、書式設定されたテキストなどです。
    style：ボタンの視覚的なスタイルです。

その他の選択インタフェース

ユーザーが選択するものは上記で説明したようなチェックボタンやリストボックスだけでなくテキストを反転（ドラッグして選択）させてコピーしたり、イメージを保存したりしますが通常のHTMLベースの画面の場合はテキストの反転を検知したり画像を選択したりすることは難しいと思います。
しかしCurlには個別選択、範囲選択、テキストコントロールの選択をサポートしております。
詳しくは「Curl開発者ガイド→グラフィカルユーザーインターフェイス→選択」を参照してください。

ソースサンプル

関連ヘルプドキュメント

Curl開発者ガイド→グラフィカルユーザーインターフェイス→ボタンコントロール
Curl開発者ガイド→グラフィカルユーザーインターフェイス→リストコントロール