topic Re: how to add drag and drop in the myspace droplet in Alfresco Archive

how to add drag and drop in the myspace droplet

seraphon — Fri, 06 Jul 2007 07:13:18 GMT

HiMay 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.j

Re: how to add drag and drop in the myspace droplet

mikeh — Fri, 06 Jul 2007 09:17:35 GMT

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

Re: how to add drag and drop in the myspace droplet

seraphon — Mon, 09 Jul 2007 08:56:52 GMT

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….

Re: how to add drag and drop in the myspace droplet

seraphon — Thu, 12 Jul 2007 04:36:04 GMT

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

Re: how to add drag and drop in the myspace droplet

seraphon — Mon, 16 Jul 2007 08:01:14 GMT

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…

Re: how to add drag and drop in the myspace droplet

mikeh — Mon, 16 Jul 2007 09:45:51 GMT

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

Re: how to add drag and drop in the myspace droplet

seraphon — Tue, 17 Jul 2007 03:53:14 GMT

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

Re: how to add drag and drop in the myspace droplet

mikeh — Tue, 17 Jul 2007 08:53:44 GMT

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

Re: how to add drag and drop in the myspace droplet

seraphon — Tue, 17 Jul 2007 09:37:10 GMT

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….

Re: how to add drag and drop in the myspace droplet

kevinr — Tue, 17 Jul 2007 11:26:36 GMT

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

Re: how to add drag and drop in the myspace droplet

seraphon — Wed, 18 Jul 2007 03:42:46 GMT

Hi

I must say I am a novice developper and indeed the basic stuff is easy to do with the webscript. But correct me if I m wrong but the job of a developper using webscripts will certainly not be doing simple stuff with webscript.

In my opinion, the strongpoint of webscript is to be able to do a customised GUI that is able to act on Alfresco's repository and to be able to test the webscript instantanously by just clicking on the refresh button of your web browser. But nowadays companies, and most of all the usual users in those companies always want to be able to use a software, with minimal to no knowledge of the said software needed. There are simply users who sometimes know very little of computers.

Indeed those users can be quite bothersome. They always complain about a software not working when its just them not knowing how to use them.
Sadly I must say from the little survey I did in my company, most of my colleagues though Alfresco wasnt intuitive to use. They do not say its not well done nor the that the functionnalities are hard to use. Its just that there were a learning curve to Alfresco and they had to read the little tutorial I made for them. And it seems that before having a massive deployment to more users I have to make Alfresco more user friendly to use the term of my employer, because lets face it, a lot of people are too lazy (or busy if you listen to them) to sacrifice time for that learning curve of Alfresco.
Thats where useful things like webscripts come in.

But here comes my problem which isnt really a problem, which is that to do a friendly customised GUI for the lazy user, is not easy at all, and is certainly not something a novice could do. I dont want to be mean or anything but gavin admit that the myspaces portlet isnt something easy. It is already a complex code by itself. But even though the myspace portlet is nice, it is not really usefull. The animation slow down the application quite a lot and with hundreds of content it gets quite bad. The design is of course a question of taste but is sometime very important, and it wasnt easy at all to change some design in myspaces portlet. And even though it is a little bit more user friendly than the basic Alfresco interface, it is still not enough.

I wont list the crazy stuff my employers want but I repeat that in big companies nowadays the users are very,very hard to please, and from what I ve seen webscript is one way to please them. It is just again my opinion, but it is an opinion based from my experience with Alfresco, pleasing those future users wont be easy. Adding drag and drop which is a difficult task, is considered by most like normal stuff, almost ordinary.
So for a novice, it wont be easy to please the users with webscript (needing expert isnt a bad thing).
But webscript still is a wonderful tool because the alternatives to do custom GUI are as demandin if not worse.

I hope nobody took offence in what I wrote for it was not the aim, I wanted to do a constructive analyse of what webscript could do. But if what I wrote just look like ranting to you than I excuse myself.

Regards
Seraphon
Internship is like a box of chocolate…. You never know what you ll get….

