Sunday, March 11, 2012

Ajax Sample Application (Task List)

Please help? How about I post the full code. I highlighted the snippet I am referring to in green. I just need to know about this "load" method because I cannot find it in any of the TaskList files I have. Thanks!


<%@. Page Language="C#" MasterPageFile="~/site.master" Title="Untitled Page" %
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager runat="server" ID="scriptManager">
<scripts>
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />
<asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js" />
</scripts>
<profileservice loadproperties="ListCoordinates" />
</asp:ScriptManager>
<form id="aspnetForm" name="aspnetForm">
<div class="Content">
<h2>
My Lists</h2>
<div id="ListView1">
</div>
<div style="display: none;">
<div id="ListView1_layoutTemplate">
<div id="ListView1_itemTemplate" class="ListWindow">
<div id="ListTitleBar" class="ListWindowTitle">
<span id="ListView1_titleLabel"></span>
</div>
<div id="ListView1_tasks">
</div>
<div style="display: none;">
<div id="ListView1_tasks_layoutTemplate">
<div id="ListView1_tasks_layoutTemplate_taskTemplate">
<div id="ListView1_tasks_itemTemplate">
<input type="checkbox" id="ListView1_tasks_CheckBox1" />
<label for="ListView1_tasks_CheckBox1">
</label>
<span id="ListView1_tasks_titleLabel"></span>
</div>
</div>
</div>
<div id="ListView1_tasks_emptyTemplate">
No tasks.
</div>
</div>
</div>
</div>
<div id="ListView1_emptyTemplate">
</div>
</div>
</div>
</form
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<dataSource id="listsDataSource" serviceURL="TaskListDataService.asmx" />
<dataSource id="tasksDataSource" serviceURL="TaskAllItemsDataService.asmx" /
<listView id="ListView1" renderComplete="onDataChanged" itemTemplateParentElementId="ListView1_layoutTemplate">
<bindings>
<binding property="data" dataContext="listsDataSource" dataPath="data" />
</bindings>
<layoutTemplate>
<template layoutElement="ListView1_layoutTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="ListView1_itemTemplate">
<control id="ListView1_itemTemplate">
<behaviors>
<floatingBehavior move="onMoveWindow" handle="ListView1_itemTemplate" />
</behaviors>
</control>
<label id="ListView1_titleLabel">
<bindings>
<binding dataPath="Title" property="text" />
</bindings>
</label
<dataView id="listTasks">
<bindings>
<binding property="data" dataContext="tasksDataSource" dataPath="data" />
</bindings>
<filters>
<propertyFilter property="ListID">
<bindings>
<binding dataPath="ListID" property="value" />
</bindings>
</propertyFilter>
</filters>
</dataView
<listView id="ListView1_tasks" itemTemplateParentElementId="ListView1_tasks_layoutTemplate_taskTemplate">
<bindings>
<binding dataContext="listTasks" dataPath="filteredData" property="data" />
</bindings>
<layoutTemplate>
<template layoutElement="ListView1_tasks_layoutTemplate" />
</layoutTemplate>
<itemTemplate>
<template layoutElement="ListView1_tasks_itemTemplate">
<checkBox id="ListView1_tasks_CheckBox1">
<bindings>
<binding dataPath="Completed" direction="InOut" property="checked" />
</bindings>
</checkBox>
<label id="ListView1_tasks_titleLabel">
<bindings>
<binding dataPath="Title" property="text" />
</bindings>
</label>
</template>
</itemTemplate>
<emptyTemplate>
<template layoutElement="ListView1_tasks_emptyTemplate" />
</emptyTemplate>
</listView
</template>
</itemTemplate>
<emptyTemplate>
<template layoutElement="ListView1_emptyTemplate" />
</emptyTemplate>
</listView>
<application load="onLoad">
<load>
<invokeMethodAction target="listsDataSource" method="load" />
<invokeMethodAction target="tasksDataSource" method="load" />
</load>

</application>

</components>
</page>
</script
<script>
/* <profile /> */
var listCoordinates = null;
var rootCoordX = -1;
var rootCoordY = -1;

function onMoveWindow(sender, eventArgs) {

// Get drop location.
var popup = sender.get_element().control;
var listID = popup.get_dataContext().getProperty('ListID');
var dropLocation = Sys.UI.DomElement.getLocation(popup.get_element());

// Add or update this window to saved locations.
if (!listCoordinates) {
listCoordinates = {};
}
if (!listCoordinates[listID]) {
listCoordinates[listID] = {};
}
listCoordinates[listID].x = dropLocation.x;
listCoordinates[listID].y = dropLocation.y;

// Serialize to text, and write out through profile
var coords = Sys.Serialization.JavaScriptSerializer.serialize(listCoordinates);

Sys.Services.ProfileService.properties.ListCoordinates = coords;
Sys.Services.ProfileService.save(["ListCoordinates"]);
}

function onLoad(sender, eventArgs) {
// Start fetching profile.
var c = Sys.Services.ProfileService.properties.ListCoordinates;
if(c) {
listCoordinates = Sys.Serialization.JavaScriptSerializer.deserialize(c);
restoreCoordinates();

}
else {
Sys.Services.ProfileService.load(["ListCoordinates"], onProfileLoaded);
}
}

function onProfileLoaded() {
listCoordinatesString = Sys.Services.ProfileService.properties.ListCoordinates;
//..alert('loaded: ' + listCoordinatesString);

if (listCoordinatesString) {
listCoordinates = Sys.Serialization.JavaScriptSerializer.deserialize(listCoordinatesString);
}

// Restore window locations.
restoreCoordinates();
}

function restoreCoordinates() {

//if (listCoordinates)
{
var listView = $find("ListView1");
var listViewCoords = Sys.UI.DomElement.getLocation(listView.get_element());

if (rootCoordX == -1)
rootCoordX = listViewCoords.x + 50;

if (rootCoordY == -1)
rootCoordY = listViewCoords.y + 50;


for (var i = 0; ; i++) {
var element = listView.getItemElement(i);
if (element) {
var listID = element.control.get_dataContext().getProperty('ListID');

var coords;

if (listCoordinates) {
coords = listCoordinates[listID];
}

if (!coords) {
coords = {};

coords.x = rootCoordX;
coords.y = rootCoordY;

rootCoordX = rootCoordX + 50;
rootCoordY = rootCoordY + 50;
}

Sys.UI.DomElement.setLocation(element, coords.x, coords.y);
}
else {
break;
}
}
}
}

function onDataChanged(sender, eventArgs) {
// Restore window locations when windows are re-created.
//if (eventArgs.get_propertyName() == "data") {
//debugger;
restoreCoordinates();
//}
}
</script
</asp:Content>


If you have worked with this code and understand it please let me know. I am going to have to change directions because I am stuck on this problem and cant get any help. TIA.



'load' is an event in the Application descriptor, which is part of the Microsoft AJAX CTP xml-script support. Descriptor events are a way of adding handlers through xml-script, so setting load in xml-script is the same as calling Application.add_load.

The load in 'method="load"' is a method on Sys.Preview.Data.DataSource.


Thank you chenriks, this helps me out. I need to research these things further- I just don't know where to look =/

No comments:

Post a Comment