...
...
Defining Custom Drag and Drop Styles
...
...
The custom styles that you create in your own stylesheets override the Nexaweb default stylesheet drag and drop style definitions. Nexaweb recommends that you define drag and drop styles in your own stylesheets rather than editing the drag and drop style definitions in the default stylesheet.
You customize the appearance of drag and drop events by creating styles for the following target elements:
| Target Element | Description |
| dragOutline | Specifies the appearance of the outline of a UI component as a user drags it. |
| dropOutline | Specifies the appearance of the outllne of a droppable UI component as a dragged item hovers above it. |
Each style that you define in a stylesheet contains the following:
- A set of target elements to which the style applies, specified by the applyTo attribute
- A set of states for which the style defines attributes. That is, Nexaweb applies the specified attributes when a target is in the given state.
- The attributes specified for each state
You can specify only normal state style attributes for the dragOutline and dropOutline target elements, as only the normal state applies to these target elements.
Nexaweb stylesheets are XML-based and use a .XSS extension. You can create and edit them using the Nexaweb Studio stylesheet editor or by editing the source directly in an XML editor. For more general information on creating styles, seeStylesheets in the Nexaweb Studio Guide.
Creating a Style for dragOutline
For the dragOutline target element, you can specify any style related attribute (fonts, colors, borders, and so forth) available for the normal state.
In addition, you can specify a dragMode attribute with any of the following values:
| dragMode Attribute | Description |
| transparent | Render the component in the dragOutline with no background. |
| solid | Render the full component in the dragOutline, that is, render it as it appears. |
| outline | Render an outline of the component only with no detail. |
To add a custom style for dragOutline, follow these steps:
...
ターゲット要素 | 説明 |
dragOutline | ユーザーが UI コンポーネントをドラッグする際の輪郭線の表示を指定します。 |
dropOutline | ドラッグしたアイテムがホバーする際に、ドロップ可能な UI コンポーネントの輪郭線の表示を指定します。 |
スタイルシートで定義する各スタイルには次のものがあります。
- スタイルを適用するターゲット要素のセット。applyTo 属性によって指定されます。
- スタイルによる属性定義の対象となる状態のセット。Nexaweb では、ターゲット要素が特定の状態である場合に、指定した属性が適用されます。
- 各状態に指定した属性
Nexaweb のスタイルシートは XML に基づいており、.XSS拡張子を使用します。Nexaweb Studio のスタイルシートエディタを使用するか、XML エディタでソースを直接編集することによって、スタイルシートを作成および編集できます。スタイルの作成に関する一般情報については、『Nexaweb Studio ガイド』の「スタイルシート」を参照してください。
dragOutline のスタイルの作成
dragOutline ターゲット要素には、normalの状態に使用可能なスタイル関連の属性 (フォント、色、境界線など) を指定できます。
また、次の値を使用して dragMode 属性を指定できます。
dragMode 属性 | 説明 |
transparent | dragOutline でコンポーネントを背景なしでレンダリングします。 |
solid | dragOutline で全コンポーネントを表示されるとおりにレンダリングします。 |
outline | 詳細を表示せずにコンポーネントの輪郭線のみをレンダリングします。 |
dragOutline にカスタムのスタイルを追加するには、次の手順に従います。
- これらのスタイルを追加するスタイルシートを開くか、新規のスタイルシートを開始します。
注: デフォルトのスタイルシートを編集することはお勧めしません。
- dragOutline スタイルを次のように作成します。
Code Block <style applyTo="dragOutline"> <normal borderWidth="2" borderStyle="solid" borderColor="green"
...
bgColor="transparent" dragMode="transparent"/> </style>
...
Creating a Style for dropOutline
For the dropOutline target element, you can specify any style related attribute (fonts, colors, borders, and so forth) available for the normal state.
To add a custom style for dropOutline, follow these steps:
...
- スタイルシートを保存して閉じます。
- これらのスタイルを追加するスタイルシートを開くか、新規のスタイルシートを開始します。
注: デフォルトのスタイルシートを編集することはお勧めしません。
- dropOutline スタイルを次のように作成します。
Code Block <style applyTo="dropOutline"> <normal borderWidth="2" borderStyle="solid" borderColor="red"
...
bgColor="transparent"/> </style>
...
- スタイルシートを保存して閉じます。