Desenvolvimento Web

mts_designer · Agosto 6, 2012

Olá turma, estou desenvolvendo um sistema web, resumidamente o sistema é uma especie de cadastro de documentos históricos.

Enfim, o projeto está dividido em pacotes Web, Bussines e Persistence. Estou cuidando da parte Web.

Tecnologias e Ferramentas:

-HTML 5 + CSS 3 + Javascript

-JSF + Hibernate

-Banco: PostgreSQL

-Server: JBOSS 7.1

Sobre o site, eu fiz um esquema com Ajax para os botões carregarem as páginas dentro de uma DIV que fica no index, para evitar a duplicidade dos códigos dos menus e aquela sensação de ficar carregando todo o site a cada clique de botão. Utilizei os códigos achados nesse post: http://wbruno.com.br/2011/03/30/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/

Mas o problema de se usar Ajax (com Jquery) para isso é que não fica um histórico de navegação e indexação das paginas na url do navegador. E o maior problema é que as páginas carregadas dentro da div não conseguiam executar seus próprios javascripts, tá dando erro de localização dos mesmos, ou algo do tipo.

Então essa é a primeira dúvida: Como eu crio um carregamento de página dentro de uma div, sem utilizar Ajax? Com html 5 e css3 e caso necessite o mínimo de javascript possível.

A segunda dúvida:

Alguem sabe um bom tutorial ou boas referencias, para controle de sessão? Vou explicar o que eu tenho em mente:

_Ao entrar no site, tem uma div (vou chamar ela de LoginArea) com o form de login e senha basico, botão entrar e registrar.

_Ao logar-se, se a autenticação estiver OK, gostaria de trocar o conteúdo do LoginArea para um texto de "Bem vindo, #nomeDoUsuário", e um botão de logout e um botão de painel de controle, esse irá linkar a página PainelUser.jsp se for usuário comum, ou a página PainelAdmin.jps se o usuário tiver chave admin.

Haverá um botão no menu chamado 'Cadastrar Documento', que só aparecera se houver um usuário autenticado, já o botão 'Pesquisar' estará disponível para os visitantes gerais.

Por enquanto essas são os dois problemas que to estou tentando resolver, não estou no computador do serviço, por isso não postei código ainda ou até mesmo imagens. Mas espero que com o texto esteja claro a visualização do problema.

Qualquer coisa edito com novas informações e imagens.

William Bruno · Agosto 6, 2012

Utilizei os códigos achados nesse post: http://wbruno.com.br/2011/03/30/navegacao-sem-refresh-carregando-conteudo-ajax-em-div/

opa! meu blog :lol:

Mas o problema de se usar Ajax (com Jquery) para isso é que não fica um histórico de navegação e indexação das paginas na url do navegador.

Okay, então use pushState

http://wbruno.com.br/2012/02/22/window-history-pushstate-javascript-trocando-url-usando-api-html5-em-paginas-carregadas-ajax/

E se quiser, faça um fallback com # para o IE:

http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/

E o maior problema é que as páginas carregadas dentro da div não conseguiam executar seus próprios javascripts, tá dando erro de localização dos mesmos, ou algo do tipo.

sim, exatamente.

Para corrigir isso, deixe todo o js que você precisar, já carregado na index.

E ai, leia isso para conseguir executar eles:

http://wbruno.com.br/2011/08/22/usando-lightbox-em-pagina-carregada-ajax/

JCMais · Agosto 6, 2012

Mas o problema de se usar Ajax (com Jquery) para isso é que não fica um histórico de navegação e indexação das paginas na url do navegador. E o maior problema é que as páginas carregadas dentro da div não conseguiam executar seus próprios javascripts, tá dando erro de localização dos mesmos, ou algo do tipo.

Então essa é a primeira dúvida: Como eu crio um carregamento de página dentro de uma div, sem utilizar Ajax? Com html 5 e css3 e caso necessite o mínimo de javascript possível.

Você vai precisar usar Ajax, porém para resolver o problema do histórico, você pode usar a History Api do HTML5, têm uma biblioteca que trata de incompatibilidades entre navegadores e até um Polyfill para navegadores antigos: History.js

Alguem sabe um bom tutorial ou boas referencias, para controle de sessão?

