Menubar primefaces

ThalesSilva · Novembro 30, 2012, 12:04am

Olá.

Tenho um menu bar no topo da página com as ações.

Caso o usuário click em alterar gostaria de carregar o div=‘conteudo’ com a pagina xhtml.

<p:submenu label="Meus Dados" icon="ui-icon-contact">
	<p:menuitem value="Alterar" action="#{menuBean.pagina}" update="conteudo" />
</p:submenu>

Porém não estou conseguindo atribuir um parametro(página a ser carregada) para ser enviado ao Bean.

Alguma dica?

Azalin · Novembro 30, 2012, 8:04am

manda seu Bean ai !

jeffev · Novembro 30, 2012, 8:07am

De noite quando chegar em casa posto como eu fiz.

ThalesSilva · Novembro 30, 2012, 10:38am

O xhtml:

<!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:p="http://primefaces.org/ui">

<h:head>
	<link
		href="#{facesContext.externalContext.requestContextPath}/resources/nomedoSkin/theme.css"
		rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="estilo.css" />
</h:head>
<h:body>


	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}
</style>



	<p:layout fullPage="true">

		<p:layoutUnit position="north" size="60" resizable="false"
			closable="false" collapsible="false">
			<h:form>
				<p:menubar autoSubmenuDisplay="true">


					<p:submenu label="Meus Dados">
						<p:menuitem value="Alterar" action="#{menuBean.pagina}" /> Ao Selecionar a opção carrega o XHTML no layoutUnit
					</p:submenu>

					<p:submenu label="Usuários" icon="ui-icon-contact">

						<p:submenu label="Administrador">
							<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
						</p:submenu>

						<p:submenu label="Associado">
							<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
						</p:submenu>

						<p:submenu label="Credenciado">
							<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
						</p:submenu>

						<p:submenu label="Representante">
							<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
						</p:submenu>

					</p:submenu>

					<p:submenu label="Gerenciar" icon="ui-icon-contact">

						<p:submenu label="Planos">
							<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
						</p:submenu>

						<p:submenu label="Procedimentos">
							<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
							<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
						</p:submenu>

					</p:submenu>

					<p:submenu label="Relátorios" icon="ui-icon-contact">

						<p:submenu label="Listar">
							<p:menuitem value="Associados" url="#" helpText="CTRL+N" />
							<p:menuitem value="Credenciados" url="#" helpText="CTRL+N" />
							<p:menuitem value="Representantes" url="#" helpText="CTRL+N" />
						</p:submenu>

						<p:submenu label="Visualizar">
							<p:menuitem value="Financeiro" url="#" helpText="CTRL+N" />
							<p:menuitem value="Procedimentos" url="#" helpText="CTRL+N" />
							<p:menuitem value="Planos" url="#" helpText="CTRL+N" />
						</p:submenu>

						<p:submenu label="Gerar">
							<p:menuitem value="Financeiro" url="#" helpText="CTRL+N" />
							<p:menuitem value="Procedimentos" url="#" helpText="CTRL+N" />
							<p:menuitem value="Planos" url="#" helpText="CTRL+N" />
						</p:submenu>

					</p:submenu>

					<p:menuitem value="Sair" url="#" />

				</p:menubar>
			</h:form>


		</p:layoutUnit>


		<p:layoutUnit position="east" size="400" header="Meus dados"
			resizable="true" closable="false" collapsible="true" effect="drop">
			<font size="2"> <br />NOME:&nbsp;<h:outputLabel for="nome"
					value="Thales do Nascimento da Silva" /> <br />CATEGORIA:&nbsp;<h:outputLabel
					for="categoria" value="Administrador" /> <br /> <p:separator
					id="customSeparator" style="height:20px" />

				<center>
					<p:calendar mode="inline" id="inlineCal" />
				</center>

			</font>
		</p:layoutUnit>

		<p:layoutUnit position="center">
                          Carrega o xhtml aqui
		</p:layoutUnit>

	</p:layout>

</h:body>
</html>

d34d_d3v1l · Novembro 30, 2012, 10:43am

legal,
eu nao sei como que faz para casos de navegação,
vai ser legal aprender.

Bom tópico!

Bom, o action eu retorno uma string evai direto lá pro arquivo…
Aí acho que carrega a pagina inteira… Carregar por ajax seria uma alternativa legal…
eu só tenho

top

conteudo

footer

ThalesSilva · Novembro 30, 2012, 6:51pm

Alguém mais tem alguma sugestão?

benignoms · Novembro 30, 2012, 10:51pm

O post é antigo e possui algumas imagens quebradas, mas acho que é o que você precisa:

http://benignosales.wordpress.com/2010/11/27/utilizando-uiinclude-com-ajax/

cristianoassis · Dezembro 1, 2012, 9:34am

Olá,

Você pode criar uma template

<?xml version='1.0' encoding='ISO-8859-1' ?>
<!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:p="http://primefaces.org/ui"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
 	<meta name="description" content="" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="content-language" content="pt-br" />
        <meta name="robots" content="noindex, nofollow" />
    </h:head>
    <h:body> 
         <p:panel style="width: 1000px; margin: 0 auto; min-height: 595px; border: none" >
            <h:panelGrid columns="1" style="width: 100%;">
                <ui:insert name="usuario" >
                    <h:form>
                        <div class="left">
                            <p:graphicImage value="#{usuarioFace.loggedUser.empresa.logo_top}"/>
                        </div>
                        <div class="infos-usuario right">
                        </div>
                    </h:form>
                </ui:insert>                    
                <ui:insert name="menu">
                    <h:form> 
                        <p:menubar  
                            model="#{usuarioFace.menuXhtml()}">
                        </p:menubar>
                    </h:form>
                </ui:insert>
                <ui:insert name="conteudo" >
                    <h:form>
                        <div id="conteudo" class="conteudo-home left">
                        </div>  
                    </h:form>    
                </ui:insert>
            </h:panelGrid>            
        </p:panel>
        <div class="rodape">
            <div class="rodape-conteudo">
            </div>
        </div>
    </h:body>
