[xwiki-devs] Macros and JavaScript working together (was Re: [DISCUSSION] XWiki Chart Api & Chart Macro)
On Thu, Jun 25, 2009 at 9:44 PM, Asiri Rathnayake < asiri.rathnayake@gmail.com> wrote:
Hi,
On Thu, Jun 25, 2009 at 11:53 PM, Niels Mayer <nielsmayer@gmail.com> 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/main... #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/mai... ) // // 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
Hi Neils, On Thu, Jul 2, 2009 at 12:27 PM, Niels Mayer <nielsmayer@gmail.com> wrote:
On Thu, Jun 25, 2009 at 9:44 PM, Asiri Rathnayake < asiri.rathnayake@gmail.com> wrote:
Hi,
On Thu, Jun 25, 2009 at 11:53 PM, Niels Mayer <nielsmayer@gmail.com> 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])
The wiki macro bridge has been released with 2.0M2. May be you can put it to test by trying to implement your chart macro ;) If you come across any problems while you are at it, we can improve wiki macro bridge :) Thanks. - Asiri
One more contender for the html/wiki/serverside vs javascript/client-side chart-wars: Visualize <http://www.canvasdemos.com/2009/07/10/visualize/> Tools <http://www.canvasdemos.com/type/tools/> - Plugin<http://www.canvasdemos.com/tag/plugin/> | Posted on July 10th, 2009 by Andi Smith Scott from the Filament Group has posted about a new jQuery plugin called Visualize which they have created that creates charts and graphs from tabular data using the HTML canvas element. [image: Pretty charts for everyone thanks to Visualize!]<http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/> Pretty charts for everyone thanks to Visualize! Accessible data visualization in HTML has always been tricky to achieve, particularly because elements such as images allow only the most basic features for providing textual information to non-visual users. Using the plugin is as simple as including jQuery and the plugin and calling the code from your HTML table: $('table').visualize(); Check out the Visualize plugin<http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas/> [image: 1 Star][image: 2 Stars][image: 3 Stars][image: 4 Stars][image: 5 Stars] 0 comments <http://www.canvasdemos.com/2009/07/10/visualize/#respond>
participants (2)
-
Asiri Rathnayake -
Niels Mayer