how to add drag and drop in the myspace droplet

[seraphon]

Hi

May I ask if there is going to be a drag and drop available in the final version  of Alfrescov2.1?
Because right now I m trying to add it but it s not easy.

So here is my first question, will it be better to code the drag and drop myself or to try integrate a drag and drop library like wz_dragdrop.js?

I already tried to integrate it but it is not working.

Here is what i ve done
I ve included the script in myspaces2.get.html.ftl
<script type="text/javascript"

src="/alfresco/service/api/path/content/workspace/SpacesStore/Company%20Home/wz_dragdrop.js"></script>‍

as for the next part I ll have to explain a bit how I changed my file myspacespanel2.get.html.ftl
I ve made it so that there is a first list in my ftl that display only documents and another list who display spaces.
For the first list I ve change some little things. If the document is an image, then instead of showing the usual picture icon put the image itself.

Now to get back to the drag and drop business, I ve read that by giving unique names to the images we want to be able to drag
by adding
<script type="text/javascript">
<!–

SET_DHTML("name1", "name2");

//–>
</script>
before the </body> in an casual html file

So here is what I tried

      <div class="spaceIcon">
         <#if d.isDocument && (d.mimetype = "image/gif" || d.mimetype = "image/jpeg" || d.mimetype = "image/png")>
            <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.url}?${d.size}" border=0></a>
         <div style="display:none"><img name=d.name class="spaceIconImage64" alt="" width="64" height="64" src="${url.context}${d.url}?${d.size}"></div>
       
       <script type="text/javascript">
<!–

SET_DHTML(d.name);

//–>
</script>
       
         <#else>
            <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
         <div style="display:none"><img class="spaceIconImage64" alt="" width="64" height="64" src="${url.context}${d.icon64}"></div>
       </#if>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

But it doesnt work
I m guessing that it cant work anyways because there must be some conflict with the size change animation.
I ve though to change the mouse icon when we click on a picture than drag it, but I dont really know how to code that in javascript..

An advice someone?


Regards
Seraphon

[mikeh]

Hi,

Nice idea to enable drag and drop - we'd be intersted to see the results.

All the new portlets use the mootools javascript library, which already has support for drag-and-drop elements. See http://docs.mootools.net/ for more help (and they're pretty good on the forums as long as you've read the docs first!)

You probably want to dig into the myspaces.js client-side javascript file, which sets up all the events handlers and animations for the My Spaces portlet. Much better to extend that than try and bolt another library on the side.

Good luck!

Mike

[seraphon]

Hi

From what I ve done until now I can say that adding drag and drop wont be a piece of cake.
But I cant resist the temptation of trying to add this.

I m having some difficulties and I ll describe them here in case it interest someone or even better if someone has a beginning of a solution(let us not be too greedy).

I ve basicly used the following exemple for all the tests I ve done
http://demos.mootools.net/DragDrop

The first easy thing is to test if the mootools drag and drop work. Just add the CSS and HTML code of the exemple given earlier in the myspaces.get.html.ftl
(outside any dev implementing a window of course).
And add at the beginning of myspaces.js the js code of the exemple (without forgetting the essential window.addEvent….)
You should then have squares at the bottom of your myspaces page that you can drag and drop.

The next step is to include drag and drop inside the panel where the contents and spaces usually appear in the myspaces page. And it is not as easy as I though. Just adding the squares in the myspacespanel.get.html.ftl wont do the trick.

