Bom dia estou com dúvida com o Vraptor eu gostaria de utilizar o jquery desktop fonte: http://desktop.sonspring.com/ para downloads dos fontes usem esse link : https://github.com/nathansmith/jQuery-Desktop
eu queria o seguinte que a janela que abre com o titulo computador por exemplo, fosse um jsp, porque no exemplo esta tudo no index, e esse jsp eu pudesse mapear pelo Vraptor, como eu faço isso pois o vraptor tem que aquele esquema do path para cada jsp, eu imagino que tenha um jeito, mas como sou novo com o vraptor não estou conseguindo, eu consegui sem o vrapor, eu imagino que seja algo com as url, epero que eu tenha sido claro, por favor aguardo a ajuda de vocês.
vc pode criar um controller:
@Resource
public class DesktopController {
public void index(){}
}criar o seu jsp em /WEB-INF/jsp/desktop/index.jsp
e acessar isso pela url //desktop/index
[]'s
Obrigado pela ajuda Lucas, mas acho que eu não fui claro ontem veja abaixo:
Eu fiz isso que você falou ja separei tipo ele chama a janela principal que é o Index, e dentro do index tem uma ancora que tem o id = icon_dock_pessoas, que chama a outra acora com id = window_pessoa
esse window_pessoa que eu queria fazer dele um jsp, eu fiz isso e mapeie no controller, eu deixei o jsp dentro da pasta jsp/index la no WEB-INF, só que ele não abre dentro da jsp index, para eu abrir ele eu tenho que chamar na url, e o que eu queria era fazer abrir esse jsp dentro do index, como uma janela, se você abrir esse link http://desktop.sonspring.com/ e clicar no meu computador vai abrir uma janela computador essa janela computador que eu queria fazer um jsp, mapeado no vraptor por exemplo.
package br.com.coliseu.controller;
import br.com.caelum.vraptor.Path;
import br.com.caelum.vraptor.Resource;
import br.com.caelum.vraptor.Result;
@Resource
public class IndexController {
private final Result result;
public IndexController(Result result) {
this.result = result;
}
@Path("/")
public void index() {
}
@Path("/pessoa")
public void pessoa() {
}
}[code] <%@ include file="…/…/…/includes/header.jsp" %>
Coliseu Project</head>
<body>
<!--<div class="abs" id="wrapper"> -->
<div class="abs" id="desktop">
<!--Icone na area de trabalho que faz a chamada lá embaixo, a parte que fica na barra inferior-->
<a class="abs icon" style="left:20px;top:90px;" href="#icon_dock_pessoas" rel="/page1">
<img src="../../../ColiseuProject/includes/assets/images/icons/pessoas48.png" />
Pessoas
</a>
<!--Janela que abre, essa que eu queria colocar em uma outra jsp chamada por exemplo pessoas-->
<div id="window_pessoas" class="abs window">
<div class="abs window_inner">
<div class="window_top">
<span class="float_left">
<img src="../../../ColiseuProject/includes/assets/images/icons/empresa16.png" />
Pessoas
</span>
<span class="float_right">
<a href="#" class="window_min"></a>
<a href="#" class="window_resize"></a>
<a href="#icon_dock_pessoas" class="window_close"></a>
</span>
</div>
<div class="abs window_content">
<div class="window_aside align_center">
<img src="../../../ColiseuProject/includes/assets/images/misc/album_cover.jpg" />
<br />
<em>Title of Album</em>
</div>
<div class="window_main">
</div>
</div>
<div class="abs window_bottom">
Genre: Rock/Rap
</div>
</div>
</div>
</div>
<!--Abre Menu -->
<div class="abs" id="bar_top">
<span class="float_right" id="clock"></span>
<ul>
<li>
<a class="menu_trigger" href="#">Configurações</a>
<ul class="menu">
<li>
<a href="#icon_dock_pedidos">Pedido</a>
</li>
<li>
<a href="#">Submenu 1.2</a>
</li>
<li class="sub"> <a class="seta" href="#" >Zoom</a>
<ul class="submenu" id="nav">
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1.3</a>
</li>
<li>
<a href="#">Submenu 1.4</a>
</li>
<li>
<a href="#">Submenu 1.5</a>
</li>
<li>
<a href="#">Submenu 1.6</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Cadastros</a>
<ul class="menu">
<li>
<a href="#icon_dock_empresa">Empresas & Filiais</a>
</li>
<li class="sub"> <a class="seta" href="#">Pessoas</a>
<ul class="submenu" id="nav">
<li><a href="#icon_dock_pessoas">Pessoas</a> </li>
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li>
<a href="#icon_dock_pedidos">Pedidos</a>
</li>
<li>
<a href="#">Submenu 2.4</a>
</li>
<li>
<a href="#">Submenu 2.5</a>
</li>
<li>
<a href="">Submenu 2.6</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Financeiro</a>
<ul class="menu">
<li>
<a href="#">Submenu 3.1</a>
</li>
<li>
<a href="#">Submenu 3.2</a>
</li>
<li>
<a href="#">Submenu 3.3</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Estoque</a>
<ul class="menu">
<li>
<a href="#">Submenu 3.1</a>
</li>
<li>
<a href="#">Submenu 3.2</a>
</li>
<li>
<a href="#">Submenu 3.3</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Administrativo</a>
<ul class="menu">
<li>
<a href="#">Submenu 4.1</a>
</li>
<li>
<a href="#">Submenu 4.2</a>
</li>
<li>
<a href="#">Submenu 4.3</a>
</li>
</ul>
</li>
</ul>
</div>
<!--Fecha Menu-->
<div class="abs" id="bar_bottom">
<a class="float_left" href="#" id="show_desktop" title="Show Desktop" >
<img src="../../../ColiseuProject/includes/assets/images/icons/icon_22_desktop.png" />
</a>
<ul id="dock">
<!--Aqui faz a chamada da janela-->
<li id="icon_dock_pessoas">
<a href="#window_pessoas">
<img src="../../../ColiseuProject/includes/assets/images/icons/pessoas22.png" />
Pessoas
</a>
</li>
</ul>
<a class="float_right" href="http://www.coliseusistemas.com.br" title="Secure Hosting">
<img src="../../../ColiseuProject/includes/assets/images/misc/coliseu.png" />
</a>
</div>
<!-- </div> -->
depois que a página foi pro browser, o único jeito de vc mudar pedaços da tela é usando javascript, não dá pra usar jsps mais.
daí vc pode fazer duas coisas:
- o conteúdo da window_pessoas já vem carregado, mas escondido (display: none no css), daí quando vc clica em algum lugar, vc manda via javascript mostrar essa div…
se vc usa jQuery isso é bem fácil:
$('#idDoLinkQueVaiMostrar').click(function() {
$('#window_pessoas').show();
});nesse caso vc pode até separar o conteúdo dessa div em outra jsp e dar um jsp:include
- se vc quiser carregar o conteúdo dessa div depois, vc vai ter que chamar a outra lógica que tem o conteúdo usando AJAX. Se vc usa jquery, vai ser algo do tipo:
$('#idDoLinkQueVaiMostrar').click(function() {
$.get('/url/da/logica', function(resposta) {
//substitui o conteudo da div pelo que veio na resposta
$('#window_pessoas').html(resposta);
});
});Cara eu optei pela segunda opção que você sugeriu, porque como são vários jsp, iria ficar muito pesado para carregar de uma só vez, só que não estou conseguindo fazer, acho que estou esquecendo de algo, eu to usando jquery, segue o javascript, na linha 140 eu fiz o que você falou, também estou enviado o jsp index, o jsp pessoa, e classe IndexController
//
// Kick things off.
//
jQuery(document).ready(function() {
JQD.go();
});
//
// Namespace - Module Pattern.
//
var JQD = (function($, window, undefined) {
// Expose innards of JQD.
return {
go: function() {
for (var i in JQD.init) {
JQD.init[i]();
}
},
init: {
frame_breaker: function() {
if (window.location !== window.top.location) {
window.top.location = window.location;
}
},
//
//Inicializa o Relógio
//
clock: function() {
if (!$('#clock').length) {
return;
}
// variáveis de data.
var date_obj = new Date();
var hour = date_obj.getHours();
var minute = date_obj.getMinutes();
var day = date_obj.getDate();
var year = date_obj.getFullYear();
var saudacao = 'Bom Dia!';
// Array por mês.
var month = [
'Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'
];
month = month[date_obj.getMonth()];
// Saudação
if ((hour > 12 && minute >01) && (hour < 19)) {
saudacao = 'Boa Tarde!';
}
else if (hour > 19) {
saudacao = 'Boa Noite!';
}
// Zero à esquerda, se necessário.
if (minute < 10) {
minute = '0' + minute;
}
// formato da data e hora
var clock_time = saudacao + ' | ' + hour + ':' + minute + ' ' + ' | ' + day + ' de ' + month + ' de ' + year;
// Mostra relógio e data no canto superior direito da tela
$('#clock').html(clock_time);
// Atualiza a cada 60 segundos
setTimeout(JQD.init.clock, 60000);
},
//
// Inicializa desktop
//
desktop: function() {
// Cancelar mousedown, clique com o botão direito.
$(document).mousedown(function(ev) {
if (!$(ev.target).closest('a').length) {
JQD.util.clear_active();
// ev.preventDefault();
ev.stopPropagation();
}
}).bind('contextmenu', function() {
return false;
});
// Os links relativos ou remoto?
$('a').live('click', function(ev) {
var url = $(this).attr('href');
this.blur();
if (url.match(/^#/)) {
ev.preventDefault();
ev.stopPropagation();
}
else {
// $(this).attr('target', '_blank');
}
});
// Faça menus principais ativos.
$('a.menu_trigger').live('mousedown', function() {
if ($(this).next('ul.menu').is(':hidden')) {
JQD.util.clear_active();
$(this).addClass('active').next('ul.menu').show();
}
else {
JQD.util.clear_active();
}
}).live('mouseenter', function() {
// foco de transferência, se já tiver sido aberto.
if ($('ul.menu').is(':visible')) {
JQD.util.clear_active();
$(this).addClass('active').next('ul.menu').show();
}
});
// Icones do desktop
$('a.icon').live('mousedown', function() {
// Realce o ícone.
JQD.util.clear_active();
$(this).addClass('active');
}).live('dblclick', function() {
// Receba o destino do link.
var x = $(this).attr('href');
var y = $(x).find('a').attr('href');
// Mostrar o botão da barra de tarefas.
if ($(x).is(':hidden')) {
$(x).remove().appendTo('#dock');
$(x).show('fast');
}
// Traga a janela para a frente.
JQD.util.window_flat();
$(y).addClass('window_stack').show();
$.get($(this).attr('rel'), function(resposta) {
//substitui o conteudo da div pelo que veio na resposta
$('#idwindow').html(resposta);
});
}).live('mouseenter', function() {
$(this).die('mouseenter').draggable({
revert: true,
containment: 'parent'
});
});
//chamada através dos menus para abrir janelas
$('#bar_top a[href]').live('click', function(e){
e.preventDefault();
if($(this).attr('href') != '#'){
var x = $(this).attr('href');
var y = $(x).find('a').attr('href');
// Mostrar o botão da barra de tarefas.
if ($(x).is(':hidden')) {
$(x).remove().appendTo('#dock');
$(x).show('fast');
}
//Traga a janela para a frente.
JQD.util.window_flat();
$(y).addClass('window_stack').show();
JQD.util.clear_active();
}
})
// botões da barra de tarefas.
$('#dock a').live('click', function() {
// Receba o destino do link.
var x = $($(this).attr('href'));
// Esconder-se, se visíveis.
if (x.is(':visible')) {
x.hide();
}
else {
// Traga a janela para a frente.
JQD.util.window_flat();
x.show().addClass('window_stack');
}
});
// Faça janelas móveis.
$('div.window').live('mousedown', function() {
// Traga a janela para a frente.
JQD.util.window_flat();
$(this).addClass('window_stack');
}).live('mouseenter', function() {
$(this).die('mouseenter').draggable({
// Confinar a área de trabalho.
// Móveis através da barra de topo só.
cancel: 'a',
containment: 'parent',
handle: 'div.window_top'
}).resizable({
containment: 'parent',
minWidth: 400,
minHeight: 200
});
// Dê um duplo clique na barra de cima para redimensionar, ala do sistema operacional Windows.
}).find('div.window_top').live('dblclick', function() {
JQD.util.window_resize(this);
// Dê um duplo clique no ícone barra de cima para fechar, ala do sistema operacional Windows.
}).find('img').live('dblclick', function() {
// Travessia para o botão fechar e esconder o botão da barra de tarefas.
$($(this).closest('div.window_top').find('a.window_close').attr('href')).hide('fast');
// Feche a janela em si.
$(this).closest('div.window').hide();
// Parar a propagação barra superior da janela.
return false;
});
// Minimize a janela.
$('a.window_min').live('click', function() {
$(this).closest('div.window').hide();
});
// Maximizar ou restaurar a janela.
$('a.window_resize').live('click', function() {
JQD.util.window_resize(this);
});
// Feche a janela.
$('a.window_close').live('click', function() {
$(this).closest('div.window').hide();
$($(this).attr('href')).hide('fast');
});
// Botão Mostrar área de trabalho, ala do sistema operacional Windows.
$('#show_desktop').live('click', function() {
// Se todas as janelas são visíveis, esconde tudo.
if ($('div.window:visible').length) {
$('div.window').hide();
}
else {
//Caso contrário, revelam janelas escondidas que estão abertos.
$('#dock li:visible a').each(function() {
$($(this).attr('href')).show();
});
}
});
$('table.data').each(function() {
//Adicionar listras de zebra, ala Mac OS X.
$(this).find('tbody tr:odd').addClass('zebra');
}).find('tr').live('mousedown', function() {
// Destaque linha, ala Mac OS X.
$(this).closest('tr').addClass('active');
});
},
wallpaper: function() {
// Adicionar wallpaper passado, para evitar o bloqueio.
if ($('#desktop').length) {
$('body').prepend('<img id="wallpaper" class="abs" src="assets/images/misc/wallpaper.jpg" />');
}
}
},
util: {
//
// Limpar estados ativa, esconder menus.
//
clear_active: function() {
$('a.active, tr.active').removeClass('active');
$('ul.menu').hide();
},
//
// Zero janela fora z-index.
//
window_flat: function() {
$('div.window').removeClass('window_stack');
},
//
// Redimensionar a janela modal.
//
window_resize: function(el) {
// Mais perto de janela pai.
var win = $(el).closest('div.window');
// É já maximizada?
if (win.hasClass('window_full')) {
// Restaure a posição da janela.
win.removeClass('window_full').css({
'top': win.attr('data-t'),
'left': win.attr('data-l'),
'right': win.attr('data-r'),
'bottom': win.attr('data-b'),
'width': win.attr('data-w'),
'height': win.attr('data-h')
});
}
else {
win.attr({
// Salvar posição da janela.
'data-t': win.css('top'),
'data-l': win.css('left'),
'data-r': win.css('right'),
'data-b': win.css('bottom'),
'data-w': win.css('width'),
'data-h': win.css('height')
}).addClass('window_full').css({
// Maximize dimensões.
'top': '0',
'left': '0',
'right': '0',
'bottom': '0',
'width': '100%',
'height': '100%'
});
}
// Traga a janela para a frente.
JQD.util.window_flat();
win.addClass('window_stack');
}
}
};
/**
* menus
**/
over = function() {
var sfEls = document.getElementById("nav").
getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" over";
}
sfEls[i].onmouseout=function() {
this.className=this.className.
replace(new RegExp(" over\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", over);
// Passe na jQuery.
})(jQuery, this);Aqui o Index:
<%--
Document : index
Created on : 05/11/2010, 14:24:57
Author : Valde
--%>
<%@ include file="../../../includes/header.jsp" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=emulateie8" />
<meta name="description" content="Sistema Coliseu Automação de Supermercado" />
<link rel="stylesheet" type="text/css" href="<c:url value='../../../ColiseuProject/includes/assets/stylesheets/desktop.css'/>" >
<title>Coliseu Project</title>
</head>
<body>
<!--<div class="abs" id="wrapper"> -->
<div class="abs" id="desktop">
<!--Icone na area de trabalho que faz a chamada lá embaixo, a parte que fica na barra inferior-->
<a class="abs icon" style="left:20px;top:90px;" href="#icon_dock_pessoas" rel="/pessoa">
<img src="../../../ColiseuProject/includes/assets/images/icons/pessoas48.png" />
Pessoas
</a>
<!--Janela que abre esspare que eu queria colocar em uma outra jsp chamada por exemplo pessoas-->
<div id="idwindow" class="abs window" >
</div>
</div>
<!--Abre Menu -->
<div class="abs" id="bar_top">
<span class="float_right" id="clock"></span>
<ul>
<li>
<a class="menu_trigger" href="#">Configurações</a>
<ul class="menu">
<li>
<a href="#icon_dock_pessoas" rel="/page1">Pedido</a>
</li>
<li>
<a href="#">Submenu 1.2</a>
</li>
<li class="sub"> <a class="seta" href="#" >Zoom</a>
<ul class="submenu" id="nav">
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li>
<a href="#">Submenu 1.3</a>
</li>
<li>
<a href="#">Submenu 1.4</a>
</li>
<li>
<a href="#">Submenu 1.5</a>
</li>
<li>
<a href="#">Submenu 1.6</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Cadastros</a>
<ul class="menu">
<li>
<a href="#icon_dock_empresa">Empresas & Filiais</a>
</li>
<li class="sub"> <a class="seta" href="#">Pessoas</a>
<ul class="submenu" id="nav">
<li><a href="#icon_dock_pessoas">Pessoas</a> </li>
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li>
<a href="#icon_dock_pedidos">Pedidos</a>
</li>
<li>
<a href="#">Submenu 2.4</a>
</li>
<li>
<a href="#">Submenu 2.5</a>
</li>
<li>
<a href="">Submenu 2.6</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Financeiro</a>
<ul class="menu">
<li>
<a href="#">Submenu 3.1</a>
</li>
<li>
<a href="#">Submenu 3.2</a>
</li>
<li>
<a href="#">Submenu 3.3</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Estoque</a>
<ul class="menu">
<li>
<a href="#">Submenu 3.1</a>
</li>
<li>
<a href="#">Submenu 3.2</a>
</li>
<li>
<a href="#">Submenu 3.3</a>
</li>
</ul>
</li>
<li>
<a class="menu_trigger" href="#">Administrativo</a>
<ul class="menu">
<li>
<a href="#">Submenu 4.1</a>
</li>
<li>
<a href="#">Submenu 4.2</a>
</li>
<li>
<a href="#">Submenu 4.3</a>
</li>
</ul>
</li>
</ul>
</div>
<!--Fecha Menu-->
<div class="abs" id="bar_bottom">
<a class="float_left" href="#" id="show_desktop" title="Show Desktop" >
<img src="../../../ColiseuProject/includes/assets/images/icons/icon_22_desktop.png" />
</a>
<ul id="dock">
<!--Aqui faz a chamada da janela-->
<li id="icon_dock_pessoas">
<a href="#idwindow">
<img src="../../../ColiseuProject/includes/assets/images/icons/pessoas22.png" />
Pessoas
</a>
</li>
</ul>
<a class="float_right" href="http://www.coliseusistemas.com.br" title="Secure Hosting">
<img src="../../../ColiseuProject/includes/assets/images/misc/coliseu.png" />
</a>
</div>
<!-- </div> -->
</body>
</html>
Aqui o JSP Pessoa
<html>
<div id="window_pessoas" class="abs window" >
<div class="abs window_inner">
<div class="window_top">
<span class="float_left">
<img src="../../../ColiseuProject/includes/assets/images/icons/pessoas16.png" />
Pedidos
</span>
<span class="float_right">
<a href="#" class="window_min"></a>
<a href="#" class="window_resize"></a>
<a href="#icon_dock_pessoas" class="window_close"></a>
</span>
</div>
<div class="abs window_content">
<div class="window_aside align_center">
<img src="../../../ColiseuProject/includes/assets/images/album_cover.jpg" />
<br />
<em>Title of Album</em>
</div>
<div class="window_main">
teset
</div>
</div>
<div class="abs window_bottom">
Genre: Rock/Rap
</div>
</div>
<span class="abs ui-resizable-handle ui-resizable-se"></span>
</div>
</html>e Aqui o Controller
package br.com.coliseu.controller;
import br.com.caelum.vraptor.Get;
import br.com.caelum.vraptor.Path;
import br.com.caelum.vraptor.Resource;
import br.com.caelum.vraptor.Result;
@Resource
public class IndexController {
private final Result result;
public IndexController(Result result) {
this.result = result;
}
@Path("/")
public void index() {
}
@Get
@Path("/pessoa")
public void pessoa() {
}
}
tenta fazer algo mais simples, ver funcionando e depois evolua isso pra sua solução completa.
senão fica difícil saber se o erro está no código que eu te passei ou no resto do seu javascript, ou até no resto do html
Então cara tipo esse ta funcionando de boa o javascript e de toda o desktop jquery, te mandei porque ele faz o esquema de verificar se tem #, caso seja esse o problema, abixo somente o javascript que faz a chamada da janela:
# $('a.icon').live('mousedown', function() {
# // Realce o ícone.
# JQD.util.clear_active();
# $(this).addClass('active');
# }).live('dblclick', function() {
# // Receba o destino do link.
# var x = $(this).attr('href');
# var y = $(x).find('a').attr('href');
#
# // Mostrar o botão da barra de tarefas.
# if ($(x).is(':hidden')) {
# $(x).remove().appendTo('#dock');
# $(x).show('fast');
# }
#
# // Traga a janela para a frente.
# JQD.util.window_flat();
# $(y).addClass('window_stack').show();
#
#
# < -------------------------------------------------------------------------------------->
#
# $.get($(this).attr('rel'), function(resposta) {
# //substitui o conteudo da div pelo que veio na resposta
# $('#idwindow').html(resposta);
# });
#
# < ----------------------------------------------------------------------------------->
#
# }).live('mouseenter', function() {
# $(this).die('mouseenter').draggable({
# revert: true,
# containment: 'parent'
# });
# }); aqui é onde ele faz a chamada do #icon_dock_pessoas que chama a div idwindow, observe que eu passo o rel = /pessoa que é o que o get pega no java script
<a class="abs icon" style="left:20px;top:90px;" href="#icon_dock_pessoas" rel="/pessoa">
<img src="../../../ColiseuProject/includes/assets/images/icons/pessoas48.png" />
Pessoas
</a><li id="icon_dock_pessoas">
<a href="#idwindow">
<img src="../../../ColiseuProject/includes/assets/images/icons/pessoas22.png" />
Pessoas
</a>
</li>aqui a div window
<div id="idwindow" class="abs window" >
</div>daí tem jsp pessoa que já te passei.
entendi…
o problema é que qdo vc coloca “/pessoa” o browser vai redirecionar pra raiz do contexto:
http://localhost:8080/pessoa por exemplo
vc provavelmente precisa incluir o context path tb…
troque o rel do seu link de
rel="/pessoa"para
rel="<c:url value="/pessoa" />"assim ele vai incluir também o context-path (não esqueça de declarar a taglib c no começo do arquivo)
Cara pelo q eu entendi vc quer abrir dentro do index um segundo jsp certo este segundo por sua vez dentro de uma aba como se fosse uma janel do windows… se for assim tem um geito pratico que é utilizando iframe dentro do teu html… e redirecionando para a a pagina pessoa…
Bom assim na empresa a gente faz dessa maneira mas é um esquema diferente e se for fazer uma coisa bem completa usando esses fontes ai vai levar um tempo eu ja mechi neles uma vez, mas se conseguir é bem bacana…
como eu falei a gente tem um esquema assim, que via js gente adiciona um html no body ja com os eventos de widows e e no corpo um iframe redirecionando para uma pagina jsp, sendo assim fica tudo separado e organizado… eu tenho um exemplo se quiser pegar de window integrado com jsf aqui em casa seria so pegar os fontes e adicionar com o projeto do vraptor… funcionaria bem de boa…
Galera eu consegui fazer com iframe, eu vou fazer, e depois eu posto aqui para quem quiser fazer o mesmo, valeu Lucas e Wolmir.