Page management : drag'n Drop blocks

An easy way to animate your websites

Section(s): animation, back office, front office, plugin, standard plugin, templates

Installation :

This plug-in is a part of the standard package of WMS. If you have created your application with WMS, just go to the third step.

1. deploy the nar file from your administration console,
   • restore the provided model objects : block, blockcategory, blocktype
   • restore the plug-in folder into your san
2. add the blocks field to your objects who will contain blocks
3. activate the plug-in from the administration tools.

Configuration :

actionParameterName : by default, when you are in preview mode, the current front action (view, search) is passed by a specific parameter : action. If you changed this parameter name in your front initialization (/front/common/init.jsp), you have to change it here too.

• prototype.js => pathToPrototype
• scriptaculous.js => pathToScriptaculous
• wedia.js => pathToWediaJS
• wedia.ui.js => pathToWediaUiJS
• context-menu.css => pathToContextMenuCss

• prototype.js => pathToPrototypeFO
• scriptaculous.js => pathToScriptaculousFO

If you don't fill these fields, we will assume that they are already included the HTML <HEADER>.

Description

Prepare your pages to accept blocks

To insert dynamic blocks into your website, you have to specify the zones where to drop them.

Let's assume the page structure is like this :





If you want to add some blocks dynamically in the aside zone, you have to add the css class target to the html container and declare it with an id.

<div id="aside" class="target">
  <noheto:include page="/front/getTargetBlock.jspz?currentTargetID=aside"/>
</div>

• By declaring this container with a class target, in block management mode, this div will accept each blocks you'll drop in and place them from the top to bottom.
• The JSP /front/getTargetBlock.jsp has been declared into the plug-in. By calling it, you will get all blocks needed to be displayed in the container aside
  • If your active object does not have any blocks to display, it will try to get, recursively, all blocks contained in the active category.
  • if nothing has been found, nothing will be added in the container

You can declare an unlimited number of dropping zone in your page if, and only if, all these zone have the css class target and a specific id.

In this previous illustration, all blocks are displayed underneath the previous one.
If your page template displays the block from left to right (or from right to left) with an automatic css new line ( float:left for example ), the drop zone won't be displayed correctly. To correct this, you have to add an other specific CSS class lToR (left to right) to your drop zone.

Creating a new block template

• All templates are located in a specific sub-folder of [san]/front : blocktemplates, it allows using the same object as a animating block and as a common content.
• The rules of inclusion follow the WMS layout concept ( like other templates ) and the entry point is a main.jsp file;
• The current block is initialized in a request var activeBlock;
• The template of a block cannot be linked to the position of the block in a page; For example, a rating block can be either in the footer or in the aside column without any modifications of the template or in the css.

1. In our layout, we create the folder structure for our block.
2. We create a new bloctype object where we specify which fields will have to be fill (very helpful in addition of optional fields plug-in).
3. We create a new bloc template and specify what kind of bloctype it is.
4. We add our new template to each sitemodel we want.

Rules of recusivity

• yes : all used blocks are loaded from it in the request
• no : Does the active category have some related blocks ?
  • yes : all used blocks are loaded from it in the request
  • no : Does it's parent category have some related blocks ?
    • yes : all used blocks are loaded from it in the request
    • no : recursive test.

As you can see, we are not taking the blocks of a category if we have found something before. Only one object can be the source the selection.
It means that when you add a block to a content object, it can reset all its presentation.

Example with an article with blocks on the right column and :

Before attributing blocks to the article, the page is displayed with the red blocks A and B. The resolver get them from the current category.



After attributing some blocks to the central zone, the red ones are not displayed because the source object is the article itself.