</html>

E na página jsf você informa qual é a template ela vai utilizar.

<?xml version='1.0' encoding='ISO-8859-1' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                    xmlns:p="http://primefaces.org/ui"
                    template="#{pageContext.servletContext.contextPath}/templates/padraoTemplate.xhtml"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:h="http://java.sun.com/jsf/html">
        <ui:define name="[b]conteudo[/b]">   
            <f:view contentType="text/html; charset=ISO-8859-1">             
            <h:body>

Abraço,

ThalesSilva · Dezembro 2, 2012, 9:26pm

Boa noite, agradeço a ajuda do pessoal…

Consegui avançar mas não resolver o problema.

Consegui passar a pagina que deve ser carregada no layout, através do MenuBar.

Porém quando eu aciono o menubar aparece a seguinte messagem no layout:
The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form>

[code]

<h:head>

</h:head>
<h:body>

<style type="text/css">

.ui-layout-north {
z-index: 20 !important;
overflow: visible;
}

.ui-layout-north .ui-layout-unit-content {
overflow: visible;
}

<p:layout fullPage="true">

	<p:layoutUnit position="north" size="60" resizable="false"
		closable="false" collapsible="false">
		<h:form>
			<p:menubar autoSubmenuDisplay="true">


				<p:submenu label="Meus Dados">
					<p:menuitem value="Alterar" actionListener="#{menuBean.listener}"
						update=":conteudo">
						<f:param id="pagina" name="pagina" value="meusdados.xhtml" />
					</p:menuitem>>
				</p:submenu>

				<p:submenu label="Usuários" icon="ui-icon-contact">

					<p:submenu label="Administrador">
						<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
					</p:submenu>

					<p:submenu label="Associado">
						<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
					</p:submenu>

					<p:submenu label="Credenciado">
						<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
					</p:submenu>

					<p:submenu label="Representante">
						<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
					</p:submenu>

				</p:submenu>

				<p:submenu label="Gerenciar" icon="ui-icon-contact">

					<p:submenu label="Planos">
						<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
					</p:submenu>

					<p:submenu label="Procedimentos">
						<p:menuitem value="Adicionar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Alterar" url="#" helpText="CTRL+N" />
						<p:menuitem value="Visualizar" url="#" helpText="CTRL+N" />
					</p:submenu>

				</p:submenu>

				<p:submenu label="Relátorios" icon="ui-icon-contact">

					<p:submenu label="Listar">
						<p:menuitem value="Associados" url="#" helpText="CTRL+N" />
						<p:menuitem value="Credenciados" url="#" helpText="CTRL+N" />
						<p:menuitem value="Representantes" url="#" helpText="CTRL+N" />
					</p:submenu>

					<p:submenu label="Visualizar">
						<p:menuitem value="Financeiro" url="#" helpText="CTRL+N" />
						<p:menuitem value="Procedimentos" url="#" helpText="CTRL+N" />
						<p:menuitem value="Planos" url="#" helpText="CTRL+N" />
					</p:submenu>

					<p:submenu label="Gerar">
						<p:menuitem value="Financeiro" url="#" helpText="CTRL+N" />
						<p:menuitem value="Procedimentos" url="#" helpText="CTRL+N" />
						<p:menuitem value="Planos" url="#" helpText="CTRL+N" />
					</p:submenu>

				</p:submenu>
				<p:menuitem value="Sair" url="#" />
			</p:menubar>
		</h:form>
	</p:layoutUnit>

	<p:layoutUnit position="east" size="400" header="Meus dados"
		resizable="true" closable="false" collapsible="true" effect="drop">
		<font size="2"> <br />NOME:&nbsp;<h:outputLabel for="nome"
				value="Thales do Nascimento da Silva" /> <br />CATEGORIA:&nbsp;<h:outputLabel
				for="categoria" value="Administrador" /> <br /> <p:separator
				id="customSeparator" style="height:20px" /> <h:form>
				<h:commandButton actionListener="#{menuBean.listener}"
					update=":conteudo">
					<f:param id="pagina" name="pagina" value="meusdados.xhtml" />
				</h:commandButton>
			</h:form> <p:calendar mode="inline" id="inlineCal" />

		</font>
	</p:layoutUnit>

	<p:layoutUnit position="center" id="conteudo">
		<ui:include src="#{menuBean.pagina}" />
	</p:layoutUnit>

</p:layout>

</h:body>

[/code]

[code]import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.UIParameter;
import javax.faces.event.ActionEvent;

@ManagedBean(name = “menuBean”)
@SessionScoped
public class MenuBean {

private String pagina = "dados.xhtml";

public String getPagina() {
	return pagina;
}

public void setPagina(String pagina) {
	this.pagina = pagina;
}

public String listener(ActionEvent ev) {
	UIParameter component = (UIParameter) ev.getComponent().findComponent("pagina");
	return (String) component.getValue();
}

}[/code]

system · Dezembro 30, 2015, 1:10pm

Menubar primefaces

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI