製品について

Molecules-FormTextComponent

MoleculesのFormTextComponentについて説明します。 FormTextComponentはBoxComponentとTextComponent(title)、TextComponent(input)の組み合わせです。

Molecules-FormSliderComponent

MoleculesのFormSliderComponentについて説明します。 FormSliderComponentはBoxComponent、BoxSliderComponentとTextComponentの組み合わせです。 テストパラメータの指定に使用しています。FormSliderComponentのテストではタイトルを"text:value"形式で表示しています。 引数はBoxComponent、TextComponent、SliderComponentです。

Molecules-FormSelectComponent

MoleculesのFormSelectComponentについて説明します。 FormSelectComponentはBoxComponentとBoxSelectComponent、TextComponentの組み合わせです。 BoxComponentで親コンポーネントとの相対位置を指定します。BoxSelectComponentでドロップダウンの選択肢を表示します。選択肢にBoxComponentの配置リストを使っています。TextComponentでタイトルを表示します。

Molecules-FormCheckboxComponent

MoleculesのFormCheckboxComponentについて解説します。 FormCheckBoxComponentはBoxComponentとBoxTextComponent、BoxImageComponent、ClickComponentの組み合わせです。 BoxComponentで親コンポーネントとの相対位置を決め、BoxTextComponentでタイトルを表示します。BoxImageComponentでチェックボックスの値CHECKによってON、OFF画像を表示します。ClickComponentでクリック時にCHECKの真偽値を更新します。 入力パラメーターはBoxComponentの配置、幅、高さ、背景色、TextComponentのタイトル、文字の大きさ、色、ClickComponentで更新するCHECKの真偽値です。

Molecules-ClickImagePreviewComponent

MoleculesのClickImagePreviewComponentについて説明します。 ClickImagePreviewComponentはClickImageComponentとほとんど同等です。画像にはテストのプレビュー実行と停止、パラメーターの設定ボタンを指定しています。ボタン画像の作成のためImageComponentを２つ使用しています。ClickImagePreviewComponentはClickComponentとImageComponent(window)、ImageComponent(action)で構成しています。 画像２つの調整は用いる画像毎に別々に行えるようにComponentを以下のようにそれぞれ分けました。 ClickImageSettingsPreviewComponent ClickImageStartPreviewComponent ClickImageStopPreviewComponent 単純に一つの画像クリックを行う場合はClickImageComponentを使用できます。

Molecules-ClickItemComponent

MoleculesのClickItemComponentについて説明します。 ClickItemComponentはClickComponentと任意のComponentの組み合わせです。   ClickComponentはstd::function<void()>型を用いてクリックイベント時に任意の関数を実行します。ClickItemComponentはClickComponentの子要素に任意のComponentを子要素にして指定したComponentのクリック時の動作を実現しています。 Kotaroではstd::functionを使ってイベントハンドラに関数処理を委譲したり、コンポーネントの構成処理の委譲も行います。Componentの実装ではstd::functionを使った委譲を理解する必要があります。 委譲のイディオムはjavascriptでもよく使われる一般的なものです。関数の定義を行い、インスタンス化して別のスコープに渡して、そこで実行します。 次の例ではjavascriptのクロージャオブジェクトをクリックイベントハンドラに渡して委譲を行なっています。 var click = ()=>{ var hoge="hoge"; return ()=>{console.log(hoge); }; <Button onClick=click()/> オブジェクトを渡してメソッドを実行するのと同じですが、オブジェクトの所有権は渡した先に移します。 C++ではstd::moveを使って委譲を実装できます。std::unique_ptrはムーブ可能でコピー禁止なので、std::moveとstd::unique_ptrを使って委譲のイディオムを堅牢で効率よく実装できます。 javascriptの例ではonClickに委譲するオブジェクトの型は指定していません。C++ではstd::functionを使用してさらに委譲処理を抽象化し、javascriptのような抽象的な委譲を簡単に実装できます。 class Click{ void operator( )( ){ std::cost << hoge...