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:
Web.config
In order for the the Atlas Framework to retrieve and
modify the profile properties I need to first enable the profile service in web.config. To find more information about working with Profiles in Atlas, please see the
Using the "Atlas" Profile service documentation.
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" />
ASPX Code
For the puzzle pieces, I took a
picture taken at Vertigo, chopped it into 12 equal chunks, and placed them on the
page with the standard <img> tags. The images need to be set runat="server" so that I can reference
the images in the dragoverlayProperties for the TargetControlID property.
<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>
Styles
The styles are not really necessary for this demo. I only
included it for the guide box to place the puzzle pieces in.
<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>
Known Issues
- 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.