ドラッグ＆ドロップ スタイル
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>スタイルシートを保存して閉じます。