[xwiki-devs] Macros and JavaScript working together (was Re: [DISCUSSION] XWiki Chart Api & Chart Macro) - xwiki-devs@xwiki.org

2 Jul 2009

On Thu, Jun 25, 2009 at 9:44 PM, Asiri Rathnayake <
asiri.rathnayake(a)gmail.com&gt; wrote:

...
  Hi,

 On Thu, Jun 25, 2009 at 11:53 PM, Niels Mayer &lt;nielsmayer(a)gmail.com&gt;
 wrote:

  Another interesting advanced JS
data-visualization toolkit that would be
 useful to integrate in Xwiki.

 http://vis.stanford.edu/protovis/
 http://www.technologyreview.com/computing/22927/?nlid=2130
 http://flare.prefuse.org/launch/apps/job_voyager 
 Protovis sounds cool, but the way xwiki macros work will make it difficult
 (or messy) to implement a macro that will have to depend on a JS library.
 What we can do is this:

 * Implement the wiki-macro bridge:
 http://jira.xwiki.org/jira/browse/XWIKI-3213 (Basically this will allow
 you
 to convert any wiki content into your personal macro) - I'll finish this in
 a week or so.

 * We use a JSX (?) to get protovis support.

 * Neils can implement a js charting wiki-macro using protovis ;)

 I want to ask other developers, Is this possible? (I have a confusion about
 macros + js working together) 

I have Macros/JS working together all the time, using JSX. I'm certain it's
possible, given the kinds of integration I've been able to do in
Exhibit&Xwiki, e.g.  http://nielsmayer.com/xwiki/bin/view/Exhibit/NPRpods3
...

Here's a simple example, which are tests for my Xwiki integration of
http://www.longtailvideo.com/players/jw-flv-player/  which is the media
player used in the NPRpods3 application above:
http://nielsmayer.com/xwiki/bin/view/Macros/JWPlayer?viewer=code

http://nielsmayer.com/xwiki/bin/view/Macros/JWPlayerJSPL_Test
(xwiki integration of
http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_5-2-4-0.html
 with an improvement,  the JWplayer example doesn't work on Linux/Firefox,
mine does!)
http://nielsmayer.com/xwiki/bin/view/Macros/JWPlayerJSPL_Test?viewer=code
(wiki-code for above)
http://nielsmayer.com/xwiki/bin/jsx/Macros/JWPlayerJSPL_Test
 (the javascript playlist from XWiki.JavaScriptExtension[0])

##
## Load and initialize LoadJS: defines injectJS(url) required by JWPlayer
##
#includeMacros("Macros.LoadJS")##
#loadjs_xwiki_init()##
##
## Load and initialize JWPlayer after LoadJS.
##
#includeMacros("Macros.JWPlayer")##
#jwplayer_xwiki_init()##
##
## Load JavaScript playlist from object XWiki.JavaScriptExtension[0] into
## js variable jwplayer_jspl, used below in parameter to
jwplayer_embed_generic()
## function(jwpl){jwpl.sendEvent(’LOAD’, jwplayer_jspl);}. This function
called
## by jwplayer’s playerReady() calback when player has been instantiated,
and
## causes the javascript-based playlist to get loaded.
##
$xwiki.jsx.use("$doc.fullName")##
...
#set( $jw_name = "$doc.name" )##
#set( $jw_player = "jwplayer_embed_generic(’$jw_name’, ’mpl’,
’&autostart=false&playlist=right&playlistsize=250&shuffle=false&repeat=always’,
function(jwpl){jwpl.sendEvent(’LOAD’, jwplayer_jspl);}, ’100%’, ’385px’);"
)##
#jwplayer_create("$jw_name", "$jw_player")##

http://nielsmayer.com/xwiki/bin/view/Macros/JWPlayerPL_Test  is another test
using playlists.
This also calls JS jwplayer_embed_generic(), but with an external file,
passed as URL/string, instead of creating the playlist in lambda-function as
above.  (
http://nielsmayer.com/xwiki/bin/view/Macros/JWPlayerPL_Test?viewer=code  ):
#set( $jw_player = "jwplayer_embed_generic(’$jw_name’, ’mpl’,
’&autostart=false&playlist=right&playlistsize=250&shuffle=false&repeat=always’,
’/xwiki/bin/view/Macros/JWPlayer_PlayList?xpage=plain’, ’100%’, ’385px’);"
)##

JS functions jwplayer_embed(), jwplayer_embed_generic() and macros
#jwplayer_xwiki_init(), #jwplayer_create() are from
http://nielsmayer.com/xwiki/bin/view/Macros/JWPlayer?viewer=code

---

Going in "the other direction", here's an example of using velocity to
compute results returned by Javascript:
http://svn.xwiki.org/svnroot/xwiki/curriki/branches/curriki-1.8/web/src/mai…

#set( $total_attachments_size  = 0 )        ## javascript:getAttachmentsSize()
#set( $total_attachments_names = [] )       ## javascript:getAttachmentsNames()
#foreach ($attach in $doc.attachmentList)   ## {
  #set( $ok = $total_attachments_names.add("'${attach.filename}'") )
                 ## append attachment filename to ArrayList
  #set( $total_attachments_size = ${total_attachments_size} +
${attach.getFilesize()} ) ## compute total size of atttachments
#end                                        ## } -- foreach
...
function getAttachmentsNames() { return (${total_attachments_names}); }
function getAttachmentsSize()  { return (${total_attachments_size}); }
...

lpattachments is called from an iframe. The parent document accesses the
iframe'd document's javascript functions  like this: (
http://svn.xwiki.org/svnroot/xwiki/curriki/branches/curriki-1.8/wiki/src/ma…
)

//
// get size of files in attachments iframe
//
function getAttachmentsSize() {
  return (window.frames['attachment_iframe'].getAttachmentsSize());
}
//
// retrieve ArrayList of filenames contained in attachment
//
function getAttachmentsNames() {
  return (window.frames['attachment_iframe'].getAttachmentsNames());
}

-- Niels
http://nielsmayer.com