3 Replies Latest reply on Jan 13, 2008 1:47 PM by Florian Marwede

    Advanced page layout

    Florian Marwede Expert

      Hi,
      my current wish is to add the following feature to a page layout consisting of RF components (for example tab panels):

      You can go with the mouse between two panels and make one smaller (and the other one bigger) with drag & drop.

      Please note that a couple of Javascript libraries exists which can do that. For example extJS or DOJO or this:

      http://www.eclipse.org/rap/demos.php

      To make clear what I want look at

      http://extjs.com/deploy/dev/examples/window/layout.html

      click on "open window", go with the mouse between navigation and main area.

      The problem is, that I don't want to integrate such big libraries due to some reasons. So I will find a small nice self-made solution with the JS libraries already integrated in Richfaces or perhaps with some own code.

      Here is what I have know:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich" >
      
      <head>
       <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>
       <a4j:loadScript src="resource://prototype.js"/>
       <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/scriptaculous.js" />
       <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/builder.js" />
       <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/effects.js" />
       <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/dragdrop.js" />
       <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/controls.js" />
       <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/scriptaculous/slider.js" />
      
      
       <style type="text/css">
       <!--
       html,body{margin:0;padding:0}
       body{font: 76% arial,sans-serif}
       div#panel3{width: 150px; background: #EEE; vertical-align: top; border: solid black 1px; height: 284px}
       div#panel4{width: 150px; background: #EEE; vertical-align: top; border: solid black 1px; height: 284px}
       -->
       </style>
       </head>
      <body>
      
      
      <h:panelGrid columns="3">
       <rich:panel id="panel3">
       <f:facet name="header">
       <div id="header1" >My Panel Three</div>
       </f:facet>
       lslslslslslslsl<br/>
       lslslslslslslsl<br/>
       aaaa<br/>
       </rich:panel>
       <div id="overall" style="width: 100px">
       <div id="barre" style="background-color: #DCDCDC; width: 5px; height: 284px; border: #232323 1px dashed; cursor:move;" />
       </div>
       <rich:panel id="panel4">
       <f:facet name="header">
       <div id="header2">My Panel Four</div>
       </f:facet>
       lslslslslslslsl<br/>
       lslslslslslslsl<br/>
       aaaa<br/>
       </rich:panel>
      </h:panelGrid>
      
       <p>
       <script type="text/javascript" language="javascript">
       // <![CDATA[
       new Control.Slider('barre','overall',{range:$R(0,20),
       values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
       onSlide:function(v){$('panel3').style.width=(150 + v*3)+'px';$('panel4').style.width=(150 - v*3)+'px'}});
       // ]]>
       </script>
      
       </p>
      
      </body>
      </html>


      Two questions:

      1.) How can I translate that in rich:effect tags? And give such a translation any advantages to me?

      2.) Please help me to repair this example and really bring it to work.

      Thank you!