Abrir nova tela dentro do layout sem mudar de pagina

17 de agosto de 2012 4 respostas

lucas_h_elias 17 de agosto de 2012

Boa tarde galera.

Sou novo na implementação de aplicações web, e estou montando um pequeno programa que no caso passando de desktop para web.
Eu estou utilizando JSF 2.1 e o Primefaces 3.3.1.

Eu fiz uma pagina contendo 2 layotunits um na lateral direita e o outro que fica no centralizado ( que praticamente fica com o restante da tela), dentro dele criei um menu bar contendo os menus de acesso as demais telas do sistema.

Porem eu não sei como eu posso fazer, para que quando eu abrir uma das telas do menubar, a nova tela ser aberta dentro do layout central e não redirecionar para uma nova pagina xhtml (.jsf).

Já tentei inserir nas paginas que forem abrir coloca-los todos dentro de um p:dialog, porem quando eu tento utiliza-lo em alguma pagina, simplesmente não aparece nada do que há na pagina, aparece ela inteira em branco somente com uma setinha preta no canto da tela.

pagina dos layouts – home

<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">


    <h:head>
        <title>Health Monitor</title>
        <link type="text/css" rel="stylesheet" href="./Resources/jquery-ui-1.8.21.custom.css" />
    </h:head>

    <h:body>
        <h:form>

            <p:layout fullPage="true">
                <p:layoutUnit position="east"  collapsed="true" collapsible="true"  size="100">
                    <center>
                    <p:button  icon="Resources/seta.png"/>
                    </center>
                </p:layoutUnit>

                <p:layoutUnit position="center" style="background-color:darkblue  ; background-image:'background.jpg'; height: 300px; width: 300px">
                    
                    <p:menubar model="#{menuBean.model}"  autoDisplay="false" style="height: 30px;  font-size: 13px; padding: 5px; alignment-adjust: middle"/>

                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>
</html>

Bean do menu

package com.health.monitor.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import org.primefaces.component.menuitem.MenuItem;
import org.primefaces.component.submenu.Submenu;
import org.primefaces.model.DefaultMenuModel;
import org.primefaces.model.MenuModel;

@ManagedBean(name = "menuBean")
@RequestScoped
public class MenuBean {

    private MenuModel model;

    public MenuBean() {
        model = new DefaultMenuModel();

        //CADASTROS
        
        Submenu submenu = new Submenu();
        submenu.setLabel("Cadastros");
        
        MenuItem item = new MenuItem();
        item = new MenuItem();
        item.setValue("Clinica");
        item.setUrl("clinica.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);

        item = new MenuItem();
        item.setValue("Exame");
        item.setUrl("exame.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        item = new MenuItem();
        item.setValue("Especialidade");
        item.setUrl("especialidade.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        item = new MenuItem();
        item.setValue("Medico");
        item.setUrl("medico.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        item = new MenuItem();
        item.setValue("Remedio"); 
        item.setUrl("remedio.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        //CONSULTAS
        
        submenu = new Submenu();
        submenu.setLabel("Consultas");
        item = new MenuItem();
        item.setValue("Historico");
        item.setUrl("historico.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        submenu = new Submenu();

        //ADMINISTRACAO
        
        submenu = new Submenu();
        submenu.setLabel("Administracao");
        item = new MenuItem();
        item.setValue("Paramestros Backup");
        item.setUrl("backup.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        item = new MenuItem();
        item.setValue("Backup");
        item.setUrl("historico.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);

        item = new MenuItem();
        item.setValue("Usuario");
        item.setUrl("usuario.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        item = new MenuItem();
        item.setValue("Paciente");
        item.setUrl("paciente.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        //SOBRE
        
        submenu = new Submenu();
        submenu.setLabel("Sobre");
        item = new MenuItem();
        item.setValue("Health Monitor Web");
        item.setUrl("about.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        item = new MenuItem();
        item.setValue("bla blaa");
        item.setUrl("bla bla.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);
        
        //SAIR
        
        submenu = new Submenu();
        submenu.setLabel("Sair");
        item.setValue("Sair");
        item.setUrl("login.xhtml");
        submenu.getChildren().add(item);
        model.addSubmenu(submenu);

    }
    
    public MenuModel getModel() {
        return model;
    }
}

Alguém poderia me ajudar a compreender como funciona ou me ajudar explicando como eu poderia fazer?

4 Respostas

felipehts 17 de ago. de 2012

Amigo eu prefiro utilizar DIV + <h:panelGroup
EXEMPLO:

OBS: Se realmente quiser pelo: “layoutUnit”, você deve colocar o ID no “layoutUnit”, e separar um layoutUnit para o menu e outro para conteúdo, sendo assim basta colocar um update=“ID” no menuitem.

//INDEX.XHTML

<div id="geral">
            <div id="topo">
               //TOPO
                   
            </div>

            <div id="menu">
                       <p:menubar >
                        <p:submenu  label="Cadastros" icon="ui-icon-note">      
                       <p:menuitem  update="@form"   value="Clientes" ajax="true"  action="#{conteudoController.setUrl('OUTROCONTEUDO.xhtml')}" />
                        </p:submenu>
                    </p:menubar>
              
            </div>
          


            <div id="conteudo">          
                <h:panelGroup  >
                    <ui:include src="#{conteudoController.url}" /> 
                 </h:panelGroup>                   
            </div> 
                
            <div id="rodape">

                <h1>teste </h1>

            </div>
        </div>

//CONTEUDOCONTROLLER

/**
 *
 * @author felipehts
 */
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;




@ManagedBean
@SessionScoped
public class ConteudoController {
private String url="index2.html";



public String getUrl(){
    return this.url;
}
public void setUrl(String url){
    this.url = url;
}

lucas_h_elias 17 de ago. de 2012

Então mas como eu vou utilizar o menu dinâmico, porque depois em cima dessa construção eu vou inserir verificação de permissões, para saber o que vou poder carregar ou não, e como não quero fazer isto via tabelas de banco de dados tão já, então vou precisar.

Ai eu iria ter que configurar esse método que você inseriu diretamente na construção do meu menubar, porem o que seria o update ="@form"
porque na construção do menubar, acho que naõ consigo fazer essas atribuições já que ele é simplesmente criado de forma default, posso estar errado pensando assim tbm heheh.

É que no lugar onde eu estou não consigo efetuar um teste e ver se daria certo.

Mas vou tentar incluir a sua dica e verificar se dará certo!

Valew felipehts

lucas_h_elias 31 de ago. de 2012

felipehts

Eu consegui fazer com que as minhas tela abrissem dentro do mesmo layoutunit, porem da forma como você passou não consegui fazer funcionar, eu consegui utilizando os facets, inserindo o <ui:insert name = nome tela /> na tela que gostaria que abrisse as telas abertas.

Porem isto dai surgiu uma nova duvida, como é praticamente um sistema de desktop para web, ao abrir uma segunda pagina ele não mantem as duas, ele remove uma tela e coloca a outra no lugar.

Em vários exemplos que eu encontrei todos eles somente falam que é melhor abrir como uma nova aba, mas ai ficaria bem estranho ter que ficar abrindo telas e telas em abas, e a tela onde há o menu iria ficar somente para abrir as telas…

Você por acaso já passou por uma situação destas e saberia indicar algo?

lucas_h_elias 11 de set. de 2012

Resolvi este problema utilizando os facelets tanto na pagina que eu gostaria que aparecesse, quanto na pagina onde irá encapsular essas novas telas.

Criado 17 de agosto de 2012

Ultima resposta 11 de set. de 2012

Respostas 4

Participantes 2

4 Respostas

Topicos relacionados