Advanced page layout
fmarwede Jan 12, 2008 10:25 AMHi,
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!