Embed Size (px)
DESCRIPTION
A broad introduction to the OPAC extension framework Juice.
Citation preview
An Introduction to JuiceAn Introduction to Juice
Matt MachellMachell, Juice Project & Talis , JuneJune 2010
talis.comjuice-project.org
In the beginning... In the beginning...
Next GenerationGeneration OPACs
Lots of nice functionality, great user Lots of nice functionality, great user experience improvements experience improvements
butbut...
• 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 Lots of byte-sized bits of extra code to add extra functionality. add extra functionality.
Examples
butbut...
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 What if we could make it easy for everybodyeverybody to do this? to do this?
Photo: National Library of New Zealand, http://www.flickr.com/photos/nationallibrarynz_commons
• Javascript• User Interface • Componentised • Extensions
What if?What if?
JuiceJuice
Juice
• Easy to use• Reuse and share innovation• Extensible• Product-independent• Open Source
ExamplesExamples
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
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>
Metadefsfunction myopac_metadef(){ juice.findMeta("isbn",".item #details .table .ISBN");
juice.findMeta("author",".item .summary .author .author");
}
Metadefsfunction myopac_metadef(){ juice.findMeta("isbn",".item #details .table .ISBN");
juice.findMeta("author",".item .summary .author .author");
}
Metadefsfunction 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 Juicing a site
Vufind example
Warning – use a test instance not your live server!
Vufind example
1. Copy juice folder into vufind/vufind/web/interface/themes/default/
Vufind example
1. Copy juice folder into vufind/vufind/web/interface/themes/default/
2. Add scripts in the layout.tpl template
Vufind example
1. Copy juice folder into vufind/vufind/web/interface/themes/default/
2. Add scripts in the layout.tpl template
<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
1. Copy juice folder into vufind/vufind/web/interface/themes/default/
2. Add scripts in the layout.tpl template
<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
1. Copy juice folder into vufind/vufind/web/interface/themes/default/
2. Add scripts in the layout.tpl template
<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
1. Copy juice folder into vufind/vufind/web/interface/themes/default/
2. Add scripts in the layout.tpl template3. 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
1. Copy juice folder into vufind/vufind/web/interface/themes/default/
2. Add script in the layout.tpl template3. Add .htaccess permissions4. Write extend.js
extend.jsextend.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);}
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
1. Download your theme via admin.talis.com
Prism 3 Example
1. Download your theme via admin.talis.com2. Add juice to downloaded copy
Adding the files
1. Extract the zip file2. Add juice files in the a /js subfolder3. Open footer.html4. 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>
Adding the files
1. Extract the zip file2. Add juice files in the a /js subfolder3. Open footer.html4. 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>
Adding the files
1. Extract the zip file2. Add juice files in the a /js subfolder3. Open footer.html4. 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>
Adding the files
1. Extract the zip file2. Add juice files in the a /js subfolder3. Open footer.html4. 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);}
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
1. Download your theme via admin.talis.com2. Add juice to downloaded copy3. Zip and upload new copy
Prism 3 Example
1. Download your theme via admin.talis.com2. Add juice to downloaded copy3. Zip and upload new copy 4. 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 RecipeA Sample Recipe
Google Books Preview
• Easy addition• Useful feature• Shows external sources
Google Books Preview
1. Have Juice working
Google Books Preview
1. Have Juice working2. Download extension and add to extensions
folder:
http://juice-project.org/node/28
Google Books Preview
1. Have Juice working2. Download extension and add to extensions
folder3. 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
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
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; }}
Google Books Preview
1. Have Juice working2. Download extension and add to extensions
folder3. Update extend.js4. Upload extend.js
Google Books Preview
1. Have Juice working2. Download extension and add to extensions
folder3. Update extend.js4. Upload extend.js5. Check it all still works
As Easy as That!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?
