Older PeopleSoft and Web 2.0 Step 2

In this blog we’ll continue where we left some time ago. The aim is to create a page containing the blocks which can be ordered by the user. First we create a new page containing some groupboxes with content. Every groupbox must be placed in a container, for we will switch groupboxes within these containers. To create a container, draw a frame around each individual groupbox and disable the frame border. To be able to address the groupboxes later, add a custom style class (added to the stylesheet), lets say ‘DRAGGABLE’ to each groupbox. Put a static html object at the bottom of your page in which we’ll put our javascript. So far for the server side.

Now the real thing starts, namely the client side scripting. To make the groupboxes draggable we’ll make use of a widely used JavaScript library called Scriptaculous (http://script.aculo.us), based on the prototype library (http://www.prototypejs.org). This library enables us to create drag and drop interaction very easily. If you haven’t used scriptaculous or prototype, the javascript may look a bit strange, but if you play around with it some time, you’ll see these libraries come in very, very handy. I’ll try to explain the essentials so you don’t have to understand every line of code.

First download the scriptaculous files and save them in html objects in PeopleSoft (see suggested names below). Put the following references to these html objects in the html object at the bottom of your page:

<SCRIPT LANGUAGE=’javascript’ SRC=’%Javascript(JS_PROTOTYPE)’></SCRIPT>
<SCRIPT LANGUAGE=’javascript’ SRC=’%Javascript(JS_SCRIPTACULOUS)’></SCRIPT>
<SCRIPT LANGUAGE=’javascript’ SRC=’%Javascript(JS_BUILDER)’></SCRIPT>
<SCRIPT LANGUAGE=’javascript’ SRC=’%Javascript(JS_EFFECTS)’></SCRIPT>
<SCRIPT LANGUAGE=’javascript’ SRC=’%Javascript(JS_DRAGDROP)’></SCRIPT>
<SCRIPT LANGUAGE=’javascript’ SRC=’%Javascript(JS_CONTROLS)’></SCRIPT>
<SCRIPT LANGUAGE=’javascript’ SRC=’%Javascript(JS_SLIDER)’></SCRIPT>

SCREENSHOT

After these lines, insert the following javascript:

<style>
.hoverActive {background: red;}
</style>

<script type=”text/javascript”>
function init() {
// find all elements with classname ‘draggable’
$$(‘.DRAGGABLE’).each(function(d, index){
// set id’s for each groupbox and its parent frame
d.id = ‘box_’+index;
d.parentNode.id = ‘container_’+index;
// add draggables
new Draggable(d, {revert:’true’});
// set css style
d.setStyle({cursor:’move’});
// add droppables
Droppables.add(d.parentNode,{
hoverclass: ‘hoverActive’,
onDrop: moveItems
});
});
}

// switch locations
function moveItems(draggable, droparea) {
var replacements = droparea.select(‘table’);
draggable.parentNode.appendChild(replacements[0]);
droparea.appendChild(draggable);
}

// onload initialize
init();

</script>

SCREENSHOT

So, what did we just do? Well, first we added a css style class to make the frame background turn red when we hover over it. Then we created the script that makes the magic happen. The $$(‘.DRAGGABLE’) function selects all elements in the html page which have the class name DRAGGABLE. That is why we added this style class to all the groupboxes. Now we addressed all our groupboxes, we looped through all the groupboxes using the .each function of prototype. Then we gave all groupboxes and parent frames an id. We will need that later when we save the order in the database. Next we made each groupbox draggable by making each groupbox an instance of the ‘Draggable’ object. The setStyle({cursor:’move’}); makes sure that the mouse pointer changes into a move symbol, when we hover over a groupbox. After that we defined the drop area’s. Those are the areas where the droppable, in our case the groupbox, can be dropped, in our case the frames. If we stopped here the groupboxes can be dragged, but positions won’t be switched. That is why we added the ‘moveItems’ function. This function switches the groupboxes. The last command, the ‘init()’ call makes sure that the init() function is called when the page is loaded.

That’s it for now. In the next step we’ll save the order of the groupboxes to the database. See you then!

 Viewed 10231 times by 1897 visitors

Posted by: Rick van Breugel (3 post(s)).