Advanced page layout
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!