ドラッグ＆ドロップスタイル

Platform 4.2 以上が必要

カスタムのドラッグ＆ドロップスタイルの定義

Nexaweb 4.2.x では、アプリケーションの UI で、ドラッグ＆ドロップイベントの表示にカスタムのスタイルを定義できます。

独自のスタイルシートで作成するは、Nexaweb のデフォルトのスタイルシートで使用されるドラッグ＆ドロップスタイルの定義に優先して使用されます。デフォルトのスタイルシートでのドラッグ＆ドロップスタイル定義を編集するよりも、独自のスタイルシートでドラッグ＆ドロップスタイルを定義することをお勧めします。

次のターゲット要素にスタイルを作成して、ドラッグ＆ドロップイベントの表示をカスタマイズします。

ターゲット要素	説明
dragOutline	ユーザーが UI コンポーネントをドラッグする際の輪郭線の表示を指定します。
dropOutline	ドラッグしたアイテムがホバーする際に、ドロップ可能な UI コンポーネントの輪郭線の表示を指定します。

スタイルシートで定義する各スタイルには次のものがあります。

スタイルを適用するターゲット要素のセット。applyTo 属性によって指定されます。
スタイルによる属性定義の対象となる状態のセット。Nexaweb では、ターゲット要素が特定の状態である場合に、指定した属性が適用されます。
各状態に指定した属性

normal の状態のみがこのようなターゲット要素に適用されるため、dragOutline と dropOutline のターゲット要素には、normalの状態のスタイル属性のみを指定できます。

Nexaweb のスタイルシートは XML に基づいており、.XSS拡張子を使用します。Nexaweb Studio のスタイルシートエディタを使用するか、XML エディタでソースを直接編集することによって、スタイルシートを作成および編集できます。スタイルの作成に関する一般情報については、『Nexaweb Studio ガイド』の「スタイルシート」を参照してください。

dragOutline のスタイルの作成

dragOutline ターゲット要素には、normalの状態に使用可能なスタイル関連の属性 (フォント、色、境界線など) を指定できます。

また、次の値を使用して dragMode 属性を指定できます。

dragMode 属性	説明
transparent	dragOutline でコンポーネントを背景なしでレンダリングします。
solid	dragOutline で全コンポーネントを表示されるとおりにレンダリングします。
outline	詳細を表示せずにコンポーネントの輪郭線のみをレンダリングします。

dragOutline にカスタムのスタイルを追加するには、次の手順に従います。

これらのスタイルを追加するスタイルシートを開くか、新規のスタイルシートを開始します。
注: デフォルトのスタイルシートを編集することはお勧めしません。

dragOutline スタイルを次のように作成します。

<style applyTo="dragOutline">
 <normal borderWidth="2" borderStyle="solid" borderColor="green"
bgColor="transparent" dragMode="transparent"/>
</style>

スタイルシートを保存して閉じます。

dropOutline のスタイルの作成

dropOutline ターゲット要素には、normalの状態に使用可能なスタイル関連の属性 (フォント、色、境界線など) を指定できます。

dropOutline にカスタムのスタイルを追加するには、次の手順に従います。

これらのスタイルを追加するスタイルシートを開くか、新規のスタイルシートを開始します。
注: デフォルトのスタイルシートを編集することはお勧めしません。

dropOutline スタイルを次のように作成します。

<style applyTo="dropOutline">
    <normal borderWidth="2" borderStyle="solid" borderColor="red" bgColor="transparent"/>
</style>

スタイルシートを保存して閉じます。