Depende da linguagem e da forma que irá ser implementado, pelo o que você postou, está usando Java, então não tenho nenhuma referência que eu possa te passar, mas basicamente você poderia criar um endpoint que você manda uma requisição ajax ao efetuar login, se o login for aceito você retorna informando e então o código para troca de página é executado.

mts_designer · Agosto 6, 2012

Caraca Willian, muito fera a resposta quase que instantânea hahaha ae sim heim!

Seu post me ajudou muito e foi a solução até que ter os problemas com javascript, pois sobre a navegação dos botões voltar e avançar, para mim como usuário final não seriam tão necessárias, pois o site vai ter no máximo 3 botões.

Mas a questão do javascript é meio importante, um exemplo é o pattern de e-mail que se colocado na própria tag do html 5 não funciona devidamente, então sou obrigado a recorrer a javascript para fazer validação de formulários.

Como citei, não estou na máquina que está o projeto, então só irei implementar suas sugestões amanha de manha, qualquer coisa eu posto aqui os resultados.

Muito obrigado pela atenção e a resposta quase instantânea hehehehe

mts_designer · Agosto 7, 2012

Não to conseguindo editar o ultimo post, então desculpa o double post...

Willian, o script parou de funcionar, estou testando tanto no Chrome como no Firefox, utilizei o script desse post seu: http://wbruno.com.br/2011/11/25/carregando-conteudo-ajax-trocando-url-jquery/

No momento, ao clicar no botão Pesquisar, ele carrega a página no navegador e não na div.

segue meu código:

index.jsp:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Grão-Pará</title>

<link href="/GraoPara/faces/pages/css/principal.css" rel="stylesheet" type="text/css" />
<link href="/GraoPara/faces/pages/css/tabs.css" rel="stylesheet" type="text/css" />
<link href="/GraoPara/faces/pages/css/controle.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="/GraoPara/faces/pages/javascript/ajax.js"></script>
<script type="text/javascript" src="/GraoPara/faces/pages/javascript/instrucao.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

		<!-- Scripts para validações...	
		<script type="text/javascript" src="/GraoPara/faces/pages/javascript/jquery.validationEngine.js" charset="utf-8"></script>
		<script type="text/javascript" src="/GraoPara/faces/pages/javascript/languages/jquery.validationEngine-pt.js" charset="utf-8"></script>
		<script type="text/javascript" src="/GraoPara/faces/pages/javascript/script.js"></script>
		 -->

<script type="text/javascript">  
$(document).ready(function(){  
    var content = $('#content');  

    //pre carregando o gif  
    loading = new Image(); loading.src = 'ico-loading.gif';  



    $('#menu a').click(function( e ){  
        var arq = pega_arq( $( this ).attr('href') );  
        abre( arq, content );  
    });  


    /* iniciando com a home */  
    abre( pega_arq( document.location.href ), content );   
});  
	function abre( href, content ){  
    /*content.html( '<img src="ico-loading.gif" />' );*/  


    $.ajax({  
        url: href,  
        success: function( response ){        
            content.delay(1000).hide().html( response ).fadeIn();  

            init_plugins( href );  
        }  
    });  
}  
function pega_arq( url ){  
    var file = url.split('#');  
    return ( file[1] ) ? file[1]+'.html' : 'home.html';  
}  
function init_plugins( href )  
{  
    if( href=='lightbox.html' )  
    {  
        $('#gallery a').click(function( e ){  
            e.preventDefault();  
        })  
        $('#gallery').lightBox();  
    }  
}    

</script> 

</head>

<body>

