ASP.NET "Atlas" を使ってみる

Visual Studio 2005 がインストールされている環境で "Atlas" を使ってみた。

まずは、http://atlas.asp.net/ より "atlas" のセットアップファイルをダウンロードします。
今回は March CTP を使用しています。

インストールは簡単です。ダウンロードしたファイルを実行すれば特に問題ないでしょう。

準備は以上です。
準備ができましたので、Visual Studio 2005 を起動し、新しいWebサイトを作成します。

新しいWebサイトウィンドウで、言語を選択すると、マイテンプレートの欄に「"Atlas Web Site"」が現れますのでこれを選択します。
場所は任意の場所を選択して下さい。

次にツールボックスにコントロールを追加します。
ツールボックスに新しいタブを追加します。今回「Atlas」というタブを追加しました。

作成したタブ部分を右クリックし、「アイテムの選択」をクリックします。
ツールボックスアイテムの選択ウィンドウで参照ボタンをクリックします。
先ほど作成したプロジェクトのフォルダからbinフォルダを開き、「Microsoft.Web.Atlas.dll」を選択します。
ツールボックスアイテムの選択ウィンドウでいくつかの項目が選択された状態になりますのでOKボタンをクリックします。

これで、ツールボックスから"atlas"のコンポーネントが使用可能となりました。

実際に簡単なサンプルを作ってみましょう。
今回はフローティングパネルを実装してみます。

作成したプロジェクトから「Default.aspx」を開きデザインモードにします。

まずはPanel Web コントロールを貼り付けます。
サイズを拡大し、動作が分かりやすいようにBackColorプロパティを設定します。

先ほど貼り付けたPanelコントロールの上にもう一つPanel Webコントロールを貼り付けます。
こちらも動作が分かりやすいように、BackColorプロパティを設定します。

Atlas タブより DragOverlayExtenderコントロールを貼り付けます。
あとはプロパティを設定すれば完成です...といいたいところですが、プロパティウィンドウが現バージョンでは対応してないようです。
# 製品版では対応するんですよね？ ＞ Microsoftどの

ということで、HTML編集モードで1行追記します。

<atlas:DragOverlayExtender> タグの内側に下記のコードを追記します。
<atlas:DragOverlayProperties Enabled="true" TargetControlID="Panel2" />

これにて完成です。
実行してみると上に貼ったパネルがドラッグアンドドロップで移動します。