ページのパーソナライズ
ページ内でコントロールをドラッグ＆ドロップできるようになりましたが、アプリケーションを再起動すると、移動したコントロールは元の場所に戻ってしまいます。実際に使用するアプリケーションならば、ページの設定を記憶できるようにしたいはずです。そのためには、ASP.NET 2.0のプロファイルサービスを使用します。
ASP.NET 2.0のプロファイルサービスを使用するには、いくつか操作が必要です。まず、「Web.config」ファイルに以下のコードを追加して、このアプリケーションにプロファイルプロパティを1つ追加します。
<system.web> <profile> <properties> <add name="Panel1Loc" type="System.String" /> </properties> </profile>
次に、「Web.config」ファイルの<profileService>要素のコメント化を解除して、Atlasがプロファイルサービスをサーバー側で使用できるようにします。プロファイルサービスの属性を次のように設定します。
<profileService enabled="true"
setProperties="Panel1Loc"
getProperties="Panel1Loc" />
これによって、Panel1Locという名前のプロファイルプロパティの読み取りと書き込みが可能になります。
次に、<atlas:DragOverlayProperties>コントロールにProfileProperty属性を追加し、値を「Panel1Loc」とします。これによって、このコントロールが拡張するPanelコントロールの位置を、Panel1Locという名前のプロファイルプロパティに保存できるようになります。
<atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"> <atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true" ProfileProperty="Panel1Loc" /> </atlas:DragOverlayExtender>
最後に、<atlas:ProfileScriptService>コントロールを追加し、そのAutoSave属性をtrueに設定します。これによって、Panelコントロールをドラッグ＆ドロップするたびに、新しい位置がプロファイルプロパティに自動的に保存されます。
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /> <atlas:ProfileScriptService ID="ProfileScriptService1" runat="server" AutoSave="true" />
これで完了です。［F5］キーを押してこのアプリケーションをテストします。時計を別の場所にドラッグ＆ドロップします。アプリケーションの実行を終了してから再起動すると、時計は移動した場所に表示されます。
データベースの確認
時計の位置情報が実際に保存されていることを確認してみましょう。プロジェクトの「App_Data」フォルダを最新の状態に更新します（図3を参照）。新しく「ASPNETDB.MDF」というデータベースが作成されていることが分かります。ASP.NETによって、このデータベースにアプリケーション関連データが保存されます。
この「ASPNETDB.MDF」ファイルをダブルクリックします。サーバーエクスプローラでテーブル項目を展開し、「aspnet_Profile」テーブルを右クリックしてから［Show Table Data］をクリックします。このテーブルの先頭の行に、プロファイルプロパティの値が表示されます（図4を参照）。
複数パネルの追加
ここまでは1つのPanelコントロールのみを見てきました。今度は、Panelコントロールをもう1つ追加して、日本の現在時刻を表示させてみます。次のように追加と変更を行います。
ページに新しい<atlas:UpdatePanel>コントロール（UpdatePanel2）を追加し、これにもう1つのPanelコントロール（Panel2）を追加します（今度は時計に日本の時刻を表示させます）。
<atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> ... ... </ContentTemplate> </atlas:UpdatePanel> <atlas:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:Panel ID="Panel2" runat="server" BorderStyle="Solid" Height="198px" Width="194px"> <script src="http://www.clocklink.com/embed.js"> </script> <strong>Current Time in Japan</strong> <script type="text/javascript" language="JavaScript"> obj = new Object; obj.clockfile = "0008-Yellow.swf"; obj.TimeZone = "JST"; obj.width = 200; obj.height = 200; obj.wmode = "transparent"; showClock(obj); </script> </asp:Panel> </ContentTemplate> </atlas:UpdatePanel>
<atlas:DragOverlayExtender>に新しい<atlas:DragOverlayProperties>コントロールを追加して、2つ目のPanelコントロールを拡張します。
<atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server"> <atlas:DragOverlayProperties TargetControlID="Panel1" Enabled="true" ProfileProperty="Panel1Loc" /> <atlas:DragOverlayProperties TargetControlID="Panel2" Enabled="true" ProfileProperty="Panel2Loc" /> </atlas:DragOverlayExtender>
「Web.config」で、Panel2Locという名前の新しいプロファイルプロパティを追加します。
<profile> <properties> <add name="Panel1Loc" type="System.String" /> <add name="Panel2Loc" type="System.String" /> </properties> </profile>
最後に、setProperties属性とgetProperties属性を変更してPanel2Locプロファイルプロパティも対象にします。
<profileService enabled="true"
setProperties="Panel1Loc;Panel2Loc"
getProperties="Panel1Loc;Panel2Loc" />
［F5］キーを押してこのアプリケーションをテストします。2つの時計をドラッグ＆ドロップできるようになり、ページをロードし直しても2つの時計の位置は保持されます（図5を参照）。
