ASP.NET AJAX UI

Re: How to implement the Sys.UI.ITemplate interface programmatically

KFrancis — Tue, 23 May 2006 21:16:51 GMT

Of course .. you could always just create an extender, which has a string property for the name of the template .. which you then just use in the RenderInnerScript and RenderScript overrides ...

protected override void RenderInnerScript(Microsoft.Web.Script.ScriptTextWriter writer, DragListProperties props)
        {
            base.RenderInnerScript(writer, props);

            // The dragDropList needs two template properties to function. One is the dropCueTemplate,
            // which is the "you can drop here" look, and the emptyCueTemplate which is 
            // shown for empty lists.
            // This content will be rendered as a child tag of the behavior element.

            SerializeTemplateProperty("DropCueTemplate", "dropCueTemplate", writer, props);
            SerializeTemplateProperty("EmptyTemplate", "emptyTemplate", writer, props);
        }

    protected override void RenderScript(Microsoft.Web.Script.ScriptTextWriter writer, Control targetControl)
    {
        DragListProperties properties (DragListProperties)base.GetTargetProperties(targetControl);
    
        if (properties != null)
        {
             writer.WriteStartElement("dragDropList");
             writer.WriteAttributeString("dataType", properties.DataType);
             writer.WriteAttributeString("acceptedDataTypes", properties.AcceptedDataTypes);
	     writer.WriteAttributeString("dragMode", properties.DragMode.ToString());
            writer.WriteAttributeString("direction", "Vertical");
            // Render the children elements
            this.RenderInnerScript(writer, properties);
            writer.WriteEndElement(); //dragDropList
       }
   }

private void SerializeTemplateProperty(string propertyName, string templateName, Microsoft.Web.Script.ScriptTextWriter writer, DragListProperties properties)
        {
            PropertyDescriptor tempLayoutProp = TypeDescriptor.GetProperties(properties)[propertyName];

            string strValue = SerializePropertyToString(properties, tempLayoutProp, true);
            if (strValue != null)
            {
                writer.WriteStartElement(templateName);
                writer.WriteStartElement("template");
                writer.WriteAttributeString("layoutElement", strValue);
                writer.WriteEndElement(); // template
                writer.WriteEndElement(); // templateName
            }
        }

This all works fine by the way, as I have a DropDownList implemented in this fashion.

Re: How to implement the Sys.UI.ITemplate interface programmatically

Luis Abreu — Tue, 23 May 2006 20:59:03 GMT

hello.

i hadn't thought about that...

Re: How to implement the Sys.UI.ITemplate interface programmatically

aosipov — Tue, 23 May 2006 20:35:10 GMT

Hi -

This can be done with a little short hack:

var cue = document.createElement('li'); // add styling
var dct = Function.emptyFunction;
dct.createInstance = function(c) { return { instanceElement: cue } };
##ZONE##.set_dropCueTemplate(dct);

Not really a proper solution but a hack to get DND list working if you don't want to create a ITemplate class.

Re: How to implement the Sys.UI.ITemplate interface programmatically

li_jing — Tue, 23 May 2006 00:24:08 GMT

;-) hi ,Luis,

you're right,time is limited.

i think you need some sleep now ,health is a lot important too ;-)

thanx again for your help.

Re: How to implement the Sys.UI.ITemplate interface programmatically

Luis Abreu — Tue, 23 May 2006 00:07:33 GMT

hello guys.

well, i must say that the code is still a little bif far from perfect. it would be nice to build a more general template so that it could be used in all the scenarios. if i have time, i'll come back to it (though i really doubt it, because each day only has 24 hoursand I'm already on the 2nd hour of the next day :) )

Re: How to implement the Sys.UI.ITemplate interface programmatically

Recon_609 — Mon, 22 May 2006 23:59:08 GMT

Good stuff - When I look at this code, I wonder "now, how did Atlas make writing javascript less complex, etc... ?"

I guess the answer is in the declarative code model isn't it?

Re: How to implement the Sys.UI.ITemplate interface programmatically

li_jing — Mon, 22 May 2006 23:42:32 GMT

hi,Luis,excellent! millions of thanx!

this is exactly what i need!

I really appreciate your help!

i had searched the whole web ,but got nothing about the programmatical way, i m sure the atlas document is a lot of way to go.

now you give me the answer,thanx again! ;-)

Re: How to implement the Sys.UI.ITemplate interface programmatically

Luis Abreu — Mon, 22 May 2006 14:39:16 GMT

hello.

hum...not sure if this is what you're after, but i've developed a custom non generalized template that can be used with a listview. this nees several improvements, but i think it should be enough to get you started (i hope). unfortunatelly, implementing a template programatically is a lot harder that i initially though...

