Alan Le

Atlas: Using the DragOverlayExtender with the ASP.NET Profile Service

My last two posts on Atlas has been well received. I plan to continue writing quick demos as I explore more about the Atlas Framework.

Today, I've been looking into the DragOverlayExtender to see how it works with the ASP.NET Profile Service. I've came up with the following example in my exploration. The demo is a simple draggable puzzle that will remember the puzzle piece location so that you can go back to it at a later time. In this post, I will share how I built it using ATLAS and the DragOverlayExtender.

You can check out the demo in the link below. It should work in both IE and Firefox. I'm still learning about Atlas, so if you have any suggestions, pointers or corrections, please feel free to add comments to my post.

Demo: http://atlas.vertigosoftware.com/atlasdragoverlay/dragoverlayextender.aspx
Source: http://blogs.vertigosoftware.com/files/alan/atlasdragoverlay.zip

Screenshot:

Since I did not add a ProfileProvider, the default SQL Express provider will be used. The corresponding ASPNETDB database, which contains the tables for aspnet_profile and other ASPNET services, will automatically be created and added to the App_Data folder when I build and run the app. If you want to use a different Profile Provider, you can check out this msdn reference article: http://msdn2.microsoft.com/en-us/library/ms164644.aspx.

I did not plan to add membership and login so I enabled anonymous identification. Now ASPNET will save the profiles even for anonymous/unathenticated users that visit my demo site.

Then, I add the profile properties for the drag location for each of the puzzle pieces.

Finally, I associate the accessors for the profile properties with the profile service.

<configSections>
  <sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
    <section name="converters" type="Microsoft.Web.Configuration.ConvertersSection" requirePermission="false" />
    <section name="webServices" type="Microsoft.Web.Configuration.WebServicesSection" requirePermission="false" />
    <section name="authenticationService" type="Microsoft.Web.Configuration.AuthenticationServiceSection" requirePermission="false" />
    <section name="profileService" type="Microsoft.Web.Configuration.ProfileServiceSection" requirePermission="false" />
  </sectionGroup>
</configSections>

...

<microsoft.web>
  <anonymousIdentification enabled="true"/>
  <profile>
    <properties>
      <add name="DragLocation1" allowAnonymous="true" type="String"   />
      <add name="DragLocation2" allowAnonymous="true" type="String"   />
      <add name="DragLocation3" allowAnonymous="true" type="String"   />
      <add name="DragLocation4" allowAnonymous="true" type="String"   />
      <add name="DragLocation5" allowAnonymous="true" type="String"   />
      <add name="DragLocation6" allowAnonymous="true" type="String"   />
      <add name="DragLocation7" allowAnonymous="true" type="String"   />
      <add name="DragLocation8" allowAnonymous="true" type="String"   />
      <add name="DragLocation9" allowAnonymous="true" type="String"   />
      <add name="DragLocation10" allowAnonymous="true" type="String"   />
      <add name="DragLocation11" allowAnonymous="true" type="String"   />
      <add name="DragLocation12" allowAnonymous="true" type="String"   />
    </properties>
  </profile>

...

<profileService enabled="true"
                setProperties="DragLocation1;DragLocation2;DragLocation3;DragLocation4;DragLocation5;DragLocation6;DragLocation7;DragLocation8;DragLocation9;DragLocation10;DragLocation11;DragLocation12"
                getProperties="DragLocation1;DragLocation2;DragLocation3;DragLocation4;DragLocation5;DragLocation6;DragLocation7;DragLocation8;DragLocation9;DragLocation10;DragLocation11;DragLocation12" />

<img src="images/213z.png" runat="server" id="Img1" alt="puzzle piece" />
<img src="images/3243.png" runat="server" id="Img2" alt="puzzle piece" />
<img src="images/879h.png" runat="server" id="Img3" alt="puzzle piece" />
<img src="images/asdf.png" runat="server" id="Img4" alt="puzzle piece" />
<img src="images/berx.png" runat="server" id="Img5" alt="puzzle piece" />
<img src="images/d4dq.png" runat="server" id="Img6" alt="puzzle piece" />
<img src="images/g3xb.png" runat="server" id="Img7" alt="puzzle piece" />
<img src="images/hhjy.png" runat="server" id="Img8" alt="puzzle piece" />
<img src="images/nyui.png" runat="server" id="Img9" alt="puzzle piece" />
<img src="images/yuij.png" runat="server" id="Img10" alt="puzzle piece" />
<img src="images/zxc5.png" runat="server" id="Img11" alt="puzzle piece" />
<img src="images/zxcv.png" runat="server" id="Img12" alt="puzzle piece" />

To expose the ASP.NET Profile Service that I've enabled in web.config to the web client, I added the Atlas ProfileScriptService. AutoSave is set to true which will automatically save the drag location is changed.

<atlas:ProfileScriptService ID="profile" runat="server" AutoSave="true">
</atlas:ProfileScriptService>
<atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server">
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img1" ProfileProperty="DragLocation1" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img2" ProfileProperty="DragLocation2" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img3" ProfileProperty="DragLocation3" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img4" ProfileProperty="DragLocation4" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img5" ProfileProperty="DragLocation5" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img6" ProfileProperty="DragLocation6" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img7" ProfileProperty="DragLocation7" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img8" ProfileProperty="DragLocation8" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img9" ProfileProperty="DragLocation9" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img10" ProfileProperty="DragLocation10" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img11" ProfileProperty="DragLocation11" />
    <atlas:DragOverlayProperties Enabled="true" TargetControlID="Img12" ProfileProperty="DragLocation12" />
</atlas:DragOverlayExtender>

Javascript
I wrote a javascript scramble function to make it easy to scramble the puzzle pieces. It uses a helper randomize function to distribute the puzzle pieces. Since I named my image controls as Img1, Img2, etc... I can easily just iterate through the pieces and set the x and y positions. The function call is set on the onclick even of my scramble button.

    <script language="javascript" type="text/javascript">
    function scramble() {
        var totalPieces = 12;
        var pieczeSize = 125;
        for (i=1; i<=totalPieces; i++) {
            x = randomize(document.documentElement.clientHeight - pieczeSize);
            y = randomize(document.documentElement.clientWidth - pieczeSize);

            img = $('Img'+ i);
            img.style.top = x + 'px';
            img.style.left = y + 'px';
        }
    }

    function randomize(max) {
        rnd = Math.random();
        return rnd * max;
    }
    </script>

<style type="text/css">
#puzzlebox
{
height: 331px;
width:500px;
border: solid 1px #000;
padding: 1px;
text-align: center;
position: absolute;
left: 100px;
top: 100px;
color: gray;
}
</style>

• The puzzle pieces will return to their original positions if they are dragged outside of the browser body area.
• After being scrambled, the puzzle pieces will returned to their saved profile locations if the page is refreshed.