An introduction to juice

An Introduction to Juice Matt Machell , Juice Project & Talis , June 2010 talis.com juice-project.org

In the beginning... Photo: National Media Museum, http://www.flickr.com/photos/nationalmediamuseum/3588906094

Next Generation OPACs

Lots of nice functionality, great user experience improvements

but ...

Wouldn’t it be nice to have a preview like Google Books?
Or a twitter feed?
Or a map to the library?

Lots of byte-sized bits of extra code to add extra functionality.

Examples

but ...

But...
No re-use
Isolated innovation
You really need to be a web developer to do this

What if we could make it easy for everybody to do this? Photo: National Library of New Zealand, http://www.flickr.com/photos/nationallibrarynz_commons

Javascript
User Interface
Componentised
Extensions
What if?

Juice
Easy to use
Reuse and share innovation
Extensible
Product-independent
Open Source

Examples

Why?
Created to make life easier!
Easier for non-techies
Easy to improve
Share OPAC-based knowledge around – let’s not repeat ourselves!

Key things
Based on Javascript
Uses the jQuery framework
Really easy to add to a page

Aside - The Web Stack
HTML – For content
CSS – For presentation
Javascript – For behaviour

How it all fits together

Really easy to add to a page: <script type="text/javascript" src="assets/-/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="assets/-/js/juice.js"></script> <script type="text/javascript" src="assets/-/js/extend.js"></script>

Metadefs function myopac_metadef(){ juice.findMeta( "isbn",".item #details .table .ISBN" ); juice.findMeta("author",".item .summary .author .author"); }

Getting Juice
http://juice-project.org/GetJuice
Get the full download
More advanced – checkout SVN at http://juice-project.googlecode.com/svn/trunk/

Files in the Download

Juicing a site

Vufind example
Warning – use a test instance
not your live server!

Vufind example
Copy juice folder into vufind/vufind/web/interface/themes/ default /

Vufind example
Copy juice folder into vufind/vufind/web/interface/themes/default/
Add scripts in the layout.tpl template

Vufind example
<script type="text/javascript" src="{$url}/interface/themes/default/juice/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="{$url}/interface/themes/default/juice/juice.js"></script> <script type="text/javascript" src=“{$url}/interface/themes/default/juice/extend.js"></script>

Vufind example
<script type="text/javascript" src=" {$url} / interface/themes/default/juice/jquery-1.3.2.min.js"></script> <script type="text/javascript" src=" {$url} /interface/themes/default/juice/juice.js"></script> <script type="text/javascript" src=“ {$url} /interface/themes/default/juice/extend.js"></script>

Vufind example
<script type="text/javascript" src="{$url}/interface/themes/ default / juice/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="{$url}/interface/themes/ default /juice/juice.js"></script> <script type="text/javascript" src=“{$url}/interface/themes/ default / juice/extend.js"></script>

Vufind example
Add .htaccess permissions

Vufind example
Add .htaccess permissions in juice folder at a file called .htaccess with the content:
<IfModule mod_rewrite.c> RewriteEngine Off </IfModule>

Vufind example
Add script in the layout.tpl template
Add .htaccess permissions
Write extend.js

extend.js

extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }

extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); } ); function runExtensions(){ new extendedbyJuice(juice); }

extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+"/interface/themes/default/juice/extensions/extendedbyJuice.js") juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }

Prism 3 Example

Prism 3 Example
Warning!
Use your sandbox and backup your themes!

Prism 3 Example
Download your theme via admin.talis.com

Prism 3 Example
Add juice to downloaded copy

Adding the files
Extract the zip file
Add juice files in the a /js subfolder
Open footer.html
Add the snippet below
<script type="text/javascript" src="assets/-/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="assets/-/js/juice.js"></script> <script type="text/javascript" src="assets/-/js/extend.js"></script>

Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }

Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); } ); function runExtensions(){ new extendedbyJuice(juice); }

Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }

Prism 3 Example
Zip and upload new copy

Prism 3 Example
Zip and upload new copy
Check at all works!

A Note on Demo Tenancies function prismTenancy(){ var prism = ""; var urlParts = window.location.href.split('/'); if(urlParts[2] == "prism.talis.com"){ prism = urlParts[3]; if (prism == 'demo') { prism += '/' + urlParts[4]; } } return prism; } jQuery(function () { juice.setDebug(true); var tenant=prismTenancy() juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js", tenant ); juice.onAllLoaded(runExtensions); }); function runExtensions(){ new extendedbyJuice(juice); }

A Sample Recipe

Google Books Preview
Easy addition
Useful feature
Shows external sources

Have Juice working

Have Juice working
Download extension and add to extensions folder:
http://juice-project.org/node/28

Have Juice working
Download extension and add to extensions folder
Update extend.js

extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); });

extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ switch(jQuery("body").attr("id")){ case "renderitem": // add code for item page here break; } }

extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ switch(jQuery("body").attr("id")){ case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break; } }

extend.js case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break;

extend.js jQuery(function () { juice.setDebug(true); juice.loadJs("/assets/-/js/extensions/extendedbyJuice.js"); juice.loadJs("/assets/-/js/extensions/GBSEmbed.js"); juice.onAllLoaded(runExtensions); }); function runExtensions(){ switch(jQuery("body").attr("id")){ case "renderitem": var div = '<div id="GBSPanel" style="display: block; width: 100%">' + '<h2 class="title">Look Inside</h2>' + '<div id="GBSViewer" style="width: 100%; height: 800px"></div>' + '</div>'; var insert = new JuiceInsert(div,"#details .table","after"); new GBSEmbedJuice(juice,insert,"GBSViewer"); break; } }

Have Juice working
Update extend.js
Upload extend.js

Have Juice working
Update extend.js
Upload extend.js
Check it all still works

As Easy as That!

juice-project.org
Documentation – inc. Screencasts
Downloads
Mailing List
Extension Bazaar

http://juice-project.org

Common Issues
Conflicts with jQuery
Mixed content / Security alerts
Plugins running on pages they shouldn’t

Questions?

An introduction to juice

by juiceproject on Jul 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 257

Statistics

An introduction to juice — Presentation Transcript

http://juice-project.org	250
http://www.juice-project.org	7