You ll have to add the function that implement the drag and drop at another place in myspace.js. But dont take out the window.addevent at the beginning of the file, it is needed.
I m not an expert (more like a beginner…) at javascript so it may not be the best place but you ll have to add the fonction to each space that composes the myspacepanel area.
So inside the function parseSpacePanels: function() and after spaces.each(function(space, i)
      {
Put the function that implements the drag and drop but change window to space

space.addEvent('domready', function() {
…..

‍‍‍‍‍

Now the squares inside the content's panel can be dragged and dropped though, the movements are slow and sometimes the squares get far away of the mouse. I guess that must come from all the resize of the content's rows and that there is a function about drag and drop defined for the main window and each space inside the content's panel.

Finnaly I tried to make the icons draggable and for that I simply changed a little something

space.addEvent('domready', function() {
   // HERE IS WHAT YOU READ IN JS CODE

var fx = [];
 
$$('#draggables div').each(function(drag){
   new Drag.Move(img, {
      droppables: $$('#droppables div')
   });
 

‍‍‍‍‍‍‍‍‍‍‍‍‍

and I ve put my list in myspacespanel between a dev id=draggable.
If you let the squares, you ll get a big mess so I advise you to erase them because there would be some conflicts about the ids that should be unique and arent. Erase them in myspaces and in myspacespanel.
I can click on the icons and drag them though when I release the mouse button I open the file I ve been dragging and now that the icons are draggable they are not part of the description of the content so they are problem when a row gets bigger. The icon gets in front of the text detail.

Now I ll have to code the dropping and lessen the impact of drag and drop on the visuals of the myspaces page.
For that I though that I should first when I click on an icon create a replica of this icon that will follow the mouse and this icon will dissapear when the mouse is released, but I dont know how to do that yet.


If anyone can think of a better way to drag and drop feel free to do some remarks. I m well aware that right now I m only doing some quick and "dirty" work, though I hope it ll help some people save some time when beginning to think about this problem.


Regards
Seraphon who ll stop doing such long posts to try to look smart….

[seraphon]

Hi yet again

So here it is I have somehow implemented a nice drag and drop though there are still little bugs and sadly ther are just the animation of drag and drop because I still havent figured out how to move a file in javascript…

So anyways I m going to share the lttle bit of code I ve done though seeing the limited popularity of this subject I wont describe to much.


This is how my myspacespanel2.get.html.ftl looks like:

<#assign user=person.properties.userName>
<#assign count=0>
<#assign weekms=1000*60*60*24*7>


<div id="draggables">
<#list companyhome.nodeByReference[args.h].children?sort_by('name') as d>

 
   <#if (d.isDocument) && 
        ((args.f="0") ||
         (args.f="1" && d.isContainer) ||
         (args.f="2" && d.isDocument) ||
         (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)) ||
         (args.f="4" && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1)))>
   <#assign count=count+1>
   
   <div class="spaceRow spaceRow${(count % 2 = 0)?string("Odd", "Even")}">
  <div style="display:none"><img class="spaceType" alt="fichier" ></div>
   
   
      <div class="spaceIcon">
     
         <#if d.isDocument && (d.mimetype = "image/gif" || d.mimetype = "image/jpeg" || d.mimetype = "image/png")>
           
<div class="dragg">
         <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="20" height="20" src="${url.context}${d.url}?${d.size}" border=0></a>
         <div style="display:none"><img class="spaceIconImage64" alt="" width="64" height="64" src="${url.context}${d.url}?${d.size}"></div>
</div>
       
         <#else>
            <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
         <div style="display:none"><img class="spaceIconImage64" alt="" width="64" height="64" src="${url.context}${d.icon64}"></div>
       </#if>
         
      </div>
      <div class="spaceItem">
         ${d.name?html}
         <span class="spaceInfo" onclick="event.cancelBubble=true"; AlfNodeInfoMgr.toggle('${d.nodeRef}',this);">
            <img src="${url.context}/images/icons/popup.gif" class="popupImage" width="16" height="16" />
         </span>
      </div>
      <div class="spaceDetail">
         <table cellpadding="2" cellspacing="0" border="0">
            <tr>
               <td>
                  <span class="spaceMetaprop">Description:</span> <span class="spaceMetadata"><#if d.properties.description?exists>${d.properties.description?html}<#else> </#if></span><br />
                  <span class="spaceMetaprop">Modified:</span> <span class="spaceMetadata">${d.properties.modified?datetime}</span><br />
                  <span class="spaceMetaprop">Modified By:</span> <span class="spaceMetadata">${d.properties.modifier}</span>
               </td>
               <td width="24"> </td>
               <td>
                  <span class="spaceMetaprop">Created:</span> <span class="spaceMetadata">${d.properties.created?datetime}</span><br />
                  <span class="spaceMetaprop">Created By:</span> <span class="spaceMetadata">${d.properties.creator}</span><br />
                  <span class="spaceMetaprop">Size:</span> <span class="spaceMetadata">${(d.size/1000)?string("0.##")} KB</span>
               </td>
            </tr>
         </table>
      </div>
      <div class="spaceResource spacesAjaxWait" id="${d.nodeRef}"></div>
   </div>
   </#if>
</#list>   
   </div>
   
   
   
   <div id="cart">
<#list companyhome.nodeByReference[args.h].children?sort_by('name') as d>
   
   
   <#if (d.isContainer) && 
        ((args.f="0") ||
         (args.f="1" && d.isContainer) ||
         (args.f="2" && d.isDocument) ||
         (args.f="3" && (d.properties.creator == user || d.properties.modifier == user)) ||
         (args.f="4" && (dateCompare(d.properties["cm:modified"],date,weekms) == 1 || dateCompare(d.properties["cm:created"], date, weekms) == 1)))>
      <#assign count=count+1>
   
   <div class="spaceRow spaceRow${(count % 2 = 0)?string("Odd", "Even")}">
   <div style="display:none"><img class="spaceType" alt="space" ></div>
      <div class="spaceIcon">
         <#if d.isDocument>
            <a href="${url.context}${d.url}" target="new" onclick="event.cancelBubble=true"><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border=0></a>
         <#else>
            <#– the component parts need to build up an encoded url to the outer webscript –>
            <#– the client-side url encoder method of the outer webscript runtime will be used –>
            <span class="spaceNavLinkUrl">${url.serviceContext}/sample/myspaces2?f=${args.f}&amp;p=${args.p}/${d.name}</span>
            <span class="spaceNavLinkImg" style="display:none" ><img class="spaceIconImage" alt="" width="16" height="16" src="${url.context}${d.icon16?replace(".gif",".png")}" border="0"></span>
         </#if>
         <div style="display:none"><img class="spaceIconImage64" alt="" width="64" height="64" src="${url.context}${d.icon64}"></div>
      </div>
      <div class="spaceItem">
         ${d.name?html}
         <span class="spaceInfo" onclick="event.cancelBubble=true"; AlfNodeInfoMgr.toggle('${d.nodeRef}',this);">
            <img src="${url.context}/images/icons/popup.gif" class="popupImage" width="16" height="16" />
         </span>
      </div>
      <div class="spaceDetail">
         <table cellpadding="2" cellspacing="0" border="0">
            <tr>
               <td>
                  <span class="spaceMetaprop">Description:</span> <span class="spaceMetadata"><#if d.properties.description?exists>${d.properties.description?html}<#else> </#if></span><br />
                  <span class="spaceMetaprop">Modified:</span> <span class="spaceMetadata">${d.properties.modified?datetime}</span><br />
                  <span class="spaceMetaprop">Modified By:</span> <span class="spaceMetadata">${d.properties.modifier}</span>
               </td>
               <td width="24"> </td>
               <td>
                  <span class="spaceMetaprop">Created:</span> <span class="spaceMetadata">${d.properties.created?datetime}</span><br />
                  <span class="spaceMetaprop">Created By:</span> <span class="spaceMetadata">${d.properties.creator}</span><br />
                  <span class="spaceMetaprop">Size:</span> <span class="spaceMetadata">${(d.size/1000)?string("0.##")} KB</span>
               </td>
            </tr>
         </table>
      </div>
      <div class="spaceResource spacesAjaxWait" id="${d.nodeRef}"></div>
   </div>
   </#if>
</#list>
</div>



<#– hidden div with the count value for the page –>
<div id="spaceCountValue" style="display:none">${count}</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I ve added a few little things in myspaces.get.html.ftl

<!–in the CSS part–>
.spaceIcon  
{
   float: left;
   padding-left: 16px;
   padding-top: 4px;
      position: relative;
}
‍‍‍‍‍‍‍‍‍‍‍

And finnaly in the myspaces.js

//at the beginning of the file and necessary for drag and drop, dont know //why thought
window.addEvent('domready', function() {
   // HERE IS WHAT YOU READ IN JS CODE
 
var drop = $('cart');


 
$$('#draggables div').each(function(dragg){
dragg.addEvent('mousedown', function(e) {
      e = new Event(e).stop();
 
      var clone = this.clone()
         .setStyles(this.getCoordinates()) // this returns an object with left/top/bottom/right, so its perfect
         .setStyles({'opacity': 0.4, 'position': 'absolute' })
         .addEvent('emptydrop', function() {
            this.remove();
            
         }).inject(document.body);
 
      
 
      var drag = clone.makeDraggable({
         droppables: [drop]
      }); // this returns the dragged element
 
      drag.start(e); // start the event manual
   });
});
 
});   
……..


   parseSpacePanels: function()
   {
      var spaces = $$('#spacePanel .spaceRow');
      var items = $$('#spacePanel .spaceItem');
      var infos = $$('#spacePanel .spaceInfo');
      var details = $$('#spacePanel .spaceDetail');
      var icons = $$('#spacePanel .spaceIcon');     //added
      var imgs = $$('#spacePanel .spaceIconImage');
      var imgs64 = $$('#spacePanel .spaceIconImage64');
      var resources = $$('#spacePanel .spaceResource');
     var types = $$('#spacePanel .spaceType');     //added
……..
……..
      spaces.each(function(space, i)
      {
         var item = items[i],
          icon = icons[i],      //added
             info = infos[i],
             detail = details[i],
          type = types[i],     //added
             img = imgs[i],
          dzone = new Array(),     //added
          nzone = 0,                    //added
             resource = resources[i];
….
….
//the following is to be added inside the spaces.each loop and implements //the actual drag and drop inside spacePanel

//in order to have a list of the folders
      spaces.each(function(ic, i)    
      {
         if (types[i].getProperty('alt')=="space")
         { 
         dzone[nzone]=ic;
         nzone++;
         }
         });
       
       $('spacePanel').addEvent('domready', function() {  
if (type.getProperty('alt')=="fichier" ){        
icon.addEvent('mousedown', function(e) {
      e = new Event(e).stop();      
      var clone = this.clone();
                  
//creates a clone that is transparent and if dropped elsewhere than on a //spaces row will go back to its initial [place then dissapear
         clone.setStyles(this.getCoordinates()); 
         var fx = new Fx.Styles(clone, {duration: 1000, wait: false});
         var lefte = this.getLeft();
         var tope =this.getTop();   // this returns an object with left/top/bottom/right, so its perfect
         fx.options.duration=500;
         fx.options.transition = Fx.Transitions.Cubic.easeInOut;
         clone.setStyles({'opacity': 0.4, 'position': 'absolute' });
                  
         clone.addEvent('emptydrop', function() {
         
         fx.start({   //start the return animation
            'top': tope,
            'left': lefte
            }
            );
         setTimeout(function(){clone.remove();},500);
            

//if the array dzone is used here an unknown error occurs
                  spaces.each(function(ic, i)
      {
         if (types[i].getProperty('alt')=="space")
         { 
//it is necessary to remove these events or there will be errors
         spaces[i].removeEvents('drop');
         spaces[i].removeEvents('over');
         spaces[i].removeEvents('leave');;
         }
         });
            
            }
         );
         clone.inject(document.body);
         
   
/*        code usind dzone but not working
         for( var y = 0; y < nzone; y++ ) {
         dzone[y].addEvents({
         'drop': function() {
         
         for( var k = 0; k < nzone; k++ ) {
            dzone[k].removeEvents('drop');
            dzone[k].removeEvents('leave');
            dzone[k].removeEvents('over');
            }
            clone.remove();
            item.clone().inject(dzone[y]);
            
         },
         'over': function() {
            
         },
         'leave': function() {
            
         }
      });
};*/
         
      spaces.each(function(ic, i)
      {
         if (types[i].getProperty('alt')=="space")
         { 
         spaces[i].addEvents({
         'drop': function() {
         
         spaces.each(function(ic2, j)
      {
         if (types[j].getProperty('alt')=="space")
         { 
         spaces[j].removeEvents('drop');
         spaces[j].removeEvents('over');
         spaces[j].removeEvents('leave');;
         }
         });
            clone.remove();
            item.clone().inject(spaces[i]);
            
         },
         'over': function() {
            
         },
         'leave': function() {
            
         }
      });
         }
         });
         

 
      var drag = clone.makeDraggable({
         droppables: dzone
      }); // this returns the dragged element
 
      drag.start(e); // start the event manual
   });
   }
});


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Now here are the problems of my code.
For now the most clear is that it is useless…. It doesnt move files. It is just a cool animation.
Secondly the icons, from which I create clones that are draggable have an relative position in regards of the windows so when in the space panel  you have to use the mouse wheel there are problems of position such as when you click on an file's icon, the ghost appear way below the position you just clicked because for the windows thats where the icons actually is.

Another problem is that when there are a lot of files and that the spacepanels get a scrolling panel, when you drag an icon you cant use the mouse wheel to scrool down or up. Maybe putting spaces in another panel could be useful here. Like instead of having a thumbnail for spaces and files, havind 2 panels would be more practical.

Finally, sadly when you add the draggable aspect to an icon you cant open a file by clicking on its icon anymore because the drag action takes precedence on the open action.

I hope this can prove useful to someone and I hope to get help for the actual moving files part such as, what bean should I use? and how does the yahoo.connect works for it seems it is essential when wanting to act on Alfrescos repository.

Regards
Seraphon

[seraphon]

Hi

Can no one help me at all? or is there even people reading these posts?
I have trouble inputting the moving aspect of my drag and drop.
In the .get.html.ftl files I have no problem to retrieve nodenames and noderef by calling an function with a onMouseDown event but that only useful for calling the delete funcion already coded.

I personally dont understand how those Yahoo calls works.
For exemple in the delete function there is

  deleteItem: function(name, noderef)
   {
      if (confirm("Are you sure you want to delete: " + name))
      {
         // ajax call to delete item
         YAHOO.util.Connect.asyncRequest(
            "POST",
            getContextPath() + '/ajax/invoke/PortletActionsBean.deleteItem',
            {
               success: function(response)
               {‍‍‍‍‍‍‍‍‍‍‍

But it seems to me that the name and noderef in argumetn arent even used. and I dont know what available beans are inside getContextPath() + '/ajax/invoke.
Can someone tell me what is all this about?

I did try to use the javascript API specific to Alfresco but it doesnt work at all.

I cant put in argument of a function called from the .get.html.ftl file a node nor can I use the specific object described in http://wiki.alfresco.com/wiki/JavaScript_API#Introduction

In the file myspacespanel.get.html.ftl

<#list companyhome.nodeByReference[args.h].children?sort_by('name') as d

……………….   
<div class="dragg">
         <a href="${url.context}${d.url}" target="new" onmouseDown='MySpaces.dragItem("${d.name}", "${d.nodeRef}","${d}");' >…………….
</div>
       ‍‍‍‍‍‍‍

After that I put inside myspaces.js

      dragItem: function(name, noderef , currentnode){
   MySpaces.Npath=noderef;
   MySpaces.Nnode=name;
//   MySpaces.MoveNode=companyhome.parent.childByNamePath(somepath);
//var node=companyhome.childByNamePath(somepath);
   MySpaces.likethat=MySpaces.likethat+1;
//   if (MySpaces.MoveNode.name==name) {Myspaces.likethat=20;}
   //alert("voila le nom du node enregistre " + MySpaces.MoveNode.name);
   $('spacedisk').setHTML(MySpaces.likethat);   //to see if there is an event triggered
         },‍‍‍‍‍‍‍‍‍‍‍

As you cans see I tried many things in my spaces.js
currentnode should be a node but inside firebug when I execute my script, it is undefined…
I also tried to get the path and use the companyhome.childByNamePath(somepath); method but weirdly enough in firebug it tells me that companyhome isnt defined.
I m lost here….
Can I please have some help?
I still have some problem to understand how the javascript API works with freemarker.


Regards
Seraphon who feels lonely doing his drag and drop feature…

[mikeh]

Hi,

But it seems to me that the name and noderef in argumetn arent even used. and I dont know what available beans are inside getContextPath() + '/ajax/invoke.

Look further down the parameter list for the asyncRequest() call:

"noderef=" + noderef‍

I also tried to get the path and use the companyhome.childByNamePath(somepath); method but weirdly enough in firebug it tells me that companyhome isnt defined.

You're still confusing client-side javascript with server-side javascript. The two are very different and you need to understand that difference in order to proceed:

Client-side. Runs on the web browser itself. Usually contains functions to manipulate the DOM either in response to user input, or as a result of an AJAX request. It has no access to, or direct control over entities such as companyhome, nodes, spaces, etc.

Server-side. This is the Alfresco Javascript API. It runs on the Alfresco server and is processed before the Freemarker template. It's purpose is to produce one or more data models for the Freemarker template to use in order to render the HTML.

Where you need to have a web browser send an action to the server to act upon a specific node, you need to pass across the nodeRef as a string in either a GET or POST request. The server-side code then retrieves this argument (again as a string), then uses a Lucene query to get the node associated with this nodeRef and finally you can do your server-side processing as required on that node. You can't pass nodes across to the web browser as objects - the Firefox/IE/Safari/whatever Javascript engine simply doesn't know what they are or what to do with them.


Mike

[seraphon]

Hi thanks for the explanation

Now lets see if I understood it right

My custom javascript myspaces.js is considered client-side for the simple reason it is called by freemarker template.
In order to manipulate objects from Alfresco repository myspaces.js must call another javascript that is server-side such as the method YAHOO.util.Connect.asyncRequest.
So to retrieve a node and then work on the said node I should do a code looking like this?

YAHOO.util.Connect.asyncRequest(
         "GET",
         getContextPath() ,
         {
            success: function(response)
            {
               //response is my node and here I can use javascript node API
            },
            failure: function(response)
            {
               alert("Error during check out of item: " + response.responseText);
            }
         }, 
         "noderef=" + noderef
      );
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Obviously If I m posting my code here as a question it is because I tried that and it didnt work but I hope I m facing the good way.

Hope I m not abusing your time.

Regards
Seraphon

[mikeh]

To be completely accurate, the myspsaces.js is client-side because it is included by the Freemarker template, not called by it. The web browser will download the .js file alongside the HTML page output by the Freemarker engine.

The myspaces.js script can never manipulate nodes, because it is a client-side script. The YAHOO.util.Connect.asyncRequest client-side function creates an XmlHttpRequest (i.e. AJAX) request, passing the noderef (as a string) to a server bean or server-side template. This server-size code then looks up the node, processes it as required and returns the result as HTML. This result can be a simple string, e.g. "Node processed" or some complex HTML to be displayed to the user.

So your "response is my node and here I can use javascript node API" doesn't work because you're on the client-side at this point. You can ONLY use the Javascript API on the server, i.e in the bean or template that the AJAX request addresses.


I think you would be better off starting from a very simple example so you can completely understand how these templates, server- and client-side javascripts interact.

Mike

[seraphon]

thanks for the explanation.

Looks like the only way then to move a node in my case is to create a server bean that will do it.
But it looks like I ll have to abandon here because I have no idea how to create beans(I barely know what beans are!) and put them inside the Alfresco librarie. Oh I ve read some wikis and forum thread about it, but I can say I understood nothing about it and I think I dont have the time for it. I ll have to give in one month and a half an analyse of Alfresco, so I better go do something else. I just wanted to give my analyse with an exemple of a custom webscript.

I at least did a little customisation in webscripts and it should be enough for my employers to see the possibilities Alfresco has to offer if a novice in javascript,xml like me can do such a thing. THough I must say webscripting is very hard for the novices.

I hope someone will be able to do this little drag and drop feature.
And just to give a little idea before going, I think it would be nice to add somewhere on the myspace page the icon of a trashcan and be able to drag content to it to delete them. I think about this because I took out the preview of each content because the animation was a burden for my server, so I had no more delete possibilities. It shouldnt be too difficult because there is already a delete bean but I couldnt make my trashcan into a droppable zone.

Anyways good luck to the person who ll take on this problem next.
I ll try now to look at what else Alfresco has to offer but I must say it doesnt offer much to users with limited knowledge in java,xml,javascript and the like, such as me….



Regards
Seraphon completely demoralised by his Alfresco adventure….

[kevinr]

THough I must say webscripting is very hard for the novices.

No it's not. A novice developer only needs to know web technologies such as Javascript, html and then learn a little FreeMarker to build some amazing things that can be deployed into a running Alfresco server. The problem is that you are trying to customise what is in fact quite a complex portlet component. If you wrote something yourself from scratch using webscripts - starting with something simple - you would find it is not hard. The hard part you are dealing with is some very complex client-side javascript magic - nothing to do with the webscript framework itself.

Thanks,

Kevin