<div class="container">
	<div class="header">
		<!-- Começo do banner -->
		<a href="#" class="banner"></a>
	</div>
	<!-- Fim do Banner -->
	<!-- Começo do menu lateral -->
	<div class="sidebar1">

		<!--Começo da área de login -->
		<form method="post" action = "LoginServlet">
			<fieldset>
				<label for="login">Login:</label>
					<input class="inputLogin"
						type="text" name="login" height="30px" size="auto"
						placeholder="Seu login" required autofocus>
				<label for="senha">Senha:</label>
					<input class="inputLogin"
						type="password" name="senha" height="30px" size="auto"
						placeholder="Sua senha" required>
			</fieldset>
			<fieldset>
				<input class="buttonEntrar" type="submit" name="Entrar"
					value="Entrar" />
			</fieldset>
		</form>
		<fieldset>
			<a onclick="abrirPag('/GraoPara/faces/pages/public/CadUsuario.jsp');">
				<input
					class="buttonRegistrar" type="button" name="Registrar"
					value="Registrar" />
			</a>
		</fieldset>
		<!-- Fim da área de login -->

		<article class="menuLateral">  
		<ul class="nav" id="menu">
			<li><a href="/GraoPara/faces/pages/public/pesquisa.jsp">Pesquisar</a></li>
			<li><section id="bt2"><a href="#CadastroDocumento"
				onclick="abre('/GraoPara/CadastraDocumentos' , '/GraoPara/faces/pages/protected/user/cadastroDocumentos.jsp');">Cadastrar
					Documento</a></section></li>
			<li><section id="bt3"><a href="#UserControle"
				onclick="abre('/GraoPara/PainelUser' , '/GraoPara/faces/pages/protected/user/UserControle.jsp');">Painel
					User</a></section></li>
			<li><a href="/GraoPara/faces/pages/protected/admin/AdminControle.html">Painel
					Admin</a></li>
		</ul>
		</article>  
		<p>Área que se expande ao ir digitando algo, pode adicionar
			outros botões acima.</p>
		<p>Aqui podemos colocar um texto explicando o projeto Grão-Pará</p>
	</div>
	<!-- Fim do Menu Lateral -->
	<div class="content" id="content">TESTE DE CARREGAMENTO</div>
	<!-- Começo do Rodapé -->
	<div class="footer">
		<p>Copyright © - Universidade Federal de São Paulo - UNIFESP 2012</p>
		<a href="#"> Sobre </a> - <a href="#"> Pesquisar </a>
	</div>
	<!-- Fim do Rodapé -->
	<!-- end .container -->
</div>
</body>
</html>

Dae estou testando tanto o conteudo da página pesquisar.jsp e a página paineladmin.html,

segue a pagina pesquisar.jsp:

<!doctype html>
<html>
<head>
<meta charset="utf-8" http-equiv="Content-Type">
<link href="../css/principal.css" rel="stylesheet" type="text/css">

<title>Pesquisa de Documento</title>
</head>

