Integrating Zoop and Drupal

Here Zoop community member Jeremy will be walking us through how he integrated Zoop and Drupal. This tutorial will be created Wiki style in hopes that others will aid / update.

gotchas with Drupal:

1. Drupal templates can change the layout of your zoop generated content. This is often a very good thing. However, it can be a real pain when using various selector widgets that have their own styles. This is generally because some templates are designed to enforce styles globally. So, you'll find css constructs for things like div,th,td,table ...etc that will affect any such elements on the page. If you care, you should modify the template css or your code accordingly.

Objective
The purpose of this tutorial is to show you how to add a simple zoop application or page to Drupal 5 as a content page. These techniques will probably work in Drupal 4 but the function names are different. Additionally, I will explain how to integrate session management from Drupal into Zoop. The latter opens up the entire scope of user/session/subscription management modules to your Zoop app. ..Yes, you read that correctly.

Adding your Zoop application or page to Drupal

1. Create a new page in Druapl. Set the input mode on the page to be php
2. Add you content like so. You must use the functions in the sample to add css and js to you page. The function calls will be executed before the page loads and the files you load will appear in the head tag of the Drupal page. So, don't expect execution of and scripts in the body. If you want execution when the page loads you need to add an onload in one of the js files you load. That's what I did ...keep reading. Alternatively, there's supposed to be a "correct" way to create an onload in Drupal. I don't know what that is.

   Nothing is written in stone reagarding what to include and what to exclude. I have no HTML in my pages other then a single div with an id attribute since my Zoop app is 100% Ajax.

   __SAMPLE__

   <?php
   /* Zoop components, prototype, scriptaculous */
   drupal_add_js('skeleton/index.php/zoopfile/gui/fValidate/fValidate.core.js');
   drupal_add_js('skeleton/index.php/zoopfile/gui/fValidate/fValidate.config.js');
   drupal_add_js('skeleton/index.php/zoopfile/gui/fValidate/fValidate.lang-enUS.js');
   drupal_add_js('skeleton/index.php/zoopfile/gui/fValidate/fValidate.validators.js');
   drupal_add_js('skeleton/index.php/zoopfile/gui/common.js');
   drupal_add_js('skeleton/index.php/zoopfile/gui/sorttable.js');
   drupal_add_js('skeleton/index.php/zoopfile/gui/ajax/prototype.js');
   drupal_add_js('skeleton/index.php/zoopfile/gui/scriptaculous/scriptaculous.js');

   // extra 3rd party libs
   drupal_add_js('skeleton/public/resources/flash/js/swfobject.js');

   // My application js
   drupal_add_js('skeleton/index.php/ab/myapp_js');
   drupal_add_css('skeleton/public/resources/css/main.css');
   ?>

   ___END_SAMPLE__

3. This example sets a body onload event that will trigger an Ajax call using Prototypes Upater method. The returned content fills the div. From there the application is visible to the user. I happen to have a smarty template that loads a set of four divs into along with other application content. I use those four divs to display additional messages, content, status information and whatever else I want.

   The myapp.js file contains this along with the entire application.

   __JS_SAMPLE__

   embed = MyApp;
   window.onload=function(){
   if(embed){
   loadEmbed('Embed' + embed,'myContentDiv','myZone');
   }else{
   alert('Error: No content specified for loading');
   }
   }
   loadEmbed = function(what,where,zone){
   var url='/skeleton/index.php/' + zone + '/' + what;
   new Ajax.Updater(where,url,{method: 'get', onComplete: function(transport){initApp();}
   });
   }

   __END_SAMPLE__

   This js loads the content returned from /skeleton/index.php/myZone/EmbedMyApp/ in to myContentDiv and onComplete it runs initApp(). initApp() just sets some defaults on the page.

4. If you are not using AJAX just load the Zoop components you need in to the page. Remember that submitting the page will submit to the Drupal URL, not the Zoop URL. Thus, you cannot expect zoop behavior. However, you could probably create other pages in Drupal to handle you posts. After all Drupal accepts PHP content. Really, AJAX is so easy with Zoop and Prototype. Why would you not use it.
5. save you page and test it.