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 ...
<ul><li>Wouldn’t it be nice to have a preview like Google Books? </li></ul><ul><li>Or a twitter feed? </li></ul><ul><li>Or...
Lots of byte-sized bits of extra code to add extra functionality.
Examples
 
 
but ...
But... <ul><li>No re-use </li></ul><ul><li>Isolated innovation </li></ul><ul><li>You really need to be a web developer to ...
What if we could make it easy for  everybody  to do this? Photo: National Library of New Zealand, http://www.flickr.com/ph...
<ul><li>Javascript </li></ul><ul><li>User Interface  </li></ul><ul><li>Componentised  </li></ul><ul><li>Extensions </li></...
Juice
Juice <ul><li>Easy to use </li></ul><ul><li>Reuse and share innovation </li></ul><ul><li>Extensible </li></ul><ul><li>Prod...
Examples
 
 
Why? <ul><li>Created to make life easier! </li></ul><ul><li>Easier for non-techies </li></ul><ul><li>Easy to improve </li>...
Key things <ul><li>Based on Javascript </li></ul><ul><li>Uses the jQuery framework </li></ul><ul><li>Really easy to add to...
Aside - The Web Stack <ul><li>HTML – For content </li></ul><ul><li>CSS – For presentation </li></ul><ul><li>Javascript – F...
How it all fits together
How it all fits together
Really easy to add to a page: <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></s...
Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.find...
Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.find...
Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.find...
Getting Juice <ul><li>http://juice-project.org/GetJuice </li></ul><ul><li>Get the full download </li></ul>More advanced – ...
Files in the Download
Juicing a site
Vufind example <ul><li>Warning – use a test instance </li></ul><ul><li>not your live server! </li></ul>
 
Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/ default / </li></ul>
Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in...
Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in...
Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in...
Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in...
Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in...
Vufind example <ul><li>Add .htaccess permissions in juice folder at a file called .htaccess with the content: </li></ul><I...
Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add script in ...
extend.js
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/ex...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/ex...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/ex...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/ex...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/ex...
 
Prism 3 Example
Prism 3 Example <ul><li>Warning!  </li></ul><ul><li>Use your sandbox and backup your themes! </li></ul>
 
Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul>
 
Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul><ul><li>Add juice to downloaded copy </li></ul>
Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li><...
Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li><...
Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li><...
Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li><...
Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&...
Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&...
Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&...
Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&...
Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&...
Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul><ul><li>Add juice to downloaded copy </li></ul><...
Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul><ul><li>Add juice to downloaded copy </li></ul><...
 
A Note on Demo Tenancies function prismTenancy(){ var prism = &quot;&quot;; var urlParts = window.location.href.split('/')...
A Sample Recipe
Google Books Preview <ul><li>Easy addition </li></ul><ul><li>Useful feature </li></ul><ul><li>Shows external sources </li>...
Google Books Preview <ul><li>Have Juice working </li></ul>
Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions  folder: </li><...
Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions folder </li></u...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;);...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;);...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;);...
extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quo...
extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quo...
extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quo...
extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quo...
extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;);...
Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions folder </li></u...
Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions folder </li></u...
 
As Easy as That!
juice-project.org <ul><li>Documentation – inc. Screencasts </li></ul><ul><li>Downloads </li></ul><ul><li>Mailing List </li...
http://juice-project.org
Common Issues <ul><li>Conflicts with jQuery </li></ul><ul><li>Mixed content / Security alerts </li></ul><ul><li>Plugins ru...
Questions?
Upcoming SlideShare
Loading in …5
×

An introduction to juice

3,005 views

Published on

A broad introduction to the OPAC extension framework Juice.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,005
On SlideShare
0
From Embeds
0
Number of Embeds
629
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Hello, I’m Matt.... |(check who’s here) Can hear us. Raise hands. Opportunity for questions at the end, but raise hands as we go along if anything crops up... This is a fairly broad intro, we’ll cover reasons, architecture and a bit of practical. There will be code!
  • New systems. More web native in approach. Bookmarkable. Improved faceted search. Better User Experience.
  • People have come to expect these extra little bits from the websites they frequent. Services like Google Maps have made these services pervasive.
  • And people are doing this. Lots of mashups and hackery going on out there. See the code4Lib mailing list and the various mashed library events... People are waking up to the fact that the OPAC doesn’t exists in a bubble, it’s a web app like any other... So what are people doing?
  • National Library of Australia
  • Seattle Public Library
  • So there’s lots of cool stuff going on. But its pockets of work, by enthusiastic individuals with the right skills.
  • Which is a bit of a mouthful. But what if we could reuse all these ideas and share them and make them easy for everybody else.
  • Easy to use - we do the hard stuff so you don’t have to, you can just copy and paste Reuse and share innovation – we don’t have to work in isolation Extensible – it’s easy to build new options on top of it Product-independent – you could use it on any website that needs extensions, not just OPACs, we already have people using it on Aspire. Open Source – which means you can take it and modify it, improve it, rework it and contribute back
  • Enough talk, show me some example already?
  • Show some live demos if available: http://prism.talis.com/sandbox-gov/
  • Go to http://prism.talis.com/northampton-ac/items/501787
  • Created by richard Wallis to help make his life easier Easy for non-techies.
  • Mention client side only (protects the server side code from problems...) How easy?
  • Getting back to
  • Metadefs are a key concept. It’s telling Juice where to look for information on a page. Finding metadata.
  • Knows how to parse out particular types of text and so on. Hey it’s a 13 digit ISBN!
  • Easy – download it from the Juice Project download page. Show the process! Show the files you get! Warning over Windows build in zip... More advanced – check out the SVN version
  • Show unzipped folder, show what’s in each folder. Mention the key bits
  • Break this down in next few slides. What does each bit do!
  • This says, when the document has finished loading, run this bit of code.
  • Set debug true, so we can see any errors
  • Load an extension. Loading can take some time...
  • We wait for all those extra scripts to load and then run this code.
  • Remind them to use the sandbox tenancy which is there as a playground to try out themes and so on before going live.
  • Go to preloaded admin window and show this. Mentioned about askign support for admin access if you don’t yet have it.
  • Show the unzipped folder, add a new juice folder and add the files
  • Show opening the footer.html in notepad. At the base of the file is best!
  • There’s jquery. This tells the browse to look for a JavaScript file in this location. Prism has a base url set, so it assumes its beneath that.
  • There’s juice itself.
  • There’s our extend file. We need to write one specifically for our OPAC, just like we did with vufind. There’s an exampel to base it off if you want.
  • Create this in the juice folder. It’s the file that tells the browser what to do. Show creating the file in notepad. Mention that other editors are available!
  • Create this in the juice folder. It’s the file that tells the browser what to do.
  • Zip up the folder, check the zip and then upload over the top of the existing theme
  • Go to the tenancy and check the powered by juice works
  • We run a parallel install at /demo/ to
  • http://code.google.com/apis/books/branding.html
  • Have juice working – we did this already!
  • (not needed if you got the full Juice). Show going to the website anyway to show them what it looks like.
  • We want to only add it to the right page and need the new extension file.
  • Same as earlier process in Prism or Vufind
  • http://prism.talis.com/sandbox-ac/items/1833592 for example
  • http://prism.talis.com/sandbox-ac/items/1833592
  • Show website Show videos Show documentation Show mailing list
  • Conflicts with the jQuery of the app. – If you add in jquery and it’s already there, there may be issues. (We sandbox Prism’s jquery for exactly this reason) Mixed content - https/http – be careful could make people distrust your OPAC! Particularly an issue with plugins loading Google apis. Plugins firing on pages they shouldn’t – Add scripts to only load a
  • An introduction to juice

    1. 1. An Introduction to Juice Matt Machell , Juice Project & Talis , June 2010 talis.com juice-project.org
    2. 2. In the beginning... Photo: National Media Museum, http://www.flickr.com/photos/nationalmediamuseum/3588906094
    3. 3. Next Generation OPACs
    4. 4. Lots of nice functionality, great user experience improvements
    5. 5. but ...
    6. 6. <ul><li>Wouldn’t it be nice to have a preview like Google Books? </li></ul><ul><li>Or a twitter feed? </li></ul><ul><li>Or a map to the library? </li></ul>
    7. 7. Lots of byte-sized bits of extra code to add extra functionality.
    8. 8. Examples
    9. 11. but ...
    10. 12. But... <ul><li>No re-use </li></ul><ul><li>Isolated innovation </li></ul><ul><li>You really need to be a web developer to do this </li></ul>
    11. 13. 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
    12. 14. <ul><li>Javascript </li></ul><ul><li>User Interface </li></ul><ul><li>Componentised </li></ul><ul><li>Extensions </li></ul>What if?
    13. 15. Juice
    14. 16. Juice <ul><li>Easy to use </li></ul><ul><li>Reuse and share innovation </li></ul><ul><li>Extensible </li></ul><ul><li>Product-independent </li></ul><ul><li>Open Source </li></ul>
    15. 17. Examples
    16. 20. Why? <ul><li>Created to make life easier! </li></ul><ul><li>Easier for non-techies </li></ul><ul><li>Easy to improve </li></ul><ul><li>Share OPAC-based knowledge around – let’s not repeat ourselves! </li></ul>
    17. 21. Key things <ul><li>Based on Javascript </li></ul><ul><li>Uses the jQuery framework </li></ul><ul><li>Really easy to add to a page </li></ul>
    18. 22. Aside - The Web Stack <ul><li>HTML – For content </li></ul><ul><li>CSS – For presentation </li></ul><ul><li>Javascript – For behaviour </li></ul>
    19. 23. How it all fits together
    20. 24. How it all fits together
    21. 25. Really easy to add to a page: <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    22. 26. Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.findMeta(&quot;author&quot;,&quot;.item .summary .author .author&quot;); }
    23. 27. Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.findMeta(&quot;author&quot;,&quot;.item .summary .author .author&quot;); }
    24. 28. Metadefs function myopac_metadef(){ juice.findMeta( &quot;isbn&quot;,&quot;.item #details .table .ISBN&quot; ); juice.findMeta(&quot;author&quot;,&quot;.item .summary .author .author&quot;); }
    25. 29. Getting Juice <ul><li>http://juice-project.org/GetJuice </li></ul><ul><li>Get the full download </li></ul>More advanced – checkout SVN at http://juice-project.googlecode.com/svn/trunk/
    26. 30. Files in the Download
    27. 31. Juicing a site
    28. 32. Vufind example <ul><li>Warning – use a test instance </li></ul><ul><li>not your live server! </li></ul>
    29. 34. Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/ default / </li></ul>
    30. 35. Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in the layout.tpl template </li></ul>
    31. 36. Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in the layout.tpl template </li></ul><script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/default/juice/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/default/juice/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=“{$url}/interface/themes/default/juice/extend.js&quot;></script>
    32. 37. Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in the layout.tpl template </li></ul><script type=&quot;text/javascript&quot; src=&quot; {$url} / interface/themes/default/juice/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot; {$url} /interface/themes/default/juice/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=“ {$url} /interface/themes/default/juice/extend.js&quot;></script>
    33. 38. Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in the layout.tpl template </li></ul><script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/ default / juice/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;{$url}/interface/themes/ default /juice/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=“{$url}/interface/themes/ default / juice/extend.js&quot;></script>
    34. 39. Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add scripts in the layout.tpl template </li></ul><ul><li>Add .htaccess permissions </li></ul>
    35. 40. Vufind example <ul><li>Add .htaccess permissions in juice folder at a file called .htaccess with the content: </li></ul><IfModule mod_rewrite.c> RewriteEngine Off </IfModule>
    36. 41. Vufind example <ul><li>Copy juice folder into vufind/vufind/web/interface/themes/default/ </li></ul><ul><li>Add script in the layout.tpl template </li></ul><ul><li>Add .htaccess permissions </li></ul><ul><li>Write extend.js </li></ul>
    37. 42. extend.js
    38. 43. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    39. 44. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); } );   function runExtensions(){ new extendedbyJuice(juice); }
    40. 45. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    41. 46. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    42. 47. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(path+&quot;/interface/themes/default/juice/extensions/extendedbyJuice.js&quot;) juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    43. 49. Prism 3 Example
    44. 50. Prism 3 Example <ul><li>Warning! </li></ul><ul><li>Use your sandbox and backup your themes! </li></ul>
    45. 52. Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul>
    46. 54. Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul><ul><li>Add juice to downloaded copy </li></ul>
    47. 55. Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li></ul></ul><ul><ul><li>Open footer.html </li></ul></ul><ul><ul><li>Add the snippet below </li></ul></ul><script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    48. 56. Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li></ul></ul><ul><ul><li>Open footer.html </li></ul></ul><ul><ul><li>Add the snippet below </li></ul></ul><script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    49. 57. Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li></ul></ul><ul><ul><li>Open footer.html </li></ul></ul><ul><ul><li>Add the snippet below </li></ul></ul><script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    50. 58. Adding the files <ul><ul><li>Extract the zip file </li></ul></ul><ul><ul><li>Add juice files in the a /js subfolder </li></ul></ul><ul><ul><li>Open footer.html </li></ul></ul><ul><ul><li>Add the snippet below </li></ul></ul><script type=&quot;text/javascript&quot; src=&quot;assets/-/js/jquery-1.3.2.min.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/juice.js&quot;></script> <script type=&quot;text/javascript&quot; src=&quot;assets/-/js/extend.js&quot;></script>
    51. 59. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    52. 60. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); } );   function runExtensions(){ new extendedbyJuice(juice); }
    53. 61. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    54. 62. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    55. 63. Create extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    56. 64. Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul><ul><li>Add juice to downloaded copy </li></ul><ul><li>Zip and upload new copy </li></ul>
    57. 65. Prism 3 Example <ul><li>Download your theme via admin.talis.com </li></ul><ul><li>Add juice to downloaded copy </li></ul><ul><li>Zip and upload new copy </li></ul><ul><li>Check at all works! </li></ul>
    58. 67. A Note on Demo Tenancies function prismTenancy(){ var prism = &quot;&quot;; var urlParts = window.location.href.split('/'); if(urlParts[2] == &quot;prism.talis.com&quot;){ prism = urlParts[3]; if (prism == 'demo') { prism += '/' + urlParts[4]; } } return prism; } jQuery(function () { juice.setDebug(true); var tenant=prismTenancy() juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;, tenant ); juice.onAllLoaded(runExtensions); });   function runExtensions(){ new extendedbyJuice(juice); }
    59. 68. A Sample Recipe
    60. 69. Google Books Preview <ul><li>Easy addition </li></ul><ul><li>Useful feature </li></ul><ul><li>Shows external sources </li></ul>
    61. 70. Google Books Preview <ul><li>Have Juice working </li></ul>
    62. 71. Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions folder: </li></ul><ul><ul><li>http://juice-project.org/node/28 </li></ul></ul>
    63. 72. Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions folder </li></ul><ul><li>Update extend.js </li></ul>
    64. 73. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });
    65. 74. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ switch(jQuery(&quot;body&quot;).attr(&quot;id&quot;)){ case &quot;renderitem&quot;: // add code for item page here break; } }
    66. 75. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ switch(jQuery(&quot;body&quot;).attr(&quot;id&quot;)){ case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break; } }
    67. 76. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    68. 77. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    69. 78. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    70. 79. extend.js case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break;
    71. 80. extend.js jQuery(function () { juice.setDebug(true); juice.loadJs(&quot;/assets/-/js/extensions/extendedbyJuice.js&quot;); juice.loadJs(&quot;/assets/-/js/extensions/GBSEmbed.js&quot;); juice.onAllLoaded(runExtensions); });   function runExtensions(){ switch(jQuery(&quot;body&quot;).attr(&quot;id&quot;)){ case &quot;renderitem&quot;: var div = '<div id=&quot;GBSPanel&quot; style=&quot;display: block; width: 100%&quot;>' + '<h2 class=&quot;title&quot;>Look Inside</h2>' + '<div id=&quot;GBSViewer&quot; style=&quot;width: 100%; height: 800px&quot;></div>' + '</div>'; var insert = new JuiceInsert(div,&quot;#details .table&quot;,&quot;after&quot;); new GBSEmbedJuice(juice,insert,&quot;GBSViewer&quot;); break; } }
    72. 81. Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions folder </li></ul><ul><li>Update extend.js </li></ul><ul><li>Upload extend.js </li></ul>
    73. 82. Google Books Preview <ul><li>Have Juice working </li></ul><ul><li>Download extension and add to extensions folder </li></ul><ul><li>Update extend.js </li></ul><ul><li>Upload extend.js </li></ul><ul><li>Check it all still works </li></ul>
    74. 84. As Easy as That!
    75. 85. juice-project.org <ul><li>Documentation – inc. Screencasts </li></ul><ul><li>Downloads </li></ul><ul><li>Mailing List </li></ul><ul><li>Extension Bazaar </li></ul>
    76. 86. http://juice-project.org
    77. 87. Common Issues <ul><li>Conflicts with jQuery </li></ul><ul><li>Mixed content / Security alerts </li></ul><ul><li>Plugins running on pages they shouldn’t </li></ul>
    78. 88. Questions?

    ×