<body>
<div id="content">
<h2>Pesquisa de Documento</h2>
<form action="#" method="POST" name="cadastro" onSubmit="return valida();">
	<table class="tableForms" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
					<tr>
			<td height="20">
				<label for="identificacao" class="labelForms">Identifição:</label>
			</td>
			<td height="20">
			 	<select name="identificacao" class="input">
						<option selected>Selecione...</option>
						<option value="codice">Número de Códice</option>
						<option value="caixa">Número da Caixa</option>
				</select>
			</td>
		</tr>
		<tr>
			<td height="20">
				<label for="codigo" class="labelForms">Código:</label>
			</td>
			<td width="377" height="20">
					<input class="input" name="codigo" type="text" size="10" maxlength="5">
                       <label for="maxDigitos" class="labelForms">(máx. 5 digitos)</label>
			</td>
		</tr>
		<tr>
			<td height="20">
				<label for="nomeDocumento" class="labelForms">Nome do Documento:</label>
			</td>
			<td width="377" height="20">
					<input class="input" name="nome" type="text" size="20" maxlength="100">
                       <label for="maxDigitos" class="labelForms">(máx.100 digitos)</label> 
			</td>
		</tr>
		<tr>
			<td height="20">
				<label for="numeroAPEP" class="labelForms">Número APEP ou Sequencial:</label>
			</td>
			<td width="377" height="20">
					<input class="input" name="numero" type="text" size="10" maxlength="4">
                       <label for="maxDigitos" class="labelForms">(máx. 4 digitos)</label>
			</td>
		</tr>
		<tr>
			<td height="20">
				<label for="autor" class="labelForms">Autor do Documento:</label>
			</td>
			<td width="377" height="20">
			 		<input class="input" name="autor" type="text" size="20" maxlength="100">
                       <label for="maxDigitos" class="labelForms">(máx. 100 digitos)</label>
			</td>
		</tr>
		<tr>
			<td height="20">
				<label for="destinario" class="labelForms">Destinatário do Documento:</label>
			</td>
			<td width="377" height="20">

			    	<input class="input" name="destinatario" type="text" size="20" maxlength="100">
                       <label for="maxDigitos" class="labelForms">(máx. 100 digitos)</label>
			</td>
		</tr>
		<tr>
			<td height="20">
				<label for="estado" class="labelForms">Estado:</label>

			</td>
               <td>
                   <select class="inputEstado" name="estado" id="estado">
						<option selected>---</option>
						<option value="AC">AC</option>
						<option value="AL">AL</option>
						<option value="AP">AP</option>
						<option value="AM">AM</option>
						<option value="BA">BA</option>
						<option value="CE">CE</option>
						<option value="ES">ES</option>
						<option value="DF">DF</option>
						<option value="MA">MA</option>
						<option value="MT">MT</option>
						<option value="MS">MS</option>
						<option value="MG">MG</option>
						<option value="PA">PA</option>
						<option value="PB">PB</option>
						<option value="PR">PR</option>
						<option value="PE">PE</option>
						<option value="PI">PI</option>
						<option value="RJ">RJ</option>
						<option value="RN">RN</option>
						<option value="RS">RS</option>
						<option value="RO">RO</option>
						<option value="RR">RR</option>
						<option value="SC">SC</option>
						<option value="SP">SP</option>
						<option value="SE">SE</option>
						<option value="TO">TO</option>
				</select>
               </td>

		</tr>
           <tr>
           	<td height="20">
				<label for="cidade" class="labelForms">Cidade:</label>

			</td>
               <td>
               <input class="input" name="cidade" type="text" size="15" maxlength="8">
               </td>
           </tr>
		<tr>
			<td height="20">
				<label for="dataDocumento" class="labelForms">Data do Documento:</label>
			</td>
			<td height="20">
				<input class="input" type="text" name="data" maxlength="10" onkeyup="Formatadata(this,event)" />
			</td>
		</tr>
		<tr>
			<td height="20">
				<label for="dataDocumento" class="labelForms">Tipo do Documento:</label>
			</td>
			<td height="20">
			 	<select class="input" name="tipoDoc"> <!-- Pegar do Banco de dados os tipos e, caso o usuÃ¡rio selecione outro, exibir campo para cadastrar outro tipo -->
						<option selected>Selecione...</option>
						<option value="codice">Ofícios</option>
						<option value="caixa">Relatórios</option>
						<option value="caixa">Impressos</option>
						<option value="caixa">Processos</option>
						<option value="caixa">Outro</option>
				</select>
			</td>
		</tr>			

		<tr>
			<td height="20" colspan="2">
				<div align="left"> </br>
					<label for="palavrasChaves" class="labelForms">Palavra Chaves:<font color="#990000"></font></label>
				</div>
			</td>
		</tr>
		<tr>
			<td colspan="2">
					<input class="inputPalavraChave" name="chave1" type="text" size="15" maxlength="30"> - 
					<input class="inputPalavraChave" name="chave2" type="text" size="15" maxlength="30"> - 
					<input class="inputPalavraChave" name="chave3" type="text" size="15" maxlength="30"> 
			</td>
		</tr>
		<tr>
			<td height="20"></br> </br><input class="buttonEntrar" type="submit" name="inserir" value="Enviar"></td>
			<td height="20"></td>
		</tr>
	</table>
</form>
</div>
</body>
</html>

William Bruno · Agosto 7, 2012

Se não está funcionando, provavelmente tem algum erro de javascript.

Aperte Ctrl+Shift+J no Firefox

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

http://wbruno.com.br/2011/04/14/como-debugar-ajax-firebug/

mts_designer · Agosto 7, 2012

Ae que ta, no Ctrl+Shift+J só aparece uns warnings do CSS e na tab erro fica limpa.

To conversando aqui com o grupo, e parece que vou ter que dar refresh nos botões, para funcionar o controle de sessão, usando filters.

Então tava pensando, para não ter que duplicar código dos menus, a unica solução seria usar templates? Alguem tem alguma referencia de templates e suas implementações?

Entrar

Arquivado

Desenvolvimento Web

Recommended Posts

mts_designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

mts_designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mts_designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mts_designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante