This sample use Atlas profile service to persist the position of a drag and drop panel between browse sessions.
Send me a private message if you like to have a zip file includes everything for this sample.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<atlas:ScriptManager runat="server" ID="ScriptManager1">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
</Scripts>
</atlas:ScriptManager>
</head>
<body>
<form id="form1" runat="server">
<span id="msg"></span>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200px" height="400px"> </td>
<td>
<div id="imagePanel" style="background-color:Navy;padding:1px">
<div id="dragHandler" style="background-color:Navy;width:100%;"></div>
<img src="http://pics.10026.com/?src=http://www.google.com/intl/en/images/logo.gif" />
</div>
</td>
</tr>
</table>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="imagePanel">
<behaviors>
<floatingBehavior handle="dragHandler" move="OnMove" />
</behaviors>
</control>
</components>
</page>
</script>
<script type="text/javascript">
function pageLoad()
{
Sys.Profile.set_autoSave(false);
Sys.Profile.loaded.add(onProfileLoadComplete);
Sys.Profile.saved.add(onProfileSaveComplete);
Sys.Profile.load();
}
function onProfileLoadComplete()
{
var objStyle = $object('imagePanel').element.style
objStyle.posTop = Sys.Profile.properties.poxTop;
objStyle.posLeft = Sys.Profile.properties.poxLeft;
}
function onProfileSaveComplete()
{
//alert('profile saved.');
}
function OnMove(sender, cancelArgs)
{
var ele = sender.control.element
Sys.Profile.properties.poxTop = ele.offsetTop;
Sys.Profile.properties.poxLeft = ele.offsetLeft;
Sys.Profile.save();
}
</script>
</body>
</html>
Your web.config must include something similar to the following. also you need a database to host the asp.net AppService.
<configSections>
<sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
<section name="profileService" type="Microsoft.Web.Configuration.ProfileServiceSection" requirePermission="false"/>
</sectionGroup>
</configSections>
<microsoft.web>
<profileService enabled="true"
setProperties="poxTop;poxLeft"
getProperties="poxTop;poxLeft">
</profileService>
</microsoft.web>
<connectionStrings>
<remove name="LocalSqlServer" />
<add name="LocalSqlServer" connectionString="Data Source=.\SQLExpress;Integrated Security=True;User Instance=True;AttachDBFilename=|DataDirectory|aspnetdb.mdf" />
</connectionStrings>
<system.web>
<anonymousIdentification enabled="true" />
<profile>
<properties>
<add name="poxTop" type="integer"/>
<add name="poxLeft" type="integer"/>
</properties>
</profile>
</system.web>
I'm getting javascript errors trying to use this.
Sys.Profile.loaded.add(onProfileLoadComplete);
Sys.Profile.saved.add(onProfileSaveComplete);
should be
Sys.Profile.loaded.add(onProfileLoadComplete());
Sys.Profile.saved.add(onProfileSaveComplete());
then
Sys.Profile.properties.poxTop is null or not an object.
oh...
Sys.Profile.loaded.add(onProfileLoadComplete);
Sys.Profile.saved.add(onProfileSaveComplete);
is correct. this is demo, ignore the javascript error and the second try will let you go i think.
Great Example, thanks!
2 things:
1. I changed the example slighlty to display the Profile-Save-Event Time to the StatusBar with this
Script:
window.status = Date();
Does work well, but the Date is formatted this strange way:
Fri, May 19 09:26:32 2006
So the time is in the middle of the date-part !?
2. Does anybody have the same example but working more with the Server-Side Atlas-Framework?
Thanks
please send me zip file includes everything for this sample
Hi Xiyuan Shen
Can you send me the zip file so that I can implement this...I have been partially sucessfull. It seems as though I am missing a step though.
Justin
Did you actually get this working?
I have the example loaded and it seem to initially work, however, the drag N drop page moves once the page is completely loaded, to the top left of the screen. Any ideas why?
Hi there
Here is my code. He will do the job.
You get the error "Sys.Profile... length is null" if your database, which is responsible to save and where you get the position-values, is not running or not accessible.
Good luck.
Patrick
Web.Config
<?xmlversion="1.0"?>
<configuration>
<configSections>
<sectionGroupname="microsoft.web"type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
<sectionname="webServices"type="Microsoft.Web.Configuration.WebServicesSection"requirePermission="false"/>
<sectionname="profileService"type="Microsoft.Web.Configuration.ProfileServiceSection"requirePermission="false"/>
</sectionGroup>
</configSections>
<microsoft.web>
<!-- Enable WebServices because Profile-Service ASP.NET is accessible thru WS-->
<webServicesenableBrowserAccess="true"/>
<profileService
enabled="true"
setProperties="poxTop;poxLeft;FloatingLabelLocation"
getProperties="poxTop;poxLeft;FloatingLabelLocation">
</profileService>
</microsoft.web>
<system.web>
<authenticationmode="Windows"/>
<anonymousIdentificationenabled="true"/>
<profileenabled="true">
<properties>
<addallowAnonymous="true"name="FloatingLabelLocation"/>
<addname="poxTop"type="integer"/>
<addname="poxLeft"type="integer"/>
</properties>
</profile>
<pages>
<controls>
<addnamespace="Microsoft.Web.UI"assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/>
<addnamespace="Microsoft.Web.UI.Controls"assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/>
</controls>
</pages>
<compilationdebug="true" />
<httpHandlers>
<removeverb="*"path="*.asmx"/>
<!-- ASMX is mapped to a new handler so that proxy javascripts can also be served.-->
<!-- Otherwise, you get the following error-->
<!-- The HTTP verb POST used to access path '/ProfileWithAtlas/ScriptServices/Microsoft/Web/Services/Standard/ProfileWebService.asmx' is not allowed.-->
<addverb="*"path="*.asmx"type="Microsoft.Web.Services.ScriptHandlerFactory"validate="false"/>
</httpHandlers>
</system.web>
</configuration>
------------
<%@.PageLanguage="C#"AutoEventWireup="true" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Atlas Profiling</title>
</head>
<body>
<formid="form1"runat="server">
<atlas:ScriptManagerrunat="server"ID="ScriptManager1">
<Scripts>
<atlas:ScriptReferenceScriptName="AtlasUIDragDrop"/>
</Scripts>
</atlas:ScriptManager>
<spanid="msg"></span>
<tablecellpadding="0"cellspacing="0"border="0">
<tr>
<!-- This fixed Size is important. Without it, your d&d will not snapp-in -->
<tdstyle="width:200px;height:600px"></td>
<td>
<divid="imagePanel">
<imgid="dragHandler"src="smile.gif"alt="Smile!"/>
</div>
</td>
</tr>
</table>
<scripttype="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="imagePanel">
<behaviors>
<floatingBehavior handle="dragHandler" move="OnMove" />
</behaviors>
</control>
</components>
</page>
</script>
<scripttype="text/javascript">
function pageLoad()
{
Sys.Profile.set_autoSave(false);
Sys.Profile.loaded.add(onProfileLoadComplete);
Sys.Profile.saved.add(onProfileSaveComplete);
Sys.Profile.load();
}
function onProfileLoadComplete()
{
var objStyle = $object('imagePanel').element.style;
if (Sys.Profile.properties.poxTop !=null)
objStyle.posTop = Sys.Profile.properties.poxTop;
if (Sys.Profile.properties.poxLeft !=null)
objStyle.posLeft = Sys.Profile.properties.poxLeft;
}
function onProfileSaveComplete()
{
window.status ="Profile saved: " + Date();
}
function OnMove(sender, cancelArgs)
{
var ele = sender.control.element;
Sys.Profile.properties.poxTop = ele.offsetTop;
Sys.Profile.properties.poxLeft = ele.offsetLeft;
Sys.Profile.save();
}
</script>
</form>
</body>
</html>
