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

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

Owned by Rob Gagne (Unlicensed)
Last updated: Dec 05, 2012 by Xiaoyan Kong (Unlicensed)Version comment
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 にカスタムのスタイルを追加するには、次の手順に従います。
  1. これらのスタイルを追加するスタイルシートを開くか、新規のスタイルシートを開始します。
    注: デフォルトのスタイルシートを編集することはお勧めしません。
     
  2. dragOutline スタイルを次のように作成します。

     

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

     

     

  3. スタイルシートを保存して閉じます。
dropOutline のスタイルの作成
 
dropOutline ターゲット要素には、normalの状態に使用可能なスタイル関連の属性 (フォント、色、境界線など) を指定できます。
 
dropOutline にカスタムのスタイルを追加するには、次の手順に従います。
  1. これらのスタイルを追加するスタイルシートを開くか、新規のスタイルシートを開始します。
    注: デフォルトのスタイルシートを編集することはお勧めしません。
     
  2. dropOutline スタイルを次のように作成します。

     

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

     

     

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