here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
    <script type="text/javascript" src="Atlas.js">
    </script>

     <div style="display: none">
        <table id="masterTemplate">
            <tbody id="topElement">
            <tr class="header">
                <th>Nome</th>
                <th>Idade</th>

            </tr>
            <tr id="itemTemplate">
                <td id="idTemplate"></td>
                <td id="nomeTemplate"></td>

            </tr>

            </tbody>
        </table>
    </div>

    <div id="conteudo">
    </div>

Re: How to implement the Sys.UI.ITemplate interface programmatically

li_jing — Mon, 22 May 2006 09:58:45 GMT

thanks Luis ;-)

looking forward to your solution .

Re: How to implement the Sys.UI.ITemplate interface programmatically

Luis Abreu — Mon, 22 May 2006 09:37:40 GMT

hello again.

yes, you're right...declarativetemplate won't cut it....well, you'll have to implement the interface as you said...i haven't done nothing like that yet....maybe someone has an idea about how to do that...i'll try to look at it tonight. if i manged to get anything working, i'll post back.

Re: How to implement the Sys.UI.ITemplate interface programmatically

li_jing — Sun, 21 May 2006 23:19:48 GMT

thanx ,but i need to make it in programmatical way ,not in declarative way.

declarative xml-script is easy, then programmatical way should not be so hard,

so how can i do make in the pageLoad() function?

Regards

Re: How to implement the Sys.UI.ITemplate interface programmatically

Luis Abreu — Sun, 21 May 2006 13:39:48 GMT

hello.

though i haven't uset it, i think using the Sys.UI.DeclarativeTemplate is the way to go

How to implement the Sys.UI.ITemplate interface programmatically

li_jing — Sun, 21 May 2006 05:07:01 GMT

hi ,guys,

i 'm struggling with AtlasUIDragDrop.js, i want to use DragDropList programatically. i don't know how to implement the Sys.UI.ITemplate interface programmatically to make my dropCueTemplate and emptyTemplate work ,please help

<div>
            
            <div id="leftArea" class="list1">
                <div id="content1" class="item">
                    <div id="content1Title" class="itemTitle">Content 1</div>
                    <div class="itemContent">
                        <%--<asp:Login ID="myLogin" runat="server"></asp:Login>--%>hello
                    </div>
                </div>
                <div id="content2" class="item">
                    <div id="content2Title" class="itemTitle">Content 2</div>
                    <div class="itemContent">
                        Dflying's Item
                    </div>
                </div>
            </div>
            
            <div id="rightArea" class="list2">
                <div id="content3" class="item">
                    <div id="content3Title" class="itemTitle">Content 3</div>
                    <div class="itemContent">
                        <%--<asp:Calendar ID="myCalendar" runat="server" CssClass="centered"></asp:Calendar>--%>hello
                    </div>
                </div>
            </div>
            <div style="clear: both">
            </div>

            
            <div style="display:none;">
                
                <div id="dropCueTemplate" class="dropCue">
                </div>
                
                <div id="emptyTemplate" class="emptyList">
                    Drop content here.
                </div>
            </div>

        </div>

          var content1=new Sys.UI.Control($('content1'));

          content1.initialize();
          var content2=new Sys.UI.Control($('content2'));

          content2.initialize();
          var content3=new Sys.UI.Control($('content3'));

          content3.initialize();

          _zone1=new Sys.UI.DragDropList();

          _zone1.set_dataType('HTML');
          _zone1.set_acceptedDataTypes(['HTML']);
          _zone1.set_dragMode(Sys.UI.DragMode.Move);
          _zone1.set_direction(Sys.UI.RepeatDirection.Vertical);
          //_zone1.set_dropCueTemplate(????);
          //_zone1.set_emptyTemplate(????);


          _zone2=new Sys.UI.DragDropList();

          _zone2.set_dataType('HTML');
          _zone2.set_acceptedDataTypes(['HTML']);
          _zone2.set_dragMode(Sys.UI.DragMode.Move);
          _zone2.set_direction(Sys.UI.RepeatDirection.Vertical);
          //_zone2.set_dropCueTemplate(????);
          //_zone2.set_emptyTemplate(????);

          _item1=new Sys.UI.DraggableListItem();
          _item1.initialize();
          _item1.set_handle($('content1Title'));


          _item2=new Sys.UI.DraggableListItem();
          _item2.initialize();
          _item2.set_handle($('content2Title'));


          _item3=new Sys.UI.DraggableListItem();
          _item3.initialize();
          _item3.set_handle($('content3Title'));

          content1.get_behaviors().add(_item1);
          content2.get_behaviors().add(_item2);
          content3.get_behaviors().add(_item3);

          leftArea.get_behaviors().add(_zone1);
          _zone1.initialize();
          rightArea.get_behaviors().add(_zone2);
          _zone2.initialize();

       }
    </script>

there 's no problem with declarative sytax,but i need to make it work programmatically

so how can i implement the Sys.UI.ITemplate.

millions of thanx in advance!