Wednesday, March 28, 2012

Calling Custom Client Method with xml-script

Here is the situation, I have created a custom class that inherits from the ATLAS foundation client classes, I can initialize it with no problems with-in the xml-script, but what I want to do next is have a button call a method that of my custom client class, I know to add the button and click behavior but after that I am not sure what to declare as all the examples that I find are for web services and global javascript functions. Here is a tiny excerpt of the code I am working with to help:

I want to call MyContainer.AdjustThumbnailDimensions method and pass in the attributes from the two text form fields. Any help would be greatly apprieciated.

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">4<html xmlns="http://www.w3.org/1999/xhtml">5<head runat="server">6 <link href="CSS/Thumbnail.css" rel="stylesheet" type="text/css" />7 <title>Untitled Page</title>8</head>9<body>10 <form id="form1" runat="server">11 <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />1213 <div id="ThumbnailContainer" thumbnailHeight="150" thumbnailWidth="100">14 <div class="Thumbnail" img="Images/Space.gif" label="Test Thumbnail"></div>15 <div class="Thumbnail" img="Images/Joker.jpg" label="Joker"></div>16 <div class="Thumbnail" img="Images/Space.gif" label="Another Test"></div>17 </div>1819 height <input type="text" name="tHeight" value="150" size="4" /> width <input type="text" name="tWidth" value="100" size="4" /> <input id="adjustDimensions" type="button" value="Adjust Thumbnails" onclick="AdjustThumbnailDimensions( document.forms[0].tWidth.value, document.forms[0].tHeight.value );" />20 </form>21 <script>22My.Client.UI.MyContainer = function( associatedElement ) {23 My.Client.UI.MyContainer.initializeBase(this, [associatedElement]);2425 var m_Thumbnails = new Array();26 var m_ThumbnailHeight;27 var m_ThumbnailWidth;2829 this.initialize = function() {3031 for( var index = 0; index < associatedElement.childNodes.length; index++ ) {32 thumbnail = associatedElement.childNodes[index];33 m_Thumbnails[index] = new SGP.SPI2.Client.UI.Thumbnail( thumbnail );34 m_Thumbnails[index].initialize();3536 m_Thumbnails[index].set_ThumbnailHeight( m_ThumbnailHeight );37 m_Thumbnails[index].set_ThumbnailWidth( m_ThumbnailWidth );38 }39 }4041 this.AdjustThumbnailDimensions = function( width, height ) {4243 for( var index = 0; index < thumbnails.length; index++ ) {44 m_Thumbnails[index].set_ThumbnailHeight( height );45 m_Thumbnails[index].set_ThumbnailWidth( width );46 }4748 }4950}51My.Client.UI.MyContainer.registerClass( "My.Client.UI.MyContainer", Sys.UI.Control);52Sys.TypeDescriptor.addType("script", "MyContainer", My.Client.UI.MyContainer);53</script>54 <script type="text/xml-script">55 <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">56 <references>57 <add src="Thumbnail.js" />58 </references>59 <components>60 <ThumbnailContainer id="ThumbnailContainer" />61 <button id="adjustDimensions">62<!-- What to do here ?? -->63<click>64 <invokeMethod />65 </click>66 </button>67 </components>68 </page>69 </script>70</body>71</html>
Thank youOk, I have figured out what I was missing from more disection of the ATLAS runtime and hunting around for more examples of invokeMethod. I had to add the method getDescriptor and then I was able to reference my method. Now the next phase to bind the parameters to the form fields.

No comments:

Post a Comment