Re: how to add drag and drop in the myspace droplet

fselendic — Thu, 19 Jul 2007 09:15:18 GMT

+1 on top post. Practically EVERY user we showed or installed Alfresco to, says it is a too click intensive and nonintuitive. We are pushing it hard for some big projects, because it IS a great piece of software, but, it is hard to compete with the guys showing off Sharepoint, which kills Alfresco usability vise. Then we end up with plans for 2-3 months project that we should do for free, trying to match Sharepoint ease of use for end customer.

That's really a shame. Alfreso is fantastic software, just to hard to use for casual users. It is easy when you have a power sponsor or decision maker that orders anyone in company to use it, but it is a VERY tough sell when customer chooses between Sharepoint and Alfresco. Actually, we lost every single fight.

Btw, some head to head comparison paper Alfresco vs Sharepoint would be a great addition for our sales. I looked and couldn't find any.

Re: how to add drag and drop in the myspace droplet

lintonb — Thu, 19 Jul 2007 14:17:13 GMT

Hi,

Do you have usability findings/reports we could look over?

Thanks,
Linton

Re: how to add drag and drop in the myspace droplet

fselendic — Thu, 19 Jul 2007 16:27:22 GMT

Hi,

Do you have usability findings/reports we could look over?

Thanks,
Linton

I'll make my american partner to provide one. He was just playing with Sharepoint 2007 or whatever the name of the new one is. And was impressed. I never use or evaluate MS products, but he knows Sharepoint and Alfresco well, which could be of great help.

Re: how to add drag and drop in the myspace droplet

seraphon — Fri, 20 Jul 2007 07:17:50 GMT

Hi

fselendic: I m also very interested by such an analysis/findings/reports.
I wanted myself to do a comparison between Alfresco and another opensource CMS like plone (though I miss the motivation now).

Anyways back to my topic.
After some hardship and some stubornness I finally managed to make a drag and drop that actually move a file in a space!
It really took me some time and I had to sacrifice many of my braincells but it was worth it. It is quite fulfilling to see a code that actually works and I couldnt have done it without webscript. Webscript is great and I indeed didnt have to do any java at all.

So here is my code in case it interest someone

The only thing I added is a yahoo call to a javascript located in Alfresco's repository inside the 'drop' function of my drag and drop code

      YAHOO.util.Connect.asyncRequest(
         "GET",
         getContextPath() + "/command/script/execute?scriptPath=/Company%20Home/mytest.js&contextPath=" + MySpaces.Npath +"/"+ MySpaces.Nname+"&s="+imgs64[i].getProperty('name'),
         {
            success: function(response)
            {
               
                  alert("cool " + response.responseText);
               
            },
            failure: function(response)
            {
               alert("Error during check out of item: " + response.responseText);
            }
         }, 
        "noderef=" + MySpaces.Nref
      );
            ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and that calls the following file mytest.js

var scriptResult = document.parent.childByNamePath(args.s).name; 
var folder = document.parent.childByNamePath(args.s); 
var coool="ca a marche!!" 
 
function result() 
{  if (document.move(folder)) scriptResult=coool;
   //var testingFolder = userhome.childByNamePath("QA/Performance/Testing");.
   return (scriptResult); 
} 
result();
‍‍‍‍‍‍‍‍‍‍‍

well even though this works I still have a lot of improvements to do such as making spaces draggable. I also made a trashcan that delete files dragged on it but there are some problem afterwards…

I d also like to have some precision on some weird behavior about my code. After many test I saw that for the javascript API on nodes to be aknowledged in mytest.js I had to keep the noderef and add a contextPath argument Why?.

Even though right now there arent many posts about webscripts, do you think there is going to be a forum created for webscripts discussion only?
After this little manipulation I can say webscript really gives a lot of possibilities to Alfresco. It is a really powerful tool because it not only doesnt need java knowledge but what I though was great was that I could test my code right away by just clicking on the refresh button of my web browser.

I hope the Alfresco's engineer will keep improving this really useful side of Alfresco and keep up with their great work.

Regards
Seraphon