UIは、オープンソースで提供されるCurl標準コントロールを拡張したユーザビリティ向上のためのUI部品群です。License2.0で提供されるため、商用でも非商用でも自由に利用でき、またカスタマイズして利用することもできます。当オープンソースプロジェクトにも参加していただき、おもしろいライブラリを追加していただけると幸いです。SourceForgeからダウンロードできます。Wikiから見ることができます。各コントロールの詳細な利用方法はこちらのページを参照ください。UIAdvanced-UIサンプルAdvanced-UIを使用したサンプルの動画です。サンプルの実行、ダウンロードはこちらから。UIポップアップ画像ビューア動作LigthBoxのようなポップアップする画像ビューアーです。0.5API説明ImagePopupButtonクラスポップアップ画像ビューアを作成するクラスです。Image”という画像が表示されます。Image”という画像が表示されます。“”):同一グループの表示画像を一連で表示します。(同一名称の画像を、画像上のPrev、Nextボタンで順に表示します。””を指定した場合は、Applet内の全lightbox-popup-buttonがグループとなります。“”):サムネイル画像上にマウスがある時に表示されるTooltipメソッドなし利用方法ポップアップ画像ビューアを利用するには、ImagePopupButtonにURLを指定して作成します。グループが存在する場合は、画像上部の右側、もしくは、左側にマウスを移動した際に表示される、Prev、Nextボタンで、順に表示することができます。Prev、Next動作は、左矢印キー、右矢印キーでも行えますし、表示画像はCloseボタン、もしくは、ESCキーで閉じることができます。回転木馬のようにメニューを回転させて選択することがてきます。0.5API説明CarouselクラスパッケージCOM.CURLAP.ADVANCED-UI.UTILS利用方法とても簡単。Carouselクラスのコンストラクタの引数に表示したい画像(Pixmapオブジェクト)を渡すだけ。70}.pixmap}引数で渡された画像を”いい感じ”に自動配置しくるくる回ります。正六面体の各面がFrameになっており、画面遷移の際に3D表示になってダイナミックにアニメーションしながら回転します。0.5API説明CubeFrameクラス画面遷移の際に3Dの正六面体になってダイナミックにアニメーションしながら画面遷移します。※初期設定ではメニューボタンの位置はキューブフレームの上側になります。インデックスで指定した画面に画面遷移します。メニューボタンを表示しない場合、このメソッドを使用してアニメーションさせる事ができます。引数1(index:int):遷移先の画面のインデックスButtonPlacement(列挙型)メニューボタンの位置情報を持ちます。ボタンアイコン画像の位置は名称ラベルの上側になります。ボタンアイコン画像の位置は名称ラベルの下側になります。ボタンアイコン画像の位置は名称ラベルの左側になります。ボタンアイコン画像の位置は名称ラベルの右側になります。各面に設定するフレーム、メニューボタンの位置を設定してキューブフレームを作成します。UIオシレーティングボタン動作ボタンにフォーカスを当てたり、ポインタを合わせるとボタンアイコン画像が振動するコマンドボタンです。ボタンをクリックするとひときわ大きく振動します。0.5API説明OscillatingButtonクラスボタンにフォーカスイン、または、ボタン上にポインタを乗せるとボタンのアイコンが振動します。ボタンをクリックするとひときわ大きく振動します。※初期設定ではボタンアイコン画像の位置は名称ラベルの右側になります。LabelImagePlacement(列挙型)ボタンアイコン画像の位置情報を持ちます。ボタンアイコン画像の位置は名称ラベルの上側になります。ボタンアイコン画像の位置は名称ラベルの下側になります。ボタンアイコン画像の位置は名称ラベルの左側になります。ボタンアイコン画像の位置は名称ラベルの右側になります。ボタンアイコン画像の位置は名称ラベルに重なります。利用方法ボタンアイコン画像、名称ラベルを設定してオシレーティングボタンを作成します。UIアニメーションボタン動作ボタンにフォーカスを当てたり、ポインタを合わせるとボタンアイコン画像の大きさが変化するコマンドボタンです。0.5API説明AnimationButtonクラスボタンにフォーカスイン、または、ボタン上にポインタを乗せるとボタンのアイコンが大きくなります。ボタンからフォーカスアウト、または、ボタン上からポインタを離すとボタンのアイコンは元に戻ります。※初期設定ではボタンアイコン画像の位置は名称ラベルの右側になります。LabelImagePlacement(列挙型)ボタンアイコン画像の位置情報を持ちます。ボタンアイコン画像の位置は名称ラベルの上側になります。ボタンアイコン画像の位置は名称ラベルの下側になります。ボタンアイコン画像の位置は名称ラベルの左側になります。ボタンアイコン画像の位置は名称ラベルの右側になります。ボタンアイコン画像の位置は名称ラベルに重なります。利用方法ボタンアイコン画像、名称ラベルを設定してアニメーションボタンを作成します。do{exit}}}このサンプルでは、ドロップダウンリストから値を選択しますと、ボタンアイコン画像の位置が変更されます。キャプチャ(記録)し、記録した操作を自動的に再生できます。Curl言語として操作内容が保存され、カスタマイズすることも可能です。これはテストや自動デモなどで利用することができます。現時点では、COM.CURLAP.ADVANCED-UI.TOOLSパッケージをインポートすることで利用できます。各コントロールやフレームにはtest-nameというプロパティを持っていますので、一意の名前をセットしてください。(将来的には利用方法が変更となる可能性があります。COM.CURLAP.ADVANCED-UI.TOOLSを記述することで、自動的に記録・再生のビューが起動します。このCaptureタブのstartボタンを押下することで記録が開始されます。記録が開始されている時点でメイン画面の操作を行います。操作の記録を終了したい場合は、stopボタンを押下し、記録内容をファイルとして保存します。再度画面を読み込み、testタブのplayボタンを押下し、先ほど保存したファイルを選択いたしますと、先ほどの操作が自動的に実行されます。注意)Curlの仕様により、現バージョンでは、View、Dialog、dcurlに対する記録及び再生を行うことはできません。当画面を変更したい場合は、直接オープンソースを変更し、改変することができます。(以下がキャプチャされたソースコードです。動作フレームが、ニュース・テロップやスライドショー、マーキー(marguee)のようにローテートされるコンポーネントです。現在のフレームRotatorCanvasクラスRotatorのCanvasクラスです。void利用方法RotateCanvasにローテートするフレームを渡して、フレームをローテートさせます。ローテートしますとRotateEventが発生します。0.001s}}各種フレームがローテートします。多くのビューを開いている際、画面外にさっと掃くことができます。0.5API説明SweepWindowクラスViewを画面外に掃くクラスです。“すぃ~と”スクロールするスクロールボックスです。0.5API説明SlideScrollBoxクラスパッケージCOM.CURLAP.ADVANCED-UI.CONTAINERS利用方法とても簡単。SlideScrollBoxクラスのコンストラクタの引数にスライドさせたいオブジェクトを渡すだけ。TEst2”}}}引数で渡されたオブジェクトを”いい感じ”にすぃ~とスクロールして表示します。反射しているように見せるフレームです。0.5API説明ReflectImageクラスパッケージCOM.CURLAP.ADVANCED-UI.UTILS利用方法とても簡単。ReflectImageクラスのコンストラクタの引数に反射したい画像(PixmapオブジェクトかURL)を渡すだけ。“./images/logo_curl.gif”}}引数で渡された画像を”いい感じ”に反射させたようにして表示します。UIドリルダウン・リストボックス動作ドリルダウン式にリストの値を変化させれるリストボックスです。0.5API説明DrillDownListBoxクラスドリルダウンをするリストボックスのクラスです。指定したノードへドリルダウンします。現在のノードから1つ親ノードへドリルアップします。指定したノードへドリルアップします。引数1(node:DrillDownNode):ドリルダウンするノード戻り値:voidDrillDownEventクラスドリルダウンしたイベントのクラスです。ドリルダウンしたノードDrillDownLeafEventクラスドリルダウンしたイベントで、リーフに到達した場合に発生するイベントのクラスです。(abstract)ドリルダウンのデータの抽象クラスです。(これを継承したクラスにはDrillDownNodeとDrillDownLeafがあります。親のComponentDrillDownNodeクラスドリルダウンのデータクラスです。ドリルダウンノードをchildrenへ追加します。ドリルダウンノードをchildrenから削除します。引数1(com:DrillDownComponent):ドリルダウンデータのノード戻り値:voidDrillDownLeafクラスドリルダウンのデータクラスです。利用方法DrillDownNodeとDrillDownLeafを用いてツリー構造を作成します。このツリー構造のルートを引数にDrillDownListBoxのインスタンスを生成します。do{exit}}}このサンプルでは、リストボックスから値を選択しますと、ドリルダウンをし、その子要素の一覧にリストボックス内の値が変更されます。DownUpMove)を発生させます。本クラスは標準APIのFrameを継承しているため、基本的にFrameと同じ使い方でインスタンスを作成できます。当たり前ですがマウスジェスチャのイベントを処理するためのイベントハンドラーを作成する必要があります。画像を立体的に見せるフレームです。0.5API説明SolidBorderFrameクラスパッケージCOM.CURLAP.ADVANCED-UI.UTILS利用方法とても簡単。SolidBorderFrameクラスのコンストラクタの引数に目的の画像(URL)を渡すだけ。“./images/normal_lighthouse1.jpg”}}引数で渡された画像を”いい感じ”に立体的に表示します。各コントロールのイベント間でコントロール操作をスパゲッティ状にコーディングすることを避けるため、イベントを一元管理します。これにより、コントロール間の依存関係を排除することができます。0.5API説明EventManagerクラスイベントを一元管理するクラスです。※fromで指定したコントロールのイベントが発生した際、toのイベントを発生させることができます。(管理IDは登録時に取得します。(管理IDは登録時に取得します。(すべての管理するイベントを解除)戻り値:voidNotifyEventクラス呼び出し元のコントロールやイベントをもつ通知Eventです。呼び出し元のイベント利用方法EventManagerのインスタンスを生成し、registerメソッドに呼び出し元のコントロールとイベント、呼び出すコントロールとイベントを引数にセットし、実行します。これにより、呼び出し元のイベントが発生したと同時に、呼び出し先のイベントを起動します。id2}{manager.clear}}}}}RadioFrame(rf)の値が変わったら、TextField(tf1)とTextField(tf2)のNotifyEventが実行されます。TextField2の値を変化させた場合、TextField1のNotifyEventが実行されます。動作Macのメニューのようにポインターの場所によって滑らかに大きさが変化します。クリックしたときの動作を3つ用意しています。0.5API説明FishEyeSubMenuクラス後述するFishEyeMenuBarの中で表示されるアイコンになります。パッケージCOM.CURLAP.ADVANCED-UI.CONTROLSスーパークラスFrameコンストラクタdefault位置引数(urll):表示されるアイコン画像のurlメソッドなしFishEyeMenuBarクラスFishEyeSubMenuを表示し、クリックした場合のイベントやアニメーションを発生させます。パッケージCOM.CURLAP.ADVANCED-UI.CONTROLSスーパークラスHBoxコンストラクタdefaultキーワード引数(default-icon-size):表示されるアイコンのサイズキーワード引数(click-animation:ClickAnimation=”twirl”):アイコンをクリックしたときに発生するイベントの種類(”twirl”,”flash”,”warp”)メソッドなし利用方法FishEyeMenuBarの中にFishEyeSubMenuのインスタンスを必要なだけ生成し、表示します。UIズームテキストフィールド動作TextFieldの内容を入力する際、ズームして入力できる。0.5API説明ZoonTextFieldクラスTextFieldを拡張した入力時に文字とTextFieldがズームされるクラスです。Window”}):ズーム時のDialogのタイトルメソッドなし利用方法ズームテキストフィールドを利用するには、コンストラクタ呼び出し時に上記キーワード引数を指定します。UIOne-click-ファイル選択テキストフィールド動作TextFieldをワンクリックするだけで、ファイル選択メニューが表示されます。オプションとして、ファイルサイズチェックも行います。1000}{spaced-vboxoctf,{TextField}}}選択したファイルのURLが、プロパティで指定したファイルサイズの範囲内であれば、その値をTextFieldにセットします。選択したファイルサイズをチェックするコンポーネントです。ファイルチェックなので、読み取り専用のファイルダイアログになります。ダイアログを表示する最初の場所既定の値です。フィルターをかけるファイル種別です。flg}}}指定したファイルのURLと、そのファイルがプロパティで指定したファイルサイズの範囲内であるかどうかの値を返します。