topic Re: Adding YUI Widgets Using Webscripts in Alfresco Archive

Adding YUI Widgets Using Webscripts

stevericker — Sat, 26 Dec 2009 03:51:33 GMT

Hello All,We're adding a YUI widget (a treeview) as a dashlet. But we have some questions as to how to do this correctly using webscripts. There seem to be several examples of similar things built into Share, but we get lost as we try to plow through all the technologies that are involved (e.g., Y

Re: Adding YUI Widgets Using Webscripts

pqr — Tue, 29 Dec 2009 06:09:59 GMT

Hi steve

Ans 1
To follow MVC pattern better, put your YUI treeview, in the client side .js file.

And it doesnt work for you – then please confirm that, your changes in *.js files do reflect *-min.js file as Share will consider minified javascript file.(This might be one reason)

Ans 3

I am not sure,,,, but I dont think you can use model object in javascript,,

Re: Adding YUI Widgets Using Webscripts

stevericker — Tue, 29 Dec 2009 15:14:03 GMT

Niketa,

Thanks for your help. Unfortunately putting the YUI treeview javascript code into the client side *.js file (and into *-min.js while adding <script> references to those files in *.get.head.ftl) causes this error in Firebug (where the offending command is "tree.draw()" and "treenav" is our code, not YUI code):

H is null
anonymous()          treeview-min.js (line 8)
treenav.js()         treenav.js (line 37)
[Break on this error] }else{H.expand();H=(H.children.length||n…&&!C.isFunction(this[E])){this[E]=G[E];\n
                     treeview-min.js (line 8)
‍‍‍‍‍‍

It seem like the problem is that *.js gets executed in the <head> of the rendered page before the <div> tag in the <body> is defined, so there ends up being no place for YUI to put the treeview?

I'm not sure if the treeview widget is somehow special, but I see that there are other YUI widgets being used throughout Share w.o. any trouble. I took the beginner's approach and just tried to slap up a YUI widget like I would outside of a Surf/Share/webscript application.

Thanks in advance for any other thoughts.

Re: Adding YUI Widgets Using Webscripts

zaizi — Mon, 04 Jan 2010 21:07:53 GMT

Take a look at the other examples in Share. You can use the YUILoaderHelper to fire once the required script files are loaded and elements are available.

Alfresco.util.ComponentManager.register(this);
Alfresco.util.YUILoaderHelper.require(["button", "menu", "container"], this.onComponentsLoaded, this);‍‍

The javascript in *.get.js get executed within Alfresco server. The remote.call method is available there. It is not available in browser client side javascript. Although they are both javascript files, they are executed in two completely different contexts and the functions / objects available to them are completely different.

In your client side javascript define a javascript object with a constructor. In your response template initialise your custom object like you've initialised the tree. When it is initalised in the client side your code can call back to Alfresco webscript to fetch data model for the tree (or this can be included in the constructor).

Re: Adding YUI Widgets Using Webscripts

stevericker — Mon, 04 Jan 2010 22:34:18 GMT

Zaizi,

Thank you very much for your suggestions and comments. Real helpful that you spelled out that the javascript "remote.call" is only available with server side javascript, which for us would be the controller script of the webscript that is our new dashlet (and not available from any client side javascript including script that we embed within our response template).

Your last suggestion worked. We put the constructor in our client side *.js file (which we then add to *.get.head.ftl):


var tempobject = [ { type: "text", label: "node1" } ];

//instantiate the TreeView control:
var tree = new YAHOO.widget.TreeView("treeDiv1", tempobject);
‍‍‍‍‍‍

For our response template, we just define the element (<DIV>) and then render (initialize?) the tree within some embedded script:

<html>
    <head>
    </head>
    <body>

    Test dashlet
    <div id="treeDiv1">tree</div>

    <script type="text/javascript">//<![CDATA[

    //render it
    tree.draw();

    //]]></script>

    </body>
    </html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This is probably just a mental block but the problem is that we still can't think of a way to access Share server information (like a list of all of the Share sites)? Here're the things we tried that DON'T work:

- from our response template (*get.html.ftl), using javascript, tried to access "remote.call" (which doesn't work for the reasons you explained)
- also from our response template (*.get.html.ftl), using javascript, tried to access the model (model.somevariable as populated from the controller)

Our constructor for the treeview is essentially still on the client side (now in a *.js file which is included via *.get.head.ftl as mentioned above). So it's still not clear how we could get access to "remote.call" or the model from there? The only way it seems that the model can be accessed is via Freemarker (which would make sense because the Freemarker engine is server side)? If that's the case though, we can't seem to pass that information back to any client side javascript (which is where all the YUI widget configuration is happening).

We tried to look at some of the examples but couldn't see anything where server side javascript root objects (for example remote.call) needed to be passed to client side javascript. Most of the examples (like the my-sites webscript/dashlet) seem to pass the model to the Freemarker template (not javascript embedded in that). We also looked at some YUI widgets (like buttons) but those seem to have some kind of Alfresco "wrapper" around them and have special constructors (like Alfresco.util.createYUIButton). There doesn't seem to be something like that for a treeview. (We're still investigating YUILoader / YUILoaderHelper.)

I guess the basic question now boils down to: how do you pass server side information (where you have access to a big API) over to client side javascript (when building a Share dashlet)?

Darn, are we just missing something basic in our understanding? Thanks again.

Re: Adding YUI Widgets Using Webscripts

mikeh — Mon, 04 Jan 2010 23:05:40 GMT

The key part you're missing is to populate the client-side JavaScript object by getting Freemarker to generate the code.
For example, documentlist.get.html.ftl is similar to:

<script type="text/javascript">//<![CDATA[
   new Alfresco.DocumentList("${args.htmlid}").setOptions(
   {
      siteId: "${page.url.templateArgs.site!""}",
      containerId: "${template.properties.container!"documentLibrary"}",
      usePagination: ${(args.pagination!false)?string},
      showFolders: ${(preferences.showFolders!false)?string},
      simpleView: ${(preferences.simpleView!false)?string},
      highlightFile: "${page.url.args["file"]!""}",
      vtiServer: ${vtiServer}
   }).setMessages(
      ${messages}
   );
//]]></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍

As you can see, the client-side Alfresco.DocumentList class is being passed parameters through the setOptions() function; parameters which are generated at runtime via Freemarker directives; in turn populated either by the Surf framework or from the web-tier controller script documentlist.get.js. Parameters page.*, template.* and args.* are examples of the former, preferences.* and vtiServer the latter.

Thanks,
Mike

Re: Adding YUI Widgets Using Webscripts

zaizi — Mon, 04 Jan 2010 23:06:26 GMT

Two options.

Option 1:
In your server side controller javascript get a list of Share sites, etc. and other information using objects / functions available. See http://wiki.alfresco.com/wiki/JavaScript_API. Add them to the model and in your freemarker add pass them through to the client side javascript constructor.

In *.get.head.ftl



var shareSites = [{ "sites": <#list sites as site>"${site.name}" <#if site_has_next>,</#if></#list> } ];

var tempobject = [ { type: "text", label: "node1" } ];

//instantiate the TreeView control:
var tree = new YAHOO.widget.TreeView("treeDiv1", tempobject, shareSites);

‍‍‍‍‍‍‍‍‍‍

This lets you pass the information from the model to the client side javascript. The Freemarker template prints out the model.

This easy and is pretty static in the sense the user will have to refresh the page to list any new sites.

Option 2:
You use client javascript code to call a remote Alfresco web script to load the information in dynmically. This is more work. YUI provides Connection Manager (http://developer.yahoo.com/yui/connection/) for these purposes. Alfresco provide a nice wrapper utility to call web scripts more easily. The following example client side javascript function does an AJAX call to a webscript to get a list of events for the Calendar.


      _loadData: function()
      {
         Alfresco.util.Ajax.request(
         {
            url: Alfresco.constants.PROXY_URI + "calendar/eventList",
            dataObj:
            {
               "site": this.siteId
            },
            successCallback:
            {
               fn: this.onDataLoad,
               scope: this
            },
            failureMessage: Alfresco.util.message("load.fail", "Alfresco.CalendarView")
         });
      },
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Adding YUI Widgets Using Webscripts

stevericker — Mon, 04 Jan 2010 23:17:33 GMT

Mike and Zaizi,

Thanks a ton! Both those solutions seem really powerful and straightforward:

- Populate client-side JavaScript using Freemarker (which has access to the model)
- From client-side JavaScript, obtain server side information through a data webscript

…The light bulb finally turned on inside! I'll study the examples as well. Thanks again.

Re: Adding YUI Widgets Using Webscripts

zladuric — Wed, 20 Jan 2010 20:51:19 GMT

I can only agree with Steve, this really lit the bulb above my head! Is something this simple and explanatory available on the wiki? Didn't see it till now.

Anyway, I have an additional question regarding js.
I would like to do a remote call or an AJAX call to the repo from share, but I'm having problems with my arguments passing. I made a .json.ftl webscript in /alfresco, which takes a GET argument (site name) and returns some custom metadata as JSON. Now, when I call it via /alfresco directly, it works. But when I call the webscript from Share I get the following error in the logs
"…freemarker.core.InvalidReferenceException: Expression companyhome.childByNamePath["Sites/"+args.company+"/documentLibrary"] is undefined on line 3, column 8 in…"
Now, I don't understand what I'm doing wrong. Can you please post an example of a remote call with an argument passed correctly?

Re: Adding YUI Widgets Using Webscripts

stevericker — Wed, 20 Jan 2010 21:49:49 GMT

Zlatko,

Could you post the code? I've done a lotta trial and error stuff and maybe it's something that I've come across.

Steve

Re: Adding YUI Widgets Using Webscripts

zladuric — Wed, 20 Jan 2010 23:13:34 GMT

The docprops.get.json.ftl (in /alfresco) looks like:

{
"dokumenti" : [
<#list companyhome.childByNamePath["Sites/"+args.company+"/documentLibrary"].children as child>
        {
            "name" : "${jsonUtils.encodeJSONString(child.properties.name)}" ,
            "nodeRef" : <#if child.isContainer>"FOLDER"<#else>"${jsonUtils.encodeJSONString(child.nodeRef)}"</#if>,
             "clientUser" : "${child.properties["custom:prop1]}",
             "clientPay" : ${child.properties["custom:prop2"]}"
        }<#if child_has_next>, </#if>
</#list>
        ]
}
‍‍‍‍‍‍‍‍‍‍‍‍‍

I just changed the names of custom model namespace and prop from the original script.
When I call it directly ( http://serverort/alfresco/service/sample/docprops.json?company=testtvrtka ) I get a valid JSON in response.
When I call it via remote call ( var data = connector.get("/sample/docprop.json?tvrtka=testtvrtka"); var result = eval ('('+data+')'); ) catalina.out shows the error. So, I guess I'm not sending the argument properly, but I don't know how else to form the call.

Re: Adding YUI Widgets Using Webscripts

mikeh — Wed, 20 Jan 2010 23:17:01 GMT

Could you post the docprops.get.desc.xml please?

Thanks,
Mike

Re: Adding YUI Widgets Using Webscripts

zladuric — Wed, 20 Jan 2010 23:50:26 GMT

Yes, here:

<webscript>
<shortname>Document Property</shortname>
<description>Get doc properties for Share Upload dashlet</description>
<default>json</default>
<url>/sample/docprop.json</url>
<authentication>user</authentication>
<transaction>required</transaction>
</webscript>
‍‍‍‍‍‍‍‍‍

It is not the auth thing, I tried actually manually writting a json in the response, then I can get the result. It is just the argument passing that bugs me.

Re: Adding YUI Widgets Using Webscripts

mikeh — Thu, 21 Jan 2010 02:01:49 GMT

This: var data = connector.get("/sample/docprop.json?tvrtka=testtvrtka");
Should be this: var data = connector.get("/sample/docprop.json?company=testtvrtka");

Thanks,
Mike

Re: Adding YUI Widgets Using Webscripts

zladuric — Thu, 21 Jan 2010 08:39:50 GMT

Hi Mike,

Thanks again. Anyway, I changed the argument name in the /alfresco script, but it's still not processing the argument:

Caused by: freemarker.core.InvalidReferenceException: Expression companyhome.childByNamePath["Sites/"+args.tvrtka+"/documentLibrary"] is undefined on line 3, column 8 in org/alfresco/sample/docprop.get.json.ftl.‍

Can you please point me to an example of how to past GET or POST argument from /share server-side .js or client .js to /alfresco webscript? I tried this in various ways, didn't work.

Re: Adding YUI Widgets Using Webscripts

mikeh — Thu, 21 Jan 2010 11:46:26 GMT

There are loads of examples throughout the Share source code, e.g.

      var connector = remote.connect("alfresco");
      result = connector.get("/slingshot/doclib/container/" + siteId + "/" + containerId + "?type=" + toRepoType(appType));
      if (result.status == 200)
      {
         var data = eval('(' + result + ')');
         containerType = data.container.type;
      }
‍‍‍‍‍‍‍‍

From config/alfresco/templates/org/alfresco/documentlibrary.js

Thanks,
Mike

Re: Adding YUI Widgets Using Webscripts

zladuric — Thu, 21 Jan 2010 12:40:59 GMT

Hi mike,

Well, this still doesn't work:

var connector = remote.connect("alfresco");
      result = connector.get("/sample/docprop.json?tvrtka=" + model.site );
      if (result.status == 200)
      {
         var data = eval('(' + result + ')');
         model.docprop = data["dokumenti"];
}‍‍‍‍‍‍‍

I stripped the webscript to just return the name and nodeRef, and it still doesn't work.
When I call it like this:

http://localhost:8080/alfresco/service/sample/docprop.json?tvrtka=testtvrtka‍

I get a valid json, when I call it through the remote.connect, it triggers the error:

Caused by: freemarker.core.InvalidReferenceException: Expression companyhome.childByNamePath["Sites/"+args.tvrtka+"/documentLibrary"] is undefined on line 3, column 8 in org/alfresco/sample/docprop.get.json.ftl.
‍‍

It's like a wall, can't get through it.

Re: Adding YUI Widgets Using Webscripts

stevegreenbaum — Fri, 29 Jan 2010 14:18:55 GMT

I just found this post and had already started working on a different approach. Is there a third method to make the data available to the YUI widget? I am trying to use Stringify in the controller and then JSON.parse in the HTML .FTL response template. Does this seem feasible? I tried it, but the JSON.parse doesn't complete successfully. Wasn't sure if I didn't implement the stringify correctly or if this just doesn't make sense.

var tempobject = [ { type: "text", label: "node1" } ];
x = json.stringify (tempobject);
model.x = x;

In the template:
jsonObject= JSON.parse(${x});

Re: Adding YUI Widgets Using Webscripts

stevericker — Tue, 02 Feb 2010 23:52:58 GMT

Hi Steve,

I'm not sure you have access to the model (model.x) in the script portion of your template–the model really is for the Freemarker engine I think. So you can try some of the tricks Mike and Zaizi mentioned (like using a ${x.property} Freemarker construct but within your HTML code). It doesn't feel super elegant but that's what a templating engine does I guess (purely just substitutes). Otherwise you can turn your server-side code maybe into a webscript (like Zaizi said) and then call your webscript right from the javascript portion of your template (which would be client-side).

Hope that helps a bit.

Steve

Re: Adding YUI Widgets Using Webscripts

mikeh — Wed, 03 Feb 2010 09:21:11 GMT

var tempobject = [ { type: "text", label: "node1" } ];
x = json.stringify (tempobject);
model.x = x;

In the template:
jsonObject= JSON.parse(${x});

Sorry, hadn't spotted this post until steve r replied… I use that pattern in the DocLib webscripts

model.x = jsonUtils.toJSONString(tempobject);‍

YUI is effectively doing the JSON.parse() part in the DataSource code, so that should work ok as you've got it.

Thanks,
Mike